From fc2aa73b01c582615221edfb6eb2662a3340a856 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Fri, 8 Nov 2024 16:31:55 +0800
Subject: [PATCH] fix

---
 .../views/Bridge/Component/BridgeContent.tsx  | 16 ++---
 .../views/Bridge/Component/BridgeShowMore.tsx | 67 ++++++++++++++-----
 src/ui/views/Bridge/Component/BridgeToken.tsx |  6 +-
 src/ui/views/Bridge/hooks/token.tsx           | 17 ++++-
 4 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/src/ui/views/Bridge/Component/BridgeContent.tsx b/src/ui/views/Bridge/Component/BridgeContent.tsx
index a0226635640..139258abde7 100644
--- a/src/ui/views/Bridge/Component/BridgeContent.tsx
+++ b/src/ui/views/Bridge/Component/BridgeContent.tsx
@@ -70,14 +70,6 @@ const StyledInput = styled(Input)`
   }
 `;
 
-const getDisabledTips: SelectChainItemProps['disabledTips'] = (ctx) => {
-  const chainItem = findChainByServerID(ctx.chain.serverId);
-
-  if (chainItem?.isTestnet) return i18n.t('page.swap.testnet-is-not-supported');
-
-  return i18n.t('page.swap.not-supported');
-};
-
 export const BridgeContent = () => {
   const { userAddress } = useRabbySelector((state) => ({
     userAddress: state.account.currentAccount?.address || '',
@@ -97,6 +89,7 @@ export const BridgeContent = () => {
     handleAmountChange,
 
     recommendFromToken,
+    fillRecommendFromToken,
 
     inSufficient,
 
@@ -444,10 +437,15 @@ export const BridgeContent = () => {
             amount={amount || 0}
             toAmount={selectedBridgeQuote?.to_token_amount}
             openQuotesList={openQuotesList}
+            quoteLoading={quoteLoading}
           />
         )}
         {noQuote && recommendFromToken && (
-          <RecommendFromToken token={recommendFromToken} className="mt-16" />
+          <RecommendFromToken
+            token={recommendFromToken}
+            className="mt-16"
+            onOk={fillRecommendFromToken}
+          />
         )}
       </div>
 
diff --git a/src/ui/views/Bridge/Component/BridgeShowMore.tsx b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
index f5bd8a5ebd2..775b65d232c 100644
--- a/src/ui/views/Bridge/Component/BridgeShowMore.tsx
+++ b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
@@ -1,9 +1,15 @@
 import { TokenWithChain } from '@/ui/component';
 import { getTokenSymbol } from '@/ui/utils/token';
 import { TokenItem } from '@rabby-wallet/rabby-api/dist/types';
-import { Button, Tooltip } from 'antd';
+import { Button, Skeleton, Tooltip } from 'antd';
 import clsx from 'clsx';
-import React, { PropsWithChildren, ReactNode, useMemo, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { ReactComponent as IconArrowDownCC } from 'ui/assets/bridge/tiny-down-arrow-cc.svg';
 import { ReactComponent as RcIconInfo } from 'ui/assets/info-cc.svg';
@@ -24,6 +30,7 @@ export const BridgeShowMore = ({
   toToken,
   amount,
   toAmount,
+  quoteLoading,
 }: {
   openQuotesList: () => void;
   sourceName: string;
@@ -36,6 +43,7 @@ export const BridgeShowMore = ({
   toToken?: TokenItem;
   amount?: string | number;
   toAmount?: string | number;
+  quoteLoading?: boolean;
 }) => {
   const { t } = useTranslation();
   const [show, setShow] = useState(false);
@@ -45,6 +53,12 @@ export const BridgeShowMore = ({
     [fromToken, toToken, amount, toAmount]
   );
 
+  useEffect(() => {
+    if (!quoteLoading && data?.showLoss) {
+      setShow(true);
+    }
+  }, [quoteLoading, data?.showLoss]);
+
   return (
     <div>
       <div className="flex items-center gap-8 mt-28 mb-8 op">
@@ -69,7 +83,7 @@ export const BridgeShowMore = ({
       </div>
 
       <div className={clsx('px-16', 'overflow-hidden', !show && 'h-0')}>
-        {data?.showLoss && (
+        {data?.showLoss && !quoteLoading && (
           <div className="leading-4 mb-12 text-12 text-r-neutral-foot">
             <div className="flex justify-between">
               <span>{t('page.bridge.price-impact')}</span>
@@ -108,26 +122,37 @@ export const BridgeShowMore = ({
             </div>
             <div className="mt-[8px] rounded-[4px] border-[0.5px] border-rabby-red-default bg-r-red-light p-8 text-13 font-normal text-r-red-default">
               {t('page.bridge.loss-tips', {
-                usd: data?.diff,
+                usd: data?.lossUsd,
               })}
             </div>
           </div>
         )}
 
         <ListItem name={t('page.bridge.showMore.source')} className="mb-8">
-          <div
-            className="flex items-center gap-4 cursor-pointer"
-            onClick={openQuotesList}
-          >
-            {sourceLogo && (
-              <img
-                className="w-12 h-12 rounded-full"
-                src={sourceLogo}
-                alt={sourceName}
-              />
-            )}
-            <span className="text-rabby-blue-default">{sourceName}</span>
-          </div>
+          {quoteLoading ? (
+            <Skeleton.Input
+              active
+              className="rounded"
+              style={{
+                width: 52,
+                height: 12,
+              }}
+            />
+          ) : (
+            <div
+              className="flex items-center gap-4 cursor-pointer"
+              onClick={openQuotesList}
+            >
+              {sourceLogo && (
+                <img
+                  className="w-12 h-12 rounded-full"
+                  src={sourceLogo}
+                  alt={sourceName}
+                />
+              )}
+              <span className="text-rabby-blue-default">{sourceName}</span>
+            </div>
+          )}
         </ListItem>
 
         <BridgeSlippage
@@ -162,9 +187,11 @@ function ListItem({
 export const RecommendFromToken = ({
   token,
   className,
+  onOk,
 }: {
   token: TokenItem;
   className?: string;
+  onOk: () => void;
 }) => {
   const { t } = useTranslation();
   return (
@@ -196,7 +223,11 @@ export const RecommendFromToken = ({
           for an available quote
         </Trans>
       </div>
-      <Button type="primary" className="h-24 text-13 font-medium px-10 py-0">
+      <Button
+        type="primary"
+        className="h-24 text-13 font-medium px-10 py-0"
+        onClick={onOk}
+      >
         {t('global.ok')}
       </Button>
     </div>
diff --git a/src/ui/views/Bridge/Component/BridgeToken.tsx b/src/ui/views/Bridge/Component/BridgeToken.tsx
index 266bbc1612b..cc72cb27344 100644
--- a/src/ui/views/Bridge/Component/BridgeToken.tsx
+++ b/src/ui/views/Bridge/Component/BridgeToken.tsx
@@ -93,9 +93,11 @@ export const BridgeToken = ({
 
   useLayoutEffect(() => {
     if (type === 'from') {
-      inputRef.current?.focus();
+      if (document?.activeElement !== inputRef.current?.input) {
+        inputRef.current?.focus();
+      }
     }
-  }, []);
+  }, [value]);
 
   const showNoQuote = useMemo(() => type === 'to' && !!noQuote, [
     type,
diff --git a/src/ui/views/Bridge/hooks/token.tsx b/src/ui/views/Bridge/hooks/token.tsx
index acb4e7746d7..b4df52c5880 100644
--- a/src/ui/views/Bridge/hooks/token.tsx
+++ b/src/ui/views/Bridge/hooks/token.tsx
@@ -67,7 +67,10 @@ const useToken = (type: 'from' | 'to') => {
 
   const [token, setToken] = useState<TokenItem>();
 
-  const switchChain = useCallback(
+  const switchChain: (
+    changeChain?: CHAINS_ENUM,
+    resetToken?: boolean
+  ) => void = useCallback(
     (changeChain?: CHAINS_ENUM, resetToken = true) => {
       setChain(changeChain);
       if (resetToken) {
@@ -125,6 +128,17 @@ export const useBridge = () => {
 
   const [recommendFromToken, setRecommendFromToken] = useState<TokenItem>();
 
+  const fillRecommendFromToken = useCallback(() => {
+    if (recommendFromToken) {
+      const targetChain = findChainByServerID(recommendFromToken?.chain);
+      if (targetChain) {
+        switchFromChain(targetChain.enum, false);
+        setFromToken(recommendFromToken);
+        setAmount('');
+      }
+    }
+  }, [recommendFromToken, switchFromChain, setFromToken]);
+
   const [selectedBridgeQuote, setOriSelectedBridgeQuote] = useState<
     SelectedBridgeQuote | undefined
   >();
@@ -596,6 +610,7 @@ export const useBridge = () => {
     switchToken,
 
     recommendFromToken,
+    fillRecommendFromToken,
 
     inSufficient,
     amount,