Customizing Transaction UI

By default, when prompted to sign a transaction with an embedded wallet, a user will see a screen similar to this one:

​

Disable Confirmation Screen

You can enable/disable this transaction confirmation screen with a single toggle in the Embedded Wallet configuration page. If you want to keep the confirmation UI but customize it, read on!

​

Customize Confirmation Screen

​

Modal title

By default this reads “Confirm transaction” as you can see in the image above, but you can customize it to say whatever you want. To do this, use Translations and set the following:

const locale = {
  en: {
    dyn_send_transaction: {
      confirmation: {
        title: "My New Title",
      },
    },
  }
};

<DynamicContextProvider settings={settings} locale={locale}>
  <MyApp />
</DynamicContextProvider>

​

Logo/Icon

In the general page under Settings of your Dynamic Developer Dashboard, you can set your app logo URL. This logo will be displayed in the transaction confirmation screen in place of where you currently see the Dynamic logo in the image above.

​

App Name

In the same general page under Settings as above, you can also set your app name. This name will be displayed in the transaction confirmation screen in place of where you currently see “Dynamic” in the image above.

​

Origin URL

This parameter is set by Dynamic and cannot be customized for obvious security reasons. It is the URL of the website that is requesting the transaction.

​

Bring your own UI

You can also build your own flows for transactions and simply use the SDK hooks to trigger the actions you need, check out the headless section for that!