feat: bridge

_raw/locales/en/messages.json

@@ -957,6 +957,12 @@
       }
     },
     "bridge": {
+      "From": "From",
+      "To": "To",
+      "Balance": "Balance: ",
+      "Select": "Select",
+      "select-chain": "Select Chain",
+      "no-quote-found": "No quote found. Please try other token pairs.",
       "title": "Bridge",
       "history": "Bridge history",
       "the-following-bridge-route-are-found": "Found following route",
@@ -992,6 +998,17 @@
       "no-route-found": "No route found",
       "aggregator-not-enabled": "This aggregator is not enabled to trade by you.",
       "enable-it": "Enable it",
+      "recommendFromToken": "Bridge from <1></1> for an available quote",
+      "est-payment": "Est. Payment:",
+      "est-receiving": "Est. Receiving:",
+      "est-difference": "Est. Difference:",
+      "loss-tips": "You're losing {{usd}}. Try a different amount.",
+      "price-impact": "price impact",
+
+      "showMore": {
+        "title": "Show More",
+        "source": "Bridge Source"
+      },
       "settingModal": {
         "title": "Enable Bridge Aggregators to trade",
         "confirm": "Confirm",
@@ -2376,11 +2393,19 @@
           "title": "USD VALUE"
         }
       },
+      "bridge": {
+        "token": "Token",
+        "value": "Value",
+        "liquidity": "Liquidity",
+        "liquidityTips": "The higher the historical trade volume, the more likely bridge will be successful.",
+        "low": "Low",
+        "high": "High"
+      },
       "searchInput": {
         "placeholder": "Search by Name / Address"
       },
       "header": {
-        "title": "Select a token"
+        "title": "Select Token"
       },
       "noTokens": "No Tokens",
       "noMatch": "No Match",

package.json

@@ -61,7 +61,7 @@
     "@rabby-wallet/gnosis-sdk": "1.3.9",
     "@rabby-wallet/page-provider": "0.4.2",
     "@rabby-wallet/rabby-action": "0.1.4",
-    "@rabby-wallet/rabby-api": "0.8.3",
+    "@rabby-wallet/rabby-api": "0.8.4-beta.0",
     "@rabby-wallet/rabby-security-engine": "2.0.7",
     "@rabby-wallet/rabby-swap": "0.0.40",
     "@rabby-wallet/widgets": "1.0.9",

src/background/controller/wallet.ts

@@ -1760,6 +1760,9 @@ 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,6 +19,10 @@ export type BridgeRecord = {
 };
 
 export type BridgeServiceStore = {
+  autoSlippage: boolean;
+  isCustomSlippage?: boolean;
+  slippage: string;
+
   selectedChain: CHAINS_ENUM | null;
   selectedFromToken?: TokenItem;
   selectedToToken?: TokenItem;
@@ -48,6 +52,8 @@ class BridgeService {
     unlimitedAllowance: false,
     sortIncludeGasFee: true,
     firstOpen: true,
+    autoSlippage: true,
+    slippage: '1',
   };
 
   init = async () => {
@@ -59,6 +65,8 @@ class BridgeService {
         sortIncludeGasFee: true,
         txQuotes: {},
         firstOpen: true,
+        autoSlippage: true,
+        slippage: '1',
       },
     });
 
@@ -140,6 +148,18 @@ 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/component/ChainSelector/InForm.tsx

@@ -1,19 +1,16 @@
 import React, { InsHTMLAttributes, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
-import { CHAINS, CHAINS_ENUM } from '@debank/common';
+import { CHAINS_ENUM } from '@debank/common';
 
 import { useState } from 'react';
 import { SelectChainListProps } from '@/ui/component/ChainSelector/components/SelectChainList';
 import ChainSelectorModal from '@/ui/component/ChainSelector/Modal';
-import { ChainSelectorPurpose } from '@/ui/hooks/useChain';
 import styled from 'styled-components';
 import ChainIcon from '@/ui/component/ChainIcon';
-import ImgArrowDown, {
-  ReactComponent as RcImgArrowDown,
-} from '@/ui/assets/swap/arrow-down.svg';
+import { ReactComponent as RcImgArrowDown } from '@/ui/assets/swap/arrow-down.svg';
 import { useWallet } from '@/ui/utils';
-import { SWAP_SUPPORT_CHAINS } from '@/constant';
 import { findChain } from '@/utils/chain';
+import { useTranslation } from 'react-i18next';
 
 const ChainWrapper = styled.div`
   /* height: 40px; */
@@ -28,6 +25,24 @@ const ChainWrapper = styled.div`
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
+  &.mini {
+    width: auto;
+    height: 28px;
+    font-size: 13px;
+    padding: 0 6px;
+
+    & > {
+      .down {
+        margin-left: auto;
+        width: 14px;
+        height: 14px;
+      }
+      .name {
+        color: var(--r-neutral-title-1, #192945);
+        line-height: normal;
+      }
+    }
+  }
   &:hover {
     background: rgba(134, 151, 255, 0.2);
   }
@@ -49,19 +64,25 @@ export const ChainRender = ({
   readonly,
   className,
   arrowDownComponent,
+  mini,
   ...other
 }: {
-  chain: CHAINS_ENUM;
+  chain?: CHAINS_ENUM;
   readonly: boolean;
   arrowDownComponent?: React.ReactNode;
+  mini?: boolean;
 } & InsHTMLAttributes<HTMLDivElement>) => {
   const wallet = useWallet();
-
+  const { t } = useTranslation();
   const chainInfo = useMemo(() => {
     return findChain({ enum: chain });
   }, [chain]);
   const [customRPC, setCustomRPC] = useState('');
   const getCustomRPC = async () => {
+    if (!chain) {
+      setCustomRPC('');
+      return;
+    }
     const rpc = await wallet.getCustomRpcByChain(chain);
     setCustomRPC(rpc?.enable ? rpc.url : '');
   };
@@ -73,32 +94,37 @@ export const ChainRender = ({
       className={clsx(
         {
           'cursor-default hover:bg-r-neutral-bg-2': readonly,
+          mini: mini,
         },
         className
       )}
       {...other}
     >
       {/* <img className="logo" src={CHAINS[chain].logo} alt={CHAINS[chain].name} /> */}
-      <ChainIcon
-        chain={chain}
-        customRPC={customRPC}
-        size="small"
-        showCustomRPCToolTip
-      />
-      <span className="name">{chainInfo?.name}</span>
+      {chain && (
+        <ChainIcon
+          chain={chain}
+          customRPC={customRPC}
+          size="small"
+          showCustomRPCToolTip
+        />
+      )}
+      <span className={clsx('name')}>
+        {chainInfo?.name || t('page.bridge.Select')}
+      </span>
       {/* {!readonly && <img className="down" src={ImgArrowDown} alt="" />} */}
       {!readonly &&
         (arrowDownComponent ? (
           arrowDownComponent
         ) : (
-          <RcImgArrowDown className="down" />
+          <RcImgArrowDown className="down" viewBox="0 0 20 20" />
         ))}
     </ChainWrapper>
   );
 };
 
 interface ChainSelectorProps {
-  value: CHAINS_ENUM;
+  value?: CHAINS_ENUM;
   onChange?(value: CHAINS_ENUM): void;
   readonly?: boolean;
   showModal?: boolean;
@@ -108,6 +134,9 @@ interface ChainSelectorProps {
   title?: React.ReactNode;
   chainRenderClassName?: string;
   arrowDownComponent?: React.ReactNode;
+  mini?: boolean;
+  hideTestnetTab?: boolean;
+  excludeChains?: CHAINS_ENUM[];
 }
 export default function ChainSelectorInForm({
   value,
@@ -119,6 +148,9 @@ export default function ChainSelectorInForm({
   supportChains,
   chainRenderClassName,
   arrowDownComponent,
+  mini,
+  hideTestnetTab = false,
+  excludeChains,
 }: ChainSelectorProps) {
   const [showSelectorModal, setShowSelectorModal] = useState(showModal);
 
@@ -146,9 +178,12 @@ export default function ChainSelectorInForm({
         readonly={readonly}
         className={chainRenderClassName}
         arrowDownComponent={arrowDownComponent}
+        mini={mini}
       />
       {!readonly && (
         <ChainSelectorModal
+          excludeChains={excludeChains}
+          hideTestnetTab={hideTestnetTab}
           value={value}
           visible={showSelectorModal}
           onChange={handleChange}

src/ui/component/ChainSelector/Modal.tsx

@@ -43,6 +43,7 @@ interface ChainSelectorModalProps {
   showRPCStatus?: boolean;
   height?: number;
   zIndex?: number;
+  excludeChains?: CHAINS_ENUM[];
 }
 
 const useChainSeletorList = ({
@@ -140,6 +141,7 @@ const ChainSelectorModal = ({
   showRPCStatus = false,
   height = 494,
   zIndex,
+  excludeChains,
 }: ChainSelectorModalProps) => {
   const handleCancel = () => {
     onCancel();
@@ -158,8 +160,8 @@ const ChainSelectorModal = ({
   const history = useHistory();
 
   const {
-    matteredList,
-    unmatteredList,
+    matteredList: _matteredList,
+    unmatteredList: _unmatteredList,
     handleStarChange,
     handleSort,
     search,
@@ -170,6 +172,15 @@ const ChainSelectorModal = ({
     netTabKey: !hideMainnetTab ? selectedTab : 'testnet',
   });
 
+  const [matteredList, unmatteredList] = useMemo(() => {
+    if (excludeChains?.length) {
+      return [_matteredList, _unmatteredList].map((chains) =>
+        chains.filter((e) => !excludeChains.includes(e.enum))
+      );
+    }
+    return [_matteredList, _unmatteredList];
+  }, [excludeChains, _matteredList, _unmatteredList]);
+
   useEffect(() => {
     if (!value || !visible) return;