feat: [GPR-544][Sale Widget] Multicurrency Payments UI (#1710)

immutable · May 1, 2024 · b938623 · b938623
1 parent 3ef4bc9
commit b938623
Show file tree

Hide file tree

Showing 21 changed files with 931 additions and 258 deletions.
diff --git a/packages/checkout/sdk/src/smartCheckout/routing/swap/swapRoute.ts b/packages/checkout/sdk/src/smartCheckout/routing/swap/swapRoute.ts
@@ -350,7 +350,7 @@ export const swapRoute = async (
     // If no balance found on L2 for this quoted token then continue
     if (!userBalanceOfQuotedToken) continue;
     // Check the amount of quoted token required against the user balance
-    const amountOfQuoteTokenRequired = quote.quote.amount;
+    const amountOfQuoteTokenRequired = quote.quote.amountWithMaxSlippage;
 
     // If user does not have enough balance to perform the swap with this token then continue
     if (userBalanceOfQuotedToken.balance.lt(amountOfQuoteTokenRequired.value)) continue;

diff --git a/packages/checkout/widgets-lib/src/components/Hero/RocketHero.tsx b/packages/checkout/widgets-lib/src/components/Hero/RocketHero.tsx
@@ -5,12 +5,11 @@ import { CHECKOUT_CDN_BASE_URL } from 'lib';
 import { heroBackGroundStyles, heroImageStyles } from './HeroImageStyles';
 
 interface RocketHeroProps {
-  environment: Environment
+  environment: Environment;
 }
 
-export function RocketHero({
-  environment,
-}: RocketHeroProps) {
+export function RocketHero({ environment }: RocketHeroProps) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const { RiveComponent } = useRive({
     src: `${CHECKOUT_CDN_BASE_URL[environment]}/v1/blob/img/rocket.riv`,
     autoplay: true,
@@ -19,11 +18,13 @@ export function RocketHero({
   });
 
   return (
-    <Box sx={{ ...heroBackGroundStyles, background: 'base.color.translucent.emphasis.100' }}>
-      <Box
-        sx={heroImageStyles}
-        rc={<RiveComponent />}
-      />
+    <Box
+      sx={{
+        ...heroBackGroundStyles,
+        background: 'base.color.translucent.emphasis.100',
+      }}
+    >
+      <Box sx={heroImageStyles} rc={<RiveComponent />} />
     </Box>
   );
 }
diff --git a/packages/checkout/widgets-lib/src/context/view-context/SaleViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/SaleViewContextTypes.ts
@@ -62,4 +62,5 @@ export enum FundWithSmartCheckoutSubViews {
 export enum OrderSummarySubViews {
   INIT = 'INIT',
   REVIEW_ORDER = 'REVIEW_ORDER',
+  EXECUTE_FUNDING_ROUTE = 'EXECUTE_FUNDING_ROUTE',
 }
diff --git a/packages/checkout/widgets-lib/src/lib/utils.ts b/packages/checkout/widgets-lib/src/lib/utils.ts
@@ -67,9 +67,8 @@ export const calculateCryptoToFiat = (
   amount: string,
   symbol: string,
   conversions: Map<string, number>,
+  zeroString: string = '0.00',
 ): string => {
-  const zeroString = '0.00';
-
   if (!amount) return zeroString;
 
   const conversion = conversions.get(symbol.toLowerCase());

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -252,17 +252,38 @@
       },
       "currency": {
         "fiat": "≈ USD ${{amount}}",
-        "fees": "Fees"
+        "price": "{{symbol}} {{amount}}"
+      },
+      "orderItem": {
+        "quantity": "Qty x{{qty}}"
       },
       "coinsDrawer": {
         "header": "Pay with...",
         "caption1": "Coins",
-        "caption2": "Balance"
+        "caption2": "Balance",
+        "divider": "More options",
+        "payWithCard": {
+          "caption": "Buy this items with card instead"
+        },
+        "stepType": {
+          "SWAP": "Swap {{symbol}} ≈ {{amount}}",
+          "ONRAMP": "Buy {{symbol}} ≈ {{amount}}",
+          "BRIDGE": "Move {{symbol}} ≈ {{amount}}",
+          "SUFFICIENT": "Pay {{symbol}} {{amount}}",
+          "delta": {
+            "SWAP": "Swap {{symbol}} ≈ {{amount}}",
+            "ONRAMP": "Buy {{symbol}} ≈ {{amount}}",
+            "BRIDGE": "Move {{symbol}} ≈ {{amount}}",
+            "SUFFICIENT": "Pay {{symbol}} {{amount}}"
+          }
+        },
+        "fee": "Fees {{symbol}} ≈ {{amount}}"
       },
       "orderReview": {
-        "heading": "Pay with your",
-        "continue": "Continue",
-        "payWithCard": "No thanks, I'll pay with card"
+        "heading": "Payment summary",
+        "continue": "Proceed",
+        "payWith": "Pay with {{symbol}}",
+        "balance": "Balance {{amount}}"
       }
     },
     "FUND_WITH_SMART_CHECKOUT": {

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -255,21 +255,42 @@
     },
     "ORDER_SUMMARY": {
       "loading": {
-        "balances": "数字を計算中" 
+        "balances": "数字を計算中"
       },
       "currency": {
-        "fiat": "≈ USD ${{amount}}",  
-        "fees": "手数料"
+        "fiat": "≈ USD ${{amount}}",
+        "price": "{{symbol}} {{amount}}"
+      },
+      "orderItem": {
+        "quantity": "数量 x{{qty}}"
       },
       "coinsDrawer": {
         "header": "支払い方法…",
         "caption1": "コイン",
-        "caption2": "残高"
+        "caption2": "残高",
+        "divider": "その他のオプション",
+        "payWithCard": {
+          "caption": "代わりにカードで購入"
+        },
+        "stepType": {
+          "SWAP": "{{symbol}}を{{amount}}でスワップ",
+          "ONRAMP": "{{symbol}}を{{amount}}で購入",
+          "BRIDGE": "{{symbol}}を{{amount}}で移動",
+          "SUFFICIENT": "{{symbol}} {{amount}}で支払う",
+          "delta": {
+            "SWAP": "{{symbol}}を{{amount}}でスワップ",
+            "ONRAMP": "{{symbol}}を{{amount}}で購入",
+            "BRIDGE": "{{symbol}}を{{amount}}で移動",
+            "SUFFICIENT": "{{symbol}} {{amount}}で支払う"
+          }
+        },
+        "fee": "手数料 {{symbol}} ≈ {{amount}}"
       },
       "orderReview": {
-        "heading": "お支払い方法", 
-        "continue": "続ける", 
-        "payWithCard": "いいえ、カードで支払います"
+        "heading": "支払いの概要",
+        "continue": "続行",
+        "payWith": "{{symbol}}で支払う",
+        "balance": "残高{{amount}}"
       }
     },
     "FUND_WITH_SMART_CHECKOUT": {
@@ -333,7 +354,6 @@
         "body": "この種の購入にクレジットカードを使用する場合、ほとんどの銀行は現金前払い手数料を請求するか、または取引を完全にブロックします。",
         "ctaButton": "それでも試す"
       }
-
     },
     "PAY_WITH_COINS": {
       "header": {
@@ -687,14 +707,14 @@
     },
     "walletConnectionError": {
       "unableToConnect": {
-          "heading": "接続できません",
-          "body": "ウォレットを確認してもう一度お試しください。または、閉じて別のオプションを試してください。",
-          "actionButtonText": "もう一度試す"
+        "heading": "接続できません",
+        "body": "ウォレットを確認してもう一度お試しください。または、閉じて別のオプションを試してください。",
+        "actionButtonText": "もう一度試す"
       },
       "changedYourMind": {
-          "heading": "考えを変えましたか？",
-          "body": "ポップアップが有効になっていることを確認し、ウォレットのプロンプトに従って接続してください。",
-          "actionButtonText": "もう一度試す"
+        "heading": "考えを変えましたか？",
+        "body": "ポップアップが有効になっていることを確認し、ウォレットのプロンプトに従って接続してください。",
+        "actionButtonText": "もう一度試す"
       }
     }
   }

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -251,18 +251,39 @@
         "balances": "숫자 계산 중"
       },
       "currency": {
-        "fiat": "≈ USD ${{amount}}", 
-        "fees": "수수료"  
+        "fiat": "≈ USD ${{amount}}",
+        "price": "{{symbol}} {{amount}}"
+      },
+      "orderItem": {
+        "quantity": "수량 x{{qty}}"
       },
       "coinsDrawer": {
         "header": "결제 수단...",
-        "caption1": "코인",  
-        "caption2": "잔액"
+        "caption1": "코인",
+        "caption2": "잔액",
+        "divider": "더 많은 옵션",
+        "payWithCard": {
+          "caption": "대신 카드로 구매"
+        },
+        "stepType": {
+          "SWAP": "{{symbol}} ≈ {{amount}} 교환",
+          "ONRAMP": "{{symbol}} ≈ {{amount}} 구매",
+          "BRIDGE": "{{symbol}} ≈ {{amount}} 이동",
+          "SUFFICIENT": "{{symbol}} {{amount}} 지불",
+          "delta": {
+            "SWAP": "{{symbol}} ≈ {{amount}} 교환",
+            "ONRAMP": "{{symbol}} ≈ {{amount}} 구매",
+            "BRIDGE": "{{symbol}} ≈ {{amount}} 이동",
+            "SUFFICIENT": "{{symbol}} {{amount}} 지불"
+          }
+        },
+        "fee": "수수료 {{symbol}} ≈ {{amount}}"
       },
       "orderReview": {
-        "heading": "결제 수단 선택",
-        "continue": "계속하기", 
-        "payWithCard": "아니요, 카드로 결제할게요"  
+        "heading": "결제 요약",
+        "continue": "계속",
+        "payWith": "{{symbol}}로 결제",
+        "balance": "잔액 {{amount}}"
       }
     },
     "FUND_WITH_SMART_CHECKOUT": {
@@ -326,7 +347,6 @@
         "body": "이런 종류의 구매에 신용카드를 사용할 경우 대부분의 은행에서 현금 서비스 수수료를 부과하거나 거래를 전체적으로 차단할 수 있습니다.",
         "ctaButton": "그래도 시도하기"
       }
-
     },
     "PAY_WITH_COINS": {
       "header": {

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -59,11 +59,7 @@
     },
     "ERROR_VIEW": {
       "heading": "出了些问题",
-      "body": [
-        "您可以再试一次或联系",
-        "支持",
-        "寻求帮助。"
-      ],
+      "body": ["您可以再试一次或联系", "支持", "寻求帮助。"],
       "actionText": "再试一次"
     },
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
@@ -252,21 +248,42 @@
     },
     "ORDER_SUMMARY": {
       "loading": {
-        "balances": "正在计算数字" 
+        "balances": "正在计算数字"
       },
       "currency": {
-        "fiat": "≈ USD ${{amount}}", 
-        "fees": "费用"  
+        "fiat": "≈ USD ${{amount}}",
+        "price": "{{symbol}} {{amount}}"
+      },
+      "orderItem": {
+        "quantity": "数量 x{{qty}}"
       },
       "coinsDrawer": {
-        "header": "支付方式…", 
-        "caption1": "硬币", 
-        "caption2": "余额" 
+        "header": "支付方式…",
+        "caption1": "硬币",
+        "caption2": "余额",
+        "divider": "更多选项",
+        "payWithCard": {
+          "caption": "使用银行卡购买此商品"
+        },
+        "stepType": {
+          "SWAP": "交换 {{symbol}} ≈ {{amount}}",
+          "ONRAMP": "购买 {{symbol}} ≈ {{amount}}",
+          "BRIDGE": "移动 {{symbol}} ≈ {{amount}}",
+          "SUFFICIENT": "支付 {{symbol}} {{amount}}",
+          "delta": {
+            "SWAP": "交换 {{symbol}} ≈ {{amount}}",
+            "ONRAMP": "购买 {{symbol}} ≈ {{amount}}",
+            "BRIDGE": "移动 {{symbol}} ≈ {{amount}}",
+            "SUFFICIENT": "支付 {{symbol}} {{amount}}"
+          }
+        },
+        "fee": "费用 {{symbol}} ≈ {{amount}}"
       },
       "orderReview": {
-        "heading": "选择支付方式",
+        "heading": "付款摘要",
         "continue": "继续",
-        "payWithCard": "不用了，我用卡支付"
+        "payWith": "使用{{symbol}}支付",
+        "balance": "余额{{amount}}"
       }
     },
     "FUND_WITH_SMART_CHECKOUT": {
@@ -296,12 +313,12 @@
         "crypto": {
           "heading": "硬币",
           "caption": "请用钱包里的硬币付款，或用卡购买硬币。",
-          "disabledCaption": "目前无法进行此购买。" 
+          "disabledCaption": "目前无法进行此购买。"
         },
         "debit": {
           "heading": "借记卡",
           "caption": "使用卡支付的推荐方式。",
-          "disabledCaption": "我们正在处理此事。请使用硬币继续，如果需要，我们将指导您如何添加它们。" 
+          "disabledCaption": "我们正在处理此事。请使用硬币继续，如果需要，我们将指导您如何添加它们。"
         },
         "credit": {
           "heading": "信用卡",