From 7bc764e6e070b289668b1c4e359d47a629ebe1aa Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Sat, 18 Jun 2022 18:27:32 -0700 Subject: [PATCH 01/13] [breaking] - init v3 changes, new sdk, new wagmi, new connectors --- .eslintrc.cjs | 44 +- .gitignore | 3 +- babel.config.js | 10 + config/api-extractor.json | 4 +- docs/react.buynowparams.md | 21 - docs/react.claimineligibilityparameters.md | 2 - docs/react.claimnftparams.md | 27 - docs/react.claimnftreturntype.md | 18 - docs/react.claimtokenparams.md | 17 - docs/react.contractaddress.md | 16 - docs/react.dappmetadata.description.md | 13 - docs/react.dappmetadata.isdarkmode.md | 13 - docs/react.dappmetadata.logourl.md | 13 - docs/react.dappmetadata.md | 28 - docs/react.dappmetadata.name.md | 13 - docs/react.dappmetadata.url.md | 13 - docs/react.dropcontract.md | 16 - docs/react.makebidparams.md | 14 - docs/react.md | 98 +- docs/react.mediarenderer.md | 32 - docs/react.mediarendererprops.alt.md | 13 - docs/react.mediarendererprops.md | 23 - docs/react.mediarendererprops.poster.md | 13 - docs/react.mediarendererprops.src.md | 13 - docs/react.mediatype.md | 19 - docs/react.mediatype.mimetype.md | 11 - docs/react.mediatype.url.md | 11 - docs/react.mintnftparams.md | 25 - docs/react.mintnftreturntype.md | 16 - docs/react.nft.md | 24 - docs/react.nftcontract.md | 16 - docs/react.requiredparam.md | 16 - docs/react.sharedmediaprops.classname.md | 11 - docs/react.sharedmediaprops.controls.md | 13 - docs/react.sharedmediaprops.height.md | 11 - docs/react.sharedmediaprops.md | 23 - ...act.sharedmediaprops.requireinteraction.md | 13 - docs/react.sharedmediaprops.style.md | 11 - docs/react.sharedmediaprops.width.md | 11 - docs/react.thirdwebnftmedia.md | 13 - docs/react.thirdwebnftmediaprops.md | 21 - docs/react.thirdwebnftmediaprops.metadata.md | 13 - docs/react.thirdwebprovider.md | 21 +- ...react.thirdwebproviderprops.autoconnect.md | 13 - docs/react.thirdwebproviderprops.chainrpc.md | 13 - docs/react.thirdwebproviderprops.dappmeta.md | 13 - ...ct.thirdwebproviderprops.desiredchainid.md | 13 - docs/react.thirdwebproviderprops.md | 28 - ...react.thirdwebproviderprops.queryclient.md | 16 - .../react.thirdwebproviderprops.sdkoptions.md | 13 - ....thirdwebproviderprops.storageinterface.md | 13 - ...t.thirdwebproviderprops.supportedchains.md | 13 - ....thirdwebproviderprops.walletconnectors.md | 13 - docs/react.thirdwebsdkprovider.md | 12 - ...ct.thirdwebsdkproviderprops.appmetadata.md | 11 + .../react.thirdwebsdkproviderprops.chainid.md | 11 + ...dwebsdkproviderprops.chainidtorpcurlmap.md | 11 + docs/react.thirdwebsdkproviderprops.md | 10 +- ...react.thirdwebsdkproviderprops.options.md} | 6 +- ...ct.thirdwebsdkproviderprops.queryclient.md | 11 + docs/react.thirdwebsdkproviderprops.signer.md | 2 +- ...irdwebsdkproviderprops.storageinterface.md | 11 + docs/react.tokenmintparams.md | 21 - docs/react.useactiveclaimcondition.md | 6 +- docs/react.useactivelistings.md | 6 +- docs/react.useaddress.md | 36 - docs/react.useallrolemembers.md | 2 +- docs/react.useauctionwinner.md | 4 +- docs/react.usebalance.md | 35 - docs/react.usebidbuffer.md | 2 +- docs/react.usebuynow.md | 2 +- docs/react.usechainid.md | 35 - docs/react.useclaimconditions.md | 6 +- docs/react.useclaimednfts.md | 6 +- docs/react.useclaimednftsupply.md | 2 +- docs/react.useclaimnft.md | 6 +- docs/react.useclaimtoken.md | 4 +- docs/react.usecoinbasewallet.md | 37 +- docs/react.usecontract.md | 12 +- docs/react.usecontractmetadata.md | 6 +- docs/react.usecontractpublishmetadata.md | 2 +- docs/react.usecontracttype.md | 6 +- docs/react.usecreateauctionlisting.md | 6 +- docs/react.usecreatedirectlisting.md | 6 +- docs/react.usedisconnect.md | 52 - docs/react.usegnosis.md | 41 - docs/react.usegrantrole.md | 6 +- docs/react.useisaddressrole.md | 6 +- docs/react.uselisting.md | 8 +- docs/react.uselistings.md | 6 +- docs/react.usemagic.md | 76 - docs/react.usemakebid.md | 4 +- docs/react.usemetadata.md | 2 +- docs/react.usemetamask.md | 39 +- docs/react.usemintnft.md | 6 +- docs/react.useminttoken.md | 4 +- docs/react.usenetwork.md | 92 - docs/react.usenft.md | 8 +- docs/react.usenftbalance.md | 4 +- docs/react.usenftbalanceparams.md | 25 - docs/react.usenfts.md | 6 +- docs/react.useownednfts.md | 8 +- docs/react.useplatformfees.md | 2 +- docs/react.useprimarysalerecipient.md | 2 +- docs/react.useresolvedmediatype.md | 50 - docs/react.userevokerole.md | 6 +- docs/react.userolemembers.md | 2 +- docs/react.useroyaltysettings.md | 2 +- docs/react.usesdk.md | 19 + docs/react.usesetallrolemembers.md | 2 +- docs/react.usethirdwebconfig.md | 15 + docs/react.usetokenbalance.md | 4 +- docs/react.usetokensupply.md | 2 +- docs/react.usetotalcirculatingsupply.md | 4 +- docs/react.usetotalcirculatingsupplyparams.md | 18 - docs/react.usetotalcount.md | 4 +- docs/react.useunclaimednfts.md | 6 +- docs/react.useunclaimednftsupply.md | 2 +- docs/react.useupdatemetadata.md | 2 +- docs/react.useupdateplatformfees.md | 2 +- docs/react.useupdateprimarysalerecipient.md | 2 +- docs/react.useupdateroyaltysettings.md | 2 +- docs/react.usewalletconnect.md | 37 +- docs/react.usewinningbid.md | 8 +- docs/react.walletaddress.md | 16 - etc/react.api.md | 635 ++-- package.json | 75 +- src/Provider.tsx | 544 --- src/components/Icons.tsx | 62 - src/components/MediaRenderer.tsx | 571 --- src/components/NftMedia.tsx | 31 - src/connectors/gnosis-safe.ts | 167 - src/connectors/magic.ts | 186 - src/constants/chain.ts | 194 -- src/constants/ipfs.ts | 9 - src/contexts/thirdweb-config.tsx | 41 - src/costants/chains.ts | 86 + src/hooks/async/claim-conditions.ts | 12 +- src/hooks/async/contract-settings.ts | 47 +- src/hooks/async/contracts.ts | 64 +- src/hooks/async/drop.ts | 27 +- src/hooks/async/marketplace.ts | 68 +- src/hooks/async/nft.ts | 39 +- src/hooks/async/roles.ts | 35 +- src/hooks/async/token.ts | 34 +- src/hooks/async/wallet.ts | 54 - src/hooks/connectors/useGnosis.ts | 66 - src/hooks/connectors/useMagic.ts | 85 - src/hooks/connectors/useMetamask.ts | 98 - src/hooks/connectors/useWalletConnect.ts | 48 - src/hooks/connectors/useWalletLink.ts | 56 - src/hooks/contracts/useBuiltinContract.ts | 2 +- src/hooks/query-utils/useQueryWithNetwork.ts | 40 - src/hooks/useAddress.ts | 31 - src/hooks/useChainId.ts | 25 - src/hooks/useConnect.ts | 9 - src/hooks/useDisconnect.ts | 56 - src/hooks/useNetwork.ts | 58 - src/hooks/useNetworkMismatch.ts | 37 +- src/hooks/useReadonlySDK.ts | 29 - src/hooks/useSigner.ts | 47 - .../wallet-connectors/useCoinbaseWallet.ts | 29 + src/hooks/wallet-connectors/useMetamask.ts | 22 + .../wallet-connectors/useWalletConnect.ts | 26 + src/index.ts | 46 +- src/providers/thirdweb-sdk.tsx | 137 + src/providers/thirdweb.tsx | 89 + src/{utils => query-cache}/cache-keys.ts | 36 +- src/{ => types}/types.ts | 0 src/utils/browser.ts | 3 + src/utils/ipfs.ts | 34 - src/utils/isMobile.ts | 55 - src/utils/media.ts | 43 - src/utils/react.ts | 14 - src/wagmi-connectors/gnosis.ts | 52 + src/wagmi-connectors/magic.ts | 222 ++ tsup.config.ts | 22 - wagmi-connectors/gnosis/package.json | 8 + wagmi-connectors/magic/package.json | 8 + yarn.lock | 3101 ++++++++++------- 180 files changed, 3154 insertions(+), 6320 deletions(-) create mode 100644 babel.config.js delete mode 100644 docs/react.buynowparams.md delete mode 100644 docs/react.claimnftparams.md delete mode 100644 docs/react.claimnftreturntype.md delete mode 100644 docs/react.claimtokenparams.md delete mode 100644 docs/react.contractaddress.md delete mode 100644 docs/react.dappmetadata.description.md delete mode 100644 docs/react.dappmetadata.isdarkmode.md delete mode 100644 docs/react.dappmetadata.logourl.md delete mode 100644 docs/react.dappmetadata.md delete mode 100644 docs/react.dappmetadata.name.md delete mode 100644 docs/react.dappmetadata.url.md delete mode 100644 docs/react.dropcontract.md delete mode 100644 docs/react.makebidparams.md delete mode 100644 docs/react.mediarenderer.md delete mode 100644 docs/react.mediarendererprops.alt.md delete mode 100644 docs/react.mediarendererprops.md delete mode 100644 docs/react.mediarendererprops.poster.md delete mode 100644 docs/react.mediarendererprops.src.md delete mode 100644 docs/react.mediatype.md delete mode 100644 docs/react.mediatype.mimetype.md delete mode 100644 docs/react.mediatype.url.md delete mode 100644 docs/react.mintnftparams.md delete mode 100644 docs/react.mintnftreturntype.md delete mode 100644 docs/react.nft.md delete mode 100644 docs/react.nftcontract.md delete mode 100644 docs/react.requiredparam.md delete mode 100644 docs/react.sharedmediaprops.classname.md delete mode 100644 docs/react.sharedmediaprops.controls.md delete mode 100644 docs/react.sharedmediaprops.height.md delete mode 100644 docs/react.sharedmediaprops.md delete mode 100644 docs/react.sharedmediaprops.requireinteraction.md delete mode 100644 docs/react.sharedmediaprops.style.md delete mode 100644 docs/react.sharedmediaprops.width.md delete mode 100644 docs/react.thirdwebnftmedia.md delete mode 100644 docs/react.thirdwebnftmediaprops.md delete mode 100644 docs/react.thirdwebnftmediaprops.metadata.md delete mode 100644 docs/react.thirdwebproviderprops.autoconnect.md delete mode 100644 docs/react.thirdwebproviderprops.chainrpc.md delete mode 100644 docs/react.thirdwebproviderprops.dappmeta.md delete mode 100644 docs/react.thirdwebproviderprops.desiredchainid.md delete mode 100644 docs/react.thirdwebproviderprops.md delete mode 100644 docs/react.thirdwebproviderprops.queryclient.md delete mode 100644 docs/react.thirdwebproviderprops.sdkoptions.md delete mode 100644 docs/react.thirdwebproviderprops.storageinterface.md delete mode 100644 docs/react.thirdwebproviderprops.supportedchains.md delete mode 100644 docs/react.thirdwebproviderprops.walletconnectors.md create mode 100644 docs/react.thirdwebsdkproviderprops.appmetadata.md create mode 100644 docs/react.thirdwebsdkproviderprops.chainid.md create mode 100644 docs/react.thirdwebsdkproviderprops.chainidtorpcurlmap.md rename docs/{react.thirdwebsdkproviderprops.provider.md => react.thirdwebsdkproviderprops.options.md} (61%) create mode 100644 docs/react.thirdwebsdkproviderprops.queryclient.md create mode 100644 docs/react.thirdwebsdkproviderprops.storageinterface.md delete mode 100644 docs/react.tokenmintparams.md delete mode 100644 docs/react.useaddress.md delete mode 100644 docs/react.usebalance.md delete mode 100644 docs/react.usechainid.md delete mode 100644 docs/react.usedisconnect.md delete mode 100644 docs/react.usegnosis.md delete mode 100644 docs/react.usemagic.md delete mode 100644 docs/react.usenetwork.md delete mode 100644 docs/react.usenftbalanceparams.md delete mode 100644 docs/react.useresolvedmediatype.md create mode 100644 docs/react.usesdk.md create mode 100644 docs/react.usethirdwebconfig.md delete mode 100644 docs/react.usetotalcirculatingsupplyparams.md delete mode 100644 docs/react.walletaddress.md delete mode 100644 src/Provider.tsx delete mode 100644 src/components/Icons.tsx delete mode 100644 src/components/MediaRenderer.tsx delete mode 100644 src/components/NftMedia.tsx delete mode 100644 src/connectors/gnosis-safe.ts delete mode 100644 src/connectors/magic.ts delete mode 100644 src/constants/chain.ts delete mode 100644 src/constants/ipfs.ts delete mode 100644 src/contexts/thirdweb-config.tsx create mode 100644 src/costants/chains.ts delete mode 100644 src/hooks/async/wallet.ts delete mode 100644 src/hooks/connectors/useGnosis.ts delete mode 100644 src/hooks/connectors/useMagic.ts delete mode 100644 src/hooks/connectors/useMetamask.ts delete mode 100644 src/hooks/connectors/useWalletConnect.ts delete mode 100644 src/hooks/connectors/useWalletLink.ts delete mode 100644 src/hooks/query-utils/useQueryWithNetwork.ts delete mode 100644 src/hooks/useAddress.ts delete mode 100644 src/hooks/useChainId.ts delete mode 100644 src/hooks/useConnect.ts delete mode 100644 src/hooks/useDisconnect.ts delete mode 100644 src/hooks/useNetwork.ts delete mode 100644 src/hooks/useReadonlySDK.ts delete mode 100644 src/hooks/useSigner.ts create mode 100644 src/hooks/wallet-connectors/useCoinbaseWallet.ts create mode 100644 src/hooks/wallet-connectors/useMetamask.ts create mode 100644 src/hooks/wallet-connectors/useWalletConnect.ts create mode 100644 src/providers/thirdweb-sdk.tsx create mode 100644 src/providers/thirdweb.tsx rename src/{utils => query-cache}/cache-keys.ts (90%) rename src/{ => types}/types.ts (100%) create mode 100644 src/utils/browser.ts delete mode 100644 src/utils/ipfs.ts delete mode 100644 src/utils/isMobile.ts delete mode 100644 src/utils/media.ts delete mode 100644 src/utils/react.ts create mode 100644 src/wagmi-connectors/gnosis.ts create mode 100644 src/wagmi-connectors/magic.ts delete mode 100644 tsup.config.ts create mode 100644 wagmi-connectors/gnosis/package.json create mode 100644 wagmi-connectors/magic/package.json diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 456f77f..e67aa36 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,33 @@ 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", - "eslint-plugin-tsdoc", + "react", + "react-hooks", ], 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 +132,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 +165,5 @@ module.exports = { ], env: { browser: true, - node: true, }, }; diff --git a/.gitignore b/.gitignore index 3d43fd2..a3fd0b2 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ yalc.lock temp/ .swc/ *.log -.DS_Store \ No newline at end of file +.DS_Store +old_src/ \ No newline at end of file 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.buynowparams.md b/docs/react.buynowparams.md deleted file mode 100644 index 30a66c0..0000000 --- a/docs/react.buynowparams.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [BuyNowParams](./react.buynowparams.md) - -## BuyNowParams type - -Signature: - -```typescript -export declare type BuyNowParams = TListingType extends ListingType.Direct ? { - id: BigNumberish; - type: ListingType.Direct; - buyAmount: BigNumberish; - buyForWallet?: WalletAddress; -} : { - id: BigNumberish; - type: ListingType.Auction; -}; -``` -References: [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.claimineligibilityparameters.md b/docs/react.claimineligibilityparameters.md index ba78182..37dc85e 100644 --- a/docs/react.claimineligibilityparameters.md +++ b/docs/react.claimineligibilityparameters.md @@ -17,5 +17,3 @@ export declare type ClaimIneligibilityParameters = { quantity: string | number; }; ``` -References: [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.claimnftparams.md b/docs/react.claimnftparams.md deleted file mode 100644 index b3e37c2..0000000 --- a/docs/react.claimnftparams.md +++ /dev/null @@ -1,27 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ClaimNFTParams](./react.claimnftparams.md) - -## ClaimNFTParams 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 params for the [useClaimNFT()](./react.useclaimnft.md) hook mutation. - -Signature: - -```typescript -export declare type ClaimNFTParams = TContract extends Erc1155 ? { - to: WalletAddress; - tokenId: BigNumberish; - quantity: BigNumberish; - proofs?: BytesLike[]; -} : { - to: WalletAddress; - quantity: BigNumberish; - proofs?: BytesLike[]; -}; -``` -References: [DropContract](./react.dropcontract.md), [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.claimnftreturntype.md b/docs/react.claimnftreturntype.md deleted file mode 100644 index 6cee324..0000000 --- a/docs/react.claimnftreturntype.md +++ /dev/null @@ -1,18 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ClaimNFTReturnType](./react.claimnftreturntype.md) - -## ClaimNFTReturnType 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 return type of the [useClaimNFT()](./react.useclaimnft.md) hook. - -Signature: - -```typescript -export declare type ClaimNFTReturnType = TContract extends Erc721 ? Awaited> : TContract extends Erc1155 ? Awaited> : never; -``` -References: [DropContract](./react.dropcontract.md) - diff --git a/docs/react.claimtokenparams.md b/docs/react.claimtokenparams.md deleted file mode 100644 index 5e8dc56..0000000 --- a/docs/react.claimtokenparams.md +++ /dev/null @@ -1,17 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ClaimTokenParams](./react.claimtokenparams.md) - -## ClaimTokenParams type - -Signature: - -```typescript -export declare type ClaimTokenParams = { - to: WalletAddress; - amount: Amount; - proofs?: BytesLike[]; -}; -``` -References: [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.contractaddress.md b/docs/react.contractaddress.md deleted file mode 100644 index 00d8d30..0000000 --- a/docs/react.contractaddress.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ContractAddress](./react.contractaddress.md) - -## ContractAddress 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. -> - -A contract address. - -Signature: - -```typescript -export declare type ContractAddress = string; -``` 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.dropcontract.md b/docs/react.dropcontract.md deleted file mode 100644 index f5e1734..0000000 --- a/docs/react.dropcontract.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [DropContract](./react.dropcontract.md) - -## DropContract 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 possible DROP contract types. - -Signature: - -```typescript -export declare type DropContract = NFTDrop | EditionDrop; -``` diff --git a/docs/react.makebidparams.md b/docs/react.makebidparams.md deleted file mode 100644 index 9f1a3c7..0000000 --- a/docs/react.makebidparams.md +++ /dev/null @@ -1,14 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MakeBidParams](./react.makebidparams.md) - -## MakeBidParams type - -Signature: - -```typescript -export declare type MakeBidParams = { - listingId: BigNumberish; - bid: Price; -}; -``` diff --git a/docs/react.md b/docs/react.md index 3eccf61..5424e02 100644 --- a/docs/react.md +++ b/docs/react.md @@ -10,97 +10,63 @@ | --- | --- | | [useActiveClaimCondition(\[contract, tokenId\])](./react.useactiveclaimcondition.md) | (BETA) Use this to get the active claim conditon for ERC20, ERC721 or ERC1155 based contracts. They need to extend the claimCondition extension for this hook to work. | | [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" -``` - | | [useAllRoleMembers(contract)](./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" -``` - | | [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) | | | [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) | +| [useClaimNFT(contract)](./react.useclaimnft.md) | (BETA) Use this to claim a NFT on your | | [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" -``` - | +| [useCoinbaseWallet()](./react.usecoinbasewallet.md) | | | [useContract(contractAddress)](./react.usecontract.md) | (BETA) Use this resolve a contract address to a thirdweb (built-in / custom) contract instance. | | [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. | | [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" -``` - | -| [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 | +| [useGrantRole(contract)](./react.usegrantrole.md) | (BETA) Use this to grant a a specific role on a | +| [useIsAddressRole(contract, role, walletAddress)](./react.useisaddressrole.md) | (BETA) Use this to check if a 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" -``` - | -| [useMintNFT(contract)](./react.usemintnft.md) | (BETA) Use this to mint a new NFT on your [NFTContract](./react.nftcontract.md) | +| [useMetamask()](./react.usemetamask.md) | | +| [useMintNFT(contract)](./react.usemintnft.md) | (BETA) Use this to mint a new NFT on your | | [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 />. ```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). | -| [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. | +| [useNFT(contract, tokenId)](./react.usenft.md) | (BETA) Use this to get an individual NFT token of your . | +| [useNFTBalance(\[contract, ownerWalletAddress, tokenId\])](./react.usenftbalance.md) | (BETA) Use this to get a the total balance of a 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. | +| [useNFTs(contract, queryParams)](./react.usenfts.md) | (BETA) Use this to get a list of NFT tokens of your . | +| [useOwnedNFTs(contract, ownerWalletAddress)](./react.useownednfts.md) | (BETA) Use this to get a the owned NFTs for a specific 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) | | -| [useRevokeRole(contract)](./react.userevokerole.md) | (BETA) Use this to revoke a [WalletAddress](./react.walletaddress.md) a specific role on a | +| [useRevokeRole(contract)](./react.userevokerole.md) | (BETA) Use this to revoke a 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 | +| [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. | +| [useThirdwebConfig()](./react.usethirdwebconfig.md) | | | [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). | +| [useTotalCirculatingSupply(\[contract, tokenId\])](./react.usetotalcirculatingsupply.md) | (BETA) Use this to get a the total (minted) supply of your . | +| [useTotalCount(contract)](./react.usetotalcount.md) | (BETA) Use this to get a the number of tokens in your . | | [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) | | | [useUpdateMetadata(contract)](./react.useupdatemetadata.md) | (BETA) Use this to update the metadata of your | @@ -108,53 +74,25 @@ import { useNetworkMistmatch } from "@thirdweb-dev/react" | [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" -``` - | +| [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 | Type Alias | Description | | --- | --- | -| [BuyNowParams](./react.buynowparams.md) | | | [ClaimIneligibilityParameters](./react.claimineligibilityparameters.md) | (BETA) The options to be passed as the second parameter to the useClaimIneligibilityReasons hook. | -| [ClaimNFTParams](./react.claimnftparams.md) | (BETA) The params for the [useClaimNFT()](./react.useclaimnft.md) hook mutation. | -| [ClaimNFTReturnType](./react.claimnftreturntype.md) | (BETA) The return type of the [useClaimNFT()](./react.useclaimnft.md) hook. | -| [ClaimTokenParams](./react.claimtokenparams.md) | | -| [ContractAddress](./react.contractaddress.md) | (BETA) A contract address. | -| [DropContract](./react.dropcontract.md) | (BETA) The possible DROP contract types. | -| [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. | -| [NFT](./react.nft.md) | (BETA) A single NFT token | -| [NFTContract](./react.nftcontract.md) | (BETA) The possible NFT contract types. | -| [RequiredParam](./react.requiredparam.md) | (BETA) Makes a parameter required to be passed, but still allowes it to be undefined. | -| [TokenMintParams](./react.tokenmintparams.md) | (BETA) The parameters to pass to the nft mint function. | -| [useNFTBalanceParams](./react.usenftbalanceparams.md) | (BETA) The params to pass to useNftBalance. | -| [useTotalCirculatingSupplyParams](./react.usetotalcirculatingsupplyparams.md) | (BETA) The params to pass to useTotalCirculatingSupply. | -| [WalletAddress](./react.walletaddress.md) | (BETA) A wallet address. | 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.mintnftparams.md b/docs/react.mintnftparams.md deleted file mode 100644 index a90e3a2..0000000 --- a/docs/react.mintnftparams.md +++ /dev/null @@ -1,25 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MintNFTParams](./react.mintnftparams.md) - -## MintNFTParams 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 params for the [useMintNFT()](./react.usemintnft.md) hook mutation. - -Signature: - -```typescript -export declare type MintNFTParams = TContract extends Erc1155 ? { - metadata: NFTMetadataOrUri; - supply: BigNumberish; - to: WalletAddress; -} : { - metadata: NFTMetadataOrUri; - to: WalletAddress; -}; -``` -References: [NFTContract](./react.nftcontract.md), [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.mintnftreturntype.md b/docs/react.mintnftreturntype.md deleted file mode 100644 index 4abadd6..0000000 --- a/docs/react.mintnftreturntype.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [MintNFTReturnType](./react.mintnftreturntype.md) - -## MintNFTReturnType 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 return type of the [useMintNFT()](./react.usemintnft.md) hook. - -Signature: - -```typescript -export declare type MintNFTReturnType = TContract extends Erc721 ? Awaited> : TContract extends Erc1155 ? Awaited> : never; -``` diff --git a/docs/react.nft.md b/docs/react.nft.md deleted file mode 100644 index 4f78628..0000000 --- a/docs/react.nft.md +++ /dev/null @@ -1,24 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [NFT](./react.nft.md) - -## NFT 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. -> - -A single NFT token - -Signature: - -```typescript -export declare type NFT = { - metadata: NFTMetadata; - owner: string; - type: TContract extends Erc721 ? "ERC721" : "ERC1155"; - supply: TContract extends Erc721 ? 1 : number; - [key: string]: unknown; -}; -``` -References: [NFTContract](./react.nftcontract.md) - diff --git a/docs/react.nftcontract.md b/docs/react.nftcontract.md deleted file mode 100644 index b3d0ca0..0000000 --- a/docs/react.nftcontract.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [NFTContract](./react.nftcontract.md) - -## NFTContract 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 possible NFT contract types. - -Signature: - -```typescript -export declare type NFTContract = Erc721 | Erc1155; -``` diff --git a/docs/react.requiredparam.md b/docs/react.requiredparam.md deleted file mode 100644 index 28c3dcc..0000000 --- a/docs/react.requiredparam.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [RequiredParam](./react.requiredparam.md) - -## RequiredParam 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. -> - -Makes a parameter required to be passed, but still allowes it to be undefined. - -Signature: - -```typescript -export declare type RequiredParam = T | undefined; -``` 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.queryclient.md b/docs/react.thirdwebproviderprops.queryclient.md deleted file mode 100644 index faab652..0000000 --- a/docs/react.thirdwebproviderprops.queryclient.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebProviderProps](./react.thirdwebproviderprops.md) > [queryClient](./react.thirdwebproviderprops.queryclient.md) - -## ThirdwebProviderProps.queryClient property - -> 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.) - -Signature: - -```typescript -queryClient?: QueryClient; -``` 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..4b916f2 --- /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..284208e 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<ChainOrRpc> | | +| [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.tokenmintparams.md b/docs/react.tokenmintparams.md deleted file mode 100644 index 1f24d64..0000000 --- a/docs/react.tokenmintparams.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [TokenMintParams](./react.tokenmintparams.md) - -## TokenMintParams 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 parameters to pass to the nft mint function. - -Signature: - -```typescript -export declare type TokenMintParams = { - to: WalletAddress; - amount: string | number; -}; -``` -References: [WalletAddress](./react.walletaddress.md) - 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.useactivelistings.md b/docs/react.useactivelistings.md index c13d234..d12a53e 100644 --- a/docs/react.useactivelistings.md +++ b/docs/react.useactivelistings.md @@ -12,19 +12,19 @@ Use this to get a list active listings from your marketplace contract. Signature: ```typescript -export declare function useActiveListings(contract: RequiredParam, filter?: MarketplaceFilter): import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk/dist/browser").AuctionListing | import("@thirdweb-dev/sdk/dist/browser").DirectListing)[], unknown>; +export declare function useActiveListings(contract: RequiredParam, filter?: MarketplaceFilter): import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk").AuctionListing | import("@thirdweb-dev/sdk").DirectListing)[], unknown>; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a marketplace contract | | filter | MarketplaceFilter | (Optional) filter to pass to the query for the sake of pagination & filtering | Returns: -import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk/dist/browser").AuctionListing \| import("@thirdweb-dev/sdk/dist/browser").DirectListing)\[\], unknown> +import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk").AuctionListing \| import("@thirdweb-dev/sdk").DirectListing)\[\], unknown> a response object that includes an array of listings diff --git a/docs/react.useaddress.md b/docs/react.useaddress.md deleted file mode 100644 index 78ebf4d..0000000 --- a/docs/react.useaddress.md +++ /dev/null @@ -1,36 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useAddress](./react.useaddress.md) - -## useAddress() function - -Hook for accessing the address of the connected wallet - -```javascript -import { useAddress } from "@thirdweb-dev/react" -``` - -Signature: - -```typescript -export declare function useAddress(): string | undefined; -``` -Returns: - -string \| undefined - -## Example - -To get the address of the connected wallet, you can use the hook as follows: - -```javascript -import { useAddress } from "@thirdweb-dev/react" - -const App = () => { - const address = useAddress() - - return
{address}
-} -``` -The `address` variable will hold the address of the connected wallet if a user has connected using one of the supported wallet connection hooks. - diff --git a/docs/react.useallrolemembers.md b/docs/react.useallrolemembers.md index 1c67b1b..4ea61fa 100644 --- a/docs/react.useallrolemembers.md +++ b/docs/react.useallrolemembers.md @@ -19,7 +19,7 @@ export declare function useAllRoleMembers(c | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | +| contract | RequiredParam<TContract> | an instance of a | Returns: diff --git a/docs/react.useauctionwinner.md b/docs/react.useauctionwinner.md index 256bf81..6377d79 100644 --- a/docs/react.useauctionwinner.md +++ b/docs/react.useauctionwinner.md @@ -19,8 +19,8 @@ export declare function useAuctionWinner(contract: RequiredParam, l | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a marketplace contract | -| listingId | [RequiredParam](./react.requiredparam.md)<BigNumberish> | the listing id to check | +| contract | RequiredParam<Marketplace> | an instace of a marketplace contract | +| listingId | RequiredParam<BigNumberish> | the listing id to check | 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.usebidbuffer.md b/docs/react.usebidbuffer.md index 39d5a8b..708c98f 100644 --- a/docs/react.usebidbuffer.md +++ b/docs/react.usebidbuffer.md @@ -19,7 +19,7 @@ export declare function useBidBuffer(contract: RequiredParam): impo | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a marketplace contract | Returns: diff --git a/docs/react.usebuynow.md b/docs/react.usebuynow.md index 8b599bb..3f46d5c 100644 --- a/docs/react.usebuynow.md +++ b/docs/react.usebuynow.md @@ -30,7 +30,7 @@ export declare function useBuyNow(contract: RequiredParam): import( | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a Marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a Marketplace contract | Returns: diff --git a/docs/react.usechainid.md b/docs/react.usechainid.md deleted file mode 100644 index 603bff2..0000000 --- a/docs/react.usechainid.md +++ /dev/null @@ -1,35 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useChainId](./react.usechainid.md) - -## useChainId() function - -Hook for accessing the chain ID of the network the current wallet is connected to - -```javascript -import { useChainId } from "@thirdweb-dev/react" -``` - -Signature: - -```typescript -export declare function useChainId(): number | undefined; -``` -Returns: - -number \| undefined - -## Example - -You can get the chain ID of the connected wallet by using the hook as follows: - -```javascript -import { useChainId } from "@thirdweb-dev/react" - -const App = () => { - 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 a22ce10..b445bf7 100644 --- a/docs/react.useclaimednfts.md +++ b/docs/react.useclaimednfts.md @@ -12,19 +12,19 @@ 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): import("react-query").UseQueryResult[], unknown>; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<[DropContract](./react.dropcontract.md)> | an instace of a [DropContract](./react.dropcontract.md) | +| contract | RequiredParam<DropContract> | an instace of a | | queryParams | QueryAllParams | (Optional) query params to pass to the query for the sake of pagination | Returns: -import("react-query").UseQueryResult<import("../../types").[NFT](./react.nft.md)<[DropContract](./react.dropcontract.md)>\[\], unknown> +import("react-query").UseQueryResult<import("../../types/types").NFT<DropContract>\[\], 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 6d4bc4e..cb2e246 100644 --- a/docs/react.useclaimednftsupply.md +++ b/docs/react.useclaimednftsupply.md @@ -14,7 +14,7 @@ export declare function useClaimedNFTSupply(contract: RequiredParam<[DropContract](./react.dropcontract.md)> | an instace of a [DropContract](./react.dropcontract.md) | +| contract | RequiredParam<DropContract> | an instace of a | Returns: diff --git a/docs/react.useclaimnft.md b/docs/react.useclaimnft.md index cea5985..c1cc43e 100644 --- a/docs/react.useclaimnft.md +++ b/docs/react.useclaimnft.md @@ -7,7 +7,7 @@ > 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. > -Use this to claim a NFT on your [DropContract](./react.dropcontract.md) +Use this to claim a NFT on your Signature: @@ -19,11 +19,11 @@ export declare function useClaimNFT(contract: Re | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instace of a [DropContract](./react.dropcontract.md) | +| contract | RequiredParam<TContract> | an instace of a | Returns: -import("react-query").UseMutationResult<[ClaimNFTReturnType](./react.claimnftreturntype.md)<TContract>, unknown, [ClaimNFTParams](./react.claimnftparams.md)<TContract>, unknown> +import("react-query").UseMutationResult<ClaimNFTReturnType<TContract>, unknown, ClaimNFTParams<TContract>, unknown> a mutation object that can be used to claim a NFT to the wallet specificed in the params diff --git a/docs/react.useclaimtoken.md b/docs/react.useclaimtoken.md index 0ae40dd..837ef45 100644 --- a/docs/react.useclaimtoken.md +++ b/docs/react.useclaimtoken.md @@ -22,11 +22,11 @@ export declare function useClaimToken(contract: Req | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instace of a | +| contract | RequiredParam<TContract> | an instace of a | Returns: -import("react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [ClaimTokenParams](./react.claimtokenparams.md), unknown> +import("react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, ClaimTokenParams, unknown> a mutation object that can be used to tokens to the wallet specificed in the params diff --git a/docs/react.usecoinbasewallet.md b/docs/react.usecoinbasewallet.md index 4b58ec2..8c0ce1f 100644 --- a/docs/react.usecoinbasewallet.md +++ b/docs/react.usecoinbasewallet.md @@ -4,40 +4,17 @@ ## 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; + isConnected: boolean; + 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; isConnected: boolean; isConnecting: boolean; connect: (chainId?: SUPPORTED\_CHAIN\_ID) => Promise<void>; } diff --git a/docs/react.usecontract.md b/docs/react.usecontract.md index 53b0208..6faaf1f 100644 --- a/docs/react.usecontract.md +++ b/docs/react.usecontract.md @@ -13,7 +13,7 @@ Use this resolve a contract address to a thirdweb (built-in / custom) contract i ```typescript export declare function useContract(contractAddress: RequiredParam): { - contract: null; + contract: undefined; data: undefined; error: unknown; isError: true; @@ -44,7 +44,7 @@ export declare function useContract(contractAddress: RequiredParam void; fetchStatus: import("react-query").FetchStatus; } | { - contract: null; + contract: undefined; data: undefined; error: null; isError: false; @@ -75,7 +75,7 @@ export declare function useContract(contractAddress: RequiredParam void; fetchStatus: import("react-query").FetchStatus; } | { - contract: SmartContract | null; + contract: SmartContract | undefined; data: { contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; publishMetadata: null; @@ -112,7 +112,7 @@ export declare function useContract(contractAddress: RequiredParam void; fetchStatus: import("react-query").FetchStatus; } | { - contract: SmartContract | null; + contract: SmartContract | undefined; data: { contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; publishMetadata: null; @@ -155,11 +155,11 @@ export declare function useContract(contractAddress: RequiredParam<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| contractAddress | RequiredParam<ContractAddress> | the address of the deployed contract | 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: 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<{ 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: 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<{ 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: { 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> \| undefined; 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; } a response object that includes the contract once it is resolved diff --git a/docs/react.usecontractmetadata.md b/docs/react.usecontractmetadata.md index 7d8f6fd..702a14d 100644 --- a/docs/react.usecontractmetadata.md +++ b/docs/react.usecontractmetadata.md @@ -13,7 +13,7 @@ Use this to get the contract metadata for a (built-in or custom) contract. ```typescript export declare function useContractMetadata(contractAddress: RequiredParam): import("react-query").UseQueryResult<{ - [x: string]: import("@thirdweb-dev/sdk/dist/browser").Json; + [x: string]: import("@thirdweb-dev/sdk").Json; description?: string | undefined; image?: any; external_link?: string | undefined; @@ -25,11 +25,11 @@ export declare function useContractMetadata(contractAddress: RequiredParam<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| contractAddress | RequiredParam<ContractAddress> | the address of the deployed contract | 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<{ \[x: string\]: import("@thirdweb-dev/sdk").Json; description?: string \| undefined; image?: any; external\_link?: string \| undefined; name: string; }, 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..ccfdd57 100644 --- a/docs/react.usecontractpublishmetadata.md +++ b/docs/react.usecontractpublishmetadata.md @@ -19,7 +19,7 @@ export declare function useContractPublishMetadata(contractAddress: RequiredPara | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | [RequiredParam](./react.requiredparam.md)<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| contractAddress | RequiredParam<ContractAddress> | the address of the deployed contract | Returns: diff --git a/docs/react.usecontracttype.md b/docs/react.usecontracttype.md index 8a65447..8c9fcd4 100644 --- a/docs/react.usecontracttype.md +++ b/docs/react.usecontracttype.md @@ -12,18 +12,18 @@ 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): import("react-query").UseQueryResult<"split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | "custom" | undefined, unknown>; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contractAddress | [RequiredParam](./react.requiredparam.md)<[ContractAddress](./react.contractaddress.md)> | the address of the deployed contract | +| contractAddress | RequiredParam<ContractAddress> | the address of the deployed contract | 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<"split" \| "nft-drop" \| "signature-drop" \| "nft-collection" \| "edition-drop" \| "edition" \| "token-drop" \| "token" \| "vote" \| "marketplace" \| "pack" \| "multiwrap" \| "custom" \| undefined, unknown> a response object that includes the contract type of the contract diff --git a/docs/react.usecreateauctionlisting.md b/docs/react.usecreateauctionlisting.md index ea48984..03c675a 100644 --- a/docs/react.usecreateauctionlisting.md +++ b/docs/react.usecreateauctionlisting.md @@ -12,18 +12,18 @@ Use this to create a new Auction Listing on your marketplace contract. Signature: ```typescript -export declare function useCreateAuctionListing(contract: RequiredParam): import("react-query").UseMutationResult, unknown, NewAuctionListing, unknown>; +export declare function useCreateAuctionListing(contract: RequiredParam): import("react-query").UseMutationResult, unknown, NewAuctionListing, unknown>; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a Marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a Marketplace contract | Returns: -import("react-query").UseMutationResult<import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId<never>, unknown, NewAuctionListing, unknown> +import("react-query").UseMutationResult<import("@thirdweb-dev/sdk").TransactionResultWithId<never>, unknown, NewAuctionListing, unknown> a mutation object that can be used to create a new auction listing diff --git a/docs/react.usecreatedirectlisting.md b/docs/react.usecreatedirectlisting.md index 8c9662d..a460aa1 100644 --- a/docs/react.usecreatedirectlisting.md +++ b/docs/react.usecreatedirectlisting.md @@ -12,18 +12,18 @@ Use this to create a new Direct Listing on your marketplace contract. Signature: ```typescript -export declare function useCreateDirectListing(contract: RequiredParam): import("react-query").UseMutationResult, unknown, NewDirectListing, unknown>; +export declare function useCreateDirectListing(contract: RequiredParam): import("react-query").UseMutationResult, unknown, NewDirectListing, unknown>; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a Marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a Marketplace contract | Returns: -import("react-query").UseMutationResult<import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId<never>, unknown, NewDirectListing, unknown> +import("react-query").UseMutationResult<import("@thirdweb-dev/sdk").TransactionResultWithId<never>, unknown, NewDirectListing, unknown> a mutation object that can be used to create a new direct listing 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.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.usegrantrole.md b/docs/react.usegrantrole.md index aeccc52..acebfe4 100644 --- a/docs/react.usegrantrole.md +++ b/docs/react.usegrantrole.md @@ -7,7 +7,7 @@ > 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. > -Use this to grant a [WalletAddress](./react.walletaddress.md) a specific role on a +Use this to grant a a specific role on a Signature: @@ -22,11 +22,11 @@ export declare function useGrantRole(contra | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | +| contract | RequiredParam<TContract> | an instance of a | Returns: -import("react-query").UseMutationResult<void, unknown, { role: RolesForContract<TContract>; address: [WalletAddress](./react.walletaddress.md); }, unknown> +import("react-query").UseMutationResult<void, unknown, { role: RolesForContract<TContract>; address: WalletAddress; }, unknown> a mutation object that can be used to grant a member of a role on the contract diff --git a/docs/react.useisaddressrole.md b/docs/react.useisaddressrole.md index fc139e6..5dfc738 100644 --- a/docs/react.useisaddressrole.md +++ b/docs/react.useisaddressrole.md @@ -7,7 +7,7 @@ > 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. > -Use this to check if a [WalletAddress](./react.walletaddress.md) is a member of a role on a +Use this to check if a is a member of a role on a Signature: @@ -19,9 +19,9 @@ export declare function useIsAddressRole(co | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | +| contract | RequiredParam<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 | +| walletAddress | RequiredParam<WalletAddress> | the address to check | Returns: diff --git a/docs/react.uselisting.md b/docs/react.uselisting.md index 2e7a7e4..7024c3e 100644 --- a/docs/react.uselisting.md +++ b/docs/react.uselisting.md @@ -12,19 +12,19 @@ Use this to get a specific listing from the marketplace. Signature: ```typescript -export declare function useListing(contract: RequiredParam, listingId: RequiredParam): import("react-query").UseQueryResult; +export declare function useListing(contract: RequiredParam, listingId: RequiredParam): import("react-query").UseQueryResult; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a marketplace contract | -| listingId | [RequiredParam](./react.requiredparam.md)<BigNumberish> | the listing id to check | +| contract | RequiredParam<Marketplace> | an instace of a marketplace contract | +| listingId | RequiredParam<BigNumberish> | the listing id to check | Returns: -import("react-query").UseQueryResult<import("@thirdweb-dev/sdk/dist/browser").AuctionListing \| import("@thirdweb-dev/sdk/dist/browser").DirectListing, unknown> +import("react-query").UseQueryResult<import("@thirdweb-dev/sdk").AuctionListing \| import("@thirdweb-dev/sdk").DirectListing, unknown> a response object that includes an array of listings diff --git a/docs/react.uselistings.md b/docs/react.uselistings.md index 68646e8..8b7f8aa 100644 --- a/docs/react.uselistings.md +++ b/docs/react.uselistings.md @@ -12,19 +12,19 @@ Use this to get a list all listings from your marketplace contract. Signature: ```typescript -export declare function useListings(contract: RequiredParam, filter?: MarketplaceFilter): import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk/dist/browser").AuctionListing | import("@thirdweb-dev/sdk/dist/browser").DirectListing)[], unknown>; +export declare function useListings(contract: RequiredParam, filter?: MarketplaceFilter): import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk").AuctionListing | import("@thirdweb-dev/sdk").DirectListing)[], unknown>; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a marketplace contract | | filter | MarketplaceFilter | (Optional) filter to pass to the query for the sake of pagination & filtering | Returns: -import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk/dist/browser").AuctionListing \| import("@thirdweb-dev/sdk/dist/browser").DirectListing)\[\], unknown> +import("react-query").UseQueryResult<(import("@thirdweb-dev/sdk").AuctionListing \| import("@thirdweb-dev/sdk").DirectListing)\[\], unknown> a response object that includes an array of listings 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.usemakebid.md b/docs/react.usemakebid.md index 84d1085..e72397a 100644 --- a/docs/react.usemakebid.md +++ b/docs/react.usemakebid.md @@ -22,11 +22,11 @@ export declare function useMakeBid(contract: RequiredParam): import | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a Marketplace contract | +| contract | RequiredParam<Marketplace> | an instace of a Marketplace contract | Returns: -import("react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [MakeBidParams](./react.makebidparams.md), unknown> +import("react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, MakeBidParams, unknown> a mutation object that can be used to make a bid on an auction listing diff --git a/docs/react.usemetadata.md b/docs/react.usemetadata.md index 3423f1c..326eb5b 100644 --- a/docs/react.usemetadata.md +++ b/docs/react.usemetadata.md @@ -25,7 +25,7 @@ export declare function useMetadata(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: diff --git a/docs/react.usemetamask.md b/docs/react.usemetamask.md index 0f92563..bc7dadb 100644 --- a/docs/react.usemetamask.md +++ b/docs/react.usemetamask.md @@ -4,42 +4,17 @@ ## 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; + isConnected: boolean; + 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; isConnected: boolean; isConnecting: boolean; connect: (chainId?: SUPPORTED\_CHAIN\_ID) => Promise<void>; } diff --git a/docs/react.usemintnft.md b/docs/react.usemintnft.md index 361f32c..a61b5d3 100644 --- a/docs/react.usemintnft.md +++ b/docs/react.usemintnft.md @@ -7,7 +7,7 @@ > 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. > -Use this to mint a new NFT on your [NFTContract](./react.nftcontract.md) +Use this to mint a new NFT on your Signature: @@ -19,11 +19,11 @@ export declare function useMintNFT(contract: Requ | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instace of a [NFTContract](./react.nftcontract.md) | +| contract | RequiredParam<TContract> | an instace of a | Returns: -import("react-query").UseMutationResult<[MintNFTReturnType](./react.mintnftreturntype.md)<TContract>, unknown, [MintNFTParams](./react.mintnftparams.md)<TContract>, unknown> +import("react-query").UseMutationResult<MintNFTReturnType<TContract>, unknown, MintNFTParams<TContract>, unknown> a mutation object that can be used to mint a new NFT token to the connected wallet diff --git a/docs/react.useminttoken.md b/docs/react.useminttoken.md index e074f9e..bd2e005 100644 --- a/docs/react.useminttoken.md +++ b/docs/react.useminttoken.md @@ -22,11 +22,11 @@ export declare function useMintToken(contract: RequiredParam): import("re | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instace of a contract that extends the ERC20 spec (token, token drop, custom contract that follows the ERC20 spec) | +| contract | RequiredParam<Erc20> | an instace of a contract that extends the ERC20 spec (token, token drop, custom contract that follows the ERC20 spec) | Returns: -import("react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenMintParams](./react.tokenmintparams.md), unknown> +import("react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, TokenMintParams, unknown> a mutation object that can be used to mint a new NFT token to the connected wallet 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.usenft.md b/docs/react.usenft.md index 0e33b76..1e97628 100644 --- a/docs/react.usenft.md +++ b/docs/react.usenft.md @@ -7,7 +7,7 @@ > 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. > -Use this to get an individual NFT token of your [NFTContract](./react.nftcontract.md). +Use this to get an individual NFT token of your . Signature: @@ -19,12 +19,12 @@ export declare function useNFT(contract: Required | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instace of a [NFTContract](./react.nftcontract.md) | -| tokenId | [RequiredParam](./react.requiredparam.md)<BigNumberish> | the tokenId to look up | +| contract | RequiredParam<TContract> | an instace of a | +| tokenId | RequiredParam<BigNumberish> | the tokenId to look up | Returns: -import("react-query").UseQueryResult<[NFT](./react.nft.md)<TContract>, unknown> +import("react-query").UseQueryResult<NFT<TContract>, unknown> a response object that includes the metadata for the given tokenId diff --git a/docs/react.usenftbalance.md b/docs/react.usenftbalance.md index 3de01a2..afa4b14 100644 --- a/docs/react.usenftbalance.md +++ b/docs/react.usenftbalance.md @@ -7,7 +7,7 @@ > 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. > -Use this to get a the total balance of a [NFTContract](./react.nftcontract.md) and wallet address. +Use this to get a the total balance of a and wallet address. Signature: @@ -19,7 +19,7 @@ export declare function useNFTBalance(...[contrac | Parameter | Type | Description | | --- | --- | --- | -| \[contract, ownerWalletAddress, tokenId\] | [useNFTBalanceParams](./react.usenftbalanceparams.md)<TContract> | | +| \[contract, ownerWalletAddress, tokenId\] | useNFTBalanceParams<TContract> | | Returns: diff --git a/docs/react.usenftbalanceparams.md b/docs/react.usenftbalanceparams.md deleted file mode 100644 index c0b4c87..0000000 --- a/docs/react.usenftbalanceparams.md +++ /dev/null @@ -1,25 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useNFTBalanceParams](./react.usenftbalanceparams.md) - -## useNFTBalanceParams 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 params to pass to `useNftBalance`. - -Signature: - -```typescript -export declare type useNFTBalanceParams = TContract extends Erc1155 ? [ - contract: RequiredParam, - ownerWalletAddress: RequiredParam, - tokenId: RequiredParam -] : [ - contract: RequiredParam, - ownerWalletAddress: RequiredParam -]; -``` -References: [RequiredParam](./react.requiredparam.md), [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.usenfts.md b/docs/react.usenfts.md index c45bf95..ee3efac 100644 --- a/docs/react.usenfts.md +++ b/docs/react.usenfts.md @@ -7,7 +7,7 @@ > 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. > -Use this to get a list of NFT tokens of your [NFTContract](./react.nftcontract.md). +Use this to get a list of NFT tokens of your . Signature: @@ -19,12 +19,12 @@ export declare function useNFTs(contract: Require | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instace of a [NFTContract](./react.nftcontract.md) | +| contract | RequiredParam<TContract> | an instace of a | | queryParams | QueryAllParams | (Optional) query params to pass to the query for the sake of pagination | Returns: -import("react-query").UseQueryResult<[NFT](./react.nft.md)<TContract>\[\], unknown> +import("react-query").UseQueryResult<NFT<TContract>\[\], unknown> a response object that includes an array of NFTs diff --git a/docs/react.useownednfts.md b/docs/react.useownednfts.md index 652b97a..02dc46c 100644 --- a/docs/react.useownednfts.md +++ b/docs/react.useownednfts.md @@ -7,7 +7,7 @@ > 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. > -Use this to get a the owned NFTs for a specific [NFTContract](./react.nftcontract.md) and wallet address. +Use this to get a the owned NFTs for a specific and wallet address. Signature: @@ -19,12 +19,12 @@ export declare function useOwnedNFTs(contract: Re | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instace of a [NFTContract](./react.nftcontract.md) | -| ownerWalletAddress | [RequiredParam](./react.requiredparam.md)<[WalletAddress](./react.walletaddress.md)> | the wallet adress to get owned tokens for | +| contract | RequiredParam<TContract> | an instace of a | +| ownerWalletAddress | RequiredParam<WalletAddress> | the wallet adress to get owned tokens for | Returns: -import("react-query").UseQueryResult<[NFT](./react.nft.md)<TContract>\[\], unknown> +import("react-query").UseQueryResult<NFT<TContract>\[\], unknown> a response object that includes the list of owned tokens diff --git a/docs/react.useplatformfees.md b/docs/react.useplatformfees.md index 3479763..3e8e31d 100644 --- a/docs/react.useplatformfees.md +++ b/docs/react.useplatformfees.md @@ -22,7 +22,7 @@ export declare function usePlatformFees(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: diff --git a/docs/react.useprimarysalerecipient.md b/docs/react.useprimarysalerecipient.md index 6dcaf70..d2046e1 100644 --- a/docs/react.useprimarysalerecipient.md +++ b/docs/react.useprimarysalerecipient.md @@ -17,7 +17,7 @@ export declare function usePrimarySaleRecipient(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: 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.userevokerole.md b/docs/react.userevokerole.md index ecc13b5..0c400bb 100644 --- a/docs/react.userevokerole.md +++ b/docs/react.userevokerole.md @@ -7,7 +7,7 @@ > 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. > -Use this to revoke a [WalletAddress](./react.walletaddress.md) a specific role on a +Use this to revoke a a specific role on a Signature: @@ -22,11 +22,11 @@ export declare function useRevokeRole(contr | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | +| contract | RequiredParam<TContract> | an instance of a | Returns: -import("react-query").UseMutationResult<void, unknown, { role: RolesForContract<TContract>; address: [WalletAddress](./react.walletaddress.md); }, unknown> +import("react-query").UseMutationResult<void, unknown, { role: RolesForContract<TContract>; address: WalletAddress; }, unknown> a mutation object that can be used to revoke a role from a member on the contract diff --git a/docs/react.userolemembers.md b/docs/react.userolemembers.md index 517bb0d..10ed04b 100644 --- a/docs/react.userolemembers.md +++ b/docs/react.userolemembers.md @@ -19,7 +19,7 @@ export declare function useRoleMembers(cont | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a | +| contract | RequiredParam<TContract> | an instance of a | | role | RolesForContract<TContract> | the role to get the members of, see | Returns: diff --git a/docs/react.useroyaltysettings.md b/docs/react.useroyaltysettings.md index 4b8039a..bfe4a34 100644 --- a/docs/react.useroyaltysettings.md +++ b/docs/react.useroyaltysettings.md @@ -22,7 +22,7 @@ export declare function useRoyaltySettings(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: 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.usesetallrolemembers.md b/docs/react.usesetallrolemembers.md index a0fc771..a565b9d 100644 --- a/docs/react.usesetallrolemembers.md +++ b/docs/react.usesetallrolemembers.md @@ -19,7 +19,7 @@ export declare function useSetAllRoleMembers<TContract> | an instance of a | +| contract | RequiredParam<TContract> | an instance of a | 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.usetokenbalance.md b/docs/react.usetokenbalance.md index 16316d4..0940075 100644 --- a/docs/react.usetokenbalance.md +++ b/docs/react.usetokenbalance.md @@ -25,8 +25,8 @@ export declare function useTokenBalance(contract: RequiredParam, walletAd | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instace of a Token contract. | -| walletAddress | [RequiredParam](./react.requiredparam.md)<[WalletAddress](./react.walletaddress.md)> | | +| contract | RequiredParam<Erc20> | an instace of a Token contract. | +| walletAddress | RequiredParam<WalletAddress> | | Returns: diff --git a/docs/react.usetokensupply.md b/docs/react.usetokensupply.md index 95ee806..8db8c40 100644 --- a/docs/react.usetokensupply.md +++ b/docs/react.usetokensupply.md @@ -25,7 +25,7 @@ export declare function useTokenSupply(contract: RequiredParam): import(" | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instace of a Token contract. | +| contract | RequiredParam<Erc20> | an instace of a Token contract. | Returns: diff --git a/docs/react.usetotalcirculatingsupply.md b/docs/react.usetotalcirculatingsupply.md index bfd41be..cb8df06 100644 --- a/docs/react.usetotalcirculatingsupply.md +++ b/docs/react.usetotalcirculatingsupply.md @@ -7,7 +7,7 @@ > 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. > -Use this to get a the total (minted) supply of your [NFTContract](./react.nftcontract.md). +Use this to get a the total (minted) supply of your . Signature: @@ -19,7 +19,7 @@ export declare function useTotalCirculatingSupply | Parameter | Type | Description | | --- | --- | --- | -| \[contract, tokenId\] | [useTotalCirculatingSupplyParams](./react.usetotalcirculatingsupplyparams.md)<TContract> | | +| \[contract, tokenId\] | useTotalCirculatingSupplyParams<TContract> | | Returns: diff --git a/docs/react.usetotalcirculatingsupplyparams.md b/docs/react.usetotalcirculatingsupplyparams.md deleted file mode 100644 index 8e6bc98..0000000 --- a/docs/react.usetotalcirculatingsupplyparams.md +++ /dev/null @@ -1,18 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useTotalCirculatingSupplyParams](./react.usetotalcirculatingsupplyparams.md) - -## useTotalCirculatingSupplyParams 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 params to pass to `useTotalCirculatingSupply`. - -Signature: - -```typescript -export declare type useTotalCirculatingSupplyParams = TContract extends Erc1155 ? [contract: RequiredParam, tokenId: BigNumberish] : [contract: RequiredParam]; -``` -References: [RequiredParam](./react.requiredparam.md) - diff --git a/docs/react.usetotalcount.md b/docs/react.usetotalcount.md index bbb85df..cbb798a 100644 --- a/docs/react.usetotalcount.md +++ b/docs/react.usetotalcount.md @@ -7,7 +7,7 @@ > 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. > -Use this to get a the number of tokens in your [NFTContract](./react.nftcontract.md). +Use this to get a the number of tokens in your . Signature: @@ -19,7 +19,7 @@ export declare function useTotalCount(contract: RequiredParam): imp | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<[NFTContract](./react.nftcontract.md)> | an instace of a [NFTContract](./react.nftcontract.md) | +| contract | RequiredParam<NFTContract> | an instace of a | Returns: diff --git a/docs/react.useunclaimednfts.md b/docs/react.useunclaimednfts.md index ca0e3cc..b7fe5e8 100644 --- a/docs/react.useunclaimednfts.md +++ b/docs/react.useunclaimednfts.md @@ -19,8 +19,8 @@ export declare function useUnclaimedNFTs(contract: RequiredParam, query image?: string | null | undefined; external_url?: string | null | undefined; animation_url?: string | null | undefined; - uri: string; id: import("ethers").BigNumber; + uri: string; }[], unknown>; ``` @@ -28,12 +28,12 @@ export declare function useUnclaimedNFTs(contract: RequiredParam, query | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<NFTDrop> | an instace of a contract that extends the Erc721 spec (nft drop, custom contract that follows the Erc721 & drop spec) | +| contract | RequiredParam<NFTDrop> | an instace 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 | 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<{ \[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; id: import("ethers").BigNumber; uri: string; }\[\], 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 5852ee8..d5fedce 100644 --- a/docs/react.useunclaimednftsupply.md +++ b/docs/react.useunclaimednftsupply.md @@ -14,7 +14,7 @@ export declare function useUnclaimedNFTSupply(contract: RequiredParam): | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<NFTDrop> | an instace of a | +| contract | RequiredParam<NFTDrop> | an instace of a | Returns: diff --git a/docs/react.useupdatemetadata.md b/docs/react.useupdatemetadata.md index a5d7810..364d081 100644 --- a/docs/react.useupdatemetadata.md +++ b/docs/react.useupdatemetadata.md @@ -28,7 +28,7 @@ export declare function useUpdateMetadata(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: diff --git a/docs/react.useupdateplatformfees.md b/docs/react.useupdateplatformfees.md index 98d8c70..7fc7583 100644 --- a/docs/react.useupdateplatformfees.md +++ b/docs/react.useupdateplatformfees.md @@ -25,7 +25,7 @@ export declare function useUpdatePlatformFees(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: diff --git a/docs/react.useupdateprimarysalerecipient.md b/docs/react.useupdateprimarysalerecipient.md index cfea991..ec28a87 100644 --- a/docs/react.useupdateprimarysalerecipient.md +++ b/docs/react.useupdateprimarysalerecipient.md @@ -22,7 +22,7 @@ export declare function useUpdatePrimarySaleRecipient(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: diff --git a/docs/react.useupdateroyaltysettings.md b/docs/react.useupdateroyaltysettings.md index be087e1..115d3a2 100644 --- a/docs/react.useupdateroyaltysettings.md +++ b/docs/react.useupdateroyaltysettings.md @@ -28,7 +28,7 @@ export declare function useUpdateRoyaltySettings(contract: RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | +| contract | RequiredParam<SmartContract \| ValidContractInstance> | an instance of a | Returns: diff --git a/docs/react.usewalletconnect.md b/docs/react.usewalletconnect.md index a37a3e3..9389d60 100644 --- a/docs/react.usewalletconnect.md +++ b/docs/react.usewalletconnect.md @@ -4,40 +4,17 @@ ## 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; + isConnected: boolean; + 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; isConnected: boolean; isConnecting: boolean; connect: (chainId?: SUPPORTED\_CHAIN\_ID) => Promise<void>; } diff --git a/docs/react.usewinningbid.md b/docs/react.usewinningbid.md index 0aea429..a7b9bf2 100644 --- a/docs/react.usewinningbid.md +++ b/docs/react.usewinningbid.md @@ -12,19 +12,19 @@ Use this to get a the winning bid for an auction listing from your marketplace c Signature: ```typescript -export declare function useWinningBid(contract: RequiredParam, listingId: RequiredParam): import("react-query").UseQueryResult; +export declare function useWinningBid(contract: RequiredParam, listingId: RequiredParam): import("react-query").UseQueryResult; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| contract | [RequiredParam](./react.requiredparam.md)<Marketplace> | an instace of a marketplace contract | -| listingId | [RequiredParam](./react.requiredparam.md)<BigNumberish> | the listing id to check | +| contract | RequiredParam<Marketplace> | an instace of a marketplace contract | +| listingId | RequiredParam<BigNumberish> | the listing id to check | Returns: -import("react-query").UseQueryResult<import("@thirdweb-dev/sdk/dist/browser").Offer \| undefined, unknown> +import("react-query").UseQueryResult<import("@thirdweb-dev/sdk").Offer \| undefined, unknown> a response object that includes the that is winning the auction diff --git a/docs/react.walletaddress.md b/docs/react.walletaddress.md deleted file mode 100644 index 28bf2fa..0000000 --- a/docs/react.walletaddress.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [WalletAddress](./react.walletaddress.md) - -## WalletAddress 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. -> - -A wallet address. - -Signature: - -```typescript -export declare type WalletAddress = string; -``` diff --git a/etc/react.api.md b/etc/react.api.md index 95c411e..7aa4f28 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -6,96 +6,71 @@ 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 { AuctionListing } from '@thirdweb-dev/sdk'; import { BigNumber } from 'ethers'; import { BigNumberish } from 'ethers'; import type { BytesLike } from 'ethers'; -import { Chain } from './types'; -import { ChainId } from '@thirdweb-dev/sdk/dist/browser'; -import { ChainOrRpc } from '@thirdweb-dev/sdk/dist/browser'; +import { ChainOrRpc } from '@thirdweb-dev/sdk'; import { ClaimEligibility } from '@thirdweb-dev/sdk/dist/browser'; -import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; -import { Connector } from './connectors'; -import { ConnectorData } from './connectors'; import { ContractForContractType } from '@thirdweb-dev/sdk/dist/browser'; import { ContractType } from '@thirdweb-dev/sdk/dist/browser'; -import { defaultChains } from './constants'; -import { defaultL2Chains } from './constants'; -import { DirectListing } from '@thirdweb-dev/sdk/dist/browser'; +import { createClient } from 'wagmi'; +import { DirectListing } from '@thirdweb-dev/sdk'; import { 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 { Erc20 } from '@thirdweb-dev/sdk'; import type { Erc721 } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc721Mintable } 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 { IStorage } from '@thirdweb-dev/sdk'; 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 { Json as Json_2 } from '@thirdweb-dev/sdk'; +import { ListingType } from '@thirdweb-dev/sdk'; import { Marketplace } from '@thirdweb-dev/sdk/dist/browser'; -import type { MarketplaceFilter } from '@thirdweb-dev/sdk/dist/browser'; +import { Marketplace as Marketplace_2 } from '@thirdweb-dev/sdk'; +import { MarketplaceFilter } from '@thirdweb-dev/sdk'; 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 type { Multiwrap as Multiwrap_2 } from '@thirdweb-dev/sdk'; +import { NewAuctionListing } from '@thirdweb-dev/sdk'; +import { NewDirectListing } from '@thirdweb-dev/sdk'; import { 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 { Offer } from '@thirdweb-dev/sdk'; 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 { QueryAllParams as QueryAllParams_2 } from '@thirdweb-dev/sdk'; import { QueryClient } from 'react-query'; import { QueryObserverResult } from 'react-query'; import { default as React_2 } from 'react'; 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 type { Role } from '@thirdweb-dev/sdk'; +import { SDKOptions } from '@thirdweb-dev/sdk'; import { 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 type { SmartContract } from '@thirdweb-dev/sdk/dist/browser'; +import { SmartContract as SmartContract_2 } from '@thirdweb-dev/sdk'; 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 type { Split as Split_2 } from '@thirdweb-dev/sdk'; +import { SUPPORTED_CHAIN_ID } from '@thirdweb-dev/sdk'; +import { ThirdwebSDK } from '@thirdweb-dev/sdk'; import { Token } from '@thirdweb-dev/sdk/dist/browser'; import { TokenDrop } from '@thirdweb-dev/sdk/dist/browser'; +import type { TokenDrop as TokenDrop_2 } from '@thirdweb-dev/sdk'; import { TransactionReceipt } from '@ethersproject/abstract-provider'; -import { TransactionResultWithId } from '@thirdweb-dev/sdk/dist/browser'; -import { useAccount } from './hooks'; +import { TransactionResultWithId } from '@thirdweb-dev/sdk'; import { UseMutationResult } from 'react-query'; -import { useProvider } from './hooks'; import { UseQueryResult } from 'react-query'; import type { ValidContractInstance } from '@thirdweb-dev/sdk/dist/browser'; +import type { ValidContractInstance as ValidContractInstance_2 } from '@thirdweb-dev/sdk'; import { Vote } from '@thirdweb-dev/sdk/dist/browser'; -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'; - -// @public (undocumented) -export type BuyNowParams = TListingType extends ListingType.Direct ? { - id: BigNumberish; - type: ListingType.Direct; - buyAmount: BigNumberish; - buyForWallet?: WalletAddress; -} : { - id: BigNumberish; - 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; +import type { Vote as Vote_2 } from '@thirdweb-dev/sdk'; // @beta export type ClaimIneligibilityParameters = { @@ -103,203 +78,49 @@ export type ClaimIneligibilityParameters = { quantity: string | number; }; -// @beta -export type ClaimNFTParams = TContract extends Erc1155 ? { - to: WalletAddress; - tokenId: BigNumberish; - quantity: BigNumberish; - proofs?: BytesLike[]; -} : { - to: WalletAddress; - quantity: BigNumberish; - proofs?: BytesLike[]; -}; - -// @beta -export type ClaimNFTReturnType = TContract extends Erc721 ? Awaited> : TContract extends Erc1155 ? Awaited> : never; - -// @public (undocumented) -export type ClaimTokenParams = { - to: WalletAddress; - amount: Amount; - proofs?: BytesLike[]; -}; - -// @beta -export type ContractAddress = string; - // Warning: (ae-internal-missing-underscore) The name "ContractWithRoles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export type ContractWithRoles = Exclude | SmartContract; +export type ContractWithRoles = Exclude | SmartContract_2; -// @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 +// Warning: (ae-internal-missing-underscore) The name "RolesForContract" 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 } +export type RolesForContract = TContract extends SmartContract_2 ? Role | (string & {}) : NonNullable["roles"][number]; -// Warning: (ae-internal-missing-underscore) The name "MagicConnectorType" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-forgotten-export) The symbol "ThirdweProviderProps" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // -// @internal (undocumented) -export type MagicConnectorType = "magic" | { - name: "magic"; - options: Omit; -}; - // @public (undocumented) -export type MakeBidParams = { - listingId: BigNumberish; - bid: Price; -}; - -// @public -export const MediaRenderer: React_2.ForwardRefExoticComponent>; - -// @public -export interface MediaRendererProps extends SharedMediaProps { - alt?: string; - poster?: string | null; - src?: string | null; -} +export const ThirdwebProvider: React_2.FC>; // @public (undocumented) -export interface MediaType { - // (undocumented) - mimeType?: string; - // (undocumented) - url?: string; -} - -// @beta -export type MintNFTParams = TContract extends Erc1155 ? { - metadata: NFTMetadataOrUri; - supply: BigNumberish; - to: WalletAddress; -} : { - metadata: NFTMetadataOrUri; - to: WalletAddress; -}; - -// @beta -export type MintNFTReturnType = TContract extends Erc721 ? Awaited> : TContract extends Erc1155 ? Awaited> : never; - -// @beta -export type NFT = { - metadata: NFTMetadata; - owner: string; - type: TContract extends Erc721 ? "ERC721" : "ERC1155"; - supply: TContract extends Erc721 ? 1 : number; - [key: string]: unknown; -}; - -// @beta -export type NFTContract = Erc721 | Erc1155; - -// @beta -export type RequiredParam = T | undefined; - -// Warning: (ae-internal-missing-underscore) The name "RolesForContract" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export type RolesForContract = TContract extends SmartContract ? Role | (string & {}) : NonNullable["roles"][number]; +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-forgotten-export) The symbol "RequiredParam" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts + // // (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 -export type TokenMintParams = { - to: WalletAddress; - 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< { @@ -307,11 +128,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; @@ -326,10 +147,7 @@ displayValue: string; }, unknown>; // @beta -export function useActiveListings(contract: RequiredParam, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>; - -// @public -export function useAddress(): string | undefined; +export function useActiveListings(contract: RequiredParam, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>; // Warning: (ae-incompatible-release-tags) The symbol "useAllRoleMembers" is marked as @beta, but its signature references "ContractWithRoles" which is marked as @internal // Warning: (ae-incompatible-release-tags) The symbol "useAllRoleMembers" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal @@ -338,19 +156,10 @@ export function useAddress(): string | undefined; export function useAllRoleMembers(contract: RequiredParam): UseQueryResult, string[]>>, unknown>; // @beta -export function useAuctionWinner(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; +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; +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 // @@ -358,7 +167,7 @@ export function useBidBuffer(contract: RequiredParam): UseQueryResu export function useBuiltinContract(contractType?: TContractType, contractAddress?: string): ContractForContractType | undefined; // @beta -export function useBuyNow(contract: RequiredParam): UseMutationResult): UseMutationResult Promise; }, "data">, unknown, { @@ -371,20 +180,17 @@ id: BigNumberish; type: ListingType.Auction; }, unknown>; -// @public -export function useChainId(): number | undefined; - // @beta export function useClaimConditions(...[contract, tokenId]: ActiveClaimConditionParams): UseQueryResult< { 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; @@ -398,54 +204,47 @@ displayValue: string; }; }[], unknown>; +// Warning: (ae-forgotten-export) The symbol "DropContract" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// Warning: (ae-forgotten-export) The symbol "NFT" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta export function useClaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): 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 -// // @public (undocumented) export function useClaimedNFTSupply(contract: RequiredParam): 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; +// Warning: (ae-forgotten-export) The symbol "ClaimNFTReturnType" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// Warning: (ae-forgotten-export) The symbol "ClaimNFTParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta export function useClaimNFT(contract: RequiredParam): UseMutationResult, unknown, ClaimNFTParams, unknown>; +// Warning: (ae-forgotten-export) The symbol "ClaimTokenParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta -export function useClaimToken(contract: RequiredParam): UseMutationResult(contract: RequiredParam): UseMutationResult Promise; }, "data">, unknown, ClaimTokenParams, unknown>; -// @public -export function useCoinbaseWallet(): () => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; +// @public (undocumented) +export function useCoinbaseWallet(): { + error: Error | null; + isConnected: boolean; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; -// Warning: (ae-internal-missing-underscore) The name "useConnect" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-forgotten-export) The symbol "ContractAddress" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // -// @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; -}>]; - // @beta export function useContract(contractAddress: RequiredParam): { - contract: null; + contract: undefined; data: undefined; error: unknown; isError: true; @@ -476,7 +275,7 @@ export function useContract(contractAddress: RequiredParam): { remove: () => void; fetchStatus: FetchStatus; } | { - contract: null; + contract: undefined; data: undefined; error: null; isError: false; @@ -507,7 +306,7 @@ export function useContract(contractAddress: RequiredParam): { remove: () => void; fetchStatus: FetchStatus; } | { - contract: SmartContract | null; + contract: SmartContract_2 | undefined; data: { contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; publishMetadata: null; @@ -544,7 +343,7 @@ export function useContract(contractAddress: RequiredParam): { remove: () => void; fetchStatus: FetchStatus; } | { - contract: SmartContract | null; + contract: SmartContract_2 | undefined; data: { contractType: "split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | undefined; publishMetadata: null; @@ -586,7 +385,7 @@ export function useContract(contractAddress: RequiredParam): { // // @internal (undocumented) export function useContractAbi(contractAddress: RequiredParam): { - abi: null; + abi: undefined; data: undefined; error: unknown; isError: true; @@ -617,7 +416,7 @@ export function useContractAbi(contractAddress: RequiredParam): remove: () => void; fetchStatus: FetchStatus; } | { - abi: null; + abi: undefined; data: undefined; error: null; isError: false; @@ -647,6 +446,80 @@ export function useContractAbi(contractAddress: RequiredParam): } | undefined, unknown>>; remove: () => void; fetchStatus: FetchStatus; +} | { + abi: undefined; + 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: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + remove: () => void; + fetchStatus: FetchStatus; +} | { + abi: undefined; + 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: (options?: (RefetchOptions & RefetchQueryFilters) | undefined) => Promise>; + remove: () => void; + fetchStatus: FetchStatus; } | { abi: { [x: string]: any; @@ -778,11 +651,11 @@ export function useContractAbi(contractAddress: RequiredParam): // Warning: (ae-internal-missing-underscore) The name "useContractFunctions" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export function useContractFunctions(contractAddress: RequiredParam): UseQueryResult; +export function useContractFunctions(contractAddress: RequiredParam): UseQueryResult; // @beta export function useContractMetadata(contractAddress: RequiredParam): UseQueryResult< { -[x: string]: Json; +[x: string]: Json_2; description?: string | undefined; image?: any; external_link?: string | undefined; @@ -793,26 +666,13 @@ name: string; export function useContractPublishMetadata(contractAddress: RequiredParam): 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): UseQueryResult<"split" | "nft-drop" | "signature-drop" | "nft-collection" | "edition-drop" | "edition" | "token-drop" | "token" | "vote" | "marketplace" | "pack" | "multiwrap" | "custom" | undefined, unknown>; // @beta -export function useCreateAuctionListing(contract: RequiredParam): UseMutationResult, unknown, NewAuctionListing, unknown>; +export function useCreateAuctionListing(contract: RequiredParam): UseMutationResult, unknown, NewAuctionListing, unknown>; // @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 -// -// @internal (undocumented) -export function useDesiredChainId(): number; - -// @public -export function useDisconnect(options?: { - reconnectAfterGnosis?: boolean; -}): () => Promise | undefined; - error?: Error | undefined; -}>; +export function useCreateDirectListing(contract: RequiredParam): UseMutationResult, unknown, NewDirectListing, unknown>; // @public export function useEdition(contractAddress?: string): Edition | undefined; @@ -820,12 +680,6 @@ export function useEdition(contractAddress?: string): Edition | undefined; // @public export function useEditionDrop(contractAddress?: string): EditionDrop | undefined; -// @public -export function useGnosis(): (config: GnosisConnectorArguments) => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -}>; - // Warning: (ae-incompatible-release-tags) The symbol "useGrantRole" is marked as @beta, but its signature references "ContractWithRoles" which is marked as @internal // // @beta @@ -841,19 +695,15 @@ address: WalletAddress; export function useIsAddressRole(contract: RequiredParam, role: RolesForContract, walletAddress: RequiredParam): boolean; // @beta -export function useListing(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; +export function useListing(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; // @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; -}>; +export function useListings(contract: RequiredParam, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>; +// Warning: (ae-forgotten-export) The symbol "MakeBidParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta -export function useMakeBid(contract: RequiredParam): UseMutationResult): UseMutationResult Promise; }, "data">, unknown, MakeBidParams, unknown>; @@ -870,17 +720,23 @@ external_link?: string | undefined; name: string; }, unknown>; -// @public -export function useMetamask(): () => Promise<{ - data?: ConnectorData | undefined; - error?: Error | undefined; -} | { - error: Error; -}>; +// @public (undocumented) +export function useMetamask(): { + error: Error | null; + isConnected: boolean; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; +}; +// Warning: (ae-forgotten-export) The symbol "NFTContract" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// Warning: (ae-forgotten-export) The symbol "MintNFTReturnType" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// Warning: (ae-forgotten-export) The symbol "MintNFTParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta export function useMintNFT(contract: RequiredParam): UseMutationResult, unknown, MintNFTParams, unknown>; +// Warning: (ae-forgotten-export) The symbol "TokenMintParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta export function useMintToken(contract: RequiredParam): UseMutationResult Promise; // @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]; - // @public export function useNetworkMismatch(): boolean; // @beta export function useNFT(contract: RequiredParam, tokenId: RequiredParam): UseQueryResult, unknown>; +// Warning: (ae-forgotten-export) The symbol "useNFTBalanceParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta export function useNFTBalance(...[contract, ownerWalletAddress, tokenId]: useNFTBalanceParams): UseQueryResult; -// @beta -export type useNFTBalanceParams = TContract extends Erc1155 ? [ -contract: RequiredParam, -ownerWalletAddress: RequiredParam, -tokenId: RequiredParam -] : [ -contract: RequiredParam, -ownerWalletAddress: RequiredParam -]; - // @public export function useNFTCollection(contractAddress?: string): NFTCollection | undefined; @@ -947,7 +764,7 @@ export function useNFTCollection(contractAddress?: string): NFTCollection | unde export function useNFTDrop(contractAddress?: string): NFTDrop | undefined; // @beta -export function useNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult[], unknown>; +export function useNFTs(contract: RequiredParam, queryParams?: QueryAllParams_2): UseQueryResult[], unknown>; // @beta export function useOwnedNFTs(contract: RequiredParam, ownerWalletAddress: RequiredParam): UseQueryResult[], unknown>; @@ -964,19 +781,6 @@ platform_fee_recipient: string; // @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; -}; - // Warning: (ae-incompatible-release-tags) The symbol "useRevokeRole" is marked as @beta, but its signature references "ContractWithRoles" which is marked as @internal // // @beta @@ -997,9 +801,7 @@ seller_fee_basis_points: number; fee_recipient: string; }, unknown>; -// 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 @@ -1011,14 +813,14 @@ export function useSetAllRoleMembers(contra // @public export function useSignatureDrop(contractAddress?: string): SignatureDrop | undefined; -// Warning: (ae-internal-missing-underscore) The name "useSigner" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function useSigner(): Signer | undefined; - // @public export function useSplit(contractAddress?: string): 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; + // @public export function useToken(contractAddress?: string): Token | undefined; @@ -1045,12 +847,11 @@ decimals: number; displayValue: string; }, unknown>; +// Warning: (ae-forgotten-export) The symbol "useTotalCirculatingSupplyParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// // @beta export function useTotalCirculatingSupply(...[contract, tokenId]: useTotalCirculatingSupplyParams): UseQueryResult; -// @beta -export type useTotalCirculatingSupplyParams = TContract extends Erc1155 ? [contract: RequiredParam, tokenId: BigNumberish] : [contract: RequiredParam]; - // @beta export function useTotalCount(contract: RequiredParam): UseQueryResult; @@ -1062,12 +863,10 @@ description?: string | null | undefined; image?: string | null | undefined; external_url?: string | null | undefined; animation_url?: string | null | undefined; -uri: string; id: BigNumber; +uri: string; }[], unknown>; -// Warning: (ae-incompatible-release-tags) The symbol "useUnclaimedNFTSupply" is marked as @public, but its signature references "RequiredParam" which is marked as @beta -// // @public (undocumented) export function useUnclaimedNFTSupply(contract: RequiredParam): UseQueryResult; @@ -1113,56 +912,22 @@ fee_recipient?: string | undefined; // @public export function useVote(contractAddress?: string): 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; -}>; - -// @beta -export function useWinningBid(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; - -// @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"]; +// @public (undocumented) +export function useWalletConnect(): { + error: Error | null; + isConnected: boolean; + isConnecting: boolean; + connect: (chainId?: SUPPORTED_CHAIN_ID) => Promise; }; -// 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"]; -}; +// @beta +export function useWinningBid(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; // 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/claim-conditions.d.ts:102:5 - (ae-forgotten-export) The symbol "WalletAddress" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts +// 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 // (No @packageDocumentation comment for this package) diff --git a/package.json b/package.json index e4e922e..7a04dd9 100644 --- a/package.json +++ b/package.json @@ -7,34 +7,62 @@ }, "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": "./connectors/gnosis/dist/thirdweb-dev-react-wagmi-connectors-gnosis.esm.js", + "default": "./connectors/gnosis/dist/thirdweb-dev-react-wagmi-connectors-gnosis.cjs.js" + }, + "./connectors/magic": { + "module": "./connectors/magic/dist/thirdweb-dev-react-wagmi-connectors-magic.esm.js", + "default": "./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": "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.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", "@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.14", + "@preconstruct/cli": "^2.1.5", + "@thirdweb-dev/sdk": "file:.yalc/@thirdweb-dev/sdk", "@trivago/prettier-plugin-sort-imports": "^3.2.0", "@types/mime": "^2.0.3", "@types/react": "^18.0.5", @@ -45,29 +73,30 @@ "eslint-plugin-import": "^2.24.2", "eslint-plugin-inclusive-language": "^2.1.1", "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.30.0", + "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-tsdoc": "^0.2.14", "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.4.12" }, "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.3.8", "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.7", "ethers": ">=5.5.1", - "react": ">=17.0.0" + "react": ">=17.0.0", + "wagmi": "^0.4.12" + }, + "peerDependenciesMeta": { + "wagmi": { + "optional": true + } }, "resolutions": { "ansi-regex": "^6.0.1", diff --git a/src/Provider.tsx b/src/Provider.tsx deleted file mode 100644 index 894b628..0000000 --- a/src/Provider.tsx +++ /dev/null @@ -1,544 +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 - ? chainRpc[curr.id as keyof ChainRpc] || - curr.rpcUrls[0] - : 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 ( -
-