Adapt Copy With Translations

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

The SDK allows you to customize almost all of the text it displays, as well as add extra translations. You do so using the “locale” prop on the DynamicContextProvider.

Quick override (copy-paste)

Change any UI text by finding its copykey in the browser inspector and overriding it in the locale prop:

import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';

<DynamicContextProvider
  settings={{ environmentId: "YOUR_ENV_ID", walletConnectors: [EthereumWalletConnectors] }}
  locale={{
    en: {
      dyn_widget: { connect: "Sign in with wallet" },
      dyn_login: { title: { all_wallet_list: "Choose a wallet" } },
    },
  }}
>
  <App />
</DynamicContextProvider>

Finding keys: Right-click any SDK text → Inspect → look for the copykey attribute on the element. The nested object path matches the dot-separated key (e.g. dyn_login.title.all_wallet_list).

Full guide

In this short guide we will update some text in the default language (English), add an Italian translation, learn how to let the user change their language and along the way, learn all about the locale object you’ll be working with!

Let’s imagine we want to change the “Select your wallet” text in the image below to “Find your favorite” and then do the same with an Italian translation.

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: "Find your favorite",
      },
    },
  },
  it: {
    dyn_login: {
      title: {
        all_wallet_list: "Trova il tuo preferito",
      },
    },
  },
};

Using the translations file

You probably noticed the translation object has a very specific shape. You can actually check it yourself by looking in “@dynamic-labs/sdk-react-core/src/lib/locale/en/translation.js” which you can reach by going to the definition of LocaleResource in your IDE once imported (import { LocaleResource } from '@dynamic-labs/sdk-react-core')

Here is an example excerpt from that file:

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

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

The result should then immediately show up in the SDK UI like so:

Next we’ll need to let the user change between languages, and it’s as simple as the following:

    const {locale} = useDynamicContext();

    const handleOnClick = (localeProvided) => {
      if (localeProvided === 'it') {
        locale.changeLanguage('it');
      } else {
        locale.changeLanguage('en');
      }
    };

    return (
      <button onClick={() => handleOnClick(locale.language)}>
        {locale.language === 'it' ? 'English' : 'Italiano'}
      </button>
    );

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

Further Reading

Make sure to check out the full reference for the locale object here.