Создание одновременных списков разрешений с помощью Signature Drop и Next.js

Узнайте, как создать одновременные списки разрешений, в которых разные пользователи могут покупать NFT из дропа по разной цене в зависимости от того, в каком списке разрешений они находятся.

Что такое thirdweb?

thirdweb — это платформа, которая позволяет вам развертывать смарт-контракты без знания Solidity, вы можете делать это с помощью TypeScript, Python или Go или даже без написания кода.

Введение

В этом руководстве мы собираемся создать Signature drop, где пользователи
смогут подключать свои кошельки к сайту и требовать NFT от дропа. Как только пользователь нажмет Mint, мы сделаем
API-запрос, который проверит, находится ли пользователь в одном из наших списков.

На основе этой проверки мы создадим подпись с разной ценой для каждого списка! Давайте приступим.

Настройка

Для этого руководства я собираюсь использовать стартовый шаблон Next typescript.

Если вы следуете руководству, вы можете создать проект с шаблоном
Next TypeScript с помощью thirdweb CLI:

npx thirdweb create --next --ts
Войти в полноэкранный режим Выйти из полноэкранного режима

Если у вас уже есть приложение Next.js, вы можете просто выполнить следующие шаги для начала работы:

  • Установите @thirdweb-dev/react и @thirdweb-dev/sdk и ethers.
  • Добавьте аутентификацию MetaMask на сайт. Для этого вы можете следовать данному руководству.

По умолчанию сеть в _app.tsx — Mainnet, нам нужно изменить ее на Mumbai.

import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;
Войдите в полноэкранный режим Выйти из полноэкранного режима

Создание Signature Drop и пакетная загрузка NFTs

Нам также необходимо создать Signature Drop и загрузить кучу NFT, которые пользователи могут заявить.
Итак, перейдите на приборную панель thirdweb и создайте Signature Drop!

Заполните детали и разверните контракт!

Теперь давайте пакетно загрузим несколько НФТ, чтобы пользователи могли их чеканить!
Я собираюсь использовать пример пакетной загрузки Pokemon.

Нажмите на пакетную загрузку и загрузите изображения и файл CSV/JSON.

Как только они будут загружены, вы сможете увидеть NFT! Чтобы узнать больше о пакетной загрузке, ознакомьтесь с этим руководством.

Создание веб-сайта

Создание API для генерации подписи

Мы собираемся использовать майнинг подписи на нашем бэкенде, чтобы проверить цену, по которой данный пользователь будет майнить NFT!

Создайте новую папку api в папке pages и generate-mint-sig.ts внутри нее.

Теперь мы создадим базовый API, который будет выводить «gm wagmi».

import type { NextApiRequest, NextApiResponse } from "next";

const generateMintSignature = async (
  req: NextApiRequest,
  res: NextApiResponse,
) => {
  res.send("gm wagmi");
};

export default generateMintSignature;
Вход в полноэкранный режим Выйти из полноэкранного режима

Это создает базовый API для нас, если вы теперь обратитесь к api/generate-mint-sig
вы получите ответ Gm wagmi.

Давайте теперь инициализируем thirdweb SDK!

const sdk = ThirdwebSDK.fromPrivateKey(
  process.env.PRIVATE_KEY as string,
  "mumbai",
);
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы видите, мы используем переменную окружения для инициализации sdk.
Переменная называется PRIVATE_KEY, которая является приватным ключом кошелька.
Создайте новый файл .env.local и добавьте в него свой закрытый ключ.

PRIVATE_KEY=<private_key>
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Как экспортировать свой закрытый ключ

Узнайте, как экспортировать свой закрытый ключ из кошелька.

Для этого создайте файл .env.local в корне вашего проекта и добавьте в него следующее:

PRIVATE_KEY=your-private-key-here
Войти в полноэкранный режим Выйти из полноэкранного режима

Обеспечьте безопасное хранение и доступ к своему закрытому ключу.

  • Никогда не фиксируйте файлы, которые могут содержать ваш закрытый ключ, в системе управления исходными текстами.

Нам также необходимо импортировать ThirdwebSDK:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
Вход в полноэкранный режим Выход из полноэкранного режима

Определение цены НМТ

В этом примере я создаю 2 жестко закодированных массива, но вы можете получить их из файла JSON, из базы данных или из чего угодно!

Итак, добавьте эти 2 массива и функцию для определения цены:

const teamMembers = ["0x39Ab29fAfb5ad19e96CFB1E1c492083492DB89d4"];

const allowList = ["0x6bF08768995E7430184a48e96940B83C15c1653f"];

const determinePrice = (address: string) => {
  if (teamMembers.includes(address)) {
    return 0;
  }
  if (allowList.includes(address)) {
    return 1;
  }
  return 2;
};
Вход в полноэкранный режим Выйти из полноэкранного режима

Итак, если человек находится в списке разрешенных, он будет майнить NFT за 1 MATIC, если он член команды, он будет майнить NFT за 0 MATIC,
и если они не находятся в списке разрешенных, они будут майнить NFT за 2 MATIC.

Генерация подписи

Наконец, мы собираемся получить доступ к Signature Drop с помощью sdk и сгенерировать из него подпись:

const { address } = req.body;

const drop = sdk.getSignatureDrop("0xcB31341eE7FaC6917e8e9D71441747e5FAdA466F");
try {
  const signedPayload = await drop.signature.generate({
    to: address,
    price: determinePrice(address),
  });

  return res.status(200).json({
    signedPayload: signedPayload,
  });
} catch (error) {
  console.log(error);
  return res.status(500).json({
    error,
  });
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Вызов API из фронтенда

В index.tsx обновите троичный адрес и добавьте кнопку Mint:

<div>
  {address ? (
    <button onClick={mint}>Mint</button>
  ) : (
    <button onClick={connectWithMetamask}>Connect with Metamask</button>
  )}
</div>
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы создадим функцию mint, которая выполняет api вызов на бэкенд и майнит NFT:

const drop = useSignatureDrop("0xcB31341eE7FaC6917e8e9D71441747e5FAdA466F");

const mint = async () => {
  const signedPayloadReq = await fetch("/api/generate-mint-sig", {
    method: "POST",
    body: JSON.stringify({ address }),
  });

  const signedPayload = await signedPayloadReq.json();

  try {
    const nft = await drop?.signature.mint(signedPayload.signedPayload);
    return nft;
  } catch (err) {
    console.error(err);
    return null;
  }
};
Войти в полноэкранный режим Выход из полноэкранного режима

Если мы сейчас попробуем майнить NFT, мы сможем успешно майнить NFT по разным ценам! 🎉

Заключение

Это было много, теперь похлопайте себя по спине и поделитесь с нами своими удивительными приложениями!
Если вы хотите взглянуть на код, загляните в репозиторий GitHub.

Оцените статью
devanswers.ru
Добавить комментарий