{address ? (
await contract?.erc721.claim(1)}
>
Claim NFT
) : (
);
};
export default Home;
```
上記のNFT一覧からトークンを選択した際に、トークン個別のページへ遷移して紐づくTBAを操作するページを作りたいので、pages/contract/\[contractAddress\]/\[tokenId\].tsxを作成します。
```typescript
export const getStaticProps: GetStaticProps = async (context) => {
const tokenId = context.params?.tokenId as string;
const sdk = new ThirdwebSDK(activeChain, {
secretKey: process.env.SECRET_KEY,
});
const contract = await sdk.getContract(nftDropAddress);
const nft = await contract.erc721.get(tokenId);
let contractMetadata;
try {
contractMetadata = await contract.metadata.get();
} catch (e) {}
return {
props: {
nft,
contractMetadata: contractMetadata || null,
},
revalidate: 1, // https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
};
};
export const getStaticPaths: GetStaticPaths = async () => {
const sdk = new ThirdwebSDK(activeChain, {
secretKey: process.env.SECRET_KEY,
});
const contract = await sdk.getContract(nftDropAddress);
const nfts = await contract.erc721.getAll();
const paths = nfts.map((nft) => {
return {
params: {
contractAddress: nftDropAddress,
tokenId: nft.metadata.id,
},
};
});
return {
paths,
fallback: "blocking", // can also be true or 'blocking'
};
};
```
useEffect内でトークンに紐づくSmart Walletがすでに作成されているかを確認します。作成されていない場合、後ほど作成するnweSmartWallet関数でsmart walletを作成します。
```typescript
// create a smart wallet for the NFT
useEffect(() => {
const createSmartWallet = async (nft: NFT) => {
if (nft && smartWalletAddress == null && address && wallet) {
const smartWallet = newSmartWallet(nft);
console.log("personal wallet", address);
await smartWallet.connect({
personalWallet: wallet,
});
setSigner(await smartWallet.getSigner());
console.log("signer", signer);
setSmartWalletAddress(await smartWallet.getAddress());
console.log("smart wallet address", await smartWallet.getAddress());
return smartWallet;
} else {
console.log("smart wallet not created");
}
};
createSmartWallet(nft);
}, [nft, smartWalletAddress, address, wallet]);
```
以下2つを完成させます。
1. 新しい「TBA」を「newSmartWallet」関数で作成すること
2. 「SmartWalletConnected」 - ウォレットの情報を表示するコンポーネントで、トークンの請求やウォレットの残高表示も含む
では、新しい「newSmartWallet」関数を作成しましょう。TBAスマートウォレットを作成するために、ERC-6551 registry factory コントラクトを使ってimplementationをクローンします。コンポーネントの中に「SmartWallet」というファイルを作成し、その中に「SmartWallet.ts」というファイルを作成す。このファイルには、スマートウォレットを作成するためのロジックが含まれていて、ERC-6551レジストリを使用してスマートウォレットを設定するには、以下の内容を追加します。
```typescript
import { ethers } from "ethers";
import { SmartWallet } from "@thirdweb-dev/wallets";
import {
TWApiKey,
factoryAddress,
activeChain,
nftDropAddress,
implementation,
} from "../../const/constants";
import { SmartContract, NFT } from "@thirdweb-dev/sdk";
import { WalletOptions } from "@thirdweb-dev/wallets";
import type { SmartWalletConfig } from "@thirdweb-dev/wallets";
import type { BaseContract } from "ethers";
export default function newSmartWallet(token: NFT) {
//Smart Wallet config object
const config: WalletOptionsYour NFTs
Browse the NFTs inside your personal wallet, select one to connect a token bound smart wallet & view it's balance.
Connect a personal wallet to view your owned NFTs
FujitaさんのフォロワーはUSDCをclaimできるよ！
1. まずFujitaさんをフォローしてね
接続中のウォレット: {walletAddress}
)} {/* 検証要求取得ボタン */} {!requestUrl && ( )} {/* QRコード表示 */} {requestUrl && (4. このQRコードを読んで、立ち上がったアプリでXにログインしてね
zkProofの作成が完了したよ!
5. zkProofを提出してトークンを受け取ってね
{txStatus}
)}
{address ? (
) : (
{address ? (
<>
{isMinting ? (
) : (
)}
) : (
loading...
) : (
<>
{numberClaimed} / {numberTotal} claimed
{priceToMint}
{address ? ( <> {isLoading ? ( <>loading... ) : ( )} ) : (ウォレットアドレス：{wallet}
: <>}
{/* Product */}
{/* Product image */}
{/* Product details */}
{isLoading ? (
<>...loading
) : (
)}
{nft?.metadata.name}
Product information
{nft?.metadata.description}
{listings?.length && ({listings![0].buyoutCurrencyValuePerToken.displayValue}{" "} {listings![0].buyoutCurrencyValuePerToken.symbol}
)}
{address ? (
<>
{/* listingがあるとき */}
{listings?.length ? (
<>
{listings![0].sellerAddress != address ? (
<>
) : (
)}
) : (
<>
{/* listingがないとき */}
{nft?.owner == address ? (
<>
{
setSellingPrice(e.target.value);
}}
/>
) : (
)}
)}
) : (
MATIC