{"id":20974362,"url":"https://github.com/thirdweb-example/contracts-sdk-with-extensions","last_synced_at":"2025-05-14T12:31:58.887Z","repository":{"id":43027148,"uuid":"503973959","full_name":"thirdweb-example/contracts-sdk-with-extensions","owner":"thirdweb-example","description":"Build your own NFT Collection with Solidity using thirdweb deploy and the thirdweb SDK","archived":false,"fork":false,"pushed_at":"2022-10-26T20:49:21.000Z","size":869,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-04T18:10:50.880Z","etag":null,"topics":["contract-kit","extensions","thirdweb-deploy"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-16T01:35:06.000Z","updated_at":"2023-01-16T10:32:05.000Z","dependencies_parsed_at":"2023-01-20T05:03:33.926Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/contracts-sdk-with-extensions","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcontracts-sdk-with-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcontracts-sdk-with-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcontracts-sdk-with-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcontracts-sdk-with-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/contracts-sdk-with-extensions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225294854,"owners_count":17451573,"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":["contract-kit","extensions","thirdweb-deploy"],"created_at":"2024-11-19T04:28:30.446Z","updated_at":"2024-11-19T04:28:31.020Z","avatar_url":"https://github.com/thirdweb-example.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Banner Image --\u003e\n\n![thirdweb solidity hardhat get started hero image](hero.png)\n\n\u003ch1 align='center'\u003eCreate an NFT collection with Solidity + thirdweb\u003c/h1\u003e\n\n\u003cp align='center'\u003eThis template allows you to create an NFT Collection using Solidity and thirdweb.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cb\u003eTools used in this template: \u003c/b\u003e\n\n- [Solidity](https://docs.soliditylang.org/en/v0.8.14/), [Hardhat](https://hardhat.org/), and [thirdweb deploy](https://portal.thirdweb.com/thirdweb-cli) to develop, test, and deploy our smart contract.\n\n- thirdweb [Typescript](https://portal.thirdweb.com/typescript) and [React](https://portal.thirdweb.com/react) SDKs to interact with our smart contract\n\n\u003cbr /\u003e\n\n\u003cb\u003eRun the Application:\u003c/b\u003e\n\nTo run the web application, change directories into `application`:\n\n```bash\ncd application\n```\n\nThen, run the development server:\n\n```bash\nnpm install # Install dependencies first\nnpm run dev\n```\n\nVisit the application at [http://localhost:3000/](http://localhost:3000/).\n\n\u003cbr /\u003e\n\n\u003ch2 align='center'\u003eHow to use this template\u003c/h2\u003e\n\nThis template has two components:\n\n1. The smart contract development in the [contract folder](./contract).\n2. The web application in the [application folder](./application).\n\n\u003ch3\u003eThe NFT Collection Smart Contract\u003c/h3\u003e\n\nLet's explore how the [NFT Collection Smart Contract](./contract/contracts/MyAwesomeNft.sol) works in this template!\n\nOur contract implements a base contract and also a contract extension::\n\n1. The [`ERC721Base`](https://portal.thirdweb.com/solidity-sdk/base-contracts/erc-721/erc721base) base contract provides ERC-721A features.\n\n2. The [`PermissionEnumerable`](https://portal.thirdweb.com/solidity-sdk/contract-extensions/permissions#permissions-enumerable) extension provides role-based restrictions on who can call specific functions.\n\nAs you can see in the contract definition:\n\n```solidity\nimport \"@thirdweb-dev/contracts/base/ERC721Base.sol\";\nimport \"@thirdweb-dev/contracts/extension/PermissionsEnumerable.sol\";\n\ncontract MyAwesomeNft is ERC721Base, PermissionsEnumerable {\n\n}\n```\n\nBy implementing these contract extensions, we unlock powerful features on the [dashboard](https://thirdweb.com/dashboard) and the [SDK](https://portal.thirdweb.com/building-web3-apps/setting-up-the-sdk)!\n\nLet's take a look at those now.\n\n### On The Dashboard\n\nWhen we deploy our contract we unlock the **NFTs** tab!\n\nThis allows us to easily view all of the NFTs that have been minted into our contract, who owns them, as well as their metadata.\n\nNot only that, we get a **Mint** button to create _new_ NFTs into this contract!\n\n![thirdweb dashboard mint button](mint-button.png)\n\nThis allows us to simply fill out a form with our NFT information, and mint that NFT on the dashboard, no code required. The metadata we upload is automatically uploaded and pinned to IPFS for us behind the scenes!\n\n\u003cdiv align='center'\u003e\n\n\u003cimg alt='thirdweb dashboard mint button' src='./mint-nft-form.png' height='500'\u003e\n\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n### In the SDK\n\nWhen we go to build out our web application, we can then mint an NFT in one line of code, thanks to this contract extension.\n\n```jsx\nawait contract.nft.mint.to(walletAddress, nftMetadata);\n```\n\nThis one line will upload our NFT metadata to IPFS, and then mint the NFT on the blockchain.\n\nIn the SDK, we can query all NFTs that have been minted, and get their metadata, and who they are owned by in one line:\n\n```jsx\nconst nfts = await contract.nft.query.all();\n```\n\n\u003cbr/\u003e\n\n\u003ch3\u003eDeploying the contract\u003c/h3\u003e\n\nTo deploy the `MyAwesomeNft` contract, change directories into the `contract` folder:\n\n```bash\ncd contract\n```\n\nUse [thirdweb deploy](https://portal.thirdweb.com/thirdweb-cli) to deploy the contract:\n\n```bash\nnpx thirdweb deploy\n```\n\nComplete the deployment flow by clicking the generated link and using the thirdweb dashboard to choose your network and configuration.\n\n## Using Your Contract\n\nInside the [home page](./application/pages/index.js) of the web application, connect to your smart contract inside the [`useContract`](https://portal.thirdweb.com/react/react.usecontract#usecontract-function) hook:\n\n```jsx\n// Get the smart contract by it's address\nconst { contract } = useContract(\"0x...\"); // Your contract address here (from the thirdweb dashboard)\n```\n\nWe configure the desired blockchain/network in the [`_app.js`](./application/pages/_app.js) file; be sure to change this to the network you deployed your contract to.\n\n```jsx\n// This is the chainId your dApp will work on.\nconst activeChainId = ChainId.Goerli;\n```\n\nNow we can easily call the functions of our [`NFT Collection contract`](./contract/contracts/MyAwesomeNft.sol) that we enabled by implementing thirdweb's contract extensions.\n\nHere, we are using the [`useNFTs`](https://portal.thirdweb.com/react/react.usenfts) hook to view all the NFTs in the contract, and the [`useMintNFT`](https://portal.thirdweb.com/react/react.usemintnft) hook to mint a new NFT!\n\n```jsx\n// Read the NFTs from the contract\nconst { data: nfts, isLoading: loading } = useNFTs(contract?.nft);\n\n// Function to mint a new NFT\nconst { mutate: mintNft, isLoading: minting } = useMintNFT(contract?.nft);\n```\n\nWith the help of a few other useful hooks such as [`useAddress`](https://portal.thirdweb.com/react/react.useaddress) and [`useNetwork`](https://portal.thirdweb.com/react/react.usenetwork), we first make sure they are connected to the correct blockchain/network. Then, we allow them to mint an NFT when they click the `Mint NFT` button.\n\n```jsx\nasync function mintAnNft() {\n  // Ensure they have a connected wallet\n  if (!address) {\n    connectWithMetamask();\n    return;\n  }\n\n  // Make sure they're on the right network\n  if (isWrongNetwork) {\n    switchNetwork(ChainId.Goerli);\n    return;\n  }\n\n  mintNft(\n    {\n      metadata: {\n        // Name of our NFT\n        name: \"Yellow Star\",\n        // Image of a gold star stored on IPFS\n        image:\n          \"https://gateway.ipfscdn.io/ipfs/QmZbovNXznTHpYn2oqgCFQYP4ZCpKDquenv5rFCX8irseo/0.png\",\n      },\n      // Send it to the connected wallet address\n      to: address,\n    },\n\n    // When the transaction is confirmed, alert the user\n    {\n      onSuccess(data) {\n        alert(`🚀 Successfully Minted NFT!`);\n      },\n    }\n  );\n}\n```\n\n### Connecting to user wallets\n\nTo perform a \"write\" operation (a transaction on the blockchain), we need to have a connected wallet, so we can use their **signer** to sign the transaction.\n\nTo connect a user's wallet, we use one of thirdweb's [wallet connection hooks](https://portal.thirdweb.com/react/category/wallet-connection). The SDK automatically detects the connected wallet and uses it to sign transactions. This works because our application is wrapped in the [`ThirdwebProvider`](https://portal.thirdweb.com/react/react.thirdwebprovider), as seen in the [`_app.js`](./application/pages/_app.js) file.\n\n```jsx\nconst address = useAddress();\nconst connectWithMetamask = useMetamask();\n```\n\n## Join our Discord!\n\nFor any questions, suggestions, join our Discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fcontracts-sdk-with-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fcontracts-sdk-with-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fcontracts-sdk-with-extensions/lists"}