refactor(tangle-dapp): Add restake banner

tangle-network · Dec 28, 2024 · 417639a · 417639a
1 parent dd777ad
commit 417639a
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 123 deletions.
diff --git a/apps/tangle-dapp/src/pages/account.tsx b/apps/tangle-dapp/src/pages/account.tsx
@@ -15,7 +15,7 @@ const AccountPage: FC = () => {
       </div>
 
       <Typography variant="h4" fw="bold">
-        Assets &amp; Balances
+        Restake Assets
       </Typography>
 
       <AssetsAndBalancesTable />

diff --git a/apps/tangle-dapp/src/pages/blueprints/index.tsx b/apps/tangle-dapp/src/pages/blueprints/index.tsx
@@ -1,12 +1,18 @@
-import TopBanner from '@webb-tools/tangle-shared-ui/components/blueprints/TopBanner';
+import RestakeBanner from '@webb-tools/tangle-shared-ui/components/blueprints/RestakeBanner';
 import { FC } from 'react';
 
 import BlueprintListing from './BlueprintListing';
+import { BLUEPRINT_DOCS_LINK } from '@webb-tools/webb-ui-components/constants/tangleDocs';
 
 const BlueprintsPage: FC = () => {
   return (
     <div className="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-dapp/src/pages/restake/overview/TableTabs.tsx b/apps/tangle-dapp/src/pages/restake/overview/TableTabs.tsx
@@ -12,7 +12,6 @@ import VaultsTable from '../../../components/tables/Vaults';
 import useRestakeRewardConfig from '../../../data/restake/useRestakeRewardConfig';
 import OperatorsTable from './OperatorsTable';
 import DepositForm from '../deposit/DepositForm';
-import RestakeTabs from '../RestakeTabs';
 import { RestakeAction } from '../../../constants';
 import RestakeWithdrawPage from '../withdraw';
 import RestakeStakePage from '../stake';

diff --git a/apps/tangle-dapp/src/pages/restake/overview/index.tsx b/apps/tangle-dapp/src/pages/restake/overview/index.tsx
@@ -1,105 +1,35 @@
 import useRestakeDelegatorInfo from '@webb-tools/tangle-shared-ui/data/restake/useRestakeDelegatorInfo';
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import useRestakeTVL from '@webb-tools/tangle-shared-ui/data/restake/useRestakeTVL';
-import getTVLToDisplay from '@webb-tools/tangle-shared-ui/utils/getTVLToDisplay';
-import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
-import {
-  Card,
-  CardVariant,
-} from '@webb-tools/webb-ui-components/components/Card';
-import { TANGLE_DOCS_RESTAKING_URL } from '@webb-tools/webb-ui-components/constants';
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import { twMerge } from 'tailwind-merge';
-import StatItem from '../../../components/StatItem';
-import { CONTENT } from './shared';
 import TableTabs from './TableTabs';
-import { ArrowRightUp } from '@webb-tools/icons';
 import { useParams } from 'react-router';
 import { RestakeAction } from '../../../constants';
 import NotFoundPage from '../../notFound';
 import isEnumValue from '../../../utils/isEnumValue';
+import RestakeBanner from '@webb-tools/tangle-shared-ui/components/blueprints/RestakeBanner';
+import { OPERATOR_JOIN_DOCS_LINK } from '@webb-tools/webb-ui-components/constants/tangleDocs';
 
 export default function RestakePage() {
   const { action } = useParams();
   const { delegatorInfo } = useRestakeDelegatorInfo();
   const { operatorMap } = useRestakeOperatorMap();
 
-  const {
-    delegatorTVL,
-    operatorConcentration,
-    operatorTVL,
-    vaultTVL,
-    totalDelegatorTVL,
-    totalNetworkTVL,
-  } = useRestakeTVL(operatorMap, delegatorInfo);
+  const { delegatorTVL, operatorConcentration, operatorTVL, vaultTVL } =
+    useRestakeTVL(operatorMap, delegatorInfo);
 
   // If provided, make sure that the action parameter is valid.
   if (action !== undefined && !isEnumValue(action, RestakeAction)) {
     return <NotFoundPage />;
   }
 
   return (
-    <div className="space-y-5">
-      <div className="flex flex-col gap-5 md:flex-row">
-        <Card
-          variant={CardVariant.GLASS}
-          className={twMerge(
-            'flex flex-col justify-between min-h-60 flex-1',
-            'bg-purple_gradient dark:bg-purple_gradient_dark',
-          )}
-        >
-          <Typography
-            variant="body1"
-            className="text-mono-200 dark:text-mono-0 max-w-[510px] pb-3"
-          >
-            {CONTENT.OVERVIEW}
-          </Typography>
-
-          <div className="flex justify-end gap-6 pt-3 border-t border-mono-0 dark:border-mono-140">
-            <StatItem
-              title={getTVLToDisplay(totalDelegatorTVL)}
-              subtitle="My Total Restaked"
-            />
-
-            <StatItem
-              title={getTVLToDisplay(totalNetworkTVL)}
-              subtitle="Network TVL"
-            />
-          </div>
-        </Card>
-
-        <Card
-          variant={CardVariant.GLASS}
-          className={twMerge(
-            'min-h-60 flex-1',
-            'md:max-w-[442px] flex flex-col justify-between',
-          )}
-        >
-          <div>
-            <Typography
-              variant="body1"
-              fw="bold"
-              className="text-mono-200 dark:text-mono-0 mb-2.5"
-            >
-              How It Works
-            </Typography>
-
-            <Typography variant="body1">{CONTENT.HOW_IT_WORKS}</Typography>
-          </div>
-
-          <Button
-            href={TANGLE_DOCS_RESTAKING_URL}
-            target="_blank"
-            variant="link"
-            size="sm"
-            rightIcon={
-              <ArrowRightUp className="fill-current dark:fill-current" />
-            }
-          >
-            Learn More
-          </Button>
-        </Card>
-      </div>
+    <div className="space-y-9">
+      <RestakeBanner
+        title="Introducing: Tangle Operators"
+        description="Ready to participate on Tangle? Join as an operator to provide on-demand services and earn rewards."
+        buttonHref={OPERATOR_JOIN_DOCS_LINK}
+        buttonText="Get Started"
+      />
 
       <TableTabs
         delegatorTVL={delegatorTVL}

diff --git a/libs/tangle-shared-ui/src/components/blueprints/RestakeBanner.tsx b/libs/tangle-shared-ui/src/components/blueprints/RestakeBanner.tsx
@@ -0,0 +1,56 @@
+import { ArrowRight } from '@webb-tools/icons';
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+import './top-banner.css';
+
+export type RestakeBannerProps = {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonHref: string;
+};
+
+const RestakeBanner: FC<RestakeBannerProps> = ({
+  title,
+  description,
+  buttonText,
+  buttonHref,
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'px-6 py-9 rounded-xl bg-center bg-cover bg-no-repeat bg-top-banner',
+      )}
+    >
+      <div className="max-w-[500px] space-y-6">
+        <div className="space-y-3">
+          <Typography variant="h4" className="text-mono-0">
+            {title}
+          </Typography>
+
+          <Typography
+            variant="body1"
+            className="text-mono-60 dark:text-mono-100"
+          >
+            {description}
+          </Typography>
+        </div>
+
+        <Button
+          variant="link"
+          href={buttonHref}
+          target="_blank"
+          rightIcon={
+            <ArrowRight size="lg" className="fill-current dark:fill-current" />
+          }
+        >
+          {buttonText}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default RestakeBanner;
diff --git a/libs/tangle-shared-ui/src/components/blueprints/TopBanner.tsx b/libs/tangle-shared-ui/src/components/blueprints/TopBanner.tsx
diff --git a/libs/webb-ui-components/src/constants/tangleDocs.ts b/libs/webb-ui-components/src/constants/tangleDocs.ts
@@ -1 +1,4 @@
-export const BLUEPRINT_DOCS = 'https://docs.tangle.tools/developers/blueprints';
+export const BLUEPRINT_DOCS_LINK =
+  'https://docs.tangle.tools/developers/blueprints';
+export const OPERATOR_JOIN_DOCS_LINK =
+  'https://docs.tangle.tools/restake/join_operator/join';