From 203e1797dc182504bcc070a2d95754fc132b5215 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Fri, 3 Jan 2025 18:20:00 +0800
Subject: [PATCH] feat: rabby fee display (#2709)

* feat: update rabby fee display

* style tuning

* style tuning
---
 _raw/locales/en/messages.json                 |  2 +-
 .../views/Bridge/Component/BridgeContent.tsx  | 16 +++++++--
 .../Bridge/Component/BridgeQuoteItem.tsx      |  9 -----
 .../views/Bridge/Component/BridgeShowMore.tsx | 34 ++++++++++++++-----
 src/ui/views/Bridge/Component/BridgeToken.tsx | 10 ------
 src/ui/views/Swap/Component/Main.tsx          | 30 ++++++++++++++--
 src/ui/views/Swap/Component/QuoteItem.tsx     | 29 ++--------------
 src/ui/views/Swap/Component/Token.tsx         | 30 +---------------
 8 files changed, 71 insertions(+), 89 deletions(-)

diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
index d4e1647eb09..a5a123efbf8 100644
--- a/_raw/locales/en/messages.json
+++ b/_raw/locales/en/messages.json
@@ -942,7 +942,7 @@
       "process-with-two-step-approve": "Proceed with two step approve",
       "fetch-best-quote": "Fetching the Best quote",
       "usd-after-fees": "≈ {{usd}} ",
-      "no-fees-for-wrap": "No Rabby fees for Wrap",
+      "no-fees-for-wrap": "No Rabby fee for Wrap",
       "No-available-quote": "No available quote",
       "price-impact": "Price Impact",
       "loss-tips": "You're losing {{usd}}. Try a smaller amount in a small market.",
diff --git a/src/ui/views/Bridge/Component/BridgeContent.tsx b/src/ui/views/Bridge/Component/BridgeContent.tsx
index 29190b8d6e3..3001d82f4ff 100644
--- a/src/ui/views/Bridge/Component/BridgeContent.tsx
+++ b/src/ui/views/Bridge/Component/BridgeContent.tsx
@@ -6,7 +6,12 @@ import BigNumber from 'bignumber.js';
 import { useWallet } from '@/ui/utils';
 import clsx from 'clsx';
 import { QuoteList } from './BridgeQuotes';
-import { useQuoteVisible, useSetQuoteVisible, useSetRefreshId } from '../hooks';
+import {
+  useQuoteVisible,
+  useSetQuoteVisible,
+  useSetRefreshId,
+  useSetSettingVisible,
+} from '../hooks';
 import { useRbiSource } from '@/ui/utils/ga-event';
 import { useCss } from 'react-use';
 import { findChainByEnum } from '@/utils/chain';
@@ -366,6 +371,12 @@ export const BridgeContent = () => {
 
   const [showMoreOpen, setShowMoreOpen] = useState(false);
 
+  const switchFeePopup = useSetSettingVisible();
+
+  const openFeePopup = useCallback(() => {
+    switchFeePopup(true);
+  }, [switchFeePopup]);
+
   return (
     <div
       className={clsx(
@@ -431,9 +442,10 @@ export const BridgeContent = () => {
         />
       ) : null}
 
-      <div className="mx-20 mt-28">
+      <div className="mx-20 mt-20">
         {selectedBridgeQuote && (
           <BridgeShowMore
+            openFeePopup={openFeePopup}
             open={showMoreOpen}
             setOpen={setShowMoreOpen}
             sourceName={selectedBridgeQuote?.aggregator.name || ''}
diff --git a/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx b/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx
index 0ab8f030463..17a462325d9 100644
--- a/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx
+++ b/src/ui/views/Bridge/Component/BridgeQuoteItem.tsx
@@ -53,8 +53,6 @@ export const BridgeQuoteItem = (props: QuoteItemProps) => {
 
   const openSwapQuote = useSetQuoteVisible();
 
-  const openFeePopup = useSetSettingVisible();
-
   const aggregatorsList = useRabbySelector(
     (s) => s.bridge.aggregatorsList || []
   );
@@ -208,13 +206,6 @@ export const BridgeQuoteItem = (props: QuoteItemProps) => {
                 ),
               })}
             </span>
-            <RcIconInfo
-              className="text-rabby-neutral-foot w-14 h-14"
-              onClick={(e) => {
-                e.stopPropagation();
-                openFeePopup(true);
-              }}
-            />
           </div>
         </div>
 
diff --git a/src/ui/views/Bridge/Component/BridgeShowMore.tsx b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
index 04bbbd8f45a..feccb1aabf0 100644
--- a/src/ui/views/Bridge/Component/BridgeShowMore.tsx
+++ b/src/ui/views/Bridge/Component/BridgeShowMore.tsx
@@ -7,7 +7,6 @@ import React, {
   Dispatch,
   PropsWithChildren,
   SetStateAction,
-  useEffect,
   useMemo,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -19,9 +18,6 @@ import imgBestQuoteSharpBg from '@/ui/assets/swap/best-quote-sharp-bg.svg';
 import styled from 'styled-components';
 import { useDebounce } from 'react-use';
 
-const dottedClassName =
-  'h-0 flex-1 border-b-[1px] border-solid border-rabby-neutral-line opacity-50';
-
 const PreferMEVGuardSwitch = styled(Switch)`
   min-width: 20px;
   height: 12px;
@@ -67,6 +63,7 @@ export const BridgeShowMore = ({
   originPreferMEVGuarded,
   switchPreferMEV,
   recommendValue,
+  openFeePopup,
 }: {
   open: boolean;
   setOpen: Dispatch<SetStateAction<boolean>>;
@@ -97,9 +94,12 @@ export const BridgeShowMore = ({
   originPreferMEVGuarded?: boolean;
   switchPreferMEV?: (b: boolean) => void;
   recommendValue?: number;
+  openFeePopup: () => void;
 }) => {
   const { t } = useTranslation();
 
+  const RABBY_FEE = '0.25%';
+
   const data = useMemo(() => {
     if (quoteLoading || (!sourceLogo && !sourceName)) {
       return {
@@ -147,8 +147,7 @@ export const BridgeShowMore = ({
 
   return (
     <div className="mx-16">
-      <div className="flex items-center gap-8 mb-8">
-        <div className={clsx(dottedClassName)} />
+      <div className="flex items-center justify-center gap-8 mb-8">
         <div
           className={clsx(
             'flex items-center opacity-30',
@@ -162,10 +161,12 @@ export const BridgeShowMore = ({
             viewBox="0 0 14 14"
             width={14}
             height={14}
-            className={clsx('transition-transform', open && 'rotate-180')}
+            className={clsx(
+              'transition-transform',
+              open && 'rotate-180 translate-y-1'
+            )}
           />
         </div>
-        <div className={clsx(dottedClassName)} />
       </div>
 
       <div className={clsx('overflow-hidden', !open && 'h-0')}>
@@ -275,6 +276,23 @@ export const BridgeShowMore = ({
           isWrapToken={isWrapToken}
           recommendValue={recommendValue}
         />
+
+        <ListItem name={t('page.swap.rabbyFee.title')} className="mt-12 h-18">
+          <div
+            className={clsx(
+              'text-12 font-medium',
+              isWrapToken
+                ? 'text-r-neutral-foot'
+                : 'text-r-blue-default cursor-pointer'
+            )}
+            onClick={openFeePopup}
+          >
+            {isWrapToken && type === 'swap'
+              ? t('page.swap.no-fees-for-wrap')
+              : RABBY_FEE}
+          </div>
+        </ListItem>
+
         {showMEVGuardedSwitch && type === 'swap' ? (
           <ListItem
             name={
diff --git a/src/ui/views/Bridge/Component/BridgeToken.tsx b/src/ui/views/Bridge/Component/BridgeToken.tsx
index 02247ee9645..402a7e40006 100644
--- a/src/ui/views/Bridge/Component/BridgeToken.tsx
+++ b/src/ui/views/Bridge/Component/BridgeToken.tsx
@@ -20,7 +20,6 @@ import { tokenAmountBn } from '@/ui/utils/token';
 import SkeletonInput from 'antd/lib/skeleton/Input';
 import styled from 'styled-components';
 import BridgeToTokenSelect from './BridgeToTokenSelect';
-import { ReactComponent as RcIconInfoCC } from 'ui/assets/info-cc.svg';
 import { useSetSettingVisible } from '../hooks';
 import { useRabbySelector } from '@/ui/store';
 import { useAsync } from 'react-use';
@@ -100,8 +99,6 @@ export const BridgeToken = ({
   const name = isFromToken ? t('page.bridge.From') : t('page.bridge.To');
   const chainObj = findChainByEnum(chain);
 
-  const openFeePopup = useSetSettingVisible();
-
   const isMaxRef = useRef(false);
 
   const inputRef = useRef<Input>();
@@ -335,13 +332,6 @@ export const BridgeToken = ({
             ) : (
               <span>{useValue}</span>
             )}
-            {!valueLoading && isToToken && !!value && (
-              <RcIconInfoCC
-                onClick={() => openFeePopup(true)}
-                viewBox="0 0 14 14"
-                className="w-14 h-14 text-r-neutral-foot cursor-pointer"
-              />
-            )}
           </div>
           <div className="flex items-center gap-4 relative">
             <div className="flex items-center gap-4">
diff --git a/src/ui/views/Swap/Component/Main.tsx b/src/ui/views/Swap/Component/Main.tsx
index 44a35f9c898..4f05eea919b 100644
--- a/src/ui/views/Swap/Component/Main.tsx
+++ b/src/ui/views/Swap/Component/Main.tsx
@@ -14,7 +14,12 @@ import BigNumber from 'bignumber.js';
 import { useWallet } from '@/ui/utils';
 import clsx from 'clsx';
 import { QuoteList } from './Quotes';
-import { useQuoteVisible, useSetQuoteVisible, useSetRefreshId } from '../hooks';
+import {
+  useQuoteVisible,
+  useSetQuoteVisible,
+  useSetRabbyFee,
+  useSetRefreshId,
+} from '../hooks';
 import { DEX_ENUM, DEX_SPENDER_WHITELIST } from '@rabby-wallet/rabby-swap';
 import { useDispatch } from 'react-redux';
 import { useRbiSource } from '@/ui/utils/ga-event';
@@ -431,11 +436,29 @@ export const Main = () => {
     ]
   );
 
+  const setRabbyFeeVisible = useSetRabbyFee();
+
+  const openFeePopup = useCallback(() => {
+    if (isWrapToken) {
+      return;
+    }
+    setRabbyFeeVisible({
+      visible: true,
+      dexName: activeProvider?.name || undefined,
+      feeDexDesc: activeProvider?.quote?.dexFeeDesc || undefined,
+    });
+  }, [
+    isWrapToken,
+    setRabbyFeeVisible,
+    activeProvider?.name,
+    activeProvider?.quote,
+  ]);
+
   return (
     <div
       className={clsx('flex-1 overflow-auto page-has-ant-input', 'pb-[76px]')}
     >
-      <div className="my-8 mx-20">
+      <div className="mb-8 mx-20">
         <ChainSelectorInForm
           swap
           value={chain}
@@ -559,8 +582,9 @@ export const Main = () => {
         !!amountAvailable &&
         !!payToken &&
         !!receiveToken && (
-          <div className={clsx('mx-20 mb-20', noQuote ? 'mt-12' : 'mt-28')}>
+          <div className={clsx('mx-20 mb-20', noQuote ? 'mt-12' : 'mt-20')}>
             <BridgeShowMore
+              openFeePopup={openFeePopup}
               open={showMoreOpen}
               setOpen={setShowMoreOpen}
               sourceName={sourceName}
diff --git a/src/ui/views/Swap/Component/QuoteItem.tsx b/src/ui/views/Swap/Component/QuoteItem.tsx
index 1c434c5b3ce..7d19eda8e80 100644
--- a/src/ui/views/Swap/Component/QuoteItem.tsx
+++ b/src/ui/views/Swap/Component/QuoteItem.tsx
@@ -10,20 +10,18 @@ import BigNumber from 'bignumber.js';
 import ImgLock from '@/ui/assets/swap/lock.svg';
 import { ReactComponent as RcIconGasCC } from '@/ui/assets/swap/gas-cc.svg';
 import ImgVerified from '@/ui/assets/swap/verified.svg';
-import { ReactComponent as RcIconInfo } from 'ui/assets/info-cc.svg';
 
 import {
   QuotePreExecResultInfo,
   QuoteProvider,
   isSwapWrapToken,
 } from '../hooks/quote';
-import { useSetQuoteVisible, useSetRabbyFee, verifySdk } from '../hooks';
+import { useSetQuoteVisible } from '../hooks';
 import { getTokenSymbol } from '@/ui/utils/token';
 import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
 import { useTranslation } from 'react-i18next';
 import { TokenWithChain } from '@/ui/component';
 import { Tooltip } from 'antd';
-import { DEX_ENUM } from '@rabby-wallet/rabby-swap';
 
 const GAS_USE_AMOUNT_LIMIT = 2_000_000;
 
@@ -159,8 +157,6 @@ export const DexQuoteItem = (
 
   const openSwapQuote = useSetQuoteVisible();
 
-  const setRabbyFeeVisible = useSetRabbyFee();
-
   const isSdkDataPass = !!preExecResult?.isSdkPass;
 
   const halfBetterRateString = '';
@@ -495,21 +491,8 @@ export const DexQuoteItem = (
                 className={clsx(
                   'flex items-center gap-6 justify-end',
                   'text-13 font-medium',
-                  'relative',
-                  !isWrapToken && 'cursor-pointer'
+                  'relative'
                 )}
-                onClick={
-                  isWrapToken
-                    ? undefined
-                    : (e) => {
-                        e.stopPropagation();
-                        setRabbyFeeVisible({
-                          visible: true,
-                          dexName: dexId,
-                          feeDexDesc: quote?.dexFeeDesc || undefined,
-                        });
-                      }
-                }
               >
                 {disabled ? (
                   <span className="text-r-red-default">{bestQuotePercent}</span>
@@ -522,14 +505,6 @@ export const DexQuoteItem = (
                             usd: receivedTokenUsd,
                           })}
                     </span>
-                    <TooltipWithMagnetArrow
-                      arrowPointAtCenter
-                      overlayClassName={clsx('rectangle', 'w-[max-content]')}
-                      title={t('page.swap.no-fees-for-wrap')}
-                      visible={isWrapToken ? undefined : false}
-                    >
-                      <RcIconInfo className="text-rabby-neutral-foot w-14 h-14" />
-                    </TooltipWithMagnetArrow>
                   </>
                 )}
               </div>
diff --git a/src/ui/views/Swap/Component/Token.tsx b/src/ui/views/Swap/Component/Token.tsx
index c055986538f..55f56d66ec5 100644
--- a/src/ui/views/Swap/Component/Token.tsx
+++ b/src/ui/views/Swap/Component/Token.tsx
@@ -14,9 +14,7 @@ import { ReactComponent as RcIconWalletCC } from '@/ui/assets/swap/wallet-cc.svg
 import { tokenAmountBn } from '@/ui/utils/token';
 import clsx from 'clsx';
 import SkeletonInput from 'antd/lib/skeleton/Input';
-import { ReactComponent as RcIconInfoCC } from 'ui/assets/info-cc.svg';
-import { QuoteProvider, useSetRabbyFee } from '../hooks';
-import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
+import { QuoteProvider } from '../hooks';
 
 const StyledInput = styled(Input)`
   &,
@@ -143,23 +141,10 @@ export const SwapTokenItem = (props: SwapTokenItemProps) => {
     openTokenModal: () => void;
   }) => React.ReactNode = useCallback((p) => <TokenRender {...p} />, []);
 
-  const setRabbyFeeVisible = useSetRabbyFee();
-
   const isWrapQuote = useMemo(() => {
     return currentQuote?.name === 'WrapToken';
   }, [currentQuote?.name]);
 
-  const openFeePopup = useCallback(() => {
-    if (isWrapQuote) {
-      return;
-    }
-    setRabbyFeeVisible({
-      visible: true,
-      dexName: currentQuote?.name || undefined,
-      feeDexDesc: currentQuote?.quote?.dexFeeDesc || undefined,
-    });
-  }, [isWrapQuote, currentQuote?.name, currentQuote?.quote]);
-
   const onInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
     (e) => {
       onValueChange?.(e.target.value);
@@ -281,19 +266,6 @@ export const SwapTokenItem = (props: SwapTokenItemProps) => {
           ) : (
             <span>{usdValue}</span>
           )}
-          {!isFrom && !valueLoading && !!value && (
-            <TooltipWithMagnetArrow
-              title={isWrapQuote ? t('page.swap.no-fee-for-wrap') : null}
-              visible={isWrapQuote ? undefined : false}
-              className="rectangle w-[max-content]"
-            >
-              <RcIconInfoCC
-                onClick={openFeePopup}
-                viewBox="0 0 14 14"
-                className="w-14 h-14 text-r-neutral-foot cursor-pointer"
-              />
-            </TooltipWithMagnetArrow>
-          )}
         </div>
       </div>
     </div>