Merge branch 'main' into 478-remove-50-and-max-from-the-backstop-pool…

…-withdraw-ui
pendulum-chain · Jun 26, 2024 · f78aad9 · f78aad9
2 parents da83502 + 11c7f81
commit f78aad9
Show file tree

Hide file tree

Showing 71 changed files with 663 additions and 264 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,4 @@ dist-ssr
 !.yarn/versions
 
 vite.config.ts.timestamp-*
+coverage/
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "lint:ts": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watchAll=true",
+    "test:coverage": "jest --coverage",
     "codegen": "graphql-codegen --config codegen.ts",
     "format": "prettier . --write",
     "release": "semantic-release",
@@ -89,6 +90,7 @@
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/preact-hooks": "^1.1.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/big.js": "^6.2.2",
     "@types/jest": "^29.5.11",

diff --git a/src/app.tsx b/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>
+    </>
+  );
+}
diff --git a/src/components/GetToken/index.tsx b/src/components/GetToken/index.tsx
@@ -70,13 +70,13 @@ const getTokenIcon = (currentTenant: TenantName) => {
 };
 
 export const GetToken = () => {
-  const { balance } = useAccountBalance();
+  const { total } = useAccountBalance().balances;
   const { currentTenant } = useSwitchChain();
   const { tokenSymbol } = useNodeInfoState().state;
 
   const link = `/${currentTenant}/gas`;
 
-  const isBalanceZero = Number(balance) === 0;
+  const isBalanceZero = Number(total) === 0;
 
   return (
     <section className="flex items-center">

diff --git a/src/components/Layout/Nav.tsx b/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);
 

diff --git a/src/components/Layout/links.tsx b/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' : ''),

diff --git a/src/components/Wallet/index.tsx b/src/components/Wallet/index.tsx
@@ -19,8 +19,9 @@ interface Props {
 const OpenWallet = (props: Props): JSX.Element => {
   const { walletAccount, dAppName, setWalletAccount, removeWalletAccount } = useGlobalState();
   const { wallet, address } = walletAccount || {};
-  const { query, balance } = useAccountBalance();
+  const { query, balances } = useAccountBalance();
   const { ss58Format, tokenSymbol } = useNodeInfoState().state;
+  const { total: balance } = balances;
 
   return (
     <>

diff --git a/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx b/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;

diff --git a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx b/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';

diff --git a/src/helpers/spacewalk.ts b/src/helpers/spacewalk.ts
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { ApiPromise } from '@polkadot/api';
 import { U8aFixed } from '@polkadot/types-codec';
 import { H256 } from '@polkadot/types/interfaces';
@@ -65,27 +66,33 @@ export function currencyToStellarAssetCode(currency: SpacewalkPrimitivesCurrency
 
 export function convertStellarAssetToCurrency(asset: Asset, api: ApiPromise): SpacewalkPrimitivesCurrencyId {
   if (asset.isNative()) {
-    return api.createType('SpacewalkPrimitivesCurrencyId', 'StellarNative');
+    return api.createType('SpacewalkPrimitivesCurrencyId', { Stellar: 'StellarNative' });
   } else {
     const pair = Keypair.fromPublicKey(asset.getIssuer());
     // We need the raw public key, not the base58 encoded version
     const issuerRawPublicKey = pair.rawPublicKey();
     const issuer = api.createType('Raw', issuerRawPublicKey, 32);
 
     if (asset.getCode().length <= 4) {
-      const code = api.createType('Raw', asset.getCode(), 4);
+      const paddedCode = _.padEnd(asset.getCode(), 4, '\0');
+      const code = api.createType('Raw', paddedCode, 4);
       return api.createType('SpacewalkPrimitivesCurrencyId', {
-        AlphaNum4: {
-          code,
-          issuer,
+        Stellar: {
+          AlphaNum4: {
+            code,
+            issuer,
+          },
         },
       });
     } else {
-      const code = api.createType('Raw', asset.getCode(), 12);
+      const paddedCode = _.padEnd(asset.getCode(), 12, '\0');
+      const code = api.createType('Raw', paddedCode, 12);
       return api.createType('SpacewalkPrimitivesCurrencyId', {
-        AlphaNum12: {
-          code,
-          issuer,
+        Stellar: {
+          AlphaNum12: {
+            code,
+            issuer,
+          },
         },
       });
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,3 +35,4 @@ dist-ssr
		!.yarn/versions

		vite.config.ts.timestamp-*
		coverage/