서드웹 Dapp에서 여러 체인을 지원하는 방법

이 가이드는 여러 체인에서 작동하는 Dapp을 만드는 방법을 보여줍니다. 이 Dapp에서 우리는 사용자가 체인을 선택하고 해당 체인에서 NFT를 청구할 수 있도록 할 것입니다. 나는 goerli와 Mumbai를 보여줄 것이지만 당신은 어떤 네트워크에서나 그것을 할 수 있고 그것에 열중할 수 있습니다.

시작하기 전에 이 가이드에서 사용할 도구에 대해 자세히 알아볼 수 있는 몇 가지 유용한 리소스가 아래에 나와 있습니다.

View project source code

React SDK

시작하자.

설정

프로젝트 설정

이 안내서에는 Next.js Typescript starter template을 사용하겠습니다.

가이드를 따라하는 경우 thirdweb CLI을 사용하여 템플릿으로 프로젝트를 만들 수 있습니다.

npx thirdweb create --next --ts

Next.js 앱이 이미 있는 경우 다음 단계에 따라 시작할 수 있습니다.

@thirdweb-dev/react 및 @thirdweb-dev/sdk 및 ethers를 설치합니다.

사이트에 MetaMask 인증을 추가합니다. 다음guide에 따라 메타마스크 인증을 추가할 수 있습니다.

코드에 들어가기

체인을 저장할 컨텍스트 만들기

Context/Chain.ts라는 새 파일을 만들고 다음을 추가합니다.

import { ChainId } from "@thirdweb-dev/sdk";
import { createContext } from "react";

const ChainContext = createContext({
  selectedChain: ChainId.Mainnet,
  setSelectedChain: (chain: ChainId) => {},
});

export default ChainContext;

이렇게 하면 chainId를 저장하고 변경하기 위한 전역 상태를 만들 수 있습니다.

이제 _app.tsx로 이동하여 다음과 같이 다시 작성하십시오.

import { ChainId } from "@thirdweb-dev/sdk";
import type { AppProps } from "next/app";
import { useState } from "react";
import ChainContext from "../context/Chain";
import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp({ Component, pageProps }: AppProps) {
  const [selectedChain, setSelectedChain] = useState(ChainId.Mumbai);

  return (
    <ChainContext.Provider value={{ selectedChain, setSelectedChain }}>
      <ThirdwebProvider desiredChainId={selectedChain}>
        <Component {...pageProps} />
      </ThirdwebProvider>
    </ChainContext.Provider>
  );
}

export default MyApp;

여기에서 반응 컨텍스트를 추가하고 있으므로 어디에서나 상태에 액세스할 수 있습니다!

네트워크용 드롭다운 만들기

사용자가 네트워크 간에 전환할 수 있는 간단한 드롭다운을 만들 것입니다. 따라서 pages/index.tsx에서 드롭다운을 생성할 이 선택 요소를 추가합니다.

 <select
        value={String(selectedChain)}
        onChange={(e) => setSelectedChain(parseInt(e.target.value))}
      >
        <option value={String(ChainId.Mumbai)}>Mumbai</option>
        <option value={String(ChainId.Goerli)}>Goerli</option>
      </select>

방금 생성한 반응 컨텍스트 상태에 액세스해야 하므로 useContext 후크를 사용하여 이를 수행합니다.

  const { selectedChain, setSelectedChain } = useContext(ChainContext);

또한 다음을 가져와야 합니다.

import { ChainId } from "@thirdweb-dev/react";
import ChainContext from "../context/Chain";

이제 계약 주소의 주소가 있는 JSON 객체를 생성합니다.

 const addresses = {
    [String(ChainId.Mumbai)]: "0x25CB5C350bD3062bEaE7458805Fb069200e37fD5",
    [String(ChainId.Goerli)]: "0xA72234a2b9c1601593062f333D739C93291dF49F",
  };

이것은 우리가 생성한 드롭의 계약 주소를 값으로 사용하여 chainId의 문자열 키를 생성합니다.

함수를 수행하기 위해 Web3Component를 사용합니다. NFT 드롭을 생성했기 때문에 통화 기능을 호출하고 있지만 여러분에게는 다를 수 있습니다!

  <div style={{ maxWidth: "200px" }}>
        <Web3Button
          contractAddress={addresses[String(selectedChain)]}
          action={(contract) => contract.erc721.claim(1)}
        >
          Claim
        </Web3Button>
      </div>

localhost으로 이동하여 앱을 확인하면 네트워크 간에 전환할 수 있으며 모든 것이 완벽하게 작동합니다! 🎉

결론

이 가이드는 사용자가 react sdk를 사용하여 동일한 Dapp의 다른 NFT에서 NFT를 청구하도록 허용하는 방법을 알려줍니다. 궁금한 사항이 있으시면 thirdweb discord 로 문의주세요! 코드를 살펴보고 싶다면 GitHub Repository 을 확인하십시오.