From 23591c65e1207f2a2f78b0db76b2287e992f141d Mon Sep 17 00:00:00 2001 From: Mimi Immutable Date: Fri, 31 Jan 2025 13:34:59 +1100 Subject: [PATCH] Add fiat & change wallet ability from the route drawer --- .../checkout/widgets-lib/src/locales/en.json | 3 ++- .../checkout/widgets-lib/src/locales/ja.json | 3 ++- .../checkout/widgets-lib/src/locales/ko.json | 1 + .../checkout/widgets-lib/src/locales/zh.json | 3 ++- .../PurchaseRouteOptionsDrawer/FiatOption.tsx | 1 - .../RouteOptions.tsx | 19 ++++++++++++++++++- .../RouteOptionsDrawer.tsx | 9 ++++++++- .../src/widgets/purchase/views/Purchase.tsx | 2 ++ 8 files changed, 35 insertions(+), 6 deletions(-) diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index ceb6e2115e..5abe0e5f4f 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -909,7 +909,7 @@ "drawer": { "options": { "heading": "Pay from", - "moreOptionsDividerText": "More ways to Pay", + "moreOptionsDividerText": "Other ways to Pay", "loadingText1": "Finding the best value", "loadingText2": "across all chains", "noRoutes": { @@ -921,6 +921,7 @@ "caption": "Swap tokens on this network.", "disabledCaption": "Currently not available." }, + "changeWallet": "Choose another wallet", "debit": { "heading": "Debit Card", "caption": "", diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json index 376fada90d..1aaed4ea55 100644 --- a/packages/checkout/widgets-lib/src/locales/ja.json +++ b/packages/checkout/widgets-lib/src/locales/ja.json @@ -892,7 +892,7 @@ "drawer": { "options": { "heading": "支払い元", - "moreOptionsDividerText": "支払い方法の追加", + "moreOptionsDividerText": "その他の支払い方法", "loadingText1": "最適な価値を検索中", "loadingText2": "すべてのチェーンを横断", "noRoutes": { @@ -904,6 +904,7 @@ "caption": "このネットワークでトークンを交換します。", "disabledCaption": "現在利用できません。" }, + "changeWallet": "別のウォレットを選択", "debit": { "heading": "デビットカード", "caption": "", diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json index fb02cca7b7..a06e044f8c 100644 --- a/packages/checkout/widgets-lib/src/locales/ko.json +++ b/packages/checkout/widgets-lib/src/locales/ko.json @@ -901,6 +901,7 @@ "caption": "이 네트워크에서 토큰을 교환합니다.", "disabledCaption": "현재 이용할 수 없습니다." }, + "changeWallet": "다른 지갑 선택", "debit": { "heading": "직불 카드", "caption": "", diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json index 82281e146c..0252b7b050 100644 --- a/packages/checkout/widgets-lib/src/locales/zh.json +++ b/packages/checkout/widgets-lib/src/locales/zh.json @@ -889,7 +889,7 @@ "drawer": { "options": { "heading": "支付来源", - "moreOptionsDividerText": "更多支付方式", + "moreOptionsDividerText": "其他支付方式", "loadingText1": "寻找最佳价值", "loadingText2": "跨所有链", "noRoutes": { @@ -901,6 +901,7 @@ "caption": "在此网络上交换代币。", "disabledCaption": "当前不可用。" }, + "changeWallet": "选择另一个钱包", "debit": { "heading": "借记卡", "caption": "", diff --git a/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/FiatOption.tsx index 01f9dbbcd4..10567675b5 100644 --- a/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/FiatOption.tsx +++ b/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/FiatOption.tsx @@ -56,7 +56,6 @@ export function FiatOption({ }`, )} - {!disabled && } ); } diff --git a/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptions.tsx b/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptions.tsx index 969b21dbd8..a5204004cd 100644 --- a/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptions.tsx +++ b/packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptions.tsx @@ -25,6 +25,7 @@ export interface OptionsProps { onCardClick: (type: FiatOptionType) => void; onRouteClick: (route: RouteData, index: number) => void; onDirectCryptoPayClick: (route: DirectCryptoPayData, index: number) => void; + onChangeWalletClick: () => void; routes?: RouteData[]; size?: MenuItemSize; showOnrampOption?: boolean; @@ -42,6 +43,7 @@ export function RouteOptions({ onCardClick, onRouteClick, onDirectCryptoPayClick, + onChangeWalletClick, size, showOnrampOption, // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -137,11 +139,26 @@ export function RouteOptions({ {!routes?.length && !insufficientBalance && renderLoading()} - {showOnrampOption && ( + {showOnrampOption && (routes?.length || insufficientBalance) && ( <> {t('views.PURCHASE.drawer.options.moreOptionsDividerText')} + + + + {t('views.PURCHASE.drawer.options.changeWallet')} + + + {defaultFiatOptions.map((type, idx) => ( void; onCardClick: (type: FiatOptionType) => void; onDirectCryptoPayClick: (route: DirectCryptoPayData) => void; + onChangeWalletClick: () => void; showOnrampOption?: boolean; showDirectCryptoPayOption?: boolean; showSwapOption?: boolean; @@ -42,6 +43,7 @@ export function RouteOptionsDrawer({ onRouteClick, onCardClick, onDirectCryptoPayClick, + onChangeWalletClick, showOnrampOption, showDirectCryptoPayOption, // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -77,6 +79,11 @@ export function RouteOptionsDrawer({ onDirectCryptoPayClick(route); }; + const handleOnChangeWalletClick = () => { + onClose(); + onChangeWalletClick(); + }; + useEffect(() => { if (!visible) { return; @@ -132,7 +139,6 @@ export function RouteOptionsDrawer({ sx={{ c: 'inherit', fontSize: 'inherit' }} /> - setShowOptionsDrawer(false)} onCardClick={handlePayWithCardClick} onRouteClick={handleRouteClick} onDirectCryptoPayClick={handleDirectCryptoPayClick} + onChangeWalletClick={() => setShowPayWithWalletDrawer(true)} insufficientBalance={insufficientBalance} directCryptoPayRoutes={directCryptoPayRoutes} />