diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index 0665b2e90b..5ca0146d8b 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -231,30 +231,36 @@ }, "TOP_UP_VIEW": { "header": { - "title": "How would you like to add coins?" + "title": "How would you like to add tokens?" }, "topUpOptions": { - "onramp": { - "heading": "Buy", - "caption": "With card, Google pay or Apple pay available.", + "debit": { + "heading": "Buy with Debit Card", + "caption": "The recommended way to buy tokens", + "subcaption": "Fees ", + "disabledCaption": "" + }, + "credit": { + "heading": "Buy with Credit Card", + "caption": "Not recommended due to failures & charges", "subcaption": "Fees ", "disabledCaption": "" }, "swap": { - "heading": "Swap", - "caption": "With the coins I have in my balance.", + "heading": "Swap tokens on this network", + "caption": "Immutable zkEVM only", "subcaption": "Fees", "disabledCaption": "Not available in your region" }, "bridge": { - "heading": "Move", - "caption": "The coins I have in another wallet or network.", + "heading": "Transfer tokens from another wallet", + "caption": "Immutable zkEVM only", "subcaption": "Fees ", "disabledCaption": "" }, "advanced": { - "heading": "Advanced options", - "caption": "Perform a fast bridge or CEX deposit.", + "heading": "Bridge tokens from another network", + "caption": "Multiple network and CEX options available", "subcaption": "Fees ", "disabledCaption": "" } @@ -341,7 +347,7 @@ } }, "topUp": { - "heading": "You’ll need to add some coins", + "heading": "You’ll need to add some tokens", "subheading": { "both": "Add {{erc20.value}} {{erc20.symbol}} and {{native.value}} {{native.symbol}} to cover this purchase plus gas.", "erc20": "Add {{erc20.value}} {{erc20.symbol}} to your balance through one of the following options.", diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json index d65427548e..1553f4b1cc 100644 --- a/packages/checkout/widgets-lib/src/locales/ja.json +++ b/packages/checkout/widgets-lib/src/locales/ja.json @@ -237,30 +237,36 @@ }, "TOP_UP_VIEW": { "header": { - "title": "コインを追加する方法は？" + "title": "どのようにトークンを追加しますか？" }, "topUpOptions": { - "onramp": { - "heading": "購入", - "caption": "カード、Googleペイ、またはAppleペイが利用可能。", + "debit": { + "heading": "デビットカードで購入", + "caption": "トークンを購入する推奨方法", + "subcaption": "手数料", + "disabledCaption": "" + }, + "credit": { + "heading": "クレジットカードで購入", + "caption": "失敗や手数料のためおすすめできません", "subcaption": "手数料", "disabledCaption": "" }, "swap": { - "heading": "交換", - "caption": "私の残高にあるコインで。", + "heading": "このネットワークでトークンをスワップ", + "caption": "イミュータブル zkEVM のみ", "subcaption": "手数料", "disabledCaption": "お住まいの地域では利用できません" }, "bridge": { - "heading": "移動", - "caption": "別のウォレットやネットワークにある私のコイン。", + "heading": "他のウォレットからトークンを送金する", + "caption": "イミュータブル zkEVM のみ", "subcaption": "手数料", "disabledCaption": "" }, "advanced": { - "heading": "高度なオプション", - "caption": "迅速なブリッジまたはCEX入金を実行します。", + "heading": "他のネットワークからトークンをブリッジする", + "caption": "複数のネットワークとCEXのオプションが利用可能", "subcaption": "手数料", "disabledCaption": "" } @@ -328,7 +334,7 @@ } }, "topUp": { - "heading": "残高が不足しています", + "heading": "トークンを追加する必要があります", "subheading": { "both": "この購入とガスをカバーするために{{erc20.value}} {{erc20.symbol}}と{{native.value}} {{native.symbol}}を追加する必要があります。", "erc20": "残高が不足しているため、{{erc20.value}} {{erc20.symbol}}を追加する必要があります。", diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json index 2fbd361129..7bb8823fcb 100644 --- a/packages/checkout/widgets-lib/src/locales/ko.json +++ b/packages/checkout/widgets-lib/src/locales/ko.json @@ -230,30 +230,36 @@ }, "TOP_UP_VIEW": { "header": { - "title": "코인을 어떻게 추가하시겠습니까?" + "title": "토큰을 어떻게 추가하시겠습니까?" }, "topUpOptions": { - "onramp": { - "heading": "구매", - "caption": "카드, 구글 페이 또는 애플 페이 가능.", + "debit": { + "heading": "직불 카드로 구매", + "caption": "토큰을 구매하는 권장 방법", + "subcaption": "수수료", + "disabledCaption": "" + }, + "credit": { + "heading": "신용 카드로 구매", + "caption": "실패 및 요금 때문에 권장하지 않습니다", "subcaption": "수수료", "disabledCaption": "" }, "swap": { - "heading": "스왑", - "caption": "내 잔액에 있는 코인으로.", + "heading": "이 네트워크에서 토큰 교환", + "caption": "불변 zkEVM 전용", "subcaption": "수수료", "disabledCaption": "귀하의 지역에서 사용할 수 없음" }, "bridge": { - "heading": "이동", - "caption": "다른 지갑이나 네트워크에 있는 내 코인.", + "heading": "다른 지갑에서 토큰을 전송", + "caption": "불변 zkEVM 전용", "subcaption": "수수료", "disabledCaption": "" }, "advanced": { - "heading": "고급 옵션", - "caption": "빠른 브릿지 또는 CEX 입금을 수행합니다.", + "heading": "다른 네트워크에서 토큰 브리지", + "caption": "여러 네트워크 및 CEX 옵션 사용 가능", "subcaption": "수수료", "disabledCaption": "" } @@ -321,7 +327,7 @@ } }, "topUp": { - "heading": "일부 코인을 추가해야합니다", + "heading": "토큰을 추가해야 합니다", "subheading": { "both": "이 구매 및 가스를 포함하여 이를 커버하기 위해 {{erc20.value}} {{erc20.symbol}} 및 {{native.value}} {{native.symbol}}를 추가하십시오.", "erc20": "다음 옵션 중 하나를 통해 균형에 {{erc20.value}} {{erc20.symbol}}를 추가하십시오.", diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json index 79c2a45880..2383034526 100644 --- a/packages/checkout/widgets-lib/src/locales/zh.json +++ b/packages/checkout/widgets-lib/src/locales/zh.json @@ -230,30 +230,36 @@ }, "TOP_UP_VIEW": { "header": { - "title": "您想如何添加代币？" + "title": "你想如何添加代币？" }, "topUpOptions": { - "onramp": { - "heading": "购买", - "caption": "可通过卡、谷歌支付或苹果支付。", + "debit": { + "heading": "用借记卡购买", + "caption": "推荐的购买代币方法", + "subcaption": "费用", + "disabledCaption": "" + }, + "credit": { + "heading": "用信用卡购买", + "caption": "由于失败和费用，不推荐使用", "subcaption": "费用", "disabledCaption": "" }, "swap": { - "heading": "兑换", - "caption": "使用我在余额中的代币。", + "heading": "在此网络上交换代币", + "caption": "仅限不可变 zkEVM", "subcaption": "费用", "disabledCaption": "您所在的地区不可用" }, "bridge": { - "heading": "转移", - "caption": "我在其他钱包或网络中的代币。", + "heading": "从另一个钱包转移代币", + "caption": "仅限不可变 zkEVM", "subcaption": "费用", "disabledCaption": "" }, "advanced": { - "heading": "高级选项", - "caption": "进行快速桥接或CEX存款。", + "heading": "从另一个网络桥接代币", + "caption": "多种网络和CEX选项可用", "subcaption": "费用", "disabledCaption": "" } @@ -321,7 +327,7 @@ } }, "topUp": { - "heading": "您需要添加一些硬币", + "heading": "你需要添加一些代币", "subheading": { "both": "添加{{erc20.value}} {{erc20.symbol}}和{{native.value}} {{native.symbol}}以支付本次购买及燃气费。", "erc20": "通过以下选项之一将{{erc20.value}} {{erc20.symbol}}添加到您的余额。", diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx index 2ae594ee53..3ac63a2789 100644 --- a/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx +++ b/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx @@ -1,9 +1,11 @@ -import { Box, MenuItem } from '@biom3/react'; +import { Box, MenuItem, IconProps } from '@biom3/react'; import { ReactNode } from 'react'; export interface TopUpMenuItemProps { testId: string; - icon: 'Wallet' | 'Coins' | 'Minting'; + icon: IconProps['icon']; + iconVariant?: IconProps['variant']; + intentIcon?: IconProps['icon']; heading: string; caption: string; onClick: () => void; @@ -12,24 +14,27 @@ export interface TopUpMenuItemProps { } export function TopUpMenuItem({ - testId, icon, heading, caption, onClick, renderFeeFunction, isDisabled, + testId, icon, iconVariant, intentIcon, heading, caption, onClick, renderFeeFunction, isDisabled, }: TopUpMenuItemProps) { return ( {heading} - + {caption}
diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx index a716a687d8..9f26ce248a 100644 --- a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx +++ b/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx @@ -37,7 +37,7 @@ import { } from '../../context/crypto-fiat-context/CryptoFiatContext'; import { OnRampWidgetViews } from '../../context/view-context/OnRampViewContextTypes'; import { EventTargetContext } from '../../context/event-target-context/EventTargetContext'; -import { TopUpMenuItem } from './TopUpMenuItem'; +import { TopUpMenuItem, TopUpMenuItemProps } from './TopUpMenuItem'; interface TopUpViewProps { widgetEvent: IMTBLWidgetEvents; @@ -57,6 +57,15 @@ interface TopUpViewProps { subheading?: [key: string, options?: $Dictionary]; } +type TopUpFeatures = Partial & { + testId: string; + textConfigKey: string; + onClickEvent: () => void; + fee: (txt: string) => ReactNode; + isAvailable: boolean; + isEnabled: boolean; +}; + export const TOOLKIT_BASE_URL = { [Environment.SANDBOX]: 'https://checkout-playground.sandbox.immutable.com', [Environment.PRODUCTION]: 'https://toolkit.immutable.com', @@ -94,7 +103,7 @@ export function TopUpView({ const [onRampFeesPercentage, setOnRampFeesPercentage] = useState('-.--'); const swapFeesInFiat = '0.05'; - const [bridgeFeesInFiat, setBridgeFeesInFiat] = useState('-.--'); + const [, setBridgeFeesInFiat] = useState('-.--'); const [isSwapAvailable, setIsSwapAvailable] = useState(true); const title = heading ? t(...heading) : t('views.TOP_UP_VIEW.header.title'); @@ -276,20 +285,45 @@ export function TopUpView({ ); - const topUpFeatures = [ + const topUpFeatures: TopUpFeatures[] = [ + { + testId: 'onramp', + icon: 'BankCard', + iconVariant: 'bold', + textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.debit', + onClickEvent: onClickOnRamp, + fee: () => renderFees( + `${t( + 'views.TOP_UP_VIEW.topUpOptions.debit.subcaption', + )} ≈ ${onRampFeesPercentage}%`, + ), + isAvailable: true, + isEnabled: showOnrampOption, + }, { testId: 'onramp', icon: 'BankCard', - textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.onramp', + textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.credit', onClickEvent: onClickOnRamp, fee: () => renderFees( `${t( - 'views.TOP_UP_VIEW.topUpOptions.onramp.subcaption', + 'views.TOP_UP_VIEW.topUpOptions.credit.subcaption', )} ≈ ${onRampFeesPercentage}%`, ), isAvailable: true, isEnabled: showOnrampOption, }, + { + testId: 'advanced', + icon: 'Minting', + iconVariant: 'bold', + intentIcon: 'JumpTo', + textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.advanced', + onClickEvent: onClickAdvancedOptions, + fee: () => renderFees(''), + isAvailable: true, + isEnabled: true, + }, { testId: 'swap', icon: 'Swap', @@ -305,25 +339,12 @@ export function TopUpView({ }, { testId: 'bridge', - icon: 'Minting', + icon: 'ArrowForward', textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.bridge', onClickEvent: onClickBridge, - fee: () => renderFees( - `${t( - 'views.TOP_UP_VIEW.topUpOptions.bridge.subcaption', - )} ≈ $${bridgeFeesInFiat} ${fiatSymbol.toUpperCase()}`, - ), - isAvailable: true, - isEnabled: showBridgeOption, - }, - { - testId: 'advanced', - icon: 'JumpTo', - textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.advanced', - onClickEvent: onClickAdvancedOptions, fee: () => renderFees(''), isAvailable: true, - isEnabled: true, + isEnabled: showBridgeOption, }, ]; @@ -352,7 +373,9 @@ export function TopUpView({