Skip to main content

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 whiteLabelTypeOptions
themeobjectCan be set to dark or light with default to light .
theme -> isDarkbooleanSet to true for dark mode (default false)
theme -> colorsobjectTheme 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.
logoDarkstringThe URL of the dark mode logo.
logoLightstringThe URL of the light mode logo.
topupHidebooleanHide the topup button.
featuredBillboardHidebooleanHide the featured billboard.
disclaimerHidebooleanHide the disclaimer.
defaultLanguagestringThe default language of the wallet. The supported languages are: en, de, ja, ko, zh, es.

General Config

theme

  • isDark: Set to true for dark mode (default false)
  • colors: 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

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: german
  • ja: japanese
  • ko: korean
  • zh: mandarin
  • es: spanish

Screenshot for Reference

Confirm Popup
confirm pop
confirm pop dark
Widget
widget
widget dark

Torus Wallet

Hide Topup topupHide

Shows/hides Topup page in Torus Wallet

Billboard featuredBillboardHide

Shows/hides Billboard in Torus Wallet

Billboard
Billboard dark

Login Modal

Disclaimer disclaimerHide

Shows/hides disclaimers on login page. Only works if special logins are hidden.

Disclaimer hide
Disclaimer hide dark

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);