feat: Add fiat & change wallet ability from the route drawer (#2518)

Co-authored-by: Luã de Souza <[email protected]>

Author: mimi-imtbl

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

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

packages/checkout/widgets-lib/src/locales/ko.json

@@ -901,6 +901,7 @@
             "caption": "이 네트워크에서 토큰을 교환합니다.",
             "disabledCaption": "현재 이용할 수 없습니다."
           },
+          "changeWallet": "다른 지갑 선택",
           "debit": {
             "heading": "직불 카드",
             "caption": "",

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

packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/FiatOption.tsx

@@ -56,7 +56,6 @@ export function FiatOption<RC extends ReactElement | undefined = undefined>({
           }`,
         )}
       </MenuItem.Caption>
-      {!disabled && <MenuItem.IntentIcon />}
     </MenuItem>
   );
 }

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) && (
       <>
         <Divider size="xSmall" sx={{ my: 'base.spacing.x2' }}>
           {t('views.PURCHASE.drawer.options.moreOptionsDividerText')}
         </Divider>
+        <MenuItem
+          emphasized
+          onClick={onChangeWalletClick}
+          size="small"
+        >
+          <MenuItem.FramedIcon
+            icon="Wallet"
+            variant="bold"
+            emphasized={false}
+          />
+          <MenuItem.Label>
+            {t('views.PURCHASE.drawer.options.changeWallet')}
+          </MenuItem.Label>
+        </MenuItem>
+
         {defaultFiatOptions.map((type, idx) => (
           <FiatOption
             key={`fiat-option-${type}`}

packages/checkout/widgets-lib/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptionsDrawer.tsx

@@ -25,6 +25,7 @@ type OptionsDrawerProps = {
   onRouteClick: (route: RouteData) => 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' }}
             />
           </MenuItem.Caption>
-
           <MenuItem.StatefulButtCon icon="ChevronExpand" onClick={onClose} />
         </MenuItem>
         <RouteOptions
@@ -143,6 +149,7 @@ export function RouteOptionsDrawer({
           onCardClick={onCardClick}
           onRouteClick={handleOnRouteClick}
           onDirectCryptoPayClick={handleOnDirectCryptoPayClick}
+          onChangeWalletClick={handleOnChangeWalletClick}
           showOnrampOption={showOnrampOption}
           showDirectCryptoPayOption={showDirectCryptoPayOption}
           insufficientBalance={insufficientBalance}

packages/checkout/widgets-lib/src/widgets/purchase/views/Purchase.tsx

@@ -693,12 +693,14 @@ export function Purchase({
         chains={chains}
         showSwapOption={showSwapOption}
         showBridgeOption={showBridgeOption}
+        showOnrampOption={shouldShowOnRampOption}
         showDirectCryptoPayOption
         visible={showOptionsDrawer}
         onClose={() => setShowOptionsDrawer(false)}
         onCardClick={handlePayWithCardClick}
         onRouteClick={handleRouteClick}
         onDirectCryptoPayClick={handleDirectCryptoPayClick}
+        onChangeWalletClick={() => setShowPayWithWalletDrawer(true)}
         insufficientBalance={insufficientBalance}
         directCryptoPayRoutes={directCryptoPayRoutes}
       />