https://github.com/thirdweb-example/reddit
Create a seamless user experience with email sign in and pay the gas for minting NFTs.
https://github.com/thirdweb-example/reddit
nft-drop
Last synced: 9 months ago
JSON representation
Create a seamless user experience with email sign in and pay the gas for minting NFTs.
- Host: GitHub
- URL: https://github.com/thirdweb-example/reddit
- Owner: thirdweb-example
- License: apache-2.0
- Archived: true
- Created: 2022-11-05T01:31:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T00:23:09.000Z (almost 2 years ago)
- Last Synced: 2025-03-24T12:15:14.390Z (11 months ago)
- Topics: nft-drop
- Language: TypeScript
- Homepage: https://reddit.thirdweb-example.com/
- Size: 18.6 KB
- Stars: 6
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
> [!Important]
> This repository is referencing the `mumbai` chain.
>
> `Mumbai` [is deprecated since 08/04/2024](https://blog.thirdweb.com/deprecation-of-mumbai-testnet/), meaning the code in this repository will no longer work out of the box.
>
> You can still use this repository, however you will have to switch any references to `mumbai` to another chain.
# Reddit NFT Drop
Create a seamless user experience for onboarding web2 users into the NFT world, including:
- Creating web3 wallets for users using their email address
- Paying the gas fees for minting NFTs from an admin wallet
- Deploying an NFT Drop onto the Polygon network.
For the full guide, check out our [YouTube video](https://www.youtube.com/watch?v=Qotu4HH7BZ4)
## Using This Template
Create a copy of this template by running the following command:
```bash
npx thirdweb@latest create --template reddit
```
Set yourself up with a [Magic.Link](https://magic.link/) account, and create a new project.
Add your Magic Link **public** API key to the `.env.local` file:
```text
NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=YOUR_API_KEY=xxx
```
In this project, we use environment variables to store our private key [(not recommended)](https://portal.thirdweb.com/sdk/set-up-the-sdk/securing-your-private-key).
Inside `.env.local`, add your private key:
```text
PRIVATE_KEY=xxx
```
## Guide
Below, we'll explore the key areas of this template.
### Setting Up Magic Link Wallet Connector
We use [Magic.Link](https://magic.link/) to create a seamless user experience for onboarding web2 users into the NFT world.
In the [\_app.tsx](/pages/_app.tsx) page, we set up the Magic Link wallet connector in the `ThirdwebProvider`:
```tsx
const magicLinkConnector = new MagicConnector({
options: {
apiKey: process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY!,
rpcUrls: {
[ChainId.Mumbai]: "https://mumbai.magic.io/rpc",
},
},
});
// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;
function MyApp({ Component, pageProps }: AppProps) {
return (
);
}
```
Then, on the home page, we use the `useMagic` hook to allow users to connect with magic link:
```tsx
const connectWithMagic = useMagic(); // Hook to connect with Magic Link.
const [email, setEmail] = useState(""); // State to hold the email address the user entered.
```
With an `input` field to enter their email, and a button to connect with Magic Link:
```jsx
<>
Login With Email
setEmail(e.target.value)}
/>
{
connectWithMagic({ email });
}}
>
Login
>
```
### Minting NFTs.
We mint NFTs from the [NFT Drop](https://portal.thirdweb.com/pre-built-contracts/nft-drop) from the admin wallet in an API route called [mint-nft.ts](/pages/api/mint-nft.ts).
This way, the user never accepts a transaction or needs to pay gas fees:
```tsx
// Boilerplate Nextjs API route with TypeScript
import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import type { NextApiRequest, NextApiResponse } from "next";
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
try {
// 1. Grab the address from the request body
const { address } = req.body;
// 2. Let's instantiate the thirdweb SDK using our private key.
const sdk = ThirdwebSDK.fromPrivateKey(
// Learn more about securely accessing your private key:
// https://portal.thirdweb.com/sdk/set-up-the-sdk/securing-your-private-key
process.env.PRIVATE_KEY as string,
"mumbai" // configure this to your network
);
// 2B. Let's connect to our smart contract using it's address
const contractAddress = "0xBB1B8021e31Ac8A34ba5963e48f65d6a4B43aa42";
const contract = await sdk.getContract(contractAddress, "nft-drop");
// 3. Mint an NFT to the address from the NFT drop
const transaction = await contract.claimTo(address as string, 1);
// 4. Let's return the transaction info to the client.
const metadata = (await transaction[0].data()).metadata;
res.status(200).json(metadata);
} catch (error) {
console.log(error);
res.status(500).json(error);
}
}
```
We then call this API route on the UI when the user clicks the "Mint NFT" button on the [index.tsx](/pages/index.tsx) page:
```tsx
// 1. Call the mint-nft API Route
const result = await fetch("/api/mint-nft", {
method: "POST",
body: JSON.stringify({ address }),
headers: {
"Content-Type": "application/json",
},
});
```
We store the metadata of the NFT in the `mintedNft` state variable when it comes back from the API route:
```tsx
const [mintedNft, setMintedNft] = useState(undefined);
```
And display it on the UI:
```jsx
<>
You're Connected! 👋
{address}
mintNft()} disabled={loading}>
{loading ? "Loading..." : "Mint NFT"}
{loading && Loading...
}
{/* Show the minted NFT when it comes back */}
{mintedNft && (
Your Minted NFT
{mintedNft.name}
)}
>
```
## Got Questions?
Join our [Discord](https://discord.com/invite/thirdweb) to speak with our team directly.