Merge remote-tracking branch 'origin/feat/bridge-v2' into tmp/20241108

src/background/controller/wallet.ts

@@ -1760,9 +1760,6 @@ export class WalletController extends BaseController {
   getBridgeSortIncludeGasFee = bridgeService.getBridgeSortIncludeGasFee;
   setBridgeSortIncludeGasFee = bridgeService.setBridgeSortIncludeGasFee;
   setBridgeSettingFirstOpen = bridgeService.setBridgeSettingFirstOpen;
-  setBridgeAutoSlippage = bridgeService.setAutoSlippage;
-  setBridgeIsCustomSlippage = bridgeService.setIsCustomSlippage;
-  setBridgeSlippage = bridgeService.setSlippage;
 
   getGasAccountData = gasAccountService.getGasAccountData;
   getGasAccountSig = gasAccountService.getGasAccountSig;

src/background/service/bridge.ts

@@ -19,10 +19,6 @@ export type BridgeRecord = {
 };
 
 export type BridgeServiceStore = {
-  autoSlippage: boolean;
-  isCustomSlippage?: boolean;
-  slippage: string;
-
   selectedChain: CHAINS_ENUM | null;
   selectedFromToken?: TokenItem;
   selectedToToken?: TokenItem;
@@ -52,8 +48,6 @@ class BridgeService {
     unlimitedAllowance: false,
     sortIncludeGasFee: true,
     firstOpen: true,
-    autoSlippage: true,
-    slippage: '1',
   };
 
   init = async () => {
@@ -65,8 +59,6 @@ class BridgeService {
         sortIncludeGasFee: true,
         txQuotes: {},
         firstOpen: true,
-        autoSlippage: true,
-        slippage: '1',
       },
     });
 
@@ -148,18 +140,6 @@ class BridgeService {
       });
     }
   };
-
-  setAutoSlippage = (auto: boolean) => {
-    this.store.autoSlippage = auto;
-  };
-
-  setIsCustomSlippage = (isCustomSlippage: boolean) => {
-    this.store.isCustomSlippage = isCustomSlippage;
-  };
-
-  setSlippage = (slippage: string) => {
-    this.store.slippage = slippage;
-  };
 }
 
 export default new BridgeService();

src/ui/hooks/contextState.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { noop } from 'lodash';
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, cloneElement, memo } from 'react';
 
 export function createContextState<T>(initialState: T) {
   const StateContext = createContext<T>(initialState);

src/ui/models/bridge.ts

@@ -13,8 +13,6 @@ export const bridge = createModel<RootModel>()({
   name: 'bridge',
 
   state: {
-    slippage: '1',
-    autoSlippage: true,
     supportedChains: DEFAULT_BRIDGE_SUPPORTED_CHAIN,
     aggregatorsListInit: false,
     aggregatorsList: DEFAULT_BRIDGE_AGGREGATOR,
@@ -128,21 +126,5 @@ export const bridge = createModel<RootModel>()({
         });
       }
     },
-
-    async setAutoSlippage(autoSlippage: boolean, store) {
-      await store.app.wallet.setBridgeAutoSlippage(autoSlippage);
-      console.log('autoSlippage set', autoSlippage);
-      this.setField({ autoSlippage });
-    },
-
-    async setIsCustomSlippage(isCustomSlippage: boolean, store) {
-      await store.app.wallet.setBridgeIsCustomSlippage(isCustomSlippage);
-      this.setField({ isCustomSlippage });
-    },
-
-    async setSlippage(slippage: string, store) {
-      await store.app.wallet.setBridgeSlippage(slippage);
-      this.setField({ slippage });
-    },
   }),
 });

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

@@ -1,18 +1,15 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useRabbySelector } from '@/ui/store';
 import { useBridge } from '../hooks/token';
-import { Alert, Button, Input, message, Modal } from 'antd';
+import { Alert, Button, message, Modal } from 'antd';
 import BigNumber from 'bignumber.js';
 import { useWallet } from '@/ui/utils';
-import styled from 'styled-components';
 import clsx from 'clsx';
 import { QuoteList } from './BridgeQuotes';
 import { useQuoteVisible, useSetQuoteVisible, useSetRefreshId } from '../hooks';
 import { useRbiSource } from '@/ui/utils/ga-event';
 import { useCss } from 'react-use';
-import { findChainByEnum, findChainByServerID } from '@/utils/chain';
-import type { SelectChainItemProps } from '@/ui/component/ChainSelector/components/SelectChainItem';
-import i18n from '@/i18n';
+import { findChainByEnum } from '@/utils/chain';
 import { useTranslation } from 'react-i18next';
 
 import pRetry from 'p-retry';
@@ -27,49 +24,6 @@ import { BridgeShowMore, RecommendFromToken } from './BridgeShowMore';
 import { BridgeSwitchBtn } from './BridgeSwitchButton';
 import { ReactComponent as RcIconWarningCC } from '@/ui/assets/warning-cc.svg';
 
-const tipsClassName = clsx('text-r-neutral-body text-12 mb-8 pt-14');
-
-const StyledInput = styled(Input)`
-  height: 46px;
-  font-weight: 500;
-  font-size: 18px;
-  box-shadow: none;
-  border-radius: 4px;
-  border: 1px solid var(--r-neutral-line, #d3d8e0);
-  background: transparent !important;
-  & > .ant-input {
-    font-weight: 500;
-    font-size: 18px;
-    border-width: 0px !important;
-    border-color: transparent;
-  }
-  &.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-    border-width: 1px !important;
-  }
-  &:active {
-    border: 1px solid transparent;
-  }
-  &:focus,
-  &:focus-within {
-    border-width: 1px !important;
-    border-color: var(--r-blue-default, #7084ff) !important;
-  }
-  &:hover {
-    border-width: 1px !important;
-    border-color: var(--r-blue-default, #7084ff) !important;
-    box-shadow: none;
-  }
-
-  &:placeholder-shown {
-    color: #707280;
-  }
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
-
 export const BridgeContent = () => {
   const { userAddress } = useRabbySelector((state) => ({
     userAddress: state.account.currentAccount?.address || '',
@@ -108,6 +62,11 @@ export const BridgeContent = () => {
     setSlippageChanged,
     isSlippageHigh,
     isSlippageLow,
+
+    autoSlippage,
+    isCustomSlippage,
+    setAutoSlippage,
+    setIsCustomSlippage,
   } = useBridge();
 
   const amountAvailable = useMemo(() => Number(amount) > 0, [amount]);
@@ -446,6 +405,10 @@ export const BridgeContent = () => {
             openQuotesList={openQuotesList}
             quoteLoading={quoteLoading}
             slippageError={isSlippageHigh || isSlippageLow}
+            autoSlippage={autoSlippage}
+            isCustomSlippage={isCustomSlippage}
+            setAutoSlippage={setAutoSlippage}
+            setIsCustomSlippage={setIsCustomSlippage}
           />
         )}
         {noQuote && recommendFromToken && (

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

@@ -4,8 +4,9 @@ import { TokenItem } from '@rabby-wallet/rabby-api/dist/types';
 import { Button, Skeleton, Tooltip } from 'antd';
 import clsx from 'clsx';
 import React, {
+  Dispatch,
   PropsWithChildren,
-  ReactNode,
+  SetStateAction,
   useEffect,
   useMemo,
   useState,
@@ -32,6 +33,10 @@ export const BridgeShowMore = ({
   toAmount,
   quoteLoading,
   slippageError,
+  autoSlippage,
+  isCustomSlippage,
+  setAutoSlippage,
+  setIsCustomSlippage,
 }: {
   openQuotesList: () => void;
   sourceName: string;
@@ -46,6 +51,10 @@ export const BridgeShowMore = ({
   toAmount?: string | number;
   quoteLoading?: boolean;
   slippageError?: boolean;
+  autoSlippage: boolean;
+  isCustomSlippage: boolean;
+  setAutoSlippage: Dispatch<SetStateAction<boolean>>;
+  setIsCustomSlippage: Dispatch<SetStateAction<boolean>>;
 }) => {
   const { t } = useTranslation();
   const [show, setShow] = useState(false);
@@ -163,6 +172,10 @@ export const BridgeShowMore = ({
           value={slippage}
           displaySlippage={displaySlippage}
           onChange={onSlippageChange}
+          autoSlippage={autoSlippage}
+          isCustomSlippage={isCustomSlippage}
+          setAutoSlippage={setAutoSlippage}
+          setIsCustomSlippage={setIsCustomSlippage}
         />
       </div>
     </div>

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

@@ -6,15 +6,15 @@ import {
   ChangeEventHandler,
   useState,
   useEffect,
+  SetStateAction,
+  Dispatch,
 } from 'react';
 import styled from 'styled-components';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import { Input } from 'antd';
-import ImgArrowUp from 'ui/assets/swap/arrow-up.svg';
 import i18n from '@/i18n';
 import { Trans, useTranslation } from 'react-i18next';
-import { useBridgeSlippageStore } from '../hooks/slippage';
 
 const SlippageItem = styled.div`
   position: relative;
@@ -95,23 +95,29 @@ const Wrapper = styled.section`
     margin-top: 8px;
   }
 `;
-interface SlippageProps {
+interface BridgeSlippageProps {
   value: string;
   displaySlippage: string;
   onChange: (n: string) => void;
   recommendValue?: number;
+  autoSlippage: boolean;
+  isCustomSlippage: boolean;
+  setAutoSlippage: Dispatch<SetStateAction<boolean>>;
+  setIsCustomSlippage: Dispatch<SetStateAction<boolean>>;
 }
-export const BridgeSlippage = memo((props: SlippageProps) => {
+export const BridgeSlippage = memo((props: BridgeSlippageProps) => {
   const { t } = useTranslation();
 
-  const { value, displaySlippage, onChange, recommendValue } = props;
-
   const {
+    value,
+    displaySlippage,
+    onChange,
+    recommendValue,
     autoSlippage,
     isCustomSlippage,
     setAutoSlippage,
     setIsCustomSlippage,
-  } = useBridgeSlippageStore();
+  } = props;
 
   const [slippageOpen, setSlippageOpen] = useState(false);
 

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

@@ -1,22 +1,17 @@
-import { useRabbyDispatch, useRabbySelector } from '@/ui/store';
 import { useCallback, useMemo, useState } from 'react';
 
 export const useBridgeSlippage = () => {
-  const previousSlippage = useRabbySelector((s) => s.bridge.slippage || '1');
-  const [slippageState, setSlippageState] = useState(previousSlippage);
+  const [slippageState, setSlippageState] = useState('3');
 
-  const setSlippageOnStore = useRabbyDispatch().bridge.setSlippage;
-
-  const slippage = useMemo(() => slippageState || '0.03', [slippageState]);
+  const slippage = useMemo(() => slippageState || '3', [slippageState]);
   const [slippageChanged, setSlippageChanged] = useState(false);
 
-  const setSlippage = useCallback(
-    (slippage: string) => {
-      setSlippageOnStore(slippage);
-      setSlippageState(slippage);
-    },
-    [setSlippageOnStore]
-  );
+  const [autoSlippage, setAutoSlippage] = useState(true);
+  const [isCustomSlippage, setIsCustomSlippage] = useState(false);
+
+  const setSlippage = useCallback((slippage: string) => {
+    setSlippageState(slippage);
+  }, []);
 
   const [isSlippageLow, isSlippageHigh] = useMemo(() => {
     return [
@@ -33,32 +28,6 @@ export const useBridgeSlippage = () => {
     isSlippageHigh,
     slippage,
     setSlippage,
-  };
-};
-
-export const useBridgeSlippageStore = () => {
-  const { autoSlippage, isCustomSlippage } = useRabbySelector((store) => ({
-    autoSlippage: store.bridge.autoSlippage,
-    isCustomSlippage: !!store.bridge.isCustomSlippage,
-  }));
-
-  const dispatch = useRabbyDispatch();
-
-  const setAutoSlippage = useCallback(
-    (bool: boolean) => {
-      dispatch.bridge.setAutoSlippage(bool);
-    },
-    [dispatch]
-  );
-
-  const setIsCustomSlippage = useCallback(
-    (bool: boolean) => {
-      dispatch.bridge.setIsCustomSlippage(bool);
-    },
-    [dispatch]
-  );
-
-  return {
     autoSlippage,
     isCustomSlippage,
     setAutoSlippage,

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

@@ -16,7 +16,7 @@ import {
 import { getChainDefaultToken, tokenAmountBn } from '@/ui/utils/token';
 import BigNumber from 'bignumber.js';
 import stats from '@/stats';
-import { useBridgeSlippage, useBridgeSlippageStore } from './slippage';
+import { useBridgeSlippage } from './slippage';
 import { isNaN } from 'lodash';
 
 export interface SelectedBridgeQuote extends Omit<BridgeQuote, 'tx'> {
@@ -201,13 +201,16 @@ export const useBridge = () => {
     return false;
   }, [fromChain, fromToken?.id, toChain, toToken?.id]);
 
-  const { autoSlippage } = useBridgeSlippageStore();
-
   useEffect(() => {
-    if (!isSameTokenLoading && autoSlippage) {
+    if (!isSameTokenLoading && slippageObj.autoSlippage) {
       slippageObj.setSlippage(isSameToken ? '1' : '3');
     }
-  }, [autoSlippage, isSameToken, isSameTokenLoading]);
+  }, [
+    slippageObj?.autoSlippage,
+    slippageObj?.setSlippage,
+    isSameToken,
+    isSameTokenLoading,
+  ]);
 
   const supportedChains = useRabbySelector((s) => s.bridge.supportedChains);
   // the most worth chain is the first