Узнайте, как создать одновременные списки разрешений, в которых разные пользователи могут покупать 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.