{"id":20974227,"url":"https://github.com/thirdweb-example/packs","last_synced_at":"2025-05-14T12:31:11.570Z","repository":{"id":37398136,"uuid":"505742478","full_name":"thirdweb-example/packs","owner":"thirdweb-example","description":"Bundle NFTs and Tokens together in Packs that users can open and receive randomly selected tokens from those that were bundled!","archived":true,"fork":false,"pushed_at":"2024-04-12T00:27:20.000Z","size":208,"stargazers_count":6,"open_issues_count":0,"forks_count":25,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T12:15:14.828Z","etag":null,"topics":["pack"],"latest_commit_sha":null,"homepage":"https://packs.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-06-21T07:50:46.000Z","updated_at":"2024-07-10T17:04:11.000Z","dependencies_parsed_at":"2024-11-19T04:41:56.732Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/packs","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%2Fpacks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fpacks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fpacks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fpacks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/packs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254142252,"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":["pack"],"created_at":"2024-11-19T04:27:19.023Z","updated_at":"2025-05-14T12:31:11.198Z","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# Packs Example\n\nIn this example, we use [packs](https://portal.thirdweb.com/pre-built-contracts/pack) to create loot boxes that can contain any amount of:\n\n- ERC-721 NFTs\n- ERC-1155 NFTs\n- ERC-20 tokens\n\nWe can open these loot boxes to reveal the tokens inside!\n\n## Tools\n\n- [**Pack contract**](https://portal.thirdweb.com/pre-built-contracts/pack): To create openable loot boxes that contain NFTs from our Edition and Token contracts.\n- [**Edition contract**](https://portal.thirdweb.com/pre-built-contracts/edition): To create NFTs with multiple copies and bundle them into the packs.\n- [**Token contract**](https://portal.thirdweb.com/pre-built-contracts/token): To create our own token that we can bundle into the packs.\n- [**React SDK**](https://docs.thirdweb.com/react): to enable users to connect their wallets with the [useMetamask](https://portal.thirdweb.com/react/react.usemetamask) hook, and access hooks such as [usePack](https://portal.thirdweb.com/react/react.usePack) to interact with the Pack contract.\n- [**TypeScript SDK**](https://docs.thirdweb.com/typescript): To write [scripts](./scripts) that create and deploy our pack contract, and bundle the tokens into the packs.\n\n## Using This Repo\n\nTo create your own version of this template, you can use the following steps:\n\n### 1. Get a copy of this repo\n\nUse our CLI to create a copy of this repo on your local machine:\n\n```bash\nnpx thirdweb create --template packs\n```\n\n### 2. Deploy some contracts!\n\nThis example project uses a [Token](https://portal.thirdweb.com/pre-built-contracts/token), [Edition](https://portal.thirdweb.com/pre-built-contracts/edition), and [Pack](https://portal.thirdweb.com/pre-built-contracts/pack) contract.\n\nYou can deploy all of these contracts via the [thirdweb dashboard](https://thirdweb.com/dashboard)\n\nThis project also includes a [deployPack](./scripts/deployPack.mjs) script that you can use to deploy the pack contract and a [bundleTokens](./scripts/bundleTokens.mjs) script that you can use to bundle the tokens (from your NFT/Token contracts) into the packs.\n\n### 3. Plug in your NFT Drop contract address\n\nReplace the example contract addresses with your contract addresses in the pages, scripts, and components of this project.\n\nYou can use find and replace to change these contract addresses. Our example contract addresses are:\n\n- Pack: `0x0Aee160411473f63be2DfF2865E81A1D59636C97`\n- Token: `0x270d0f9DA22332F33159337E3DE244113a1C863C`\n- Edition: `0xb4A48c837aB7D0e5C85eA2b0D9Aa11537340Fa17`\n\n---\n\n## Guide\n\nBelow, you'll find the core features of this example explained!\n\n### Creating a Pack Contract\n\nYou can use the thirdweb dashboard to deploy a pack contract.\n\nIn this example project, we have written a script to deploy the pack contract via the SDK in [deployPack.ts](./scripts/deployPack.mjs).\n\n```js\nconst packAddress = await sdk.deployer.deployPack({\n  name: \"Treasure Chests\",\n  primary_sale_recipient: \"0xb371d1C5629C70ACd726B20a045D197c256E1054\",\n});\n```\n\n### Bundling Tokens\n\nInside the [bundleTokens](./scripts/bundleTokens.mjs) script, we can bundle NFTs and Tokens into the packs.\n\nWe bundle 500 units worth of tokens to create 100 packs with 5 rewards each.\n\n```jsx\nconst packNfts = await pack.create({\n  // ... our tokens and NFTs here\n  // ...\n  rewardsPerPack: 5,\n});\n```\n\n### Connecting to User Wallets\n\nWe wrap our application in the `ThirdwebProvider` in the [\\_app.tsx](./pages/_app.tsx) so that we can use all of the React SDK's hooks:\n\n```jsx\n\u003cThirdwebProvider desiredChainId={activeChainId}\u003e\n  \u003cComponent {...pageProps} /\u003e\n\u003c/ThirdwebProvider\u003e\n```\n\nNow in the [index.tsx](./pages/index.tsx) file, we can use the [useMetamask](https://portal.thirdweb.com/react/react.usemetamask) hook to connect to the user's wallet:\n\n```jsx\nconst address = useAddress();\nconst connectWithMetamask = useMetamask();\nconst disconnectWallet = useDisconnect();\n```\n\n### Connecting to our Pack Contract\n\nWe use the [usePack](https://portal.thirdweb.com/react/react.usepack) hook to connect to the pack contract using it's contract address:\n\n```jsx\nconst pack = usePack(\"0x0Aee160411473f63be2DfF2865E81A1D59636C97\");\n```\n\n### Viewing Packs Owned by the Connected Wallet\n\nSince each pack is an ERC-1155 NFT itself, we can use the [useOwnedNFTs](https://portal.thirdweb.com/react/react.useownednfts) hook to view the packs (and quantity) that the user owns:\n\n```jsx\nconst { data: nfts, isLoading } = useOwnedNFTs(pack, address);\n```\n\nWe use the `nfts` array to display the packs that the user owns on the UI.\n\n### Opening Packs\n\nTo open a pack, we simply pass the tokenId of the pack and the quantity to open to the `open` function:\n\n```jsx\nconst openedRewards = await pack?.open(0, 1); // 0 = tokenId, 1 = quantity\n```\n\n### Displaying Rewards\n\nWe then use the values returned in this `openedRewards` object to display the tokens that the user opened.\n\nSince the `openedRewards` object returns the `contractAddress` and `tokenId`, we use the [useNFT](https://portal.thirdweb.com/react/react.usenft) or the\n[useMetadata](https://portal.thirdweb.com/react/react.usemetadata) hook (for ERC-20 tokens) to get the metadata of the tokens that were opened:\n\n```jsx\n// For ERC-1155 / ERC-721 tokens:\nconst edition = useEdition(reward.contractAddress);\nconst { data } = useNFT(edition, reward.tokenId);\n\n// For ERC-20 tokens:\nconst token = useToken(reward.contractAddress);\nconst { data } = useMetadata(token);\n```\n\nThen we again `map` over the rewards arrays contained in the `openedRewards` object and display the rewards that the user opened on the UI.\n\n## Join our Discord!\n\nFor any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fpacks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fpacks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fpacks/lists"}