diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 456f77f..fde885b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -4,6 +4,7 @@ module.exports = { "plugin:@typescript-eslint/recommended", "plugin:import/typescript", "plugin:prettier/recommended", + "plugin:react/recommended", ], rules: { // tsdoc @@ -30,13 +31,20 @@ module.exports = { "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-non-null-assertion": "error", "@typescript-eslint/no-parameter-properties": "error", - "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "warn", // import "import/first": "error", "import/newline-after-import": "error", - "import/no-cycle": "warn", + "import/no-cycle": "error", "import/no-default-export": "off", "import/no-useless-path-segments": "error", + // react + "react/forbid-dom-props": ["error", { forbid: ["className", "style"] }], + "react/no-children-prop": "off", + "react/prop-types": "off", + // react-hooks + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "error", // eslint curly: "error", eqeqeq: "error", @@ -46,7 +54,8 @@ module.exports = { { beforeColon: false, afterColon: true, mode: "strict" }, ], "keyword-spacing": ["error", { before: true, after: true }], - "line-comment-position": "off", + "line-comment-position": "error", + "new-cap": "error", "no-alert": "error", "no-case-declarations": "off", @@ -87,25 +96,34 @@ module.exports = { "valid-typeof": "error", semi: ["warn", "always"], // Inclusive - "inclusive-language/use-inclusive-words": "off", + "inclusive-language/use-inclusive-words": "error", + // turn off deprecated things? + "react/react-in-jsx-scope": "off", }, parser: "@typescript-eslint/parser", plugins: [ "@typescript-eslint", "import", "inclusive-language", + "react", + "react-hooks", "eslint-plugin-tsdoc", ], parserOptions: { - // project: "./tsconfig.json", - // tsconfigRootDir: __dirname, ecmaVersion: 2019, ecmaFeatures: { impliedStrict: true, + jsx: true, }, warnOnUnsupportedTypeScriptVersion: true, }, - settings: {}, + settings: { + react: { + createClass: "createReactClass", + pragma: "React", + version: "detect", + }, + }, overrides: [ // enable rule specifically for TypeScript files { @@ -115,6 +133,16 @@ module.exports = { }, }, + // in test files, allow null assertions and anys and eslint is sometimes weird about the react-scope thing + { + files: ["*test.ts?(x)"], + rules: { + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-explicit-any": "off", + + "react/display-name": "off", + }, + }, // allow requires in non-transpiled JS files and logical key ordering in config files { files: [ @@ -138,6 +166,5 @@ module.exports = { ], env: { browser: true, - node: true, }, }; diff --git a/.gitignore b/.gitignore index 66d9a2f..f1b02bb 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,8 @@ temp/ .swc/ *.log .DS_Store +<<<<<<< HEAD +======= # jns shenanigans +>>>>>>> origin/main old_src/ \ No newline at end of file diff --git a/README.md b/README.md index 525045f..7d86162 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,10 @@

Ultimate collection of React hooks for your web3 apps


+> ## v2 upgrade is coming! +> +> upcoming v3 features are documented [here](./v3-upgrade.md) + ## Installation You can install this SDK with either `npm` or `yarn`: diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..42b117b --- /dev/null +++ b/babel.config.js @@ -0,0 +1,10 @@ +module.exports = { + presets: ["@babel/preset-typescript", "@babel/preset-react"], + + overrides: [ + { + include: ["./src"], + presets: [["@babel/preset-env", { targets: "defaults, not ie 11" }]], + }, + ], +}; diff --git a/config/api-extractor.json b/config/api-extractor.json index 6c3fff5..75021f7 100644 --- a/config/api-extractor.json +++ b/config/api-extractor.json @@ -45,7 +45,7 @@ * * SUPPORTED TOKENS: , , */ - "mainEntryPointFilePath": "/dist/index.d.ts", + "mainEntryPointFilePath": "/dist/thirdweb-dev-react.cjs.d.ts", /** * A list of NPM package names whose exports should be treated as part of this package. @@ -60,7 +60,7 @@ * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been * local files for library1. */ - "bundledPackages": ["wagmi", "wagmi-core"], + "bundledPackages": [], /** * Determines how the TypeScript compiler engine will be invoked by API Extractor. diff --git a/docs/react.dappmetadata.description.md b/docs/react.dappmetadata.description.md deleted file mode 100644 index 71a4eed..0000000 --- a/docs/react.dappmetadata.description.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DAppMetaData](./react.dappmetadata.md) > [description](./react.dappmetadata.description.md) - -## DAppMetaData.description property - -optional - a description of your app - -Signature: - -```typescript -description?: string; -``` diff --git a/docs/react.dappmetadata.isdarkmode.md b/docs/react.dappmetadata.isdarkmode.md deleted file mode 100644 index 314ebc1..0000000 --- a/docs/react.dappmetadata.isdarkmode.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DAppMetaData](./react.dappmetadata.md) > [isDarkMode](./react.dappmetadata.isdarkmode.md) - -## DAppMetaData.isDarkMode property - -optional - whether to show the connect dialog in darkmode or not - -Signature: - -```typescript -isDarkMode?: boolean; -``` diff --git a/docs/react.dappmetadata.logourl.md b/docs/react.dappmetadata.logourl.md deleted file mode 100644 index c757ce8..0000000 --- a/docs/react.dappmetadata.logourl.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DAppMetaData](./react.dappmetadata.md) > [logoUrl](./react.dappmetadata.logourl.md) - -## DAppMetaData.logoUrl property - -optional - a url that points to a logo (or favicon) of your app - -Signature: - -```typescript -logoUrl?: string; -``` diff --git a/docs/react.dappmetadata.md b/docs/react.dappmetadata.md deleted file mode 100644 index 81d1208..0000000 --- a/docs/react.dappmetadata.md +++ /dev/null @@ -1,28 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DAppMetaData](./react.dappmetadata.md) - -## DAppMetaData interface - -the metadata to pass to wallet connection dialog (may show up during the wallet-connection process) - -Signature: - -```typescript -export interface DAppMetaData -``` - -## Remarks - -this is only used for wallet connect and wallet link, metamask does not support it - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [description?](./react.dappmetadata.description.md) | string | (Optional) optional - a description of your app | -| [isDarkMode?](./react.dappmetadata.isdarkmode.md) | boolean | (Optional) optional - whether to show the connect dialog in darkmode or not | -| [logoUrl?](./react.dappmetadata.logourl.md) | string | (Optional) optional - a url that points to a logo (or favicon) of your app | -| [name](./react.dappmetadata.name.md) | string | the name of your app | -| [url?](./react.dappmetadata.url.md) | string | (Optional) optional - the url where your app is hosted | - diff --git a/docs/react.dappmetadata.name.md b/docs/react.dappmetadata.name.md deleted file mode 100644 index 5e7089a..0000000 --- a/docs/react.dappmetadata.name.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DAppMetaData](./react.dappmetadata.md) > [name](./react.dappmetadata.name.md) - -## DAppMetaData.name property - -the name of your app - -Signature: - -```typescript -name: string; -``` diff --git a/docs/react.dappmetadata.url.md b/docs/react.dappmetadata.url.md deleted file mode 100644 index 1a5870a..0000000 --- a/docs/react.dappmetadata.url.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DAppMetaData](./react.dappmetadata.md) > [url](./react.dappmetadata.url.md) - -## DAppMetaData.url property - -optional - the url where your app is hosted - -Signature: - -```typescript -url?: string; -``` diff --git a/docs/react.thirdwebproviderprops.queryclient.md b/docs/react.exposedqueryoptions.md similarity index 55% rename from docs/react.thirdwebproviderprops.queryclient.md rename to docs/react.exposedqueryoptions.md index faab652..b4196c2 100644 --- a/docs/react.thirdwebproviderprops.queryclient.md +++ b/docs/react.exposedqueryoptions.md @@ -1,16 +1,16 @@ -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [queryClient](./react.thirdwebproviderprops.queryclient.md) +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ExposedQueryOptions](./react.exposedqueryoptions.md) -## ThirdwebProviderProps.queryClient property +## ExposedQueryOptions type > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -The react-query client to use. (Defaults to a default client.) +Exposed options shared across all query hooks. Signature: ```typescript -queryClient?: QueryClient; +export declare type ExposedQueryOptions = Pick, "refetchInterval">; ``` diff --git a/docs/react.md b/docs/react.md index 07aa74b..fc0b26e 100644 --- a/docs/react.md +++ b/docs/react.md @@ -12,133 +12,97 @@ | [useActiveListings(contract, filter)](./react.useactivelistings.md) | (BETA) Use this to get a list active listings from your marketplace contract. | | [useAddress()](./react.useaddress.md) | Hook for accessing the address of the connected wallet ```javascript -import { useAddress } from "@thirdweb-dev/react" +import { useAddress } from "@thirdweb-dev/react"; ``` | | [useAllContractEvents(contract, options)](./react.useallcontractevents.md) | (BETA) Use this to query (and subscribe) to all events on a contract. | -| [useAllRoleMembers(contract)](./react.useallrolemembers.md) | (BETA) Use this to get the roles of a | +| [useAllRoleMembers(contract, queryOptions)](./react.useallrolemembers.md) | (BETA) Use this to get the roles of a | | [useAuctionWinner(contract, listingId)](./react.useauctionwinner.md) | (BETA) Use this to get the winner of an auction listing from your marketplace contract. | -| [useBalance(tokenAddress)](./react.usebalance.md) | (BETA) A hook to get the native or (optional) ERC20 token balance of the connected wallet. | | [useBidBuffer(contract)](./react.usebidbuffer.md) | (BETA) Use this to get the buffer in basis points between offers from your marketplace contract. | | [useBuyNow(contract)](./react.usebuynow.md) | (BETA) Use this to buy out an auction listing from your marketplace contract. | | [useChainId()](./react.usechainid.md) | Hook for accessing the chain ID of the network the current wallet is connected to ```javascript -import { useChainId } from "@thirdweb-dev/react" +import { useChainId } from "@thirdweb-dev/react"; ``` | | [useClaimConditions(\[contract, tokenId\])](./react.useclaimconditions.md) | (BETA) Use this to get all claim conditons for ERC20, ERC721 or ERC1155 based contracts. They need to extend the claimCondition extension for this hook to work. | -| [useClaimedNFTs(contract, queryParams)](./react.useclaimednfts.md) | (BETA) Use this to get a list of \*claimed\* (minted) NFT tokens of your ERC721 Drop contract. | -| [useClaimedNFTSupply(contract)](./react.useclaimednftsupply.md) | | +| [useClaimedNFTs(contract, queryParams, queryOptions)](./react.useclaimednfts.md) | (BETA) Use this to get a list of \*claimed\* (minted) NFT tokens of your ERC721 Drop contract. | +| [useClaimedNFTSupply(contract, queryOptions)](./react.useclaimednftsupply.md) | | | [useClaimIneligibilityReasons(\[contract, params, tokenId\])](./react.useclaimineligibilityreasons.md) | (BETA) Use this to check for reasons that prevent claiming for either ERC20, ERC721 or ERC1155 based contracts. They need to extend the claimCondition extension for this hook to work. | | [useClaimNFT(contract)](./react.useclaimnft.md) | (BETA) Use this to claim a NFT on your [DropContract](./react.dropcontract.md) | | [useClaimToken(contract)](./react.useclaimtoken.md) | (BETA) Use this to claim tokens on your | -| [useCoinbaseWallet()](./react.usecoinbasewallet.md) | Hook for connecting to a Coinbase wallet. -```javascript -import { useCoinbaseWallet } from "@thirdweb-dev/react" -``` - | -| [useContract(contractAddress)](./react.usecontract.md) | (BETA) Use this resolve a contract address to a thirdweb (built-in / custom) contract instance. | +| [useCoinbaseWallet()](./react.usecoinbasewallet.md) | | +| [useContract(contractAddress, chain, queryOptions)](./react.usecontract.md) | (BETA) Use this resolve a contract address to a thirdweb (built-in / custom) contract instance. | | [useContractCall(contract, functionName)](./react.usecontractcall.md) | (BETA) Use this to get a function to make a write call to your contract | -| [useContractData(contract, functionName, args)](./react.usecontractdata.md) | (BETA) Use this to get data from a contract read-function call. | +| [useContractData(contract, functionName, functionArguments, queryOptions)](./react.usecontractdata.md) | (BETA) Use this to get data from a contract read-function call. | | [useContractEvents(contract, eventName, options)](./react.usecontractevents.md) | (BETA) Use this to query (and subscribe) to a specific event on a contract. | -| [useContractMetadata(contractAddress)](./react.usecontractmetadata.md) | (BETA) Use this to get the contract metadata for a (built-in or custom) contract. | -| [useContractPublishMetadata(contractAddress)](./react.usecontractpublishmetadata.md) | (BETA) Use this to get the publish metadata for a deployed contract. | -| [useContractType(contractAddress)](./react.usecontracttype.md) | (BETA) Use this to get the contract type for a (built-in or custom) contract. | +| [useContractMetadata(contractAddress, chain, queryOptions)](./react.usecontractmetadata.md) | (BETA) Use this to get the contract metadata for a (built-in or custom) contract. | +| [useContractPublishMetadata(contractAddress, chain, queryOptions)](./react.usecontractpublishmetadata.md) | (BETA) Use this to get the publish metadata for a deployed contract. | +| [useContractType(contractAddress, chain, queryOptions)](./react.usecontracttype.md) | (BETA) Use this to get the contract type for a (built-in or custom) contract. | | [useCreateAuctionListing(contract)](./react.usecreateauctionlisting.md) | (BETA) Use this to create a new Auction Listing on your marketplace contract. | | [useCreateDirectListing(contract)](./react.usecreatedirectlisting.md) | (BETA) Use this to create a new Direct Listing on your marketplace contract. | -| [useDisconnect(options)](./react.usedisconnect.md) | Hook for disconnecting the currently connected wallet -```javascript -import { useDisconnect } from "@thirdweb-dev/react" -``` - | -| [useEdition(contractAddress)](./react.useedition.md) | Hook for getting an instance of an Edition contract. This contract is used to interface with ERC1155 compliant NFTs. | -| [useEditionDrop(contractAddress)](./react.useeditiondrop.md) | Hook for getting an instance of an EditionDrop contract. This conract is used to interface with ERC1155 compliant NFTs that can be lazily minted. | -| [useGnosis()](./react.usegnosis.md) | Hook for connecting to a Gnosis Safe. This enables multisig wallets to connect to your application and sing transactions. -```javascript -import { useGnosis } from "@thirdweb-dev/react" -``` - | +| [useEdition(contractAddress, chain)](./react.useedition.md) | Hook for getting an instance of an Edition contract. This contract is used to interface with ERC1155 compliant NFTs. | +| [useEditionDrop(contractAddress, chain)](./react.useeditiondrop.md) | Hook for getting an instance of an EditionDrop contract. This conract is used to interface with ERC1155 compliant NFTs that can be lazily minted. | | [useGrantRole(contract)](./react.usegrantrole.md) | (BETA) Use this to grant a [WalletAddress](./react.walletaddress.md) a specific role on a | -| [useIsAddressRole(contract, role, walletAddress)](./react.useisaddressrole.md) | (BETA) Use this to check if a [WalletAddress](./react.walletaddress.md) is a member of a role on a | +| [useIsAddressRole(contract, role, walletAddress, queryOptions)](./react.useisaddressrole.md) | (BETA) Use this to check if a [WalletAddress](./react.walletaddress.md) is a member of a role on a | | [useListing(contract, listingId)](./react.uselisting.md) | (BETA) Use this to get a specific listing from the marketplace. | | [useListings(contract, filter)](./react.uselistings.md) | (BETA) Use this to get a list all listings from your marketplace contract. | -| [useMagic()](./react.usemagic.md) | Hook for connecting to an email wallet using magic link. This enables users without their own wallets to connect to your application and sign transactions securely using their email. -```javascript -import { useMagic } from "@thirdweb-dev/react" -``` - | | [useMakeBid(contract)](./react.usemakebid.md) | (BETA) Use this to place a bid on an auction listing from your marketplace contract. | -| [useMarketplace(contractAddress)](./react.usemarketplace.md) | Hook for getting an instance of a Marketplace contract. This contract is used to support marketplace for purchase and sale of on-chain assets. | -| [useMetadata(contract)](./react.usemetadata.md) | (BETA) Use this to get the metadata of your | -| [useMetamask()](./react.usemetamask.md) | Hook for connecting to a Metamask wallet. -```javascript -import { useMetamask } from "@thirdweb-dev/react" -``` - | +| [useMarketplace(contractAddress, chain)](./react.usemarketplace.md) | Hook for getting an instance of a Marketplace contract. This contract is used to support marketplace for purchase and sale of on-chain assets. | +| [useMetadata(contract, queryOptions)](./react.usemetadata.md) | (BETA) Use this to get the metadata of your | +| [useMetamask()](./react.usemetamask.md) | | | [useMintNFT(contract)](./react.usemintnft.md) | (BETA) Use this to mint a new NFT on your [NFTContract](./react.nftcontract.md) | | [useMintToken(contract)](./react.useminttoken.md) | (BETA) Use this to mint a new NFT on your ERC20 contract | -| [useMultiwrap(contractAddress)](./react.usemultiwrap.md) | Hook for getting an instance of an Multiwrap contract. This contract is an ERC721 in which you can wrap ERC721, ERC1155 and ERC20 tokens. | -| [useNetwork()](./react.usenetwork.md) | Hook for getting metadata about the network the current wallet is connected to and switching networks | -| [useNetworkMismatch()](./react.usenetworkmismatch.md) | Hook for checking whether the connected wallet is on the correct network specified by the desiredChainId passed to the <ThirdwebProvider />. +| [useMultiwrap(contractAddress, chain)](./react.usemultiwrap.md) | Hook for getting an instance of an Multiwrap contract. This contract is an ERC721 in which you can wrap ERC721, ERC1155 and ERC20 tokens. | +| [useNetworkMismatch(contract)](./react.usenetworkmismatch.md) | Hook for checking whether the connected wallet is on the correct network specified by the desiredChainId passed to the <ThirdwebProvider />. ```javascript import { useNetworkMistmatch } from "@thirdweb-dev/react" ``` | -| [useNFT(contract, tokenId)](./react.usenft.md) | (BETA) Use this to get an individual NFT token of your [NFTContract](./react.nftcontract.md). | +| [useNFT(contract, tokenId, queryOptions)](./react.usenft.md) | (BETA) Use this to get an individual NFT token of your [NFTContract](./react.nftcontract.md). | | [useNFTBalance(\[contract, ownerWalletAddress, tokenId\])](./react.usenftbalance.md) | (BETA) Use this to get a the total balance of a [NFTContract](./react.nftcontract.md) and wallet address. | -| [useNFTCollection(contractAddress)](./react.usenftcollection.md) | Hook for getting an instance of an NFTCollection contract. This contract is meant to interface with ERC721 compliant NFTs. | -| [useNFTDrop(contractAddress)](./react.usenftdrop.md) | Hook for getting an instance of an NFTDrop contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted. | -| [useNFTs(contract, queryParams)](./react.usenfts.md) | (BETA) Use this to get a list of NFT tokens of your [NFTContract](./react.nftcontract.md). | -| [useOwnedNFTs(contract, ownerWalletAddress)](./react.useownednfts.md) | (BETA) Use this to get a the owned NFTs for a specific [NFTContract](./react.nftcontract.md) and wallet address. | -| [usePack(contractAddress)](./react.usepack.md) | Hook for getting an instance of a Pack contract. This contract supports the creation of on-chain luck-based lootboxes. | -| [usePlatformFees(contract)](./react.useplatformfees.md) | (BETA) Use this to get the platform fees settings of your | -| [usePrimarySaleRecipient(contract)](./react.useprimarysalerecipient.md) | (BETA) | -| [useResolvedMediaType(uri)](./react.useresolvedmediatype.md) | | +| [useNFTCollection(contractAddress, chain)](./react.usenftcollection.md) | Hook for getting an instance of an NFTCollection contract. This contract is meant to interface with ERC721 compliant NFTs. | +| [useNFTDrop(contractAddress, chain)](./react.usenftdrop.md) | Hook for getting an instance of an NFTDrop contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted. | +| [useNFTs(contract, queryParams, queryOptions)](./react.usenfts.md) | (BETA) Use this to get a list of NFT tokens of your [NFTContract](./react.nftcontract.md). | +| [useOwnedNFTs(contract, ownerWalletAddress, queryOptions)](./react.useownednfts.md) | (BETA) Use this to get a the owned NFTs for a specific [NFTContract](./react.nftcontract.md) and wallet address. | +| [usePack(contractAddress, chain)](./react.usepack.md) | Hook for getting an instance of a Pack contract. This contract supports the creation of on-chain luck-based lootboxes. | +| [usePlatformFees(contract, queryOptions)](./react.useplatformfees.md) | (BETA) Use this to get the platform fees settings of your | +| [usePrimarySaleRecipient(contract, queryOptions)](./react.useprimarysalerecipient.md) | (BETA) | | [useRevokeRole(contract)](./react.userevokerole.md) | (BETA) Use this to revoke a [WalletAddress](./react.walletaddress.md) a specific role on a | -| [useRoleMembers(contract, role)](./react.userolemembers.md) | (BETA) Use this to get the members of a role on a | -| [useRoyaltySettings(contract)](./react.useroyaltysettings.md) | (BETA) Use this to get the royalty settings of your | +| [useRoleMembers(contract, role, queryOptions)](./react.userolemembers.md) | (BETA) Use this to get the members of a role on a | +| [useRoyaltySettings(contract, queryOptions)](./react.useroyaltysettings.md) | (BETA) Use this to get the royalty settings of your | +| [useSDK()](./react.usesdk.md) | Use this to access the ThirdwebSDK instance directly. | | [useSetAllRoleMembers(contract)](./react.usesetallrolemembers.md) | (BETA) Use this to OVERWRITE the list of addresses that are members of specific roles | -| [useSignatureDrop(contractAddress)](./react.usesignaturedrop.md) | Hook for getting an instance of an SignatureDrop contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted. | -| [useSplit(contractAddress)](./react.usesplit.md) | Hook for getting an instance of a Split contract. This contract supports fund distribution to multiple parties. | -| [useToken(contractAddress)](./react.usetoken.md) | Hook for getting an instance of an Token contract. This contract supports ERC20 compliant tokens. | -| [useTokenBalance(contract, walletAddress)](./react.usetokenbalance.md) | (BETA) Use this to get the balance of your Token contract for a given address. | -| [useTokenSupply(contract)](./react.usetokensupply.md) | (BETA) Use this to get a the total supply of your Token contract. | -| [useTotalCirculatingSupply(\[contract, tokenId\])](./react.usetotalcirculatingsupply.md) | (BETA) Use this to get a the total (minted) supply of your [NFTContract](./react.nftcontract.md). | -| [useTotalCount(contract)](./react.usetotalcount.md) | (BETA) Use this to get a the number of tokens in your [NFTContract](./react.nftcontract.md). | -| [useUnclaimedNFTs(contract, queryParams)](./react.useunclaimednfts.md) | (BETA) Use this to get a list of \*unclaimed\* NFT tokens of your ERC721 Drop contract. | -| [useUnclaimedNFTSupply(contract)](./react.useunclaimednftsupply.md) | | +| [useSignatureDrop(contractAddress, chain)](./react.usesignaturedrop.md) | Hook for getting an instance of an SignatureDrop contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted. | +| [useSplit(contractAddress, chain)](./react.usesplit.md) | Hook for getting an instance of a Split contract. This contract supports fund distribution to multiple parties. | +| [useThirdwebConfig()](./react.usethirdwebconfig.md) | | +| [useToken(contractAddress, chain)](./react.usetoken.md) | Hook for getting an instance of an Token contract. This contract supports ERC20 compliant tokens. | +| [useTokenBalance(contract, walletAddress, queryOptions)](./react.usetokenbalance.md) | (BETA) Use this to get the balance of your Token contract for a given address. | +| [useTokenSupply(contract, queryOptions)](./react.usetokensupply.md) | (BETA) Use this to get a the total supply of your Token contract. | +| [useTotalCirculatingSupply(\[contract, tokenId\])](./react.usetotalcirculatingsupply.md) | (BETA) Use this to get a the total (minted) supply of your [NFTContract](./react.nftcontract.md).\* | +| [useTotalCount(contract, queryOptions)](./react.usetotalcount.md) | (BETA) Use this to get a the number of tokens in your [NFTContract](./react.nftcontract.md). | +| [useUnclaimedNFTs(contract, queryParams, queryOptions)](./react.useunclaimednfts.md) | (BETA) Use this to get a list of \*unclaimed\* NFT tokens of your ERC721 Drop contract. | +| [useUnclaimedNFTSupply(contract, queryOptions)](./react.useunclaimednftsupply.md) | | | [useUpdateMetadata(contract)](./react.useupdatemetadata.md) | (BETA) Use this to update the metadata of your | | [useUpdatePlatformFees(contract)](./react.useupdateplatformfees.md) | (BETA) Use this to update the platform fees settings of your | | [useUpdatePrimarySaleRecipient(contract)](./react.useupdateprimarysalerecipient.md) | (BETA) Use this to update the primary sales recipient of your | | [useUpdateRoyaltySettings(contract)](./react.useupdateroyaltysettings.md) | (BETA) Use this to update the royalty settings of your | -| [useVote(contractAddress)](./react.usevote.md) | Hook for getting an instance of an Vote contract. This contract enables fully featured voting-based decentralized governance systems. | -| [useWalletConnect()](./react.usewalletconnect.md) | Hook for connecting to a mobile wallet with Wallet Connect -```javascript -import { useWalletConnect } from "@thirdweb-dev/react" -``` - | +| [useVote(contractAddress, chain)](./react.usevote.md) | Hook for getting an instance of an Vote contract. This contract enables fully featured voting-based decentralized governance systems. | +| [useWalletConnect()](./react.usewalletconnect.md) | | | [useWinningBid(contract, listingId)](./react.usewinningbid.md) | (BETA) Use this to get a the winning bid for an auction listing from your marketplace contract. | ## Interfaces | Interface | Description | | --- | --- | -| [DAppMetaData](./react.dappmetadata.md) | the metadata to pass to wallet connection dialog (may show up during the wallet-connection process) | -| [MediaRendererProps](./react.mediarendererprops.md) | The props for the [MediaRenderer](./react.mediarenderer.md) component. | -| [MediaType](./react.mediatype.md) | | -| [SharedMediaProps](./react.sharedmediaprops.md) | | -| [ThirdwebNftMediaProps](./react.thirdwebnftmediaprops.md) | The props for the [ThirdwebNftMedia](./react.thirdwebnftmedia.md) component. | -| [ThirdwebProviderProps](./react.thirdwebproviderprops.md) | The possible props for the ThirdwebProvider. | | [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) | | ## Variables | Variable | Description | | --- | --- | -| [MediaRenderer](./react.mediarenderer.md) | This component can be used to render any media type, including image, audio, video, and html files. Its convenient for rendering NFT media files, as these can be a variety of different types. The component falls back to a external link if the media type is not supported.Props: [MediaRendererProps](./react.mediarendererprops.md) | -| [ThirdwebNftMedia](./react.thirdwebnftmedia.md) | Render a nft based on the common metadata returned by the thirdweb sdk. | -| [ThirdwebProvider](./react.thirdwebprovider.md) | The <ThirdwebProvider /> component lets you control what networks you want users to connect to, what types of wallets can connect to your app, and the settings for the \[Typescript SDK\](https://docs.thirdweb.com/typescript). | -| [ThirdwebSDKProvider](./react.thirdwebsdkprovider.md) | (BETA) A barebones wrapper around the Thirdweb SDK.You can use this in order to be able to pass a provider & signer directly to the SDK. | +| [ThirdwebProvider](./react.thirdwebprovider.md) | | +| [ThirdwebSDKProvider](./react.thirdwebsdkprovider.md) | | ## Type Aliases @@ -151,6 +115,7 @@ import { useWalletConnect } from "@thirdweb-dev/react" | [ClaimTokenParams](./react.claimtokenparams.md) | | | [ContractAddress](./react.contractaddress.md) | (BETA) A contract address. | | [DropContract](./react.dropcontract.md) | (BETA) The possible DROP contract types. | +| [ExposedQueryOptions](./react.exposedqueryoptions.md) | (BETA) Exposed options shared across all query hooks. | | [MakeBidParams](./react.makebidparams.md) | | | [MintNFTParams](./react.mintnftparams.md) | (BETA) The params for the [useMintNFT()](./react.usemintnft.md) hook mutation. | | [MintNFTReturnType](./react.mintnftreturntype.md) | (BETA) The return type of the [useMintNFT()](./react.usemintnft.md) hook. | diff --git a/docs/react.mediarenderer.md b/docs/react.mediarenderer.md deleted file mode 100644 index 7369f99..0000000 --- a/docs/react.mediarenderer.md +++ /dev/null @@ -1,32 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaRenderer](./react.mediarenderer.md) - -## MediaRenderer variable - -This component can be used to render any media type, including image, audio, video, and html files. Its convenient for rendering NFT media files, as these can be a variety of different types. The component falls back to a external link if the media type is not supported. - -Props: [MediaRendererProps](./react.mediarendererprops.md) - -Signature: - -```typescript -MediaRenderer: React.ForwardRefExoticComponent> -``` - -## Example - -We can take a video file hosted on IPFS and render it using this component as follows - -```jsx -const Component = () => { - return -} -``` -You can try switching out the `src` prop to different types of URLs and media types to explore the possibilities. - diff --git a/docs/react.mediarendererprops.alt.md b/docs/react.mediarendererprops.alt.md deleted file mode 100644 index 7969570..0000000 --- a/docs/react.mediarendererprops.alt.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaRendererProps](./react.mediarendererprops.md) > [alt](./react.mediarendererprops.alt.md) - -## MediaRendererProps.alt property - -The alt text for the media. - -Signature: - -```typescript -alt?: string; -``` diff --git a/docs/react.mediarendererprops.md b/docs/react.mediarendererprops.md deleted file mode 100644 index 8d6da5a..0000000 --- a/docs/react.mediarendererprops.md +++ /dev/null @@ -1,23 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaRendererProps](./react.mediarendererprops.md) - -## MediaRendererProps interface - -The props for the [MediaRenderer](./react.mediarenderer.md) component. - -Signature: - -```typescript -export interface MediaRendererProps extends SharedMediaProps -``` -Extends: [SharedMediaProps](./react.sharedmediaprops.md) - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [alt?](./react.mediarendererprops.alt.md) | string | (Optional) The alt text for the media. | -| [poster?](./react.mediarendererprops.poster.md) | string \| null | (Optional) The media poster image uri. (if applicable) | -| [src?](./react.mediarendererprops.src.md) | string \| null | (Optional) The media source uri. | - diff --git a/docs/react.mediarendererprops.poster.md b/docs/react.mediarendererprops.poster.md deleted file mode 100644 index ae618d3..0000000 --- a/docs/react.mediarendererprops.poster.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaRendererProps](./react.mediarendererprops.md) > [poster](./react.mediarendererprops.poster.md) - -## MediaRendererProps.poster property - -The media poster image uri. (if applicable) - -Signature: - -```typescript -poster?: string | null; -``` diff --git a/docs/react.mediarendererprops.src.md b/docs/react.mediarendererprops.src.md deleted file mode 100644 index 550572b..0000000 --- a/docs/react.mediarendererprops.src.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaRendererProps](./react.mediarendererprops.md) > [src](./react.mediarendererprops.src.md) - -## MediaRendererProps.src property - -The media source uri. - -Signature: - -```typescript -src?: string | null; -``` diff --git a/docs/react.mediatype.md b/docs/react.mediatype.md deleted file mode 100644 index 239d235..0000000 --- a/docs/react.mediatype.md +++ /dev/null @@ -1,19 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaType](./react.mediatype.md) - -## MediaType interface - -Signature: - -```typescript -export interface MediaType -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [mimeType?](./react.mediatype.mimetype.md) | string | (Optional) | -| [url?](./react.mediatype.url.md) | string | (Optional) | - diff --git a/docs/react.mediatype.mimetype.md b/docs/react.mediatype.mimetype.md deleted file mode 100644 index 82dfe18..0000000 --- a/docs/react.mediatype.mimetype.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaType](./react.mediatype.md) > [mimeType](./react.mediatype.mimetype.md) - -## MediaType.mimeType property - -Signature: - -```typescript -mimeType?: string; -``` diff --git a/docs/react.mediatype.url.md b/docs/react.mediatype.url.md deleted file mode 100644 index f956ceb..0000000 --- a/docs/react.mediatype.url.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MediaType](./react.mediatype.md) > [url](./react.mediatype.url.md) - -## MediaType.url property - -Signature: - -```typescript -url?: string; -``` diff --git a/docs/react.nftcontract.md b/docs/react.nftcontract.md index b3d0ca0..3b1f6fb 100644 --- a/docs/react.nftcontract.md +++ b/docs/react.nftcontract.md @@ -14,3 +14,40 @@ The possible NFT contract types. ```typescript export declare type NFTContract = Erc721 | Erc1155; ``` + +## Example 1 + + +```javascript +const nftDrop = useNFTDrop(); +``` + +## Example 2 + + +```javascript +const editionDrop = useEditionDrop(); +``` + +## Example 3 + + +```javascript +const nftCollection = useNFTCollection(); +``` + +## Example 4 + + +```javascript +const edition = useEdition(); +``` + +## Example 5 + + +```javascript +const { contract } = useContract(); +const nftContract = contract?.nft; +``` + diff --git a/docs/react.sharedmediaprops.classname.md b/docs/react.sharedmediaprops.classname.md deleted file mode 100644 index 11eaa53..0000000 --- a/docs/react.sharedmediaprops.classname.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) > [className](./react.sharedmediaprops.classname.md) - -## SharedMediaProps.className property - -Signature: - -```typescript -className?: string; -``` diff --git a/docs/react.sharedmediaprops.controls.md b/docs/react.sharedmediaprops.controls.md deleted file mode 100644 index 1131280..0000000 --- a/docs/react.sharedmediaprops.controls.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) > [controls](./react.sharedmediaprops.controls.md) - -## SharedMediaProps.controls property - -Show the media controls (where applicable) (default false) - -Signature: - -```typescript -controls?: HTMLVideoElement["controls"]; -``` diff --git a/docs/react.sharedmediaprops.height.md b/docs/react.sharedmediaprops.height.md deleted file mode 100644 index 32b9eaf..0000000 --- a/docs/react.sharedmediaprops.height.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) > [height](./react.sharedmediaprops.height.md) - -## SharedMediaProps.height property - -Signature: - -```typescript -height?: HTMLIFrameElement["height"]; -``` diff --git a/docs/react.sharedmediaprops.md b/docs/react.sharedmediaprops.md deleted file mode 100644 index 0a052f7..0000000 --- a/docs/react.sharedmediaprops.md +++ /dev/null @@ -1,23 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) - -## SharedMediaProps interface - -Signature: - -```typescript -export interface SharedMediaProps -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [className?](./react.sharedmediaprops.classname.md) | string | (Optional) | -| [controls?](./react.sharedmediaprops.controls.md) | HTMLVideoElement\["controls"\] | (Optional) Show the media controls (where applicable) (default false) | -| [height?](./react.sharedmediaprops.height.md) | HTMLIFrameElement\["height"\] | (Optional) | -| [requireInteraction?](./react.sharedmediaprops.requireinteraction.md) | boolean | (Optional) Require user interaction to play the media. (default false) | -| [style?](./react.sharedmediaprops.style.md) | React.CSSProperties | (Optional) | -| [width?](./react.sharedmediaprops.width.md) | HTMLIFrameElement\["width"\] | (Optional) | - diff --git a/docs/react.sharedmediaprops.requireinteraction.md b/docs/react.sharedmediaprops.requireinteraction.md deleted file mode 100644 index 2e66b93..0000000 --- a/docs/react.sharedmediaprops.requireinteraction.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) > [requireInteraction](./react.sharedmediaprops.requireinteraction.md) - -## SharedMediaProps.requireInteraction property - -Require user interaction to play the media. (default false) - -Signature: - -```typescript -requireInteraction?: boolean; -``` diff --git a/docs/react.sharedmediaprops.style.md b/docs/react.sharedmediaprops.style.md deleted file mode 100644 index 9f030be..0000000 --- a/docs/react.sharedmediaprops.style.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) > [style](./react.sharedmediaprops.style.md) - -## SharedMediaProps.style property - -Signature: - -```typescript -style?: React.CSSProperties; -``` diff --git a/docs/react.sharedmediaprops.width.md b/docs/react.sharedmediaprops.width.md deleted file mode 100644 index 5de51a3..0000000 --- a/docs/react.sharedmediaprops.width.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [SharedMediaProps](./react.sharedmediaprops.md) > [width](./react.sharedmediaprops.width.md) - -## SharedMediaProps.width property - -Signature: - -```typescript -width?: HTMLIFrameElement["width"]; -``` diff --git a/docs/react.thirdwebnftmedia.md b/docs/react.thirdwebnftmedia.md deleted file mode 100644 index 1c70e3c..0000000 --- a/docs/react.thirdwebnftmedia.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebNftMedia](./react.thirdwebnftmedia.md) - -## ThirdwebNftMedia variable - -Render a nft based on the common metadata returned by the thirdweb sdk. - -Signature: - -```typescript -ThirdwebNftMedia: React.ForwardRefExoticComponent> -``` diff --git a/docs/react.thirdwebnftmediaprops.md b/docs/react.thirdwebnftmediaprops.md deleted file mode 100644 index 0f560d0..0000000 --- a/docs/react.thirdwebnftmediaprops.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebNftMediaProps](./react.thirdwebnftmediaprops.md) - -## ThirdwebNftMediaProps interface - -The props for the [ThirdwebNftMedia](./react.thirdwebnftmedia.md) component. - -Signature: - -```typescript -export interface ThirdwebNftMediaProps extends SharedMediaProps -``` -Extends: [SharedMediaProps](./react.sharedmediaprops.md) - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [metadata](./react.thirdwebnftmediaprops.metadata.md) | NFTMetadata | The NFT metadata of the NFT returned by the thirdweb sdk. | - diff --git a/docs/react.thirdwebnftmediaprops.metadata.md b/docs/react.thirdwebnftmediaprops.metadata.md deleted file mode 100644 index d2a6f4e..0000000 --- a/docs/react.thirdwebnftmediaprops.metadata.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebNftMediaProps](./react.thirdwebnftmediaprops.md) > [metadata](./react.thirdwebnftmediaprops.metadata.md) - -## ThirdwebNftMediaProps.metadata property - -The NFT metadata of the NFT returned by the thirdweb sdk. - -Signature: - -```typescript -metadata: NFTMetadata; -``` diff --git a/docs/react.thirdwebprovider.md b/docs/react.thirdwebprovider.md index 82fc01a..5ddb1a0 100644 --- a/docs/react.thirdwebprovider.md +++ b/docs/react.thirdwebprovider.md @@ -4,27 +4,8 @@ ## ThirdwebProvider variable -The `` component lets you control what networks you want users to connect to, what types of wallets can connect to your app, and the settings for the \[Typescript SDK\](https://docs.thirdweb.com/typescript). - Signature: ```typescript -ThirdwebProvider: ({ sdkOptions, chainRpc, supportedChains, walletConnectors, dAppMeta, desiredChainId, storageInterface, queryClient, autoConnect, children, }: React.PropsWithChildren>) => JSX.Element +ThirdwebProvider: React.FC> ``` - -## Example - -You can wrap your application with the provider as follows: - -```jsx title="App.jsx" -import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react"; - -const App = () => { - return ( - - - - ); -}; -``` - diff --git a/docs/react.thirdwebproviderprops.autoconnect.md b/docs/react.thirdwebproviderprops.autoconnect.md deleted file mode 100644 index f809882..0000000 --- a/docs/react.thirdwebproviderprops.autoconnect.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [autoConnect](./react.thirdwebproviderprops.autoconnect.md) - -## ThirdwebProviderProps.autoConnect property - -Whether or not to attempt auto-connect to a wallet. - -Signature: - -```typescript -autoConnect?: boolean; -``` diff --git a/docs/react.thirdwebproviderprops.chainrpc.md b/docs/react.thirdwebproviderprops.chainrpc.md deleted file mode 100644 index 7635f5d..0000000 --- a/docs/react.thirdwebproviderprops.chainrpc.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [chainRpc](./react.thirdwebproviderprops.chainrpc.md) - -## ThirdwebProviderProps.chainRpc property - -A partial map of chainIds to rpc urls to use for certain chains If not provided, will default to the rpcUrls of the chain objects for the supported chains - -Signature: - -```typescript -chainRpc?: Partial>; -``` diff --git a/docs/react.thirdwebproviderprops.dappmeta.md b/docs/react.thirdwebproviderprops.dappmeta.md deleted file mode 100644 index 98a8f75..0000000 --- a/docs/react.thirdwebproviderprops.dappmeta.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [dAppMeta](./react.thirdwebproviderprops.dappmeta.md) - -## ThirdwebProviderProps.dAppMeta property - -Metadata to pass to wallet connect and walletlink wallet connect. (Used to show \*which\* dApp is being connected to in mobile wallets that support it) Defaults to just the name being passed as `thirdweb powered dApp`. - -Signature: - -```typescript -dAppMeta?: DAppMetaData; -``` diff --git a/docs/react.thirdwebproviderprops.desiredchainid.md b/docs/react.thirdwebproviderprops.desiredchainid.md deleted file mode 100644 index e8fc999..0000000 --- a/docs/react.thirdwebproviderprops.desiredchainid.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [desiredChainId](./react.thirdwebproviderprops.desiredchainid.md) - -## ThirdwebProviderProps.desiredChainId property - -The chainId that your dApp is running on. While this \*can\* be `undefined` it is required to be passed. Passing `undefined` will cause no SDK to be instantiated. When passing a chainId, it \*\*must\*\* be part of the `supportedChains` array. - -Signature: - -```typescript -desiredChainId: TSupportedChain extends Chain ? TSupportedChain["id"] : TSupportedChain | undefined; -``` diff --git a/docs/react.thirdwebproviderprops.md b/docs/react.thirdwebproviderprops.md deleted file mode 100644 index c6d8692..0000000 --- a/docs/react.thirdwebproviderprops.md +++ /dev/null @@ -1,28 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) - -## ThirdwebProviderProps interface - -The possible props for the ThirdwebProvider. - -Signature: - -```typescript -export interface ThirdwebProviderProps -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [autoConnect?](./react.thirdwebproviderprops.autoconnect.md) | boolean | (Optional) Whether or not to attempt auto-connect to a wallet. | -| [chainRpc?](./react.thirdwebproviderprops.chainrpc.md) | Partial<ChainRpc<TSupportedChain>> | (Optional) A partial map of chainIds to rpc urls to use for certain chains If not provided, will default to the rpcUrls of the chain objects for the supported chains | -| [dAppMeta?](./react.thirdwebproviderprops.dappmeta.md) | [DAppMetaData](./react.dappmetadata.md) | (Optional) Metadata to pass to wallet connect and walletlink wallet connect. (Used to show \*which\* dApp is being connected to in mobile wallets that support it) Defaults to just the name being passed as thirdweb powered dApp. | -| [desiredChainId](./react.thirdwebproviderprops.desiredchainid.md) | TSupportedChain extends Chain ? TSupportedChain\["id"\] : TSupportedChain \| undefined | The chainId that your dApp is running on. While this \*can\* be undefined it is required to be passed. Passing undefined will cause no SDK to be instantiated. When passing a chainId, it \*\*must\*\* be part of the supportedChains array. | -| [queryClient?](./react.thirdwebproviderprops.queryclient.md) | QueryClient | (BETA) (Optional) The react-query client to use. (Defaults to a default client.) | -| [sdkOptions?](./react.thirdwebproviderprops.sdkoptions.md) | SDKOptions | (Optional) The to pass to the thirdweb SDK comes with sensible defaults | -| [storageInterface?](./react.thirdwebproviderprops.storageinterface.md) | IStorage | (Optional) The storage interface to use with the sdk. | -| [supportedChains?](./react.thirdwebproviderprops.supportedchains.md) | TSupportedChain\[\] | (Optional) An array of chainIds or objects that the dApp supports If not provided, all chains supported by the SDK will be supported by default | -| [walletConnectors?](./react.thirdwebproviderprops.walletconnectors.md) | WalletConnector\[\] | (Optional) An array of connector types (strings) or wallet connector objects that the dApp supports If not provided, will default to metamask (injected), wallet connect and walletlink (coinbase wallet) with sensible defaults | - diff --git a/docs/react.thirdwebproviderprops.sdkoptions.md b/docs/react.thirdwebproviderprops.sdkoptions.md deleted file mode 100644 index bfc94d8..0000000 --- a/docs/react.thirdwebproviderprops.sdkoptions.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [sdkOptions](./react.thirdwebproviderprops.sdkoptions.md) - -## ThirdwebProviderProps.sdkOptions property - -The to pass to the thirdweb SDK comes with sensible defaults - -Signature: - -```typescript -sdkOptions?: SDKOptions; -``` diff --git a/docs/react.thirdwebproviderprops.storageinterface.md b/docs/react.thirdwebproviderprops.storageinterface.md deleted file mode 100644 index 3e24cae..0000000 --- a/docs/react.thirdwebproviderprops.storageinterface.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [storageInterface](./react.thirdwebproviderprops.storageinterface.md) - -## ThirdwebProviderProps.storageInterface property - -The storage interface to use with the sdk. - -Signature: - -```typescript -storageInterface?: IStorage; -``` diff --git a/docs/react.thirdwebproviderprops.supportedchains.md b/docs/react.thirdwebproviderprops.supportedchains.md deleted file mode 100644 index 99253b9..0000000 --- a/docs/react.thirdwebproviderprops.supportedchains.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [supportedChains](./react.thirdwebproviderprops.supportedchains.md) - -## ThirdwebProviderProps.supportedChains property - -An array of chainIds or objects that the dApp supports If not provided, all chains supported by the SDK will be supported by default - -Signature: - -```typescript -supportedChains?: TSupportedChain[]; -``` diff --git a/docs/react.thirdwebproviderprops.walletconnectors.md b/docs/react.thirdwebproviderprops.walletconnectors.md deleted file mode 100644 index a77dfc4..0000000 --- a/docs/react.thirdwebproviderprops.walletconnectors.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [walletConnectors](./react.thirdwebproviderprops.walletconnectors.md) - -## ThirdwebProviderProps.walletConnectors property - -An array of connector types (strings) or wallet connector objects that the dApp supports If not provided, will default to metamask (injected), wallet connect and walletlink (coinbase wallet) with sensible defaults - -Signature: - -```typescript -walletConnectors?: WalletConnector[]; -``` diff --git a/docs/react.thirdwebsdkprovider.md b/docs/react.thirdwebsdkprovider.md index db16f85..64d80e4 100644 --- a/docs/react.thirdwebsdkprovider.md +++ b/docs/react.thirdwebsdkprovider.md @@ -4,20 +4,8 @@ ## ThirdwebSDKProvider variable -> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. -> - -A barebones wrapper around the Thirdweb SDK. - -You can use this in order to be able to pass a provider & signer directly to the SDK. - Signature: ```typescript ThirdwebSDKProvider: React.FC> ``` - -## Remarks - -Utilizing this provider will mean hooks for wallet management are not available, if you need those please use the [ThirdwebProvider](./react.thirdwebprovider.md) instead. - diff --git a/docs/react.thirdwebsdkproviderprops.appmetadata.md b/docs/react.thirdwebsdkproviderprops.appmetadata.md new file mode 100644 index 0000000..0f4f05b --- /dev/null +++ b/docs/react.thirdwebsdkproviderprops.appmetadata.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [appMetadata](./react.thirdwebsdkproviderprops.appmetadata.md) + +## ThirdwebSDKProviderProps.appMetadata property + +Signature: + +```typescript +readonly appMetadata?: AppMetadata; +``` diff --git a/docs/react.thirdwebsdkproviderprops.chainid.md b/docs/react.thirdwebsdkproviderprops.chainid.md new file mode 100644 index 0000000..eb0a911 --- /dev/null +++ b/docs/react.thirdwebsdkproviderprops.chainid.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [chainId](./react.thirdwebsdkproviderprops.chainid.md) + +## ThirdwebSDKProviderProps.chainId property + +Signature: + +```typescript +readonly chainId: RequiredParam; +``` diff --git a/docs/react.thirdwebsdkproviderprops.chainidtorpcurlmap.md b/docs/react.thirdwebsdkproviderprops.chainidtorpcurlmap.md new file mode 100644 index 0000000..6cfc919 --- /dev/null +++ b/docs/react.thirdwebsdkproviderprops.chainidtorpcurlmap.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [chainIdToRPCUrlMap](./react.thirdwebsdkproviderprops.chainidtorpcurlmap.md) + +## ThirdwebSDKProviderProps.chainIdToRPCUrlMap property + +Signature: + +```typescript +readonly chainIdToRPCUrlMap?: Partial; +``` diff --git a/docs/react.thirdwebsdkproviderprops.md b/docs/react.thirdwebsdkproviderprops.md index 0a114e6..b656456 100644 --- a/docs/react.thirdwebsdkproviderprops.md +++ b/docs/react.thirdwebsdkproviderprops.md @@ -7,14 +7,18 @@ Signature: ```typescript -export interface ThirdwebSDKProviderProps extends Pick +export interface ThirdwebSDKProviderProps ``` -Extends: Pick<[ThirdwebProviderProps](./react.thirdwebproviderprops.md) ## Properties | Property | Type | Description | | --- | --- | --- | -| [provider](./react.thirdwebsdkproviderprops.provider.md) | ChainOrRpc \| SignerOrProvider | | +| [appMetadata?](./react.thirdwebsdkproviderprops.appmetadata.md) | AppMetadata | (Optional) | +| [chainId](./react.thirdwebsdkproviderprops.chainid.md) | [RequiredParam](./react.requiredparam.md)<ChainIdOrName> | | +| [chainIdToRPCUrlMap?](./react.thirdwebsdkproviderprops.chainidtorpcurlmap.md) | Partial<ChainIDToRpcUrlMap> | (Optional) | +| [options?](./react.thirdwebsdkproviderprops.options.md) | SDKOptions | (Optional) | +| [queryClient?](./react.thirdwebsdkproviderprops.queryclient.md) | QueryClient | (Optional) | | [signer?](./react.thirdwebsdkproviderprops.signer.md) | Signer | (Optional) | +| [storageInterface?](./react.thirdwebsdkproviderprops.storageinterface.md) | IStorage | (Optional) | diff --git a/docs/react.thirdwebsdkproviderprops.provider.md b/docs/react.thirdwebsdkproviderprops.options.md similarity index 61% rename from docs/react.thirdwebsdkproviderprops.provider.md rename to docs/react.thirdwebsdkproviderprops.options.md index ede8204..d75b0f4 100644 --- a/docs/react.thirdwebsdkproviderprops.provider.md +++ b/docs/react.thirdwebsdkproviderprops.options.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [provider](./react.thirdwebsdkproviderprops.provider.md) +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [options](./react.thirdwebsdkproviderprops.options.md) -## ThirdwebSDKProviderProps.provider property +## ThirdwebSDKProviderProps.options property Signature: ```typescript -provider: ChainOrRpc | SignerOrProvider; +readonly options?: SDKOptions; ``` diff --git a/docs/react.thirdwebsdkproviderprops.queryclient.md b/docs/react.thirdwebsdkproviderprops.queryclient.md new file mode 100644 index 0000000..8146a48 --- /dev/null +++ b/docs/react.thirdwebsdkproviderprops.queryclient.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [queryClient](./react.thirdwebsdkproviderprops.queryclient.md) + +## ThirdwebSDKProviderProps.queryClient property + +Signature: + +```typescript +queryClient?: QueryClient; +``` diff --git a/docs/react.thirdwebsdkproviderprops.signer.md b/docs/react.thirdwebsdkproviderprops.signer.md index 7a023d8..556e930 100644 --- a/docs/react.thirdwebsdkproviderprops.signer.md +++ b/docs/react.thirdwebsdkproviderprops.signer.md @@ -7,5 +7,5 @@ Signature: ```typescript -signer?: Signer; +readonly signer?: Signer; ``` diff --git a/docs/react.thirdwebsdkproviderprops.storageinterface.md b/docs/react.thirdwebsdkproviderprops.storageinterface.md new file mode 100644 index 0000000..128af64 --- /dev/null +++ b/docs/react.thirdwebsdkproviderprops.storageinterface.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) > [storageInterface](./react.thirdwebsdkproviderprops.storageinterface.md) + +## ThirdwebSDKProviderProps.storageInterface property + +Signature: + +```typescript +readonly storageInterface?: IStorage; +``` diff --git a/docs/react.useactiveclaimcondition.md b/docs/react.useactiveclaimcondition.md index bab6b61..77905a8 100644 --- a/docs/react.useactiveclaimcondition.md +++ b/docs/react.useactiveclaimcondition.md @@ -17,11 +17,11 @@ export declare function useActiveClaimConditionReturns: -import("react-query").UseQueryResult<{ snapshot?: { address: string; maxClaimable: string; }\[\] \| undefined; quantityLimitPerTransaction: string; startTime: Date; price: import("ethers").BigNumber; currencyAddress: string; maxQuantity: string; waitInSeconds: import("ethers").BigNumber; merkleRootHash: string \| number\[\]; availableSupply: string; currentMintSupply: string; currencyMetadata: { symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }; }, unknown> +import("react-query").UseQueryResult<{ snapshot?: { address: string; maxClaimable: string; }\[\] \| undefined; startTime: Date; currencyAddress: string; price: import("ethers").BigNumber; maxQuantity: string; quantityLimitPerTransaction: string; waitInSeconds: import("ethers").BigNumber; merkleRootHash: string \| number\[\]; availableSupply: string; currentMintSupply: string; currencyMetadata: { symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }; }, unknown> a response object with the currently active claim condition diff --git a/docs/react.useaddress.md b/docs/react.useaddress.md index 78ebf4d..2b96488 100644 --- a/docs/react.useaddress.md +++ b/docs/react.useaddress.md @@ -7,7 +7,7 @@ Hook for accessing the address of the connected wallet ```javascript -import { useAddress } from "@thirdweb-dev/react" +import { useAddress } from "@thirdweb-dev/react"; ``` Signature: @@ -24,10 +24,10 @@ string \| undefined To get the address of the connected wallet, you can use the hook as follows: ```javascript -import { useAddress } from "@thirdweb-dev/react" +import { useAddress } from "@thirdweb-dev/react"; const App = () => { - const address = useAddress() + const address = useAddress(); return
{address}
} diff --git a/docs/react.useallrolemembers.md b/docs/react.useallrolemembers.md index 1c67b1b..118fd05 100644 --- a/docs/react.useallrolemembers.md +++ b/docs/react.useallrolemembers.md @@ -12,7 +12,7 @@ Use this to get the roles of a Signature: ```typescript -export declare function useAllRoleMembers(contract: RequiredParam): import("react-query").UseQueryResult, string[]>>, unknown>; +export declare function useAllRoleMembers(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult, string[]>>, unknown>; ``` ## Parameters @@ -20,6 +20,7 @@ export declare function useAllRoleMembers(c | Parameter | Type | Description | | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: diff --git a/docs/react.usebalance.md b/docs/react.usebalance.md deleted file mode 100644 index 3f1f4b0..0000000 --- a/docs/react.usebalance.md +++ /dev/null @@ -1,35 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useBalance](./react.usebalance.md) - -## useBalance() function - -> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. -> - -A hook to get the native or (optional) ERC20 token balance of the connected wallet. - -Signature: - -```typescript -export declare function useBalance(tokenAddress?: ContractAddress): import("react-query").UseQueryResult<{ - symbol: string; - value: import("ethers").BigNumber; - name: string; - decimals: number; - displayValue: string; -} | undefined, unknown>; -``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| tokenAddress | [ContractAddress](./react.contractaddress.md) | (Optional) the address of the token contract, if empty will use the chain's native token | - -Returns: - -import("react-query").UseQueryResult<{ symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; } \| undefined, unknown> - -the balance of the connected wallet (native or ERC20) - diff --git a/docs/react.usechainid.md b/docs/react.usechainid.md index 603bff2..cfd2a52 100644 --- a/docs/react.usechainid.md +++ b/docs/react.usechainid.md @@ -7,7 +7,7 @@ Hook for accessing the chain ID of the network the current wallet is connected to ```javascript -import { useChainId } from "@thirdweb-dev/react" +import { useChainId } from "@thirdweb-dev/react"; ``` Signature: @@ -24,10 +24,10 @@ number \| undefined You can get the chain ID of the connected wallet by using the hook as follows: ```javascript -import { useChainId } from "@thirdweb-dev/react" +import { useChainId } from "@thirdweb-dev/react"; const App = () => { - const chainId = useChainId() + const chainId = useChainId(); return
{chainId}
} diff --git a/docs/react.useclaimconditions.md b/docs/react.useclaimconditions.md index 523ba28..896c9ea 100644 --- a/docs/react.useclaimconditions.md +++ b/docs/react.useclaimconditions.md @@ -17,11 +17,11 @@ export declare function useClaimConditionsReturns: -import("react-query").UseQueryResult<{ snapshot?: { address: string; maxClaimable: string; }\[\] \| undefined; quantityLimitPerTransaction: string; startTime: Date; price: import("ethers").BigNumber; currencyAddress: string; maxQuantity: string; waitInSeconds: import("ethers").BigNumber; merkleRootHash: string \| number\[\]; availableSupply: string; currentMintSupply: string; currencyMetadata: { symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }; }\[\], unknown> +import("react-query").UseQueryResult<{ snapshot?: { address: string; maxClaimable: string; }\[\] \| undefined; startTime: Date; currencyAddress: string; price: import("ethers").BigNumber; maxQuantity: string; quantityLimitPerTransaction: string; waitInSeconds: import("ethers").BigNumber; merkleRootHash: string \| number\[\]; availableSupply: string; currentMintSupply: string; currencyMetadata: { symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }; }\[\], unknown> a response object with the list of claim conditions diff --git a/docs/react.useclaimednfts.md b/docs/react.useclaimednfts.md index 43e9eda..df6a3d8 100644 --- a/docs/react.useclaimednfts.md +++ b/docs/react.useclaimednfts.md @@ -12,7 +12,7 @@ Use this to get a list of \*claimed\* (minted) NFT tokens of your ERC721 Drop co Signature: ```typescript -export declare function useClaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): import("react-query").UseQueryResult[], unknown>; +export declare function useClaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult[], unknown>; ``` ## Parameters @@ -21,10 +21,11 @@ export declare function useClaimedNFTs(contract: RequiredParam, qu | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<[DropContract](./react.dropcontract.md)> | an instance of a [DropContract](./react.dropcontract.md) | | queryParams | QueryAllParams | (Optional) query params to pass to the query for the sake of pagination | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<import("../../types").[NFT](./react.nft.md)<[DropContract](./react.dropcontract.md)>\[\], unknown> +import("react-query").UseQueryResult<import("../../types/types").[NFT](./react.nft.md)<[DropContract](./react.dropcontract.md)>\[\], unknown> a response object that includes an array of NFTs that are claimed diff --git a/docs/react.useclaimednftsupply.md b/docs/react.useclaimednftsupply.md index e0b9d6d..8046318 100644 --- a/docs/react.useclaimednftsupply.md +++ b/docs/react.useclaimednftsupply.md @@ -7,7 +7,7 @@ Signature: ```typescript -export declare function useClaimedNFTSupply(contract: RequiredParam): import("react-query").UseQueryResult; +export declare function useClaimedNFTSupply(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -15,10 +15,11 @@ export declare function useClaimedNFTSupply(contract: RequiredParam<[DropContract](./react.dropcontract.md)> | an instance of a [DropContract](./react.dropcontract.md) | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<import("ethers").BigNumber, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes the number of NFTs that are claimed diff --git a/docs/react.usecoinbasewallet.md b/docs/react.usecoinbasewallet.md index 4b58ec2..9820a08 100644 --- a/docs/react.usecoinbasewallet.md +++ b/docs/react.usecoinbasewallet.md @@ -4,40 +4,16 @@ ## useCoinbaseWallet() function -Hook for connecting to a Coinbase wallet. - -```javascript -import { useCoinbaseWallet } from "@thirdweb-dev/react" -``` - Signature: ```typescript -export declare function useCoinbaseWallet(): () => Promise<{ - data?: import("wagmi-core").ConnectorData | undefined; - error?: Error | undefined; -}>; +export declare function useCoinbaseWallet(): { + error: Error | null; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; ``` Returns: -() => Promise<{ data?: import("wagmi-core").ConnectorData<any> \| undefined; error?: Error \| undefined; }> - -## Example - -We can allow users to connect with Coinbase Wallet as follows: - -```javascript -import { useCoinbaseWallet } from "@thirdweb-dev/react" - -const App = () => { - const connectWithCoinbaseWallet = useCoinbaseWallet() - - return ( - - ) -} -``` -Upon clicking this button, users will be prompted with a popup asking them scan a QR code with their Coinbase Wallet. Once they scan the QR code, their wallet will then be connected to the page as expected. +{ error: Error \| null; isConnecting: boolean; connect: (chainId?: SUPPORTED\_CHAIN\_ID) => Promise<void>; } diff --git a/docs/react.usecontract.md b/docs/react.usecontract.md index 53b0208..40aed66 100644 --- a/docs/react.usecontract.md +++ b/docs/react.usecontract.md @@ -12,8 +12,8 @@ Use this resolve a contract address to a thirdweb (built-in / custom) contract i Signature: ```typescript -export declare function useContract(contractAddress: RequiredParam): { - contract: null; +export declare function useContract(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): { + contract: SmartContract | undefined; data: undefined; error: unknown; isError: true; @@ -34,17 +34,11 @@ export declare function useContract(contractAddress: RequiredParam(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } | { - contract: null; + contract: SmartContract | undefined; data: undefined; error: null; isError: false; @@ -65,24 +59,12 @@ export declare function useContract(contractAddress: RequiredParam(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } | { - contract: SmartContract | null; - data: { - contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; - publishMetadata: null; - } | { - contractType: "custom"; - publishMetadata: PublishedMetadata | undefined; - } | undefined; + contract: SmartContract | undefined; + data: any; error: unknown; isError: true; isLoading: false; @@ -102,24 +84,12 @@ export declare function useContract(contractAddress: RequiredParam(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } | { - contract: SmartContract | null; - data: { - contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; - publishMetadata: null; - } | { - contractType: "custom"; - publishMetadata: PublishedMetadata | undefined; - } | undefined; + contract: SmartContract | undefined; + data: any; error: null; isError: false; isLoading: false; @@ -139,13 +109,7 @@ export declare function useContract(contractAddress: RequiredParam(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: import("react-query").FetchStatus; }; @@ -156,10 +120,12 @@ export declare function useContract(contractAddress: RequiredParam<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| chain | ChainIdOrName | (Optional) | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -{ contract: null; data: undefined; error: unknown; isError: true; isLoading: false; isLoadingError: true; isRefetchError: false; isSuccess: false; status: "error"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<{ contractType: "split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined; publishMetadata: null; } \| { contractType: "custom"; publishMetadata: PublishedMetadata \| undefined; } \| undefined, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } \| { contract: null; data: undefined; error: null; isError: false; isLoading: true; isLoadingError: false; isRefetchError: false; isSuccess: false; status: "loading"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<{ contractType: "split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined; publishMetadata: null; } \| { contractType: "custom"; publishMetadata: PublishedMetadata \| undefined; } \| undefined, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } \| { contract: SmartContract<any> \| null; data: { contractType: "split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined; publishMetadata: null; } \| { contractType: "custom"; publishMetadata: PublishedMetadata \| undefined; } \| undefined; error: unknown; isError: true; isLoading: false; isLoadingError: false; isRefetchError: true; isSuccess: false; status: "error"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<{ contractType: "split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined; publishMetadata: null; } \| { contractType: "custom"; publishMetadata: PublishedMetadata \| undefined; } \| undefined, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } \| { contract: SmartContract<any> \| null; data: { contractType: "split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined; publishMetadata: null; } \| { contractType: "custom"; publishMetadata: PublishedMetadata \| undefined; } \| undefined; error: null; isError: false; isLoading: false; isLoadingError: false; isRefetchError: false; isSuccess: true; status: "success"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<{ contractType: "split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined; publishMetadata: null; } \| { contractType: "custom"; publishMetadata: PublishedMetadata \| undefined; } \| undefined, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } +{ contract: SmartContract<any> \| undefined; data: undefined; error: unknown; isError: true; isLoading: false; isLoadingError: true; isRefetchError: false; isSuccess: false; status: "error"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<any, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } \| { contract: SmartContract<any> \| undefined; data: undefined; error: null; isError: false; isLoading: true; isLoadingError: false; isRefetchError: false; isSuccess: false; status: "loading"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<any, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } \| { contract: SmartContract<any> \| undefined; data: any; error: unknown; isError: true; isLoading: false; isLoadingError: false; isRefetchError: true; isSuccess: false; status: "error"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<any, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } \| { contract: SmartContract<any> \| undefined; data: any; error: null; isError: false; isLoading: false; isLoadingError: false; isRefetchError: false; isSuccess: true; status: "success"; dataUpdatedAt: number; errorUpdatedAt: number; failureCount: number; errorUpdateCount: number; isFetched: boolean; isFetchedAfterMount: boolean; isFetching: boolean; isPaused: boolean; isPlaceholderData: boolean; isPreviousData: boolean; isRefetching: boolean; isStale: boolean; refetch: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) \| undefined) => Promise<import("react-query").QueryObserverResult<any, unknown>>; remove: () => void; fetchStatus: import("react-query").FetchStatus; } a response object that includes the contract once it is resolved diff --git a/docs/react.usecontractdata.md b/docs/react.usecontractdata.md index 10bcea8..f25cd70 100644 --- a/docs/react.usecontractdata.md +++ b/docs/react.usecontractdata.md @@ -12,7 +12,7 @@ Use this to get data from a contract read-function call. Signature: ```typescript -export declare function useContractData(contract: RequiredParam["contract"]>, functionName: RequiredParam, ...args: unknown[] | [...unknown[], CallOverrides]): import("react-query").UseQueryResult; +export declare function useContractData(contract: RequiredParam["contract"]>, functionName: RequiredParam, functionArguments: unknown[] | [...unknown[], CallOverrides], queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -21,7 +21,8 @@ export declare function useContractData(contract: RequiredParam<ReturnType<typeof useContract>\["contract"\]> | the contract instance of the contract to call a function on | | functionName | [RequiredParam](./react.requiredparam.md)<string> | the name of the function to call | -| args | unknown\[\] \| \[...unknown\[\], CallOverrides\] | The arguments to pass to the function (if any), with optional call arguments as the last parameter | +| functionArguments | unknown\[\] \| \[...unknown\[\], CallOverrides\] | | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: diff --git a/docs/react.usecontractmetadata.md b/docs/react.usecontractmetadata.md index 7d8f6fd..2f51d1b 100644 --- a/docs/react.usecontractmetadata.md +++ b/docs/react.usecontractmetadata.md @@ -12,13 +12,7 @@ Use this to get the contract metadata for a (built-in or custom) contract. Signature: ```typescript -export declare function useContractMetadata(contractAddress: RequiredParam): import("react-query").UseQueryResult<{ - [x: string]: import("@thirdweb-dev/sdk/dist/browser").Json; - description?: string | undefined; - image?: any; - external_link?: string | undefined; - name: string; -}, unknown>; +export declare function useContractMetadata(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -26,10 +20,12 @@ export declare function useContractMetadata(contractAddress: RequiredParam<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| chain | ChainIdOrName | (Optional) | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; description?: string \| undefined; image?: any; external\_link?: string \| undefined; name: string; }, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes the contract metadata of the deployed contract diff --git a/docs/react.usecontractpublishmetadata.md b/docs/react.usecontractpublishmetadata.md index fd8d29c..6a90a81 100644 --- a/docs/react.usecontractpublishmetadata.md +++ b/docs/react.usecontractpublishmetadata.md @@ -12,7 +12,7 @@ Use this to get the publish metadata for a deployed contract. Signature: ```typescript -export declare function useContractPublishMetadata(contractAddress: RequiredParam): import("react-query").UseQueryResult; +export declare function useContractPublishMetadata(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -20,10 +20,12 @@ export declare function useContractPublishMetadata(contractAddress: RequiredPara | Parameter | Type | Description | | --- | --- | --- | | contractAddress | [RequiredParam](./react.requiredparam.md)<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| chain | ChainIdOrName | (Optional) | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<PublishedMetadata \| undefined, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes the published metadata (name, abi, bytecode) of the contract diff --git a/docs/react.usecontracttype.md b/docs/react.usecontracttype.md index 8a65447..6b47da9 100644 --- a/docs/react.usecontracttype.md +++ b/docs/react.usecontracttype.md @@ -12,7 +12,7 @@ Use this to get the contract type for a (built-in or custom) contract. Signature: ```typescript -export declare function useContractType(contractAddress: RequiredParam): import("react-query").UseQueryResult<"split" | "custom" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined, unknown>; +export declare function useContractType(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -20,10 +20,12 @@ export declare function useContractType(contractAddress: RequiredParam<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| chain | ChainIdOrName | (Optional) | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<"split" \| "custom" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| undefined, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes the contract type of the contract diff --git a/docs/react.usedisconnect.md b/docs/react.usedisconnect.md deleted file mode 100644 index 59c6ae4..0000000 --- a/docs/react.usedisconnect.md +++ /dev/null @@ -1,52 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useDisconnect](./react.usedisconnect.md) - -## useDisconnect() function - -Hook for disconnecting the currently connected wallet - -```javascript -import { useDisconnect } from "@thirdweb-dev/react" -``` - -Signature: - -```typescript -export declare function useDisconnect(options?: { - reconnectAfterGnosis?: boolean; -}): () => Promise | undefined; - error?: Error | undefined; -}>; -``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| options | { reconnectAfterGnosis?: boolean; } | (Optional) | - -Returns: - -() => Promise<void \| { data?: import("wagmi").ConnectorData<any> \| undefined; error?: Error \| undefined; }> - -## Example - -The following will enable users to disconnect their wallet from the page. - -```javascript -import { useDisconnect } from "@thirdweb-dev/react" - -const App = () => { - const disconnect = useDisconnect() - - return ( - - ) -} -``` -Once users disconnect their wallet, the `useAddress`, `useChainId`, `useAccount`, and `useNetwork` hooks will no longer return values until a user connects their wallet again. - diff --git a/docs/react.useedition.md b/docs/react.useedition.md index cd2e48c..df2850f 100644 --- a/docs/react.useedition.md +++ b/docs/react.useedition.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `Edition` contract. This contract is used to Signature: ```typescript -export declare function useEdition(contractAddress?: string): Edition | undefined; +export declare function useEdition(contractAddress: RequiredParam, chain?: ChainIdOrName): Edition | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Edition contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Edition contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.useeditiondrop.md b/docs/react.useeditiondrop.md index 2dd65aa..5e9b23b 100644 --- a/docs/react.useeditiondrop.md +++ b/docs/react.useeditiondrop.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `EditionDrop` contract. This conract is used Signature: ```typescript -export declare function useEditionDrop(contractAddress?: string): EditionDrop | undefined; +export declare function useEditionDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): EditionDrop | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Edition Drop contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Edition Drop contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usegnosis.md b/docs/react.usegnosis.md deleted file mode 100644 index fd491c7..0000000 --- a/docs/react.usegnosis.md +++ /dev/null @@ -1,41 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useGnosis](./react.usegnosis.md) - -## useGnosis() function - -Hook for connecting to a Gnosis Safe. This enables multisig wallets to connect to your application and sing transactions. - -```javascript -import { useGnosis } from "@thirdweb-dev/react" -``` - -Signature: - -```typescript -export declare function useGnosis(): (config: GnosisConnectorArguments) => Promise<{ - data?: import("wagmi-core").ConnectorData | undefined; - error?: Error | undefined; -}>; -``` -Returns: - -(config: GnosisConnectorArguments) => Promise<{ data?: import("wagmi-core").ConnectorData<any> \| undefined; error?: Error \| undefined; }> - -## Example - - -```javascript -import { useGnosis } from "@thirdweb-dev/react" - -const App = () => { - const connectWithGnosis = useGnosis() - - return ( - - ) -} -``` - diff --git a/docs/react.useisaddressrole.md b/docs/react.useisaddressrole.md index fc139e6..d101694 100644 --- a/docs/react.useisaddressrole.md +++ b/docs/react.useisaddressrole.md @@ -12,7 +12,7 @@ Use this to check if a [WalletAddress](./react.walletaddress.md) is a member of Signature: ```typescript -export declare function useIsAddressRole(contract: RequiredParam, role: RolesForContract, walletAddress: RequiredParam): boolean; +export declare function useIsAddressRole(contract: RequiredParam, role: RolesForContract, walletAddress: RequiredParam, queryOptions?: ExposedQueryOptions): boolean; ``` ## Parameters @@ -22,6 +22,7 @@ export declare function useIsAddressRole(co | contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | | role | RolesForContract<TContract> | the role to check the member against, see | | walletAddress | [RequiredParam](./react.requiredparam.md)<[WalletAddress](./react.walletaddress.md)> | the address to check | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: diff --git a/docs/react.usemagic.md b/docs/react.usemagic.md deleted file mode 100644 index 804857d..0000000 --- a/docs/react.usemagic.md +++ /dev/null @@ -1,76 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useMagic](./react.usemagic.md) - -## useMagic() function - -Hook for connecting to an email wallet using magic link. This enables users without their own wallets to connect to your application and sign transactions securely using their email. - -```javascript -import { useMagic } from "@thirdweb-dev/react" -``` - -Signature: - -```typescript -export declare function useMagic(): (configuration: LoginWithMagicLinkConfiguration) => Promise<{ - data?: import("wagmi-core").ConnectorData | undefined; - error?: Error | undefined; -}>; -``` -Returns: - -(configuration: LoginWithMagicLinkConfiguration) => Promise<{ data?: import("wagmi-core").ConnectorData<any> \| undefined; error?: Error \| undefined; }> - -## Example - -Before using this hook, you first need to set up the magic configuration in your `ThirdwebProvider`, including your magic API key. - -```javascript -// Add the magic configuration object to your wallet connectors -const connectors = [ - "metamask", - "walletConnect", - "walletLink", - { - name: "magic", - options: { - apiKey: "your-magic-api-key", - } - } -] - -// Add the above to the walletConnectors prop of your -const Provider = ({ children }) => ( - return ( - - {children} - - ) -} -``` -In order to use the hook to connect users with magic link, you just need to provide the users email to the connect function. - -You can setup the hook with the following configuration: - -```javascript -import { useMagic } from "@thirdweb-dev/react" -import { useState } from "react" - -const LoginWithMagicLink = () => { - const connectWithMagic = useMagic() - const [email, setEmail] = useState() - - return ( -
- setEmail(e.target.value)} /> - -
- ) -} -``` - diff --git a/docs/react.usemarketplace.md b/docs/react.usemarketplace.md index 5899848..7466f1c 100644 --- a/docs/react.usemarketplace.md +++ b/docs/react.usemarketplace.md @@ -9,14 +9,15 @@ Hook for getting an instance of a `Marketplace` contract. This contract is used Signature: ```typescript -export declare function useMarketplace(contractAddress?: string): Marketplace | undefined; +export declare function useMarketplace(contractAddress: RequiredParam, chain?: ChainIdOrName): Marketplace | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Marketplace contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Marketplace contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usemetadata.md b/docs/react.usemetadata.md index 3423f1c..e403a2b 100644 --- a/docs/react.usemetadata.md +++ b/docs/react.usemetadata.md @@ -12,13 +12,7 @@ Use this to get the metadata of your Signature: ```typescript -export declare function useMetadata(contract: RequiredParam): import("react-query").UseQueryResult<{ - [x: string]: import("@thirdweb-dev/sdk/dist/browser").Json; - description?: string | undefined; - image?: any; - external_link?: string | undefined; - name: string; -}, unknown>; +export declare function useMetadata(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -26,10 +20,11 @@ export declare function useMetadata(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; description?: string \| undefined; image?: any; external\_link?: string \| undefined; name: string; }, unknown> +import("react-query").UseQueryResult<any, unknown> a object containing the metadata diff --git a/docs/react.usemetamask.md b/docs/react.usemetamask.md index 0f92563..3080eb1 100644 --- a/docs/react.usemetamask.md +++ b/docs/react.usemetamask.md @@ -4,42 +4,16 @@ ## useMetamask() function -Hook for connecting to a Metamask wallet. - -```javascript -import { useMetamask } from "@thirdweb-dev/react" -``` - Signature: ```typescript -export declare function useMetamask(): () => Promise<{ - data?: import("wagmi-core").ConnectorData | undefined; - error?: Error | undefined; -} | { - error: Error; -}>; +export declare function useMetamask(): { + error: Error | null; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; ``` Returns: -() => Promise<{ data?: import("wagmi-core").ConnectorData<any> \| undefined; error?: Error \| undefined; } \| { error: Error; }> - -## Example - -We can allow users to connect their metamask wallets as follows: - -```javascript -import { useMetamask } from "@thirdweb-dev/react" - -const App = () => { - const connectWithMetamask = useMetamask() - - return ( - - ) -} -``` -Here, we use the `useMetamask` hook to handle metamask connection. When a user clicks the button, we'll call the `connectWithMetamask` function, which will prompt users to connect their metamask wallet. +{ error: Error \| null; isConnecting: boolean; connect: (chainId?: SUPPORTED\_CHAIN\_ID) => Promise<void>; } diff --git a/docs/react.usemintnft.md b/docs/react.usemintnft.md index 8d6bcdb..b0a5762 100644 --- a/docs/react.usemintnft.md +++ b/docs/react.usemintnft.md @@ -27,16 +27,17 @@ import("react-query").UseMutationResult<[MintNFTReturnType](./react.mintnftre a mutation object that can be used to mint a new NFT token to the connected wallet -## Example +## Example 1 ```jsx const Component = () => { + const nftDrop = useNFTDrop(); const { mutate: mintNft, isLoading, error, - } = useMintNFT(NFTContract); + } = useMintNFT(nftDrop); if (error) { console.error("failed to mint nft", error); @@ -53,3 +54,21 @@ const Component = () => { }; ``` +## Example 2 + + +```jsx +const Component = () => { + const { contract } = useContract(); + const { + mutate: mintNft, + isLoading, + error, + } = useMintNFT(contract?.nft); + + if (error) { + console.error("failed to mint nft", error); + @@ -333,7 +393,7 @@ export function useNFTBalance( +}; +``` + diff --git a/docs/react.usemultiwrap.md b/docs/react.usemultiwrap.md index 91f1891..3f84356 100644 --- a/docs/react.usemultiwrap.md +++ b/docs/react.usemultiwrap.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `Multiwrap` contract. This contract is an ERC Signature: ```typescript -export declare function useMultiwrap(contractAddress?: string): Multiwrap | undefined; +export declare function useMultiwrap(contractAddress: RequiredParam, chain?: ChainIdOrName): Multiwrap | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Multiwrap contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Multiwrap contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usenetwork.md b/docs/react.usenetwork.md deleted file mode 100644 index 343b69e..0000000 --- a/docs/react.usenetwork.md +++ /dev/null @@ -1,92 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useNetwork](./react.usenetwork.md) - -## useNetwork() function - -Hook for getting metadata about the network the current wallet is connected to and switching networks - -Signature: - -```typescript -export declare function useNetwork(): readonly [{ - readonly data: { - readonly chain: { - id: number; - unsupported: boolean | undefined; - name?: string | undefined; - nativeCurrency?: { - name: string; - symbol: string; - decimals: 18; - } | undefined; - rpcUrls?: string[] | undefined; - blockExplorers?: { - name: string; - url: string; - }[] | undefined; - testnet?: boolean | undefined; - } | undefined; - readonly chains: import("wagmi").Chain[]; - }; - readonly error: Error | undefined; - readonly loading: boolean | undefined; -}, ((chainId: number) => Promise<{ - data: undefined; - error: import("wagmi").SwitchChainError; -} | { - data: import("wagmi").Chain | undefined; - error: undefined; -}>) | undefined]; -``` -Returns: - -readonly \[{ readonly data: { readonly chain: { id: number; unsupported: boolean \| undefined; name?: string \| undefined; nativeCurrency?: { name: string; symbol: string; decimals: 18; } \| undefined; rpcUrls?: string\[\] \| undefined; blockExplorers?: { name: string; url: string; }\[\] \| undefined; testnet?: boolean \| undefined; } \| undefined; readonly chains: import("wagmi").Chain\[\]; }; readonly error: Error \| undefined; readonly loading: boolean \| undefined; }, ((chainId: number) => Promise<{ data: undefined; error: import("wagmi").SwitchChainError; } \| { data: import("wagmi").Chain \| undefined; error: undefined; }>) \| undefined\] - -## Example - - -```javascript -import { useNetwork } from "@thirdweb-dev/react"; - -const App = () => { - const [ - { - data: { chain, chains }, - loading, - error, - }, - switchNetwork, - ] = useNetwork(); - - return ( - <> - {loading ? ( -
Connecting...
- ) : chain ? ( -
Connected to {chain.name}
- ) : ( - "" - )} - - {chains.map((ch) => ( - - ))} - - {error &&
{error.message}
} - - ); -}; -``` -It's important to note that some wallet apps do not support programmatic network switching and switchNetwork will be undefined. For those situations, you can typically switch networks in the wallet app this hook will still work. - diff --git a/docs/react.usenetworkmismatch.md b/docs/react.usenetworkmismatch.md index 577c80a..681628f 100644 --- a/docs/react.usenetworkmismatch.md +++ b/docs/react.usenetworkmismatch.md @@ -13,8 +13,15 @@ import { useNetworkMistmatch } from "@thirdweb-dev/react" Signature: ```typescript -export declare function useNetworkMismatch(): boolean; +export declare function useNetworkMismatch(contract?: UpdateableNetwork): boolean; ``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| contract | UpdateableNetwork | (Optional) | + Returns: boolean diff --git a/docs/react.usenft.md b/docs/react.usenft.md index b98101a..a3bc941 100644 --- a/docs/react.usenft.md +++ b/docs/react.usenft.md @@ -12,7 +12,7 @@ Use this to get an individual NFT token of your [NFTContract](./react.nftcontrac Signature: ```typescript -export declare function useNFT(contract: RequiredParam, tokenId: RequiredParam): import("react-query").UseQueryResult, unknown>; +export declare function useNFT(contract: RequiredParam, tokenId: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult, unknown>; ``` ## Parameters @@ -21,6 +21,7 @@ export declare function useNFT(contract: Required | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a [NFTContract](./react.nftcontract.md) | | tokenId | [RequiredParam](./react.requiredparam.md)<BigNumberish> | the tokenId to look up | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: @@ -28,10 +29,19 @@ import("react-query").UseQueryResult<[NFT](./react.nft.md)<TContra a response object that includes the metadata for the given tokenId -## Example +## Example 1 ```javascript -const { data: nft, isLoading, error } = useNFT(NFTContract, ); +const nftDrop = useNFTDrop(); +const { data: nft, isLoading, error } = useNFT(nftDrop, ); +``` + +## Example 2 + + +```javascript +const { contract } = useContract(); +const { data: nft, isLoading, error } = useNFT(contract?.nft, ); ``` diff --git a/docs/react.usenftbalance.md b/docs/react.usenftbalance.md index 3de01a2..96b238b 100644 --- a/docs/react.usenftbalance.md +++ b/docs/react.usenftbalance.md @@ -27,10 +27,19 @@ import("react-query").UseQueryResult<BigNumber, unknown> a response object that includes the total balance of the owner -## Example +## Example 1 ```javascript -const { data: ownerBalance, isLoading, error } = useNFTBalance(NFTContract, ); +const nftDrop = useNFTDrop(); +const { data: ownerBalance, isLoading, error } = useNFTBalance(nftDrop, ); +``` + +## Example 2 + + +```javascript +const { contract } = useContract(); +const { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, ); ``` diff --git a/docs/react.usenftcollection.md b/docs/react.usenftcollection.md index fb2ddc6..1656751 100644 --- a/docs/react.usenftcollection.md +++ b/docs/react.usenftcollection.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `NFTCollection` contract. This contract is me Signature: ```typescript -export declare function useNFTCollection(contractAddress?: string): NFTCollection | undefined; +export declare function useNFTCollection(contractAddress: RequiredParam, chain?: ChainIdOrName): NFTCollection | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the NFT Collection contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the NFT Collection contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usenftdrop.md b/docs/react.usenftdrop.md index 3a14841..63f676f 100644 --- a/docs/react.usenftdrop.md +++ b/docs/react.usenftdrop.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `NFTDrop` contract. This contract is meant to Signature: ```typescript -export declare function useNFTDrop(contractAddress?: string): NFTDrop | undefined; +export declare function useNFTDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): NFTDrop | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the NFT Drop contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the NFT Drop contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usenfts.md b/docs/react.usenfts.md index 2e61603..603f6f6 100644 --- a/docs/react.usenfts.md +++ b/docs/react.usenfts.md @@ -12,7 +12,7 @@ Use this to get a list of NFT tokens of your [NFTContract](./react.nftcontract.m Signature: ```typescript -export declare function useNFTs(contract: RequiredParam, queryParams?: QueryAllParams): import("react-query").UseQueryResult[], unknown>; +export declare function useNFTs(contract: RequiredParam, queryParams?: QueryAllParams, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult[], unknown>; ``` ## Parameters @@ -21,6 +21,7 @@ export declare function useNFTs(contract: Require | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a [NFTContract](./react.nftcontract.md) | | queryParams | QueryAllParams | (Optional) query params to pass to the query for the sake of pagination | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: @@ -28,10 +29,19 @@ import("react-query").UseQueryResult<[NFT](./react.nft.md)<TContra a response object that includes an array of NFTs -## Example +## Example 1 ```javascript -const { data: nfts, isLoading, error } = useNFTs(NFTContract, { start: 0, count: 100 }); +const nftDrop = useNFTDrop(); +const { data: nfts, isLoading, error } = useNFTs(nftDrop, { start: 0, count: 100 }); +``` + +## Example 2 + + +```javascript +const { contract } = useContract(); +const { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 }); ``` diff --git a/docs/react.useownednfts.md b/docs/react.useownednfts.md index 23c5938..cb5eb11 100644 --- a/docs/react.useownednfts.md +++ b/docs/react.useownednfts.md @@ -12,7 +12,7 @@ Use this to get a the owned NFTs for a specific [NFTContract](./react.nftcontrac Signature: ```typescript -export declare function useOwnedNFTs(contract: RequiredParam, ownerWalletAddress: RequiredParam): import("react-query").UseQueryResult[], unknown>; +export declare function useOwnedNFTs(contract: RequiredParam, ownerWalletAddress: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult[], unknown>; ``` ## Parameters @@ -21,6 +21,7 @@ export declare function useOwnedNFTs(contract: Re | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a [NFTContract](./react.nftcontract.md) | | ownerWalletAddress | [RequiredParam](./react.requiredparam.md)<[WalletAddress](./react.walletaddress.md)> | the wallet adress to get owned tokens for | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: @@ -28,10 +29,19 @@ import("react-query").UseQueryResult<[NFT](./react.nft.md)<TContra a response object that includes the list of owned tokens -## Example +## Example 1 ```javascript -const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(NFTContract, ); +const nftDrop = useNFTDrop(); +const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(nftDrop, ); +``` + +## Example 2 + + +```javascript +const { contract } = useContract(); +const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, ); ``` diff --git a/docs/react.usepack.md b/docs/react.usepack.md index 51775a4..be2a4d3 100644 --- a/docs/react.usepack.md +++ b/docs/react.usepack.md @@ -9,14 +9,15 @@ Hook for getting an instance of a `Pack` contract. This contract supports the cr Signature: ```typescript -export declare function usePack(contractAddress?: string): Pack | undefined; +export declare function usePack(contractAddress: RequiredParam, chain?: ChainIdOrName): Pack | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Pack contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Pack contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.useplatformfees.md b/docs/react.useplatformfees.md index 3479763..7003766 100644 --- a/docs/react.useplatformfees.md +++ b/docs/react.useplatformfees.md @@ -12,10 +12,7 @@ Use this to get the platform fees settings of your Signature: ```typescript -export declare function usePlatformFees(contract: RequiredParam): import("react-query").UseQueryResult<{ - platform_fee_basis_points: number; - platform_fee_recipient: string; -}, unknown>; +export declare function usePlatformFees(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -23,10 +20,11 @@ export declare function usePlatformFees(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ platform\_fee\_basis\_points: number; platform\_fee\_recipient: string; }, unknown> +import("react-query").UseQueryResult<any, unknown> an object containing the platform fee basis points and the fee recipient address diff --git a/docs/react.useprimarysalerecipient.md b/docs/react.useprimarysalerecipient.md index 6dcaf70..e12e75f 100644 --- a/docs/react.useprimarysalerecipient.md +++ b/docs/react.useprimarysalerecipient.md @@ -10,7 +10,7 @@ Signature: ```typescript -export declare function usePrimarySaleRecipient(contract: RequiredParam): import("react-query").UseQueryResult; +export declare function usePrimarySaleRecipient(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -18,10 +18,11 @@ export declare function usePrimarySaleRecipient(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<string, unknown> +import("react-query").UseQueryResult<any, unknown> the wallet address of the primary sales recipient diff --git a/docs/react.useresolvedmediatype.md b/docs/react.useresolvedmediatype.md deleted file mode 100644 index b172925..0000000 --- a/docs/react.useresolvedmediatype.md +++ /dev/null @@ -1,50 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useResolvedMediaType](./react.useresolvedmediatype.md) - -## useResolvedMediaType() function - -Signature: - -```typescript -export declare function useResolvedMediaType(uri?: string): { - url: string | undefined; - mimeType: string | undefined; -}; -``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| uri | string | (Optional) the uri to resolve (can be a url or a ipfs://<cid>) | - -Returns: - -{ url: string \| undefined; mimeType: string \| undefined; } - -the fully resolved url + mime type of the media - -## Example - -Usage with fully formed url: - -```jsx -const Component = () => { - const resolved = useResolvedMediaType("https://example.com/video.mp4"); - console.log("mime type", resolved.data.mimeType); - console.log("url", resolved.data.url); - return null; -} -``` -Usage with ipfs cid: - -```jsx -const Component = () => { - const resolved = useResolvedMediaType("ipfs://QmWATWQ7fVPP2EFGu71UkfnqhYXDYH566qy47CnJDgvsd"); - console.log("mime type", resolved.data.mimeType); - console.log("url", resolved.data.url); - return null; -} -``` - diff --git a/docs/react.userolemembers.md b/docs/react.userolemembers.md index 517bb0d..883778a 100644 --- a/docs/react.userolemembers.md +++ b/docs/react.userolemembers.md @@ -12,7 +12,7 @@ Use this to get the members of a role on a Signature: ```typescript -export declare function useRoleMembers(contract: RequiredParam, role: RolesForContract): import("react-query").UseQueryResult; +export declare function useRoleMembers(contract: RequiredParam, role: RolesForContract, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -21,6 +21,7 @@ export declare function useRoleMembers(cont | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | | role | RolesForContract<TContract> | the role to get the members of, see | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: diff --git a/docs/react.useroyaltysettings.md b/docs/react.useroyaltysettings.md index 4b8039a..f73e215 100644 --- a/docs/react.useroyaltysettings.md +++ b/docs/react.useroyaltysettings.md @@ -12,10 +12,7 @@ Use this to get the royalty settings of your Signature: ```typescript -export declare function useRoyaltySettings(contract: RequiredParam): import("react-query").UseQueryResult<{ - seller_fee_basis_points: number; - fee_recipient: string; -}, unknown>; +export declare function useRoyaltySettings(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -23,10 +20,11 @@ export declare function useRoyaltySettings(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ seller\_fee\_basis\_points: number; fee\_recipient: string; }, unknown> +import("react-query").UseQueryResult<any, unknown> an object containing recipient address and the royalty basis points diff --git a/docs/react.usesdk.md b/docs/react.usesdk.md new file mode 100644 index 0000000..7946bfa --- /dev/null +++ b/docs/react.usesdk.md @@ -0,0 +1,19 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useSDK](./react.usesdk.md) + +## useSDK() function + +Use this to access the ThirdwebSDK instance directly. + +Signature: + +```typescript +export declare function useSDK(): ThirdwebSDK | undefined; +``` +Returns: + +ThirdwebSDK \| undefined + +an instance of the ThirdwebSDK or undefined if no chain is defined + diff --git a/docs/react.usesignaturedrop.md b/docs/react.usesignaturedrop.md index a5c64b6..ab35ce9 100644 --- a/docs/react.usesignaturedrop.md +++ b/docs/react.usesignaturedrop.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `SignatureDrop` contract. This contract is me Signature: ```typescript -export declare function useSignatureDrop(contractAddress?: string): SignatureDrop | undefined; +export declare function useSignatureDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): SignatureDrop | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the NFT Drop contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the NFT Drop contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usesplit.md b/docs/react.usesplit.md index 3a2bf04..a90fe81 100644 --- a/docs/react.usesplit.md +++ b/docs/react.usesplit.md @@ -9,14 +9,15 @@ Hook for getting an instance of a `Split` contract. This contract supports fund Signature: ```typescript -export declare function useSplit(contractAddress?: string): Split | undefined; +export declare function useSplit(contractAddress: RequiredParam, chain?: ChainIdOrName): Split | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Split contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Split contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usethirdwebconfig.md b/docs/react.usethirdwebconfig.md new file mode 100644 index 0000000..1734e99 --- /dev/null +++ b/docs/react.usethirdwebconfig.md @@ -0,0 +1,15 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useThirdwebConfig](./react.usethirdwebconfig.md) + +## useThirdwebConfig() function + +Signature: + +```typescript +export declare function useThirdwebConfig(): ThirdwebConfigContext; +``` +Returns: + +ThirdwebConfigContext + diff --git a/docs/react.usetoken.md b/docs/react.usetoken.md index 292f69e..2e1b7ef 100644 --- a/docs/react.usetoken.md +++ b/docs/react.usetoken.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `Token` contract. This contract supports ERC2 Signature: ```typescript -export declare function useToken(contractAddress?: string): Token | undefined; +export declare function useToken(contractAddress: RequiredParam, chain?: ChainIdOrName): Token | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Token contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Token contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usetokenbalance.md b/docs/react.usetokenbalance.md index 0dddd2c..dc9f0f6 100644 --- a/docs/react.usetokenbalance.md +++ b/docs/react.usetokenbalance.md @@ -12,13 +12,7 @@ Use this to get the balance of your Token contract for a given address. Signature: ```typescript -export declare function useTokenBalance(contract: RequiredParam, walletAddress: RequiredParam): import("react-query").UseQueryResult<{ - symbol: string; - value: import("ethers").BigNumber; - name: string; - decimals: number; - displayValue: string; -}, unknown>; +export declare function useTokenBalance(contract: RequiredParam, walletAddress: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -27,10 +21,11 @@ export declare function useTokenBalance(contract: RequiredParam, walletAd | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instance of a Token contract. | | walletAddress | [RequiredParam](./react.requiredparam.md)<[WalletAddress](./react.walletaddress.md)> | | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes the balance of the address diff --git a/docs/react.usetokensupply.md b/docs/react.usetokensupply.md index 996dedd..2e4b8aa 100644 --- a/docs/react.usetokensupply.md +++ b/docs/react.usetokensupply.md @@ -12,13 +12,7 @@ Use this to get a the total supply of your Token contract. Signature: ```typescript -export declare function useTokenSupply(contract: RequiredParam): import("react-query").UseQueryResult<{ - symbol: string; - value: import("ethers").BigNumber; - name: string; - decimals: number; - displayValue: string; -}, unknown>; +export declare function useTokenSupply(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -26,10 +20,11 @@ export declare function useTokenSupply(contract: RequiredParam): import(" | Parameter | Type | Description | | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instance of a Token contract. | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that incudes the total minted supply diff --git a/docs/react.usetotalcirculatingsupply.md b/docs/react.usetotalcirculatingsupply.md index bfd41be..b211356 100644 --- a/docs/react.usetotalcirculatingsupply.md +++ b/docs/react.usetotalcirculatingsupply.md @@ -9,6 +9,8 @@ Use this to get a the total (minted) supply of your [NFTContract](./react.nftcontract.md). +\* + Signature: ```typescript @@ -27,10 +29,19 @@ import("react-query").UseQueryResult<BigNumber, unknown> a response object that incudes the total minted supply -## Example +## Example 1 + + +```javascript +const nftDrop = useNFTDrop(); +const { data: totalSupply, isLoading, error } = useNFTSupply(nftDrop); +``` + +## Example 2 ```javascript -const { data: totalSupply, isLoading, error } = useNFTSupply(NFTContract); +const { contract } = useContract(); +const { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft); ``` diff --git a/docs/react.usetotalcount.md b/docs/react.usetotalcount.md index fe9d0e0..b71843d 100644 --- a/docs/react.usetotalcount.md +++ b/docs/react.usetotalcount.md @@ -12,7 +12,7 @@ Use this to get a the number of tokens in your [NFTContract](./react.nftcontract Signature: ```typescript -export declare function useTotalCount(contract: RequiredParam): import("react-query").UseQueryResult; +export declare function useTotalCount(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -20,10 +20,11 @@ export declare function useTotalCount(contract: RequiredParam): imp | Parameter | Type | Description | | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<[NFTContract](./react.nftcontract.md)> | an instance of a [NFTContract](./react.nftcontract.md) | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<BigNumber, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that incudes the total number of tokens in the contract @@ -31,10 +32,19 @@ a response object that incudes the total number of tokens in the contract The `total count` and `total supply` are the same for based contracts. For the `total count` is the number of NFTs that exist on the contract, \*\*not\*\* the sum of all supply of each token. (Since ERC1155 can have multiple owners per token.) -## Example +## Example 1 ```javascript -const { data: totalSupply, isLoading, error } = useTotalCount(NFTContract); +const nftDrop = useNFTDrop(); +const { data: totalCount, isLoading, error } = useTotalCount(nftDrop); +``` + +## Example 2 + + +```javascript +const { contract } = useContract(); +const { data: totalCount, isLoading, error } = useTotalCount(contract?.nft); ``` diff --git a/docs/react.useunclaimednfts.md b/docs/react.useunclaimednfts.md index 3e7b3d2..979fe56 100644 --- a/docs/react.useunclaimednfts.md +++ b/docs/react.useunclaimednfts.md @@ -12,16 +12,7 @@ Use this to get a list of \*unclaimed\* NFT tokens of your ERC721 Drop contract. Signature: ```typescript -export declare function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): import("react-query").UseQueryResult<{ - [x: string]: import("@thirdweb-dev/sdk/dist/browser").Json; - name?: string | undefined; - description?: string | null | undefined; - image?: string | null | undefined; - external_url?: string | null | undefined; - animation_url?: string | null | undefined; - uri: string; - id: import("ethers").BigNumber; -}[], unknown>; +export declare function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -30,10 +21,11 @@ export declare function useUnclaimedNFTs(contract: RequiredParam, query | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<NFTDrop> | an instance of a contract that extends the Erc721 spec (nft drop, custom contract that follows the Erc721 & drop spec) | | queryParams | QueryAllParams | (Optional) query params to pass to the query for the sake of pagination | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: import("ethers").BigNumber; }\[\], unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes an array of NFTs that are unclaimed diff --git a/docs/react.useunclaimednftsupply.md b/docs/react.useunclaimednftsupply.md index 949a851..19fa22b 100644 --- a/docs/react.useunclaimednftsupply.md +++ b/docs/react.useunclaimednftsupply.md @@ -7,7 +7,7 @@ Signature: ```typescript -export declare function useUnclaimedNFTSupply(contract: RequiredParam): import("react-query").UseQueryResult; +export declare function useUnclaimedNFTSupply(contract: RequiredParam, queryOptions?: ExposedQueryOptions): import("react-query").UseQueryResult; ``` ## Parameters @@ -15,10 +15,11 @@ export declare function useUnclaimedNFTSupply(contract: RequiredParam): | Parameter | Type | Description | | --- | --- | --- | | contract | [RequiredParam](./react.requiredparam.md)<NFTDrop> | an instance of a | +| queryOptions | [ExposedQueryOptions](./react.exposedqueryoptions.md) | (Optional) | Returns: -import("react-query").UseQueryResult<import("ethers").BigNumber, unknown> +import("react-query").UseQueryResult<any, unknown> a response object that includes the number of NFTs that are unclaimed diff --git a/docs/react.usevote.md b/docs/react.usevote.md index 1678b41..719a469 100644 --- a/docs/react.usevote.md +++ b/docs/react.usevote.md @@ -9,14 +9,15 @@ Hook for getting an instance of an `Vote` contract. This contract enables fully Signature: ```typescript -export declare function useVote(contractAddress?: string): Vote | undefined; +export declare function useVote(contractAddress: RequiredParam, chain?: ChainIdOrName): Vote | undefined; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | string | (Optional) the address of the Vote contract, found in your thirdweb dashboard | +| contractAddress | [RequiredParam](./react.requiredparam.md)<string> | the address of the Vote contract, found in your thirdweb dashboard | +| chain | ChainIdOrName | (Optional) | Returns: diff --git a/docs/react.usewalletconnect.md b/docs/react.usewalletconnect.md index a37a3e3..deafee3 100644 --- a/docs/react.usewalletconnect.md +++ b/docs/react.usewalletconnect.md @@ -4,40 +4,16 @@ ## useWalletConnect() function -Hook for connecting to a mobile wallet with Wallet Connect - -```javascript -import { useWalletConnect } from "@thirdweb-dev/react" -``` - Signature: ```typescript -export declare function useWalletConnect(): () => Promise<{ - data?: import("wagmi-core").ConnectorData | undefined; - error?: Error | undefined; -}>; +export declare function useWalletConnect(): { + error: Error | null; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; ``` Returns: -() => Promise<{ data?: import("wagmi-core").ConnectorData<any> \| undefined; error?: Error \| undefined; }> - -## Example - -We can allows user to connect their mobile wallets as follows: - -```javascript -import { useWalletConnect } from "@thirdweb-dev/react" - -const App = () => { - const connectWithWalletConnect = useWalletConnect() - - return ( - - ) -} -``` -When users click this button, a popup will appear on the screen prompting them to scan a QR code from their phone to connect their mobile wallets. Once they scan the QR code from a wallet connect supported mobile wallet, their wallet will then be connected to the page as expected. +{ error: Error \| null; isConnecting: boolean; connect: (chainId?: SUPPORTED\_CHAIN\_ID) => Promise<void>; } diff --git a/docs/snippets.json b/docs/snippets.json index 89e32de..b0d042d 100644 --- a/docs/snippets.json +++ b/docs/snippets.json @@ -8,32 +8,32 @@ "subhooks": [ { "name": "useMintNFT", - "example": "const Component = () => {\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintNFT(NFTContract);\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n mintNft({ name: \"My awesome NFT!\" })}\n >\n Mint!\n \n );\n};", + "example": "const Component = () => {\n const { contract } = useContract();\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 @@ -333,7 +393,7 @@ export function useNFTBalance(\n};", "reference": "https://portal.thirdweb.com/react/react.usemintnft" }, { "name": "useNFT", - "example": "const { data: nft, isLoading, error } = useNFT(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: nft, isLoading, error } = useNFT(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenft" }, { "name": "useNFTBalance", - "example": "const { data: ownerBalance, isLoading, error } = useNFTBalance(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenftbalance" }, { "name": "useNFTs", - "example": "const { data: nfts, isLoading, error } = useNFTs(NFTContract, { start: 0, count: 100 });", + "example": "const { contract } = useContract();\nconst { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });", "reference": "https://portal.thirdweb.com/react/react.usenfts" }, { "name": "useOwnedNFTs", - "example": "const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.useownednfts" }, { "name": "useTotalCirculatingSupply", - "example": "const { data: totalSupply, isLoading, error } = useNFTSupply(NFTContract);", + "example": "const { contract } = useContract();\nconst { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft);", "reference": "https://portal.thirdweb.com/react/react.usetotalcirculatingsupply" } ], @@ -73,32 +73,32 @@ }, { "name": "useMintNFT", - "example": "const Component = () => {\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintNFT(NFTContract);\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n mintNft({ name: \"My awesome NFT!\" })}\n >\n Mint!\n \n );\n};", + "example": "const Component = () => {\n const { contract } = useContract();\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 @@ -333,7 +393,7 @@ export function useNFTBalance(\n};", "reference": "https://portal.thirdweb.com/react/react.usemintnft" }, { "name": "useNFT", - "example": "const { data: nft, isLoading, error } = useNFT(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: nft, isLoading, error } = useNFT(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenft" }, { "name": "useNFTBalance", - "example": "const { data: ownerBalance, isLoading, error } = useNFTBalance(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenftbalance" }, { "name": "useNFTs", - "example": "const { data: nfts, isLoading, error } = useNFTs(NFTContract, { start: 0, count: 100 });", + "example": "const { contract } = useContract();\nconst { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });", "reference": "https://portal.thirdweb.com/react/react.usenfts" }, { "name": "useOwnedNFTs", - "example": "const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.useownednfts" }, { "name": "useTotalCirculatingSupply", - "example": "const { data: totalSupply, isLoading, error } = useNFTSupply(NFTContract);", + "example": "const { contract } = useContract();\nconst { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft);", "reference": "https://portal.thirdweb.com/react/react.usetotalcirculatingsupply" }, { @@ -183,32 +183,32 @@ "subhooks": [ { "name": "useMintNFT", - "example": "const Component = () => {\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintNFT(NFTContract);\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n mintNft({ name: \"My awesome NFT!\" })}\n >\n Mint!\n \n );\n};", + "example": "const Component = () => {\n const { contract } = useContract();\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 @@ -333,7 +393,7 @@ export function useNFTBalance(\n};", "reference": "https://portal.thirdweb.com/react/react.usemintnft" }, { "name": "useNFT", - "example": "const { data: nft, isLoading, error } = useNFT(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: nft, isLoading, error } = useNFT(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenft" }, { "name": "useNFTBalance", - "example": "const { data: ownerBalance, isLoading, error } = useNFTBalance(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenftbalance" }, { "name": "useNFTs", - "example": "const { data: nfts, isLoading, error } = useNFTs(NFTContract, { start: 0, count: 100 });", + "example": "const { contract } = useContract();\nconst { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });", "reference": "https://portal.thirdweb.com/react/react.usenfts" }, { "name": "useOwnedNFTs", - "example": "const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.useownednfts" }, { "name": "useTotalCirculatingSupply", - "example": "const { data: totalSupply, isLoading, error } = useNFTSupply(NFTContract);", + "example": "const { contract } = useContract();\nconst { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft);", "reference": "https://portal.thirdweb.com/react/react.usetotalcirculatingsupply" } ], @@ -248,32 +248,32 @@ }, { "name": "useMintNFT", - "example": "const Component = () => {\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintNFT(NFTContract);\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n mintNft({ name: \"My awesome NFT!\" })}\n >\n Mint!\n \n );\n};", + "example": "const Component = () => {\n const { contract } = useContract();\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 @@ -333,7 +393,7 @@ export function useNFTBalance(\n};", "reference": "https://portal.thirdweb.com/react/react.usemintnft" }, { "name": "useNFT", - "example": "const { data: nft, isLoading, error } = useNFT(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: nft, isLoading, error } = useNFT(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenft" }, { "name": "useNFTBalance", - "example": "const { data: ownerBalance, isLoading, error } = useNFTBalance(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.usenftbalance" }, { "name": "useNFTs", - "example": "const { data: nfts, isLoading, error } = useNFTs(NFTContract, { start: 0, count: 100 });", + "example": "const { contract } = useContract();\nconst { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });", "reference": "https://portal.thirdweb.com/react/react.usenfts" }, { "name": "useOwnedNFTs", - "example": "const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(NFTContract, );", + "example": "const { contract } = useContract();\nconst { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, );", "reference": "https://portal.thirdweb.com/react/react.useownednfts" }, { "name": "useTotalCirculatingSupply", - "example": "const { data: totalSupply, isLoading, error } = useNFTSupply(NFTContract);", + "example": "const { contract } = useContract();\nconst { data: totalSupply, isLoading, error } = useNFTSupply(contract?.nft);", "reference": "https://portal.thirdweb.com/react/react.usetotalcirculatingsupply" }, { diff --git a/etc/react.api.md b/etc/react.api.md index 14e6c96..19e2480 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -4,54 +4,42 @@ ```ts -import { AbiFunction } from '@thirdweb-dev/sdk/dist/src/schema/contracts/custom'; import type { Amount } from '@thirdweb-dev/sdk/dist/browser'; import { AuctionListing } from '@thirdweb-dev/sdk/dist/browser'; import { BigNumber } from 'ethers'; import { BigNumberish } from 'ethers'; import { CallOverrides } from 'ethers'; -import { Chain } from './types'; -import { ChainId } from '@thirdweb-dev/sdk/dist/browser'; -import { ChainOrRpc } from '@thirdweb-dev/sdk/dist/browser'; +import { Chain } from '@wagmi/core'; +import { ChainIdOrName } from '@thirdweb-dev/sdk/dist/browser'; import { ClaimEligibility } from '@thirdweb-dev/sdk/dist/browser'; -import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; -import { Connector } from './connectors'; -import { ConnectorData } from './connectors'; -import type { ContractEvent } from '@thirdweb-dev/sdk/dist/browser'; -import { ContractForContractType } from '@thirdweb-dev/sdk/dist/browser'; +import { ContractEvent } from '@thirdweb-dev/sdk/dist/browser'; import { ContractType } from '@thirdweb-dev/sdk/dist/browser'; -import { defaultChains } from './constants'; -import { defaultL2Chains } from './constants'; +import { createClient } from 'wagmi'; import { DirectListing } from '@thirdweb-dev/sdk/dist/browser'; -import { Edition } from '@thirdweb-dev/sdk/dist/browser'; +import type { Edition } from '@thirdweb-dev/sdk/dist/browser'; import { EditionDrop } from '@thirdweb-dev/sdk/dist/browser'; import { Erc1155 } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc1155Mintable } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc20 } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc721 } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc721Mintable } from '@thirdweb-dev/sdk/dist/browser'; -import type { EventQueryFilter } from '@thirdweb-dev/sdk/dist/browser'; +import { EventQueryFilter } from '@thirdweb-dev/sdk/dist/browser'; import { FetchStatus } from 'react-query'; -import { InjectedConnector } from 'wagmi/connectors/injected'; -import { IpfsStorage } from '@thirdweb-dev/sdk/dist/browser'; import { IStorage } from '@thirdweb-dev/sdk/dist/browser'; import { Json } from '@thirdweb-dev/sdk/dist/browser'; import { ListingType } from '@thirdweb-dev/sdk/dist/browser'; -import { LoginWithMagicLinkConfiguration } from 'magic-sdk'; -import type { MagicSDKAdditionalConfiguration } from 'magic-sdk'; import { Marketplace } from '@thirdweb-dev/sdk/dist/browser'; -import type { MarketplaceFilter } from '@thirdweb-dev/sdk/dist/browser'; -import { Multiwrap } from '@thirdweb-dev/sdk/dist/browser'; -import type { NewAuctionListing } from '@thirdweb-dev/sdk/dist/browser'; -import type { NewDirectListing } from '@thirdweb-dev/sdk/dist/browser'; -import { NFTCollection } from '@thirdweb-dev/sdk/dist/browser'; +import { MarketplaceFilter } from '@thirdweb-dev/sdk/dist/browser'; +import type { Multiwrap } from '@thirdweb-dev/sdk/dist/browser'; +import { NewAuctionListing } from '@thirdweb-dev/sdk/dist/browser'; +import { NewDirectListing } from '@thirdweb-dev/sdk/dist/browser'; +import type { NFTCollection } from '@thirdweb-dev/sdk/dist/browser'; import { NFTDrop } from '@thirdweb-dev/sdk/dist/browser'; -import { NFTMetadata } from '@thirdweb-dev/sdk/dist/browser'; +import type { NFTMetadata } from '@thirdweb-dev/sdk/dist/browser'; import type { NFTMetadataOrUri } from '@thirdweb-dev/sdk/dist/src/schema'; import { Offer } from '@thirdweb-dev/sdk/dist/browser'; import { Pack } from '@thirdweb-dev/sdk/dist/browser'; import type { Price } from '@thirdweb-dev/sdk/dist/browser'; -import type { PublishedMetadata } from '@thirdweb-dev/sdk/dist/src/schema/contracts/custom'; import { QueryAllParams } from '@thirdweb-dev/sdk/dist/browser'; import { QueryClient } from 'react-query'; import { QueryObserverResult } from 'react-query'; @@ -60,24 +48,22 @@ import { RefetchOptions } from 'react-query'; import { RefetchQueryFilters } from 'react-query'; import type { Role } from '@thirdweb-dev/sdk/dist/browser'; import { SDKOptions } from '@thirdweb-dev/sdk/dist/browser'; -import { SignatureDrop } from '@thirdweb-dev/sdk/dist/browser'; +import type { SignatureDrop } from '@thirdweb-dev/sdk/dist/browser'; import { Signer } from 'ethers'; -import { SignerOrProvider } from '@thirdweb-dev/sdk/dist/browser'; import { SmartContract } from '@thirdweb-dev/sdk/dist/browser'; import { Split } from '@thirdweb-dev/sdk/dist/browser'; import { SUPPORTED_CHAIN_ID } from '@thirdweb-dev/sdk/dist/browser'; import { ThirdwebSDK } from '@thirdweb-dev/sdk/dist/browser'; -import { Token } from '@thirdweb-dev/sdk/dist/browser'; +import type { Token } from '@thirdweb-dev/sdk/dist/browser'; import { TokenDrop } from '@thirdweb-dev/sdk/dist/browser'; import { TransactionReceipt } from '@ethersproject/abstract-provider'; import { TransactionResultWithId } from '@thirdweb-dev/sdk/dist/browser'; -import { useAccount } from './hooks'; +import { UpdateableNetwork } from '@thirdweb-dev/sdk/dist/src/core/interfaces/contract'; import { UseMutationResult } from 'react-query'; -import { useProvider } from './hooks'; +import type { UseQueryOptions } from 'react-query'; import { UseQueryResult } from 'react-query'; import type { ValidContractInstance } from '@thirdweb-dev/sdk/dist/browser'; -import { Vote } from '@thirdweb-dev/sdk/dist/browser'; -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'; +import type { Vote } from '@thirdweb-dev/sdk/dist/browser'; // @public (undocumented) export type BuyNowParams = TListingType extends ListingType.Direct ? { @@ -90,15 +76,6 @@ export type BuyNowParams = TListingType extends List type: ListingType.Auction; }; -export { ChainId } - -// Warning: (ae-forgotten-export) The symbol "SupportedChain" needs to be exported by the entry point index.d.ts -// Warning: (ae-forgotten-export) The symbol "Chain" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "ChainRpc" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type ChainRpc = Record; - // @beta export type ClaimIneligibilityParameters = { walletAddress?: WalletAddress; @@ -135,47 +112,11 @@ export type ContractAddress = string; // @internal (undocumented) export type ContractWithRoles = Exclude | SmartContract; -// @public -export interface DAppMetaData { - description?: string; - isDarkMode?: boolean; - logoUrl?: string; - name: string; - url?: string; -} - -export { defaultChains } - -export { defaultL2Chains } - // @beta export type DropContract = NFTDrop | EditionDrop; -// Warning: (ae-internal-missing-underscore) The name "GnosisConnectorType" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type GnosisConnectorType = "gnosis" | { - name: "gnosis"; - options: GnosisConnectorArguments; -}; - -// Warning: (ae-internal-missing-underscore) The name "InjectedConnectorType" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type InjectedConnectorType = "injected" | "metamask" | { - name: "injected" | "metamask"; - options?: InjectedConnector["options"]; -}; - -export { IpfsStorage } - -// Warning: (ae-internal-missing-underscore) The name "MagicConnectorType" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type MagicConnectorType = "magic" | { - name: "magic"; - options: Omit; -}; +// @beta +export type ExposedQueryOptions = Pick, "refetchInterval">; // @public (undocumented) export type MakeBidParams = { @@ -183,26 +124,6 @@ export type MakeBidParams = { bid: Price; }; -// @public -export const MediaRenderer: React_2.ForwardRefExoticComponent>; - -// @public -export interface MediaRendererProps extends SharedMediaProps { - alt?: string; - poster?: string | null; - src?: string | null; -} - -// @public (undocumented) -export interface MediaType { - // (undocumented) - mimeType?: string; - // (undocumented) - url?: string; -} - // @beta export type MintNFTParams = TContract extends Erc1155 ? { metadata: NFTMetadataOrUri; @@ -236,56 +157,36 @@ export type RequiredParam = T | undefined; // @internal (undocumented) export type RolesForContract = TContract extends SmartContract ? Role | (string & {}) : NonNullable["roles"][number]; +// Warning: (ae-forgotten-export) The symbol "ThirdweProviderProps" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// +// @public (undocumented) +export const ThirdwebProvider: React_2.FC>; + +// @public (undocumented) +export const ThirdwebSDKProvider: React_2.FC>; + // @public (undocumented) -export interface SharedMediaProps { +export interface ThirdwebSDKProviderProps { + // Warning: (ae-forgotten-export) The symbol "AppMetadata" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts + // // (undocumented) - className?: string; - controls?: HTMLVideoElement["controls"]; + readonly appMetadata?: AppMetadata; + // Warning: (ae-incompatible-release-tags) The symbol "chainId" is marked as @public, but its signature references "RequiredParam" which is marked as @beta + // // (undocumented) - height?: HTMLIFrameElement["height"]; - requireInteraction?: boolean; + readonly chainId: RequiredParam; + // Warning: (ae-forgotten-export) The symbol "ChainIDToRpcUrlMap" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts + // // (undocumented) - style?: React_2.CSSProperties; + readonly chainIdToRPCUrlMap?: Partial; + // (undocumented) + readonly options?: SDKOptions; // (undocumented) - width?: HTMLIFrameElement["width"]; -} - -// @public -export const ThirdwebNftMedia: React_2.ForwardRefExoticComponent>; - -// @public -export interface ThirdwebNftMediaProps extends SharedMediaProps { - metadata: NFTMetadata; -} - -// @public -export const ThirdwebProvider: ({ sdkOptions, chainRpc, supportedChains, walletConnectors, dAppMeta, desiredChainId, storageInterface, queryClient, autoConnect, children, }: React_2.PropsWithChildren>) => JSX.Element; - -// @public -export interface ThirdwebProviderProps { - autoConnect?: boolean; - // Warning: (ae-incompatible-release-tags) The symbol "chainRpc" is marked as @public, but its signature references "ChainRpc" which is marked as @internal - chainRpc?: Partial>; - dAppMeta?: DAppMetaData; - desiredChainId: TSupportedChain extends Chain_2 ? TSupportedChain["id"] : TSupportedChain | undefined; - // @beta queryClient?: QueryClient; - sdkOptions?: SDKOptions; - storageInterface?: IStorage; - supportedChains?: TSupportedChain[]; - // Warning: (ae-incompatible-release-tags) The symbol "walletConnectors" is marked as @public, but its signature references "WalletConnector" which is marked as @internal - walletConnectors?: WalletConnector[]; -} - -// @beta -export const ThirdwebSDKProvider: React_2.FC>; - -// @public (undocumented) -export interface ThirdwebSDKProviderProps extends Pick { // (undocumented) - provider: ChainOrRpc | SignerOrProvider; + readonly signer?: Signer; // (undocumented) - signer?: Signer; + readonly storageInterface?: IStorage; } // @beta @@ -294,14 +195,7 @@ export type TokenMintParams = { amount: string | number; }; -export { useAccount } - -// Warning: (ae-internal-missing-underscore) The name "useActiveChainId" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function useActiveChainId(): SUPPORTED_CHAIN_ID | undefined; - -// Warning: (ae-forgotten-export) The symbol "ActiveClaimConditionParams" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "ActiveClaimConditionParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // // @beta export function useActiveClaimCondition(...[contract, tokenId]: ActiveClaimConditionParams): UseQueryResult< { @@ -309,11 +203,11 @@ snapshot?: { address: string; maxClaimable: string; }[] | undefined; -quantityLimitPerTransaction: string; startTime: Date; -price: BigNumber; currencyAddress: string; +price: BigNumber; maxQuantity: string; +quantityLimitPerTransaction: string; waitInSeconds: BigNumber; merkleRootHash: string | number[]; availableSupply: string; @@ -343,27 +237,18 @@ export function useAllContractEvents(contract: RequiredParam(contract: RequiredParam): UseQueryResult, string[]>>, unknown>; +export function useAllRoleMembers(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult, string[]>>, unknown>; // @beta export function useAuctionWinner(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; -// @beta -export function useBalance(tokenAddress?: ContractAddress): UseQueryResult< { -symbol: string; -value: BigNumber; -name: string; -decimals: number; -displayValue: string; -} | undefined, unknown>; - // @beta export function useBidBuffer(contract: RequiredParam): UseQueryResult; // Warning: (ae-internal-missing-underscore) The name "useBuiltinContract" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export function useBuiltinContract(contractType?: TContractType, contractAddress?: string): ContractForContractType | undefined; +export function useBuiltinContract(contractType: RequiredParam, contractAddress: RequiredParam, chain?: ChainIdOrName): UseQueryResult; // @beta export function useBuyNow(contract: RequiredParam): UseMutationResult; // @beta -export function useClaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult[], unknown>; +export function useClaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams, queryOptions?: ExposedQueryOptions): UseQueryResult[], unknown>; // Warning: (ae-incompatible-release-tags) The symbol "useClaimedNFTSupply" is marked as @public, but its signature references "RequiredParam" which is marked as @beta // Warning: (ae-incompatible-release-tags) The symbol "useClaimedNFTSupply" is marked as @public, but its signature references "DropContract" which is marked as @beta +// Warning: (ae-incompatible-release-tags) The symbol "useClaimedNFTSupply" is marked as @public, but its signature references "ExposedQueryOptions" which is marked as @beta // // @public (undocumented) -export function useClaimedNFTSupply(contract: RequiredParam): UseQueryResult; +export function useClaimedNFTSupply(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; -// Warning: (ae-forgotten-export) The symbol "ClaimIneligibilityInputParams" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "ClaimIneligibilityInputParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // // @beta export function useClaimIneligibilityReasons(...[contract, params, tokenId]: ClaimIneligibilityInputParams): UseQueryResult; @@ -429,31 +315,16 @@ receipt: TransactionReceipt; data: () => Promise; }, "data">, unknown, ClaimTokenParams, unknown>; -// @public -export function useCoinbaseWallet(): () => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; - -// Warning: (ae-internal-missing-underscore) The name "useConnect" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export function useConnect(): readonly [{ - readonly data: { - readonly connected: boolean; - readonly connector: Connector | undefined; - readonly connectors: Connector[]; - }; - readonly error: Error | undefined; - readonly loading: boolean | undefined; -}, (connector: Connector) => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>]; +// @public (undocumented) +export function useCoinbaseWallet(): { + error: Error | null; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; // @beta -export function useContract(contractAddress: RequiredParam): { - contract: null; +export function useContract(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): { + contract: SmartContract | undefined; data: undefined; error: unknown; isError: true; @@ -474,17 +345,11 @@ export function useContract(contractAddress: RequiredParam): { isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; } | { - contract: null; + contract: SmartContract | undefined; data: undefined; error: null; isError: false; @@ -505,24 +370,12 @@ export function useContract(contractAddress: RequiredParam): { isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; } | { - contract: SmartContract | null; - data: { - contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; - publishMetadata: null; - } | { - contractType: "custom"; - publishMetadata: PublishedMetadata | undefined; - } | undefined; + contract: SmartContract | undefined; + data: any; error: unknown; isError: true; isLoading: false; @@ -542,24 +395,12 @@ export function useContract(contractAddress: RequiredParam): { isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; } | { - contract: SmartContract | null; - data: { - contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; - publishMetadata: null; - } | { - contractType: "custom"; - publishMetadata: PublishedMetadata | undefined; - } | undefined; + contract: SmartContract | undefined; + data: any; error: null; isError: false; isLoading: false; @@ -579,13 +420,7 @@ export function useContract(contractAddress: RequiredParam): { isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; }; @@ -593,8 +428,134 @@ export function useContract(contractAddress: RequiredParam): { // Warning: (ae-internal-missing-underscore) The name "useContractAbi" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export function useContractAbi(contractAddress: RequiredParam): { - abi: null; +export function useContractAbi(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): { + abi: undefined; + data: undefined; + error: unknown; + isError: true; + isLoading: false; + isLoadingError: true; + isRefetchError: false; + isSuccess: false; + status: "error"; + dataUpdatedAt: number; + errorUpdatedAt: number; + failureCount: number; + errorUpdateCount: number; + isFetched: boolean; + isFetchedAfterMount: boolean; + isFetching: boolean; + isPaused: boolean; + isPlaceholderData: boolean; + isPreviousData: boolean; + isRefetching: boolean; + isStale: boolean; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + remove: () => void; + fetchStatus: FetchStatus; +} | { + abi: undefined; + data: undefined; + error: null; + isError: false; + isLoading: true; + isLoadingError: false; + isRefetchError: false; + isSuccess: false; + status: "loading"; + dataUpdatedAt: number; + errorUpdatedAt: number; + failureCount: number; + errorUpdateCount: number; + isFetched: boolean; + isFetchedAfterMount: boolean; + isFetching: boolean; + isPaused: boolean; + isPlaceholderData: boolean; + isPreviousData: boolean; + isRefetching: boolean; + isStale: boolean; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + remove: () => void; + fetchStatus: FetchStatus; +} | { + abi: undefined; + data: any; + error: unknown; + isError: true; + isLoading: false; + isLoadingError: false; + isRefetchError: true; + isSuccess: false; + status: "error"; + dataUpdatedAt: number; + errorUpdatedAt: number; + failureCount: number; + errorUpdateCount: number; + isFetched: boolean; + isFetchedAfterMount: boolean; + isFetching: boolean; + isPaused: boolean; + isPlaceholderData: boolean; + isPreviousData: boolean; + isRefetching: boolean; + isStale: boolean; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + remove: () => void; + fetchStatus: FetchStatus; +} | { + abi: undefined; + data: any; + error: null; + isError: false; + isLoading: false; + isLoadingError: false; + isRefetchError: false; + isSuccess: true; + status: "success"; + dataUpdatedAt: number; + errorUpdatedAt: number; + failureCount: number; + errorUpdateCount: number; + isFetched: boolean; + isFetchedAfterMount: boolean; + isFetching: boolean; + isPaused: boolean; + isPlaceholderData: boolean; + isPreviousData: boolean; + isRefetching: boolean; + isStale: boolean; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + remove: () => void; + fetchStatus: FetchStatus; +} | { + abi: { + [x: string]: any; + type: string; + name: string; + outputs: { + [x: string]: any; + stateMutability?: string | undefined; + components?: { + [x: string]: any; + type: string; + name: string; + }[] | undefined; + type: string; + name: string; + }[]; + inputs: { + [x: string]: any; + stateMutability?: string | undefined; + components?: { + [x: string]: any; + type: string; + name: string; + }[] | undefined; + type: string; + name: string; + }[]; + }[] | null; data: undefined; error: unknown; isError: true; @@ -615,17 +576,37 @@ export function useContractAbi(contractAddress: RequiredParam): isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; } | { - abi: null; + abi: { + [x: string]: any; + type: string; + name: string; + outputs: { + [x: string]: any; + stateMutability?: string | undefined; + components?: { + [x: string]: any; + type: string; + name: string; + }[] | undefined; + type: string; + name: string; + }[]; + inputs: { + [x: string]: any; + stateMutability?: string | undefined; + components?: { + [x: string]: any; + type: string; + name: string; + }[] | undefined; + type: string; + name: string; + }[]; + }[] | null; data: undefined; error: null; isError: false; @@ -646,13 +627,7 @@ export function useContractAbi(contractAddress: RequiredParam): isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; } | { @@ -683,13 +658,7 @@ export function useContractAbi(contractAddress: RequiredParam): name: string; }[]; }[] | null; - data: { - contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; - publishMetadata: null; - } | { - contractType: "custom"; - publishMetadata: PublishedMetadata | undefined; - } | undefined; + data: any; error: unknown; isError: true; isLoading: false; @@ -709,13 +678,7 @@ export function useContractAbi(contractAddress: RequiredParam): isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; } | { @@ -746,13 +709,7 @@ export function useContractAbi(contractAddress: RequiredParam): name: string; }[]; }[] | null; - data: { - contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; - publishMetadata: null; - } | { - contractType: "custom"; - publishMetadata: PublishedMetadata | undefined; - } | undefined; + data: any; error: null; isError: false; isLoading: false; @@ -772,13 +729,7 @@ export function useContractAbi(contractAddress: RequiredParam): isPreviousData: boolean; isRefetching: boolean; isStale: boolean; - refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + refetch: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; remove: () => void; fetchStatus: FetchStatus; }; @@ -787,7 +738,7 @@ export function useContractAbi(contractAddress: RequiredParam): export function useContractCall(contract: RequiredParam["contract"]>, functionName: RequiredParam): UseMutationResult; // @beta -export function useContractData(contract: RequiredParam["contract"]>, functionName: RequiredParam, ...args: unknown[] | [...unknown[], CallOverrides]): UseQueryResult; +export function useContractData(contract: RequiredParam["contract"]>, functionName: RequiredParam, functionArguments: unknown[] | [...unknown[], CallOverrides], queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta export function useContractEvents(contract: RequiredParam["contract"]>, eventName: string, options?: { @@ -798,22 +749,16 @@ export function useContractEvents(contract: RequiredParam): UseQueryResult; +export function useContractFunctions(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta -export function useContractMetadata(contractAddress: RequiredParam): UseQueryResult< { -[x: string]: Json; -description?: string | undefined; -image?: any; -external_link?: string | undefined; -name: string; -}, unknown>; +export function useContractMetadata(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta -export function useContractPublishMetadata(contractAddress: RequiredParam): UseQueryResult; +export function useContractPublishMetadata(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta -export function useContractType(contractAddress: RequiredParam): UseQueryResult<"split" | "custom" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined, unknown>; +export function useContractType(contractAddress: RequiredParam, chain?: ChainIdOrName, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta export function useCreateAuctionListing(contract: RequiredParam): UseMutationResult, unknown, NewAuctionListing, unknown>; @@ -821,30 +766,15 @@ export function useCreateAuctionListing(contract: RequiredParam): U // @beta export function useCreateDirectListing(contract: RequiredParam): UseMutationResult, unknown, NewDirectListing, unknown>; -// Warning: (ae-internal-missing-underscore) The name "useDesiredChainId" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-incompatible-release-tags) The symbol "useEdition" is marked as @public, but its signature references "RequiredParam" which is marked as @beta // -// @internal (undocumented) -export function useDesiredChainId(): number; - -// @public -export function useDisconnect(options?: { - reconnectAfterGnosis?: boolean; -}): () => Promise | undefined; - error?: Error | undefined; -}>; - // @public -export function useEdition(contractAddress?: string): Edition | undefined; +export function useEdition(contractAddress: RequiredParam, chain?: ChainIdOrName): Edition | undefined; +// Warning: (ae-incompatible-release-tags) The symbol "useEditionDrop" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useEditionDrop(contractAddress?: string): EditionDrop | undefined; - -// @public -export function useGnosis(): (config: GnosisConnectorArguments) => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; +export function useEditionDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): EditionDrop | undefined; // Warning: (ae-incompatible-release-tags) The symbol "useGrantRole" is marked as @beta, but its signature references "ContractWithRoles" which is marked as @internal // @@ -858,7 +788,7 @@ address: WalletAddress; // Warning: (ae-incompatible-release-tags) The symbol "useIsAddressRole" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal // // @beta -export function useIsAddressRole(contract: RequiredParam, role: RolesForContract, walletAddress: RequiredParam): boolean; +export function useIsAddressRole(contract: RequiredParam, role: RolesForContract, walletAddress: RequiredParam, queryOptions?: ExposedQueryOptions): boolean; // @beta export function useListing(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; @@ -866,37 +796,26 @@ export function useListing(contract: RequiredParam, listingId: Requ // @beta export function useListings(contract: RequiredParam, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>; -// @public -export function useMagic(): (configuration: LoginWithMagicLinkConfiguration) => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; - // @beta export function useMakeBid(contract: RequiredParam): UseMutationResult Promise; }, "data">, unknown, MakeBidParams, unknown>; +// Warning: (ae-incompatible-release-tags) The symbol "useMarketplace" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useMarketplace(contractAddress?: string): Marketplace | undefined; +export function useMarketplace(contractAddress: RequiredParam, chain?: ChainIdOrName): Marketplace | undefined; // @beta -export function useMetadata(contract: RequiredParam): UseQueryResult< { -[x: string]: Json; -description?: string | undefined; -image?: any; -external_link?: string | undefined; -name: string; -}, unknown>; +export function useMetadata(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; -// @public -export function useMetamask(): () => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -} | { - error: Error; -}>; +// @public (undocumented) +export function useMetamask(): { + error: Error | null; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; // @beta export function useMintNFT(contract: RequiredParam): UseMutationResult, unknown, MintNFTParams, unknown>; @@ -907,45 +826,16 @@ receipt: TransactionReceipt; data: () => Promise; }, "data">, unknown, TokenMintParams, unknown>; +// Warning: (ae-incompatible-release-tags) The symbol "useMultiwrap" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useMultiwrap(contractAddress?: string): Multiwrap | undefined; - -// @public -export function useNetwork(): readonly [{ - readonly data: { - readonly chain: { - id: number; - unsupported: boolean | undefined; - name?: string | undefined; - nativeCurrency?: { - name: string; - symbol: string; - decimals: 18; - } | undefined; - rpcUrls?: string[] | undefined; - blockExplorers?: { - name: string; - url: string; - }[] | undefined; - testnet?: boolean | undefined; - } | undefined; - readonly chains: Chain[]; - }; - readonly error: Error | undefined; - readonly loading: boolean | undefined; -}, ((chainId: number) => Promise<{ - data: undefined; - error: SwitchChainError; -} | { - data: Chain | undefined; - error: undefined; -}>) | undefined]; +export function useMultiwrap(contractAddress: RequiredParam, chain?: ChainIdOrName): Multiwrap | undefined; // @public -export function useNetworkMismatch(): boolean; +export function useNetworkMismatch(contract?: UpdateableNetwork): boolean; // @beta -export function useNFT(contract: RequiredParam, tokenId: RequiredParam): UseQueryResult, unknown>; +export function useNFT(contract: RequiredParam, tokenId: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult, unknown>; // @beta export function useNFTBalance(...[contract, ownerWalletAddress, tokenId]: useNFTBalanceParams): UseQueryResult; @@ -960,42 +850,32 @@ contract: RequiredParam, ownerWalletAddress: RequiredParam ]; +// Warning: (ae-incompatible-release-tags) The symbol "useNFTCollection" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useNFTCollection(contractAddress?: string): NFTCollection | undefined; +export function useNFTCollection(contractAddress: RequiredParam, chain?: ChainIdOrName): NFTCollection | undefined; +// Warning: (ae-incompatible-release-tags) The symbol "useNFTDrop" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useNFTDrop(contractAddress?: string): NFTDrop | undefined; +export function useNFTDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): NFTDrop | undefined; // @beta -export function useNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult[], unknown>; +export function useNFTs(contract: RequiredParam, queryParams?: QueryAllParams, queryOptions?: ExposedQueryOptions): UseQueryResult[], unknown>; // @beta -export function useOwnedNFTs(contract: RequiredParam, ownerWalletAddress: RequiredParam): UseQueryResult[], unknown>; +export function useOwnedNFTs(contract: RequiredParam, ownerWalletAddress: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult[], unknown>; +// Warning: (ae-incompatible-release-tags) The symbol "usePack" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function usePack(contractAddress?: string): Pack | undefined; +export function usePack(contractAddress: RequiredParam, chain?: ChainIdOrName): Pack | undefined; // @beta -export function usePlatformFees(contract: RequiredParam): UseQueryResult< { -platform_fee_basis_points: number; -platform_fee_recipient: string; -}, unknown>; +export function usePlatformFees(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta (undocumented) -export function usePrimarySaleRecipient(contract: RequiredParam): UseQueryResult; - -export { useProvider } - -// Warning: (ae-internal-missing-underscore) The name "useReadonlySDK" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function useReadonlySDK(readonlyRpcUrl: string, sdkOptions: SDKOptions, storageInterface?: IStorage): ThirdwebSDK; - -// @public (undocumented) -export function useResolvedMediaType(uri?: string): { - url: string | undefined; - mimeType: string | undefined; -}; +export function usePrimarySaleRecipient(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; // Warning: (ae-incompatible-release-tags) The symbol "useRevokeRole" is marked as @beta, but its signature references "ContractWithRoles" which is marked as @internal // @@ -1009,17 +889,12 @@ address: WalletAddress; // Warning: (ae-incompatible-release-tags) The symbol "useRoleMembers" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal // // @beta -export function useRoleMembers(contract: RequiredParam, role: RolesForContract): UseQueryResult; +export function useRoleMembers(contract: RequiredParam, role: RolesForContract, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta -export function useRoyaltySettings(contract: RequiredParam): UseQueryResult< { -seller_fee_basis_points: number; -fee_recipient: string; -}, unknown>; +export function useRoyaltySettings(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; -// Warning: (ae-internal-missing-underscore) The name "useSDK" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) +// @public export function useSDK(): ThirdwebSDK | undefined; // Warning: (ae-incompatible-release-tags) The symbol "useSetAllRoleMembers" is marked as @beta, but its signature references "ContractWithRoles" which is marked as @internal @@ -1028,42 +903,36 @@ export function useSDK(): ThirdwebSDK | undefined; // @beta export function useSetAllRoleMembers(contract: RequiredParam): UseMutationResult]: string[]; }, unknown>; +// Warning: (ae-incompatible-release-tags) The symbol "useSignatureDrop" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useSignatureDrop(contractAddress?: string): SignatureDrop | undefined; +export function useSignatureDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): SignatureDrop | undefined; -// Warning: (ae-internal-missing-underscore) The name "useSigner" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-incompatible-release-tags) The symbol "useSplit" is marked as @public, but its signature references "RequiredParam" which is marked as @beta // -// @internal (undocumented) -export function useSigner(): Signer | undefined; - // @public -export function useSplit(contractAddress?: string): Split | undefined; +export function useSplit(contractAddress: RequiredParam, chain?: ChainIdOrName): Split | undefined; + +// Warning: (ae-forgotten-export) The symbol "ThirdwebConfigContext" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// +// @public (undocumented) +export function useThirdwebConfig(): ThirdwebConfigContext; +// Warning: (ae-incompatible-release-tags) The symbol "useToken" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useToken(contractAddress?: string): Token | undefined; +export function useToken(contractAddress: RequiredParam, chain?: ChainIdOrName): Token | undefined; // @beta -export function useTokenBalance(contract: RequiredParam, walletAddress: RequiredParam): UseQueryResult< { -symbol: string; -value: BigNumber; -name: string; -decimals: number; -displayValue: string; -}, unknown>; +export function useTokenBalance(contract: RequiredParam, walletAddress: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; // Warning: (ae-internal-missing-underscore) The name "useTokenDrop" should be prefixed with an underscore because the declaration is marked as @internal // // @internal -export function useTokenDrop(contractAddress?: string): TokenDrop | undefined; +export function useTokenDrop(contractAddress: RequiredParam, chain?: ChainIdOrName): TokenDrop | undefined; // @beta -export function useTokenSupply(contract: RequiredParam): UseQueryResult< { -symbol: string; -value: BigNumber; -name: string; -decimals: number; -displayValue: string; -}, unknown>; +export function useTokenSupply(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta export function useTotalCirculatingSupply(...[contract, tokenId]: useTotalCirculatingSupplyParams): UseQueryResult; @@ -1072,24 +941,16 @@ export function useTotalCirculatingSupply(...[con export type useTotalCirculatingSupplyParams = TContract extends Erc1155 ? [contract: RequiredParam, tokenId: BigNumberish] : [contract: RequiredParam]; // @beta -export function useTotalCount(contract: RequiredParam): UseQueryResult; +export function useTotalCount(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta -export function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult< { -[x: string]: Json; -name?: string | undefined; -description?: string | null | undefined; -image?: string | null | undefined; -external_url?: string | null | undefined; -animation_url?: string | null | undefined; -uri: string; -id: BigNumber; -}[], unknown>; +export function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams, queryOptions?: ExposedQueryOptions): UseQueryResult; // Warning: (ae-incompatible-release-tags) The symbol "useUnclaimedNFTSupply" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// Warning: (ae-incompatible-release-tags) The symbol "useUnclaimedNFTSupply" is marked as @public, but its signature references "ExposedQueryOptions" which is marked as @beta // // @public (undocumented) -export function useUnclaimedNFTSupply(contract: RequiredParam): UseQueryResult; +export function useUnclaimedNFTSupply(contract: RequiredParam, queryOptions?: ExposedQueryOptions): UseQueryResult; // @beta export function useUpdateMetadata(contract: RequiredParam): UseMutationResult< { @@ -1130,22 +991,17 @@ seller_fee_basis_points?: number | undefined; fee_recipient?: string | undefined; }, unknown>; +// Warning: (ae-incompatible-release-tags) The symbol "useVote" is marked as @public, but its signature references "RequiredParam" which is marked as @beta +// // @public -export function useVote(contractAddress?: string): Vote | undefined; +export function useVote(contractAddress: RequiredParam, chain?: ChainIdOrName): Vote | undefined; -// @public -export function useWalletConnect(): () => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; - -// Warning: (ae-internal-missing-underscore) The name "useWalletLink" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export function useWalletLink(): () => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; +// @public (undocumented) +export function useWalletConnect(): { + error: Error | null; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; // @beta export function useWinningBid(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; @@ -1153,36 +1009,12 @@ export function useWinningBid(contract: RequiredParam, listingId: R // @beta export type WalletAddress = string; -// Warning: (ae-internal-missing-underscore) The name "WalletConnectConnectorType" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type WalletConnectConnectorType = "walletConnect" | { - name: "walletConnect"; - options: WalletConnectConnector["options"]; -}; - -// Warning: (ae-internal-missing-underscore) The name "WalletConnector" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type WalletConnector = InjectedConnectorType | WalletConnectConnectorType | WalletLinkConnectorType | MagicConnectorType | GnosisConnectorType; - -// Warning: (ae-internal-missing-underscore) The name "WalletLinkConnectorType" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type WalletLinkConnectorType = "walletLink" | "coinbase" | { - name: "walletLink" | "coinbase"; - options: CoinbaseWalletConnector["options"]; -}; - // Warnings were encountered during analysis: // -// dist/Provider.d.ts:37:5 - (ae-forgotten-export) The symbol "MagicConnectorArguments" needs to be exported by the entry point index.d.ts -// dist/Provider.d.ts:44:5 - (ae-forgotten-export) The symbol "GnosisConnectorArguments" needs to be exported by the entry point index.d.ts -// dist/hooks/async/roles.d.ts:126:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal -// dist/hooks/async/roles.d.ts:161:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal -// dist/hooks/useNetwork.d.ts:77:5 - (ae-forgotten-export) The symbol "SwitchChainError" needs to be exported by the entry point index.d.ts -// dist/types.d.ts:127:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta -// dist/types.d.ts:133:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta +// dist/declarations/dist/hooks/async/roles.d.ts:126:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal +// dist/declarations/dist/hooks/async/roles.d.ts:161:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal +// dist/declarations/dist/types/types.d.ts:154:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta +// dist/declarations/dist/types/types.d.ts:160:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta // (No @packageDocumentation comment for this package) diff --git a/package.json b/package.json index 88107e4..ce50727 100644 --- a/package.json +++ b/package.json @@ -1,40 +1,69 @@ { "name": "@thirdweb-dev/react", - "version": "2.4.6", + "version": "3.0.0-1", "repository": { "type": "git", "url": "git+https://github.com:thirdweb-dev/react.git" }, "author": "thirdweb engineering", "license": "Apache-2.0", - "main": "dist/index.js", - "types": "dist/index.d.ts", - "module": "dist/index.mjs", - "browser": "dist/index.js", - "exports": "./dist/index.mjs", + "main": "dist/thirdweb-dev-react.cjs.js", + "types": "dist/thirdweb-dev-react.cjs.d.ts", + "module": "dist/thirdweb-dev-react.esm.js", + "browser": { + "./dist/thirdweb-dev-react.cjs.js": "./dist/thirdweb-dev-react.browser.cjs.js", + "./dist/thirdweb-dev-react.esm.js": "./dist/thirdweb-dev-react.browser.esm.js" + }, + "exports": { + "./package.json": "./package.json", + ".": { + "module": "./dist/thirdweb-dev-react.esm.js", + "default": "./dist/thirdweb-dev-react.cjs.js" + }, + "./connectors/gnosis": { + "module": "./wagmi-connectors/gnosis/dist/thirdweb-dev-react-wagmi-connectors-gnosis.esm.js", + "default": "./wagmi-connectors/gnosis/dist/thirdweb-dev-react-wagmi-connectors-gnosis.cjs.js" + }, + "./connectors/magic": { + "module": "./wagmi-connectors/magic/dist/thirdweb-dev-react-wagmi-connectors-magic.esm.js", + "default": "./wagmi-connectors/magic/dist/thirdweb-dev-react-wagmi-connectors-magic.cjs.js" + } + }, "files": [ - "dist/**/*" + "dist/", + "wagmi-connectors/" ], "private": false, "scripts": { - "build:lib": "tsup && yarn generate:types", + "build:lib": "tsc & preconstruct build", "lint": "eslint src/", "fix": "eslint src/ --fix", "extract-api": "api-extractor run --local", - "generate:types": "tsc", "generate:md-docs": "yarn api-documenter markdown -i ./temp -o ./docs", "generate-snippets": "node ./scripts/generate-snippets.mjs", - "build": "yarn build:lib && yarn extract-api && yarn generate:md-docs && yarn generate-snippets", + "build": "rm -rf dist/ && yarn build:lib && yarn extract-api && yarn generate:md-docs && yarn generate-snippets", "prepublishOnly": "yarn build" }, "sideEffects:": false, + "preconstruct": { + "entrypoints": [ + "index.ts", + "wagmi-connectors/gnosis.ts", + "wagmi-connectors/magic/index.ts" + ] + }, "devDependencies": { - "@esbuild-plugins/node-modules-polyfill": "^0.1.4", + "@babel/core": "^7.18.5", + "@babel/preset-env": "^7.18.2", + "@babel/preset-react": "^7.17.12", + "@babel/preset-typescript": "^7.17.12", + "@magic-ext/oauth": "^2.1.1", + "@magic-sdk/provider": "^8.1.1", "@microsoft/api-documenter": "^7.15.3", "@microsoft/api-extractor": "^7.19.4", "@microsoft/tsdoc": "^0.14.1", - "@swc/core": "^1.2.177", - "@thirdweb-dev/sdk": "^2.3.20", + "@preconstruct/cli": "^2.1.5", + "@thirdweb-dev/sdk": "^3.0.0-2", "@trivago/prettier-plugin-sort-imports": "^3.2.0", "@types/mime": "^2.0.3", "@types/react": "^18.0.5", @@ -45,29 +74,43 @@ "eslint-plugin-import": "^2.24.2", "eslint-plugin-inclusive-language": "^2.1.1", "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-tsdoc": "^0.2.14", + "eslint-plugin-react": "^7.30.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-tsdoc": "^0.2.16", "ethers": "^5.6.1", "magic-sdk": "^8.1.1", "prettier": "^2.5.1", "react": "^18.1.0", - "tsup": "^6.0.0", - "typescript": "^4.6.2" + "typescript": "^4.6.2", + "wagmi": "^0.5.1" }, "dependencies": { - "@gnosis.pm/safe-core-sdk": "2.1.0", - "@gnosis.pm/safe-ethers-adapters": "0.1.0-alpha.9", - "@gnosis.pm/safe-ethers-lib": "1.1.0", - "detect-browser": "^5.3.0", - "mime": "^3.0.0", - "react-cool-dimensions": "^2.0.7", + "@wagmi/core": "^0.4.1", "react-query": "^4.0.0-beta.3", - "tiny-invariant": "^1.2.0", - "wagmi": "^0.2.28" + "tiny-invariant": "^1.2.0" }, "peerDependencies": { - "@thirdweb-dev/sdk": "^2.3.20", + "@magic-ext/oauth": "^2.1.1", + "@magic-sdk/provider": "^8.1.1", + "@thirdweb-dev/sdk": "^3.0.0-2", "ethers": ">=5.5.1", - "react": ">=17.0.0" + "magic-sdk": "^8.1.1", + "react": ">=17.0.0", + "wagmi": "^0.5.4" + }, + "peerDependenciesMeta": { + "wagmi": { + "optional": true + }, + "magic-sdk": { + "optional": true + }, + "@magic-ext/oauth": { + "optional": true + }, + "@magic-sdk/provider": { + "optional": true + } }, "resolutions": { "ansi-regex": "^6.0.1", diff --git a/src/Provider.tsx b/src/Provider.tsx deleted file mode 100644 index ca6c024..0000000 --- a/src/Provider.tsx +++ /dev/null @@ -1,546 +0,0 @@ -import { - GnosisConnectorArguments, - GnosisSafeConnector, -} from "./connectors/gnosis-safe"; -import { MagicConnector, MagicConnectorArguments } from "./connectors/magic"; -import { - Chain, - SupportedChain, - defaultSupportedChains, -} from "./constants/chain"; -import { - ThirdwebConfigProvider, - defaultChainRpc, -} from "./contexts/thirdweb-config"; -import { useSigner } from "./hooks/useSigner"; -import { - ChainOrRpc, - IStorage, - SDKOptions, - SUPPORTED_CHAIN_ID, - SignerOrProvider, - ThirdwebSDK, - getProviderForNetwork, -} from "@thirdweb-dev/sdk/dist/browser"; -import { SDKOptionsOutput } from "@thirdweb-dev/sdk/dist/src/schema"; -import { Signer } from "ethers"; -import React, { createContext, useEffect, useMemo } from "react"; -import { QueryClient, QueryClientProvider } from "react-query"; -import invariant from "tiny-invariant"; -import { - WagmiProvider, - ProviderProps as WagmiproviderProps, - useProvider, -} from "wagmi"; -import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet"; -import { InjectedConnector } from "wagmi/connectors/injected"; -import { WalletConnectConnector } from "wagmi/connectors/walletConnect"; - -/** - * @internal - */ -export type InjectedConnectorType = - | "injected" - | "metamask" - | { name: "injected" | "metamask"; options?: InjectedConnector["options"] }; - -/** - * @internal - */ -export type WalletConnectConnectorType = - | "walletConnect" - | { name: "walletConnect"; options: WalletConnectConnector["options"] }; - -/** - * @internal - */ -export type WalletLinkConnectorType = - | "walletLink" - | "coinbase" - | { - name: "walletLink" | "coinbase"; - options: CoinbaseWalletConnector["options"]; - }; - -/** - * @internal - */ -export type MagicConnectorType = - | "magic" - | { - name: "magic"; - options: Omit; - }; - -/** - * @internal - */ -export type GnosisConnectorType = - | "gnosis" - | { - name: "gnosis"; - options: GnosisConnectorArguments; - }; - -/** - * @internal - */ -export type WalletConnector = - | InjectedConnectorType - | WalletConnectConnectorType - | WalletLinkConnectorType - | MagicConnectorType - | GnosisConnectorType; - -/** - * @internal - */ -export type ChainRpc = Record< - TSupportedChain extends Chain ? TSupportedChain["id"] : TSupportedChain, - string ->; - -/** - * the metadata to pass to wallet connection dialog (may show up during the wallet-connection process) - * @remarks this is only used for wallet connect and wallet link, metamask does not support it - * @public - */ -export interface DAppMetaData { - /** - * the name of your app - */ - name: string; - /** - * optional - a description of your app - */ - description?: string; - /** - * optional - a url that points to a logo (or favicon) of your app - */ - logoUrl?: string; - /** - * optional - the url where your app is hosted - */ - url?: string; - /** - * optional - whether to show the connect dialog in darkmode or not - */ - isDarkMode?: boolean; -} - -/** - * The possible props for the ThirdwebProvider. - */ -export interface ThirdwebProviderProps< - TSupportedChain extends SupportedChain = SupportedChain, -> { - /** - * The {@link SDKOptions | Thirdweb SDK Options} to pass to the thirdweb SDK - * comes with sensible defaults - */ - sdkOptions?: SDKOptions; - /** - * An array of chainIds or {@link Chain} objects that the dApp supports - * If not provided, all chains supported by the SDK will be supported by default - */ - supportedChains?: TSupportedChain[]; - /** - * An array of connector types (strings) or wallet connector objects that the dApp supports - * If not provided, will default to metamask (injected), wallet connect and walletlink (coinbase wallet) with sensible defaults - */ - walletConnectors?: WalletConnector[]; - /** - * A partial map of chainIds to rpc urls to use for certain chains - * If not provided, will default to the rpcUrls of the chain objects for the supported chains - */ - chainRpc?: Partial>; - /** - * Metadata to pass to wallet connect and walletlink wallet connect. (Used to show *which* dApp is being connected to in mobile wallets that support it) - * Defaults to just the name being passed as `thirdweb powered dApp`. - */ - dAppMeta?: DAppMetaData; - /** - * The chainId that your dApp is running on. - * While this *can* be `undefined` it is required to be passed. Passing `undefined` will cause no SDK to be instantiated. - * When passing a chainId, it **must** be part of the `supportedChains` array. - */ - desiredChainId: TSupportedChain extends Chain - ? TSupportedChain["id"] - : TSupportedChain | undefined; - - /** - * The storage interface to use with the sdk. - */ - storageInterface?: IStorage; - - /** - * The react-query client to use. (Defaults to a default client.) - * @beta - */ - queryClient?: QueryClient; - - /** - * Whether or not to attempt auto-connect to a wallet. - */ - autoConnect?: boolean; -} - -// SDK handles this under the hood for us - -const defaultdAppMeta: DAppMetaData = { - name: "thirdweb powered dApp", -}; - -const defaultWalletConnectors: Required< - ThirdwebProviderProps["walletConnectors"] -> = ["metamask", "walletConnect", "walletLink"]; - -/** - * - * The `` component lets you control what networks you want users to connect to, what types of wallets can connect to your app, and the settings for the [Typescript SDK](https://docs.thirdweb.com/typescript). - * - * @example - * You can wrap your application with the provider as follows: - * - * ```jsx title="App.jsx" - * import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react"; - * - * const App = () => { - * return ( - * - * - * - * ); - * }; - * ``` - * - * @public - * - */ -export const ThirdwebProvider = < - TSupportedChain extends SupportedChain = SupportedChain, ->({ - sdkOptions, - chainRpc = defaultChainRpc, - supportedChains = defaultSupportedChains.map( - (c) => c.id, - ) as TSupportedChain[], - walletConnectors = defaultWalletConnectors, - dAppMeta = defaultdAppMeta, - desiredChainId, - storageInterface, - queryClient, - autoConnect = true, - children, -}: React.PropsWithChildren>) => { - // construct the wagmi options - - const _supporrtedChains = useMemo(() => { - return supportedChains - .map((c) => { - if (typeof c === "number") { - return defaultSupportedChains.find((sc) => sc.id === c); - } - return c as Chain; - }) - .filter((c) => c !== undefined) as Chain[]; - }, [supportedChains]); - - const _rpcUrlMap = useMemo(() => { - return _supporrtedChains.reduce((prev, curr) => { - prev[curr.id] = - curr.id in chainRpc - ? (getProviderForNetwork( - chainRpc[curr.id as keyof ChainRpc] || - curr.rpcUrls[0], - ) as string) - : curr.rpcUrls[0]; - return prev; - }, {} as Record); - }, [chainRpc, _supporrtedChains]); - - const wagmiProps: WagmiproviderProps = useMemo(() => { - const walletConnectClientMeta = { - name: dAppMeta.name, - url: dAppMeta.url || "", - icons: [dAppMeta.logoUrl || ""], - description: dAppMeta.description || "", - }; - - const walletLinkClientMeta = { - appName: dAppMeta.name, - appLogoUrl: dAppMeta.logoUrl, - darkMode: dAppMeta.isDarkMode, - }; - - return { - autoConnect, - connectorStorageKey: "tw:provider:connectors", - connectors: ({ chainId }: { chainId?: number }) => { - return walletConnectors - .map((connector) => { - // injected connector - if ( - (typeof connector === "string" && - (connector === "injected" || connector === "metamask")) || - (typeof connector === "object" && - (connector.name === "injected" || - connector.name === "metamask")) - ) { - return new InjectedConnector({ - options: - typeof connector === "string" - ? { shimDisconnect: true, shimChainChangedDisconnect: true } - : connector.options, - chains: _supporrtedChains, - }); - } - if ( - (typeof connector === "string" && - connector === "walletConnect") || - (typeof connector === "object" && - connector.name === "walletConnect") - ) { - return new WalletConnectConnector({ - options: - typeof connector === "string" - ? { - chainId, - rpc: _rpcUrlMap, - clientMeta: walletConnectClientMeta, - qrcode: true, - } - : { - chainId, - rpc: _rpcUrlMap, - clientMeta: walletConnectClientMeta, - qrcode: true, - ...connector.options, - }, - chains: _supporrtedChains, - }); - } - if ( - (typeof connector === "string" && - (connector === "coinbase" || connector === "walletLink")) || - (typeof connector === "object" && - (connector.name === "coinbase" || - connector.name === "walletLink")) - ) { - const jsonRpcUrl = _rpcUrlMap[chainId || desiredChainId || 1]; - return new CoinbaseWalletConnector({ - chains: _supporrtedChains, - options: - typeof connector === "string" - ? { - ...walletLinkClientMeta, - jsonRpcUrl, - } - : { - ...walletLinkClientMeta, - jsonRpcUrl, - ...connector.options, - }, - }); - } - if (typeof connector === "object" && connector.name === "magic") { - const jsonRpcUrl = _rpcUrlMap[chainId || desiredChainId || 1]; - return new MagicConnector({ - chains: _supporrtedChains, - options: { - ...connector.options, - network: { rpcUrl: jsonRpcUrl, chainId: desiredChainId || 1 }, - rpcUrls: _rpcUrlMap, - }, - }); - } - if ( - (typeof connector === "string" && connector === "gnosis") || - (typeof connector === "object" && connector.name === "gnosis") - ) { - return new GnosisSafeConnector({ - chains: _supporrtedChains, - }); - } - return null; - }) - .filter((c) => c !== null); - }, - } as WagmiproviderProps; - }, [walletConnectors, _supporrtedChains, dAppMeta]); - - const readonlySettings: SDKOptionsOutput["readonlySettings"] = useMemo(() => { - if ( - sdkOptions?.readonlySettings?.rpcUrl && - sdkOptions?.readonlySettings?.chainId - ) { - return sdkOptions.readonlySettings; - } - if (!desiredChainId) { - return undefined; - } - let rpcUrl = _rpcUrlMap[desiredChainId as keyof typeof _rpcUrlMap]; - try { - rpcUrl = getProviderForNetwork(rpcUrl) as string; - } catch (e) { - console.error( - `failed to configure rpc url for chain: "${desiredChainId}". Did you forget to pass "desiredChainId" to the component?`, - ); - // cannot set readonly without a valid rpc url - return undefined; - } - return { - chainId: desiredChainId, - rpcUrl, - }; - }, [_rpcUrlMap, desiredChainId]); - - const sdkOptionsWithDefaults = useMemo(() => { - const opts: SDKOptions = sdkOptions; - return { - ...opts, - readonlySettings, - }; - }, [sdkOptions, readonlySettings]); - - const queryClientWithDefault: QueryClient = useMemo(() => { - return queryClient ? queryClient : new QueryClient(); - }, [queryClient]); - - return ( - - - - - {children} - - - - - ); -}; - -export interface ThirdwebSDKProviderProps - extends Pick< - ThirdwebProviderProps, - "desiredChainId" | "sdkOptions" | "storageInterface" - > { - signer?: Signer; - provider: ChainOrRpc | SignerOrProvider; -} - -const ThirdwebSDKProviderWagmiWrapper: React.FC< - React.PropsWithChildren> -> = ({ children, ...props }) => { - const provider = useProvider(); - const signer = useSigner(); - return ( - - {children} - - ); -}; - -interface SDKContext { - sdk?: ThirdwebSDK; - _inProvider?: true; - desiredChainId: number; -} - -const ThirdwebSDKContext = createContext({ desiredChainId: -1 }); - -/** - * A barebones wrapper around the Thirdweb SDK. - * - * You can use this in order to be able to pass a provider & signer directly to the SDK. - * - * @remarks Utilizing this provider will mean hooks for wallet management are not available, if you need those please use the {@link ThirdwebProvider} instead. - * - * @beta - */ -export const ThirdwebSDKProvider: React.FC< - React.PropsWithChildren -> = ({ - sdkOptions, - desiredChainId, - storageInterface, - provider, - signer, - children, -}) => { - const sdk = useMemo(() => { - if (!desiredChainId || typeof window === "undefined") { - return undefined; - } - const _sdk = new ThirdwebSDK(provider, sdkOptions, storageInterface); - (_sdk as any)._chainId = desiredChainId; - return _sdk; - }, [provider, sdkOptions, storageInterface, desiredChainId]); - - useEffect(() => { - if (signer && sdk && (sdk as any)._chainId === desiredChainId) { - sdk.updateSignerOrProvider(signer); - } - }, [signer, sdk, desiredChainId]); - - const ctxValue = useMemo( - () => ({ - sdk, - desiredChainId: desiredChainId || -1, - _inProvider: true as const, - }), - [sdk], - ); - - return ( - - {children} - - ); -}; - -/** - * - * @returns {@link ThirdwebSDK} - * @internal - */ -export function useSDK(): ThirdwebSDK | undefined { - const ctx = React.useContext(ThirdwebSDKContext); - invariant( - ctx._inProvider, - "useSDK must be called from within a ThirdwebProvider, did you forget to wrap your app in a ?", - ); - return ctx.sdk; -} - -/** - * - * @internal - */ -export function useDesiredChainId(): number { - const ctx = React.useContext(ThirdwebSDKContext); - invariant( - ctx._inProvider, - "useDesiredChainId must be called from within a ThirdwebProvider, did you forget to wrap your app in a ?", - ); - return ctx.desiredChainId; -} - -/** - * - * @internal - */ -export function useActiveChainId(): SUPPORTED_CHAIN_ID | undefined { - const ctx = React.useContext(ThirdwebSDKContext); - invariant( - ctx._inProvider, - "useActiveChainId must be called from within a ThirdwebProvider, did you forget to wrap your app in a ?", - ); - return (ctx.sdk as any)?._chainId; -} diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx deleted file mode 100644 index 49438c2..0000000 --- a/src/components/Icons.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { SVGProps } from "react"; - -export const CarbonDocumentUnknown: React.VFC> = ( - props, -) => { - return ( - - - - - - ); -}; - -export const CarbonDocumentAudio: React.VFC> = ( - props, -) => { - return ( - - - - - ); -}; - -export const CarbonPauseFilled: React.VFC> = ( - props, -) => { - return ( - - - - ); -}; - -export const CarbonPlayFilledAlt: React.VFC> = ( - props, -) => { - return ( - - - - ); -}; diff --git a/src/components/MediaRenderer.tsx b/src/components/MediaRenderer.tsx deleted file mode 100644 index 6e13ec8..0000000 --- a/src/components/MediaRenderer.tsx +++ /dev/null @@ -1,571 +0,0 @@ -import { resolveIpfsUri, resolveMimeType } from "../utils/ipfs"; -import { shouldRenderAudioTag, shouldRenderVideoTag } from "../utils/media"; -import { mergeRefs } from "../utils/react"; -import { - CarbonDocumentAudio, - CarbonDocumentUnknown, - CarbonPauseFilled, - CarbonPlayFilledAlt, -} from "./Icons"; -import React, { useEffect, useMemo, useRef, useState } from "react"; -import useDimensions from "react-cool-dimensions"; -import { useQuery } from "react-query"; - -export interface SharedMediaProps { - className?: string; - style?: React.CSSProperties; - width?: HTMLIFrameElement["width"]; - height?: HTMLIFrameElement["height"]; - /** - * Require user interaction to play the media. (default false) - */ - requireInteraction?: boolean; - /** - * Show the media controls (where applicable) (default false) - */ - controls?: HTMLVideoElement["controls"]; -} - -/** - * - * The props for the {@link MediaRenderer} component. - * @public - */ -export interface MediaRendererProps extends SharedMediaProps { - /** - * The media source uri. - */ - src?: string | null; - /** - * The alt text for the media. - */ - alt?: string; - /** - * The media poster image uri. (if applicable) - */ - poster?: string | null; -} - -interface PlayButtonProps { - onClick: () => void; - isPlaying: boolean; -} - -const PlayButton: React.VFC = ({ onClick, isPlaying }) => { - const [isHovering, setIsHovering] = useState(false); - const onMouseEnter = () => setIsHovering(true); - const onMouseLeave = () => setIsHovering(false); - const onMouseDown = () => setIsHovering(false); - const onMouseUp = () => setIsHovering(true); - return ( - - ); -}; - -const VideoPlayer = React.forwardRef< - HTMLVideoElement, - React.PropsWithChildren ->( - ( - { - src, - alt, - poster, - requireInteraction, - children, - style, - width, - height, - controls, - ...restProps - }, - ref, - ) => { - const videoRef = useRef(null); - const [playing, setPlaying] = useState(!requireInteraction); - const [muted, setMuted] = useState(true); - - useEffect(() => { - if (videoRef.current) { - if (playing) { - videoRef.current.play(); - } else { - videoRef.current.pause(); - videoRef.current.currentTime = 0; - } - } - }, [playing]); - - return ( -
-
- ); - }, -); - -const AudioPlayer = React.forwardRef< - HTMLAudioElement, - React.PropsWithChildren ->( - ( - { - src, - alt, - poster, - requireInteraction, - children, - style, - height, - width, - controls, - ...restProps - }, - ref, - ) => { - const audioRef = useRef(null); - const [playing, setPlaying] = useState(false); - const [muted, setMuted] = useState(true); - - useEffect(() => { - if (audioRef.current) { - if (playing) { - audioRef.current.play(); - } else { - audioRef.current.pause(); - audioRef.current.currentTime = 0; - } - } - }, [playing]); - - return ( -
- {poster ? ( - - ) : ( -
- -
- )} - - { - setPlaying((prev) => !prev); - setMuted(false); - }} - isPlaying={playing} - /> -
- ); - }, -); - -const IframePlayer = React.forwardRef< - HTMLIFrameElement, - React.PropsWithChildren ->( - ( - { - src, - alt, - poster, - requireInteraction, - children, - style, - height, - width, - controls, - ...restProps - }, - ref, - ) => { - const { observe, width: elWidth } = useDimensions(); - const [playing, setPlaying] = useState(!requireInteraction); - - if (elWidth < 300) { - return ( -
- -
- ); - } - - return ( -
-