{"id":20974326,"url":"https://github.com/thirdweb-example/multiwrap","last_synced_at":"2025-05-14T12:31:48.764Z","repository":{"id":45083300,"uuid":"499331827","full_name":"thirdweb-example/multiwrap","owner":"thirdweb-example","description":"Wrap ERC-1155, ERC-721 and ERC-20 tokens in to one ERC-721 token","archived":false,"fork":false,"pushed_at":"2023-04-10T18:15:26.000Z","size":282,"stargazers_count":9,"open_issues_count":2,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-04-20T10:02:53.430Z","etag":null,"topics":["multiwrap"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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-06-03T00:27:59.000Z","updated_at":"2023-04-20T06:56:38.000Z","dependencies_parsed_at":"2023-01-25T20:46:14.019Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/multiwrap","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%2Fmultiwrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmultiwrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmultiwrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmultiwrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/multiwrap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225294634,"owners_count":17451539,"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":["multiwrap"],"created_at":"2024-11-19T04:28:11.616Z","updated_at":"2024-11-19T04:28:12.215Z","avatar_url":"https://github.com/thirdweb-example.png","language":"JavaScript","readme":"## Getting Started\n\nFirst, intall the required dependencies:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\nThen, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\nOn `pages/_app.js`, you'll find our `ThirdwebProvider` wrapping your app, this is necessary for our hooks to work.\n\non `pages/index.js`, you'll find the `useMetamask` hook that we use to connect the user's wallet to MetaMask, and the other hooks required for this demo.\n\n# Multiwrap Example\n\n## Introduction\n\nIn this guide, we will utilize the [**Multiwrap**](https://portal.thirdweb.com/typescript/sdk.multiwrap) contract.\n\nMultiwrap lets you wrap any number of ERC20, ERC721 and ERC1155 tokens you own into a single wrapped token bundle.\n\nThe single wrapped token received on bundling up multiple assets, as mentioned above, is an ERC721 NFT. It can be transferred, sold on any NFT Marketplace, and generate royalties just like any other NFTs.\n\n## Tools:\n\n- [**thirdweb Multiwrap**](https://portal.thirdweb.com/typescript/sdk.multiwrap)\n\n- [**thirdweb React SDK**](https://docs.thirdweb.com/react): The use of hooks such as [useMetamask](https://portal.thirdweb.com/react/react.usemetamask), [useAddress](https://portal.thirdweb.com/react/react.useaddress), [useNFTs](https://portal.thirdweb.com/react/react.usenfts) and a few others.\n\n## Using This Repo\n\nCreate a clone of this repository using our CLI:\n\n```bash\nnpx thirdweb create --example multiwrap-demo\n```\n\n### Getting the Multiwrap contract\n\n```js\nconst multiwrap = useMultiwrap(multiwrapAddress);\n```\n\n### Giving permission to your multiwrap contract to move your tokens\n\n```js\n// Get the contracts\nconst erc20Contract = sdk.getToken(erc20TokenAddress);\nconst erc721Contract = sdk.getNFTCollection(erc721TokenAddress);\nconst erc1155Contract = sdk.getEdition(erc1155TokenAddress);\n\n// Give permissions to the Multiwrap contract\nawait tokenContract.setAllowance(multiwrapAddress, 20);\nawait erc721Contract.setApprovalForToken(multiwrapAddress, tokenId);\nawait erc1155Contract.setApprovalForAll(multiwrapAddress, true);\n```\n\n### Wrapping Tokens\n\nThe SDK takes in a structure containing the tokens to be wrapped. This array is further grouped into the individual types of tokens.\n\n```js\nconst tokensToWrap = {\n  erc20Tokens: [\n    {\n      contractAddress: \"0x.....\",\n      quantity: 20,\n    },\n  ],\n  erc721Tokens: [\n    {\n      contractAddress: \"0x.....\",\n      tokenId: \"0\",\n    },\n  ],\n  erc1155Tokens: [\n    {\n      contractAddress: \"0x.....\",\n      tokenId: \"0\",\n      quantity: 1,\n    },\n  ],\n};\n```\n\nWe then pass these tokens to the contracts wrap function along with the NFT Metadata for our wrapped tokens.\n\n```jsx\nconst nftMetadata = {\n  name: \"Wrapped bundle\",\n  description: \"This is a wrapped bundle of tokens and NFTs\",\n  image: \"ipfs://...\",\n};\n```\n\n```jsx\nconst tx = await multiwrapContract.wrap(tokensTowrap, nftMetadata);\n\nconst receipt = tx.receipt(); // the transaction receipt\nconst wrappedTokenId = tx.id; // the id of the wrapped token bundle\n```\n\n## Unwrapping Tokens\n\nTo unwrap tokens, we call [.unwrap](https://portal.thirdweb.com/typescript/sdk.multiwrap.unwrap). It will return the transaction receipt.\n\n```jsx\nawait multiwrapContract.unwrap(wrappedTokenId);\n```\n\n## Get wrapped Contents\n\nGet the contents of a wrapped token bundle. Will return a similar structure than the one passed in to the `wrap()` call.\n\n```jsx\nconst contents = await multiwrapContract.getWrappedContents(wrappedTokenId);\nconsole.log(contents.erc20Tokens);\nconsole.log(contents.erc721Tokens);\nconsole.log(contents.erc1155Tokens);\n```\n\n## Learn More\n\nTo learn more about thirdweb and Next.js, take a look at the following resources:\n\n- [thirdweb React Documentation](https://docs.thirdweb.com/react) - learn about our React SDK.\n- [thirdweb JavaScript Documentation](https://docs.thirdweb.com/react) - learn about our JavaScript/TypeScript SDK.\n- [thirdweb Portal](https://docs.thirdweb.com/react) - check our guides and development resources.\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n\nYou can check out [the thirdweb GitHub organization](https://github.com/thirdweb-dev) - your feedback and contributions are welcome!\n\n## Join our Discord!\n\nFor any questions, suggestions, join our discord at [https://discord.gg/cd thirdweb](https://discord.gg/thirdweb).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fmultiwrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fmultiwrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fmultiwrap/lists"}