{"id":20974354,"url":"https://github.com/thirdweb-example/full-stack-web3-app","last_synced_at":"2025-05-14T12:31:56.691Z","repository":{"id":41151410,"uuid":"503642943","full_name":"thirdweb-example/full-stack-web3-app","owner":"thirdweb-example","description":"Build an application on top of a custom contract using the thirdweb SDK","archived":false,"fork":false,"pushed_at":"2023-02-28T22:46:40.000Z","size":934,"stargazers_count":7,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-04T18:10:53.110Z","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-15T06:28:28.000Z","updated_at":"2023-03-02T06:59:35.000Z","dependencies_parsed_at":"2023-01-20T00:32:47.595Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/full-stack-web3-app","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%2Ffull-stack-web3-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ffull-stack-web3-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ffull-stack-web3-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ffull-stack-web3-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/full-stack-web3-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225294846,"owners_count":17451570,"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:29.257Z","updated_at":"2024-11-19T04:28:30.177Z","avatar_url":"https://github.com/thirdweb-example.png","language":"JavaScript","readme":"\u003c!-- Banner Image --\u003e\n\n![thirdweb solidity hardhat get started hero image](hero.png)\n\n\u003ch1 align='center'\u003eBuild an Application with Solidity, thirdweb \u0026 React\u003c/h1\u003e\n\n\u003cp align='center'\u003eThis template extends from the \u003ca href='https://replit.com/@thirdweb/Get-Started-with-Solidity-using-Hardhat-and-thirdweb-deploy'\u003eGreeter contract template\u003c/a\u003e by building an application on top of the smart contract.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cb\u003eTools used in this template: \u003c/b\u003e\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- [Solidity](https://docs.soliditylang.org/en/v0.8.14/), [Hardhat](https://hardhat.org/), and [thirdweb deploy](https://portal.thirdweb.com/thirdweb-deploy) to develop, test, and deploy our smart contract.\n\n_To learn more about the contract, check out [this template](https://replit.com/@thirdweb-dev/Get-Started-with-Solidity-using-Hardhat-and-thirdweb-deploy)_.\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\n\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\u003eDeploying the contract\u003c/h3\u003e\n\nTo deploy the `Greeter` contract, change directories into the `contract` folder:\n\n```bash\ncd contract\n```\n\nUse [thirdweb deploy](https://portal.thirdweb.com/thirdweb-deploy) to deploy the contract:\n\n```bash\nnpm install # Install dependencies first\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\u003ch3\u003eUsing Your Contract\u003c/h3\u003e\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 chain your dApp will work on.\nconst activeChain = \"goerli\";\n```\n\nNow we can easily call the functions of our [`Greeter`](./contract/Greeter.sol) contract, such as the `greet` and `setGreeting` contract by using the [useContractData](https://portal.thirdweb.com/react/react.usecontractdata) hook to read, and the [useContractCall](https://portal.thirdweb.com/react/react.usecontractcall) hook to write data.\n\n```jsx\n// Read the current greeting\nconst { data: currentGreeting, isLoading } = useContractData(contract, \"greet\");\n\n// Write a new greeting\nconst { mutate: writeGreeting, isLoading: isWriting } = useContractCall(\n  contract,\n  \"setGreeting\"\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## What's next?\n\nLearn how to use thirdweb's [Contract Extensions](https://portal.thirdweb.com/thirdweb-deploy/contract-extensions) to create your own NFT Collection smart contract + application in our [next template](https://replit.com/@thirdweb/Create-an-NFT-collection-with-Solidity-thirdweb#.replit).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Ffull-stack-web3-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Ffull-stack-web3-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Ffull-stack-web3-app/lists"}