thirdweb: Create a Discord Bot That Gives Roles to NFT Holders
Learn how to create a Discord bot that gives roles to NFT holders.
What is thirdweb?
thirdweb is an easy-to-use platform to build Web3 applications with code or no-code. thirdweb makes creating and deploying apps such as NFT collections or NFT marketplaces easy. thirdweb can be used with objects stored on IPFS, so objects stored in a Filebase IPFS bucket can be seamlessly uploaded for use with a Thirdweb app.
Read below to learn how to create a Discord bot that gives roles to NFT holders.
1. Start by navigating to the thirdweb dashboard and connecting your crypto wallet.
2. Select ‘Deploy New Contract'.
3. Under 'NFTs', select ‘NFT Collection’:
Then select 'Deploy Now'.
4. Give your NFT collection a name, icon, and description, then confirm that the recipient address is your crypto wallet address.
For this tutorial, we’ll be using the Mumbai testnet, so we are using a Mumbai wallet.
5. Select ‘Deploy Now’ and confirm the transaction through your crypto wallet.
6. Next, we need to create an IPFS bucket on Filebase.
To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.
7. Select ‘Buckets’ from the left sidebar menu, or navigate to.
Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.
8. Enter a bucket name and choose the IPFS storage network to create the bucket.
Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.
9. Now, upload your NFTs to Filebase using the web console and selecting ‘Folder’, then select the folder that contains your NFT files.
These files need to be named in sequential order, such as 0.png, 1.png, 2.png, etc.
10. You will see your folder uploaded as a single object:
11. Copy the CID of your folder:
12. Navigate to your IPFS Folder using the Filebase IPFS gateway to see your folder’s files:
https://ipfs.filebase.io/ipfs/IPFS_CID
Take note of this URL.
13. Head back to the thirdweb dashboard, where you will see the page for your NFT collection.
Select the ‘Code’ tab. This code showcases different code snippets to use to mint your NFTs using scripts, with your contract address and crypto wallet address inputted automatically for easy copy and paste. This tutorial will showcase the JavaScript code examples, but you can use any of the languages showcased in this Code tab. You can follow along with the code examples showcased in this tutorial, or copy and paste the snippets provided in this tab.
14. Open a command line window and install the thirdweb SDK:
npm install @thirdweb-dev/sdk
15. Open an IDE such as VSCode and insert the following code, replacing the following values:
CONTRACT
with your contract address.WALLET_ADDRESS
with your crypto wallet address.Each
IPFS_CID
with your IPFS folder CID you took note of earlier.Replace the name and description of each NFT with your desired information.
You can edit this script to include as many NFTs as you’d like to mint at one time.
16. Save this script as mint.js, then run this script with the command:
node mint.js
17. Refresh your thirdweb dashboard. Your NFTs will be listed.
18. Then, in a new terminal window, create a thirdweb app using the thirdweb CLI:
npx thirdweb create
When prompted, select the following options:
Type of Project: App
Project Name: discord-bot
Framework: Next.js
Language: TypeScript
19. Go to the Discord Developer Portal and select ‘New Application’:
20. Give your app a name, then select ‘Create’:
21. Once created, select the ‘Bot’ option on the left side-bar menu.
Then select ‘Add Bot’, and confirm the action:
22. Give your bot a name to be displayed when it joins the server, and then toggle ‘public bot’ to be off.
This bot should not be allowed to join servers other than the ones that you add it to yourself.
23. Scroll down to bot permissions, then select ‘Manage Roles’ as the only permission given to this bot.
This is important since Discord bots can be compromised, and if the permissions allow for destructive actions, malicious attackers can use bots to ruin a Discord server.
24. Save your changes.
25. Select the ‘OAuth2’ option from the left side bar menu, then ‘URL Generator’.
26. Select the check boxes for ‘bot’ under ‘Scope’, and ‘Manage Roles’ under ‘Bot Permissions’.
Then select ‘Copy’ next to the generated URL:
27. Open the copied URL in your browser.
You will be prompted to add your bot to a server. Select a server that you have Manage Server permissions in, then select ‘Continue’. Confirm that the bot will obtain the Manage Roles permission, then authorize the bot to join the server.
28. Navigate back to your terminal window, and navigate inside the thirdweb app we created earlier and install the required dependencies:
cd discord-bot
npm install
npm install next-auth
29. Then, create a new folder within the directory pages
called api
, with another folder inside called auth
:
pages
called api
, with another folder inside called auth
:mkdir pages/api/
mkdir pages/api/auth
30. Navigate into the auth
folder, then create a new file called [...nextauth].ts
auth
folder, then create a new file called [...nextauth].ts
cd pages/api/auth
yarn add next-auth
touch [...nextauth].ts
31. Back in the Discord Developer Portal, copy the Client ID and Client Secret values.
32. Navigate back to the root of your project, then create a new file called .env.local
.
.env.local
.Paste these values into this .env.local
file in the following format:
CLIENT_ID=xxxxx
CLIENT_SECRET=xxxxx
33. Then, back in the Discord Developer Portal, add the following redirect link for your bot:
http://localhost:3000/api/auth/callback/discord
34. Save your changes.
35. Open the […nextauth].ts
file and insert the following code:
[…nextauth].ts
file and insert the following code:36. Save this file.
Then, open the _app.txs
file in the api directory, and replace the existing content with the following:
37. Next, we need to create the code for the following workflows:
A user signs into the app with their Crypto wallet.
The user must authenticate with their Discord account.
We’ll create code for the three possible outcomes of this workflow:
A user is connected to both their wallet and Discord.
A user is not connected to their wallet.
A user is not connected to their Discord account.
38. First, create a new folder at the root of the project called components and create a SignIn.tsx
file inside it.
SignIn.tsx
file inside it.Open this file in your IDE and insert the following code:
39. Open the index.tsx
file and replace the existing content with the following:
index.tsx
file and replace the existing content with the following:40. Run the following command to start your app:
yarn run dev
41. Your app will be running at localhost:3000
and will look like this:
localhost:3000
and will look like this:42. Select ‘Connect Wallet’ to connect your crypto wallet to your app.
43. Then, select ‘Connect Discord’ to connect your Discord account.
44. Select ‘Authorize’ to authenticate your Discord bot with your Discord account.
45. You will see a ‘Give me the role!’ button. Let’s add functionality for this before using it.
46. Head to the Discord Developer Portal and select ‘Bot’ from the left side-bar menu.
Then select ‘Reset Token’ to generate your bot’s token. Copy this value.
47. Open your .env.local
file and insert the following line for your bot’s token:
.env.local
file and insert the following line for your bot’s token:BOT_TOKEN=xxxxxx
48. Create a new file in the api
directory called grant-role.ts
.
api
directory called grant-role.ts
.Open the file, then insert the following content:
You will need to replace the server
and role ID
variables. To do this, follow this guide.
You will also need to replace CONTRACT_ADDRESS
with the Contract address of your NFT collection. Navigate to the thirdweb dashboard, select your NFT collection from earlier, then copy the contract address as shown here:
This code does the following steps:
First, it authenticates the user’s login payload to ensure the user owns their wallet.
Then, it checks the wallet’s NFT balance for the NFT.
Lastly, it makes a request to the Discord API telling it to give the role to the user.
49. Open the index.tsx
file and add the following code to create a new function after the const sdk = useSDK():
line:
index.tsx
file and add the following code to create a new function after the const sdk = useSDK():
line:50. Then, add the replace the existing button code with the lines:
51. Restart your app with yarn run dev, and connect your wallet and Discord to the app again.
This time, when you get to ‘Give me the role!’, click the button. You’ll be prompted to sign the request.
52. Once signed, the bot will give the authenticated user the configured role:
The completed code can be found here if you need to reference it.
Last updated