【おまけ】App.jsの中身を解説

コードの解説

それではApp.jsのコードの中身を解説していきます。各種タグの中身は省略して、なるべくシンプルな形で、コードの構成をコメントします。

App.js<s.Screen>
<s.Container>

// ① ロゴ
<StyledLogo/>
<s.SpacerSmall />

<ResponsiveWrapper>
  // ② 左側のGif
  <s.Container>
    <StyledImg/>
  </s.Container>
  <s.SpacerLarge />

  // ③ 中央の枠内コンテンツ
  <s.Container>
    // 1/1000 みたいに供給量を表示
    <s.TextTitle>{data.totalSupply} / {CONFIG.MAX_SUPPLY}</s.TextTitle>

    // コントラクトアドレスを表示。クリックしたらScanページへ
    <s.TextDescription>
      <StyledLink>{truncate(CONFIG.CONTRACT_ADDRESS, 15)}</StyledLink>
    </s.TextDescription>
    <s.SpacerSmall />

    // 現在の供給量と最大供給量に応じて条件分岐
    {Number(data.totalSupply) >= CONFIG.MAX_SUPPLY ? (
      <>
        // ③-1 すべてのNFTがミント済みの場合はこっち。売り切れ表示とOpenSeaリンクが表示される
        <s.TextTitle>The sale has ended.</s.TextTitle>
        <s.TextDescription>You can still find {CONFIG.NFT_NAME} on</s.TextDescription>
        <s.SpacerSmall />
        <StyledLink target={"_blank"} href={CONFIG.MARKETPLACE_LINK}>{CONFIG.MARKETPLACE}</StyledLink>
      </>
    ) : (
      <>
        // ③-2 まだ残っている場合はこっち。
        <s.TextTitle>1 {CONFIG.SYMBOL} costs {CONFIG.DISPLAY_COST}{" "}{CONFIG.NETWORK.SYMBOL}.</s.TextTitle>
        <s.SpacerXSmall />
        <s.TextDescription>Excluding gas fees.</s.TextDescription>
        <s.SpacerSmall />

        // ウォレット接続状況に応じて条件分岐
        {blockchain.account === "" ||
        blockchain.smartContract === null ? (
          <s.Container>
            // ③-2-(a) ウォレット未接続の場合はこっち
            <s.TextDescription>Connect to the {CONFIG.NETWORK.NAME} network</s.TextDescription>
            <s.SpacerSmall />
            // ウォレット接続ボタン @getData
            <StyledButton>CONNECT</StyledButton>

            // エラーメッセージの有無に応じて条件分岐
            {blockchain.errorMsg !== "" ? (
              <>
                 // ウォレット接続エラーが出た場合はエラー表示。エラーがなければなにも表示しない
                <s.SpacerSmall />
                <s.TextDescription>{blockchain.errorMsg}</s.TextDescription>
              </>
            ) : null}
          </s.Container>
        ) : (
          <>
            // ③-2-(b) ウォレット接続済みの場合はこっち
            <s.TextDescription>{feedback}</s.TextDescription>
            <s.SpacerMedium />
            <s.Container>
              // ミント数マイナスボタン @decrementMintAmount
              <StyledRoundButton>-</StyledRoundButton>
              <s.SpacerMedium />
              // ミント数表示
              <s.TextDescription>{mintAmount}</s.TextDescription>
              <s.SpacerMedium />
              // ミント数プラスボタン @incrementMintAmount
              <StyledRoundButton>+</StyledRoundButton>
            </s.Container>
            <s.SpacerSmall />
            <s.Container>
              // 購入ボタン @claimNFTs
              <StyledButton>
                {claimingNft ? "BUSY" : "BUY"}
              </StyledButton>
            </s.Container>
          </>
        )}
      </>
    )}
    <s.SpacerMedium />
  </s.Container>
  <s.SpacerLarge />

  // ④ 右側のGif
  <s.Container>
    <StyledImg/>
  </s.Container>
</ResponsiveWrapper>
<s.SpacerMedium />


// ⑤ 注意書き
<s.Container jc={"center"} ai={"center"} style={{ width: "70%" }}>
  <s.TextDescription>
    Please make sure you are connected to the right network (
    {CONFIG.NETWORK.NAME} Mainnet) and the correct address. Please note:
    Once you make the purchase, you cannot undo this action.
  </s.TextDescription>
  <s.SpacerSmall />
  <s.TextDescription>
    We have set the gas limit to {CONFIG.GAS_LIMIT} for the contract to
    successfully mint your NFT. We recommend that you don't lower the
    gas limit.
  </s.TextDescription>
</s.Container>

)

画面の移り変わり

それではコードと紐付けながら、画面の移り変わりを確認してみましょう。

まず初めの状態では、NFTがまだ売れ残っており、ウォレットに接続していない状態のため、このような画面が表示されます。

続いて、ウォレットを接続すると、現在のMint数が反映され、「BUY」ボタンが表示されるようになります。

そして、すべてのNFTがMint済みになるとこちらのような画面に切り替わります。