Customizing Particle Wallet

In addition to complete customization of Particle Auth (specifically the authentication and transaction confirmation menus), Particle Wallet can also be deeply customized. Particle Wallet acts as the primary (yet optional) interface for users to interact with the wallet generated by Particle Auth. While not all applications use Particle Wallet as a direct mechanism of wallet management, it's a solid option given the aforementioned customization potential, thus making the wallet modal feel specific to your application and project. This document will dive into the programmatic customization of Particle Wallet.

‎

Programmatic Customization

Particle Wallet can only currently be customized through strictly set parameters, either within the path of https://wallet.particle.network, or within the configuration of Particle Auth or Particle Auth Core (which would translate to the in-UI modal rather than a redirect such as is the case with https://wallet.particle.network).

Customizing Particle Wallet through configuration within Particle Auth or Particle Auth Core can be done within the initialization of either ParticleNetwork for @particle-network/auth or AuthCoreContextProvider for @particle-network/auth-core-modal. Within both of these SDKs, you'll need to head into the customStyle object within the wallet parameter on options for AuthCoreContextProvider, or the main configuration object for ParticleNetwork.

customStyle takes the following parameters, all of which impact the appearance of the wallet modal:

supportChains?: Chain[];
supportAddToken?: boolean;
displayTokenAddresses?: string[];
displayNFTContractAddresses?: string[];
priorityTokenAddresses?: string[];
priorityNFTContractAddresses?: string[];
fiatCoin?: CurrencyUnit;
evmSupportWalletConnect?: boolean;
supportUIModeSwitch?: boolean;
supportLanguageSwitch?: boolean;
light?: ModeStyle; // Profile 1, light mode
dark?: ModeStyle; // Profile 2, dark mode

// ModeStyle
colorAccent?: string;
colorPrimary?: string;
colorOnPrimary?: string;
primaryButtonBackgroundColors?: [string, string];
primaryIconButtonBackgroundColors?: [string, string];
primaryIconTextColor?: string;
primaryButtonTextColor?: string;
cancelButtonBackgroundColor?: string;
backgroundColors?: [string, [[string, string], [string, string]]];
messageColors?: string[];
borderGlowColors?: string[];
modalMaskBackgroundColor?: string;
cardBorderRadius?: number;

‎

With this in mind, take a look at the below example for further insight into what a complete utilization of most of the above parameters looks like (example of a configuration for customStyle):

customStyle: {
  supportAddToken: true,
  supportChains: [
    { id: 1, name: "Ethereum" },
    { id: 5, name: "Ethereum" },
    { id: 56, name: "BSC" },
    { id: 97, name: "BSC" }
  ],
  evmSupportWalletConnect: true,
  supportUIModeSwitch: false,
  supportLanguageSwitch: false,
  priorityTokenAddresses: [""],
  priorityNFTContractAddresses: [""],
  light: {
    colorAccent: "#F23892",
    colorPrimary: "#ffffff",
    colorOnPrimary: "#ffffff",
    primaryButtonBackgroundColors: ["#F23892", "#F23892"],
    primaryButtonTextColor: "#ffffff",
    primaryIconButtonBackgroundColors: ["#dfe9fd", "#dfe9fd"],
    primaryIconTextColor: "#F23892",
    cancelButtonBackgroundColor: "#666666",
    backgroundColors: ["#e5e5e5", [["#ffffff00", "#ffffff00"], ["#ffffff00", "#ffffff00"]]],
    messageColors: ["#7DD5F9", "#ed5d51"],
    borderGlowColors: ["#7bd5f940", "#323233"],
    modalMaskBackgroundColor: "#141430b3"
  },
  dark: {
    colorAccent: "#7DD5F9",
    colorPrimary: "#21213a",
    colorOnPrimary: "#171728",
    primaryButtonBackgroundColors: ["#5ED7FF", "#E89DE7"],
    primaryIconButtonBackgroundColors: ["#5ED7FF", "#E89DE7"],
    primaryIconTextColor: "#FFFFFF",
    primaryButtonTextColor: "#0A1161",
    cancelButtonBackgroundColor: "#666666",
    backgroundColors: ["#14152e", [["#e6b1f766", "#e6b1f700"], ["#7dd5f94d", "#7dd5f900"]]],
    messageColors: ["#7DD5F9", "#ed5d51"],
    borderGlowColors: ["#7bd5f940", "#323233"],
    modalMaskBackgroundColor: "#141430b3"
  }
};

‎

This specific custom style above translates into a highly customized version of the wallet model, with gradients, major color changes, and feature removals, as shown in the following image.

For an interactive demo showcasing custom styles, head over to https://web-demo.particle.network