feat(tangle-dapp): Add ERC-20 asset restaking

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

@@ -0,0 +1,68 @@
+import { AbiFunction } from 'viem';
+
+const ERC20_ABI = [
+  {
+    inputs: [{ name: 'account', type: 'address' }],
+    name: 'balanceOf',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { name: 'spender', type: 'address' },
+      { name: 'amount', type: 'uint256' },
+    ],
+    name: 'approve',
+    outputs: [{ name: '', type: 'bool' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { name: 'owner', type: 'address' },
+      { name: 'spender', type: 'address' },
+    ],
+    name: 'allowance',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'decimals',
+    outputs: [{ name: '', type: 'uint8' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'symbol',
+    outputs: [{ name: '', type: 'string' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { name: 'recipient', type: 'address' },
+      { name: 'amount', type: 'uint256' },
+    ],
+    name: 'transfer',
+    outputs: [{ name: '', type: 'bool' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { name: 'sender', type: 'address' },
+      { name: 'recipient', type: 'address' },
+      { name: 'amount', type: 'uint256' },
+    ],
+    name: 'transferFrom',
+    outputs: [{ name: '', type: 'bool' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+] as const satisfies AbiFunction[];
+
+export default ERC20_ABI;

apps/tangle-dapp/src/app/providers.tsx

@@ -8,8 +8,8 @@ import { type PropsWithChildren, type ReactNode } from 'react';
 import type { State } from 'wagmi';
 import { z } from 'zod';
 
-import HyperlaneWarpContext from '../pages/bridge/context/HyperlaneWarpContext';
-import BridgeTxQueueProvider from '../pages/bridge/context/BridgeTxQueueContext/BridgeTxQueueProvider';
+import HyperlaneWarpContext from '../context/HyperlaneWarpContext';
+import BridgeTxQueueProvider from '../context/BridgeTxQueueContext/BridgeTxQueueProvider';
 import PolkadotApiProvider from '@webb-tools/tangle-shared-ui/context/PolkadotApiProvider';
 import { RestakeContextProvider } from '@webb-tools/tangle-shared-ui/context/RestakeContext';
 

apps/tangle-dapp/src/components/Lists/AssetList.tsx

@@ -1,4 +1,3 @@
-import { EVMTokenBridgeEnum } from '@webb-tools/evm-contract-metadata';
 import { ArrowRightUp, Search, TokenIcon } from '@webb-tools/icons';
 import {
   Input,
@@ -20,7 +19,6 @@ export type AssetConfig = {
   balance?: string;
   explorerUrl?: string;
   address?: Address;
-  assetBridgeType?: EVMTokenBridgeEnum;
 };
 
 type AssetListProps = {

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

@@ -29,12 +29,12 @@ import cx from 'classnames';
 import { FC, useCallback } from 'react';
 
 import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
-import { FeeDetail, FeeDetailProps } from '../components/FeeDetail';
-import { ROUTER_TX_EXPLORER_URL } from '../constants';
-import useBridgeStore from '../context/useBridgeStore';
-import { useBridgeTxQueue } from '../context/BridgeTxQueueContext';
-import { useHyperlaneTransfer } from '../hooks/useHyperlaneTransfer';
-import { useRouterTransfer } from '../hooks/useRouterTransfer';
+import { FeeDetail, FeeDetailProps } from './FeeDetail';
+import { ROUTER_TX_EXPLORER_URL } from '../../constants/bridge';
+import { useBridgeTxQueue } from '../../context/BridgeTxQueueContext';
+import { useHyperlaneTransfer } from '../../data/bridge/useHyperlaneTransfer';
+import { useRouterTransfer } from '../../data/bridge/useRouterTransfer';
+import { Decimal } from 'decimal.js';
 
 interface BridgeConfirmationModalProps {
   isOpen: boolean;
@@ -53,6 +53,8 @@ interface BridgeConfirmationModalProps {
     receiverAddress: string;
     refundAddress: string;
   } | null;
+  sendingAmount: Decimal | null;
+  receivingAmount: Decimal | null;
 }
 
 export const BridgeConfirmationModal = ({
@@ -65,9 +67,9 @@ export const BridgeConfirmationModal = ({
   activeAccountAddress,
   destinationAddress,
   routerTransferData,
+  sendingAmount,
+  receivingAmount,
 }: BridgeConfirmationModalProps) => {
-  const { sendingAmount, receivingAmount } = useBridgeStore();
-
   const {
     addTxToQueue,
     setIsOpenQueueDropdown,
@@ -337,7 +339,7 @@ const ConfirmationItem: FC<{
         <Typography variant="body1">Amount</Typography>
 
         <div className="flex items-center gap-2">
-          <Typography variant="h5" fw="bold">
+          <Typography variant="h5" fw="bold" className="text-nowrap">
             {amount ?? EMPTY_VALUE_PLACEHOLDER}
           </Typography>
 

apps/tangle-dapp/src/pages/bridge/components/BridgeTxQueueDropdown.tsx → apps/tangle-dapp/src/components/bridge/BridgeTxQueueDropdown.tsx

@@ -9,7 +9,7 @@ import { Typography } from '@webb-tools/webb-ui-components/typography/Typography
 import { FC, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { useBridgeTxQueue } from '../context/BridgeTxQueueContext';
+import { useBridgeTxQueue } from '../../context/BridgeTxQueueContext';
 import BridgeTxQueueItem from './BridgeTxQueueItem';
 
 const BridgeTxQueueDropdown: FC<{

apps/tangle-dapp/src/pages/bridge/components/BridgeTxQueueItem.tsx → apps/tangle-dapp/src/components/bridge/BridgeTxQueueItem.tsx

@@ -10,7 +10,7 @@ import { Decimal } from 'decimal.js';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { useBridgeTxQueue } from '../context/BridgeTxQueueContext';
+import { useBridgeTxQueue } from '../../context/BridgeTxQueueContext';
 
 interface BridgeTxQueueItemProps {
   tx: BridgeQueueTxItem;