We refreshed our doc site!

Bookmarked links may have changed

Read release notes

Web3 Services

Web SDK UI Customizations

This document describes the different customizable sections of the Programmable Wallet SDK customization API. To get the most flexibility out of the SDK, use this reference with the SDK API.

Colors

setThemeColor(themeColor: ThemeColor)

#ThemeColor propertyNote
A1backdropModal backdrop color, e.g. '#000000'.
A2backdropOpacityModal backdrop opacity, e.g. 0.5.
A3dividerDivider border color, e.g. '#808080' or 'grey'.
A4bgModal background color, e.g. '#FFFFFF' or 'white'.
A5successSuccess text color, e.g. '#008000' or 'green'.
A6errorError text color, e.g. '#FF0000' or 'red'.
A7textMainPrimary color, e.g. '#000000' or 'black'.
A8textMain2Secondary color, e.g. '#000000' or 'black'.
A9textAuxiliaryPrimary auxiliary color, e.g. '#000000' or 'black'.
A10textAuxiliary2Secondary auxiliary color, e.g. '#000000' or 'black'.
A11textSummarySummary text color, e.g. '#000000' or 'black'.
A12textSummaryHighlightSummary highlight text color, e.g. '#000000' or 'black'.
A13textPlaceholderText input placeholder color, e.g. '#808080' or 'grey'.
A14pinDotBaseFill color for pincode input dot, e.g. '#FFFFFF' or 'white'.
A15pinDotBaseBorderStroke color for pincode input dot, e.g. '#000000' or 'black'.
A16pinDotActivatedFill color for inputted pincode input dot, e.g. '#0000ff' or 'blue'.
A17inputBorderFocusedOutline color for text input on focused, e.g. '#0000ff' or 'blue'.
A18inputBorderFocusedErrorOutline color for text input when error, e.g. '#FF0000' or 'red'.
A19inputBgBackground color for text input, e.g. '#FFFFFF' or 'white'.
A20inputBgDisabledBackground color for disabled text input, e.g. '#FFFFFF' or 'white'.
A21dropdownBgBackground color for dropdown, e.g. '#FFFFFF' or 'white'.
A22dropdownBorderIsOpenOutline color for dropdown is open, e.g. '#0000ff' or 'blue'.
A23dropdownBorderErrorOutline color for dropdown when error, e.g. '#FF0000' or 'red'.
A24mainBtnTextText color for primary button, e.g. '#FFFFFF' or 'white'.
A25mainBtnTextDisabledText color for disabled primary button, e.g. '#FFFFFF' or 'white'.
A26mainBtnTextOnHoverText color for primary button on hover, e.g. '#FFFFFF' or 'white'.
A27mainBtnBgBackground color for primary button, e.g. '#000000' or 'black'.
A28mainBtnBgOnHoverBackground color for primary button on hover, e.g. '#000000' or 'black'.
A29mainBtnBgDisabledBackground color for disabled primary button, e.g. '#000000' or 'black'.
A30secondBtnTextText color for secondary button, e.g. '#000000' or 'black'.
A31secondBtnTextDisabledText color for disabled secondary button, e.g. '#000000' or 'black'.
A32secondBtnTextOnHoverText color for secondary button on hover, e.g. '#000000' or 'black'.
A33secondBtnBorderOutline color for secondary button, e.g. '#000000' or 'black'.
A34secondBtnBorderOnHoverOutline color for secondary button on hover, e.g. '#000000' or 'black'.
A35secondBtnBgOnHoverBackground color for secondary button on hover, e.g. '#FFFFFF' or 'white'.
A36secondBtnBorderDisabledOutline color for disabled secondary button, e.g. '#FFFFFF' or 'white'.
A37plainBtnTextText color for plain text button, e.g. '#000000' or 'black'.
A38plainBtnTextDisabledText color for disabled plain text button, e.g. '#000000' or 'black'.
A39plainBtnTextOnHoverText color for plain text button on hover, e.g. '#000000' or 'black'.
A40plainBtnBgBackground color for plain text button, e.g. '#FFFFFF' or 'white'.
A41plainBtnBgOnHoverBackground color for plain text button on hover, e.g. '#FFFFFF' or 'white'.
A42recoverPinHintTitleText color for recover pincode hint title, e.g. '#FFFFFF' or 'white'.
A43recoverPinHintTitleBgBackground color for recover pincode hint title, e.g. '#FFFFFF' or 'white'.
A44recoverPinHintext color for recover pincode hint, e.g. '#FFFFFF' or 'white'.
A45titleGradientsBackground color for linear-gradient text, e.g. ['#B090F5', '#1AA3FF'].
A46inputTextText color for text input, e.g. '#000000' or 'black'.
A47enteredPinTextText color for entered pincode input, e.g. '#000000' or 'black'.
A48tooltipTextText color for tooltip content text, e.g. '#000000' or 'black'.
A49tooltipBgBackground color for tooltip content, e.g. '#FFFFFF' or 'white'.
A50textInteractiveText color for call data and abi parameters
A51interactiveBgContainer background color for call data and abi parameters

Create your PIN


Re-enter your PIN to Confirm


Set up your Recovery Method


Security Questions Customization

Please reference the Security Question section in the SDK for how to customize the question by using setSecurityQuestions method.

Security Questions Summary

Security Questions Confirmation


Enter your PIN


Recover your PIN


Confirm Transaction

Contract Interaction

Custom security questions

#FunctionNote
B1setCustomSecurityQuestions(  questions?: SecurityQuestion[] | null,  requiredCount = 2,  securityConfirmItems?: string[])Set the array of security questions
B2setCustomSecurityQuestions(  questions?: SecurityQuestion[] | null,  requiredCount = 2,  securityConfirmItems?: string[])Set the required count of security questions. The value is 2 by default.
B3setCustomSecurityQuestions(  questions?: SecurityQuestion[] | null,  requiredCount = 2,  securityConfirmItems?: string[])Set the array of customized disclaimers on the SecurityConfirm screen. The value is undefined by default.
B4setOnForgotPin(onForgotPin: () => void)Set the callback of onForgotPin

Resources

setResource(resources: Resources)

#Resources PropertyNote
C1naviCloseClose icon url for the navigation bar.
C2naviBackBack icon URL for the navigation bar.
C3securityIntroMainSecurity intros image URL for the security intros page.
C4dropdownArrowArrow icon URL for the dropdown.
C5selectCheckMarkSelected item icon URL for the dropdown.
C6securityConfirmMainSecurity confirm image URL for the security confirm page.
C7errorInfoError icon for form validation.
C8fontFamilyFont-family for customization.E.g. { name: 'Edu TAS Beginner', URL: 'https\://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght\@400;500;600;700\&display=swap' }.
C9transactionTokenIconToken icon for the transaction request page.
C10dAppIconDApp icon for customization for the sign message page.
C11tipIconTooltip icon for customization.
C12emailIconEmail icon for customization.

CustomLinks

setCustomLinks(customLinks: CustomLinks)

#Custom Links PropertyNote
D1learnMoreUrlExternal link for the learn more button link.

Localizations

setLocalizations(localizations: Localizations)

#Localizations PropertyNote
E1~E3confirmPincodeHolds localization settings for ConfirmPincode screen.
F1~F4enterPincodeHolds localization settings for EnterPincode screen.
G1~G3newPincodeHolds localization settings for NewPincode screen.
H1~H5recoverPincodeHolds localization settings for RecoverPincode screen.
I1~I5securityConfirmHolds localization settings for SecurityConfirm screen.
J1~J4securityIntrosHolds localization settings for SecurityIntros screen.
K1~K8securityQuestionsHolds localization settings for SecurityQuestions screen.
L1~L2securitySummaryHolds localization settings for SecuritySummary screen.

confirmPincode

#Property NameNote
E1headlineHeadline text

Keep the placeholder like this:
E.g. `Re-enter your {{pin}} to confirm`
E2headline2Headline text 2

The text will replace the {{pin}} placeholder in the headline text
E3subheadSubhead text

enterPincode

#Property NameNote
F1headlineHeadline text

Keep the placeholder like this:
E.g. `Enter your {{pin}}` or `輸入你的 {{pin}}`
F2headline2Headline text 2

The text will replace the {{pin}} placeholder in the headline text
F3subheadSubhead text
F4forgotPinForgot pin text

newPincode

#Property NameNote
G1headlineHeadline text

Keep the placeholder like this:
E.g. `Enter your {{pin}}` or `輸入你的 {{pin}}`
G2headline2Headline text 2

The text will replace the {{pin}} placeholder in the headline text
G3subheadSubhead text

recoverPincode

#Property NameNote
H1headlineHeadline text
H2headline2Headline text 2
H3subheadSubhead text
H4answerInputHeaderAnswer input header text
H5answerInputPlaceholderAnswer input placeholder text

securityConfirm

#Property NameNote
I1titleTitle text
I2headlineHeadline text
I3inputHeadlineInput headline text
I4inputPlaceholderInput placeholder text
I5inputMatchInput match text

securityIntros

#Property NameNote
J1headlineHeadline text
J2headline2Headline text 2
J3descriptionDescription text
J4linkLink text

securityQuestions

#Property nameNote
K1titleTitle text
K2questionHeaderQuestion header text
K3questionPlaceholderQuestion placeholder text
K4requiredMarkRequired mark text
K5answerHeaderAnswer header text
K6answerPlaceholderAnswer placeholder text
K7answerHintHeaderAnswer hint header text
K8answerHintPlaceholderAnswer hint placeholder text

securitySummary

#Property NameNote
L1titleTitle text
L2questionQuestion text

Keep the placeholder like this:
E.g. {{ordinal}} Question {{ordinal}} 質問 or {{ordinal}} вопрос or {{ordinal}} คำถาม

You don’t need to place any ordinal value into the placeholder. Web-sdk will do it for you.

transactionRequest

#Property nameNote
M1titleMain title text
M2subtitleSubtitle text
M3mainCurrencyMain currency info, including amount and symbol

E.g. { mainCurrency: { amount: 300, symbol: ETH }
M4exchangeValueExchanged currency info, including amount and symbol

E.g. { exchangeValue: { amount: 300, symbol: USDC }
M5fromLabelFrom label
M6fromFrom value
E.g. 0x8De9d7D8503D1DE1566393d7155711B7e4210666

Sdk will do the shortenHash for you.
M7toLabelTo label
M8toTo values.
This is an array of 3 elements.

E.g.
[uniswape.org, https://uniswape.org, 0x8De9d7D8503D1DE1566393d7155711B7e4210666]

If you only need to display the address only and you don’t need the dApp name and url displayed, you can input it as follows:
[, , 0x8De9d7D8503D1DE1566393d7155711B7e4210666]
M9networkFeeLabelNetwork fee label
M10networkFeeTipText for network fee tooltip
M11networkFeeNetwork fee value

E.g. 0.005 ETH
M12exchangeNetworkFeeExchanged network fee value

E.g. 10 USD

contractInteraction

#Property nameNote
N1titleMain title text
N2subtitleSubtitle text
N3mainCurrencyMain currency info, including amount and symbol

E.g. { mainCurrency: { amount: 300, symbol: ETH }
N4exchangeValueExchanged currency info, including amount and symbol

E.g. { exchangeValue: { amount: 300, symbol: USDC }
N5fromLabelFrom label
N6fromFrom value

E.g. 0x8De9d7D8503D1DE1566393d7155711B7e4210666

Sdk will do the shortenHash for you.
N7toLabelTo label
N8toTo values.

This is an array of 3 elements.

E.g.
[uniswape.org, https://uniswape.org, 0x8De9d7D8503D1DE1566393d7155711B7e4210666]

If you only need to display the address only and you don’t need the dApp name and url displayed, you can input it as follows:
[, , 0x8De9d7D8503D1DE1566393d7155711B7e4210666]
N9networkFeeLabelNetwork fee label
N10networkFeeTipText for network fee tooltip
N11networkFeeNetwork fee value

E.g. 0.005 ETH
N12exchangeNetworkFeeExchanged network fee value

E.g. 10 USD
N13totalLabelTotal label text
N14totalTotal values. This is an array of 2 elements.

E.g.
[20 USDC, + 0.0002 ETH] or
[20 USDC + 0.0002 ETH, ``]
N15exchangeTotalValueExchanged total value text
N16dataDetailsAn object for contract interaction data detail display.

{
dataDetails?: {
dataDetailsLabel?: string
callData?: {
callDataLabel?: string
data?: string
}
abiInfo?: {
functionNameLabel?: string
functionName?: string
parametersLabel?: string
parameters?: string[]
}
}

dataDetailsLabel: data details label

callData or abiInfo: The use could choose either one to fill up depending on the transaction can be parsed by abi (choose abiInfo) or not (choose callData)

signatureRequest

#Property nameNote
O1titleMain title text
O2subtitleSubtitle text
O3contractNameContract name
O4contractUrlContract url
O5descriptionLabelDescription label
O6descriptionDescription

emailOtp

#Property nameNote
P1titleMain title text
P2subtitleSubtitle text
P3resendHintResend label text
P4resendResend button text

common

#Property nameNote
Q1continueContinue button text
Q2showPinShowPin button text
Q3hidePinHidePin button text
Q4confirmConfirm button text
Q5signSign button text
Q6retryRetry button text
Did this page help you?
© 2023-2024 Circle Technology Services, LLC. All rights reserved.
Developer TermsService TermsPrivacy PolicyAcceptable UseYour Privacy ChoicesYour Privacy ChoicesCookie Policy