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

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