For the social logins and email authentication methods, by default, Circle presents your user with a UI to preview the transaction or signing details before sending transactions or signatures onto the blockchain. These confirmation UIs are applicable to the following APIs:
POST
/user/transactions/transferPOST
/user/transactions/contractExecutionPOST
/user/sign/transactionPOST
/user/sign/messagePOST
/user/sign/typedDataYou can customize various elements of the UIs, which enables your application to deliver context for on-chain actions.
These confirmation UIs are predefined by Circle. The following example shows the UI for confirming an outbound transfer on the web app:
There are some nuances to consider in regards to the confirmation UI customization:
POST request to the /createtransferestimatefee or
/createtransactionestimatefee endpoints to get the estimate fee and pass the
fee in the response to the SDK for display. If you offer an SCA wallet with
paymaster functionalities, you can pass a string, such as “sponsored by
Circle.”For detailed instructions on customizing UIs for web, iOS, and Android, see the following docs:
Below are examples of customizations for confirmation UIs for an outbound transfer, contract execution, and sign message or typed data:
The following table shows which UI elements can be customized based on the example:
| UI Element | Example | Customization options |
|---|---|---|
x icon | x icon in the top-left | Icon image |
| Title | Confirm transaction | Text, color, size, font |
| Subtitle | Please click confirm to proceed with the transaction. | Text, color, size, font |
| Token symbol | USDC token image | Image |
| Token name | USDC | Text, color, size, font |
| Fiat currency and amount | USD 20 | Text, color, size, font |
| From address | 0x391…e4r43 | Text, color, size, font |
| To address | 0x391...0244i | Text, color, size, font |
| Network fee | 0.0002 ETH | Text, color, size, font |
| Network fee hint | ! icon Hover text: Please note this is an estimated fee. Network fees may vary based on network traffic and transaction complexity. | Icon image, hover text, color, size, font |
| Confirmation button | CONFIRM | Text, color, size, font |
The following table shows which UI elements can be customized based on the example:
| UI Element | Example | Customization options |
|---|---|---|
x icon | x icon in the top-left | Icon image, location |
| Title | Contract interaction | Text, color, size, font |
| Subtitle | Please click confirm to proceed with the contract execution. | Text, color, size, font |
| Token symbol | USDC token image | Image |
| Token name | USDC | Text, color, size, font |
| Fiat currency and amount | USD 20 | Text, color, size, font |
| From address | 0x391...e4r43 | Text, color, size, font |
| Contract address | Fi0x2...c1380 | Text, color, size, font |
| Network fee | 0.0002 ETH | Text, color, size, font |
| Network fee hint | ! icon Hover text: Please note this is an estimated fee. Network fees may vary based on network traffic and transaction complexity. | Icon image, hover text, color, size, font |
| Function type | burn(uint256) | Text, color, size, font |
| ABI Parameters | 10000 | Text, color, size, font |
| Confirmation button | CONFIRM | Text, color, size, font |
The following table shows which UI elements can be customized based on the example:
| UI Element | Example | Customization options |
|---|---|---|
x icon | x icon in the top-left | Icon image |
| Title | Signature Request | Text, color, size, font |
| Contract name | koalla.org | Text, color, size, font |
| Contract address | https://koalla.org | Text, color, size, font |
| Description | Click on sign button to provide a signature for verification You are signing: I own a KOALLA Membership NFT to claim this promotion | Text, color, size, font |
| Confirmation button | SIGN | Text, color, size, font |
To use your own UIs, you can opt out of Circle’s predefined confirmation UIs.
While you may want to opt out of Circle’s confirmation UIs, it is highly recommended that you enable them to strengthen the security of your application for your users. If you decide to disable it, it means you can submit transactions on behalf of your users without their consent; therefore, you must provide context or disclaimers on your application that your users must acknowledge.
