🤔 What is TwNFT? TwNFT is a simple web application that allows you to mint your tweets as for free. NFTs It is my submission for the . Thirdweb x Hashnode Hackathon / Live Demo GitHub Repository 🌐 What is Thirdweb? Getting started with web3 can be difficult even though it is the hype nowadays. We need to write something called a smart contract, which is required to perform actions on the blockchain. To write smart contracts on the Ethereum blockchain, we need to learn a new programming language called . Solidity provides us with smart contracts which have been written by professionals in the field. They also provide us SDKs which makes using these easy. This allows people with basic programming knowledge to make web3 applications with ease. Thirdweb also takes care of deploying these smart contracts to the blockchain. Thirdweb Let us now go back to TwNFT 💡Where did the idea come from? This hackathon was announced back on the 5th of January, 2022 but I didn't get a solid idea until the 18th of January. So where did it come from? I came across an application called from one of @ 's articles. GitNFT lets you mint git commits as NFTs and that is when I thought, "How about minting tweets as NFTs?". GitNFT Chris Bongers I did some research and didn't find any application that did this so it was a golden opportunity for me 🤩 📚 The tech stack What technologies did I use for TwNFT? for the website NextJS for styling TailwindCSS for Twitter authentication and data storage Firebase for deploying the frontend Vercel for the backend API Express to deploy the backend Heroku and of course... for web3 authentication and minting the NFT Thirdweb 🧐 How does TwNFT work? One needs to first sign in with Twitter and then put in the tweet URL for the tweet they want to mint. Before minting, the image that will be minted can also be customized. One needs to assign a name to the NFT and optionally add a description (or else, the tweet's content will be used). Before minting, we have 2 checks to ensure that the person minting the NFT owns that tweet (this is why they are asked to log in with Twitter) and if the tweet has been minted before or not. We don't allow minting the same tweet multiple times, and this is to ensure that every NFT minted is unique. Now let us take a deeper dive into the web3 part A deeper dive into web3 authentication with Thirdweb Setting up authentication with Thirdweb is as easy as adding ~10 lines of code. I am using the package for this application and it is a breeze. The package is easier to implement as it also packs in the UI. However, if you want a custom UI (which I wanted), the hooks package is a better choice. @3rdweb/hooks @3rdweb/react Do note that you need to be using to use any of the aforementioned packages. ReactJS Coming to the code, firstly, you need to add the Thirdweb Provider to the application - import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

const connectors = {
  injected: {},
  walletconnect: {},
};

const supportedChainIds = [1, 4, 137, 250, 43114, 80001];

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebWeb3Provider
      connectors={connectors}
      supportedChainIds={supportedChainIds}
    >
      <Component {...pageProps} />
    </ThirdwebWeb3Provider>
  );
} Then, it is as easy of using the hook provided to us by either packages to retrieve the function. We have to now just call this function with the wallet type - useWeb3() connectWallet <button
  onClick={() => {
    connectWallet("injected");
  }}
  >
  Login with Metamask
</button> Here is for the wallet injected in the browser. This is in most cases. injected Metamask For a detailed guide on implementing web3 authentication with Thirdweb, check out their . official guide A deeper dive into minting the NFT with Thirdweb I am using the for minting the NFT on the server-side. Minting should take place on the server-side for security reasons. Thirdweb Typescript SDK Minting with the Thirdweb SDK is extremely easy. Let us see how it works - First, we initialize the SDK with our private key. Do keep this secret as anyone who has your private key can gain access to your wallet. I am using for initializing a wallet here. ethers const SDK = new ThirdwebSDK(
  new ethers.Wallet(
    process.env.PRIVATE_KEY,
    ethers.getDefaultProvider("https://rinkeby-light.eth.linkpool.io/")
  )
); Next, we initialize the NFT Module that will let us mint the NFT - const nftModule = sdk.getNFTModule(process.env.NFT_MODULE_ADDRESS); At last, we call the function asynchronously - mintTo const result = await nftModule.mintTo(
  payload.receiverAddress,
  nftMedatada
); Here the result gives us the NFT's . The is a unique identifier for the NFT in that collection. tokenId tokenId Now, that is it. We have minted an NFT!!! For a more detailed guide, you can check out Thirdweb's . official guide on minting an NFT ❓ What was this NFT Module? Thirdweb provides us with many modules and the NFT Collection module is one of them. It allows you to mint an NFT in an NFT collection and that is what we just did!!! The official collection for this project can be found on OpenSea . here 🖱️ Using TwNFT To get started, log in with Twitter and head over to the page. /mint Next, put in the URL to the tweet you want to mint in the textbox on the top and click the arrow - You should now see a preview of the NFT, something a bit like this - Feel free to customize the image by clicking on the buttons on the options bar - Next, click on the "Connect Wallet" button and connect your Metamask wallet. Walletconnect support is coming soon. You should now see a button saying "Mint NFT" instead of "Connect Wallet" on the options bar. Clicking that should bring up this modal where you can fill out the name of the NFT, and optionally add a description - After some time, you should get the option to go to the tweet page - The tweet page will look somewhat like this (do give the image some time to load for the first time) - Notice that it says the NFT is still being minted and it is going to take 5-10 minutes. Check back after 5-10 minutes and this is what the page should look like - The NFT is now under your wallet and you can do anything with it, including listing it for sale, selling it, and even transferring it to another wallet. 🖊️ Sidenote Currently, TwNFT is running on the Rinkeby Test Network. This means all NFTs minted will be on the test network and not on the main network. However, this is subject to change in the future. ✨ Conclusion It has been a great journey over the last 13 days making TwNFT, squashing bugs, and implementing features. Excited to see how it goes 😆 Bye, and have a nice day 😁🤞 🔗 Important Links TwNFT TwNFT GitHub Repository TwNFT Backend GitHub Repository TwNFT OpenSea collection This article was first published here

Ethereum

Google

Heroku

OpenSea

Twitter

Embed an In-browser Code Preview into Your React Application with Sandpack

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

CTA: Download the FREE AI Productivity Shift report

TwNFT - Mint your tweets as NFTs easily and for free

TwNFT - Mint your tweets as NFTs easily and for free

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Embed an In-browser Code Preview into Your React Application with Sandpack

64 Stories To Learn About Firebase

A Useful Wrapper for MobX and Firebase Cloud Firestore

Access User Location with Permission Handler in Flutter

Adding Firebase Analytics to a Gatsby Project: A Beginner's Guide

Embed an In-browser Code Preview into Your React Application with Sandpack

64 Stories To Learn About Firebase

A Useful Wrapper for MobX and Firebase Cloud Firestore

Access User Location with Permission Handler in Flutter

Adding Firebase Analytics to a Gatsby Project: A Beginner's Guide

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps