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

_raw/locales/en/messages.json

@@ -963,6 +963,7 @@
       "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",
@@ -2397,7 +2398,7 @@
         "token": "Token",
         "value": "Value",
         "liquidity": "Liquidity",
-        "liquidityTips": "The higher the historical trade volume, the more likely bridge will be successful.",
+        "liquidityTips": "The higher the historical trade volume, the more likely the bridge will succeed.",
         "low": "Low",
         "high": "High"
       },

src/ui/component/ChainSelector/InForm.tsx

@@ -137,6 +137,7 @@ interface ChainSelectorProps {
   mini?: boolean;
   hideTestnetTab?: boolean;
   excludeChains?: CHAINS_ENUM[];
+  drawerHeight?: number;
 }
 export default function ChainSelectorInForm({
   value,
@@ -151,6 +152,7 @@ export default function ChainSelectorInForm({
   mini,
   hideTestnetTab = false,
   excludeChains,
+  drawerHeight,
 }: ChainSelectorProps) {
   const [showSelectorModal, setShowSelectorModal] = useState(showModal);
 
@@ -182,6 +184,7 @@ export default function ChainSelectorInForm({
       />
       {!readonly && (
         <ChainSelectorModal
+          height={drawerHeight}
           excludeChains={excludeChains}
           hideTestnetTab={hideTestnetTab}
           value={value}

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;

src/ui/component/TokenSelect/index.tsx

@@ -73,6 +73,8 @@ export interface TokenSelectProps {
         openTokenModal: () => void;
       }) => React.ReactNode)
     | React.ReactNode;
+  disabledTips?: React.ReactNode;
+  drawerHeight?: string | number;
 }
 
 const defaultExcludeTokens = [];
@@ -90,6 +92,8 @@ const TokenSelect = ({
   loading = false,
   tokenRender,
   useSwapTokenList = false,
+  disabledTips = 'Not supported',
+  drawerHeight,
 }: TokenSelectProps) => {
   const [queryConds, setQueryConds] = useState({
     keyword: '',
@@ -167,7 +171,7 @@ const TokenSelect = ({
     currentAccount?.address,
     queryConds.keyword,
     queryConds.chainServerId,
-    isSwapType ? false : true
+    isSwapType || type === 'bridgeFrom' ? false : true
   );
 
   const availableToken = useMemo(() => {
@@ -227,6 +231,7 @@ const TokenSelect = ({
           : tokenRender}
         {queryConds.chainServerId && (
           <TokenSelector
+            drawerHeight={drawerHeight}
             visible={tokenSelectorVisible}
             list={displayTokenList}
             onConfirm={handleCurrentTokenChange}
@@ -236,7 +241,7 @@ const TokenSelect = ({
             type={type}
             placeholder={placeholder}
             chainId={queryConds.chainServerId}
-            disabledTips={'Not supported'}
+            disabledTips={disabledTips}
             supportChains={SWAP_SUPPORT_CHAINS}
           />
         )}
@@ -299,8 +304,9 @@ const TokenSelect = ({
           type={type}
           placeholder={placeholder}
           chainId={queryConds.chainServerId}
-          disabledTips={'Not supported'}
+          disabledTips={disabledTips}
           supportChains={SWAP_SUPPORT_CHAINS}
+          drawerHeight={drawerHeight}
         />
       )}
     </>

src/ui/component/TokenSelector/index.tsx

@@ -19,6 +19,7 @@ import { ReactComponent as RcIconChainFilterClose } from 'ui/assets/chain-select
 import { ReactComponent as RcIconCloseCC } from 'ui/assets/component/close-cc.svg';
 import { isNil } from 'lodash';
 import ThemeIcon from '../ThemeMode/ThemeIcon';
+import { ReactComponent as RcIconMatchCC } from '@/ui/assets/match-cc.svg';
 
 export const isSwapTokenType = (s: string) =>
   ['swapFrom', 'swapTo'].includes(s);
@@ -42,8 +43,9 @@ export interface TokenSelectorProps {
   type?: 'default' | 'swapFrom' | 'swapTo' | 'bridgeFrom';
   placeholder?: string;
   chainId: string;
-  disabledTips?: string;
+  disabledTips?: React.ReactNode;
   supportChains?: CHAINS_ENUM[] | undefined;
+  drawerHeight?: number | string;
 }
 
 const filterTestnetTokenItem = (token: TokenItem) => {
@@ -63,6 +65,7 @@ const TokenSelector = ({
   chainId: chainServerId,
   disabledTips,
   supportChains,
+  drawerHeight = '580px',
 }: TokenSelectorProps) => {
   const { t } = useTranslation();
   const [query, setQuery] = useState('');
@@ -153,6 +156,24 @@ const TokenSelector = ({
     return v.length === 42 && v.toLowerCase().startsWith('0x');
   }, [query]);
 
+  const bridgeFromNoDataTip = useMemo(() => {
+    if (type === 'bridgeFrom') {
+      return (
+        <div className="no-token w-full top-[120px]">
+          <RcIconMatchCC
+            className="w-[32px] h-[32px] text-r-neutral-foot"
+            viewBox="0 0 33 32"
+          />
+
+          <p className="text-r-neutral-foot text-14 mt-8 text-center mb-0">
+            {t('component.TokenSelector.noTokens')}
+          </p>
+        </div>
+      );
+    }
+    return null;
+  }, [type]);
+
   const NoDataUI = useMemo(
     () =>
       isLoading ? (
@@ -163,6 +184,8 @@ const TokenSelector = ({
               <DefaultLoading key={i} type={type} />
             ))}
         </div>
+      ) : type === 'bridgeFrom' ? (
+        <>{bridgeFromNoDataTip}</>
       ) : (
         <div className="no-token w-full">
           <img
@@ -197,7 +220,15 @@ const TokenSelector = ({
           )}
         </div>
       ),
-    [isLoading, isSwapType, t, isSearchAddr, chainServerId]
+    [
+      isLoading,
+      isSwapType,
+      t,
+      isSearchAddr,
+      chainServerId,
+      bridgeFromNoDataTip,
+      type,
+    ]
   );
 
   useEffect(() => {
@@ -241,19 +272,21 @@ const TokenSelector = ({
   const bridgeFromItemRender = (token: TokenItem) => {
     const chainItem = findChain({ serverId: token.chain });
     const disabled =
-      !!supportChains?.length &&
-      chainItem &&
-      !supportChains.includes(chainItem.enum);
+      (!!supportChains?.length &&
+        !!chainItem &&
+        !supportChains.includes(chainItem.enum)) ||
+      new BigNumber(token?.raw_amount_hex_str || token.amount || 0).lte(0);
 
     return (
       <Tooltip
         key={`${token.chain}-${token.id}`}
         trigger={['click', 'hover']}
         mouseEnterDelay={3}
-        overlayClassName={clsx('rectangle left-[20px]')}
+        overlayClassName={clsx('rectangle')}
         placement="top"
         title={disabledTips}
         visible={disabled ? undefined : false}
+        align={{ targetOffset: [0, -30] }}
       >
         <li
           className={clsx(
@@ -299,7 +332,7 @@ const TokenSelector = ({
   return (
     <Drawer
       className="token-selector custom-popup is-support-darkmode"
-      height="580px"
+      height={drawerHeight}
       placement="bottom"
       visible={visible}
       onClose={onCancel}