Merge branch 'fix/ui-20240801' into tmp/20240731

src/ui/component/ChainSelector/components/SelectChainItem.tsx

@@ -86,7 +86,7 @@ export const SelectChainItem = forwardRef(
         <div
           className={clsx(
             'select-chain-item',
-            disabled && 'opacity-50 select-chain-item-disabled',
+            disabled && 'opacity-50 select-chain-item-disabled cursor-default',
             className
           )}
           ref={ref}

src/ui/views/Bridge/Component/BridgeContent.tsx

@@ -104,7 +104,10 @@ export const BridgeContent = () => {
 
     handleAmountChange,
     handleBalance,
-    payAmount,
+
+    debouncePayAmount,
+    inputAmount,
+
     inSufficient,
 
     openQuotesList,
@@ -118,6 +121,13 @@ export const BridgeContent = () => {
     expired,
   } = useTokenPair(userAddress);
 
+  const payAmountLoading = useMemo(() => inputAmount !== debouncePayAmount, [
+    inputAmount,
+    debouncePayAmount,
+  ]);
+
+  const quoteOrAmountLoading = quoteLoading || payAmountLoading;
+
   const aggregatorIds = useRabbySelector(
     (s) => s.bridge.aggregatorsList.map((e) => e.id) || []
   );
@@ -179,7 +189,7 @@ export const BridgeContent = () => {
               from_token_id: payToken.id,
               user_addr: userAddress,
               from_chain_id: payToken.chain,
-              from_token_raw_amount: new BigNumber(payAmount)
+              from_token_raw_amount: new BigNumber(debouncePayAmount)
                 .times(10 ** payToken.decimals)
                 .toFixed(0, 1)
                 .toString(),
@@ -202,7 +212,7 @@ export const BridgeContent = () => {
             to: tx.to,
             value: tx.value,
             data: tx.data,
-            payTokenRawAmount: new BigNumber(payAmount)
+            payTokenRawAmount: new BigNumber(debouncePayAmount)
               .times(10 ** payToken.decimals)
               .toFixed(0, 1)
               .toString(),
@@ -216,7 +226,7 @@ export const BridgeContent = () => {
               bridge_id: selectedBridgeQuote.bridge_id,
               from_chain_id: payToken.chain,
               from_token_id: payToken.id,
-              from_token_amount: payAmount,
+              from_token_amount: debouncePayAmount,
               to_chain_id: receiveToken.chain,
               to_token_id: receiveToken.id,
               to_token_amount: selectedBridgeQuote.to_token_amount,
@@ -260,7 +270,7 @@ export const BridgeContent = () => {
     selectedBridgeQuote?.bridge_id,
     selectedBridgeQuote?.to_token_amount,
     wallet,
-    payAmount,
+    debouncePayAmount,
     rbiSource,
   ]);
 
@@ -358,15 +368,15 @@ export const BridgeContent = () => {
         <StyledInput
           spellCheck={false}
           placeholder="0"
-          value={payAmount}
+          value={inputAmount}
           onChange={handleAmountChange}
           ref={inputRef as any}
           className="bg-transparent"
           suffix={
             <span className="text-r-neutral-foot text-12">
-              {payAmount
+              {inputAmount
                 ? `≈ ${formatUsdValue(
-                    new BigNumber(payAmount)
+                    new BigNumber(inputAmount)
                       .times(payToken?.price || 0)
                       .toString(10)
                   )}`
@@ -375,20 +385,20 @@ export const BridgeContent = () => {
           }
         />
 
-        {quoteLoading && !inSufficient && !selectedBridgeQuote?.manualClick && (
-          <BestQuoteLoading />
-        )}
+        {quoteOrAmountLoading &&
+          !inSufficient &&
+          !selectedBridgeQuote?.manualClick && <BestQuoteLoading />}
 
         {payToken &&
           !inSufficient &&
           receiveToken &&
-          Number(payAmount) > 0 &&
-          (!quoteLoading || selectedBridgeQuote?.manualClick) && (
+          Number(debouncePayAmount) > 0 &&
+          (!quoteOrAmountLoading || selectedBridgeQuote?.manualClick) && (
             <BridgeReceiveDetails
               openQuotesList={openQuotesList}
               activeProvider={selectedBridgeQuote}
               className="section"
-              payAmount={payAmount}
+              payAmount={debouncePayAmount}
               payToken={payToken}
               receiveToken={receiveToken}
               bestQuoteId={bestQuoteId}
@@ -474,9 +484,8 @@ export const BridgeContent = () => {
           disabled={
             !payToken ||
             !receiveToken ||
-            !payAmount ||
-            Number(payAmount) === 0 ||
             inSufficient ||
+            payAmountLoading ||
             !selectedBridgeQuote
           }
         >
@@ -494,7 +503,7 @@ export const BridgeContent = () => {
           userAddress={userAddress}
           chain={chain}
           payToken={payToken}
-          payAmount={payAmount}
+          payAmount={debouncePayAmount}
           receiveToken={receiveToken}
           inSufficient={inSufficient}
           setSelectedBridgeQuote={setSelectedBridgeQuote}

src/ui/views/Bridge/Component/BridgeTokenPair.tsx

@@ -90,9 +90,9 @@ const TokenPairDrawer = (
                       'px-20 min-h-[56px] cursor-pointer',
                       'flex items-center justify-between',
                       'border border-solid border-transparent rounded-md',
-                      'hover:border-rabby-blue-default',
-                      !tokenPair.from_token_amount &&
-                        'opacity-40 cursor-not-allowed'
+                      !tokenPair.from_token_amount
+                        ? 'opacity-40 cursor-not-allowed'
+                        : 'hover:border-rabby-blue-default hover:bg-rabby-blue-light1'
                     )}
                   >
                     <div className="flex items-center text-[15px] font-medium text-r-neutral-title1">
@@ -147,6 +147,7 @@ const RenderWrapper = styled.div`
   background: var(--r-neutral-card-2, #f2f4f7);
   border-radius: 6px;
   padding: 0 12px;
+  padding-right: 10px;
   width: 100%;
   display: flex;
   align-items: center;

src/ui/views/Bridge/hooks/token.tsx

@@ -18,6 +18,7 @@ import { ETH_USDT_CONTRACT } from '@/constant';
 import { findChain } from '@/utils/chain';
 import { BridgeQuote } from '@/background/service/openapi';
 import stats from '@/stats';
+import useDebounceValue from '@/ui/hooks/useDebounceValue';
 
 const useTokenInfo = ({
   userAddress,
@@ -150,7 +151,9 @@ export const useTokenPair = (userAddress: string) => {
     dispatch.bridge.setSelectedToToken(receiveToken);
   }, [receiveToken]);
 
-  const [payAmount, setPayAmount] = useState('');
+  const [inputAmount, setPayAmount] = useState('');
+
+  const debouncePayAmount = useDebounceValue(inputAmount, 300);
 
   const [selectedBridgeQuote, setOriSelectedBridgeQuote] = useState<
     SelectedBridgeQuote | undefined
@@ -179,17 +182,17 @@ export const useTokenPair = (userAddress: string) => {
   const inSufficient = useMemo(
     () =>
       payToken
-        ? tokenAmountBn(payToken).lt(payAmount)
-        : new BigNumber(0).lt(payAmount),
-    [payToken, payAmount]
+        ? tokenAmountBn(payToken).lt(debouncePayAmount)
+        : new BigNumber(0).lt(debouncePayAmount),
+    [payToken, debouncePayAmount]
   );
 
   const [quoteList, setQuotesList] = useState<SelectedBridgeQuote[]>([]);
 
   useEffect(() => {
     setQuotesList([]);
     setSelectedBridgeQuote(undefined);
-  }, [payToken?.id, receiveToken?.id, chain, payAmount, inSufficient]);
+  }, [payToken?.id, receiveToken?.id, chain, debouncePayAmount, inSufficient]);
 
   const visible = useQuoteVisible();
 
@@ -215,7 +218,7 @@ export const useTokenPair = (userAddress: string) => {
       receiveToken?.id &&
       receiveToken &&
       chain &&
-      Number(payAmount) > 0 &&
+      Number(debouncePayAmount) > 0 &&
       aggregatorsList.length > 0
     ) {
       fetchIdRef.current += 1;
@@ -239,7 +242,7 @@ export const useTokenPair = (userAddress: string) => {
           from_token_id: payToken.id,
           user_addr: userAddress,
           from_chain_id: payToken.chain,
-          from_token_raw_amount: new BigNumber(payAmount)
+          from_token_raw_amount: new BigNumber(debouncePayAmount)
             .times(10 ** payToken.decimals)
             .toFixed(0, 1)
             .toString(),
@@ -301,7 +304,7 @@ export const useTokenPair = (userAddress: string) => {
                 quote.approve_contract_id
               );
               tokenApproved = new BigNumber(allowance).gte(
-                new BigNumber(payAmount).times(10 ** payToken.decimals)
+                new BigNumber(debouncePayAmount).times(10 ** payToken.decimals)
               );
             }
             let shouldTwoStepApprove = false;
@@ -356,7 +359,7 @@ export const useTokenPair = (userAddress: string) => {
     payToken?.id,
     receiveToken?.id,
     chain,
-    payAmount,
+    debouncePayAmount,
   ]);
 
   const [bestQuoteId, setBestQuoteId] = useState<
@@ -412,7 +415,7 @@ export const useTokenPair = (userAddress: string) => {
   useEffect(() => {
     setExpired(false);
     setSelectedBridgeQuote(undefined);
-  }, [payToken?.id, receiveToken?.id, chain, payAmount, inSufficient]);
+  }, [payToken?.id, receiveToken?.id, chain, debouncePayAmount, inSufficient]);
 
   return {
     chain,
@@ -425,7 +428,8 @@ export const useTokenPair = (userAddress: string) => {
 
     handleAmountChange,
     handleBalance,
-    payAmount,
+    debouncePayAmount,
+    inputAmount,
 
     inSufficient,
 

src/ui/views/GasTopUp/index.tsx

@@ -317,12 +317,15 @@ export const GasTopUp = () => {
       <div className="absolute top-0 left-0 right-0 h-[217px] bg-r-blue-default dark:bg-r-blue-disable">
         <RcBubleInBg className="absolute right-[25px] top-[35px] z-[0]" />
       </div>
-      <div className="p-20 pt-0 h-full relative bg-transparent">
+      <div className="p-20 pt-0 h-full relative bg-transparent ">
         <PageHeader
-          onBack={handleClickBack}
-          forceShowBack
-          invertBack
+          // onBack={handleClickBack}
+          // forceShowBack
+          canBack={false}
           keepBackLightVersion
+          closeCn="brightness-[10]"
+          closeable
+          onClose={handleClickBack}
         >
           <span className="text-white">{t('page.gasTopUp.title')}</span>
         </PageHeader>

src/ui/views/SendToken/components/MaxButton.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export const MaxButton = styled.div`
   font-size: 11px;
+  font-weight: 500;
   line-height: 1;
   padding: 4px 5px;
   cursor: pointer;