次はガスレスNFTドロップを作成します.OpenZeppelinとThirdWeb

ThirdWebとは

thirdweb Solliityを知らなくてもスマートな契約を展開させるプラットフォームで、TypeScriptやPythonを使ったり、コードを書いたりすることもできません.

導入

いくつかの場合では、初期のアクセス低下のようなNFT低下のためにガスを払いたいかもしれません、あるいは、あなたが他の何らかの形で支払いを受け入れているとき.したがって、このガイドでは、誰もが請求することができますガスレスNFTのドロップを作成する方法を見に行くつもりです.私は複数の人々が同じNFTを保持することができますので、ERC - 1155を使用するつもりですが、あなたが好きなようにそれを行うことができます!コードに直接ジャンプしたい場合は、code .

NFTドロップの作成

に移動thirdweb dashboard ダッシュボードをクリックして新しい契約を作成します.ビルドする予定のチェーンを選択します.私はこのガイドのためにムンバイを使用するつもりです.を選択します

と選択ドロップを選択します.ユニークなドロップをドロップする場合は、通常のドロップを選択することができます
詳細を記入し、展開をヒット!

ドロップを作成した後、このようにドロップの新しいNFTを作成します.

最後に、クレームフェーズを追加しましょう!トークンの設定ボタンをクリックすると、詳細を更新する必要がありますに基づいて更新を更新します.あなたは小さな取引を確認するように求められます.

ウェブサイトの構築

我々は、現在、ユーザーが来て、NFTを請求することができるウェブサイトを構築します!

セットアップ

新しい次を作成します.JSアプリ

npx create-next-app gasless-drop

必要な依存関係をインストールします.

npm i @thirdweb-dev/react @thirdweb-dev/sdk ethers # npm

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers # yarn

メタメーク認証の追加

我々はまた、ユーザーが同様にメッセージに署名する必要があるので、アプリケーションで認証を必要とするつもりです!
ラップ全体のアプリThirdwebProvider 次のようにします.

import '../styles/globals.css';
import { ThirdwebProvider, ChainId } from '@thirdweb-dev/react';

function MyApp({ Component, pageProps }) {
    return (
        <ThirdwebProvider desiredChainId={ChainId.Mumbai}>
            <Component {...pageProps} />
        </ThirdwebProvider>
    );
}

export default MyApp;

DesiredChaidは、ビルドしたいチェーンIDです.あなたはChainId SDKが提供するオブジェクトプロバイダーでこの場合、ムンバイに渡します.
認証を追加するには、useMetamask ThirdWebがフックするので、次のようにフックを追加します.

const connectWithMetamask = useMetamask();

インストールしたパッケージからインポートします.

import { useMetamask } from '@thirdweb-dev/react';

最後にボタンを作りましょう.

<button onClick={connectWithMetamask}>Sign in with metamask</button>

我々が我々のサイトでユーザーを認証することができる今、ユーザーが認証されるかどうかチェックしましょう、そして、ユーザがそこにいるならば、Mintボタンを見せてください
ThirdWebはユーザの財布アドレスを取得するためのフックを提供します.

const address = useAddress();

The useAddress フックは「@ hirdweb dev/response」からもインポートされます-

import { useMetamask, useAddress } from '@thirdweb-dev/react';

今、もしユーザが認証された場合、それ以外の場合、このようなサインインボタンが表示されます.

<div className={styles.container}>
    {address ? (
        <h2>You are signed in as {address}</h2>
    ) : (
        <button onClick={connectWithMetamask}>Sign in with metamask</button>
    )}
</div>

一度、それを今すぐあなたのアドレスを表示する必要がありますサイン!🔥

Mint機能の構築

私たちはuseEditionDrop Editionにアクセスし、関数を呼び出します.

const editionDrop = useEditionDrop('EDITION_DROP_ADDRESS');

ダッシュボードから編集ドロップアドレスをコピーしEDITION_ADDRESS
もう一度フックをインポートします.

import { useMetamask, useAddress, useEditionDrop } from '@thirdweb-dev/react';

我々は、NFTを要求する新しい機能を作成します-

const tokenId = 0;
const quantity = 1;

const claimNFT = async () => {
    try {
        await editionDrop?.claimTo(address, tokenId, quantity);
        console.log('🎉 NFT claimed successfully!');
    } catch (err) {
        console.log('💩 Error claiming NFT: ', err);
    }
};

エディションドロップには、メソッドと呼ばれるclaimTo 我々は特定の財布のアドレスにNFTを請求するために使用することができます.私は、コードのより良い読みやすさのために、tokenidと数量の2つの変数を作成しました.番目のargはtokenidです、そして、3番目はそれが見えるように量です.
今すぐNFTを鋳造しよう!
そして、鋳造作業!しかし、我々は取引のガスの支払いをしなければならないので、ガスを支払うようにガスを中継してください、そして、ユーザーは無料で彼らのNFFTを造ることができます!

取引を無用にする

ThirdWebサポートBiconomy そして、ガスを中継するためのOpenzeppelin.このデモのために我々は使用する予定ですOpenZeppelin ガスをリレーするには、OpenZeppelinにヘッドを入れて、アカウントがない場合はすでにサインアップします.
OpenZeppelinで新しいリフティングを作成します

あなたが構築されているネットワークを選択し、名前を再層を与える!
リレイヤーが作成された後に、アドレスをコピーして、あなたがRelayerをつくったネットワークでそれに若干の資金を移してください.
あなたのダッシュボードに転送量を見ることができる必要があります

今すぐに進んで、新しいautotaskを作成すると、いくつかのデータを埋めるように求められます-

からコードを得ることができますhere AutoTaskのコードセクションにペーストします.後にヒットを作成します.一度作成すると、webhook uriをコピーします

次へ戻る.JSアプリケーション、および新規作成.env.local フォルダのルートのファイル.我々は、環境変数を格納するためにこれを使用します!新しい変数を作成するNEXT_PUBLIC_OPENZEPPELIN_URL このように

NEXT_PUBLIC_OPENZEPPELIN_URL=https://api.defender.openzeppelin.com/autotasks/secret-stuff

Env変数を変更したので、開発サーバーを再起動する必要があります.
最後に、openzeppelin uriをThirdwebProvider -

<ThirdwebProvider
  sdkOptions={{
    gasless: {
      openzeppelin: {
        relayerUrl: process.env.NEXT_PUBLIC_OPENZEPPELIN_URL,
      },
    },
  }}
  desiredChainId={desiredChainId}
>

現在、ガス料金はリレーされています、そして、ユーザーはどんなガスも払う必要はありません!
したいコードを見て?We got you!