Merge branch 'main' into 416-fix-the-calculation-of-the-security-depo…

…sit-amount

src/app.tsx

@@ -9,52 +9,81 @@ import { SuspenseLoad } from './components/Suspense';
 import { config } from './config';
 import TermsAndConditions from './TermsAndConditions';
 
+export enum PATHS {
+  DASHBOARD = 'dashboard',
+  GAS = 'gas',
+  SPACEWALK = 'spacewalk',
+  BRIDGE = 'bridge',
+  TRANSACTIONS = 'transactions',
+  NABLA = 'nabla',
+  NABLA_SWAP = 'swap',
+  NABLA_SWAP_POOLS = 'swap-pools',
+  NABLA_BACKSTOP_POOLS = 'backstop-pools',
+  STAKING = 'staking',
+}
+
+export const PAGES_PATHS = {
+  DASHBOARD: PATHS.DASHBOARD,
+  GAS: PATHS.GAS,
+  BRIDGE: `${PATHS.SPACEWALK}/${PATHS.BRIDGE}`,
+  TRANSACTIONS: `${PATHS.SPACEWALK}/${PATHS.TRANSACTIONS}`,
+  NABLA: PATHS.NABLA,
+  NABLA_SWAP: `${PATHS.NABLA}/${PATHS.NABLA_SWAP}`,
+  NABLA_SWAP_POOLS: `${PATHS.NABLA}/${PATHS.NABLA_SWAP_POOLS}`,
+  NABLA_BACKSTOP_POOLS: `${PATHS.NABLA}/${PATHS.NABLA_BACKSTOP_POOLS}`,
+  STAKING: PATHS.STAKING,
+};
+
 /**
  * Components need to be default exports inside the file for suspense loading to work properly
  */
-const Dashboard = <SuspenseLoad importFn={() => import('./pages/dashboard/Dashboard')} fallback={defaultPageLoader} />;
-const Gas = <SuspenseLoad importFn={() => import('./pages/gas')} fallback={defaultPageLoader} />;
-const NablaPage = <SuspenseLoad importFn={() => import('./pages/nabla')} fallback={defaultPageLoader} />;
-const StatsPage = <SuspenseLoad importFn={() => import('./pages/stats')} fallback={defaultPageLoader} />;
-const SwapPage = <SuspenseLoad importFn={() => import('./pages/nabla/swap')} fallback={defaultPageLoader} />;
-const SwapPoolsPage = <SuspenseLoad importFn={() => import('./pages/nabla/swap-pools')} fallback={defaultPageLoader} />;
-const TransactionsPage = (
-  <SuspenseLoad importFn={() => import('./pages/bridge/Transactions')} fallback={defaultPageLoader} />
-);
-const BackstopPoolsPage = (
-  <SuspenseLoad importFn={() => import('./pages/nabla/backstop-pools')} fallback={defaultPageLoader} />
+const pages = import.meta.glob('./pages/**/index.tsx');
+
+const loadPage = (path: string) => (
+  <SuspenseLoad importFn={pages[`./pages/${path}/index.tsx`]} fallback={defaultPageLoader} />
 );
-const Bridge = <SuspenseLoad importFn={() => import('./pages/bridge')} fallback={defaultPageLoader} />;
-const Staking = <SuspenseLoad importFn={() => import('./pages/collators/Collators')} fallback={defaultPageLoader} />;
 
-export const App = () => (
-  <>
-    <Routes>
-      <Route path="/" element={<Navigate to={config.defaultPage} replace />} />
-      <Route path="/:network/" element={<Layout />}>
-        <Route path="" element={Dashboard} />
-        <Route path="dashboard" element={Dashboard} />
-        <Route path="gas" element={Gas} />
-        <Route path="stats" element={StatsPage} />
-        <Route path="spacewalk">
-          <Route path="bridge" element={Bridge} />
-          <Route path="transactions" element={TransactionsPage} />
-        </Route>
-        <Route path="nabla" Component={() => <AppsProvider app="nabla" />}>
-          <Route path="" element={NablaPage} />
-          <Route path="swap" element={SwapPage} />
-          <Route path="swap-pools" element={SwapPoolsPage} />
-          <Route path="backstop-pools" element={BackstopPoolsPage} />
+const Dashboard = loadPage(PAGES_PATHS.DASHBOARD);
+const Gas = loadPage(PAGES_PATHS.GAS);
+const Bridge = loadPage(PAGES_PATHS.BRIDGE);
+const TransactionsPage = loadPage(PAGES_PATHS.TRANSACTIONS);
+const Staking = loadPage(PAGES_PATHS.STAKING);
+const NablaPage = loadPage(PAGES_PATHS.NABLA);
+const SwapPage = loadPage(PAGES_PATHS.NABLA_SWAP);
+const SwapPoolsPage = loadPage(PAGES_PATHS.NABLA_SWAP_POOLS);
+const BackstopPoolsPage = loadPage(PAGES_PATHS.NABLA_BACKSTOP_POOLS);
+
+export function App() {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<Navigate to={config.defaultPage} replace />} />
+        <Route path="/:network/" element={<Layout />}>
+          <Route index element={<Navigate to={PATHS.DASHBOARD} replace />} />
+          <Route path={PATHS.DASHBOARD} element={Dashboard} />
+          <Route path={PATHS.GAS} element={Gas} />
+          <Route path={PATHS.SPACEWALK}>
+            <Route path={PATHS.BRIDGE} element={Bridge} />
+            <Route path={PATHS.TRANSACTIONS} element={TransactionsPage} />
+          </Route>
+          <Route path={PATHS.NABLA} Component={() => <AppsProvider app="nabla" />}>
+            <Route path="" element={NablaPage} />
+            <Route path={PATHS.NABLA_SWAP} element={SwapPage} />
+            <Route path={PATHS.NABLA_SWAP_POOLS} element={SwapPoolsPage} />
+            <Route path={PATHS.NABLA_BACKSTOP_POOLS} element={BackstopPoolsPage} />
+            <Route path="*" element={<NotFound />} />
+          </Route>
+          <Route path={PATHS.STAKING} element={Staking} />
           <Route path="*" element={<NotFound />} />
         </Route>
         <Route path="staking" element={Staking} />
         <Route path="*" element={<NotFound />} />
-      </Route>
-    </Routes>
-    <TermsAndConditions />
-    <ToastContainer />
-    <div id="modals">
-      {/* This is where the dialogs/modals are rendered. It is placed here because it is the highest point in the app where the tailwind data-theme is available */}
-    </div>
-  </>
-);
+      </Routes>
+      <TermsAndConditions />
+      <ToastContainer />
+      <div id="modals">
+        {/* This is where the dialogs/modals are rendered. It is placed here because it is the highest point in the app where the tailwind data-theme is available */}
+      </div>
+    </>
+  );
+}

src/components/Layout/Nav.tsx

@@ -23,7 +23,7 @@ const CollapseMenu = ({
   const isActive = useMemo(() => {
     const [path] = pathname.split('?');
     const paths = path.split('/').filter(Boolean);
-    return paths[1].startsWith(link.replace('/', '')) ? true : false;
+    return paths[1] && paths[1].startsWith(link.replace('/', '')) ? true : false;
   }, [link, pathname]);
   const [isOpen, { toggle }] = useBoolean(isActive);
 

src/components/Layout/links.tsx

@@ -14,6 +14,7 @@ import { nablaConfig } from '../../config/apps/nabla';
 import { GlobalState } from '../../GlobalStateProvider';
 import { TenantName } from '../../models/Tenant';
 import { getSpacewalkInterpolation, getSpacewalkText } from './spacewalkAnimation';
+import { PAGES_PATHS, PATHS } from '../../app';
 
 export type LinkParameter = { isActive?: boolean };
 
@@ -55,7 +56,7 @@ export type Links = (state: Partial<GlobalState>) => LinkItem[];
 
 export const links: Links = ({ tenantName }) => [
   {
-    link: './dashboard',
+    link: `./${PAGES_PATHS.DASHBOARD}`,
     title: 'Dashboard',
     props: {
       className: ({ isActive } = {}) => (isActive ? 'active' : ''),
@@ -74,25 +75,25 @@ export const links: Links = ({ tenantName }) => [
     suffix: <ExternalIcon />,
   },
   {
-    link: './spacewalk',
+    link: `/${PATHS.SPACEWALK}`,
     title: getSpacewalkText(tenantName),
     props: {
       className: ({ isActive } = {}) => (isActive ? 'active' : tenantName === TenantName.Pendulum ? 'active' : ''),
     },
     prefix: getSpacewalkInterpolation(tenantName),
     submenu: [
       {
-        link: './spacewalk/bridge',
+        link: `./${PAGES_PATHS.BRIDGE}`,
         title: 'Bridge',
       },
       {
-        link: './spacewalk/transactions',
+        link: `./${PAGES_PATHS.TRANSACTIONS}`,
         title: 'Transactions',
       },
     ],
   },
   {
-    link: '/nabla',
+    link: `/${PATHS.NABLA}`,
     title: 'Forex AMM',
     hidden:
       (nablaConfig.environment && !nablaConfig.environment.includes(config.env)) ||
@@ -103,21 +104,21 @@ export const links: Links = ({ tenantName }) => [
     },
     submenu: [
       {
-        link: './nabla/swap',
+        link: `./${PAGES_PATHS.NABLA_SWAP}`,
         title: 'Swap',
       },
       {
-        link: './nabla/swap-pools',
+        link: `./${PAGES_PATHS.NABLA_SWAP_POOLS}`,
         title: 'Swap Pools',
       },
       {
-        link: './nabla/backstop-pools',
+        link: `./${PAGES_PATHS.NABLA_BACKSTOP_POOLS}`,
         title: 'Backstop Pool',
       },
     ],
   },
   {
-    link: './staking',
+    link: `./${PAGES_PATHS.STAKING}`,
     title: 'Staking',
     props: {
       className: ({ isActive } = {}) => (isActive ? 'active' : ''),

src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx

@@ -3,7 +3,7 @@ import { NablaInstanceBackstopPool } from '../../../../hooks/nabla/useNablaInsta
 import { ModalTypes, useModal } from '../../../../services/modal';
 import AddLiquidity from './AddLiquidity';
 import WithdrawLiquidity from './WithdrawLiquidity';
-import { Dialog } from '../../../../pages/collators/dialogs/Dialog';
+import { Dialog } from '../../../../pages/staking/dialogs/Dialog';
 
 export type LiquidityModalProps = {
   data?: NablaInstanceBackstopPool;

src/components/nabla/Pools/Swap/SwapPoolModals.tsx

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from 'preact';
 import { ModalTypes, useModal } from '../../../../services/modal';
-import { Dialog } from '../../../../pages/collators/dialogs/Dialog';
+import { Dialog } from '../../../../pages/staking/dialogs/Dialog';
 import { SwapPoolColumn } from './columns';
 import AddLiquidity from './AddLiquidity';
 import Redeem from './Redeem';

src/hooks/spacewalk/useBridgeSettings.ts

@@ -6,7 +6,7 @@ import { Asset } from 'stellar-sdk';
 import { useGlobalState } from '../../GlobalStateProvider';
 import { convertCurrencyToStellarAsset, shouldFilterOut } from '../../helpers/spacewalk';
 import { stringifyStellarAsset } from '../../helpers/stellar';
-import { BridgeContext } from '../../pages/bridge';
+import { BridgeContext } from '../../pages/spacewalk/bridge';
 import { ExtendedRegistryVault, useVaultRegistryPallet } from './useVaultRegistryPallet';
 import { ToastMessage, showToast } from '../../shared/showToast';
 import { Balance } from '@polkadot/types/interfaces';

src/hooks/useBuyout/index.ts

@@ -6,7 +6,7 @@ import { Codec } from '@polkadot/types-codec/types';
 
 import { useNodeInfoState } from '../../NodeInfoProvider';
 import { nativeToFormatDecimalPure } from '../../shared/parseNumbers/decimal';
-import { doSubmitExtrinsic } from '../../pages/collators/dialogs/helpers';
+import { doSubmitExtrinsic } from '../../pages/staking/dialogs/helpers';
 import { useGlobalState } from '../../GlobalStateProvider';
 
 import { OrmlTraitsAssetRegistryAssetMetadata } from './types';

src/pages/gas/GasSuccessDialog.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'react-daisyui';
 import SuccessDialogIcon from '../../assets/dialog-status-success';
-import { Dialog } from '../collators/dialogs/Dialog';
+import { Dialog } from '../staking/dialogs/Dialog';
 
 interface DialogProps {
   visible: boolean;

src/pages/bridge/FeeBox.tsx → src/pages/spacewalk/bridge/FeeBox.tsx

@@ -2,8 +2,8 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import Big from 'big.js';
 import { useCallback, useEffect, useMemo, useState } from 'preact/compat';
 import { Asset } from 'stellar-sdk';
-import { useFeePallet } from '../../hooks/spacewalk/useFeePallet';
-import { ChainDecimals, nativeStellarToDecimal, nativeToDecimal } from '../../shared/parseNumbers/metric';
+import { useFeePallet } from '../../../hooks/spacewalk/useFeePallet';
+import { ChainDecimals, nativeStellarToDecimal, nativeToDecimal } from '../../../shared/parseNumbers/metric';
 
 interface FeeBoxProps {
   // The amount of the bridged asset denoted in the smallest unit of the asset

src/pages/bridge/Issue/ConfirmationDialog.tsx → src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx

@@ -1,14 +1,14 @@
 import { useMemo } from 'preact/compat';
 import { Button, Divider } from 'react-daisyui';
 
-import { CopyableAddress, PublicKey } from '../../../components/PublicKey';
-import TransferCountdown from '../../../components/TransferCountdown';
-import { convertCurrencyToStellarAsset, deriveShortenedRequestId } from '../../../helpers/spacewalk';
-import { convertRawHexKeyToPublicKey } from '../../../helpers/stellar';
-import { RichIssueRequest } from '../../../hooks/spacewalk/useIssuePallet';
-import { nativeStellarToDecimal } from '../../../shared/parseNumbers/metric';
-import { Dialog } from '../../collators/dialogs/Dialog';
-import { generateSEP0007URIScheme } from '../../../helpers/stellar/sep0007';
+import { CopyableAddress, PublicKey } from '../../../../components/PublicKey';
+import TransferCountdown from '../../../../components/TransferCountdown';
+import { convertCurrencyToStellarAsset, deriveShortenedRequestId } from '../../../../helpers/spacewalk';
+import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
+import { RichIssueRequest } from '../../../../hooks/spacewalk/useIssuePallet';
+import { nativeStellarToDecimal } from '../../../../shared/parseNumbers/metric';
+import { Dialog } from '../../../staking/dialogs/Dialog';
+import { generateSEP0007URIScheme } from '../../../../helpers/stellar/sep0007';
 import { StellarUriScheme } from './StellarURIScheme';
 
 interface ConfirmationDialogProps {

src/pages/bridge/Issue/Disclaimer.tsx → src/pages/spacewalk/bridge/Issue/Disclaimer.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'preact/compat';
-import BellIcon from '../../../assets/bell';
+import BellIcon from '../../../../assets/bell';
 
 type Props = {
   content: JSX.Element;

src/pages/bridge/Issue/IssueValidationSchema.ts → src/pages/spacewalk/bridge/Issue/IssueValidationSchema.ts

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { IssueFormValues } from '.';
-import { transformNumber } from '../../../helpers/yup';
+import { transformNumber } from '../../../../helpers/yup';
 
 export function getIssueValidationSchema(maxIssuable: number, balance: number, tokenSymbol?: string) {
   return Yup.object<IssueFormValues>().shape({

src/pages/bridge/Issue/SettingsDialog.tsx → src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { Button, Checkbox } from 'react-daisyui';
-import VaultSelector from '../../../components/Selector/VaultSelector';
-import useBridgeSettings from '../../../hooks/spacewalk/useBridgeSettings';
-import { Dialog } from '../../collators/dialogs/Dialog';
+import VaultSelector from '../../../../components/Selector/VaultSelector';
+import useBridgeSettings from '../../../../hooks/spacewalk/useBridgeSettings';
+import { Dialog } from '../../../staking/dialogs/Dialog';
 import { useMemo } from 'preact/hooks';
 
 interface Props {

src/pages/bridge/Issue/index.tsx → src/pages/spacewalk/bridge/Issue/index.tsx

@@ -7,27 +7,28 @@ import { Button } from 'react-daisyui';
 import { FieldErrors, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 
-import { useGlobalState } from '../../../GlobalStateProvider';
-import { useNodeInfoState } from '../../../NodeInfoProvider';
-import From from '../../../components/Form/From';
-import OpenWallet from '../../../components/Wallet';
-import { getErrors, getEventBySectionAndMethod } from '../../../helpers/substrate';
-import { RichIssueRequest, useIssuePallet } from '../../../hooks/spacewalk/useIssuePallet';
-import useBridgeSettings from '../../../hooks/spacewalk/useBridgeSettings';
-import { decimalToStellarNative, nativeToDecimal } from '../../../shared/parseNumbers/metric';
-import { useAccountBalance } from '../../../shared/useAccountBalance';
-import { TenantName } from '../../../models/Tenant';
-import { ToastMessage, showToast } from '../../../shared/showToast';
+import { useGlobalState } from '../../../../GlobalStateProvider';
+import { useNodeInfoState } from '../../../../NodeInfoProvider';
+import From from '../../../../components/Form/From';
+import OpenWallet from '../../../../components/Wallet';
+import { getErrors, getEventBySectionAndMethod } from '../../../../helpers/substrate';
+import { RichIssueRequest, useIssuePallet } from '../../../../hooks/spacewalk/useIssuePallet';
+import useBridgeSettings from '../../../../hooks/spacewalk/useBridgeSettings';
+import { useCalculateGriefingCollateral } from '../../../../hooks/spacewalk/useCalculateGriefingCollateral';
+import { decimalToStellarNative, nativeToDecimal } from '../../../../shared/parseNumbers/metric';
+import { useAccountBalance } from '../../../../shared/useAccountBalance';
+import { TenantName } from '../../../../models/Tenant';
+import { ToastMessage, showToast } from '../../../../shared/showToast';
 
 import { FeeBox } from '../FeeBox';
 import { prioritizeXLMAsset } from '../helpers';
 
 import { ConfirmationDialog } from './ConfirmationDialog';
 import Disclaimer from './Disclaimer';
 import { getIssueValidationSchema } from './IssueValidationSchema';
-import { isU128Compatible } from '../../../shared/parseNumbers/isU128Compatible';
-import { USER_INPUT_MAX_DECIMALS } from '../../../shared/parseNumbers/decimal';
-import { useCalculateGriefingCollateral } from '../../../hooks/spacewalk/useCalculateGriefingCollateral';
+import { PAGES_PATHS } from '../../../../app';
+import { isU128Compatible } from '../../../../shared/parseNumbers/isU128Compatible';
+import { USER_INPUT_MAX_DECIMALS } from '../../../../shared/parseNumbers/decimal';
 
 interface IssueProps {
   network: string;
@@ -199,7 +200,7 @@ function Issue(props: IssueProps): JSX.Element {
         onClose={() => setConfirmationDialogVisible(false)}
         onConfirm={() => {
           setConfirmationDialogVisible(false);
-          navigateTo(`/${tenantName}/spacewalk/transactions`);
+          navigateTo(`/${tenantName}${PAGES_PATHS.TRANSACTIONS}`);
         }}
       />
       <div className="w-full">

src/pages/bridge/Redeem/ConfirmationDialog.tsx → src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx

@@ -1,12 +1,13 @@
 import { Button } from 'react-daisyui';
 import { useNavigate } from 'react-router-dom';
-import { useGlobalState } from '../../../GlobalStateProvider';
-import { PublicKey } from '../../../components/PublicKey';
-import { convertCurrencyToStellarAsset } from '../../../helpers/spacewalk';
-import { RichRedeemRequest } from '../../../hooks/spacewalk/useRedeemPallet';
-import { nativeStellarToDecimal } from '../../../shared/parseNumbers/metric';
-import { Dialog } from '../../collators/dialogs/Dialog';
+import { useGlobalState } from '../../../../GlobalStateProvider';
+import { PublicKey } from '../../../../components/PublicKey';
+import { convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
+import { RichRedeemRequest } from '../../../../hooks/spacewalk/useRedeemPallet';
+import { nativeStellarToDecimal } from '../../../../shared/parseNumbers/metric';
+import { Dialog } from '../../../staking/dialogs/Dialog';
 import { useMemo } from 'preact/hooks';
+import { PAGES_PATHS } from '../../../../app';
 
 interface ConfirmationDialogProps {
   redeemRequest: RichRedeemRequest | undefined;
@@ -56,7 +57,7 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
       <Button
         color="primary"
         onClick={() => {
-          navigateTo(`/${tenantName}/spacewalk/transactions`);
+          navigateTo(`/${tenantName}${PAGES_PATHS.TRANSACTIONS}`);
         }}
       >
         View Progress

src/pages/bridge/Redeem/RedeemValidationSchema.ts → src/pages/spacewalk/bridge/Redeem/RedeemValidationSchema.ts

@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
 import { RedeemFormValues } from '.';
-import { StellarPublicKeyPattern } from '../../../helpers/stellar';
-import { transformNumber } from '../../../helpers/yup';
+import { StellarPublicKeyPattern } from '../../../../helpers/stellar';
+import { transformNumber } from '../../../../helpers/yup';
 
 export function getRedeemValidationSchema(maxRedeemable: number, balance: number) {
   return Yup.object<RedeemFormValues>().shape({