The SDK allows you to customize almost all of the text it displays. You do so using the “locale” prop on the DynamicContextProvider. In this short guide we will update some text and along the way, learn how to format the value that locale expects!

​
The locale prop

Found on the DynamicContextProvider, this prop expects an object with the shape of something called a LocaleResource.

LocaleResource is actually a type, and you can import it directly from sdk-react-core.

import { LocaleResource } from "@dynamic-labs/sdk-react-core";

Let’s take a look at that type now, so we know what to expect:

import { translation } from "./en/translation";
export type Translation = typeof translation;
type DeepPartial<T> = T extends object
  ? {
      [P in keyof T]?: DeepPartial<T[P]>;
    }
  : T;
export type TranslationOverrides = DeepPartial<Translation>;
export type Lang =
  | "ar"
  | "da"
  | "de"
  | "en"
  | "es"
  | "fi"
  | "fr"
  | "he"
  | "it"
  | "ja"
  | "nl"
  | "pl"
  | "pt"
  | "ru"
  | "uk"
  | "zh";
export type LocaleResource = {
  [key in Lang]?: TranslationOverrides;
};

We can see that LocaleResource expects an object, where the key is a valid “Lang” and the value is an object that matches the shape of the Translation type.

We just support “en” for now, so that will be the only valid key for the LocaleResource object.

The Translation type is actually an object that contains all of the text that the SDK displays. You can find the default values for this object in the en/translation.ts file in the sdk-react-core package.

This is quite a long file, and since we add more translations over time, it will only get longer. Let’s take a look at a small part of it:

/**
     * @description copy keys for log in view
     * @default
     * {
        connect_wallet: {
          title: 'Connect',
        },
        helper: {
          all_wallet_list: 'Get your first wallet',
          email_form: {
            invalid_email: 'Invalid or incorrect email. Did you mistype it?',
          },
          pending_connect: {
            title: 'Connecting a wallet',
          },
          pending_signature: {
            title: 'Signing a wallet',
          },
          pending_signature_without_back_button: {
            title: 'Signing a wallet',
          },
          qr_code: {
            title: 'Connecting a wallet',
          },
          wallet_only: 'Get your first wallet',
        },
        qr_code: {
          title: 'Connect',
        },
        separators: {
          default: 'OR',
        },
        sign_wallet: {
          title: 'Sign',
        },
        title: {
          all: 'Log in or sign up',
          all_wallet_list: 'Select your wallet',
          wallet_only: 'Select your wallet',
        },
        wallet_group: {
          title: 'Select Chain',
        },
        wallet_list: {
          button_only: 'Continue with a wallet',
        },
      }
     */

Let’s put this together, imagining we want to change the “Select your wallet” text in the image below to “Find your favourite”

Select your wallet

We would need to create an object that looks like this:

const locale = {
  en: {
    dyn_login: {
      title: {
        all: "Log in or sign up",
        all_wallet_list: "Select your wallet",
        wallet_only: "Find your favourite",
      },
    },
  },
};

And then pass it to the DynamicContextProvider like so:

<DynamicContextProvider settings={settings_go_here} locale={locale}>
  <App />
</DynamicContextProvider>

Here it is in an interactive codesandbox:

That’s it! You can now customize the text in the SDK to your heart’s content.

​
Further resources

Was this page helpful?

Custom Sign MessageAccess Lists