From feaf4062e575b86937296d850b4ec0f5d334fa6a Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Wed, 13 Nov 2024 18:02:05 +0800
Subject: [PATCH] fix: bridge show more

---
 src/ui/utils/portfolio/project.ts                |  2 ++
 src/ui/utils/token.ts                            |  1 +
 src/ui/views/Bridge/Component/BridgeContent.tsx  |  4 ++++
 src/ui/views/Bridge/Component/BridgeShowMore.tsx | 13 ++++++++-----
 src/ui/views/Bridge/hooks/token.tsx              |  4 ++--
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/ui/utils/portfolio/project.ts b/src/ui/utils/portfolio/project.ts
index f5001bdb044..d9289debabb 100644
--- a/src/ui/utils/portfolio/project.ts
+++ b/src/ui/utils/portfolio/project.ts
@@ -320,6 +320,7 @@ export class DisplayedToken implements AbstractPortfolioToken {
   time_at: number;
   price_24h_change?: number | null;
   low_credit_score?: boolean;
+  raw_amount_hex_str?: string;
   _amountStr?: string;
   _priceStr?: string;
   _amountChange?: number;
@@ -359,6 +360,7 @@ export class DisplayedToken implements AbstractPortfolioToken {
     this.time_at = token.time_at;
     this.price_24h_change = token.price_24h_change;
     this.low_credit_score = token.low_credit_score;
+    this.raw_amount_hex_str = token.raw_amount_hex_str;
 
     // 默认是它
     this._usdValueChangeStr = '-';
diff --git a/src/ui/utils/token.ts b/src/ui/utils/token.ts
index 5654bb16ddd..f5a619a61b3 100644
--- a/src/ui/utils/token.ts
+++ b/src/ui/utils/token.ts
@@ -161,6 +161,7 @@ export const abstractTokenToTokenItem = (
     chain: token.chain,
     amount: token.amount,
     raw_amount: token.raw_amount,
+    raw_amount_hex_str: token.raw_amount_hex_str,
     decimals: token.decimals,
     display_symbol: token.display_symbol,
     is_core: token.is_core,
diff --git a/src/ui/views/Bridge/Component/BridgeContent.tsx b/src/ui/views/Bridge/Component/BridgeContent.tsx
index d2db4039161..bc235322366 100644
--- a/src/ui/views/Bridge/Component/BridgeContent.tsx
+++ b/src/ui/views/Bridge/Component/BridgeContent.tsx
@@ -354,6 +354,8 @@ export const BridgeContent = () => {
     quoteLoading ||
     !quoteList?.length;
 
+  const [showMoreOpen, setShowMoreOpen] = useState(false);
+
   return (
     <div
       className={clsx(
@@ -393,6 +395,8 @@ export const BridgeContent = () => {
       <div className="mx-20">
         {selectedBridgeQuote && (
           <BridgeShowMore
+            open={showMoreOpen}
+            setOpen={setShowMoreOpen}
             sourceName={selectedBridgeQuote?.aggregator.name || ''}
             sourceLogo={selectedBridgeQuote?.aggregator.logo_url || ''}
             slippage={slippageState}
diff --git a/src/ui/views/Bridge/Component/BridgeShowMore.tsx b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
index 80cd0bd6146..2dcc766c0fc 100644
--- a/src/ui/views/Bridge/Component/BridgeShowMore.tsx
+++ b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
@@ -37,7 +37,11 @@ export const BridgeShowMore = ({
   isCustomSlippage,
   setAutoSlippage,
   setIsCustomSlippage,
+  open,
+  setOpen,
 }: {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
   openQuotesList: () => void;
   sourceName: string;
   sourceLogo: string;
@@ -57,7 +61,6 @@ export const BridgeShowMore = ({
   setIsCustomSlippage: Dispatch<SetStateAction<boolean>>;
 }) => {
   const { t } = useTranslation();
-  const [show, setShow] = useState(false);
 
   const data = useMemo(
     () => tokenPriceImpact(fromToken, toToken, amount, toAmount),
@@ -66,7 +69,7 @@ export const BridgeShowMore = ({
 
   useEffect(() => {
     if ((!quoteLoading && data?.showLoss) || slippageError) {
-      setShow(true);
+      setOpen(true);
     }
   }, [quoteLoading, data?.showLoss]);
 
@@ -80,20 +83,20 @@ export const BridgeShowMore = ({
             'cursor-pointer',
             'text-r-neutral-foot text-12'
           )}
-          onClick={() => setShow((e) => !e)}
+          onClick={() => setOpen((e) => !e)}
         >
           <span>{t('page.bridge.showMore.title')}</span>
           <IconArrowDownCC
             viewBox="0 0 14 14"
             width={14}
             height={14}
-            className={clsx('transition-transform', show && 'rotate-180')}
+            className={clsx('transition-transform', open && 'rotate-180')}
           />
         </div>
         <div className={clsx(dottedClassName)} />
       </div>
 
-      <div className={clsx('overflow-hidden', !show && 'h-0')}>
+      <div className={clsx('overflow-hidden', !open && 'h-0')}>
         {data?.showLoss && !quoteLoading && (
           <div className="leading-4 mb-12 text-12 text-r-neutral-foot">
             <div className="flex justify-between">
diff --git a/src/ui/views/Bridge/hooks/token.tsx b/src/ui/views/Bridge/hooks/token.tsx
index 095d55a983c..0baebb4b9fc 100644
--- a/src/ui/views/Bridge/hooks/token.tsx
+++ b/src/ui/views/Bridge/hooks/token.tsx
@@ -253,7 +253,7 @@ export const useBridge = () => {
     }
     if (!quote?.manualClick) {
       expiredTimer.current = setTimeout(() => {
-        // setRefreshId((e) => e + 1);
+        setRefreshId((e) => e + 1);
       }, 1000 * 30);
     }
     setOriSelectedBridgeQuote(quote);
@@ -261,7 +261,6 @@ export const useBridge = () => {
 
   useEffect(() => {
     setQuotesList([]);
-    setSelectedBridgeQuote(undefined);
     setRecommendFromToken(undefined);
   }, [fromToken?.id, toToken?.id, fromChain, toChain, amount, inSufficient]);
 
@@ -484,6 +483,7 @@ export const useBridge = () => {
         }
       }
     }
+    setSelectedBridgeQuote(undefined);
   }, [
     inSufficient,
     aggregatorsList,