Adapt Copy With Translations

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!

Let’s imagine we want to change the “Select your wallet” text in the image below to “Find your favourite”

We simply need to inspect that element in the browser, and find the key that is being used to display that text by checking the copykey attribute on that element. In this case, you’ll see that it is “dyn_login.title.all_wallet_list”.

Now we’ll create our locale object, and add a new key with that value. It always starts with a key of the language you’re editing, in this case “en” for English. Then we add the key that we found in the browser, and then the value we want to replace it with.

const locale = {
  en: {
    dyn_login: {
      title: {
        all_wallet_list: "Select your wallet",
      },
    },
  },
};

    dyn_account_exists: {
        connect: 'Connect with {{socialOauth}}',
        description: 'It looks like an account already exists using',
        title: 'Account already exists',
        trail_message_email: '. Please log in with your email.',
        trail_message_social: 'through {{socialOauth}}',
    },

We’re now ready to pass our locale object to the DynamicContextProvider like so:

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

That’s it! You can now customize the text in the SDK to your heart’s content. Note that if you ever want to see the full list of possible keys, .