React Native SDK UI Customization API

React Native SDK UI and key mapping reference for customizations.

This article describes two different ways to customize your React Native application UI using the React Native SDK

  • Static Resources customize the UI layout during build time.
  • Programmatic Customization modifies the layout at run time.

πŸ”–

Note:

You can combine static and programmatic approaches for customization.

To use the SDK in the most flexible way, combine the reference in this article with the React Native SDK.

Sample Application: Refer to the React Native sample application for example code.

Text, Color, and Font Customization

For text-related customization, there are two types of customization, dynamic and static:

  • For dynamic customization, update the source code's desired string, color, and font (as typeface).
new TextConfig(text, color, font)
new TextConfig(text, gradientColorArray, font)
  • For static customization, please refer to Static Resource to add or update resource files for Android and iOS respectively. To avoid the static customization being overwritten by the dynamic customization, use the undefined value for the text argument when initializing with the TextConfig() constructor, for example:
new TextConfig(undefined, color, font) // text remains static customization
new TextConfig(text, undefined, undefined) // color and font remain static customization

Please reference the UI screenshots below with each string’s mapping code, then use the mapping code to find the Key name in the Index Table A, B, C for more detail of customization support and usage for each text string.

πŸ”–

Note:

The detail of supporting scope can be found in the index table and the note column. For Android, if the app still customizes those unsupported values, it will give a WARN level log printed to logcat, filtered with CustomizeChecker for log abstraction.

New PIN Code

A1 / C1~C5

Confirm PIN Code

C6~C7

Enter PIN Code

A2 / C8~C9, C5-1, C5-2

Security Intros

A3~A4 / C10~C11

Security Questions Customization

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

A5 / C12~C25

Security Summary

A6 / C26~C32

Security Confirm

C33~C37 / B1

Recover PIN Code

A7 / C39~C47

Biometrics Prompt

C46~C60

Alert Pop Window

C61~C62

A Index Table -TextsKey

Put the configs in a map then call WalletSdk.setTextConfigsMap(). For example:

  const map = new Map()
  map.set(TextsKey.securityQuestionHeaders, [
    new TextConfig('Choose your 1st question'),
    new TextConfig('Choose your 2nd question')
  ])

  WalletSdk.setTextConfigsMap(map)
Programmatic CustomizationStatic ResourcesNoteπŸ”–
AndroidiOS CirclePWTheme.json
#TextsKeyTextConfigs lengthTextConfig.textTextConfig.textColorTextConfig.fontTextConfig.gradientColorscolors.xmlstyles.xmlcolorfont
A1newPinCodeHeadline<=2βœ…βœ…πŸ”–βœ…βœ…πŸ”–circlepw_text_maincirclepw_heading3text_mainsemiboldtextColor will be applied if gradientColors is null.
A2enterPinCodeHeadline<=2βœ…βœ…πŸ”–βœ…βœ…πŸ”–circlepw_text_maincirclepw_heading3text_mainsemiboldtextColor will be applied if gradientColors is null.
A3securityIntroHeadline<=2βœ…βœ…πŸ”–βœ…βœ…πŸ”–circlepw_text_maincirclepw_heading4text_mainsemiboldtextColor will be applied if gradientColors is null.
A4securityIntroLink2πŸ”–βœ…βœ…πŸ”–βœ…πŸ”–βŒcirclepw_text_actioncirclepw_body2text_actionregularTextConfigs: [DisplayText, URL]Only display when the array length is not less then 2 and the URL is not empty.Set color / font according to TextConfig[0].Β 
A5securityQuestionHeaders<= 5πŸ”–βœ…βœ…πŸ”–βœ…πŸ”–βŒcirclepw_text_auxiliarycirclepw_body2text_auxiliaryregularTextConfigs over the length limit will be ignored.
A6securitySummaryQuestionHeadersSame as securityQuestionHeaders (A5)βœ…βœ…βœ…βŒcirclepw_text_main2circlepw_heading5text_main2semiboldTextConfigs over the length limit will be ignored.
A7recoverPinCodeHeadlineFreeβœ…βœ…πŸ”–βœ…βœ…πŸ”–circlepw_text_maincirclepw_heading3text_mainsemiboldtextColor will be applied if gradientColors is null.

B Index Table - IconTextsKey

Use this Index Table to reference the dynamic special Icon, Text, Color, and Font Customization. Both the icon image and the text fields are dynamically configured together.
You can use IconTextConfig() constructor with local image or remote image URL. For example:

new IconTextConfig(
      require('../assets/image/local_icon.png'),
      new TextConfig(text, color, font)
    )

new IconTextConfig(
      {uri: 'https://remote_image'}
      new TextConfig(text, color, font)
    )

And put the configs in a map then call WalletSdk.setIconTextConfigsMap():

 const map = new Map()
 map.set(IconTextsKey.securityConfirmationItems, [
    new IconTextConfig(
      require('../assets/image/local_icon.png'),
      new TextConfig(text, color, font),
    ),
  ])
  WalletSdk.setIconTextConfigsMap(map)

Programmatic CustomizationStatic ResourcesNoteπŸ”–
AndroidiOS CirclePWTheme.json
#IconTextsKeyTextConfigs lengthTextConfig.textTextConfig.textColorTextConfig.fontTextConfig.gradientColorscolors.xmlstyles.xmlcolorfont
B1securityConfirmationItems<=4πŸ”–βœ…βœ…βœ…βŒcirclepw_text_maincirclepw_body2text_mainregulartextColor will be applied if gradientColors is null.

C Index Table - TextKey

For programmatic customization, put the configs in a map then call WalletSdk.setTextConfigMap(). For example:

   const map = new Map()
  map.set(
    TextKey.circlepw_recover_pincode_answer_input_placeholder,
    new TextConfig(
      'Type your answer here',
      colors.placeholder,
      'Inter-Regular',
    ),
  )
  WalletSdk.setTextConfigMap(map)

For static customization, please check Static Resource.

πŸ”–

Note:

The gradientColors field is not supported for the Keys in this table. If you dynamically set the color as gradientColor, the effect will be ignored and the Android WARN level log will be printed.

Programmatic CustomizationStatic ResourcesNote
TextConfigAndroidiOS CirclePWLocalizable.jsoniOS
CirclePWTheme.json
#TextKeytexttextColorfontstrings.xmlcolors.xmlstyles.xmlstringcolorfont
C1circlepw_new_pincode_subheadβœ…βœ…βœ…circlepw_text_auxiliarycirclepw_text_auxiliarycirclepw_body2circlepw_new_pincode_subheadtext_auxiliaryregular
C2❌❌❌❌❌circlepw_text_maincirclepw_pinDigitText❌text_mainlightNormal
circlepw_successcirclepw_pinDigitTextsuccessSucceed
circlepw_errorcirclepw_pinDigitTexterrorFailed
C3circlepw_enter_pincode_use_biometricsβœ…βœ…βœ…circlepw_enter_pincode_use_biometricsπŸ”–circlepw_pressed_assist_text_colorcirclepw_actionTextcirclepw_enter_pincode_use_biometricsπŸ”–text_actionsemiboldFor Android, the default text is β€œUse Biometrics”.
For iOS, the default text is β€œUse FACE ID”.
C5circlepw_pincode_error_configβŒπŸ”–βœ…βœ…βŒπŸ”–circlepw_errorcirclepw_body2βŒπŸ”–errorregularFor text, see Error Message:incorrectUserPin(155112), userPinLocked(155119), pinCodeNotMatched(155703)
C5-1circlepw_pin_remain_attemps_templateβœ…πŸ”–βŒβŒcirclepw_pin_remain_attemps_template❌❌❌❌❌e.g. You have %s attempts left.
C5-2circlepw_pin_lock_period_templateβœ…πŸ”–βŒβŒcirclepw_pin_lock_period_template❌❌❌❌❌e.g. You’ve used up all PIN attempts. Please wait for %s mins to retry later.
C6circlepw_confirm_pincode_headlineβœ…βœ…βœ…circlepw_confirm_pincode_headlinecirclepw_text_maincirclepw_heading3circlepw_confirm_pincode_headlinetext_mainsemibold
C7circlepw_confirm_pincode_subheadβœ…βœ…βœ…circlepw_confirm_pincode_subheadcirclepw_text_auxiliarycirclepw_body2circlepw_confirm_pincode_subheadtext_auxiliaryregular
C8circlepw_enter_pincode_subheadβœ…βœ…βœ…circlepw_enter_pincode_subheadcirclepw_text_auxiliarycirclepw_body2circlepw_enter_pincode_subheadtext_auxiliaryregular
C9circlepw_enter_pincode_forgot_pinβœ…βœ…βœ…circlepw_enter_pincode_forgot_pincirclepw_text_actioncirclepw_actionTextcirclepw_enter_pincode_forgot_pintext_action / text_action_pressedsemibold
C10circlepw_security_intros_descriptionβœ…βœ…βœ…circlepw_security_intros_descriptioncirclepw_text_auxiliary2circlepw_body2circlepw_security_intros_descriptiontext_auxiliary2regular
C11circlepw_continueβœ…βœ…βœ…circlepw_continuecirclepw_main_bt_textcirclepw_mainButtonTextcirclepw_continuemain_bt_textsemiboldNormal
circlepw_main_bt_text_pressedmain_bt_text_pressedPressed
circlepw_disabled_main_bt_textmain_bt_text_disabledDisabled
C12circlepw_security_questions_titleβœ…βœ…βœ…circlepw_security_questions_titlecirclepw_text_maincirclepw_toolbarTitlecirclepw_security_questions_titletext_mainmedium
C13circlepw_security_questions_required_markβœ…βœ…βœ…circlepw_security_questions_required_markcirclepw_errorcirclepw_metadata1circlepw_security_questions_required_markerrorregular
C14circlepw_security_questions_question_input_configβŒβœ…βœ…βŒcirclepw_text_maincirclepw_body1❌text_mainregular
C15circlepw_security_questions_question_placeholderβœ…πŸ”–βœ…πŸ”–βŒcirclepw_security_questions_question_placeholdercirclepw_placeholdercirclepw_body1circlepw_security_questions_question_placeholdertext_placeholderregularSet ​​TextView’s textColorHint and hint. Apply circlepw_security_questions_question_input_config (C14)’s font.
C16circlepw_security_questions_answer_headerβœ…βœ…βœ…circlepw_security_questions_answer_headercirclepw_text_auxiliarycirclepw_body2circlepw_security_questions_answer_headertext_auxiliarycirclepw_body1
C17circlepw_security_questions_answer_input_configβŒβœ…βœ…βŒcirclepw_text_maincirclepw_body1❌text_mainregular
C18circlepw_security_questions_answer_placeholderβœ…πŸ”–βœ…πŸ”–βŒπŸ”–circlepw_security_questions_answer_placeholdercirclepw_placeholdercirclepw_body1circlepw_security_questions_answer_placeholdertext_placeholderregularSet ​​TextView’s textColorHint and hint. Apply circlepw_security_questions_answer_input_config (C17)’s font.
C19circlepw_security_questions_answer_hint_headerβœ…βœ…βœ…circlepw_security_questions_answer_hint_headercirclepw_text_auxiliarycirclepw_body2circlepw_security_questions_answer_hint_headertext_auxiliaryregular
C20circlepw_security_questions_answer_hint_input_configβŒβœ…βœ…βŒcirclepw_text_maincirclepw_body1❌text_mainregular
C21circlepw_security_questions_answer_hint_placeholderβœ…πŸ”–βœ…πŸ”–βŒπŸ”–circlepw_security_questions_answer_hint_placeholdercirclepw_placeholdercirclepw_body1circlepw_security_questions_answer_hint_placeholdertext_placeholderregularSet ​​TextView’s textColorHint and hint. Apply circlepw_security_questions_answer_hint_input_config (C20)’s font.
C22circlepw_security_questions_error_configβŒπŸ”–βœ…βœ…βŒπŸ”–circlepw_errorcirclepw_metadata1❌errorregularFor text, see Error Message:hintsMatchAnswers(155705)
C23circlepw_nextβœ…βœ…βœ…circlepw_nextcirclepw_main_bt_textcirclepw_mainButtonTextcirclepw_nextmain_bt_textsemiboldNormal
circlepw_main_bt_text_pressedmain_bt_text_pressedPressed
circlepw_disabled_main_bt_textmain_bt_text_disabledDisabled
C24circlepw_select_question_titleβœ…βœ…βœ…circlepw_select_question_titlecirclepw_text_maincirclepw_toolbarTitlecirclepw_select_question_titletext_mainmedium
C25circlepw_select_question_item_configβŒβœ…βœ…βŒcirclepw_text_maincirclepw_body1❌text_mainregular
C26circlepw_security_summary_titleβœ…βœ…βœ…circlepw_security_summary_titlecirclepw_text_maincirclepw_toolbarTitlecirclepw_security_summary_titletext_mainmedium
C27circlepw_question_labelβœ…βœ…βœ…circlepw_question_labelcirclepw_text_auxiliary2circlepw_body2circlepw_question + β€œ:”text_auxiliary2regular
C28circlepw_security_summary_question_value_configβŒβœ…βœ…βŒcirclepw_text_summarycirclepw_body2❌text_summaryregular
C29circlepw_answer_labelβœ…βœ…βœ…circlepw_answer_labelcirclepw_text_auxiliary2circlepw_body2circlepw_answer + β€œ:β€œtext_auxiliary2regular
C30circlepw_security_summary_answer_value_configβŒβœ…βœ…βŒcirclepw_text_summarycirclepw_caption2❌text_summary_highlightsemibold
C31circlepw_hint_labelβœ…βœ…βœ…circlepw_hint_labelcirclepw_text_auxiliary2circlepw_body2circlepw_hint + β€œ:β€œtext_auxiliary2regular
C32circlepw_security_summary_hint_value_configβŒβœ…βœ…βŒcirclepw_text_summarycirclepw_body2❌text_summaryregular
C33circlepw_security_confirm_titleβœ…βœ…βœ…circlepw_security_confirm_titlecirclepw_text_maincirclepw_toolbarTitlecirclepw_security_confirm_titletext_mainmedium
C34circlepw_security_confirm_headlineβœ…βœ…βœ…circlepw_security_confirm_headlinecirclepw_text_maincirclepw_heading4circlepw_security_confirm_headlinetext_mainmedium
C35circlepw_security_confirm_input_headlineβœ…βœ…βœ…circlepw_security_confirm_input_headlinecirclepw_text_main2circlepw_caption1circlepw_security_confirm_input_headlinetext_main2semibold
C36circlepw_security_confirm_input_placeholderβœ…πŸ”–βœ…πŸ”–βŒπŸ”–circlepw_security_confirm_input_placeholdercirclepw_placeholdercirclepw_body1circlepw_security_confirm_input_placeholdertext_placeholderregularSet ​​TextView’s textColorHint and hint.Β Apply circlepw_security_confirm_input_config (C37)’s font.
C37circlepw_security_confirm_input_configβŒβœ…βœ…βŒcirclepw_text_maincirclepw_body1❌text_main2regular
C37-1circlepw_security_confirm_input_matchβœ…βŒβŒcirclepw_security_confirm_input_match❌❌circlepw_security_confirm_input_match❌❌The text is the answer that requires user type. e.g. I agree
C38circlepw_recover_pincode_error_configβŒπŸ”–βœ…βœ…βŒπŸ”–circlepw_text_maincirclepw_body2❌text_mainregularFor text, see Error Message:incorrectSecurityAnswers(155115)securityAnswersLocked(155120)
C38-1circlepw_answer_remain_attemps_templateβœ…πŸ”–βŒβŒcirclepw_answer_remain_attemps_template❌❌e.g. You have %s attempts left.
C38-2circlepw_answer_lock_period_templateβœ…πŸ”–βŒβŒcirclepw_answer_lock_period_template❌❌e.g. Please wait for %s mins to retry later
C39circlepw_recover_pincode_question_configβŒβœ…βœ…βŒcirclepw_text_main2circlepw_body1❌text_main2regular
C40circlepw_hint_tagβœ…βœ…βœ…circlepw_hint_tagcirclepw_tag_textcirclepw_metadata2circlepw_hintrecover_pin_hint_titleregular
C41circlepw_recover_pincode_answer_hint_configβŒβœ…βœ…βŒcirclepw_tag_following_textcirclepw_metadata1❌recover_pin_hintregular
C42circlepw_recover_pincode_answer_input_headerβœ…βœ…βœ…circlepw_recover_pincode_answer_input_headercirclepw_text_auxiliarycirclepw_body2circlepw_recover_pincode_answer_input_headertext_auxiliaryregular
C43circlepw_recover_pincode_answer_input_placeholderβœ…πŸ”–βœ…πŸ”–βŒπŸ”–circlepw_recover_pincode_answer_input_placeholdercirclepw_placeholdercirclepw_body1circlepw_recover_pincode_answer_input_placeholdertext_placeholderregularSet ​​TextView’s textColorHint and hint.Β Apply circlepw_recover_pincode_input_config (C44)’s font.
C44circlepw_recover_pincode_input_configβŒβœ…βœ…βŒcirclepw_text_maincirclepw_body1❌text_mainregular
C45circlepw_confirmβœ…βœ…βœ…circlepw_confirmcirclepw_main_bt_textcirclepw_mainButtonTextcirclepw_confirmmain_bt_textsemibold
C46circlepw_pin_biometrics_allow_titleβœ…βœ…βœ…circlepw_pin_biometrics_allow_titlecirclepw_text_maincirclepw_heading3circlepw_pin_biometrics_allow_titletext_promptbold
C47circlepw_pin_biometrics_allow_subtitleβœ…βœ…βœ…circlepw_pin_biometrics_allow_subtitlecirclepw_text_auxiliarycirclepw_body2circlepw_pin_biometrics_allow_subtitletext_prompt2regular
C48circlepw_skipβœ…βœ…βœ…circlepw_skipcirclepw_second_bt_textcirclepw_secondButtoncirclepw_skipsecond_bt_textsemiboldNormal
circlepw_second_bt_textPressed
circlepw_second_bt_text_disabledDisabled
C49circlepw_pin_biometrics_disableβœ…βŒβŒcirclepw_pin_biometrics_disablecirclepw_plain_bt_textcirclepw_plainButtoncirclepw_pin_biometrics_disableplain_bt_textsemiboldNormal
circlepw_plain_bt_textPressed
circlepw_plain_bt_text_disabledDisabled
C50circlepw_pin_biometrics_encrypt_titleβœ…βŒβŒcirclepw_pin_biometrics_encrypt_title❌❌❌❌❌Android only.
C51circlepw_pin_biometrics_encrypt_negative_textβœ…βŒβŒcirclepw_pin_biometrics_encrypt_negative_text❌❌❌❌❌Android only.
C52circlepw_pin_biometrics_encrypt_subtitleβœ…βŒβŒcirclepw_pin_biometrics_encrypt_subtitle❌❌❌❌❌Android only.
C53circlepw_pin_biometrics_encrypt_descβœ…βŒβŒcirclepw_pin_biometrics_encrypt_desc❌❌❌❌❌Android only.
C54circlepw_pin_biometrics_decrypt_titleβœ…βŒβŒcirclepw_pin_biometrics_decrypt_title❌❌❌❌❌Android only.
C55circlepw_pin_biometrics_decrypt_negative_textβœ…βŒβŒcirclepw_pin_biometrics_decrypt_negative_text❌❌❌❌❌Android only.
C56circlepw_pin_biometrics_decrypt_subtitleβœ…βŒβŒcirclepw_pin_biometrics_decrypt_subtitle❌❌❌❌❌Android only.
C57circlepw_pin_biometrics_decrypt_descβœ…βŒβŒcirclepw_pin_biometrics_decrypt_desc❌❌❌❌❌Android only.
C58circlepw_pin_biometrics_update_titleβœ…βœ…βœ…circlepw_pin_biometrics_update_titlecirclepw_text_maincirclepw_heading3circlepw_pin_biometrics_update_titletext_promptboldAfter the auto-fill PIN verify fails, the following biometrics setting page title will use this.
C59circlepw_pin_biometrics_update_subtitleβœ…πŸ”–βœ…βœ…circlepw_pin_biometrics_update_subtitlecirclepw_text_auxiliarycirclepw_body2circlepw_pin_biometrics_update_subtitletext_prompt2regularAfter the auto-fill PIN verify fails, the following biometrics setting page subtitle will use this.
C60❌❌❌❌❌❌❌circlepw_pin_touch_id_dialog_subtitle❌❌iOS only. info.plist
C61circlepw_alert_pop_window_description_configβŒπŸ”–βœ…βœ…βŒπŸ”–circlepw_alert_pop_description_textcirclepw_body2❌❌❌For text, see Error Message:
biometricsKeyPermanentlyInvalidated(155710)
Android only.
C62circlepw_alert_pop_window_confirmβœ…βœ…βœ…circlepw_alert_pop_window_confirmcirclepw_alert_pop_btn_textcirclepw_actionText❌❌❌Android only.

Error Messages

When using this table, reference the ApiError heading in the WalletSDK section of the SDK.

Possible display locationApiError.ErrorCodeDefault ValueNote
C5, C38unknown(-1)Unknown error
success(0)Success
C5, C38apiParameterMissing(1)API parameter missing
C5, C38apiParameterInvalid(2)API parameter invalid
C5, C38forbidden(3)Forbidden
C5, C38unauthorized(4)Unauthorized
C5, C38retry(9)Retry
C5, C38customerSuspended(10)Customer suspended
C5, C38pending(11)Pending
C5, C38invalidSession(12)Invalid session
C5, C38invalidPartnerId(13)Invalid partner ID
C5, C38invalidMessage(14)Invalid Message published to a SQS queue.
C5, C38invalidPhone(15)Invalid phone number '%s', format should be in E.164.
C5walletIdNotFound(156001)
C5tokenIdNotFound(156002)
C5transactionIdNotFound(156003)
C5entityCredentialNotFound(156004)
C5walletSetIdNotFound(156005)
userAlreadyExisted(155101)user already existed
userNotFound(155102)user not found
C5, C38userTokenNotFound(155103)user token not found
C5, C38userTokenExpired(155104)user token expired
C5, C38invalidUserToken(155105)invalid user token
C5userWasInitialized(155106)user was initialized
C38userHasSetSecurityQuestion(155108)user has set security question
C5, C38userWasDisabled(155109)user was disabled
C5userDoesNotSetPinYet(155110)user does not set pin yet
C38userDoesNotSetSecurityQuestionYet(155111)user does not set security questions yet
C5incorrectUserPin(155112)The PIN you entered is incorrect.
incorrectDeviceId(155113)incorrect device id
incorrectAppId(155114)app id not found
C38incorrectSecurityAnswers(155115)The answers you entered are incorrect.
invalidChallengeId(155116)invalid challenge id
C5invalidApproveContent(155117)invalid approve content
C5, C38invalidSecretKey(155118)invalid secret key
C5userPinLocked(155119)Just display circlepw_pin_lock_period_template (C5-2)
C38securityAnswersLocked(155120)The answers you entered are incorrect.
C5walletIsFrozen(155501)Wallet is Frozen
C5maxWalletLimitReached(155502)Max wallet limit reachedΒ 
C5walletSetIdMutuallyExclusive(155503)WalletSetId can not be used together with blockchain and address filter
C5metadataUnmatched(155504)metadata array length does not match wallet count
userCanceled(155701)User canceled
launchUiFailed(155702)
C5pinCodeNotMatched(155703)The PIN you entered is not the same as the first one.
C5insecurePinCode(155704)Your PIN can’t have repeating or consecutive numbers.
C22hintsMatchAnswers(155705)Your hint can’t be the same as the answer.
biometricsSetupFailed(155707)Failed to set biometrics to encrypt PIN.
biometricsSettingNotEnabled(155708)"Biometrics instead of PIN" is disabled
deviceNotSupportBiometrics(155709)System doesn't support biometrics
C61biometricsKeyPermanentlyInvalidated(155710)Failed to decrypt biometrics key
biometricsUserSkip(155711)The user has not enabled biometrics yet
biometricsUserDisableForPin(155712)The user refused to enable biometrics
biometricsUserLockout(155713)Too many requests. Try again later.
biometricsUserLockoutPermanent(155714)Too many requests. The biometrics sensor on the device is locked.
biometricsUserNotAllowPermission(155715)The user didn't allow to enable biometrics.
biometricsInternalError(155716)Unexpected error for biometrics: %s

Image Customization

The SDK does not contain any image resources for the SDK; you must provide the icon images from either local assets or remote URLs.
Each image has its suggested size of width and height shown in the index table's Image view size column. Follow the suggested size to avoid the possibility of a broken layout or unexpected display.

ImageKey

D1~D9

D Index Table

#ImageKeyImageView size (dp)Note
widthheight
D1securityIntroMain144144
D2selectCheckMark2424
D3dropdownArrow4040
D4errorInfo2121
D5securityConfirmMain144144
D6biometricsAllowMain8080
D7showPin2015
D8hidePin2015
D9alertWindowIcon2424Android only
D10close2424
D11back2424

Color Customization

Colors can be customized in a static way as a static string; with the UI screenshots and Key mapping index table below, the colors of each string can be defined in the colors.xml.Note that some keys are not specified in the screenshot but can be referenced from the A and C index table in the colors.xml (for Android) and color(for iOS) column.
To avoid dynamic customization, initialize a TextConfig that contains text only with no color value. For example, use a configuration with new TextConfig(key, undefined, font).
For the static resource usage, please check Android - colors.xml and iOS - CirclePWTheme.json.

New, Confirm, and Enter PIN Code

Security Intros

Security Questions

Security Summary

Security Confirm

Recover PIN Code

F Index Table

#colors.xmliOS
CirclePWTheme.json
Color CodeNote
F1circlepw_text_maintext_main#1A1A1A
F2circlepw_text_auxiliarytext_auxiliary#3D3D3D
F3circlepw_text_actiontext_action#136FD8Normal action text color
F4circlepw_text_action_pressedtext_action_pressed#B3136FD8Pressed action text color
F5circlepw_placeholdertext_placeholder#A3A3A3
F6circlepw_errorerror#F55538
F7circlepw_error_backgrounderror_background#FDF2F2
F8circlepw_text_main2text_main2#1C1C1C
F9circlepw_text_auxiliary2text_auxiliary2#707070
F10circlepw_text_summarytext_summary#0073C3
F11circlepw_disabled_main_bt_textmain_bt_text_disabled#80FFFFFFDisabled button text color
F12circlepw_main_bt_textmain_bt_text#FFFFFFNormal button text color
F13circlepw_main_bt_text_pressedmain_bt_text_pressed#FFFFFFPressed button text color
F14circlepw_disabled_main_bt_backgroundmain_bt_background_disabled#800073C3Disabled button background color
F15circlepw_main_bt_backgroundmain_bt_background#0073C3Normal button background color
F16circlepw_main_bt_background_pressedmain_bt_background_pressed#1AA3FFPressed button background color
F17circlepw_successsuccess#0073C3
F18circlepw_input_boarderinput_border#E8E8E8Normal input field border
F19circlepw_input_boarder_focusedinput_border_focused#46B5FFFocused input field border
F20circlepw_tag_textrecover_pin_hint_title#005339Tag text color
F21circlepw_tag_backgroundrecover_pin_hint_title_bg#E1F2FFTag background color
F22circlepw_tag_following_textrecover_pin_hint#0073C3
F23circlepw_dividerdivider#F0EFEF
F24circlepw_pin_dot_basepin_dot_base#FFFFFFPIN dot unfilled color
F25circlepw_pin_dot_base_boarderpin_dot_base_boarder#707070PIN dot unfilled border color
F26circlepw_pin_dot_activatedpin_dot_activated#0073C3PIN dot filled color
F27circlepw_backgroundbackground#FFFFFFGeneral background color
F28circlepw_security_confirm_main_bgsecurity_confirm_main_bg#E9EEFE
F29circlepw_disabled_input_backgroundinput_background_disabled#F5F5F5Disabled input field background color
F30circlepw_second_bt_textsecond_bt_text# 0073C3
F32circlepw_second_bt_bordersecond_bt_border# 0073C3
F34circlepw_second_bt_backgroundsecond_bt_background# FFFFFF
F35circlepw_second_bt_background_pressedsecond_bt_background_pressed# F1F9FE
F37circlepw_plain_bt_textplain_bt_text# 0073C3
F39circlepw_plain_bt_backgroundplain_bt_background# FFFFFF
F40circlepw_plain_bt_background_pressedplain_bt_background_pressed# F1F9FE

Text Style / Font Customization

Styles can be customized in a Static way as a static style by using the UI screenshots and Key mapping index table below. The styles of each string can be defined in the styles.xml file.
To avoid dynamic customization, initialize a TextConfig that contains text and color only. For example, use a configuration with new TextConfig(key, color, undefined).

πŸ”–

Note:

Some keys (error message) are not specified in the screenshot but can be referenced from the A and C index table at the styles.xmlfile column.

For the static resource usage, please check Android - styles.xml and iOS - CirclePWTheme.json.

G Index Table

#styles.xmliOS
CirclePWTheme.json
Note
G1circlepw_heading3semibold
G2circlepw_heading4semibold
G3circlepw_heading5semibold
G4circlepw_body1regular
G5circlepw_body2regular
G6circlepw_caption1semibold
G7circlepw_caption2semibold
G8circlepw_metadata1regular
G9circlepw_metadata2regular
G10circlepw_actionTextsemibold
G11circlepw_pinDigitTextlight
G12circlepw_mainButtonTextsemibold
G13circlepw_toolbarTitlemedium
G14circlepw_datePickerAndroid only
G15circlepw_secondButtonTextsemibold
G16circlepw_plainButtonTextsemibold

Static Resources

This section describes how to customize the UI statically.
Android - strings.xml
The example values in the strings.xml file below can be used for Static Customization. The fields also show the default string values in the SDK if you do not set dynamic customization.
Please reference this example and add/update any desired text string in your strings.xml under the res/values folder.

<resources>
    <!--    [General]-->
    <string name="circlepw_continue">Continue</string>
    <string name="circlepw_next">Next</string>
  <string name="circlepw_skip">Skip</string>
    <string name="circlepw_question_label">Question:</string>
    <string name="circlepw_answer_label">Answer:</string>
    <string name="circlepw_hint_label">Hint:</string>
    <string name="circlepw_hint_tag">Hint</string>
    <string name="circlepw_empty"></string>
    <string name="circlepw_empty_placeholder">-</string>
    <string name="circlepw_confirm">Confirm</string>
    <string name="circlepw_pin_remain_attemps_template">You have %s attempts left.</string>
    <string name="circlepw_pin_lock_period_template">You’ve used up all PIN attempts. Please wait for %s mins to retry later.</string>
    <string name="circlepw_answer_remain_attemps_template">You have %s attempts left.</string>
    <string name="circlepw_answer_lock_period_template">Please wait for %s mins to retry later.</string>

    <!--    [Page] EnterPINCode-->
    <string name="circlepw_enter_pincode_subhead">Let us know if it’s really you.</string>
    <string name="circlepw_enter_pincode_forgot_pin">Forgot PIN?</string>
  <string name="circlepw_enter_pincode_use_biometrics">Use Biometrics</string>

    <!-- [Page] NewPINCode   -->
    <string name="circlepw_new_pincode_subhead">Your PIN can’t have repeating (e.g. 000000) or consecutive (e.g. 123456) numbers.</string>
    <!--  [Page] ConfirmPINCode  -->
    <string name="circlepw_confirm_pincode_headline">Re-enter your PIN to confirm</string>
    <string name="circlepw_confirm_pincode_subhead"></string>
    <!--  [Page] SecurityIntros  -->
    <string name="circlepw_security_intros_description">This is the only way to recover wallet access if you forget your PIN. Pick 2 security questions and provide answers for access recovery.</string>

    <!--  [Page] SecurityQuestions  -->
    <string name="circlepw_security_questions_title">Recovery method</string>
    <string name="circlepw_security_questions_required_mark">*</string>
    <string name="circlepw_security_questions_question_placeholder">Select one question</string>
    <string name="circlepw_security_questions_answer_header">Provide an answer</string>
    <string name="circlepw_security_questions_answer_placeholder">Type your answer here</string>
    <string name="circlepw_security_questions_answer_hint_header">Provide an answer hint (optional)</string>
    <string name="circlepw_security_questions_answer_hint_placeholder">Type your hint here</string>
    
    <!-- [Page] SelectQuestion   -->
    <string name="circlepw_select_question_title">Select one question</string>
    <!-- [Page] SecuritySummary   -->
    <string name="circlepw_security_summary_title">Summary</string>
    
    <!-- [Page] SecurityConfirm  -->
    <string name="circlepw_security_confirm_title">Confirmation</string>
    <string name="circlepw_security_confirm_headline">Keep your questions safe</string>
    <string name="circlepw_security_confirm_input_headline">Type \"I agree\" to proceed:</string>
    <string name="circlepw_security_confirm_input_placeholder">Type \"I agree\" here</string>
    <string name="circlepw_security_confirm_input_match">I agree</string>
    
    <!-- [Page] RecoverPINCode  -->
    <string name="circlepw_recover_pincode_answer_input_header">Enter your answer here</string>
    <string name="circlepw_recover_pincode_answer_input_placeholder">Type your answer here</string>

  <!--    [PageBiometricsAllowFragment]-->
    <string name="circlepw_pin_biometrics_allow_title">Allow Biometrics for Web3 Access</string>
    <string name="circlepw_pin_biometrics_allow_subtitle">Elevate your experience with effortless biometrics  recognition</string>
    <string name="circlepw_pin_biometrics_disable">Don\'t ask me again</string>
    <string name="circlepw_pin_biometrics_encrypt_title">Verify It\'s Youe</string>
    <string name="circlepw_pin_biometrics_encrypt_negative_text">Cancel</string>
    <string name="circlepw_pin_biometrics_encrypt_subtitle"></string>
    <string name="circlepw_pin_biometrics_encrypt_desc"></string>
    <string name="circlepw_pin_biometrics_decrypt_title">Verify It\'s Youe</string>
    <string name="circlepw_pin_biometrics_decrypt_negative_text">Cancel</string>
    <string name="circlepw_pin_biometrics_decrypt_subtitle"></string>
    <string name="circlepw_pin_biometrics_decrypt_desc"></string>

    <string name="circlepw_pin_biometrics_update_title">Update Biometrics for Web3 Access</string>
    <string name="circlepw_pin_biometrics_update_subtitle">Please update your biometrics</string>
</resources>


iOS - CirclePWLocalizable.strings

Setup
  1. Create a file CirclePWLocalizable.strings in your main bundle.
  2. Provide your strings. Partial override is supported.

πŸ”–

Note:

You can provide specific keys and values you want to override and others keys will still refer to the default values.

  1. Localization is supported. For more information, see Localization | Apple Developer Documentation.
Example CirclePWLocalizable.strings
/*
 * Loco ios export: iOS Localizable.strings
 * Project: strings.xml conversion
 * Release: Working copy
 * Locale: en, English
 * Exported by: Circle
 * Exported at: Tue, 27 Jun 2023 23:35:22 +0800
 */


// [General]
"circlepw_show_pin" = "Show PIN";
"circlepw_hide_pin" = "Hide PIN";
"circlepw_continue" = "Continue";
"circlepw_next" = "Next";
"circlepw_confirm" = "Confirm";
"circlepw_skip" = "Skip";


"circlepw_question" = "Question";
"circlepw_answer" = "Answer";
"circlepw_hint" = "Hint";
"circlepw_empty_placeholder" = "-";


// [Page] EnterPINCode
"circlepw_enter_pincode_headline" = "Enter your";
"circlepw_enter_pincode_headline_2" = "PIN";
"circlepw_enter_pincode_subhead" = "Let us know if it’s really you.";
"circlepw_enter_pincode_forgot_pin" = "Forgot PIN?";
"circlepw_enter_pincode_use_biometrics" = "Use Biometrics";


// [Page] NewPINCode
"circlepw_new_pincode_headline" = "Enter your";
"circlepw_new_pincode_headline_2" = "New PIN";
"circlepw_new_pincode_subhead" = "Your PIN can’t have repeating (e.g. 000000) or consecutive (e.g. 123456) numbers.";


// [Page] ConfirmPINCode
"circlepw_confirm_pincode_headline" = "Re-enter your PIN to confirm";
"circlepw_confirm_pincode_headline_2" = "";
"circlepw_confirm_pincode_subhead" = "";


// [Page] SecurityIntros
"circlepw_security_intros_title" = "Recovery Method";
"circlepw_security_intros_headline" = "Set up your";
"circlepw_security_intros_headline_2" = "Recovery Method";
"circlepw_security_intros_description" = "This is the only way to recover wallet access if you forget your PIN. Pick 2 security questions and provide answers for access recovery.";
"circlepw_security_intros_link" = "Learn more";


// [Page] SecurityQuestions
"circlepw_security_questions_title" = "Recovery method";
"circlepw_security_questions_question_header" = "Choose your %@ question";
"circlepw_security_questions_question_placeholder" = "Select one question";
"circlepw_security_questions_required_mark" = "*";
"circlepw_security_questions_answer_header" = "Provide an answer";
"circlepw_security_questions_answer_placeholder" = "Type your answer here";
"circlepw_security_questions_answer_hint_header" = "Provide an answer hint (optional)";
"circlepw_security_questions_answer_hint_placeholder" = "Type your hint here";


// [Page] SelectQuestion
"circlepw_select_question_title" = "Select one question";


// [Page] SecuritySummary
"circlepw_security_summary_title" = "Summary";


// [Page] SecurityConfirm
"circlepw_security_confirm_title" = "Confirmation";
"circlepw_security_confirm_headline" = "Keep your questions safe";
"circlepw_security_confirm_input_headline" = "Type β€œI agree” to proceed:";
"circlepw_security_confirm_input_placeholder" = "Type β€œI agree” here";
"circlepw_security_confirm_input_match" = "I agree";


// [Page] RecoverPINCode
"circlepw_recover_pincode_headline" = "Recover your";
"circlepw_recover_pincode_headline_2" = "Web3 PIN";
"circlepw_recover_pincode_subhead" = "Please enter the answer of the security questions provided below.";
"circlepw_recover_pincode_answer_input_header" = "Enter your answer here";
"circlepw_recover_pincode_answer_input_placeholder" = "Type your answer here";


// [Page] BiometricsPrompt
"circlepw_pin_biometrics_allow_title" = "Allow Biometrics for Web3 Access";
"circlepw_pin_biometrics_allow_subtitle" = "Elevate Your Experience with Effortless Biometrics";
"circlepw_pin_biometrics_failed_title" = "Failed Biometrics for Web3 Access";
"circlepw_pin_biometrics_update_title" = "Update Biometrics for Web3 Access";
"circlepw_pin_biometrics_update_subtitle" = "Please update your biometrics";
"circlepw_pin_biometrics_disable" = "Don't ask me again";
"circlepw_pin_touch_id_dialog_subtitle" = "Using Touch ID protect PIN";

Android - colors.xml

The example values in the colors.xml file can be used for Static Customization. The fields also show the default string values in the SDK if you do not set dynamic customization.
Please reference this example and add/update any desired text color in your colors.xml under the res/values folder of the App project.

<resources> 
<color name="circlepw_text_main">#1A1A1A</color> 
<color name="circlepw_text_auxiliary">#3D3D3D</color> <color name="circlepw_text_action">#136FD8</color> <color name="circlepw_text_action_pressed">#B3136FD8</color> <color name="circlepw_placeholder">#A3A3A3</color> <color name="circlepw_error">#F55538</color> <color name="circlepw_error_background">#FDF2F2</color> <color name="circlepw_text_main2">#1C1C1C</color> <color name="circlepw_text_auxiliary2">#707070</color> <color name="circlepw_text_summary">#0073C3</color> <color name="circlepw_disabled_main_bt_text">#80FFFFFF</color> <color name="circlepw_disabled_main_bt_background">#800073C3</color> <color name="circlepw_main_bt_text">#ffffff</color> <color name="circlepw_main_bt_background">#0073C3</color> <color name="circlepw_main_bt_text_pressed">#ffffff</color> <color name="circlepw_main_bt_background_pressed">#1AA3FF</color> 
<color name="circlepw_second_bt_text">#0073C3</color>
    <color name="circlepw_second_bt_text_disabled">#800073C3</color>
    <color name="circlepw_second_bt_border">#0073C3</color>
    <color name="circlepw_second_bt_border_disabled">#800073C3</color>
    <color name="circlepw_second_bt_background">#FFFFFF</color>
    <color name="circlepw_second_bt_background_pressed">#F1F9FE</color>
    <color name="circlepw_second_bt_background_disabled">#80F1F9FE</color>
    <color name="circlepw_plain_bt_text">#0073C3</color>
    <color name="circlepw_plain_bt_text_disabled">#800073C3</color>
    <color name="circlepw_plain_bt_background">#FFFFFF</color>
    <color name="circlepw_plain_bt_background_pressed">#F1F9FE</color>
    <color name="circlepw_plain_bt_background_disabled">#80F1F9FE</color>
<color name="circlepw_success">#0B9C4A</color> <color name="circlepw_input_boarder">#E8E8E8</color> <color name="circlepw_input_boarder_focused">#46B5FF</color> <color name="circlepw_tag_text">#005339</color> <color name="circlepw_tag_background">#E1F2FF</color> <color name="circlepw_tag_following_text">#0073C3</color> <color name="circlepw_divider">#F0EFEF</color> <color name="circlepw_pin_dot_base">#ffffff</color> <color name="circlepw_pin_dot_base_boarder">#707070</color> 
<color name="circlepw_pin_dot_activated">#0073C3</color>
<color name="circlepw_background">#FFFFFF</color> <color name="circlepw_security_confirm_main_bg">#E9EEFE</color> <color name="circlepw_disabled_input_background">#F5F5F5</color> </resources>


Android - styles.xml

The example values in the styles.xml file can be used for Static Customization. The fields also show the default style values in the SDK if you do not set dynamic customization.
Please reference this example and add or update any desired text styles in your styles.xml file under the res/values folder of the App project.
The style can be used to define textSize and fontWeight, and it can also be used in conjunction with the static colors key defined in colors.xml, such as in the following:

<item name="colorControlActivated">@color/circlepw_input_boarder_focused</item>

<resources>
    <style name="circlepw_heading3">
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_heading4">
        <item name="android:textSize">20sp</item>
    </style>
    <style name="circlepw_heading5">
        <item name="android:textSize">18sp</item>
    </style>
    <style name="circlepw_body1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_body2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_caption1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_caption2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_metadata1">
        <item name="android:textSize">12sp</item>
    </style>
    <style name="circlepw_metadata2">
        <item name="android:textSize">10sp</item>
    </style>
    <style name="circlepw_actionText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_pinDigitText">
        <item name="android:textSize">40sp</item>
    </style>
    <style name="circlepw_mainButtonText">
        <item name="android:textSize">16sp</item>
    </style>
 <style name="circlepw_secondButtonText">
       <item name="android:textSize">16sp</item>
 </style>
 <style name="circlepw_plainButtonText">
       <item name="android:textSize">16sp</item>
 </style>
    <style name="circlepw_toolbarTitle">
        <item name="android:textSize">18sp</item>
    </style>

    <style name="circlepw_datePicker" parent="Theme.AppCompat.Light.Dialog">
        <!-- Top background-->
        <item name="colorAccent">@color/circlepw_main_bt_background</item>
        <!--selected Item color-->
        <item name="colorControlActivated">@color/circlepw_main_bt_background</item>
        <!-- arrow bordercolor(<>)-->
        <item name="android:selectableItemBackgroundBorderless">@color/circlepw_background</item>
        <!--Calender Background color -->
        <item name="android:windowBackground">@color/circlepw_background</item>
        <!-- Ok Cancel Color-->
        <item name="colorOnPrimary">@color/circlepw_main_bt_background</item>
        <!-- Week TextColor-->
        <item name="android:textColorSecondary">@color/circlepw_text_main</item>
        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">@color/circlepw_text_main</item>
        <!--day , month-->
        <item name="android:textColorPrimaryInverse">@color/circlepw_background</item>
        <!-- year-->
        <item name="android:textColorSecondaryInverse">@color/circlepw_background</item>
    </style>

</resourc

The style can be used to define textSize and fontWeight, and it can also be used in conjunction with the static colors key defined in colors.xml, such as in the following:

<item name="colorControlActivated">@color/circlepw_input_boarder_focused</item>

<resources>
    <style name="circlepw_heading3">
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_heading4">
        <item name="android:textSize">20sp</item>
    </style>
    <style name="circlepw_heading5">
        <item name="android:textSize">18sp</item>
    </style>
    <style name="circlepw_body1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_body2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_caption1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_caption2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_metadata1">
        <item name="android:textSize">12sp</item>
    </style>
    <style name="circlepw_metadata2">
        <item name="android:textSize">10sp</item>
    </style>
    <style name="circlepw_actionText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_pinDigitText">
        <item name="android:textSize">40sp</item>
    </style>
    <style name="circlepw_mainButtonText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_toolbarTitle">
        <item name="android:textSize">18sp</item>
    </style>

    <style name="circlepw_datePicker" parent="Theme.AppCompat.Light.Dialog">
        <!-- Top background-->
        <item name="colorAccent">@color/circlepw_main_bt_background</item>
        <!--selected Item color-->
        <item name="colorControlActivated">@color/circlepw_main_bt_background</item>
        <!-- arrow bordercolor(<>)-->
        <item name="android:selectableItemBackgroundBorderless">@color/circlepw_background</item>
        <!--Calender Background color -->
        <item name="android:windowBackground">@color/circlepw_background</item>
        <!-- Ok Cancel Color-->
        <item name="colorOnPrimary">@color/circlepw_main_bt_background</item>
        <!-- Week TextColor-->
        <item name="android:textColorSecondary">@color/circlepw_text_main</item>
        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">@color/circlepw_text_main</item>
        <!--day , month-->
        <item name="android:textColorPrimaryInverse">@color/circlepw_background</item>
        <!-- year-->
        <item name="android:textColorSecondaryInverse">@color/circlepw_background</item>
    </style>

</resources>


iOS - CirclePWTheme.json

Setup
  1. Copy the file CirclePWTheme.json into your main bundle. You can use Cmd + drag and drop.
  1. Make sure you have selected the Target Membership.
  1. Provide values to set the font: To use a custom font, refer to this document: Adding a Custom Font to Your App | Apple Developer Documentation.
  2. Set the color with a hex string:
Example: CirclePWTheme.json
{
  "font": {
    "ultraLight": "",
    "thin": "",
    "light": "",
    "regular": "CustomFont-Regular",
    "medium": "CustomFont-Medium",
    "semibold": "",
    "bold": "",
    "heavy": "",
    "black": ""
  },
  "color": {
    "background": "#FFFFFF",
    "divider": "#F0EFEF",
    "success": "#0B9C4A",
    "error": "#F55538",
    "error_background": "#FDF2F2",


    "text_main": "#1A1A1A",
    "text_main2": "#1C1C1C",
    "text_auxiliary": "#3D3D3D",
    "text_auxiliary2": "#707070",
    "text_summary": "#0073C3",
    "text_summary_highlight": "#0073C3",
    "text_placeholder": "#A3A3A3",
    "text_action": "#136FD8",
    "text_action_pressed": "#B3136FD8",
    "text_prompt": "#29233B",
    "text_prompt2": "#6B6580",




    "pin_dot_base": "#FFFFFF",
    "pin_dot_base_border": "#707070",
    "pin_dot_activated": "#3D3D3D",
    "pin_dot_focused": "#0073C3",


    "input_border": "#E8E8E8",
    "input_border_focused": "#46B5FF",
    "input_background_disabled": "#F5F5F5",


    "main_bt_text": "#FFFFFF",
    "main_bt_text_pressed": "#80FFFFFF",
    "main_bt_text_disabled": "#BFBFBF",
    "main_bt_background": "#0073C3",
    "main_bt_background_pressed": "#1AA3FF",
    "main_bt_background_disabled": "#F5F5F5",


    "second_bt_text": "#0073C3",
    "second_bt_border": "#0073C3",
    "second_bt_background": "#FFFFFF",
    "second_bt_background_pressed": "#F1F9FE",


    "plain_bt_text": "#0073C3",
    "plain_bt_background": "#FFFFFF",
    "plain_bt_background_pressed": "#F1F9FE",


    "recover_pin_hint_title": "#3D3652",
    "recover_pin_hint_title_bg": "#E1F2FF",
    "recover_pin_hint": "#0073C3",


    "security_confirm_main_bg": "#E9EEFE",


    "title_gradients": ["#0073C3", "#0073C3"],
  }
}