From 484bc3b98238b311fbe8bfdd604eea5b905a7d1a Mon Sep 17 00:00:00 2001
From: hz002 <zs4733525@gmail.com>
Date: Tue, 26 Nov 2024 17:21:01 +0800
Subject: [PATCH] style(swap): all refactor

---
 .../src/screens/Bridge/components/loading.tsx |  44 ++---
 .../src/screens/Swap/components/QuoteItem.tsx |  97 +++++-----
 .../screens/Swap/components/ReceiveDetail.tsx | 179 ++++++++----------
 .../src/screens/Swap/components/Slippage.tsx  |  47 ++---
 apps/mobile/src/screens/Swap/index.tsx        |  64 ++++---
 5 files changed, 209 insertions(+), 222 deletions(-)

diff --git a/apps/mobile/src/screens/Bridge/components/loading.tsx b/apps/mobile/src/screens/Bridge/components/loading.tsx
index cd8706cfc..e9e941c67 100644
--- a/apps/mobile/src/screens/Bridge/components/loading.tsx
+++ b/apps/mobile/src/screens/Bridge/components/loading.tsx
@@ -1,14 +1,13 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Skeleton } from '@rneui/themed';
 import { View, Text, Image, Animated, Easing, StyleSheet } from 'react-native';
-import { useTranslation } from 'react-i18next';
 import { Svg, Rect, Circle } from 'react-native-svg';
-import { createGetStyles } from '@/utils/styles';
-import { useGetBinaryMode, useThemeColors } from '@/hooks/theme';
+import { createGetStyles2024 } from '@/utils/styles';
+import { useGetBinaryMode, useTheme2024, useThemeColors } from '@/hooks/theme';
 
 const Dots = () => {
-  const colors = useThemeColors();
-  const styles = React.useMemo(() => getStyles(colors), [colors]);
+  const { styles } = useTheme2024({ getStyle });
+
   const [dot1] = React.useState(new Animated.Value(0));
   const [dot2] = React.useState(new Animated.Value(0));
   const [dot3] = React.useState(new Animated.Value(0));
@@ -115,8 +114,7 @@ const SvgComponent = ({ ...props }) => {
 };
 export const BestQuoteLoading = () => {
   const [animation] = React.useState(new Animated.Value(0));
-  const colors = useThemeColors();
-  const styles = React.useMemo(() => getStyles(colors), [colors]);
+  const { styles } = useTheme2024({ getStyle });
 
   React.useEffect(() => {
     Animated.loop(
@@ -179,11 +177,7 @@ export const BestQuoteLoading = () => {
   });
 
   return (
-    <View
-      // style={styles.container}
-      style={{
-        alignItems: 'center',
-      }}>
+    <View style={styles.rootContainer}>
       <View style={styles.svgContainer}>
         {[0, 1, 2].map(index => (
           <Animated.View
@@ -206,8 +200,8 @@ export const BestQuoteLoading = () => {
 };
 
 export const TokenPairLoading = () => {
-  const colors = useThemeColors();
-  const styles = React.useMemo(() => getStyles(colors), [colors]);
+  const { styles } = useTheme2024({ getStyle });
+
   return (
     <View style={styles.container}>
       <View style={styles.tokenInfo}>
@@ -218,8 +212,10 @@ export const TokenPairLoading = () => {
     </View>
   );
 };
-
-const getStyles = createGetStyles(colors => ({
+const getStyle = createGetStyles2024(({ colors2024 }) => ({
+  rootContainer: {
+    alignItems: 'center',
+  },
   container: {
     paddingHorizontal: 20,
     paddingVertical: 14,
@@ -271,9 +267,10 @@ const getStyles = createGetStyles(colors => ({
     height: 14,
   },
   footerText: {
-    fontSize: 13,
-    color: colors['neutral-foot'],
-    marginLeft: 6,
+    fontSize: 14,
+    color: colors2024['neutral-foot'],
+    fontFamily: 'SF Pro Rounded',
+    marginLeft: 4,
   },
   dotsContainer: {
     flexDirection: 'row',
@@ -284,7 +281,7 @@ const getStyles = createGetStyles(colors => ({
   },
   dot: {
     fontSize: 24,
-    color: colors['neutral-foot'],
+    color: colors2024['neutral-foot'],
   },
 
   dexLoading: {
@@ -296,7 +293,7 @@ const getStyles = createGetStyles(colors => ({
     gap: 10,
     borderWidth: StyleSheet.hairlineWidth,
     borderRadius: 6,
-    borderColor: colors['neutral-line'],
+    borderColor: colors2024['neutral-line'],
   },
   column: {
     flexDirection: 'row',
@@ -321,8 +318,7 @@ const getStyles = createGetStyles(colors => ({
 }));
 
 export const QuoteLoading = ({}: {}) => {
-  const colors = useThemeColors();
-  const styles = useMemo(() => getStyles(colors), [colors]);
+  const { styles } = useTheme2024({ getStyle });
 
   return (
     <View style={styles.dexLoading}>
diff --git a/apps/mobile/src/screens/Swap/components/QuoteItem.tsx b/apps/mobile/src/screens/Swap/components/QuoteItem.tsx
index 6f0f7f43f..5671b5691 100644
--- a/apps/mobile/src/screens/Swap/components/QuoteItem.tsx
+++ b/apps/mobile/src/screens/Swap/components/QuoteItem.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import ImgLock from '@/assets/icons/swap/lock.svg';
 import ImgVerified from '@/assets/icons/swap/verified.svg';
 import { CHAINS_ENUM } from '@debank/common';
@@ -14,15 +15,14 @@ import {
   useRabbyFeeVisible,
   useSetQuoteVisible,
   useSwapSettings,
-  useSwapSettingsVisible,
 } from '../hooks';
 
 import { RcIconInfoCC } from '@/assets/icons/common';
 import { RcIconSwapGas, RcIconSwapGasRed } from '@/assets/icons/swap';
 import { AssetAvatar, Tip } from '@/components';
-import { useThemeColors } from '@/hooks/theme';
+import { useTheme2024 } from '@/hooks/theme';
 import { formatAmount, formatUsdValue } from '@/utils/number';
-import { createGetStyles } from '@/utils/styles';
+import { createGetStyles2024 } from '@/utils/styles';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
@@ -73,7 +73,6 @@ export const DexQuoteItem = (
     chain,
     // userAddress,
     isBestQuote,
-    slippage,
     // fee,
     inSufficient,
     preExecResult,
@@ -85,13 +84,9 @@ export const DexQuoteItem = (
     onPress,
   } = props;
 
-  const colors = useThemeColors();
-  const styles = useMemo(() => getQuoteItemStyle(colors), [colors]);
-
+  const { styles, colors2024 } = useTheme2024({ getStyle });
   const { t } = useTranslation();
 
-  const { setVisible: openSwapSettings } = useSwapSettingsVisible();
-
   const openSwapQuote = useSetQuoteVisible();
 
   const { sortIncludeGasFee } = useSwapSettings();
@@ -161,8 +156,8 @@ export const DexQuoteItem = (
               styles.percentText,
               {
                 color: !isBestQuote
-                  ? colors['red-default']
-                  : colors['green-default'],
+                  ? colors2024['red-default']
+                  : colors2024['green-default'],
               },
             ]}>
             {isBestQuote
@@ -227,7 +222,7 @@ export const DexQuoteItem = (
       styles.percentText,
       styles.failedTipText,
       isBestQuote,
-      colors,
+      colors2024,
       t,
     ]);
 
@@ -344,11 +339,11 @@ export const DexQuoteItem = (
           {
             position: 'relative',
             backgroundColor: !(disabled || inSufficient || gasFeeTooHight)
-              ? colors['neutral-card-1']
+              ? colors2024['neutral-card-1']
               : 'transparent',
             borderColor: !(disabled || inSufficient || gasFeeTooHight)
               ? 'transparent'
-              : colors['neutral-line'],
+              : colors2024['neutral-line'],
             borderWidth: !(disabled || inSufficient || gasFeeTooHight)
               ? 0
               : StyleSheet.hairlineWidth,
@@ -434,7 +429,7 @@ export const DexQuoteItem = (
                 paddingLeft: 4,
               },
               gasFeeTooHight && {
-                backgroundColor: colors['red-light'],
+                backgroundColor: colors2024['red-light'],
               },
             ]}>
             {!disabled && !inSufficient && (
@@ -451,7 +446,7 @@ export const DexQuoteItem = (
                 <Text
                   style={[
                     styles.gasUsd,
-                    gasFeeTooHight && { color: colors['red-default'] },
+                    gasFeeTooHight && { color: colors2024['red-default'] },
                   ]}>
                   {preExecResult?.gasUsd}
                 </Text>
@@ -461,7 +456,12 @@ export const DexQuoteItem = (
 
           <View style={{ flexDirection: 'row', gap: 6, alignItems: 'center' }}>
             {disabled ? (
-              <Text>{bestQuotePercent}</Text>
+              <Text
+                style={{
+                  fontFamily: 'SF Pro Rounded',
+                }}>
+                {bestQuotePercent}
+              </Text>
             ) : (
               <>
                 <Text style={styles.receivedTokenUsd}>
@@ -474,9 +474,9 @@ export const DexQuoteItem = (
                 {isWrapToken ? (
                   <Tip content={t('page.swap.no-fees-for-wrap')}>
                     <RcIconInfoCC
-                      width={14}
-                      height={14}
-                      color={colors['neutral-foot']}
+                      width={16}
+                      height={16}
+                      color={colors2024['neutral-foot']}
                     />
                   </Tip>
                 ) : (
@@ -490,9 +490,9 @@ export const DexQuoteItem = (
                       });
                     }}>
                     <RcIconInfoCC
-                      width={14}
-                      height={14}
-                      color={colors['neutral-foot']}
+                      width={16}
+                      height={16}
+                      color={colors2024['neutral-foot']}
                     />
                   </TouchableOpacity>
                 )}
@@ -521,15 +521,14 @@ export function CheckedIcon() {
     </Tip>
   );
 }
-
-export const getQuoteItemStyle = createGetStyles(colors => ({
+const getStyle = createGetStyles2024(({ colors2024 }) => ({
   dexContainer: {
     position: 'relative',
     // borderWidth: StyleSheet.hairlineWidth,
-    paddingHorizontal: 16,
-    paddingTop: 24,
-    paddingBottom: 15,
-    // gap: 10,
+    paddingLeft: 25,
+    paddingRight: 17,
+    paddingTop: 36,
+    paddingBottom: 30,
     justifyContent: 'center',
     borderRadius: 6,
     shadowColor: 'rgba(0, 0, 0, 0.08)',
@@ -554,31 +553,36 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
   percentText: {
     fontSize: 12,
     lineHeight: 14,
+    fontFamily: 'SF Pro Rounded',
     fontWeight: '500',
   },
   failedTipText: {
-    fontSize: 13,
+    fontSize: 14,
     fontWeight: '400',
-    color: colors['neutral-body'],
+    fontFamily: 'SF Pro Rounded',
+    color: colors2024['neutral-body'],
     lineHeight: 16,
   },
 
   nameText: {
     fontSize: 16,
-    lineHeight: 19,
-    fontWeight: '500',
-    color: colors['neutral-title-1'],
+    lineHeight: 20,
+    fontWeight: '700',
+    fontFamily: 'SF Pro Rounded',
+    color: colors2024['neutral-title-1'],
   },
 
   gasUsd: {
-    color: colors['neutral-foot'],
-    fontSize: 13,
+    color: colors2024['neutral-foot'],
+    fontSize: 14,
+    fontFamily: 'SF Pro Rounded',
     fontWeight: '400',
     lineHeight: 16,
   },
   receivedTokenUsd: {
-    color: colors['neutral-foot'],
-    fontSize: 13,
+    color: colors2024['neutral-foot'],
+    fontSize: 14,
+    fontFamily: 'SF Pro Rounded',
     fontWeight: '400',
     lineHeight: 16,
   },
@@ -586,9 +590,10 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
   middleDefaultText: {
     width: 'auto',
     fontSize: 16,
-    lineHeight: 19,
-    fontWeight: '500',
-    color: colors['neutral-title-1'],
+    lineHeight: 20,
+    fontWeight: '700',
+    fontFamily: 'SF Pro Rounded',
+    color: colors2024['neutral-title-1'],
   },
 
   disabledContentWrapper: {
@@ -598,7 +603,7 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
     right: 0,
     bottom: 0,
     borderRadius: 6,
-    backgroundColor: colors['neutral-black'],
+    backgroundColor: colors2024['neutral-black'],
     justifyContent: 'center',
   },
 
@@ -609,13 +614,13 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
     alignItems: 'center',
   },
   disabledContentText: {
-    color: colors['neutral-title-2'],
+    color: colors2024['neutral-title-2'],
     fontSize: 14,
     fontWeight: '500',
     lineHeight: 17,
   },
   disabledContentBtnText: {
-    color: colors['blue-default'],
+    color: colors2024['blue-default'],
     fontSize: 14,
     fontWeight: '500',
     textAlign: 'left',
@@ -630,9 +635,9 @@ export const getQuoteItemStyle = createGetStyles(colors => ({
     paddingVertical: 1,
     borderTopLeftRadius: 4,
     borderBottomRightRadius: 4,
-    backgroundColor: colors['red-light'],
+    backgroundColor: colors2024['red-light'],
   },
   bestQuotePercentContainerIsBest: {
-    backgroundColor: colors['green-light'],
+    backgroundColor: colors2024['green-light'],
   },
 }));
diff --git a/apps/mobile/src/screens/Swap/components/ReceiveDetail.tsx b/apps/mobile/src/screens/Swap/components/ReceiveDetail.tsx
index 3a5f56a8a..aec87ab17 100644
--- a/apps/mobile/src/screens/Swap/components/ReceiveDetail.tsx
+++ b/apps/mobile/src/screens/Swap/components/ReceiveDetail.tsx
@@ -2,34 +2,25 @@ import ImgVerified from '@/assets/icons/swap/verified.svg';
 import ImgWarning from '@/assets/icons/swap/warn.svg';
 import { TokenItem } from '@rabby-wallet/rabby-api/dist/types';
 import BigNumber from 'bignumber.js';
-import {
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { RcIconInfoCC } from '@/assets/icons/common';
-import {
-  RcIconSwapHistoryEmpty,
-  RcIconSwitchQuoteCC,
-} from '@/assets/icons/swap';
+import { RcIconSwitchQuoteCC } from '@/assets/icons/swap';
 import { Tip } from '@/components';
 import { CHAINS_ENUM } from '@/constant/chains';
 import { DEX_WITH_WRAP } from '@/constant/swap';
-import { useThemeColors } from '@/hooks/theme';
+import { useTheme2024 } from '@/hooks/theme';
 import i18n from '@/utils/i18n';
 import { formatAmount, formatUsdValue } from '@/utils/number';
-import { createGetStyles } from '@/utils/styles';
+import { createGetStyles2024 } from '@/utils/styles';
 import { getTokenSymbol } from '@/utils/token';
-import { Skeleton, SkeletonProps } from '@rneui/themed';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { QuoteProvider } from '../hooks';
 import { isSwapWrapToken } from '../utils';
 import { DexQuoteItem } from './QuoteItem';
+import RcIconNoFind from '@/assets2024/icons/address/noFind.svg';
 
 const getQuoteLessWarning = ([receive, diff]: [string, string]) =>
   i18n.t('page.swap.QuoteLessWarning', { receive, diff });
@@ -72,17 +63,13 @@ interface ReceiveDetailsProps {
 }
 export const ReceiveDetails = (props: ReceiveDetailsProps) => {
   const { t } = useTranslation();
-  const colors = useThemeColors();
-  const styles = useMemo(() => getStyles(colors), [colors]);
+  const { styles, colors2024 } = useTheme2024({ getStyle });
   const {
     receiveRawAmount: receiveAmount,
     payAmount,
     payToken,
     receiveToken,
-    quoteWarning,
-    loading = false,
     activeProvider,
-    isWrapToken,
     bestQuoteDex,
     chain,
     openQuotesList,
@@ -90,48 +77,36 @@ export const ReceiveDetails = (props: ReceiveDetailsProps) => {
 
   const [reverse, setReverse] = useState(false);
 
-  const reverseRate = useCallback(() => {
-    setReverse(e => !e);
-  }, []);
-
   useEffect(() => {
     if (payToken && receiveToken) {
       setReverse(false);
     }
   }, [receiveToken, payToken]);
 
-  const {
-    receiveNum,
-    payUsd,
-    receiveUsd,
-    rate,
-    diff,
-    sign,
-    showLoss,
-    lossUsd,
-  } = useMemo(() => {
-    const pay = new BigNumber(payAmount).times(payToken.price || 0);
-    const receiveAll = new BigNumber(receiveAmount);
-    const receive = receiveAll.times(receiveToken.price || 0);
-    const cut = receive.minus(pay).div(pay).times(100);
-    const rateBn = new BigNumber(reverse ? payAmount : receiveAll).div(
-      reverse ? receiveAll : payAmount,
-    );
-    const lossUsd = formatUsdValue(receive.minus(pay).abs().toString());
+  const { receiveNum, payUsd, receiveUsd, diff, sign, showLoss, lossUsd } =
+    useMemo(() => {
+      const pay = new BigNumber(payAmount).times(payToken.price || 0);
+      const receiveAll = new BigNumber(receiveAmount);
+      const receive = receiveAll.times(receiveToken.price || 0);
+      const cut = receive.minus(pay).div(pay).times(100);
+      const rateBn = new BigNumber(reverse ? payAmount : receiveAll).div(
+        reverse ? receiveAll : payAmount,
+      );
+      const lossUsd = formatUsdValue(receive.minus(pay).abs().toString());
 
-    return {
-      receiveNum: formatAmount(receiveAll.toString(10)),
-      payUsd: formatUsdValue(pay.toString(10)),
-      receiveUsd: formatUsdValue(receive.toString(10)),
-      rate: rateBn.lt(0.0001)
-        ? new BigNumber(rateBn.toPrecision(1, 0)).toString(10)
-        : formatAmount(rateBn.toString(10)),
-      sign: cut.eq(0) ? '' : cut.lt(0) ? '-' : '+',
-      diff: cut.abs().toFixed(2),
-      showLoss: cut.lte(-5),
-      lossUsd,
-    };
-  }, [payAmount, payToken.price, receiveAmount, receiveToken.price, reverse]);
+      return {
+        receiveNum: formatAmount(receiveAll.toString(10)),
+        payUsd: formatUsdValue(pay.toString(10)),
+        receiveUsd: formatUsdValue(receive.toString(10)),
+        rate: rateBn.lt(0.0001)
+          ? new BigNumber(rateBn.toPrecision(1, 0)).toString(10)
+          : formatAmount(rateBn.toString(10)),
+        sign: cut.eq(0) ? '' : cut.lt(0) ? '-' : '+',
+        diff: cut.abs().toFixed(2),
+        showLoss: cut.lte(-5),
+        lossUsd,
+      };
+    }, [payAmount, payToken.price, receiveAmount, receiveToken.price, reverse]);
 
   const isBestQuote = useMemo(
     () => !!bestQuoteDex && activeProvider?.name === bestQuoteDex,
@@ -147,29 +122,17 @@ export const ReceiveDetails = (props: ReceiveDetailsProps) => {
     () => isSwapWrapToken(payToken.id, receiveToken.id, chain),
     [payToken, receiveToken, chain],
   );
-
   if (!activeProvider) {
     return (
       <View style={[styles.receiveWrapper, styles.receiveWrapperEmpty]}>
         <TouchableOpacity onPress={openQuotesList}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <RcIconSwapHistoryEmpty width={18} height={18} />
-            <Text
-              style={{
-                fontSize: 13,
-                fontWeight: 'normal',
-                color: colors['neutral-foot'],
-              }}>
+          <View style={styles.emptyWrapper}>
+            <RcIconNoFind width={159} height={117} />
+            <Text style={styles.emptyText}>
               {t('page.swap.No-available-quote')}
             </Text>
           </View>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.quoteProvider} onPress={openQuotesList}>
-          <RcIconSwitchQuoteCC
-            color={colors['blue-default']}
-            style={styles.switchImage}
-          />
-        </TouchableOpacity>
       </View>
     );
   }
@@ -216,7 +179,7 @@ export const ReceiveDetails = (props: ReceiveDetailsProps) => {
               onPress={openQuotesList}>
               <Text style={styles.quoteProviderBestText}>Best</Text>
               <RcIconSwitchQuoteCC
-                color={colors['green-default']}
+                color={colors2024['neutral-InvertHighlight']}
                 style={styles.switchImage}
               />
             </TouchableOpacity>
@@ -226,7 +189,7 @@ export const ReceiveDetails = (props: ReceiveDetailsProps) => {
               style={styles.quoteProvider}
               onPress={openQuotesList}>
               <RcIconSwitchQuoteCC
-                color={colors['blue-default']}
+                color={colors2024['neutral-body']}
                 style={styles.switchImage}
               />
             </TouchableOpacity>
@@ -262,7 +225,7 @@ export const ReceiveDetails = (props: ReceiveDetailsProps) => {
                     </View>
                   }>
                   <RcIconInfoCC
-                    color={colors['neutral-foot']}
+                    color={colors2024['neutral-foot']}
                     width={14}
                     height={14}
                   />
@@ -283,29 +246,41 @@ export const ReceiveDetails = (props: ReceiveDetailsProps) => {
   );
 };
 
-const getStyles = createGetStyles(colors => ({
+const getStyle = createGetStyles2024(({ colors2024 }) => ({
   receiveWrapper: {
     position: 'relative',
-    marginTop: 24,
+    marginTop: 35,
     borderWidth: 1,
-    borderColor: colors['blue-default'],
-    borderRadius: 4,
-    // padding: 12,
-    color: colors['neutral-title-1'],
+    borderColor: colors2024['neutral-line'],
+    borderRadius: 24,
+    color: colors2024['neutral-title-1'],
     fontSize: 13,
   },
   receiveWrapperBest: {
-    borderColor: colors['green-default'],
+    borderColor: colors2024['green-default'],
+    backgroundColor: colors2024['green-light-4'],
   },
   receiveWrapperEmpty: {
-    borderColor: colors['neutral-line'],
+    borderColor: colors2024['neutral-line'],
     padding: 0,
-    paddingVertical: 40,
+    paddingVertical: 11,
+    marginTop: 12,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     gap: 6,
   },
+  emptyWrapper: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 21,
+  },
+  emptyText: {
+    fontSize: 16,
+    lineHeight: 20,
+    fontWeight: 'normal',
+    color: colors2024['neutral-info'],
+  },
   column: {
     paddingBottom: 12,
     gap: 10,
@@ -337,13 +312,13 @@ const getStyles = createGetStyles(colors => ({
   titleText: {
     fontSize: 16,
     fontWeight: '500',
-    color: colors['neutral-title-1'],
+    color: colors2024['neutral-title-1'],
     marginRight: 2,
   },
   amountText: {
     fontSize: 16,
     fontWeight: '500',
-    color: colors['neutral-title-1'],
+    color: colors2024['neutral-title-1'],
     maxWidth: 170,
     overflow: 'hidden',
     marginLeft: 8,
@@ -352,27 +327,27 @@ const getStyles = createGetStyles(colors => ({
   diffText: {
     fontSize: 13,
     fontWeight: '400',
-    color: colors['neutral-foot'],
+    color: colors2024['neutral-foot'],
   },
   warning: {
     marginBottom: 8,
     padding: 8,
     position: 'relative',
-    backgroundColor: colors['orange-light'],
+    backgroundColor: colors2024['orange-light'],
     borderRadius: 4,
   },
   warningText: {
     fontWeight: '400',
     fontSize: 13,
-    color: colors['orange-default'],
+    color: colors2024['orange-default'],
   },
   footer: {
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: colors['neutral-line'],
+    borderTopColor: colors2024['neutral-line'],
     paddingTop: 8,
   },
   rateText: {
-    color: colors['neutral-body'],
+    color: colors2024['neutral-body'],
     fontSize: 14,
     fontWeight: '400',
   },
@@ -380,7 +355,7 @@ const getStyles = createGetStyles(colors => ({
     maxWidth: 182,
     fontSize: 14,
     fontWeight: '400',
-    color: colors['neutral-body'],
+    color: colors2024['neutral-body'],
   },
   quoteProvider: {
     position: 'absolute',
@@ -395,19 +370,19 @@ const getStyles = createGetStyles(colors => ({
     paddingHorizontal: 6,
     paddingVertical: 2,
 
-    backgroundColor: colors['blue-light-1'],
+    backgroundColor: colors2024['neutral-bg-2'],
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: colors['blue-default'],
+    borderColor: colors2024['neutral-line'],
   },
   quoteProviderBest: {
-    backgroundColor: colors['green-light'],
-    borderColor: colors['green-default'],
+    backgroundColor: colors2024['green-default'],
+    borderColor: colors2024['green-default'],
   },
   quoteProviderBestText: {
     fontSize: 13,
     lineHeight: 16,
-    color: colors['green-default'],
+    color: colors2024['neutral-InvertHighlight'],
   },
   switchImage: {
     width: 12,
@@ -421,7 +396,7 @@ const getStyles = createGetStyles(colors => ({
   tooltipText: {
     fontSize: 12,
     fontWeight: '400',
-    color: colors['neutral-title-2'],
+    color: colors2024['neutral-title-2'],
   },
   gap4: {
     gap: 4,
@@ -430,10 +405,10 @@ const getStyles = createGetStyles(colors => ({
   gap6: { gap: 6 },
 
   red: {
-    color: colors['red-default'],
+    color: colors2024['red-default'],
   },
   green: {
-    color: colors['green-default'],
+    color: colors2024['green-default'],
   },
   afterWrapper: {
     marginTop: 12,
@@ -442,7 +417,7 @@ const getStyles = createGetStyles(colors => ({
   },
   afterLabel: {
     fontSize: 13,
-    color: colors['neutral-body'],
+    color: colors2024['neutral-body'],
   },
   afterValueContainer: {
     flexDirection: 'row',
@@ -452,7 +427,7 @@ const getStyles = createGetStyles(colors => ({
   afterValue: {
     fontSize: 14,
     fontWeight: '500',
-    color: colors['neutral-title-1'],
+    color: colors2024['neutral-title-1'],
   },
   impactTooltip: {
     flexDirection: 'column',
@@ -463,17 +438,17 @@ const getStyles = createGetStyles(colors => ({
   impactTooltipText: {
     fontSize: 12,
     lineHeight: 14,
-    color: colors['neutral-title-2'],
+    color: colors2024['neutral-title-2'],
   },
   warningTipContainer: {
     marginTop: 8,
     marginHorizontal: 12,
     borderRadius: 4,
-    backgroundColor: colors['red-light'],
+    backgroundColor: colors2024['red-light'],
     padding: 10,
   },
   warningTip: {
-    color: colors['red-default'],
+    color: colors2024['red-default'],
     fontWeight: '400',
     fontSize: 14,
     lineHeight: 17,
diff --git a/apps/mobile/src/screens/Swap/components/Slippage.tsx b/apps/mobile/src/screens/Swap/components/Slippage.tsx
index 71018dabe..3c8f251a2 100644
--- a/apps/mobile/src/screens/Swap/components/Slippage.tsx
+++ b/apps/mobile/src/screens/Swap/components/Slippage.tsx
@@ -9,8 +9,8 @@ import {
 } from 'react-native';
 import BigNumber from 'bignumber.js';
 import { Trans, useTranslation } from 'react-i18next';
-import { useThemeColors } from '@/hooks/theme';
-import { createGetStyles } from '@/utils/styles';
+import { useTheme2024 } from '@/hooks/theme';
+import { createGetStyles2024 } from '@/utils/styles';
 import { Input } from '@rneui/base';
 import { RcIconArrowUp } from '@/assets/icons/swap';
 import { useSlippageStore } from '../hooks';
@@ -25,8 +25,7 @@ interface SlippageProps {
 }
 
 const SlippageItem = (props: TouchableOpacityProps & { active?: boolean }) => {
-  const colors = useThemeColors();
-  const styles = useMemo(() => getStyles(colors), [colors]);
+  const { styles } = useTheme2024({ getStyle });
 
   return (
     <TouchableOpacity
@@ -40,8 +39,7 @@ const SlippageItem = (props: TouchableOpacityProps & { active?: boolean }) => {
 export const Slippage = (props: SlippageProps) => {
   const { t } = useTranslation();
 
-  const colors = useThemeColors();
-  const styles = useMemo(() => getStyles(colors), [colors]);
+  const { styles, colors2024 } = useTheme2024({ getStyle });
 
   const {
     autoSlippage,
@@ -165,7 +163,7 @@ export const Slippage = (props: SlippageProps) => {
             <SlippageItem
               style={[
                 styles.inputItem,
-                isCustomSlippage && { borderColor: colors['blue-default'] },
+                isCustomSlippage && { borderColor: colors2024['blue-default'] },
               ]}
               active={isCustomSlippage}>
               <Input
@@ -195,15 +193,17 @@ export const Slippage = (props: SlippageProps) => {
   );
 };
 
-const getStyles = createGetStyles(colors => ({
+const getStyle = createGetStyles2024(({ colors2024 }) => ({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   text: {
-    fontSize: 13,
-    color: colors['neutral-body'],
+    fontSize: 14,
+    fontWeight: '400',
+    fontFamily: 'SF Pro Rounded',
+    color: colors2024['neutral-body'],
   },
   valueContainer: {
     flexDirection: 'row',
@@ -211,12 +211,13 @@ const getStyles = createGetStyles(colors => ({
     gap: 4,
   },
   value: {
-    fontSize: 13,
+    fontSize: 14,
     fontWeight: '500',
-    color: colors['neutral-title-1'],
+    fontFamily: 'SF Pro Rounded',
+    color: colors2024['neutral-title-1'],
   },
   warning: {
-    color: colors['red-default'],
+    color: colors2024['red-default'],
   },
   selectContainer: {
     marginTop: 8,
@@ -224,7 +225,8 @@ const getStyles = createGetStyles(colors => ({
   input: {
     fontSize: 14,
     fontWeight: '500',
-    color: colors['neutral-title-1'],
+    fontFamily: 'SF Pro Rounded',
+    color: colors2024['neutral-title-1'],
   },
   inputContainerStyle: {
     borderWidth: 0,
@@ -239,18 +241,19 @@ const getStyles = createGetStyles(colors => ({
   warningTipContainer: {
     marginTop: 8,
     borderRadius: 4,
-    backgroundColor: colors['red-light'],
-    padding: 10,
+    backgroundColor: colors2024['red-light-1'],
+    padding: 8,
   },
   warningTip: {
-    color: colors['red-default'],
+    color: colors2024['red-default'],
     fontWeight: '400',
-    fontSize: 14,
+    fontFamily: 'SF Pro Rounded',
+    fontSize: 12,
     lineHeight: 17,
   },
   item: {
     flexDirection: 'row',
-    backgroundColor: colors['neutral-card-2'],
+    backgroundColor: colors2024['neutral-card-2'],
     justifyContent: 'center',
     alignItems: 'center',
     height: 36,
@@ -258,8 +261,8 @@ const getStyles = createGetStyles(colors => ({
     borderRadius: 4,
   },
   itemActive: {
-    backgroundColor: colors['blue-light-1'],
-    borderColor: colors['blue-default'],
+    backgroundColor: colors2024['brand-light-1'],
+    borderColor: colors2024['brand-default'],
     borderWidth: StyleSheet.hairlineWidth,
   },
   listContainer: {
@@ -270,7 +273,7 @@ const getStyles = createGetStyles(colors => ({
   },
   inputItem: {
     flex: 1,
-    borderColor: colors['neutral-line'],
+    borderColor: colors2024['neutral-line'],
     borderWidth: StyleSheet.hairlineWidth,
   },
 }));
diff --git a/apps/mobile/src/screens/Swap/index.tsx b/apps/mobile/src/screens/Swap/index.tsx
index c07f93c97..94deda0d1 100644
--- a/apps/mobile/src/screens/Swap/index.tsx
+++ b/apps/mobile/src/screens/Swap/index.tsx
@@ -1,5 +1,4 @@
-import { RcIconMaxButton, RcIconSwapArrow } from '@/assets/icons/swap';
-import RcDangerIcon from '@/assets/icons/swap/info-error.svg';
+import { RcIconSwapArrow } from '@/assets/icons/swap';
 import { AppSwitch, Tip } from '@/components';
 import { AccountSwitcherModal } from '@/components/AccountSwitcher/Modal';
 import { MiniApproval } from '@/components/Approval/components/MiniSignTx/MiniSignTx';
@@ -17,7 +16,6 @@ import { useLastUsedAccountInScreen } from '@/hooks/useLastUsedAccountInScreen';
 import { findChainByEnum, findChainByServerID } from '@/utils/chain';
 import { formatAmount, formatUsdValue } from '@/utils/number';
 import { createGetStyles2024 } from '@/utils/styles';
-import { getTokenSymbol } from '@/utils/token';
 import { CHAINS, CHAINS_ENUM } from '@debank/common';
 import { KEYRING_CLASS, KEYRING_TYPE } from '@rabby-wallet/keyring-utils';
 import { TokenItem } from '@rabby-wallet/rabby-api/dist/types';
@@ -68,7 +66,7 @@ const Swap = () => {
   const { setNavigationOptions } = useSafeSetNavigationOptions();
   useEffect(() => {
     setNavigationOptions({
-      headerRight: () => <SwapHeader />,
+      headerRight: SwapHeader,
     });
   }, [setNavigationOptions]);
 
@@ -468,8 +466,12 @@ const Swap = () => {
                   handleBalance();
                 }
               }}>
-              <Text style={[styles.balanceText]}>
-                {t('global.Balance')}: {formatAmount(payToken?.amount || 0)}
+              <Text
+                style={[styles.balanceText, inSufficient && styles.errorTip]}>
+                {inSufficient
+                  ? t('page.swap.insufficient-balance')
+                  : t('global.Balance')}
+                : {formatAmount(payToken?.amount || 0)}
               </Text>
               {payTokenAmountAvailable && (
                 <TouchableOpacity
@@ -507,7 +509,9 @@ const Swap = () => {
           Number(payAmount) > 0 &&
           !inSufficient &&
           !activeProvider?.manualClick ? (
-            <BestQuoteLoading />
+            <View style={styles.loadingQuoteContainer}>
+              <BestQuoteLoading />
+            </View>
           ) : null}
           {Number(payAmount) > 0 &&
           !inSufficient &&
@@ -572,16 +576,6 @@ const Swap = () => {
             </>
           ) : null}
         </View>
-
-        {inSufficient ? (
-          <View style={styles.inSufficient}>
-            <RcDangerIcon width={16} height={16} style={{ marginRight: 2 }} />
-
-            <Text style={styles.inSufficientText}>
-              {t('page.swap.insufficient-balance')}
-            </Text>
-          </View>
-        ) : null}
       </KeyboardAwareScrollView>
       <View
         style={[
@@ -715,6 +709,9 @@ const getStyle = createGetStyles2024(({ colors2024 }) => ({
     lineHeight: 18,
     fontFamily: 'SF Pro Rounded',
   },
+  errorTip: {
+    color: colors2024['red-default'],
+  },
   rowView: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -761,41 +758,52 @@ const getStyle = createGetStyles2024(({ colors2024 }) => ({
   },
 
   inputContainer: {
-    flexDirection: 'row',
-    height: 52,
-    borderRadius: 10,
-    paddingHorizontal: 12,
+    flexDirection: 'column',
+    height: 98,
+    borderRadius: 30,
+    paddingHorizontal: 13,
+    paddingVertical: 16,
     backgroundColor: colors2024['neutral-bg-2'],
-    alignItems: 'center',
   },
   input: {
     paddingRight: 10,
     fontSize: 20,
     fontWeight: '600',
     position: 'relative',
+    height: 36,
     flex: 1,
     color: colors2024['neutral-title-1'],
     backgroundColor: 'transparent',
   },
   inputUsdValue: {
-    fontSize: 12,
+    fontSize: 14,
     fontWeight: '400',
+    marginTop: 12,
     fontFamily: 'SF Pro Rounded',
-    color: colors2024['neutral-foot'],
+    color: colors2024['neutral-info'],
+  },
+  loadingQuoteContainer: {
+    borderWidth: 1,
+    paddingBottom: 16,
+    borderColor: colors2024['neutral-line'],
+    borderRadius: 24,
+    marginTop: 24,
+    backgroundColor: colors2024['neutral-bg-1'],
   },
 
   afterWrapper: {
-    marginTop: 12,
-    gap: 12,
-    paddingHorizontal: 12,
+    marginTop: 20,
+    gap: 20,
   },
   afterLabel: {
-    fontSize: 13,
+    fontSize: 14,
+    fontFamily: 'SF Pro Rounded',
     color: colors2024['neutral-body'],
   },
   afterValue: {
     fontSize: 14,
     fontWeight: '500',
+    fontFamily: 'SF Pro Rounded',
     color: colors2024['neutral-title-1'],
   },
   inSufficient: {