fix

RabbyHub · Dec 18, 2024 · 9511c4c · 9511c4c
1 parent d2dc1df
commit 9511c4c
Show file tree

Hide file tree

Showing 15 changed files with 173 additions and 94 deletions.
diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
@@ -946,6 +946,7 @@
       "price-impact": "Price Impact",
       "loss-tips": "You're losing {{usd}}. Try a smaller amount in a small market.",
       "Auto": "Auto",
+      "no-quote-found": "No quote found",
       "rabbyFee": {
         "title": "Rabby fee",
         "swapDesc": "Rabby Wallet will always find the best possible rate from top aggregators and verify the reliability of their offers. Rabby charges a 0.25% fee (0% for wrapping), which is automatically included in the quote.",

diff --git a/src/ui/component/ChainIcon.tsx b/src/ui/component/ChainIcon.tsx
@@ -211,6 +211,7 @@ const ChainIcon = ({
           align={{
             offset: [0, 2],
           }}
+          {...tooltipProps}
         >
           <ChainIconWrapper>
             <ChainIconEle

diff --git a/src/ui/component/ChainSelector/InForm.tsx b/src/ui/component/ChainSelector/InForm.tsx
@@ -45,7 +45,7 @@ const ChainWrapper = styled.div`
   }
   &.inlineHover {
     background: transparent;
-    gap: 4;
+    gap: 4px;
     &:hover {
       background: transparent;
       .name,
@@ -103,6 +103,7 @@ export const ChainRender = ({
   useEffect(() => {
     getCustomRPC();
   }, [chain]);
+
   return (
     <ChainWrapper
       className={clsx(

diff --git a/src/ui/component/TokenSelector/index.tsx b/src/ui/component/TokenSelector/index.tsx
@@ -68,7 +68,7 @@ const TokenSelector = ({
   chainId: chainServerId,
   disabledTips,
   supportChains,
-  drawerHeight = '580px',
+  drawerHeight = '540px',
 }: TokenSelectorProps) => {
   const { t } = useTranslation();
   const [query, setQuery] = useState('');

diff --git a/src/ui/views/Bridge/Component/BridgeContent.tsx b/src/ui/views/Bridge/Component/BridgeContent.tsx
@@ -394,7 +394,7 @@ export const BridgeContent = () => {
         </div>
       </div>
 
-      <div className="mx-20">
+      <div className="mx-20 mt-28">
         {selectedBridgeQuote && (
           <BridgeShowMore
             open={showMoreOpen}

diff --git a/src/ui/views/Bridge/Component/BridgeShowMore.tsx b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
@@ -100,7 +100,7 @@ export const BridgeShowMore = ({
   const { t } = useTranslation();
 
   const data = useMemo(() => {
-    if (quoteLoading) {
+    if (quoteLoading || (!sourceLogo && !sourceName)) {
       return {
         showLoss: false,
         diff: '',
@@ -124,14 +124,17 @@ export const BridgeShowMore = ({
   }, [isBestQuote]);
 
   useEffect(() => {
-    if ((!quoteLoading && data?.showLoss) || slippageError) {
+    if (
+      (!quoteLoading && sourceLogo && sourceName && data?.showLoss) ||
+      slippageError
+    ) {
       setOpen(true);
     }
-  }, [quoteLoading, data?.showLoss]);
+  }, [quoteLoading, data?.showLoss, sourceLogo, sourceName]);
 
   return (
     <div className="mx-16">
-      <div className="flex items-center gap-8 mt-28 mb-8">
+      <div className="flex items-center gap-8 mb-8">
         <div className={clsx(dottedClassName)} />
         <div
           className={clsx(
@@ -230,9 +233,12 @@ export const BridgeShowMore = ({
                   alt={sourceName}
                 />
               )}
-              <span className="text-rabby-blue-default font-medium">
+              <span className="text-12 text-rabby-blue-default font-medium">
                 {sourceName}
               </span>
+              {!sourceLogo && !sourceName ? (
+                <span className="text-12 text-r-neutral-foot">-</span>
+              ) : null}
             </div>
           )}
         </ListItem>

diff --git a/src/ui/views/Bridge/hooks/slippage.tsx b/src/ui/views/Bridge/hooks/slippage.tsx
@@ -1,22 +1,9 @@
 import { useCallback, useMemo, useState } from 'react';
 
-type SlippageType = 'swap' | 'bridge';
+export const useBridgeSlippage = () => {
+  const [slippageState, setSlippageState] = useState('1');
 
-const DEFAULT = {
-  swap: '0.1',
-  bridge: '1',
-};
-const SLIPPAGE_RANGE = {
-  swap: [0.1, 10],
-  bridge: [0.2, 3],
-};
-
-export const useSwapAndBridgeSlippage = (type: SlippageType) => {
-  const [slippageState, setSlippageState] = useState(DEFAULT[type]);
-
-  const slippage = useMemo(() => slippageState || DEFAULT[type], [
-    slippageState,
-  ]);
+  const slippage = useMemo(() => slippageState || '1', [slippageState]);
   const [slippageChanged, setSlippageChanged] = useState(false);
 
   const [autoSlippage, setAutoSlippage] = useState(true);
@@ -28,10 +15,8 @@ export const useSwapAndBridgeSlippage = (type: SlippageType) => {
 
   const [isSlippageLow, isSlippageHigh] = useMemo(() => {
     return [
-      slippageState?.trim() !== '' &&
-        Number(slippageState || 0) < SLIPPAGE_RANGE[type][0],
-      slippageState?.trim() !== '' &&
-        Number(slippageState || 0) > SLIPPAGE_RANGE[type][1],
+      slippageState?.trim() !== '' && Number(slippageState || 0) < 0.2,
+      slippageState?.trim() !== '' && Number(slippageState || 0) > 3,
     ];
   }, [slippageState]);
 

diff --git a/src/ui/views/Bridge/hooks/token.tsx b/src/ui/views/Bridge/hooks/token.tsx
@@ -11,8 +11,8 @@ import { useRefreshId, useSetQuoteVisible, useSetRefreshId } from './context';
 import { getChainDefaultToken, tokenAmountBn } from '@/ui/utils/token';
 import BigNumber from 'bignumber.js';
 import stats from '@/stats';
-import { useSwapAndBridgeSlippage } from './slippage';
 import { isNaN } from 'lodash';
+import { useBridgeSlippage } from './slippage';
 
 export interface SelectedBridgeQuote extends Omit<BridgeQuote, 'tx'> {
   shouldApproveToken?: boolean;
@@ -119,7 +119,7 @@ export const useBridge = () => {
 
   const [amount, setAmount] = useState('');
 
-  const slippageObj = useSwapAndBridgeSlippage('bridge');
+  const slippageObj = useBridgeSlippage();
 
   const [recommendFromToken, setRecommendFromToken] = useState<TokenItem>();
 

diff --git a/src/ui/views/Dashboard/components/CurrentConnection/index.tsx b/src/ui/views/Dashboard/components/CurrentConnection/index.tsx
@@ -125,7 +125,7 @@ export const CurrentConnection = memo((props: CurrentConnectionProps) => {
 
           <RCIconDisconnectCC
             viewBox="0 0 14 14"
-            className="site-status-icon w-14 h-14 text-r-neutral-foot hover:text-rabby-red-default"
+            className="site-status-icon w-14 h-14 ml-2 text-r-neutral-foot hover:text-rabby-red-default"
             onClick={() => handleRemove(site!.origin)}
           />
         </div>

diff --git a/src/ui/views/Swap/Component/Main.tsx b/src/ui/views/Swap/Component/Main.tsx
@@ -15,7 +15,6 @@ import { useWallet } from '@/ui/utils';
 import clsx from 'clsx';
 import { QuoteList } from './Quotes';
 import { useQuoteVisible, useSetQuoteVisible, useSetRefreshId } from '../hooks';
-import { InfoCircleFilled } from '@ant-design/icons';
 import { DEX_ENUM, DEX_SPENDER_WHITELIST } from '@rabby-wallet/rabby-swap';
 import { useDispatch } from 'react-redux';
 import { useRbiSource } from '@/ui/utils/ga-event';
@@ -40,6 +39,7 @@ import { SwapTokenItem } from './Token';
 import { BridgeSwitchBtn } from '../../Bridge/Component/BridgeSwitchButton';
 import { BridgeShowMore } from '../../Bridge/Component/BridgeShowMore';
 import { ReactComponent as RcIconWarningCC } from '@/ui/assets/warning-cc.svg';
+import useDebounceValue from '@/ui/hooks/useDebounceValue';
 
 const getDisabledTips: SelectChainItemProps['disabledTips'] = (ctx) => {
   const chainItem = findChainByServerID(ctx.chain.serverId);
@@ -360,7 +360,7 @@ export const Main = () => {
     },
   });
 
-  const [showMoreOpen, setShowMoreOpen] = useState(false);
+  const [showMoreOpen, setShowMoreOpen] = useState(!autoSlippage);
 
   const [sourceName, sourceLogo] = useMemo(() => {
     if (activeProvider?.name) {
@@ -373,7 +373,7 @@ export const Main = () => {
     return ['', ''];
   }, [isWrapToken, activeProvider?.name]);
 
-  const noQuote = useMemo(
+  const noQuoteOrigin = useMemo(
     () =>
       Number(inputAmount) > 0 &&
       !inSufficient &&
@@ -393,11 +393,17 @@ export const Main = () => {
     ]
   );
 
+  const noQuote = useDebounceValue(noQuoteOrigin, 16);
+
+  if (noQuote && !showMoreOpen) {
+    setShowMoreOpen(true);
+  }
+
   return (
     <div
       className={clsx('flex-1 overflow-auto page-has-ant-input', 'pb-[76px]')}
     >
-      <div className="flex">
+      <div className="flex mb-4">
         <ChainSelectorInForm
           mini
           inlineHover
@@ -408,6 +414,8 @@ export const Main = () => {
           hideTestnetTab={true}
           chainRenderClassName={clsx('pl-[30px] text-[13px] font-medium')}
           title={<div className="mt-8">{t('page.bridge.select-chain')}</div>}
+          drawerHeight={540}
+          showClosableIcon
         />
       </div>
 
@@ -484,13 +492,42 @@ export const Main = () => {
         />
       </div>
 
+      {inSufficient || noQuote ? (
+        <Alert
+          className={clsx(
+            'mx-[20px] rounded-[4px] px-0 py-[3px] bg-transparent mt-6'
+          )}
+          icon={
+            <RcIconWarningCC
+              viewBox="0 0 16 16"
+              className={clsx(
+                'relative top-[3px] mr-4 self-start origin-center w-16 h-15',
+                'text-rabby-red-default'
+              )}
+            />
+          }
+          banner
+          message={
+            <span
+              className={clsx(
+                'text-13 leading-[16px]',
+                'text-rabby-red-default'
+              )}
+            >
+              {inSufficient
+                ? t('page.swap.insufficient-balance')
+                : t('page.swap.no-quote-found')}
+            </span>
+          }
+        />
+      ) : null}
+
       {Number(inputAmount) > 0 &&
         !inSufficient &&
         !!amountAvailable &&
         !!payToken &&
-        !!receiveToken &&
-        !!activeProvider && (
-          <div className="mx-20 mb-20">
+        !!receiveToken && (
+          <div className={clsx('mx-20 mb-20', noQuote ? 'mt-12' : 'mt-28')}>
             <BridgeShowMore
               open={showMoreOpen}
               setOpen={setShowMoreOpen}
@@ -533,35 +570,6 @@ export const Main = () => {
           </div>
         )}
 
-      {inSufficient || noQuote ? (
-        <Alert
-          className={clsx(
-            'mx-[20px] rounded-[4px] px-0 py-[3px] bg-transparent mt-6'
-          )}
-          icon={
-            <RcIconWarningCC
-              viewBox="0 0 16 16"
-              className={clsx(
-                'relative top-[3px] mr-2 self-start origin-center w-16 h-15',
-                'text-rabby-red-default'
-              )}
-            />
-          }
-          banner
-          message={
-            <span
-              className={clsx(
-                'text-13 leading-[16px]',
-                'text-rabby-red-default'
-              )}
-            >
-              {inSufficient
-                ? t('page.swap.insufficient-balance')
-                : t('page.bridge.no-quote-found')}
-            </span>
-          }
-        />
-      ) : null}
       <div
         className={clsx(
           'fixed w-full bottom-0 mt-auto flex flex-col items-center justify-center p-20 gap-10',

diff --git a/src/ui/views/Swap/Component/Slider.tsx b/src/ui/views/Swap/Component/Slider.tsx
@@ -41,6 +41,7 @@ const StyledSlider = styled(Slider)`
       width: 16px;
       height: 16px;
       background-color: white;
+      filter: drop-shadow(0px 2px 4px rgba(112, 132, 255, 0.4));
     }
     &::after {
       width: 12px;
@@ -54,7 +55,6 @@ const StyledSlider = styled(Slider)`
       &::before {
         width: 20px;
         height: 20px;
-        filter: drop-shadow(0px 2px 4px rgba(112, 132, 255, 0.4));
       }
       &::after {
         width: 16px;