Merge remote-tracking branch 'origin/feat/swap-slide' into tmp/20241218

_raw/locales/en/messages.json

@@ -872,10 +872,12 @@
       "price-expired-refresh-quote": "Price expired. Refresh quote.",
       "approve-x-symbol": "Approve {{symbol}}",
       "approve-and-swap": "Approve and Swap via {{name}}",
+      "approve-swap": "Approve and Swap",
       "swap-via-x": "Swap via {{name}}",
       "get-quotes": "Get quotes",
       "chain": "Chain",
       "swap-from": "Swap from",
+      "from": "From",
       "to": "To",
       "search-by-name-address": "Search by Name / Address",
       "amount-in": "Amount in {{symbol}}",
@@ -1005,6 +1007,7 @@
       "est-difference": "Est. Difference:",
       "loss-tips": "You're losing {{usd}}. Try a different amount.",
       "price-impact": "Price Impact",
+      "max-tips": "This value is calculated by subtracting the gas cost for bridge.",
       "showMore": {
         "title": "Show More",
         "source": "Bridge Source"
@@ -2554,7 +2557,9 @@
       },
       "noTokens": "No Tokens",
       "noMatch": "No Match",
-      "noMatchSuggestion": "Try to search contract address on {{ chainName }}"
+      "noMatchSuggestion": "Try to search contract address on {{ chainName }}",
+      "hot": "Hot",
+      "recent": "Recent"
     },
     "ModalPreviewNFTItem": {
       "FieldLabel": {

src/background/controller/wallet.ts

@@ -1757,6 +1757,8 @@ export class WalletController extends BaseController {
   setAutoSlippage = swapService.setAutoSlippage;
   setIsCustomSlippage = swapService.setIsCustomSlippage;
   setSlippage = swapService.setSlippage;
+  getRecentSwapToTokens = swapService.getRecentSwapToTokens;
+  setRecentSwapToToken = swapService.setRecentSwapToToken;
 
   setRedirect2Points = RabbyPointsService.setRedirect2Points;
   setRabbyPointsSignature = RabbyPointsService.setSignature;

src/background/service/swap.ts

@@ -17,6 +17,7 @@ export type SwapServiceStore = {
   autoSlippage: boolean;
   isCustomSlippage?: boolean;
   slippage: string;
+  recentToTokens?: TokenItem[];
 
   /**
    * @deprecated
@@ -59,6 +60,7 @@ class SwapService {
     preferMEVGuarded: false,
     autoSlippage: true,
     slippage: '0.1',
+    recentToTokens: [],
   };
 
   init = async () => {
@@ -75,6 +77,7 @@ class SwapService {
         sortIncludeGasFee: true,
         autoSlippage: true,
         slippage: '0.1',
+        recentToTokens: [],
       },
     });
     if (storage) {
@@ -258,6 +261,20 @@ class SwapService {
   setSlippage = (slippage: string) => {
     this.store.slippage = slippage;
   };
+
+  getRecentSwapToTokens = () => {
+    return this.store.recentToTokens || [];
+  };
+
+  setRecentSwapToToken = (token: TokenItem) => {
+    const recentToTokens = this.store.recentToTokens || [];
+    this.store.recentToTokens = [
+      token,
+      ...recentToTokens.filter(
+        (item) => item.id !== token.id || item.chain !== token.chain
+      ),
+    ].slice(0, 5);
+  };
 }
 
 export default new SwapService();

src/ui/component/ChainSelector/InForm.tsx

@@ -7,7 +7,7 @@ import { SelectChainListProps } from '@/ui/component/ChainSelector/components/Se
 import ChainSelectorModal from '@/ui/component/ChainSelector/Modal';
 import styled from 'styled-components';
 import ChainIcon from '@/ui/component/ChainIcon';
-import { ReactComponent as RcImgArrowDown } from '@/ui/assets/swap/arrow-down.svg';
+import { ReactComponent as RcImgArrowDownCC } from '@/ui/assets/swap/arrow-down-cc.svg';
 import { useWallet } from '@/ui/utils';
 import { findChain } from '@/utils/chain';
 import { useTranslation } from 'react-i18next';
@@ -43,6 +43,16 @@ const ChainWrapper = styled.div`
       }
     }
   }
+  &.inlineHover {
+    background: transparent;
+    &:hover {
+      background: transparent;
+      .name,
+      .down {
+        color: var(--r-blue-default, #7084ff);
+      }
+    }
+  }
   &:hover {
     background: rgba(134, 151, 255, 0.2);
   }
@@ -51,6 +61,7 @@ const ChainWrapper = styled.div`
       margin-left: auto;
       width: 20px;
       height: 20px;
+      color: var(--r-neutral-body, #3e495e);
     }
     .name {
       color: var(--r-neutral-title-1, #192945);
@@ -65,12 +76,14 @@ export const ChainRender = ({
   className,
   arrowDownComponent,
   mini,
+  inlineHover,
   ...other
 }: {
   chain?: CHAINS_ENUM;
   readonly: boolean;
   arrowDownComponent?: React.ReactNode;
   mini?: boolean;
+  inlineHover?: boolean;
 } & InsHTMLAttributes<HTMLDivElement>) => {
   const wallet = useWallet();
   const { t } = useTranslation();
@@ -94,7 +107,8 @@ export const ChainRender = ({
       className={clsx(
         {
           'cursor-default hover:bg-r-neutral-bg-2': readonly,
-          mini: mini,
+          mini,
+          inlineHover,
         },
         className
       )}
@@ -117,7 +131,7 @@ export const ChainRender = ({
         (arrowDownComponent ? (
           arrowDownComponent
         ) : (
-          <RcImgArrowDown className="down" viewBox="0 0 20 20" />
+          <RcImgArrowDownCC className="down" viewBox="0 0 20 20" />
         ))}
     </ChainWrapper>
   );
@@ -139,6 +153,7 @@ interface ChainSelectorProps {
   excludeChains?: CHAINS_ENUM[];
   drawerHeight?: number;
   showClosableIcon?: boolean;
+  inlineHover?: boolean;
 }
 export default function ChainSelectorInForm({
   value,
@@ -155,6 +170,7 @@ export default function ChainSelectorInForm({
   excludeChains,
   drawerHeight,
   showClosableIcon,
+  inlineHover,
 }: ChainSelectorProps) {
   const [showSelectorModal, setShowSelectorModal] = useState(showModal);
 
@@ -183,6 +199,7 @@ export default function ChainSelectorInForm({
         className={chainRenderClassName}
         arrowDownComponent={arrowDownComponent}
         mini={mini}
+        inlineHover={inlineHover}
       />
       {!readonly && (
         <ChainSelectorModal

src/ui/component/TokenSelect/index.tsx

@@ -202,7 +202,14 @@ const TokenSelect = ({
     ).filter((e) => !excludeTokens.includes(e.id));
   }, [allDisplayTokens, searchedTokenByQuery, excludeTokens, queryConds]);
 
-  const displayTokenList = useSortToken(availableToken);
+  const displaySortedTokenList = useSortToken(availableToken);
+
+  const displayTokenList = useMemo(() => {
+    if (type === 'swapTo') {
+      return availableToken;
+    }
+    return displaySortedTokenList;
+  }, [availableToken, displaySortedTokenList, type]);
 
   const isListLoading = queryConds.keyword
     ? isSearchLoading