CM-704 - Updates to copy and icons in the Top Up views (#1861)

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.",

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}}を追加する必要があります。",

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}}를 추가하십시오.",

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}}添加到您的余额。",

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 (
     <Box testId="top-up-view" sx={{ paddingY: '1px' }}>
       <MenuItem
         testId={`menu-item-${testId}`}
-        size="medium"
+        size="small"
         emphasized
         onClick={!isDisabled ? onClick : undefined}
         sx={isDisabled ? { opacity: '0.5', cursor: 'not-allowed' } : {}}
       >
         <MenuItem.Icon
           icon={icon}
+          variant={iconVariant}
         />
         <MenuItem.Label size="medium">
           {heading}
         </MenuItem.Label>
-        <MenuItem.IntentIcon />
+        <MenuItem.IntentIcon
+          icon={intentIcon}
+        />
         <MenuItem.Caption testId={`menu-item-caption-${testId}`}>
           {caption}
           <br />

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<TopUpMenuItemProps> & {
+  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({
     </Box>
   );
 
-  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({
               <TopUpMenuItem
                 key={t(`${element.textConfigKey}.heading`).toLowerCase()}
                 testId={element.testId}
-                icon={element.icon as 'Wallet' | 'Coins' | 'Minting'}
+                icon={element.icon!}
+                iconVariant={element.iconVariant}
+                intentIcon={element.intentIcon}
                 heading={t(`${element.textConfigKey}.heading`)}
                 caption={
                       !element.isAvailable