feat(tangle-dapp): Bridge revamp & Router integration

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

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   AppEvent,
   OFACFilterProvider,
@@ -10,8 +8,8 @@ import { type PropsWithChildren, type ReactNode } from 'react';
 import type { State } from 'wagmi';
 import z from 'zod';
 
-import BridgeTxQueueProvider from '../context/BridgeTxQueueContext';
-import HyperlaneWarpContext from '../context/HyperlaneWarpContext';
+import HyperlaneWarpContext from '../pages/bridge/context/HyperlaneWarpContext';
+import BridgeTxQueueProvider from '../pages/bridge/context/useBridgeTxQueue';
 
 const appEvent = new AppEvent();
 

apps/tangle-dapp/src/components/AddressInput.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   Avatar,
   Button,
@@ -8,6 +6,7 @@ import {
   isSubstrateAddress,
 } from '@webb-tools/webb-ui-components';
 import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import InputWrapper, { InputWrapperProps } from './InputWrapper';
 
@@ -29,6 +28,9 @@ export type AddressInputProps = {
   wrapperOverrides?: Partial<InputWrapperProps>;
   setValue: (newValue: string) => void;
   setErrorMessage?: (error: string | null) => void;
+  showErrorMessage?: boolean;
+  inputClassName?: string;
+  showAvatar?: boolean;
 };
 
 const AddressInput: FC<AddressInputProps> = ({
@@ -43,6 +45,9 @@ const AddressInput: FC<AddressInputProps> = ({
   isDisabled = false,
   wrapperOverrides,
   setErrorMessage: setErrorMessageOnParent,
+  showErrorMessage = true,
+  inputClassName,
+  showAvatar = true,
 }) => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -122,19 +127,24 @@ const AddressInput: FC<AddressInputProps> = ({
       title={title}
       tooltip={tooltip}
       errorMessage={errorMessage ?? undefined}
-      bodyClassName="flex items-center gap-1"
+      bodyClassName="flex items-center gap-2"
       {...wrapperOverrides}
       actions={actions}
+      showErrorMessage={showErrorMessage}
     >
-      {value && (
-        <Avatar theme={isEvm ? 'ethereum' : 'substrate'} value={value} />
+      {value && showAvatar && (
+        <Avatar
+          theme={isEvm ? 'ethereum' : 'substrate'}
+          value={value}
+          size="md"
+        />
       )}
 
       <Input
         id={id}
         inputRef={inputRef}
         className="w-full"
-        inputClassName="placeholder:text-lg text-lg"
+        inputClassName={twMerge('placeholder:text-lg text-lg', inputClassName)}
         type="text"
         placeholder={placeholder}
         size="sm"

apps/tangle-dapp/src/components/AmountInput.tsx

@@ -3,6 +3,7 @@ import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config/constants/tangle'
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
 import { Button, Input } from '@webb-tools/webb-ui-components';
 import { FC, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import useInputAmount from '../hooks/useInputAmount';
 import InputWrapper, { InputWrapperProps } from './InputWrapper';
@@ -26,6 +27,8 @@ export type AmountInputProps = {
   wrapperClassName?: string;
   bodyClassName?: string;
   dropdownBodyClassName?: string;
+  showErrorMessage?: boolean;
+  inputClassName?: string;
 };
 
 const AmountInput: FC<AmountInputProps> = ({
@@ -48,6 +51,8 @@ const AmountInput: FC<AmountInputProps> = ({
   wrapperClassName,
   bodyClassName,
   dropdownBodyClassName,
+  showErrorMessage = true,
+  inputClassName,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const { nativeTokenSymbol } = useNetworkStore();
@@ -111,11 +116,12 @@ const AmountInput: FC<AmountInputProps> = ({
       wrapperClassName={wrapperClassName}
       bodyClassName={bodyClassName}
       dropdownBodyClassName={dropdownBodyClassName}
+      showErrorMessage={showErrorMessage}
     >
       <Input
         id={id}
         inputRef={inputRef}
-        inputClassName="placeholder:text-lg text-lg"
+        inputClassName={twMerge('placeholder:text-lg text-lg', inputClassName)}
         type="text"
         placeholder={placeholder ?? `0 ${nativeTokenSymbol}`}
         size="sm"

apps/tangle-dapp/src/components/HeaderChip/ChipText.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Typography } from '@webb-tools/webb-ui-components';
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
 import addCommasToNumber from '@webb-tools/webb-ui-components/utils/addCommasToNumber';

apps/tangle-dapp/src/components/InputWrapper.tsx

@@ -37,6 +37,7 @@ export type InputWrapperProps = {
   isFullWidth?: boolean;
   isDisabled?: boolean;
   tooltip?: ReactNode;
+  showErrorMessage?: boolean;
 };
 
 const InputWrapper: FC<InputWrapperProps> = ({
@@ -57,6 +58,7 @@ const InputWrapper: FC<InputWrapperProps> = ({
   isFullWidth = false,
   isDisabled = false,
   tooltip,
+  showErrorMessage = true,
 }) => {
   const { addError, removeError } = useErrorCountContext();
 
@@ -93,15 +95,15 @@ const InputWrapper: FC<InputWrapperProps> = ({
           'w-[356px] max-w-[356px]',
           'bg-mono-20 dark:bg-mono-170',
           'border border-transparent',
-          hasError && 'border-red-70 dark:border-red-50',
+          hasError && showErrorMessage && 'border-red-70 dark:border-red-50',
           isFullWidth && 'w-full max-w-full',
           wrapperClassName,
         )}
       >
         <div className="flex flex-col gap-1 w-full mr-auto">
           <div className="flex gap-1">
             <Label
-              className="text-mono-120 dark:text-mono-120 font-bold"
+              className="text-mono-120 dark:text-mono-120 font-bold text-lg"
               htmlFor={id}
             >
               {title}
@@ -159,7 +161,9 @@ const InputWrapper: FC<InputWrapperProps> = ({
         )}
       </div>
 
-      {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
+      {hasError && showErrorMessage && (
+        <ErrorMessage>{errorMessage}</ErrorMessage>
+      )}
     </div>
   );
 };

apps/tangle-dapp/src/components/KeyStatsItem/KeyStatsItem.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   InfoIconWithTooltip,
   notificationApi,

apps/tangle-dapp/src/components/LiquidStaking/LsMyPoolsTable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { BN } from '@polkadot/util';
 import {
   createColumnHelper,

apps/tangle-dapp/src/components/LiquidStaking/LsUnbondingTable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   createColumnHelper,
   getCoreRowModel,

apps/tangle-dapp/src/components/LiquidStaking/LsValidatorTable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   ColumnDef,
   ColumnSort,

apps/tangle-dapp/src/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { BN } from '@polkadot/util';
 import { WalletFillIcon, WalletLineIcon } from '@webb-tools/icons';
 import {

apps/tangle-dapp/src/components/LiquidStaking/stakeAndUnstake/LsInput.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { BN } from '@polkadot/util';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
 import { formatBn } from '@webb-tools/webb-ui-components';

apps/tangle-dapp/src/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 // This will override global types and provide type definitions for
 // the LST pallet for this file only.
 import '@webb-tools/tangle-restaking-types';

apps/tangle-dapp/src/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 // This will override global types and provide type definitions for
 // the LST pallet for this file only.
 import '@webb-tools/tangle-restaking-types';

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

@@ -1,15 +1,14 @@
+import { EVMTokenBridgeEnum } from '@webb-tools/evm-contract-metadata';
 import { ArrowRightUp, Search, TokenIcon } from '@webb-tools/icons';
 import {
-  getRoundedAmountString,
   Input,
   ListItem,
   shortenHex,
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
-import Decimal from 'decimal.js';
-import { Link } from 'react-router';
+import Link from 'next/link';
 import { ComponentProps, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Address } from 'viem';
@@ -18,9 +17,11 @@ import { ListCardWrapper } from './ListCardWrapper';
 
 export type AssetConfig = {
   symbol: string;
-  balance?: Decimal;
+  optionalSymbol?: string;
+  balance?: string;
   explorerUrl?: string;
   address?: Address;
+  assetBridgeType?: EVMTokenBridgeEnum;
 };
 
 type AssetListProps = {
@@ -48,7 +49,7 @@ export const AssetList = ({
 
   return (
     <ListCardWrapper title={title} onClose={onClose}>
-      <div className="px-4 pb-4 border-b md:px-9 border-mono-40 dark:border-mono-170">
+      <div className="px-4 pb-5 border-b md:px-6 border-mono-40 dark:border-mono-170">
         <Input
           id="chain"
           rightIcon={<Search />}
@@ -75,27 +76,28 @@ export const AssetList = ({
                 onSelectAsset(asset);
                 onClose?.();
               }}
-              className="cursor-pointer w-full flex items-center gap-4 justify-between max-w-full min-h-[60px] py-[12px]"
+              className="cursor-pointer w-full flex items-center gap-4 justify-between max-w-full min-h-[60px] py-[12px] px-6"
             >
               <div className="flex items-center gap-2">
                 <TokenIcon
-                  size="lg"
+                  size="xl"
                   name={asset.symbol}
-                  className="mr-2 w-[38px] h-[38px]"
+                  className="mr-2"
+                  spinnersize="lg"
                 />
 
                 <div className="flex flex-col gap-1">
                   <Typography
                     variant="h5"
                     fw="bold"
-                    className="block cursor-default text-mono-200 dark:text-mono-0"
+                    className="cursor-default text-mono-200 dark:text-mono-0"
                   >
                     {asset.symbol}
                   </Typography>
 
                   {asset.explorerUrl !== undefined && (
                     <Link
-                      to={asset.explorerUrl}
+                      href={asset.explorerUrl}
                       target="_blank"
                       className="z-20 flex items-center gap-1 text-mono-120 dark:text-mono-100 dark:hover:text-mono-80"
                     >
@@ -120,7 +122,7 @@ export const AssetList = ({
                 className="cursor-default text-mono-200 dark:text-mono-0"
               >
                 {asset.balance
-                  ? `${getRoundedAmountString(asset.balance.toNumber(), 4)} ${asset.symbol}`
+                  ? `${asset.balance} ${asset.symbol}`
                   : EMPTY_VALUE_PLACEHOLDER}
               </Typography>
             </ListItem>

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

@@ -51,7 +51,7 @@ export const ChainList = ({
   return (
     <ListCardWrapper title={title} onClose={onClose}>
       {showSearchInput && (
-        <div className="px-4 md:px-9 pb-4">
+        <div className="px-4 md:px-6 pb-5">
           <Input
             id={searchInputId}
             isControlled
@@ -83,7 +83,7 @@ export const ChainList = ({
                 key={`${chain.id}-${idx}`}
                 isDisabled={isDisabled}
                 className={twMerge(
-                  'w-full flex items-center justify-between max-w-full min-h-[60px] py-3',
+                  'w-full flex items-center justify-between max-w-full min-h-[60px] py-3 px-6',
                   !isDisabled && 'cursor-pointer',
                 )}
                 onClick={() => {
@@ -96,10 +96,14 @@ export const ChainList = ({
                 }}
               >
                 <div className="flex items-center gap-4 justify-start">
-                  <ChainIcon size="lg" name={chain.name} />
+                  <ChainIcon
+                    size="xl"
+                    name={chain.displayName ?? chain.name}
+                    spinnersize="lg"
+                  />
 
                   <Typography variant="h5" fw="bold" className="capitalize">
-                    {chain.name}
+                    {chain.displayName ?? chain.name}
                   </Typography>
                 </div>
 

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

@@ -1,5 +1,3 @@
-'use client';
-
 import { Search } from '@webb-tools/icons';
 import type { OperatorMap } from '@webb-tools/tangle-shared-ui/types/restake';
 import type { IdentityType } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity';

apps/tangle-dapp/src/components/NetworkSelectorButton/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import NetworkSelectorDropdown from '@webb-tools/tangle-shared-ui/components/NetworkSelectorDropdown';
 import { useLocation } from 'react-router';
 import { type FC } from 'react';

apps/tangle-dapp/src/components/NominationsTable/NominationsTable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   createColumnHelper,
   getCoreRowModel,

apps/tangle-dapp/src/components/PayoutTable/PayoutTable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { DeriveSessionProgress } from '@polkadot/api-derive/types';
 import { BN } from '@polkadot/util';
 import {

apps/tangle-dapp/src/components/RestakeDetailCard/RestakeOperatorDetailCard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import GlobalLine from '@webb-tools/icons/GlobalLine';
 import { Mail } from '@webb-tools/icons/Mail';
 import MapPinLine from '@webb-tools/icons/MapPinLine';

apps/tangle-dapp/src/components/Sidebar/MobileSidebar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { MobileSidebar as MobileSidebarCmp } from '@webb-tools/webb-ui-components';
 import { useLocation } from 'react-router';
 import { FC } from 'react';

apps/tangle-dapp/src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { SideBar as SideBarCmp } from '@webb-tools/webb-ui-components';
 import { setSidebarCookieOnToggle } from '@webb-tools/webb-ui-components/next-utils';
 import { useLocation } from 'react-router';

apps/tangle-dapp/src/components/Sidebar/sidebarProps.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   AppsLine,
   CoinLine,

apps/tangle-dapp/src/components/Sidebar/useSidebarProps.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
 import { useMemo } from 'react';
 

apps/tangle-dapp/src/components/UnbondingStatsItem/UnbondingStatsItem.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { BN_ZERO } from '@polkadot/util';
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';