[Astar]コントラクト備忘録42（Polkadot.jsで取得した内容を表示しよう）（今回の内容はWeb2の内容です）

本日は、Polkadot.jsで取得した値をウェブ上に表示したいと思います。

今回はWeb3の内容ではありませんので、Reactなどを普段触っていない人などが対象の内容です。

まずは、コードはこのようになります。

async function main () {
  
  // Initialise the provider to connect to the local node
  const provider = new WsProvider('wss://rpc.shibuya.astar.network');

  const api = await ApiPromise.create({ provider});

  const contract = new ContractPromise(api, metadata, "YWkppgzx5oZAHLWRDymDnftRBt64okRqNCdufdifFgfjmSH")

  console.log("contract", contract.address.toString())

  const { gasRequired, storageDeposit, result, output }  = await contract.query.get(ALICE,
    {
      gasLimit: api?.registry.createType('WeightV2', {
        refTime: MAX_CALL_WEIGHT,
        proofSize: PROOFSIZE,
      }) as WeightV2,
      storageDepositLimit,
    },)

  console.log("output", output)

  // The actual result from RPC as `ContractExecResult`
  console.log(result.toHuman());

  // the gas consumed for contract execution
  console.log(gasRequired.toHuman());

  return { gasRequired, storageDeposit, result, output };

  }

下のように、returnで返されていることがわかります。

そして、Home関数がこちらです。

export default function Home() {
  const [output, setOutput] = useState<Codec | null>(null);
  const [gasRequired, setGasRequired] = useState<Codec | null>(null);

  useEffect(() => {
    async function fetchData() {
      const { gasRequired, storageDeposit, result, output }  = await main();
      setOutput(output);
      setGasRequired(gasRequired);
    }
    fetchData();
  }, []);

chatGPT

下のように、useStateフックを用いた、stateの宣言をおこなっています。

下のように、userEffectはコンポーネントがマウントされたときや再レンダリング時に実行されます。

returnの中は下のようになっています。

<div>output: {output?.toString()}</div>
<div>gasRequired: {gasRequired?.refTime?.toString()}</div>

こちらは、Reactで用いられるJSX構文になります。

yarn devをしてみると、このように表示されていることが確認できました。

今回は以上です。