{"id":20974353,"url":"https://github.com/thirdweb-example/custom-dashboard","last_synced_at":"2025-05-14T12:31:56.893Z","repository":{"id":39583918,"uuid":"490972112","full_name":"thirdweb-example/custom-dashboard","owner":"thirdweb-example","description":"Use thirdweb's sdk.deployer to deploy any pre-built contract dynamically with no private keys!","archived":false,"fork":false,"pushed_at":"2023-01-09T02:54:12.000Z","size":83,"stargazers_count":3,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-04T18:10:51.442Z","etag":null,"topics":["contracts","sdk","sdk-deployer"],"latest_commit_sha":null,"homepage":"https://custom-dashboard.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}},"created_at":"2022-05-11T05:41:53.000Z","updated_at":"2022-09-29T01:22:48.000Z","dependencies_parsed_at":"2023-02-08T08:31:20.332Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/custom-dashboard","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%2Fcustom-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcustom-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcustom-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fcustom-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/custom-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225294825,"owners_count":17451566,"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":["contracts","sdk","sdk-deployer"],"created_at":"2024-11-19T04:28:29.240Z","updated_at":"2024-11-19T04:28:30.257Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom Dashboard\r\n\r\nThis example demonstrates the thirdweb SDK's capability to deploy any of our [pre-built smart contracts](https://portal.thirdweb.com/pre-built-contracts)!\r\n\r\nWe use the [`ContractDeployer class`](https://portal.thirdweb.com/typescript/sdk.contractdeployer) and the `deployBuiltInContract` function to deploy the contracts, and use the `sdk.getContractList` to view all the contracts we deployed so far!\r\n\r\nThis example can be utilized in projects that you want users to deploy smart contracts via your application dynamically, rather than the thirdweb dashboard.\r\n\r\n## Tools\r\n\r\n- [**thirdweb TypeScript SDK**](https://portal.thirdweb.com/typescript/): to access the [ContractDeployer class](https://portal.thirdweb.com/typescript/sdk.contractdeployer) and view the deployed contracts.\r\n\r\n- [**thirdweb React SDK**](https://portal.thirdweb.com/react/): to allow users to connect their wallet to the website using the [useMetamask](https://portal.thirdweb.com/react/react.usemetamask) hook, and view their wallet information using [useAddress](https://portal.thirdweb.com/react/react.useaddress).\r\n\r\n## Using This Repo\r\n\r\n- Create a project using this example by running:\r\n\r\n```bash\r\nnpx thirdweb create --template custom-dashboard\r\n```\r\n\r\n## Guide\r\n\r\nWe'll explore the details of how this repository works below.\r\n\r\n### Viewing Deployed Contracts\r\n\r\nOn the [index.tsx](./pages/index.tsx) page, we use the [`.getContractList`](https://portal.thirdweb.com/typescript/sdk.thirdwebsdk.getcontractlist#thirdwebsdkgetcontractlist-method) function to view all the contracts we deployed so far:\r\n\r\n```jsx\r\n// Get the signer of the currently connected wallet\r\nconst signer = useSigner();\r\n\r\n// Instantiate the SDK with the signer\r\nconst thirdweb = new ThirdwebSDK(signer);\r\n\r\n// Fetch the contracts for this address and set them in state using the SDK\r\nthirdweb.getContractList(address).then((contracts) =\u003e {\r\n  // set the contracts in state\r\n  setExistingContracts(contracts);\r\n});\r\n```\r\n\r\n### Deploying Contracts\r\n\r\nOn the [deploy.tsx](./pages/deploy.tsx) page, we use the [`.deployBuiltInContract`] function to deploy a contract, which is a generic function to deploy _any_ pre-built contract.\r\n\r\nTypically, you know which contract you want your users to deploy, so it's more helpful to use one of the methods exposed on the [ContractDeployer class](https://portal.thirdweb.com/typescript/sdk.contractdeployer#contractdeployer-class).\r\n\r\nSuch as:\r\n\r\n- [deployNFTDrop](https://portal.thirdweb.com/typescript/sdk.contractdeployer.deploynftdrop)\r\n- [deployToken](https://portal.thirdweb.com/typescript/sdk.contractdeployer.deploytoken)\r\n- [deployMarketplace](https://portal.thirdweb.com/typescript/sdk.contractdeployer.deploymarketplace)\r\n\r\nOn each of these pages, you can find code examples to help you deploy the contract.\r\n\r\nTo make the code generic for this example project, we used the `internal` function from the SDK `deployBuiltInContract`, which calls each of these functions under the hood, depending on which contract you pass in as a parameter.\r\n\r\nHere's how it looks:\r\n\r\n```jsx\r\nconst signer = useSigner();\r\n\r\nconst thirdweb = new ThirdwebSDK(signer);\r\n\r\nconst contractAddress = await thirdweb.deployer.deployBuiltInContract(\r\n  contractSelected,\r\n  {\r\n    name: `My ${contractSelected}`,\r\n    primary_sale_recipient: address,\r\n    voting_token_address: address,\r\n    description: `My awesome ${contractSelected} contract`,\r\n    // Recipients are required when trying to deploy a split contract\r\n    recipients: [\r\n      {\r\n        address,\r\n        sharesBps: 100 * 100,\r\n      },\r\n    ],\r\n  }\r\n);\r\n```\r\n\r\n## Join our Discord!\r\n\r\nFor any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fcustom-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fcustom-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fcustom-dashboard/lists"}