refactor(tangle-dapp): Use bridge ERC-20 assets

Author: yurixander

apps/tangle-dapp/src/abi/erc20.ts

@@ -29,11 +29,6 @@ import { FC, useCallback, useMemo, useState } from 'react';
 
 import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
 import { FeeDetail, FeeDetailProps } from './FeeDetail';
-import {
-  ROUTER_TX_EXPLORER_URL,
-  ROUTER_TX_STATUS_URL,
-  mailboxAddress,
-} from '../../constants/bridge';
 import useBridgeTxQueue from '../../context/bridge/BridgeTxQueueContext/useBridgeTxQueue';
 import { useHyperlaneTransfer } from '../../data/bridge/useHyperlaneTransfer';
 import { useRouterTransfer } from '../../data/bridge/useRouterTransfer';
@@ -46,6 +41,11 @@ import { EVMChainId } from '@webb-tools/dapp-types/ChainId';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';
 import { ArrowDownIcon } from '@webb-tools/icons';
 import axios from 'axios';
+import {
+  mailboxAddress,
+  ROUTER_TX_EXPLORER_URL,
+  ROUTER_TX_STATUS_URL,
+} from '@webb-tools/tangle-shared-ui/constants/bridge';
 
 interface BridgeConfirmationModalProps {
   isOpen: boolean;
@@ -474,6 +474,7 @@ export const BridgeConfirmationModal = ({
       clearBridgeStore();
     }
   }, [
+    setIsTxInProgress,
     sendingAmount,
     receivingAmount,
     token.bridgeType,
@@ -491,8 +492,8 @@ export const BridgeConfirmationModal = ({
     destinationAddress,
     setIsOpenQueueDropdown,
     updateTxState,
-    watchTransaction,
     addTxExplorerUrl,
+    watchTransaction,
     transferByHyperlaneAsync,
     notificationApi,
   ]);

apps/tangle-dapp/src/components/bridge/BridgeConfirmationModal.tsx

@@ -35,7 +35,7 @@ import { BridgeConfirmationModal } from '../../components/bridge/BridgeConfirmat
 import { FeeDetail, FeeDetailProps } from '../../components/bridge/FeeDetail';
 import { AssetConfig, AssetList } from '../../components/Lists/AssetList';
 import { ChainList } from '../../components/Lists/ChainList';
-import { ROUTER_NATIVE_TOKEN_ADDRESS } from '../../constants/bridge';
+import { ROUTER_NATIVE_TOKEN_ADDRESS } from '../../../../../libs/tangle-shared-ui/src/constants/bridge';
 import useBridgeStore from '../../context/bridge/useBridgeStore';
 import useBalances from '../../data/balances/useBalances';
 import { BridgeTokenWithBalance } from '@webb-tools/tangle-shared-ui/types';
@@ -331,7 +331,7 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
       .div(new Decimal(10).pow(selectedToken.decimals))
       .toString();
 
-    const formattedSendingAmount = `${sendingAmount} ${selectedToken.tokenSymbol}`;
+    const formattedSendingAmount = `${sendingAmount} ${selectedToken.symbol}`;
 
     const formattedGasFee =
       formatEther(hyperlaneQuote.fees.local.amount) +
@@ -402,13 +402,13 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
         (sourceTypedChainId === PresetTypedChainId.TangleMainnetEVM &&
           token.tokenType === EVMTokenEnum.TNT) ||
         (sourceTypedChainId === PresetTypedChainId.Polygon &&
-          token.tokenSymbol === 'POL') ||
+          token.symbol === 'POL') ||
         ((sourceTypedChainId === PresetTypedChainId.Optimism ||
           sourceTypedChainId === PresetTypedChainId.Arbitrum ||
           sourceTypedChainId === PresetTypedChainId.Base) &&
-          token.tokenSymbol === 'ETH') ||
+          token.symbol === 'ETH') ||
         (sourceTypedChainId === PresetTypedChainId.BSC &&
-          token.tokenSymbol === 'BNB');
+          token.symbol === 'BNB');
 
       const balance = isNativeToken
         ? formatEther(nativeTokenBalance?.value ?? BigInt(0))
@@ -440,7 +440,7 @@ export default function BridgeContainer({ className }: BridgeContainerProps) {
 
       return {
         symbol: token.tokenType,
-        optionalSymbol: token.tokenSymbol,
+        optionalSymbol: token.symbol,
         balance:
           activeAccount && balance
             ? parseFloat(balance.toString()).toFixed(6)

apps/tangle-dapp/src/containers/bridge/BridgeContainer.tsx

@@ -7,7 +7,7 @@ import { Decimal } from 'decimal.js';
 import { create } from 'zustand';
 
 import { BridgeToken } from '@webb-tools/tangle-shared-ui/types';
-import { BRIDGE_CHAINS } from '../../constants/bridge';
+import { BRIDGE_CHAINS } from '../../../../../libs/tangle-shared-ui/src/constants/bridge';
 
 const sortChainOptions = (chains: ChainConfig[]) => {
   return chains.sort((a, b) => a.name.localeCompare(b.name));

apps/tangle-dapp/src/context/bridge/useBridgeStore.ts

@@ -10,7 +10,7 @@ import {
   BridgeToken,
   BridgeTokenWithBalance,
 } from '@webb-tools/tangle-shared-ui/types';
-import { BRIDGE_TOKENS } from '../../constants/bridge';
+import { BRIDGE_TOKENS } from '../../../../../libs/tangle-shared-ui/src/constants/bridge';
 import ensureError from '@webb-tools/tangle-shared-ui/utils/ensureError';
 import { EvmAddress } from '@webb-tools/webb-ui-components/types/address';
 import useEvmAddress20 from '../../hooks/useEvmAddress';

apps/tangle-dapp/src/data/bridge/useBridgeEvmBalances.ts

@@ -73,7 +73,7 @@ export const getHyperlaneQuote = async (props: HyperlaneQuoteProps | null) => {
 
       notificationApi({
         variant: 'error',
-        message: `Insufficient collateral on ${destination} chain. \n Available collateral: ${parseFloat(balance.toString()).toFixed(6)} ${token.tokenSymbol}`,
+        message: `Insufficient collateral on ${destination} chain. \n Available collateral: ${parseFloat(balance.toString()).toFixed(6)} ${token.symbol}`,
       });
 
       console.error('Insufficient destination collateral');

apps/tangle-dapp/src/data/bridge/useHyperlaneQuote.ts

@@ -1,7 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-import { ROUTER_PARTNER_ID, ROUTER_QUOTE_URL } from '../../constants/bridge';
+import {
+  ROUTER_PARTNER_ID,
+  ROUTER_QUOTE_URL,
+} from '../../../../../libs/tangle-shared-ui/src/constants/bridge';
 import { EvmAddress } from '@webb-tools/webb-ui-components/types/address';
 
 export type RouterQuoteParams = {

apps/tangle-dapp/src/data/bridge/useRouterQuote.ts

@@ -3,7 +3,7 @@ import { JsonRpcSigner } from '@ethersproject/providers';
 import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
 
-import { ROUTER_TRANSACTION_URL } from '../../constants/bridge';
+import { ROUTER_TRANSACTION_URL } from '../../../../../libs/tangle-shared-ui/src/constants/bridge';
 import useEthersSigner from './useEthersSigner';
 import { isEvmAddress } from '@webb-tools/webb-ui-components';
 

apps/tangle-dapp/src/data/bridge/useRouterTransfer.ts

@@ -5,7 +5,7 @@ import { z } from 'zod';
 import {
   HYPERLANE_CHAINS,
   HYPERLANE_REGISTRY_URL,
-} from '../../../constants/bridge';
+} from '../../../../../../libs/tangle-shared-ui/src/constants/bridge';
 
 export default async function assembleChainMetadata() {
   const result = z.record(z.custom<ChainMetadata>()).safeParse({

apps/tangle-dapp/src/lib/bridge/hyperlane/assembleChainMetadata.ts

@@ -5,7 +5,7 @@ import { objFilter, objMerge } from '@hyperlane-xyz/utils';
 import {
   HYPERLANE_WARP_ROUTE_CONFIGS,
   HYPERLANE_WARP_ROUTE_WHITELIST,
-} from '../../../constants/bridge';
+} from '../../../../../../libs/tangle-shared-ui/src/constants/bridge';
 
 export default function assembleWarpCoreConfig(): WarpCoreConfig {
   const result = WarpCoreConfigSchema.safeParse(HYPERLANE_WARP_ROUTE_CONFIGS);