Merge branch 'main' into 466-add-a-arrow-to-reverse-the-swap-on-the-s…

…wap-ui-of-forex-amm
pendulum-chain · May 30, 2024 · fdda833 · fdda833
2 parents 06ac4c8 + e835951
commit fdda833
Show file tree

Hide file tree

Showing 31 changed files with 1,232 additions and 1,238 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "match-sorter": "^6.3.1",
-    "preact": "^10.19.3",
+    "preact": "^10.21.0",
     "qrcode.react": "^3.1.0",
     "react-daisyui": "^5.0.0",
     "react-device-detect": "^2.2.3",
@@ -71,7 +71,7 @@
     "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.7",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/preset-typescript": "^7.24.1",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.6",
     "@pendulum-chain/types": "^0.3.8",
@@ -98,8 +98,8 @@
     "@types/react-lottie": "^1",
     "@types/react-table": "^7.7.18",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "autoprefixer": "^10.4.16",
     "babel-jest": "^29.4.3",
     "daisyui": "^4.11.1",
@@ -118,7 +118,7 @@
     "sass": "^1.58.3",
     "semantic-release": "^22.0.12",
     "tailwindcss": "^3.4.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.5",
     "vite": "^3.2.7"
   },
   "engines": {

diff --git a/src/app.tsx b/src/app.tsx
@@ -8,8 +8,6 @@ import { NotFound } from './components/NotFound';
 import { SuspenseLoad } from './components/Suspense';
 import { config } from './config';
 import TermsAndConditions from './TermsAndConditions';
-import { useGlobalState } from './GlobalStateProvider';
-import { TenantName } from './models/Tenant';
 
 /**
  * Components need to be default exports inside the file for suspense loading to work properly
@@ -20,48 +18,43 @@ const NablaPage = <SuspenseLoad importFn={() => import('./pages/nabla')} fallbac
 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 TransactionsPage = (
+  <SuspenseLoad importFn={() => import('./pages/bridge/Transactions')} fallback={defaultPageLoader} />
+);
 const BackstopPoolsPage = (
   <SuspenseLoad importFn={() => import('./pages/nabla/backstop-pools')} fallback={defaultPageLoader} />
 );
 const Bridge = <SuspenseLoad importFn={() => import('./pages/bridge')} fallback={defaultPageLoader} />;
 const Staking = <SuspenseLoad importFn={() => import('./pages/collators/Collators')} fallback={defaultPageLoader} />;
 
-export function App() {
-  const { tenantName } = useGlobalState();
-
-  return (
-    <>
-      <Routes>
-        <Route path="/" element={<Navigate to={config.defaultPage} replace />} />
-        <Route path="/:network/" element={<Layout />}>
-          <Route path="" element={Dashboard} />
-          <Route path="dashboard" element={Dashboard} />
-          {(tenantName === TenantName.Foucoco || tenantName === TenantName.Amplitude) && (
-            <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} />
-            <Route path="*" element={<NotFound />} />
-          </Route>
-          <Route path="staking" element={Staking} />
+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} />
           <Route path="*" element={<NotFound />} />
         </Route>
+        <Route path="staking" element={Staking} />
         <Route path="*" element={<NotFound />} />
-      </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>
-    </>
-  );
-}
+      </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>
+  </>
+);
diff --git a/src/assets/Arrow.tsx b/src/assets/Arrow.tsx
@@ -0,0 +1,5 @@
+export const Arrow = ({ fill = '#000000' }: { fill: string }) => (
+  <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.515 5.88061L0.518739 11.652L0.51874 0.109262L10.515 5.88061Z" fill={fill} />
+  </svg>
+);
diff --git a/src/assets/green-warning.svg → src/assets/Warning.tsx b/src/assets/green-warning.svg → src/assets/Warning.tsx
@@ -1,3 +1,8 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.35968 11.5H10.0263V13.1666H8.35968V11.5ZM8.35968 4.83329H10.0263V9.83329H8.35968V4.83329ZM9.18468 0.666626C4.58468 0.666626 0.85968 4.39996 0.85968 8.99996C0.85968 13.6 4.58468 17.3333 9.18468 17.3333C13.793 17.3333 17.5263 13.6 17.5263 8.99996C17.5263 4.39996 13.793 0.666626 9.18468 0.666626ZM9.19301 15.6666C5.50968 15.6666 2.52635 12.6833 2.52635 8.99996C2.52635 5.31663 5.50968 2.33329 9.19301 2.33329C12.8763 2.33329 15.8597 5.31663 15.8597 8.99996C15.8597 12.6833 12.8763 15.6666 9.19301 15.6666Z" fill="#4EE59A"/>
-</svg>
+export const Warning = ({ fill = '#000000' }: { fill: string }) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.35968 11.5H10.0263V13.1666H8.35968V11.5ZM8.35968 4.83329H10.0263V9.83329H8.35968V4.83329ZM9.18468 0.666626C4.58468 0.666626 0.85968 4.39996 0.85968 8.99996C0.85968 13.6 4.58468 17.3333 9.18468 17.3333C13.793 17.3333 17.5263 13.6 17.5263 8.99996C17.5263 4.39996 13.793 0.666626 9.18468 0.666626ZM9.19301 15.6666C5.50968 15.6666 2.52635 12.6833 2.52635 8.99996C2.52635 5.31663 5.50968 2.33329 9.19301 2.33329C12.8763 2.33329 15.8597 5.31663 15.8597 8.99996C15.8597 12.6833 12.8763 15.6666 9.19301 15.6666Z"
+      fill={fill}
+    />
+  </svg>
+);
diff --git a/src/assets/coins/GLMR.png b/src/assets/coins/GLMR.png
diff --git a/src/assets/green-arrow.svg b/src/assets/green-arrow.svg
diff --git a/src/assets/pen.svg b/src/assets/pen.svg
diff --git a/src/assets/spacewalk/PEN_StellarBridgeToSpacewalk_Interpolation.json b/src/assets/spacewalk/PEN_StellarBridgeToSpacewalk_Interpolation.json
diff --git a/src/assets/spacewalk/PEN_StellarBridgeToSpacewalk_Text.json b/src/assets/spacewalk/PEN_StellarBridgeToSpacewalk_Text.json
diff --git a/src/components/Asset/Price/index.tsx b/src/components/Asset/Price/index.tsx
@@ -0,0 +1,40 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+import { SpacewalkPrimitivesCurrencyId } from '@polkadot/types/lookup';
+import { memo, useEffect, useState } from 'preact/compat';
+import { usePriceFetcher } from '../../../hooks/usePriceFetcher';
+import { NumberLoader } from '../../Loader';
+
+export type TokenPriceProps = {
+  address?: string;
+  currency: SpacewalkPrimitivesCurrencyId;
+  prefix?: ReactNode;
+  options?: UseQueryOptions;
+  loader?: ReactNode;
+  fallback?: ReactNode;
+};
+
+const TokenPrice = memo(({ currency, prefix = null, loader, fallback = null }: TokenPriceProps): JSX.Element | null => {
+  const { getTokenPriceForCurrency } = usePriceFetcher();
+  const [price, setPrice] = useState<number | undefined | null>(null);
+
+  useEffect(() => {
+    const run = async () => {
+      const p = await getTokenPriceForCurrency(currency);
+      setPrice(p);
+    };
+
+    run().catch(console.error);
+  }, [getTokenPriceForCurrency, currency]);
+
+  const isLoading = price === null;
+
+  if (isLoading) return <>{loader}</> || NumberLoader;
+  if (!price) return <>{fallback}</>;
+  return (
+    <span>
+      {prefix}${price}
+    </span>
+  );
+});
+
+export default TokenPrice;
diff --git a/src/components/Form/From/Badges/index.tsx b/src/components/Form/From/Badges/index.tsx
@@ -1,3 +1,6 @@
+import useSwitchChain from '../../../../hooks/useSwitchChain';
+import { TenantName } from '../../../../models/Tenant';
+
 export interface BadgeProps {
   value: string;
   onClick?: () => void;
@@ -9,39 +12,59 @@ interface BadgesProps {
   disabled?: boolean;
 }
 
-export const Badges: React.FC<BadgesProps> = ({ minBadge, maxBadge, disabled }) => (
-  <>
-    {minBadge && Number(minBadge.value) ? (
-      <div
-        className={`badge ${
-          disabled ? '' : 'badge-secondary-content hover:badge-secondary text-black cursor-pointer'
-        } text-xs mr-2.5`}
-        onClick={() => {
-          if (!disabled && minBadge.onClick) {
-            minBadge.onClick();
-          }
-        }}
-      >
-        Min {minBadge.value}
-      </div>
-    ) : (
-      <></>
-    )}
-    {maxBadge && Number(maxBadge.value) ? (
-      <div
-        className={`badge ${
-          disabled ? '' : 'badge-secondary-content  hover:badge-accent text-black hover:text-black cursor-pointer '
-        }  text-xs`}
-        onClick={() => {
-          if (!disabled && maxBadge.onClick) {
-            maxBadge.onClick();
-          }
-        }}
-      >
-        Max {maxBadge.value}
-      </div>
-    ) : (
-      <></>
-    )}
-  </>
-);
+const tenantColors = {
+  [TenantName.Pendulum]: {
+    min: 'border-primary text-primary hover:bg-primary hover:text-white',
+    max: 'border-[--text] text-[--text] hover:bg-[--text] hover:text-white',
+  },
+  [TenantName.Amplitude]: {
+    min: 'badge-secondary-content hover:badge-secondary text-black',
+    max: 'badge-secondary-content  hover:badge-accent text-black hover:text-black',
+  },
+};
+
+const getTenantColors = (tenantName: TenantName) => {
+  if (tenantName === TenantName.Amplitude || tenantName === TenantName.Foucoco || tenantName === TenantName.Local) {
+    return tenantColors[TenantName.Amplitude];
+  }
+
+  return tenantColors[tenantName];
+};
+
+export const Badges: React.FC<BadgesProps> = ({ minBadge, maxBadge, disabled }) => {
+  const { currentTenant } = useSwitchChain();
+  const colors = getTenantColors(currentTenant);
+
+  return (
+    <>
+      {minBadge && Number(minBadge.value) ? (
+        <div
+          className={`badge ${disabled ? '' : `${colors.min} cursor-pointer`} text-xs mr-2.5`}
+          onClick={() => {
+            if (!disabled && minBadge.onClick) {
+              minBadge.onClick();
+            }
+          }}
+        >
+          Min {minBadge.value}
+        </div>
+      ) : (
+        <></>
+      )}
+      {maxBadge && Number(maxBadge.value) ? (
+        <div
+          className={`badge ${disabled ? '' : `${colors.max} cursor-pointer`}  text-xs`}
+          onClick={() => {
+            if (!disabled && maxBadge.onClick) {
+              maxBadge.onClick();
+            }
+          }}
+        >
+          Max {maxBadge.value}
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};