feat: bridge v2

_raw/locales/en/messages.json

@@ -957,6 +957,13 @@
       }
     },
     "bridge": {
+      "From": "From",
+      "To": "To",
+      "Balance": "Balance: ",
+      "Select": "Select",
+      "select-chain": "Select Chain",
+      "no-quote-found": "No quote found. Please try other token pairs.",
+      "no-quote": "No Quote",
       "title": "Bridge",
       "history": "Bridge history",
       "the-following-bridge-route-are-found": "Found following route",
@@ -980,7 +987,7 @@
       "slippage-adjusted-refresh-quote": "Slippage adjusted. Refresh route.",
       "price-expired-refresh-route": "Price expired. Refresh route.",
       "approve-x-symbol": "Approve {{symbol}}",
-      "approve-and-bridge": "Approve and Bridge on {{name}}",
+      "approve-and-bridge": "Approve and Bridge",
       "need-to-approve-token-before-bridge": "Need to approve token before bridge",
       "via-bridge": "via {{bridge}}",
       "duration": "{{duration}} min",
@@ -992,6 +999,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 +2394,19 @@
           "title": "USD VALUE"
         }
       },
+      "bridge": {
+        "token": "Token",
+        "value": "Value",
+        "liquidity": "Liquidity",
+        "liquidityTips": "The higher the historical trade volume, the more likely the bridge will succeed.",
+        "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",
     "@rabby-wallet/rabby-security-engine": "2.0.7",
     "@rabby-wallet/rabby-swap": "0.0.42",
     "@rabby-wallet/widgets": "1.0.9",

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,11 @@ interface ChainSelectorProps {
   title?: React.ReactNode;
   chainRenderClassName?: string;
   arrowDownComponent?: React.ReactNode;
+  mini?: boolean;
+  hideTestnetTab?: boolean;
+  excludeChains?: CHAINS_ENUM[];
+  drawerHeight?: number;
+  showClosableIcon?: boolean;
 }
 export default function ChainSelectorInForm({
   value,
@@ -119,6 +150,11 @@ export default function ChainSelectorInForm({
   supportChains,
   chainRenderClassName,
   arrowDownComponent,
+  mini,
+  hideTestnetTab = false,
+  excludeChains,
+  drawerHeight,
+  showClosableIcon,
 }: ChainSelectorProps) {
   const [showSelectorModal, setShowSelectorModal] = useState(showModal);
 
@@ -146,16 +182,21 @@ export default function ChainSelectorInForm({
         readonly={readonly}
         className={chainRenderClassName}
         arrowDownComponent={arrowDownComponent}
+        mini={mini}
       />
       {!readonly && (
         <ChainSelectorModal
+          height={drawerHeight}
+          excludeChains={excludeChains}
+          hideTestnetTab={hideTestnetTab}
           value={value}
           visible={showSelectorModal}
           onChange={handleChange}
           onCancel={handleCancel}
           supportChains={supportChains}
           disabledTips={disabledTips}
           title={title}
+          showClosableIcon={showClosableIcon}
           showRPCStatus
         />
       )}

src/ui/component/ChainSelector/Modal.tsx

@@ -27,6 +27,7 @@ import {
   SelectChainListProps,
 } from './components/SelectChainList';
 import { LoadingBalances } from './LoadingBalances';
+import { ReactComponent as RcIconCloseCC } from 'ui/assets/component/close-cc.svg';
 
 interface ChainSelectorModalProps {
   visible: boolean;
@@ -43,6 +44,8 @@ interface ChainSelectorModalProps {
   showRPCStatus?: boolean;
   height?: number;
   zIndex?: number;
+  excludeChains?: CHAINS_ENUM[];
+  showClosableIcon?: boolean;
 }
 
 const useChainSeletorList = ({
@@ -140,6 +143,8 @@ const ChainSelectorModal = ({
   showRPCStatus = false,
   height = 494,
   zIndex,
+  excludeChains,
+  showClosableIcon = false,
 }: ChainSelectorModalProps) => {
   const handleCancel = () => {
     onCancel();
@@ -158,8 +163,8 @@ const ChainSelectorModal = ({
   const history = useHistory();
 
   const {
-    matteredList,
-    unmatteredList,
+    matteredList: _matteredList,
+    unmatteredList: _unmatteredList,
     handleStarChange,
     handleSort,
     search,
@@ -170,6 +175,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;
 
@@ -196,7 +210,7 @@ const ChainSelectorModal = ({
         title={title}
         width="400px"
         height={height}
-        closable={false}
+        closable={showClosableIcon}
         placement={'bottom'}
         visible={visible}
         onClose={handleCancel}
@@ -209,6 +223,9 @@ const ChainSelectorModal = ({
         )}
         zIndex={zIndex}
         destroyOnClose
+        closeIcon={
+          <RcIconCloseCC className="w-[20px] h-[20px] text-r-neutral-foot" />
+        }
       >
         <header className={title ? 'pt-[8px]' : 'pt-[20px]'}>
           {isShowTestnet && !hideMainnetTab && (

src/ui/component/ChainSelector/style.less

@@ -45,7 +45,7 @@
 .chain-selector__modal.chain-selector__modal {
   .ant-drawer-content-wrapper {
     max-height: calc(100vh - 40px);
-    height: 494px !important;
+    // height: 494px !important;
   }
   header {
     padding-top: 8px;