{"id":20974230,"url":"https://github.com/thirdweb-example/reddit","last_synced_at":"2025-05-14T12:31:12.174Z","repository":{"id":107808494,"uuid":"561993359","full_name":"thirdweb-example/reddit","owner":"thirdweb-example","description":"Create a seamless user experience with email sign in and pay the gas for minting NFTs.","archived":true,"fork":false,"pushed_at":"2024-04-12T00:23:09.000Z","size":19,"stargazers_count":6,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T12:15:14.390Z","etag":null,"topics":["nft-drop"],"latest_commit_sha":null,"homepage":"https://reddit.thirdweb-example.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdweb-example.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-05T01:31:43.000Z","updated_at":"2024-04-26T18:51:53.000Z","dependencies_parsed_at":"2024-04-12T01:30:41.883Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/reddit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Freddit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Freddit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Freddit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Freddit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/reddit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254142255,"owners_count":22021489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nft-drop"],"created_at":"2024-11-19T04:27:20.104Z","updated_at":"2025-05-14T12:31:11.832Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","readme":"\u003e [!Important]  \n\u003e This repository is referencing the `mumbai` chain.\n\u003e \n\u003e `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.\n\u003e\n\u003e You can still use this repository, however you will have to switch any references to `mumbai` to another chain.\n\n\n# Reddit NFT Drop\n\nCreate a seamless user experience for onboarding web2 users into the NFT world, including:\n\n- Creating web3 wallets for users using their email address\n- Paying the gas fees for minting NFTs from an admin wallet\n- Deploying an NFT Drop onto the Polygon network.\n\nFor the full guide, check out our [YouTube video](https://www.youtube.com/watch?v=Qotu4HH7BZ4)\n\n\u003cvideo src='https://www.youtube.com/watch?v=Qotu4HH7BZ4' width='100%' height='250' controls preload\u003e\u003c/video\u003e\n\n## Using This Template\n\nCreate a copy of this template by running the following command:\n\n```bash\nnpx thirdweb@latest create --template reddit\n```\n\nSet yourself up with a [Magic.Link](https://magic.link/) account, and create a new project.\n\nAdd your Magic Link **public** API key to the `.env.local` file:\n\n```text\nNEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=YOUR_API_KEY=xxx\n```\n\nIn 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).\nInside `.env.local`, add your private key:\n\n```text\nPRIVATE_KEY=xxx\n```\n\n## Guide\n\nBelow, we'll explore the key areas of this template.\n\n### Setting Up Magic Link Wallet Connector\n\nWe use [Magic.Link](https://magic.link/) to create a seamless user experience for onboarding web2 users into the NFT world.\n\nIn the [\\_app.tsx](/pages/_app.tsx) page, we set up the Magic Link wallet connector in the `ThirdwebProvider`:\n\n```tsx\nconst magicLinkConnector = new MagicConnector({\n  options: {\n    apiKey: process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY!,\n    rpcUrls: {\n      [ChainId.Mumbai]: \"https://mumbai.magic.io/rpc\",\n    },\n  },\n});\n\n// This is the chainId your dApp will work on.\nconst activeChainId = ChainId.Mumbai;\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003cThirdwebProvider\n      desiredChainId={activeChainId}\n      walletConnectors={[magicLinkConnector]}\n    \u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ThirdwebProvider\u003e\n  );\n}\n```\n\nThen, on the home page, we use the `useMagic` hook to allow users to connect with magic link:\n\n```tsx\nconst connectWithMagic = useMagic(); // Hook to connect with Magic Link.\nconst [email, setEmail] = useState\u003cstring\u003e(\"\"); // State to hold the email address the user entered.\n```\n\nWith an `input` field to enter their email, and a button to connect with Magic Link:\n\n```jsx\n\u003c\u003e\n  \u003ch2\u003eLogin With Email\u003c/h2\u003e\n  \u003cdiv\u003e\n    \u003cinput\n      type=\"email\"\n      placeholder=\"Your Email Address\"\n      onChange={(e) =\u003e setEmail(e.target.value)}\n    /\u003e\n\n    \u003cbutton\n      onClick={() =\u003e {\n        connectWithMagic({ email });\n      }}\n    \u003e\n      Login\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n### Minting NFTs.\n\nWe 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).\n\nThis way, the user never accepts a transaction or needs to pay gas fees:\n\n```tsx\n// Boilerplate Nextjs API route with TypeScript\nimport { ThirdwebSDK } from \"@thirdweb-dev/sdk\";\nimport type { NextApiRequest, NextApiResponse } from \"next\";\n\nexport default async function handler(\n  req: NextApiRequest,\n  res: NextApiResponse\n) {\n  try {\n    // 1. Grab the address from the request body\n    const { address } = req.body;\n\n    // 2. Let's instantiate the thirdweb SDK using our private key.\n    const sdk = ThirdwebSDK.fromPrivateKey(\n      // Learn more about securely accessing your private key:\n      // https://portal.thirdweb.com/sdk/set-up-the-sdk/securing-your-private-key\n      process.env.PRIVATE_KEY as string,\n      \"mumbai\" // configure this to your network\n    );\n\n    // 2B. Let's connect to our smart contract using it's address\n    const contractAddress = \"0xBB1B8021e31Ac8A34ba5963e48f65d6a4B43aa42\";\n    const contract = await sdk.getContract(contractAddress, \"nft-drop\");\n\n    // 3. Mint an NFT to the address from the NFT drop\n    const transaction = await contract.claimTo(address as string, 1);\n\n    // 4. Let's return the transaction info to the client.\n    const metadata = (await transaction[0].data()).metadata;\n\n    res.status(200).json(metadata);\n  } catch (error) {\n    console.log(error);\n    res.status(500).json(error);\n  }\n}\n```\n\nWe then call this API route on the UI when the user clicks the \"Mint NFT\" button on the [index.tsx](/pages/index.tsx) page:\n\n```tsx\n// 1. Call the mint-nft API Route\nconst result = await fetch(\"/api/mint-nft\", {\n  method: \"POST\",\n  body: JSON.stringify({ address }),\n  headers: {\n    \"Content-Type\": \"application/json\",\n  },\n});\n```\n\nWe store the metadata of the NFT in the `mintedNft` state variable when it comes back from the API route:\n\n```tsx\nconst [mintedNft, setMintedNft] = useState\u003cNFTMetadata | undefined\u003e(undefined);\n```\n\nAnd display it on the UI:\n\n```jsx\n\u003c\u003e\n  \u003ch2\u003eYou\u0026apos;re Connected! 👋\u003c/h2\u003e \u003cp\u003e{address}\u003c/p\u003e\n  \u003cbutton onClick={() =\u003e mintNft()} disabled={loading}\u003e\n    {loading ? \"Loading...\" : \"Mint NFT\"}\n  \u003c/button\u003e\n  {loading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n  {/* Show the minted NFT when it comes back */}\n  {mintedNft \u0026\u0026 (\n    \u003cdiv\u003e\n      \u003ch3\u003eYour Minted NFT\u003c/h3\u003e\n      \u003cThirdwebNftMedia\n        metadata={mintedNft}\n        style={{\n          width: 300,\n        }}\n      /\u003e\n      \u003cp\u003e{mintedNft.name}\u003c/p\u003e\n    \u003c/div\u003e\n  )}\n\u003c/\u003e\n```\n\n## Got Questions?\n\nJoin our [Discord](https://discord.com/invite/thirdweb) to speak with our team directly.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Freddit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Freddit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Freddit/lists"}