Skip to content
This repository was archived by the owner on Aug 30, 2022. It is now read-only.

Add some missing react snippets #120

Merged
merged 1 commit into from
Aug 8, 2022
Merged

Add some missing react snippets #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 125 additions & 0 deletions docs/snippets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,46 @@
],
"reference": "https://docs.thirdweb.com/typescript/react.useMarketplace"
},
"useMultiwrap": {
"name": "useMultiwrap",
"summary": "Hook for getting an instance of an `Multiwrap` contract. This contract is an ERC721 in which you can wrap ERC721, ERC1155 and ERC20 tokens.\n\n",
"examples": {
"javascript": "import { useMultiwrap } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const multiwrap = useMultiwrap(\"<YOUR-CONTRACT-ADDRESS>\")\n\n // Now you can use the multiwrap contract in the rest of the component\n}"
},
"subhooks": [
{
"name": "useMintNFT",
"example": "const Component = () => {\n const { contract } = useContract(<ContractAddress>);\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintNFT(contract?.nft);\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => mintNft({ name: \"My awesome NFT!\", to: \"0x...\" })}\n >\n Mint!\n </button>\n );\n};",
"reference": "https://portal.thirdweb.com/react/react.usemintnft"
},
{
"name": "useNFT",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: nft, isLoading, error } = useNFT(contract?.nft, <tokenId>);",
"reference": "https://portal.thirdweb.com/react/react.usenft"
},
{
"name": "useNFTBalance",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, <OwnerWalletAddress>);",
"reference": "https://portal.thirdweb.com/react/react.usenftbalance"
},
{
"name": "useNFTs",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });",
"reference": "https://portal.thirdweb.com/react/react.usenfts"
},
{
"name": "useOwnedNFTs",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, <OwnerWalletAddress>);",
"reference": "https://portal.thirdweb.com/react/react.useownednfts"
},
{
"name": "useTotalCirculatingSupply",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft);",
"reference": "https://portal.thirdweb.com/react/react.usetotalcirculatingsupply"
}
],
"reference": "https://docs.thirdweb.com/typescript/react.useMultiwrap"
},
"useNFTCollection": {
"name": "useNFTCollection",
"summary": "Hook for getting an instance of an `NFTCollection` contract. This contract is meant to interface with ERC721 compliant NFTs.\n\n",
Expand Down Expand Up @@ -509,6 +549,91 @@
],
"reference": "https://docs.thirdweb.com/typescript/react.usePack"
},
"useSignatureDrop": {
"name": "useSignatureDrop",
"summary": "Hook for getting an instance of an `SignatureDrop` contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted.\n\n",
"examples": {
"javascript": "import { useSignatureDrop } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const signatureDrop = useSignatureDrop(\"<YOUR-CONTRACT-ADDRESS>\")\n\n // Now you can use the Signature drop contract in the rest of the component\n}"
},
"subhooks": [
{
"name": "useActiveClaimCondition",
"example": "const { data: activeClaimCondition, isLoading, error } = useActiveClaimCondition(<YourERC1155ContractInstance>, <tokenId>);",
"reference": "https://portal.thirdweb.com/react/react.useactiveclaimcondition"
},
{
"name": "useClaimConditions",
"example": "const { data: claimConditions, isLoading, error } = useClaimConditions(<YourERC1155ContractInstance>, <tokenId>);",
"reference": "https://portal.thirdweb.com/react/react.useclaimconditions"
},
{
"name": "useClaimedNFTs",
"example": "const { data: claimedNFTs, isLoading, error } = useClaimedNFTs(<YourERC721DropContractInstance>, { start: 0, count: 100 });",
"reference": "https://portal.thirdweb.com/react/react.useclaimednfts"
},
{
"name": "useClaimedNFTSupply",
"example": "",
"reference": "https://portal.thirdweb.com/react/react.useclaimednftsupply"
},
{
"name": "useClaimIneligibilityReasons",
"example": "const { data: claimIneligibilityReasons, isLoading, error } = useClaimIneligibilityReasons(<YourERC1155ContractInstance>, { quantity: <quantity>, walletAddress: <walletAddress> }, <tokenId>);",
"reference": "https://portal.thirdweb.com/react/react.useclaimineligibilityreasons"
},
{
"name": "useClaimNFT",
"example": "const Component = () => {\n const {\n mutate: claimNft,\n isLoading,\n error,\n } = useClaimNFT(DropContract);\n\n if (error) {\n console.error(\"failed to claim nft\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => claimNft({ to: \"0x...\", quantity: 1 })}\n >\n Claim NFT!\n </button>\n );\n};",
"reference": "https://portal.thirdweb.com/react/react.useclaimnft"
},
{
"name": "useClaimToken",
"example": "const Component = () => {\n const {\n mutate: claimTokens,\n isLoading,\n error,\n } = useClaimToken(TokenDropContract);\n\n if (error) {\n console.error(\"failed to claim tokens\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => claimTokens({ to: \"0x...\", amount: 100 })}\n >\n Claim Tokens!\n </button>\n );\n};",
"reference": "https://portal.thirdweb.com/react/react.useclaimtoken"
},
{
"name": "useMintNFT",
"example": "const Component = () => {\n const { contract } = useContract(<ContractAddress>);\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintNFT(contract?.nft);\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => mintNft({ name: \"My awesome NFT!\", to: \"0x...\" })}\n >\n Mint!\n </button>\n );\n};",
"reference": "https://portal.thirdweb.com/react/react.usemintnft"
},
{
"name": "useNFT",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: nft, isLoading, error } = useNFT(contract?.nft, <tokenId>);",
"reference": "https://portal.thirdweb.com/react/react.usenft"
},
{
"name": "useNFTBalance",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, <OwnerWalletAddress>);",
"reference": "https://portal.thirdweb.com/react/react.usenftbalance"
},
{
"name": "useNFTs",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });",
"reference": "https://portal.thirdweb.com/react/react.usenfts"
},
{
"name": "useOwnedNFTs",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, <OwnerWalletAddress>);",
"reference": "https://portal.thirdweb.com/react/react.useownednfts"
},
{
"name": "useTotalCirculatingSupply",
"example": "const { contract } = useContract(<ContractAddress>);\nconst { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft);",
"reference": "https://portal.thirdweb.com/react/react.usetotalcirculatingsupply"
},
{
"name": "useUnclaimedNFTs",
"example": "const { data: unclaimedNfts, isLoading, error } = useUnclaimedNFTs(<YourERC721DropContractInstance>, { start: 0, count: 100 });",
"reference": "https://portal.thirdweb.com/react/react.useunclaimednfts"
},
{
"name": "useUnclaimedNFTSupply",
"example": "",
"reference": "https://portal.thirdweb.com/react/react.useunclaimednftsupply"
}
],
"reference": "https://docs.thirdweb.com/typescript/react.useSignatureDrop"
},
"useSplit": {
"name": "useSplit",
"summary": "Hook for getting an instance of a `Split` contract. This contract supports fund distribution to multiple parties.\n\n",
Expand Down
14 changes: 10 additions & 4 deletions scripts/generate-snippets.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,18 @@ function languageNameToKey(languageName) {
}

const CONTRACT_HOOKS = [
"useSignatureDrop",
"useNFTDrop",
"useEditionDrop",
"useNFTCollection",
"useEdition",
"useTokenDrop",
"useToken",
"useMarketplace",
"useNFTDrop",
"useEditionDrop",
"useSplit",
"useVote",
"usePack",
"useMultiwrap",
"useContract",
];

Expand Down Expand Up @@ -139,15 +142,18 @@ const CONTRACT_SETTINGS_HOOKS = [
];

const CONTRACT_SUBHOOKS = {
useSignatureDrop: [...NFT_HOOKS, ...DROP_HOOKS, ...CLAIM_CONDITIONS_HOOKS],
useNFTDrop: [...NFT_HOOKS, ...DROP_HOOKS, ...CLAIM_CONDITIONS_HOOKS],
useEditionDrop: [...NFT_HOOKS, ...DROP_HOOKS, ...CLAIM_CONDITIONS_HOOKS],
useNFTCollection: [...NFT_HOOKS],
useEdition: [...NFT_HOOKS],
useTokenDrop: [...TOKEN_HOOKS, ...DROP_HOOKS, ...CLAIM_CONDITIONS_HOOKS],
useToken: [...TOKEN_HOOKS],
useNFTDrop: [...NFT_HOOKS, ...DROP_HOOKS, ...CLAIM_CONDITIONS_HOOKS],
useMarketplace: [...MARKETPLACE_HOOKS],
useEditionDrop: [...NFT_HOOKS, ...DROP_HOOKS, ...CLAIM_CONDITIONS_HOOKS],
useSplit: [],
useVote: [],
usePack: [...NFT_HOOKS],
useMultiwrap: [...NFT_HOOKS],
useContract: [
...WALLET_CONNECTION_HOOKS,
...NETWORK_INFO_HOOKS,
Expand Down