Skip to main content
Cover

Whitelabel Torus Wallet for Your Brand

Introduction#

This tutorial will show you how to customize Torus Wallet UI, branding, and translations to fit your brand. The example is written in React but similar configuration can be applied for all-kind web applications.

You can find the source code of this is example on Github.

Install Torus Embed SDK#

Install Torus Embed SDK using either npm or yarn:

npm i --save @toruslabs/torus-embed

Initialize the SDK on your application's mounted event#

Initialize the SDK after your application is mounted (using useEffect hook in React or mounted lifecycle function in Vue) by calling torus.init().

Use whiteLabel option to add white-labeling configuration for your application.

function App() {  useEffect(() => {    (async () => {      const torus = new Torus({});      await torus.init({        // Example white-labeling configurations        whiteLabel: {          theme: {            isDark: false,            colors: {              torusBrand1: "#282c34",            },          },          logoDark: "https://tkey.surge.sh/images/Device.svg", // Dark logo for light background          logoLight: "https://tkey.surge.sh/images/Device.svg", // Light logo for dark background          topupHide: false,          featuredBillboardHide: true,          disclaimerHide: true,          defaultLanguage: "en",        },      });    })();  }, []);
  // ...}

Whitelabel options#

Brand logo and color#

To customize brand logo and color, use theme, logoDark, and logoLight:

await torus.init({  whiteLabel: {    theme: {      isDark: false,      colors: {        torusBrand1: "#282c34",      },    },    logoDark: "https://tkey.surge.sh/images/Device.svg", // Dark logo for light background    logoLight: "https://tkey.surge.sh/images/Device.svg", // Light logo for dark background  },  // ...});
  • theme.isDark: default color mode of the Wallet

  • theme.colors.torusBrand1: color of icons, buttons, and texts.

  • theme.logoDark and theme.logoLight: logo variants for dark and light mode.

Example white-labelled UI

Popup
Popup UI
Popup
Wallet UI in Light mode
Popup
Wallet UI in Dark mode

Show/hide features#

You can turn on/off certain features by use topupHide, featuredBillboardHide, disclaimerHide. All features are enabled by default.

await torus.init({  whiteLabel: {    topupHide: false,    featuredBillboardHide: true,    disclaimerHide: true,  },  // ...});

Select default language#

Choose a default language to match your target users by setting defaultLanguage, default is en.

await torus.init({  whiteLabel: {    defaultLanguage: "en",  },  // ...});

API Reference#

See more details about white-labeling API at API Reference.