fix: overview render based on api

consolelabs · Apr 10, 2024 · 9484568 · 9484568
1 parent 640b2ef
commit 9484568
Show file tree

Hide file tree

Showing 30 changed files with 909 additions and 487 deletions.
diff --git a/app/[server]/nft/page.tsx b/app/[server]/nft/page.tsx
@@ -1,11 +1,9 @@
 "use client";
 
 import { Footer } from "@/components/footer";
-import { LoginPopover } from "@/components/login-popover";
-import { Logo } from "@/components/logo";
+import { Header } from "@/components/header/header";
 import { NFTList } from "@/components/nft/nft-list";
-import ProfileDropdown from "@/components/profile-dropdown";
-import { Button, Separator, Table, TopBar, Typography } from "@mochi-ui/core";
+import { Button, Separator, Typography } from "@mochi-ui/core";
 import { ArrowTopRightLine } from "@mochi-ui/icons";
 import { useLoginWidget } from "@mochi-web3/login-widget";
 import Image from "next/image";
@@ -176,14 +174,9 @@ const NFT = () => {
 };
 
 export default function Page() {
-  const { isLoggedIn } = useLoginWidget();
-
   return (
     <main>
-      <TopBar
-        leftSlot={<Logo />}
-        rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
-      />
+      <Header />
       <Suspense>
         <NFT />
       </Suspense>

diff --git a/app/[server]/page.tsx b/app/[server]/page.tsx
@@ -1,56 +1,68 @@
 "use client";
 
 import { Footer } from "@/components/footer";
-import { LoginPopover } from "@/components/login-popover";
-import { Logo } from "@/components/logo";
-import ProfileDropdown from "@/components/profile-dropdown";
-import { Button, IconButton, TopBar, Typography } from "@mochi-ui/core";
+import { Button, IconButton, Typography } from "@mochi-ui/core";
 import { EyeHiddenSolid, EyeShowSolid } from "@mochi-ui/icons";
 import { useLoginWidget } from "@mochi-web3/login-widget";
-import Image from "next/image";
 import { Suspense, useEffect, useState } from "react";
 import { FlexibleStakingCard } from "@/components/overview/FlexibleStakingCard";
 import { FixedStakingCard } from "@/components/overview/FixedStakingCard";
 import { NFTCard } from "@/components/overview/NFTCard";
 import { useFlexibleStaking } from "@/store/flexible-staking";
 import { utils } from "@consolelabs/mochi-formatter";
 import { useTokenStaking } from "@/store/token-staking";
+import { formatUnits, parseUnits } from "ethers/lib/utils";
+import clsx from "clsx";
+import { TokenImage } from "@/components/token-image";
+import { Header } from "@/components/header/header";
 
 const Overview = () => {
   const { isLoggedIn } = useLoginWidget();
-  const [showInfo, setShowInfo] = useState(true);
-  const { balance, stakedAmount, totalEarnedRewards, tokenPrice } =
-    useFlexibleStaking();
-  const { fetchStakingTokens } = useTokenStaking();
+  const { stakingPools, fetchStakingPools } = useTokenStaking();
+  const {
+    balance,
+    stakedAmount,
+    totalEarnedRewards,
+    stakingToken,
+    rewardToken,
+  } = useFlexibleStaking();
+  const [showInfo, setShowInfo] = useState(false);
 
   useEffect(() => {
-    fetchStakingTokens();
-  }, [fetchStakingTokens]);
+    fetchStakingPools();
+  }, [fetchStakingPools]);
+
+  useEffect(() => {
+    if (!!balance && !showInfo) {
+      setShowInfo(true);
+    }
+  }, [balance, showInfo]);
 
   return (
     <div className="overflow-y-auto h-[calc(100vh-56px)]">
       <div className="max-w-6xl pt-12 pb-16 px-4 mx-auto space-y-14">
         <div className="flex gap-8 flex-col lg:flex-row items-center lg:items-start">
-          {isLoggedIn ? (
+          {!isLoggedIn ? (
+            <Typography level="h3" fontWeight="lg" className="flex-1 pb-3">
+              Log in to see your available assets to stake
+            </Typography>
+          ) : balance.isZero() ? (
+            <Typography level="h3" fontWeight="lg" className="flex-1 pb-3">
+              You don&apos;t have available assets to stake in your wallet.
+            </Typography>
+          ) : (
             <Typography level="h3" fontWeight="lg" className="flex-1">
               You have{" "}
               <span className="text-primary-solid">
-                {showInfo ? utils.formatTokenDigit(balance) : "*****"}
-              </span>{" "}
-              ICY and{" "}
-              <span className="text-danger-solid">
-                {showInfo ? utils.formatTokenDigit(0) : "*****"}
-              </span>{" "}
-              DFG and{" "}
-              <span className="text-success-solid">
-                {utils.formatTokenDigit(0)}
+                {showInfo
+                  ? utils.formatTokenDigit(
+                      formatUnits(balance, stakingToken?.token_decimal)
+                    )
+                  : "*****"}
               </span>{" "}
-              assets across <span className="text-secondary-solid">1</span>{" "}
-              networks available to stake.
-            </Typography>
-          ) : (
-            <Typography level="h3" fontWeight="lg" className="flex-1 pb-3">
-              Log in to see your available assets to stake
+              {stakingToken?.token_symbol} across{" "}
+              <span className="text-secondary-solid">1</span> networks available
+              to stake.
             </Typography>
           )}
           {isLoggedIn && (
@@ -88,13 +100,28 @@ const Overview = () => {
                   </Typography>
                   <Typography level="h6" fontWeight="lg">
                     {showInfo
-                      ? utils.formatUsdDigit(stakedAmount * tokenPrice)
+                      ? utils.formatUsdDigit(
+                          formatUnits(
+                            stakedAmount
+                              .mul(
+                                parseUnits(
+                                  String(stakingToken?.token_price || 1)
+                                )
+                              )
+                              .div(parseUnits("1")),
+                            stakingToken?.token_decimal
+                          )
+                        )
                       : "*********"}
                   </Typography>
                 </div>
                 <div className="flex items-center space-x-1 ml-2">
-                  <Image src="/ICY.png" alt="icy" width={20} height={20} />
-                  <Image src="/DFG.png" alt="dfg" width={20} height={20} />
+                  {stakingPools.map((each) => (
+                    <TokenImage
+                      key={each.guild_id}
+                      symbol={each.staking_token.token_symbol}
+                    />
+                  ))}
                 </div>
               </div>
               <div className="grid grid-cols-2 gap-6 items-center py-3">
@@ -104,7 +131,18 @@ const Overview = () => {
                   </Typography>
                   <Typography level="h6" fontWeight="lg" color="success">
                     {showInfo
-                      ? utils.formatUsdDigit(totalEarnedRewards * tokenPrice)
+                      ? utils.formatUsdDigit(
+                          formatUnits(
+                            totalEarnedRewards
+                              .mul(
+                                parseUnits(
+                                  String(rewardToken?.token_price || 1)
+                                )
+                              )
+                              .div(parseUnits("1")),
+                            rewardToken?.token_decimal
+                          )
+                        )
                       : "********"}
                   </Typography>
                 </div>
@@ -120,10 +158,21 @@ const Overview = () => {
             </div>
           )}
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-3 w-fit mx-auto gap-4 md:[&>*]:col-span-2 md:[&>*:last-child]:col-start-2 lg:[&>*]:col-span-1 lg:[&>*:last-child]:col-start-auto">
-          <FlexibleStakingCard hidden={isLoggedIn && !showInfo} />
-          <FixedStakingCard hidden={isLoggedIn && !showInfo} />
-          <NFTCard hidden={isLoggedIn && !showInfo} />
+        <div
+          className={clsx("grid grid-cols-1 mx-auto gap-4", {
+            "md:grid-cols-2": stakingPools.length >= 2,
+            "lg:grid-cols-3": stakingPools.length >= 3,
+          })}
+        >
+          {stakingPools.some((each) => each.type === "flexible") && (
+            <FlexibleStakingCard hidden={isLoggedIn && !showInfo} />
+          )}
+          {stakingPools.some((each) => each.type === "fixed") && (
+            <FixedStakingCard hidden={isLoggedIn && !showInfo} />
+          )}
+          {stakingPools.some((each) => each.type === "nft") && (
+            <NFTCard hidden={isLoggedIn && !showInfo} />
+          )}
         </div>
       </div>
       <Footer />
@@ -132,14 +181,9 @@ const Overview = () => {
 };
 
 export default function Page() {
-  const { isLoggedIn } = useLoginWidget();
-
   return (
     <main>
-      <TopBar
-        leftSlot={<Logo />}
-        rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
-      />
+      <Header />
       <Suspense>
         <Overview />
       </Suspense>

diff --git a/app/auth/github-successfully/page.tsx b/app/auth/github-successfully/page.tsx
@@ -1,13 +1,9 @@
 "use client";
 
-import { LoginPopover } from "@/components/login-popover";
-import { Logo } from "@/components/logo";
-import ProfileDropdown from "@/components/profile-dropdown";
-import { TopBar, Typography } from "@mochi-ui/core";
-import { useLoginWidget } from "@mochi-web3/login-widget";
 import { CheckCircleHalfColoredLine } from "@mochi-ui/icons";
 import { Suspense } from "react";
 import { useSearchParams } from "next/navigation";
+import { Header } from "@/components/header/header";
 
 const Auth = () => {
   const searchParams = useSearchParams();
@@ -29,14 +25,9 @@ const Auth = () => {
 };
 
 export default function Page() {
-  const { isLoggedIn } = useLoginWidget();
-
   return (
     <main>
-      <TopBar
-        leftSlot={<Logo />}
-        rightSlot={!isLoggedIn ? <LoginPopover /> : <ProfileDropdown />}
-      />
+      <Header />
       <Suspense>
         <Auth />
       </Suspense>

diff --git a/components/header/header.tsx b/components/header/header.tsx
@@ -0,0 +1,7 @@
+import { TopBar } from "@mochi-ui/core";
+import { LeftSlot } from "./left-slot";
+import { RightSlot } from "./right-slot";
+
+export const Header = () => {
+  return <TopBar leftSlot={<LeftSlot />} rightSlot={<RightSlot />} />;
+};
diff --git a/components/header/left-slot.tsx b/components/header/left-slot.tsx
@@ -0,0 +1,19 @@
+import { Button, Typography } from "@mochi-ui/core";
+import { Logo } from "../logo";
+import { DocumentStarSolid, SwapCircleSolid } from "@mochi-ui/icons";
+
+export const LeftSlot = () => {
+  return (
+    <div className="flex items-center">
+      <Logo />
+      <Button variant="link" color="neutral" className="ml-7">
+        <SwapCircleSolid className="w-4 h-4 text-text-icon-secondary" />
+        <Typography level="p8">Swap</Typography>
+      </Button>
+      <Button variant="link" color="neutral">
+        <DocumentStarSolid className="w-4 h-4 text-text-icon-secondary" />
+        <Typography level="p8">Take a look around</Typography>
+      </Button>
+    </div>
+  );
+};
diff --git a/components/header/right-slot.tsx b/components/header/right-slot.tsx
@@ -0,0 +1,27 @@
+import { IconButton } from "@mochi-ui/core";
+import { BellSolid } from "@mochi-ui/icons";
+import { useLoginWidget } from "@mochi-web3/login-widget";
+import { LoginPopover } from "../login-popover";
+import ProfileDropdown from "../profile-dropdown";
+
+export const RightSlot = () => {
+  const { isLoggedIn } = useLoginWidget();
+
+  if (!isLoggedIn) {
+    return <LoginPopover />;
+  }
+
+  return (
+    <div className="flex items-center space-x-3">
+      <IconButton
+        label="notification"
+        variant="outline"
+        color="neutral"
+        className="!p-1.5"
+      >
+        <BellSolid className="w-5 h-5" />
+      </IconButton>
+      <ProfileDropdown />
+    </div>
+  );
+};
diff --git a/components/logo.tsx b/components/logo.tsx
@@ -1,9 +1,10 @@
 import { ROUTES } from "@/constants/routes";
+import { Typography } from "@mochi-ui/core";
 import Link from "next/link";
 
 export const Logo = () => {
   return (
-    <Link href={ROUTES.HOME}>
+    <Link href={ROUTES.HOME} className="flex items-center space-x-2">
       <svg
         width="32"
         height="32"
@@ -31,6 +32,14 @@ export const Logo = () => {
           />
         </defs>
       </svg>
+      <span className="flex items-center">
+        <Typography level="p5" className="uppercase font-black">
+          tono
+        </Typography>
+        <Typography level="p5" className="font-black text-[#FFC500]">
+          .
+        </Typography>
+      </span>
     </Link>
   );
 };
diff --git a/components/overview/Card.tsx b/components/overview/Card.tsx
@@ -42,7 +42,7 @@ export const Card = (props: Props) => {
   return (
     <div
       className={clsx(
-        "rounded-2xl relative bg-background-surface flex flex-col",
+        "rounded-2xl relative bg-background-surface flex flex-col w-full max-w-sm justify-self-center",
         isBoosting
           ? "border-2 border-transparent bg-clip-padding before:absolute before:z-[-1] before:inset-0 before:-m-0.5 before:bg-gradient-to-br before:from-[#1570EF] before:to-[#F00C88] before:rounded-2xl"
           : "border border-neutral-outline-border p-[1px]"