feat(repo): Fix Routing, Add Eslint Rules, Remove Unused Deps (#2702)

apps/tangle-dapp/public/_redirects

@@ -0,0 +1 @@
+/*  /index.html  200

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

@@ -28,7 +28,7 @@ import RestakeWithdrawPage from '../pages/restake/withdraw';
 
 // TODO: Add metadata tags for SEO
 
-export function App() {
+function App() {
   return (
     <div>
       <Providers>
@@ -114,4 +114,5 @@ export function App() {
     </div>
   );
 }
+
 export default App;

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

@@ -6,10 +6,10 @@ import {
 import { WebbUIProvider } from '@webb-tools/webb-ui-components';
 import { type PropsWithChildren, type ReactNode } from 'react';
 import type { State } from 'wagmi';
-import z from 'zod';
+import { z } from 'zod';
 
 import HyperlaneWarpContext from '../pages/bridge/context/HyperlaneWarpContext';
-import BridgeTxQueueProvider from '../pages/bridge/context/useBridgeTxQueue';
+import BridgeTxQueueProvider from '../pages/bridge/context/BridgeTxQueueContext/BridgeTxQueueProvider';
 
 const appEvent = new AppEvent();
 

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

@@ -8,13 +8,8 @@ import {
 import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import InputWrapper, { InputWrapperProps } from './InputWrapper';
-
-export enum AddressType {
-  EVM,
-  Substrate,
-  Both,
-}
+import InputWrapper, { InputWrapperProps } from '../InputWrapper';
+import { AddressType } from './types';
 
 export type AddressInputProps = {
   id: string;

apps/tangle-dapp/src/components/AddressInput/index.ts

@@ -0,0 +1,6 @@
+import AddressInput from './AddressInput';
+
+export * from './AddressInput';
+export * from './types';
+
+export default AddressInput;

apps/tangle-dapp/src/components/AddressInput/types.ts

@@ -0,0 +1,5 @@
+export enum AddressType {
+  EVM,
+  Substrate,
+  Both,
+}

apps/tangle-dapp/src/components/HeaderChip/types.ts

@@ -1,10 +1,10 @@
 import type { IconBase } from '@webb-tools/icons/types';
-import type React from 'react';
+import type { ReactElement } from 'react';
 
 export type ChipType = 'ERA' | 'Session';
 
 export interface HeaderChipItemProps {
-  Icon: (props: IconBase) => React.JSX.Element;
+  Icon: (props: IconBase) => ReactElement;
   label: ChipType;
   hasTooltip?: boolean;
   tooltipContent?: string;

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

@@ -6,12 +6,7 @@ import {
 } from '@webb-tools/webb-ui-components';
 import { FC, ReactNode, useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
-
-export enum KeyStatsItemVariant {
-  Left,
-  Center,
-  Right,
-}
+import KeyStatsItemVariant from './KeyStatsItemVariant';
 
 export type KeyStatsItemProps = {
   title: string;

apps/tangle-dapp/src/components/KeyStatsItem/KeyStatsItemVariant.ts

@@ -0,0 +1,7 @@
+enum KeyStatsItemVariant {
+  Left,
+  Center,
+  Right,
+}
+
+export default KeyStatsItemVariant;

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

@@ -4,11 +4,7 @@ import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
-
-export enum LstIconSize {
-  MD = 30,
-  LG = 38,
-}
+import { LstIconSize } from './types';
 
 export type LstIconProps = {
   lsProtocolId: LsProtocolId;

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

@@ -5,8 +5,9 @@ import { twMerge } from 'tailwind-merge';
 
 import { LsToken } from '../../../constants/liquidStaking/types';
 import useLsActivePoolDisplayName from '../../../data/liquidStaking/useLsActivePoolDisplayName';
-import { ExchangeRateType } from '../../../data/liquidStaking/useLsExchangeRate';
-import useLsExchangeRate from '../../../data/liquidStaking/useLsExchangeRate';
+import useLsExchangeRate, {
+  ExchangeRateType,
+} from '../../../data/liquidStaking/useLsExchangeRate';
 import DetailItem from './DetailItem';
 
 export type ExchangeRateDetailItemProps = {

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

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../../constants/liquidStaking/constants';
 import { LsNetworkId, LsToken } from '../../../constants/liquidStaking/types';
-import { ERROR_NOT_ENOUGH_BALANCE } from '../../../containers/ManageProfileModalContainer/Independent/IndependentAllocationInput';
+import { ERROR_NOT_ENOUGH_BALANCE } from '../../../containers/ManageProfileModalContainer/constants';
 import { useLsStore } from '../../../data/liquidStaking/useLsStore';
 import useInputAmount from '../../../hooks/useInputAmount';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';

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

@@ -22,7 +22,8 @@ import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
 import { ListCardWrapper } from '../../Lists/ListCardWrapper';
 import ListStatus from '../../ListStatus';
 import SkeletonRows from '../../SkeletonRows';
-import LstIcon, { LstIconSize } from '../LstIcon';
+import LstIcon from '../LstIcon';
+import { LstIconSize } from '../types';
 
 export type LsSelectLstModalProps = {
   pools: LsPool[] | Error | null;

apps/tangle-dapp/src/components/LiquidStaking/types.ts

@@ -0,0 +1,4 @@
+export enum LstIconSize {
+  MD = 30,
+  LG = 38,
+}

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

@@ -8,8 +8,8 @@ import {
 } 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 Link from 'next/link';
 import { ComponentProps, useMemo, useState } from 'react';
+import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 import { Address } from 'viem';
 
@@ -97,7 +97,7 @@ export const AssetList = ({
 
                   {asset.explorerUrl !== undefined && (
                     <Link
-                      href={asset.explorerUrl}
+                      to={asset.explorerUrl}
                       target="_blank"
                       className="z-20 flex items-center gap-1 text-mono-120 dark:text-mono-100 dark:hover:text-mono-80"
                     >

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

@@ -2,7 +2,7 @@ import { IconBase } from '@webb-tools/icons/types';
 import { FC, ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-export enum ModalIconCommonVariant {
+enum ModalIconCommonVariant {
   SUCCESS,
 }
 

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

@@ -1,7 +1,7 @@
 import BackspaceDeleteFillIcon from '@webb-tools/icons/BackspaceDeleteFillIcon';
 import ensureError from '@webb-tools/tangle-shared-ui/utils/ensureError';
 import { Button, Input } from '@webb-tools/webb-ui-components';
-import Decimal from 'decimal.js';
+import { Decimal } from 'decimal.js';
 import { FC, useCallback } from 'react';
 
 import useCustomInputValue from '../hooks/useCustomInputValue';

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

@@ -28,13 +28,14 @@ import {
 import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import assertSubstrateAddress from '@webb-tools/webb-ui-components/utils/assertSubstrateAddress';
 import cx from 'classnames';
-import React, {
+import {
   FC,
   startTransition,
   useEffect,
   useMemo,
   useRef,
   useState,
+  memo,
 } from 'react';
 
 import { Validator } from '../../types';
@@ -331,4 +332,4 @@ const sortValidatorsBy = (
   return sortFn(rowA, rowB, columnId);
 };
 
-export default React.memo(ValidatorSelectionTable);
+export default memo(ValidatorSelectionTable);

apps/tangle-dapp/src/constants/liquidStaking/types.ts

@@ -9,8 +9,8 @@ import {
   TANGLE_LOCAL_DEV_NETWORK,
   TANGLE_MAINNET_NETWORK,
   TANGLE_TESTNET_NATIVE_NETWORK,
+  Network as TangleNetwork,
 } from '@webb-tools/webb-ui-components/constants/networks';
-import { Network as TangleNetwork } from '@webb-tools/webb-ui-components/constants/networks';
 import { SubstrateAddress } from '@webb-tools/webb-ui-components/types/address';
 
 import {

apps/tangle-dapp/src/containers/BalancesTableContainer/LockedBalanceDetails/VestingRemainingBalances.tsx

@@ -4,7 +4,7 @@ import { FC, useCallback } from 'react';
 
 import useVestingInfo from '../../../data/vesting/useVestingInfo';
 import BalanceCell from '../BalanceCell';
-import { sortVestingSchedulesAscending } from './VestingScheduleBalances';
+import { sortVestingSchedulesAscending } from './utils';
 
 const VestingRemainingBalances: FC = () => {
   const { schedulesOpt: vestingSchedulesOpt } = useVestingInfo();

apps/tangle-dapp/src/containers/BalancesTableContainer/LockedBalanceDetails/VestingScheduleBalances.tsx

@@ -1,26 +1,11 @@
-import { PalletVestingVestingInfo } from '@polkadot/types/lookup';
 import { BN, BN_ZERO, formatDecimal } from '@polkadot/util';
 import useApiRx from '@webb-tools/tangle-shared-ui/hooks/useApiRx';
 import { FC, useCallback } from 'react';
 
 import useVestingInfo from '../../../data/vesting/useVestingInfo';
 import formatTangleBalance from '../../../utils/formatTangleBalance';
 import BalanceCell from '../BalanceCell';
-
-/**
- * Sort by ending block number in ascending order. This will
- * effectively show the vesting schedules that will end/unlock
- * sooner first.
- */
-export const sortVestingSchedulesAscending = (
-  a: PalletVestingVestingInfo,
-  b: PalletVestingVestingInfo,
-): 0 | 1 | -1 => {
-  const endingBlockNumberOfA = a.startingBlock.add(a.locked.div(a.perBlock));
-  const endingBlockNumberOfB = b.startingBlock.add(b.locked.div(b.perBlock));
-
-  return endingBlockNumberOfA.cmp(endingBlockNumberOfB);
-};
+import { sortVestingSchedulesAscending } from './utils';
 
 const VestingScheduleBalances: FC = () => {
   const { schedulesOpt: vestingSchedulesOpt } = useVestingInfo();

apps/tangle-dapp/src/containers/BalancesTableContainer/LockedBalanceDetails/VestingSchedulesUnlockingAt.tsx

@@ -7,7 +7,7 @@ import useApi from '../../../hooks/useApi';
 import calculateTimeRemaining from '../../../utils/calculateTimeRemaining';
 import getBlockDate from '../../../utils/getBlockDate';
 import TextCell from './TextCell';
-import { sortVestingSchedulesAscending } from './VestingScheduleBalances';
+import { sortVestingSchedulesAscending } from './utils';
 
 const VestingSchedulesUnlockingAt: FC = () => {
   const { schedulesOpt: vestingSchedulesOpt } = useVestingInfo();

apps/tangle-dapp/src/containers/BalancesTableContainer/LockedBalanceDetails/utils.ts

@@ -0,0 +1,16 @@
+import { PalletVestingVestingInfo } from '@polkadot/types/lookup';
+
+/**
+ * Sort by ending block number in ascending order. This will
+ * effectively show the vesting schedules that will end/unlock
+ * sooner first.
+ */
+export const sortVestingSchedulesAscending = (
+  a: PalletVestingVestingInfo,
+  b: PalletVestingVestingInfo,
+): 0 | 1 | -1 => {
+  const endingBlockNumberOfA = a.startingBlock.add(a.locked.div(a.perBlock));
+  const endingBlockNumberOfB = b.startingBlock.add(b.locked.div(b.perBlock));
+
+  return endingBlockNumberOfA.cmp(endingBlockNumberOfB);
+};

apps/tangle-dapp/src/containers/BalancesTableContainer/index.ts

@@ -1 +1,3 @@
-export * from './BalancesTableContainer';
+import BalancesTableContainer from './BalancesTableContainer';
+
+export default BalancesTableContainer;

apps/tangle-dapp/src/containers/BalancesTableContainer/useLongestVestingScheduleTime.ts

@@ -6,7 +6,7 @@ import useVestingInfo from '../../data/vesting/useVestingInfo';
 import useApi from '../../hooks/useApi';
 import calculateTimeRemaining from '../../utils/calculateTimeRemaining';
 import getBlockDate from '../../utils/getBlockDate';
-import { sortVestingSchedulesAscending } from './LockedBalanceDetails/VestingScheduleBalances';
+import { sortVestingSchedulesAscending } from './LockedBalanceDetails/utils';
 
 const useLongestVestingScheduleTime = () => {
   const { result: babeExpectedBlockTime } = useApi(

apps/tangle-dapp/src/containers/DelegateTxContainer/BondTokens.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { type FC, useCallback } from 'react';
-import z from 'zod';
+import { z } from 'zod';
 
 import AmountInput from '../../components/AmountInput';
 import {

apps/tangle-dapp/src/containers/LsCreatePoolModal.tsx

@@ -24,7 +24,7 @@ import { useLsStore } from '../data/liquidStaking/useLsStore';
 import useSubstrateAddress from '../hooks/useSubstrateAddress';
 import { TxStatus } from '../hooks/useSubstrateTx';
 import getLsNetwork from '../utils/liquidStaking/getLsNetwork';
-import { ERROR_NOT_ENOUGH_BALANCE } from './ManageProfileModalContainer/Independent/IndependentAllocationInput';
+import { ERROR_NOT_ENOUGH_BALANCE } from './ManageProfileModalContainer/constants';
 
 export type LsCreatePoolModalProps = {
   isOpen: boolean;
@@ -131,7 +131,7 @@ const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
         </ModalHeader>
 
         <ModalBody className="gap-4">
-          <div className="flex flex-col sm:flex-row items-center gap-4 justify-stretch">
+          <div className="flex flex-col items-center gap-4 sm:flex-row justify-stretch">
             <TextInput
               id="ls-create-pool-name"
               title="Pool Name (Optional)"
@@ -151,7 +151,7 @@ const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
             />
           </div>
 
-          <div className="flex flex-col sm:flex-row items-center gap-4 justify-stretch">
+          <div className="flex flex-col items-center gap-4 sm:flex-row justify-stretch">
             <AmountInput
               id="ls-create-pool-initial-bond-amount"
               amount={initialBondAmount}

apps/tangle-dapp/src/containers/ManageProfileModalContainer/AllocationChart.tsx

@@ -9,25 +9,20 @@ import {
   PieProps,
   RadialBar,
   RadialBarChart,
-  ResponsiveContainer,
   Tooltip as RechartsTooltip,
+  ResponsiveContainer,
 } from 'recharts';
 
 import BnChartTooltip from '../../components/BnChartTooltip';
 import { ChartColor } from '../../constants';
 import { RestakingService } from '../../types';
 import { getChartDataAreaColorByServiceType } from '../../utils';
 import formatTangleBalance from '../../utils/formatTangleBalance';
-import { RestakingAllocationMap } from './types';
+import { AllocationChartVariant, RestakingAllocationMap } from './types';
 import useAllocationChartEntries, {
   AllocationChartEntryName,
 } from './useAllocationChartEntries';
 
-export enum AllocationChartVariant {
-  INDEPENDENT,
-  SHARED,
-}
-
 export type AllocationChartProps = {
   variant: AllocationChartVariant;
   allocations: RestakingAllocationMap;

apps/tangle-dapp/src/containers/ManageProfileModalContainer/AllocationStep.tsx

@@ -5,9 +5,8 @@ import { RestakingProfileType } from '../../types';
 import ChooseMethodStep from './ChooseMethodStep';
 import ConfirmAllocationsStep from './ConfirmAllocationsStep';
 import IndependentAllocationStep from './Independent/IndependentAllocationStep';
-import { ManageProfileStep } from './ManageProfileModalContainer';
 import SharedAllocationStep from './Shared/SharedAllocationStep';
-import { RestakingAllocationMap } from './types';
+import { ManageProfileStep, RestakingAllocationMap } from './types';
 
 export type AllocationStepProps = {
   allocations: RestakingAllocationMap;

apps/tangle-dapp/src/containers/ManageProfileModalContainer/AllocationStepContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import AllocationChart, { AllocationChartProps } from './AllocationChart';
 
@@ -11,8 +11,8 @@ const AllocationStepContainer: FC<AllocationStepContainerProps> = ({
   ...allocationChartProps
 }) => {
   return (
-    <div className="flex flex-col-reverse sm:flex-row gap-5 items-center sm:items-start justify-center">
-      <div className="w-full flex flex-col gap-4 items-center justify-start min-w-max">
+    <div className="flex flex-col-reverse items-center justify-center gap-5 sm:flex-row sm:items-start">
+      <div className="flex flex-col items-center justify-start w-full gap-4 min-w-max">
         {children}
       </div>
 

apps/tangle-dapp/src/containers/ManageProfileModalContainer/ConfirmAllocationsStep.tsx

@@ -10,7 +10,7 @@ import { twMerge } from 'tailwind-merge';
 import { RestakingProfileType, RestakingService } from '../../types';
 import { getChipColorOfServiceType } from '../../utils';
 import formatTangleBalance from '../../utils/formatTangleBalance';
-import { filterAllocations } from './Independent/IndependentAllocationStep';
+import { filterAllocations } from './Independent/utils';
 import { RestakingAllocationMap } from './types';
 
 export type ConfirmAllocationsStepProps = {