Torus Wallets
Using the TorusWalletAdapter
& SolanaWalletAdapter
settings, the user experience of Torus Wallets can be customized to match your branding.
Arguments
new TorusWalletAdapter({initParams: {whiteLabel: {...}}})
new SolanaWalletAdapter({initParams: {whiteLabel: {...}}})
Parameter for whiteLabel | Type | Options |
---|---|---|
theme | object | Can be set to dark or light with default to light . |
theme -> isDark | boolean | Set to true for dark mode (default false ) |
theme -> colors | object | Theme is a record of colors which can be configured. As of, now only torusBrand1 color can be set and this refers to the primary color. |
logoDark | string | The URL of the dark mode logo. |
logoLight | string | The URL of the light mode logo. |
topupHide | boolean | Hide the topup button. |
featuredBillboardHide | boolean | Hide the featured billboard. |
disclaimerHide | boolean | Hide the disclaimer. |
defaultLanguage | string | The default language of the wallet. The supported languages are: en , de , ja , ko , zh , es . |
General Config
theme
isDark
: Set totrue
for dark mode (defaultfalse
)colors
: Theme is a record of colors which can be configured. As of, now onlytorusBrand1
color can be set and this refers to the primary color.
logoDark
App logo url to use in dark mode
logoLight
App logo url to use in light mode
defaultLanguage
Define preferred language. Possible values are:
en
: english (default)de
: germanja
: japaneseko
: koreanzh
: mandarines
: spanish
Screenshot for Reference
Confirm Popup


Widget


Torus Wallet
Hide Topup topupHide
Shows/hides Topup page in Torus Wallet
Billboard featuredBillboardHide
Shows/hides Billboard in Torus Wallet


Login Modal
Disclaimer disclaimerHide
Shows/hides disclaimers on login page. Only works if special logins are hidden.


Example
TorusWalletAdapter
import { Web3Auth } from "@web3auth/modal";
import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";
const web3auth = new Web3Auth({
chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
web3AuthNetwork: "sapphire_mainnet",
});
const torusWalletAdapter = new TorusWalletAdapter({
initParams: {
// type WhiteLabelParams
whiteLabel: {
theme: {
isDark: true,
colors: { torusBrand1: "#FFA500" },
},
logoDark: "https://images.web3auth.io/web3auth-logo-w.svg",
logoLight: "https://images.web3auth.io/web3auth-logo-w-light.svg",
topupHide: true,
featuredBillboardHide: true,
disclaimerHide: true,
defaultLanguage: "en",
},
},
});
web3auth.configureAdapter(torusWalletAdapter);
SolanaWalletAdapter
import { Web3Auth } from "@web3auth/modal";
import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";
const web3auth = new Web3Auth({
chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
web3AuthNetwork: "sapphire_mainnet",
});
const solanaWalletAdapter = new SolanaWalletAdapter({
initParams: {
// type WhiteLabelParams
whiteLabel: {
theme: {
isDark: true,
colors: { torusBrand1: "#FFA500" },
},
logoDark: "https://images.web3auth.io/web3auth-logo-w.svg",
logoLight: "https://images.web3auth.io/web3auth-logo-w-light.svg",
topupHide: true,
featuredBillboardHide: true,
disclaimerHide: true,
defaultLanguage: "en",
},
},
});
web3auth.configureAdapter(solanaWalletAdapter);