Feat/permissionless bridge (#1122)

* Enhance search input with reset functionality and improve styles for balance component * Update token inspector to version 0.2.0 and refactor token inspection methods * Refactor SearchInput component to use forwardRef and improve styling; add new SearchInput module styles * Update token inspector to version 0.2.1 and refactor initialization logic; improve token icon handling in TokenItem component * Update token inspector to version 0.2.3; refactor token handling in Balance and TransferConvertToken components * Fix token handling logic in Balance component; update conditions for newToToken and toToken checks * Update orai-token-inspector to version 0.2.5; implement temporary disablement of BTC functionality across multiple components * fix bridge inj * Remove debug log from loadEvmAmounts function; add early return condition in onClickToken handler * Fix token handling in Balance component; reset toTokens when setting foundTokens * Update orai-token-inspector to version 0.2.7 in package.json and yarn.lock --------- Co-authored-by: vuonghuuhung <[email protected]> Co-authored-by: Hau Nguyen Van <[email protected]>
oraidex · Jan 9, 2025 · 53b8f85 · 53b8f85
1 parent 47cc015
commit 53b8f85
Show file tree

Hide file tree

Showing 23 changed files with 437 additions and 244 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/orai-bitcoin": "2.0.0",
     "@oraichain/oraidex-common": "2.0.6",
-    "@oraichain/orai-token-inspector": "^0.1.25",
+    "@oraichain/orai-token-inspector": "^0.2.7",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "1.0.55",
     "@oraichain/oraidex-universal-swap": "1.3.1",

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styles from './Input.module.scss';
 import debounce from 'lodash/debounce';
@@ -7,16 +7,18 @@ export type InputProps = Input & {
   onSearch?: (text: string) => void;
   isBorder?: boolean;
   theme?: string;
+  ref?: React.Ref<HTMLInputElement>;
 };
 
-const Input: React.FC<InputProps> = ({ className, onSearch, ...props }) => (
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, onSearch, ...props }, ref) => (
   <input
+    ref={ref}
     className={classNames(styles.input, className)}
     onChange={debounce((e) => {
       onSearch?.(e.target.value);
     }, 500)}
     {...props}
   />
-);
+));
 
 export default Input;
diff --git a/src/helper/constants.ts b/src/helper/constants.ts
@@ -23,4 +23,4 @@ export const AMOUNT_BALANCE_ENTRIES_UNIVERSAL_SWAP: [number, string, string][] =
 export const DEFAULT_RELAYER_FEE = '1000000';
 export const RELAYER_DECIMAL = 6;
 export const DAY_IN_MILIS = 86400000;
-export const DEFAULT_TOKEN_ICON_URL = defaultOraiToken.icon;
+export const DEFAULT_TOKEN_ICON_URL = 'https://raw.githubusercontent.com/cosmos/chain-registry/master/oraichain/images/orai-token.png';
diff --git a/src/hooks/useLoadTokens.ts b/src/hooks/useLoadTokens.ts
@@ -411,7 +411,6 @@ async function loadEvmAmounts(dispatch: Dispatch, evmAddress: string, chains: Cu
   const amountDetails = Object.fromEntries(
     flatten(await Promise.all(chains.map((chain) => loadEvmEntries(evmAddress, chain))))
   );
-  console.log('amountDetails', amountDetails);
 
   dispatch(updateAmounts(amountDetails));
 }

diff --git a/src/initTokenInspector.ts b/src/initTokenInspector.ts
@@ -1,13 +1,18 @@
-import { Inspector } from '@oraichain/orai-token-inspector';
+import { OraichainInspector, SolanaInspector, TokenInspector } from '@oraichain/orai-token-inspector';
 
 export const getTokenInspectorInstance = async () => {
   if (!window.tokenInspector) {
-    window.tokenInspector = await Inspector.create({
-      oraiRpcUrl: 'https://indexer.orai.io',
-      bscRpcUrl: 'https://bsc-dataseed.binance.org',
-      ethRpcUrl: 'https://eth.llamarpc.com',
-      tronRpcUrl: 'https://api.trongrid.io/',
-      solanaRpcUrl: 'https://mainnet.helius-rpc.com/?api-key=3b28a0fc-0ef6-48ef-b55c-c55ae74cb6a6'
+    const oraichainInspector = await OraichainInspector.create(
+      'https://rpc.orai.io/',
+      'https://mainnet.helius-rpc.com/?api-key=3b28a0fc-0ef6-48ef-b55c-c55ae74cb6a6'
+    );
+    const solanaInspector = await SolanaInspector.create(
+      'https://mainnet.helius-rpc.com/?api-key=3b28a0fc-0ef6-48ef-b55c-c55ae74cb6a6'
+    );
+
+    window.tokenInspector = new TokenInspector({
+      Oraichain: oraichainInspector,
+      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': solanaInspector
     });
   }
   return window.tokenInspector;

diff --git a/src/libs/cw-bitcoin/models/cw-bitcoin-client.ts b/src/libs/cw-bitcoin/models/cw-bitcoin-client.ts
@@ -13,6 +13,8 @@ export class CwBitcoinClient implements CwBitcoinClientInterface {
   public depositAddress: DepositSuccess | null = null;
 
   public async generateAddress(dest: Dest) {
+    // FIXME: TURN OFF BTC NOW
+    return null;
     try {
       // @ts-ignore-check
       const config = {

diff --git a/src/libs/nomic/models/nomic-client/nomic-client.ts b/src/libs/nomic/models/nomic-client/nomic-client.ts
@@ -32,6 +32,8 @@ export class NomicClient implements NomicClientInterface {
     );
   }
   public async getRecoveredAddress(accAddress: string) {
+    // FIXME: TURN OFF BTC NOW
+    return null
     return await fetch(`${Config.restUrl}/bitcoin/recovery_address/${accAddress}?network=${btcNetwork}`, {
       method: 'GET'
     }).then((data) => data.json());
@@ -50,6 +52,7 @@ export class NomicClient implements NomicClientInterface {
   }
 
   public async generateAddress() {
+    return null;
     const isKeplrActive = await window.Keplr.getKeplr();
     if (isKeplrActive) {
       // @ts-ignore-check

diff --git a/src/pages/Balance/Balance.module.scss b/src/pages/Balance/Balance.module.scss
@@ -63,6 +63,7 @@
 .search {
   margin-top: 25px;
   display: flex;
+  position: relative;
 
   @include desktop {
     @media (max-width: 1024px) {
@@ -162,6 +163,14 @@
       width: 100%;
     }
   }
+
+  .closeIcon {
+    position: absolute;
+    right: 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
 }
 
 .transferTab {
@@ -172,6 +181,7 @@
 
   .tfBtn {
     background-color: $primary-bg-btn;
+
     @include theme() {
       color: theme-get('neutral-text-text-btn-default');
     }
@@ -247,6 +257,7 @@
       margin-bottom: 10px;
       border-radius: 8px;
       border: 1px solid;
+
       @include theme {
         border-color: theme-get('warning-text-default');
         background: theme-get('primary-surface-default-subtle');
@@ -331,4 +342,4 @@
       }
     }
   }
-}
+}
diff --git a/src/pages/Balance/SearchInput.module.scss b/src/pages/Balance/SearchInput.module.scss
@@ -0,0 +1,47 @@
+@import 'src/styles/mixins';
+
+.search {
+  width: 420px;
+  height: 48px;
+  border-radius: 24px;
+  padding: 12px 16px;
+  font-weight: 500;
+  font-size: 16px;
+
+  @include theme() {
+    background-color: theme-get('neutral-surface-bg-section');
+    color: theme-get('neutral-text-body');
+    border-color: theme-get('border-color');
+  }
+
+  @media (max-width: 575px) {
+    font-size: 15px;
+    width: 100%;
+  }
+
+  &::placeholder {
+    @include theme() {
+      color: theme-get('text-color-placeholder');
+    }
+  }
+}
+
+.universalSearch {
+  width: 100%;
+  border-radius: 18px;
+  padding: 12px 16px;
+  font-weight: 500;
+  font-size: 16px;
+  border: 1px solid;
+
+  @include theme() {
+    background-color: theme-get('neutral-6');
+    color: theme-get('text-color');
+    border-color: theme-get('neutral-5');
+  }
+
+  @media (max-width: 575px) {
+    font-size: 15px;
+    width: 100%;
+  }
+}
diff --git a/src/pages/Balance/SearchInput.tsx b/src/pages/Balance/SearchInput.tsx
@@ -0,0 +1,31 @@
+import SearchLightSvg from 'assets/images/search-light-svg.svg';
+import SearchSvg from 'assets/images/search-svg.svg';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import Input, { InputProps } from 'components/Input';
+import styles from './SearchInput.module.scss';
+
+const Search = forwardRef<HTMLInputElement, InputProps>(({ className, isBorder, theme, style, ...props }, ref) => {
+  const bgUrl = theme === 'light' ? SearchLightSvg : SearchSvg;
+
+  return (
+    <Input
+      ref={ref}
+      className={classNames(className, isBorder ? styles.universalSearch : styles.search)}
+      placeholder="Search by pools or tokens name"
+      style={{
+        paddingLeft: 40,
+        paddingRight: 45,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        backgroundImage: `url(${bgUrl})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '10px center',
+        ...style
+      }}
+      {...props}
+    />
+  );
+});
+
+export default Search;
diff --git a/src/pages/Balance/TokenItem/index.tsx b/src/pages/Balance/TokenItem/index.tsx
@@ -1,12 +1,8 @@
+import { TokenItemType } from '@oraichain/oraidex-common';
 import classNames from 'classnames';
-import styles from './index.module.scss';
 import TokenBalance from 'components/TokenBalance';
 import TransferConvertToken from '../TransferConvertToken';
-import { OraiIcon, TokenItemType, tokensIcon } from '@oraichain/oraidex-common';
-import DefaultIcon from 'assets/icons/tokens.svg?react';
-import { flattenTokens } from 'initCommon';
-import { useSelector } from 'react-redux';
-import { RootState } from 'store/configure';
+import styles from './index.module.scss';
 
 export interface TokenItemProps {
   token: TokenItemType;
@@ -26,6 +22,7 @@ export interface TokenItemProps {
   isFastMode?: boolean;
   setIsFastMode?: Function;
   setToNetworkChainId: Function;
+  toToken?: TokenItemType;
 }
 
 const TokenItem: React.FC<TokenItemProps> = ({
@@ -42,23 +39,9 @@ const TokenItem: React.FC<TokenItemProps> = ({
   isBtcToken,
   isFastMode,
   setIsFastMode,
-  setToNetworkChainId
+  setToNetworkChainId,
+  toToken
 }) => {
-  // TODO: chain tokensIcon to tokensWithIcon
-  const allOraichainTokens = useSelector((state: RootState) => state.token.allOraichainTokens || []);
-  const allOtherChainTokens = useSelector((state: RootState) => state.token.allOtherChainTokens || []);
-  let tokenIcon = [...allOraichainTokens, ...allOtherChainTokens].find((tok) => tok.denom === token.denom);
-  // console.log('tokenIcon', tokenIcon);
-
-  if (!tokenIcon) {
-    tokenIcon = {
-      ...token,
-
-      // TODO: update token icon to default token
-      icon: OraiIcon,
-      iconLight: OraiIcon
-    };
-  }
   const isActive = isBtcToken ? isBtcOfOwallet && active : active;
   return (
     <div
@@ -71,9 +54,9 @@ const TokenItem: React.FC<TokenItemProps> = ({
       <div className={styles.balanceAmountInfo}>
         <div className={styles.token}>
           {theme === 'light' ? (
-            <img style={{ borderRadius: '100%' }} width={44} height={44} src={tokenIcon?.iconLight} alt="icon-light" />
+            <img style={{ borderRadius: '100%' }} width={44} height={44} src={token?.iconLight} alt="icon-light" />
           ) : (
-            <img style={{ borderRadius: '100%' }} width={44} height={44} src={tokenIcon?.icon} alt="icon-light" />
+            <img style={{ borderRadius: '100%' }} width={44} height={44} src={token?.icon} alt="icon-light" />
           )}
           <div className={styles.tokenInfo}>
             <div className={classNames(styles.tokenName, styles[theme])}>{token.name}</div>
@@ -105,6 +88,7 @@ const TokenItem: React.FC<TokenItemProps> = ({
             isFastMode={isFastMode}
             setIsFastMode={setIsFastMode}
             setToNetwork={setToNetworkChainId}
+            toToken={toToken}
           />
         )}
       </div>

diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx
@@ -46,6 +46,7 @@ interface TransferConvertProps {
   isFastMode?: boolean;
   setIsFastMode?: Function;
   setToNetwork: Function;
+  toToken?: TokenItemType;
 }
 
 const TransferConvertToken: FC<TransferConvertProps> = ({
@@ -56,7 +57,8 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
   subAmounts,
   isFastMode,
   setIsFastMode,
-  setToNetwork
+  setToNetwork,
+  toToken
 }) => {
   const bridgeNetworks = networks.filter((item) => filterChainBridge(token, item));
   const [[convertAmount, convertUsd], setConvertAmount] = useState([undefined, 0]);
@@ -139,7 +141,8 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
 
   // get token fee & relayer fee
   const toNetwork = bridgeNetworks.find((n) => n.chainId === toNetworkChainId);
-  const to = flattenTokens.find((t) => t.coinGeckoId === token.coinGeckoId && t.chainId === toNetworkChainId);
+  const to =
+    toToken ?? flattenTokens.find((t) => t.coinGeckoId === token.coinGeckoId && t.chainId === toNetworkChainId);
 
   const getRemoteTokenDenom = (token: TokenItemType) => {
     if (!token) return null;
@@ -162,7 +165,8 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
   const { solFee, isOraichainToSol, isSolToOraichain } = useGetFeeSol({
     originalFromToken: token,
     toChainId: toNetworkChainId,
-    amountToken: convertAmount
+    amountToken: convertAmount,
+    toToken
   });
 
   const { deductNativeAmount, checkBalanceBridgeByNetwork } = useTonBridgeHandler({
@@ -307,8 +311,6 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
 
   const isBTCLegacy = token?.contractAddress === BTC_CONTRACT;
 
-  console.log({ networks });
-
   return (
     <div className={classNames(styles.tokenFromGroup, styles.small)} style={{ flexWrap: 'wrap' }}>
       <div className={styles.tokenSubAmouts}>

diff --git a/src/pages/Balance/helpers.ts b/src/pages/Balance/helpers.ts
@@ -717,6 +717,9 @@ export const useGetWithdrawlFeesBitcoinV2 = ({
 };
 
 export const useDepositFeesBitcoinV2 = (enabled: boolean) => {
+  // FIXME: TURN OFF BTC NOW
+  return null
+
   const getDepositFeeBTC = async () => {
     try {
       const { data } = await axios({