refactor(tangle-dapp): Update restaking page organization (#2711)

tangle-network · Jan 6, 2025 · f671e21 · f671e21
1 parent b1e678a
commit f671e21
Show file tree

Hide file tree

Showing 95 changed files with 1,439 additions and 1,794 deletions.
diff --git a/apps/tangle-cloud/app/blueprints/page.tsx b/apps/tangle-cloud/app/blueprints/page.tsx
@@ -1,12 +1,19 @@
-import TopBanner from '@webb-tools/tangle-shared-ui/components/blueprints/TopBanner';
+import RestakeBanner from '@webb-tools/tangle-shared-ui/components/blueprints/RestakeBanner';
 import BlueprintListing from './BlueprintListing';
+import { BLUEPRINT_DOCS_LINK } from '@webb-tools/webb-ui-components/constants/tangleDocs';
+import { FC } from 'react';
 
 export const dynamic = 'force-static';
 
-const Page = () => {
+const Page: FC = () => {
   return (
     <div className="px-4 space-y-5">
-      <TopBanner />
+      <RestakeBanner
+        title="Create Your First Blueprint"
+        description="Learn how to set up a minimal Tangle Blueprint in minutes accompanied by a step-by-step guide."
+        buttonHref={BLUEPRINT_DOCS_LINK}
+        buttonText="Get Started"
+      />
 
       <BlueprintListing />
     </div>

diff --git a/apps/tangle-cloud/app/providers.tsx b/apps/tangle-cloud/app/providers.tsx
@@ -21,7 +21,7 @@ const Providers = ({
 }: PropsWithChildren<Props>): ReactNode => {
   return (
     <NextThemeProvider>
-      <WebbUIProvider hasErrorBoudary isNextApp>
+      <WebbUIProvider hasErrorBoundary isNextApp>
         <WebbProvider
           appEvent={appEvent}
           applicationName="Tangle dApp"

diff --git a/apps/tangle-dapp/src/app/app.tsx b/apps/tangle-dapp/src/app/app.tsx
@@ -1,7 +1,7 @@
 import '@webb-tools/webb-ui-components/tailwind.css';
 import '../styles.css';
 
-import { Navigate, Route, Routes } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { Layout } from '../containers';
 import AccountPage from '../pages/account';
 import ClaimPage from '../pages/claim';
@@ -18,13 +18,8 @@ import BlueprintLayout from '../pages/blueprints/layout';
 import BlueprintsPage from '../pages/blueprints';
 import BlueprintDetailsPage from '../pages/blueprints/[id]';
 import LiquidStakingPage from '../pages/liquid-staking';
-import RestakeLayout from '../pages/restake/layout';
-import RestakeOverviewPage from '../pages/restake/overview';
-import RestakeOperatorPage from '../pages/restake/operators/[address]';
-import RestakeDepositPage from '../pages/restake/deposit';
-import RestakeStakePage from '../pages/restake/stake';
-import RestakeUnstakePage from '../pages/restake/unstake';
-import RestakeWithdrawPage from '../pages/restake/withdraw';
+import RestakePage from '../pages/restake/overview';
+import NotFoundPage from '../pages/notFound';
 
 // TODO: Add metadata tags for SEO
 
@@ -33,7 +28,6 @@ function App() {
     <div>
       <Providers>
         <Layout>
-          {/* START: routes */}
           <Routes>
             <Route index path={PagePath.DASHBOARD} element={<AccountPage />} />
 
@@ -61,6 +55,7 @@ function App() {
 
             <Route path={PagePath.BLUEPRINTS} element={<BlueprintLayout />}>
               <Route index element={<BlueprintsPage />} />
+
               <Route
                 path={PagePath.BLUEPRINTS_DETAILS}
                 element={<BlueprintDetailsPage />}
@@ -72,44 +67,15 @@ function App() {
               element={<LiquidStakingPage />}
             />
 
-            <Route path={PagePath.RESTAKE} element={<RestakeLayout />}>
-              <Route
-                index
-                element={<Navigate to={PagePath.RESTAKE_OVERVIEW} />}
-              />
-
-              <Route
-                path={PagePath.RESTAKE_OVERVIEW}
-                element={<RestakeOverviewPage />}
-              />
-
-              <Route
-                path={`${PagePath.RESTAKE_OPERATOR}/:address`}
-                element={<RestakeOperatorPage />}
-              />
-
-              <Route
-                path={PagePath.RESTAKE_DEPOSIT}
-                element={<RestakeDepositPage />}
-              />
-
-              <Route
-                path={PagePath.RESTAKE_STAKE}
-                element={<RestakeStakePage />}
-              />
+            <Route path={`${PagePath.RESTAKE}`} element={<RestakePage />} />
 
-              <Route
-                path={PagePath.RESTAKE_UNSTAKE}
-                element={<RestakeUnstakePage />}
-              />
+            <Route
+              path={`${PagePath.RESTAKE}/:action`}
+              element={<RestakePage />}
+            />
 
-              <Route
-                path={PagePath.RESTAKE_WITHDRAW}
-                element={<RestakeWithdrawPage />}
-              />
-            </Route>
+            <Route path="*" element={<NotFoundPage />} />
           </Routes>
-          {/* END: routes */}
         </Layout>
       </Providers>
     </div>

diff --git a/apps/tangle-dapp/src/app/providers.tsx b/apps/tangle-dapp/src/app/providers.tsx
@@ -11,6 +11,7 @@ import { z } from 'zod';
 import HyperlaneWarpContext from '../pages/bridge/context/HyperlaneWarpContext';
 import BridgeTxQueueProvider from '../pages/bridge/context/BridgeTxQueueContext/BridgeTxQueueProvider';
 import PolkadotApiProvider from '@webb-tools/tangle-shared-ui/context/PolkadotApiProvider';
+import { RestakeContextProvider } from '@webb-tools/tangle-shared-ui/context/RestakeContext';
 
 const appEvent = new AppEvent();
 
@@ -37,7 +38,7 @@ const Providers = ({
   } = envSchema.parse(process.env);
 
   return (
-    <WebbUIProvider hasErrorBoudary>
+    <WebbUIProvider hasErrorBoundary>
       <WebbProvider
         appEvent={appEvent}
         applicationName="Tangle dApp"
@@ -51,7 +52,9 @@ const Providers = ({
         >
           <HyperlaneWarpContext>
             <BridgeTxQueueProvider>
-              <PolkadotApiProvider>{children}</PolkadotApiProvider>
+              <PolkadotApiProvider>
+                <RestakeContextProvider>{children}</RestakeContextProvider>
+              </PolkadotApiProvider>
             </BridgeTxQueueProvider>
           </HyperlaneWarpContext>
         </OFACFilterProvider>

diff --git a/apps/tangle-dapp/src/components/LiquidStaking/LstListItem.tsx b/apps/tangle-dapp/src/components/LiquidStaking/LstListItem.tsx
@@ -0,0 +1,62 @@
+import { FC } from 'react';
+import LstIcon from './LstIcon';
+import {
+  AmountFormatStyle,
+  EMPTY_VALUE_PLACEHOLDER,
+  formatDisplayAmount,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { LsPool } from '../../constants/liquidStaking/types';
+import { LstIconSize } from './types';
+import formatFractional from '@webb-tools/webb-ui-components/utils/formatFractional';
+import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
+import LogoListItem from '../Lists/LogoListItem';
+
+type Props = {
+  pool: LsPool;
+  isSelfStaked: boolean;
+};
+
+const LstListItem: FC<Props> = ({ pool, isSelfStaked }) => {
+  const lsProtocol = getLsProtocolDef(pool.protocolId);
+
+  const fmtStakeAmount = formatDisplayAmount(
+    pool.totalStaked,
+    lsProtocol.decimals,
+    AmountFormatStyle.SI,
+  );
+
+  const fmtCommission =
+    pool.commissionFractional === undefined
+      ? undefined
+      : `${formatFractional(pool.commissionFractional)} commission`;
+
+  const stakeText = `${fmtStakeAmount} ${lsProtocol.token}`;
+
+  return (
+    <LogoListItem
+      leftUpperContent={
+        <Typography
+          variant="body1"
+          fw="bold"
+          className="block text-mono-200 dark:text-mono-0"
+        >
+          {pool.name?.toUpperCase()}
+          <span className="text-mono-180 dark:text-mono-120">#{pool.id}</span>
+        </Typography>
+      }
+      leftBottomContent={`${stakeText} ${isSelfStaked ? 'self ' : ''}staked`}
+      rightUpperText={`${pool.apyPercentage ?? EMPTY_VALUE_PLACEHOLDER}% APY`}
+      rightBottomText={fmtCommission}
+      logo={
+        <LstIcon
+          lsProtocolId={pool.protocolId}
+          iconUrl={pool.iconUrl}
+          size={LstIconSize.LG}
+        />
+      }
+    />
+  );
+};
+
+export default LstListItem;