import { ThirdwebProviderCoreProps, WalletConfig } from "@thirdweb-dev/react-core"; import { ThemeObjectOrType } from "../../design-system"; import { PropsWithChildren } from "react"; import type { Chain, defaultChains } from "@thirdweb-dev/chains"; import { Signer } from "ethers"; import { ThirdwebLocale } from "../locales/types"; export interface ThirdwebProviderProps extends Omit, "createWalletStorage" | "supportedWallets" | "theme" | "signerWallet"> { /** * Wallets supported by the dApp * * If no wallets are provided, the default wallets will be used which is equivalent to the following: * * ```tsx * [ * metamaskWallet(), * coinbaseWallet(), * walletConnect(), * trustWallet(), * rainbowWallet(), * zerionWallet(), * phantomWallet(), * ] * ``` * * ```jsx * import { metamaskWallet, coinbaseWallet, walletConnect } from "@thirdweb-dev/react"; * * * ``` */ supportedWallets?: WalletConfig[]; /** * Set the theme for all thirdweb components * * By default it is set to "dark". * * theme can be set to either "dark" or "light" or a custom theme object. * * You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it. * * @example * ```ts * import { lightTheme } from "@thirdweb-dev/react"; * const customTheme = lightTheme({ * colors: { * modalBg: 'red' * } * }) * ``` */ theme?: ThemeObjectOrType; /** * Use a signer instead of `supportedWallets` if you want to provide your own wallet connection logic. */ signer?: Signer; /** * locale object contains text used for all thirdweb components * * it allows you to change the language used in UI components or override the texts used in the UI * * React SDK comes out of the box with Spanish and Japanese locale functions, but you can add support for any language you want just by passing an object with the required strings * * @example * * ## Using Built-in Locales * * ### Using the Spanish locale * ```tsx * import { ThirdwebProvider, es } from "@thirdweb-dev/react"; * * const spanish = es(); * * * ``` * * ### Using the Japanese locale * ```tsx * import { ThirdwebProvider, jp } from "@thirdweb-dev/react"; * * const japanese = jp(); * * * ``` * * ### Using English locale ( default ) * ```tsx * import { ThirdwebProvider, en } from "@thirdweb-dev/react"; * * const english = en(); * * * ``` * * ## Overriding the locale * * ```tsx * import { ThirdwebProvider, en } from "@thirdweb-dev/react"; * * // override some texts * const english = en({ * connectWallet: { * confirmInWallet: "Confirm in your wallet", * }, * wallets: { * metamaskWallet: { * connectionScreen: { * inProgress: "Awaiting Confirmation", * instruction: "Accept connection request in your MetaMask wallet", * }, * }, * }, * }); * * * * ; * * ``` * * ### Custom locale object * * ```tsx * import { ThirdwebProvider } from "@thirdweb-dev/react"; * * * * ; *``` * */ locale?: ThirdwebLocale; } /** * Array of default supported chains by the thirdweb SDK */ export type DefaultChains = typeof defaultChains; /** * 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 [thirdweb SDK](https://docs.thirdweb.com/typescript). * * @example * You can wrap your application with the provider as follows: * * ```jsx title="App.jsx" * import { ThirdwebProvider } from "@thirdweb-dev/react"; * * const App = () => { * return ( * * * * ); * }; * ``` * * @param props - * The props for the component. * * ### activeChain (optional) * The activeChain prop determines which chain you want your app to be operating on. * * There are 1000+ chains available in the `@thirdweb-dev/chains` package. Import the chain you want and pass it to the `activeChain` prop. * * You can override the imported object or pass a custom chain object with required properties. * * ### supportedChains (optional) * An array of chains supported by your app. * There are 1000+ chains available in the `@thirdweb-dev/chains` package. You can import the chain you want and pass it to the `supportedChains` prop in an array. * * If not provided, it will default to the default supported chains supported by the thirdweb SDK. * * ```tsx * import { Ethereum, Polygon } from "@thirdweb-dev/chains"; * * function Example() { * return ( * * * * ) * } * ``` * * ### clientId (optional) * The clientId prop is required to use the thirdweb infrastructure services with the SDK. * * You can get a client ID by creating an API key on [thirdweb dashboard](https://thirdweb.com/dashboard/settings/api-keys) * * ### supportedWallets (optional) * Wallets supported by the dApp * * If no wallets are provided, the default wallets will be used which is equivalent to the following: * * ```tsx * [ * metamaskWallet(), * coinbaseWallet(), * walletConnect(), * trustWallet(), * rainbowWallet(), * zerionWallet(), * phantomWallet(), * ] * ``` * * ```jsx * import { metamaskWallet, coinbaseWallet, walletConnect } from "@thirdweb-dev/react"; * * * ``` * * ### theme (optional) * Set the theme for all thirdweb components * * By default it is set to "dark". * * theme can be set to either "dark" or "light" or a custom theme object. * * You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it. * * ```ts * import { lightTheme } from "@thirdweb-dev/react"; * const customTheme = lightTheme({ * colors: { * modalBg: 'red' * } * }) * ``` * * ### locale (optional) * locale object contains text used for all thirdweb components * * it allows you to change the language used in UI components or override the texts used in the UI * * React SDK comes out of the box with Spanish and Japanese locale functions, but you can add support for any language you want just by passing an object with the required strings * * #### Using Built-in Locales * * ##### Using the Spanish locale * ```tsx * import { ThirdwebProvider, es } from "@thirdweb-dev/react"; * * const spanish = es(); * * * ``` * * ##### Using the Japanese locale * ```tsx * import { ThirdwebProvider, jp } from "@thirdweb-dev/react"; * * const japanese = jp(); * * * ``` * * ##### Using English locale ( default ) * ```tsx * import { ThirdwebProvider, en } from "@thirdweb-dev/react"; * * const english = en(); * * * ``` * * ##### Overriding the locale * * ```tsx * import { ThirdwebProvider, en } from "@thirdweb-dev/react"; * * // override some texts * const english = en({ * connectWallet: { * confirmInWallet: "Confirm in your wallet", * }, * wallets: { * metamaskWallet: { * connectionScreen: { * inProgress: "Awaiting Confirmation", * instruction: "Accept connection request in your MetaMask wallet", * }, * }, * }, * }); * * * * ; * * ``` * * #### Custom locale object * * ```tsx * import { ThirdwebProvider } from "@thirdweb-dev/react"; * * * * ; * ``` * * ### dAppMeta (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`. * * ### autoConnect (optional) * When the user has connected their wallet to your site, this flag determines whether or not you want to automatically connect to the last connected wallet when user visits your site again in the future. * Defaults to `true`. * * ### sdkOptions (optional) * Override any of the default values for the SDK. Gas settings, gasless transactions, RPC configuration, and more. * ```tsx * import { ThirdwebProvider } from "@thirdweb-dev/react"; * * const sdkOptions = { * readonlySettings: { * rpcUrl: "", // force read calls to go through your own RPC url * chainId: 1, // reduce RPC calls by specifying your chain ID * }, * gasSettings: { * maxPriceInGwei: 123, // Maximum gas price for transactions (default 300 gwei) * speed: "fastest", // the tx speed setting: 'standard'|'fast|'fastest' (default: 'fastest') * }, * gasless: { * // By specifying a gasless configuration - all transactions will get forwarded to enable gasless transactions * openzeppelin: { * relayerUrl: "", // your OZ Defender relayer URL * relayerForwarderAddress: "", // the OZ defender relayer address (defaults to the standard one) * }, * biconomy: { * apiId: "biconomy-api-id", // your Biconomy API Id * apiKey: "biconomy-api-key", // your Biconomy API Key * deadlineSeconds: 123, // your Biconomy timeout preference * }, * }, * infuraApiKey: "", // your Infura API key * alchemyApiKey: "", // your Alchemy API key * }; * * function Example() { * return ( * * * * ); * } * ``` * * ### authConfig (optional) * The configuration object for setting up [Auth](https://portal.thirdweb.com/wallets/auth); allowing users to sign in with their wallet. * It takes an object with the following properties: * - `authUrl` - The backend URL of the authentication endpoints. For example, if your endpoints are at `/api/auth/login`, `/api/auth/logout`, etc. then this should be set to `/api/auth` * - `domain` - The frontend domain used to generate the login payload. This domain should match the domain used on your auth backend. * - `secureStorage` - Secure storage to use when working with JWT tokens. By default auth uses cookies so no need to set this unless you want to specifically use JWT tokens * * ```tsx * import { ThirdwebProvider } from "@thirdweb-dev/react"; * * function MyApp() { * return ( * * * * ); * } * ``` * * ### signer (optional) * Use a signer instead of `supportedWallets` if you want to provide your own wallet connection logic. * * ### storageInterface * Override the default [Storage](/storage) interface used by the SDK. * * Allows you to create an instance of `ThirdwebStorage` with your own customized config, and pass it to the SDK. This requires the `@thirdweb-dev/storage` package to be installed. * * [Learn more about storage](https://portal.thirdweb.com/infrastructure/storage/overview) * * ```jsx * import { ThirdwebProvider } from "@thirdweb-dev/react"; * import { * ThirdwebStorage, * StorageDownloader, * IpfsUploader, * } from "@thirdweb-dev/storage"; * * // Configure a custom ThirdwebStorage instance * const storage = new ThirdwebStorage({ * uploader: new IpfsUploader(), * downloader: new StorageDownloader(), * gatewayUrls: { * "ipfs://": [ * "https://gateway.ipfscdn.io/ipfs/", * "https://cloudflare-ipfs.com/ipfs/", * "https://ipfs.io/ipfs/", * ], * }, * }); * * // Provide the custom storage instance to the SDK * function MyApp() { * return ( * * * * ); * } * ``` * * ### queryClient (optional) * If you are using [React Query](https://react-query.tanstack.com/) and have your own `QueryClient`, * you can pass it as the `queryClient` prop to use this client instead of the SDK's default client. * * ```jsx * import { ThirdwebProvider } from "@thirdweb-dev/react"; * import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; * * function MyApp() { * // Your React Query client (or client from other library such as wagmi) * const queryClient = new QueryClient(); * * return ( * * * * * * ); * } * ``` * */ export declare const ThirdwebProvider: (props: PropsWithChildren>) => import("react/jsx-runtime").JSX.Element; //# sourceMappingURL=thirdweb-provider.d.ts.map