ThirdwebProviderProps
interface ThirdwebProviderProps<TChains extends Array<Chain>> extends Omit< | "createWalletStorage" | "supportedWallets" | "theme" | "signerWallet" > { locale: ThirdwebLocale; signer: Signer; supportedWallets: Array<WalletConfig<any>>; theme: ThemeObjectOrType;}
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
import { ThirdwebProvider, es } from "@thirdweb-dev/react"; const spanish = es(); <ThirdwebProvider locale={spanish}> {" "} <App />{" "}</ThirdwebProvider>;
Using the Japanese locale
import { ThirdwebProvider, jp } from "@thirdweb-dev/react"; const japanese = jp(); <ThirdwebProvider locale={japanese}> {" "} <App />{" "}</ThirdwebProvider>;
Using English locale ( default )
import { ThirdwebProvider, en } from "@thirdweb-dev/react"; const english = en(); <ThirdwebProvider locale={english}> {" "} <App />{" "}</ThirdwebProvider>;
Overriding the locale
import { ThirdwebProvider, en } from "@thirdweb-dev/react"; // override some textsconst english = en({ connectWallet: { confirmInWallet: "Confirm in your wallet", }, wallets: { metamaskWallet: { connectionScreen: { inProgress: "Awaiting Confirmation", instruction: "Accept connection request in your MetaMask wallet", }, }, },}); <ThirdwebProvider locale={english}> <App /></ThirdwebProvider>;
Custom locale object
import { ThirdwebProvider } from "@thirdweb-dev/react"; <ThirdwebProvider locale={{ .... }}> <App /></ThirdwebProvider>;
Use a signer instead of supportedWallets if you want to provide your own wallet connection logic.
type signer = Signer;
Wallets supported by the dApp
If no wallets are provided, the default wallets will be used which is equivalent to the following:
[ metamaskWallet(), coinbaseWallet(), walletConnect(), trustWallet(), rainbowWallet(), zerionWallet(), phantomWallet(),];
import { metamaskWallet, coinbaseWallet, walletConnect,} from "@thirdweb-dev/react"; <ThirdwebProvider supportedWallets={[ metamaskWallet(), coinbaseWallet(), walletConnect(), ]}/>;
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.
type theme = ThemeObjectOrType;
import { lightTheme } from "@thirdweb-dev/react";const customTheme = lightTheme({ colors: { modalBg: "red", },});