Merge branch 'develop' into preview

consolelabs · Apr 12, 2024 · 13d4741 · 13d4741
2 parents 1e9a5ad + cc0f7a3
commit 13d4741
Show file tree

Hide file tree

Showing 16 changed files with 536 additions and 397 deletions.
diff --git a/app/[server]/page.tsx b/app/[server]/page.tsx
@@ -18,7 +18,7 @@ import { Header } from "@/components/header/header";
 
 const Overview = () => {
   const { isLoggedIn } = useLoginWidget();
-  const { stakingPools, fetchStakingPools } = useTokenStaking();
+  const { stakingPools } = useTokenStaking();
   const {
     balance,
     stakedAmount,
@@ -28,10 +28,6 @@ const Overview = () => {
   } = useFlexibleStaking();
   const [showInfo, setShowInfo] = useState(false);
 
-  useEffect(() => {
-    fetchStakingPools();
-  }, [fetchStakingPools]);
-
   useEffect(() => {
     if (!!balance && !showInfo) {
       setShowInfo(true);
@@ -158,7 +154,7 @@ const Overview = () => {
             </div>
           )}
         </div>
-        {/* <div
+        <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,
@@ -173,7 +169,7 @@ const Overview = () => {
           {stakingPools.some((each) => each.type === "nft") && (
             <NFTCard hidden={isLoggedIn && !showInfo} />
           )}
-        </div> */}
+        </div>
       </div>
       <Footer />
     </div>

diff --git a/app/globals.css b/app/globals.css
@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.text-tono-gradient {
-  @apply text-transparent uppercase bg-clip-text bg-gradient-to-r from-[#F0B5B3] via-[#E47673] to-[#F0B5B3];
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,6 +6,8 @@ import { LoginWidgetProvider } from "@mochi-web3/login-widget";
 import { Platform } from "@consolelabs/mochi-formatter";
 import { AUTH_TELEGRAM_ID, MOCHI_PROFILE_API } from "@/envs";
 import { Toaster } from "@mochi-ui/core";
+import { useTokenStaking } from "@/store/token-staking";
+import { useEffect } from "react";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,6 +16,12 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const { fetchStakingPools } = useTokenStaking();
+
+  useEffect(() => {
+    fetchStakingPools();
+  }, [fetchStakingPools]);
+
   return (
     <html lang="en">
       <body className={inter.className}>

diff --git a/app/verify/page.tsx b/app/verify/page.tsx
@@ -8,7 +8,6 @@ import {
   ModalContent,
   ModalOverlay,
   ModalPortal,
-  Typography,
 } from "@mochi-ui/core";
 import { useDisclosure } from "@dwarvesf/react-hooks";
 import { LoginWidget } from "@mochi-web3/login-widget";
@@ -18,7 +17,7 @@ import { API } from "@/constants/api";
 import { CheckCircleHalfColoredLine } from "@mochi-ui/icons";
 
 const Verify = () => {
-  const { isOpen, onOpenChange } = useDisclosure();
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const searchParams = useSearchParams();
   const [loading, setLoading] = useState(false);
   const [verified, setVerified] = useState(false);
@@ -62,16 +61,13 @@ const Verify = () => {
 
   return (
     <div className="w-full min-h-[calc(100vh-56px)] flex flex-col items-center justify-center text-center px-4 space-y-6">
-      <Typography
-        level="h4"
-        className="mb-4 text-center uppercase !font-black text-tono-gradient"
-      >
+      <p className="text-2xl sm:text-3.5xl sm:leading-9 font-semibold text-text-primary">
         Verify your wallet
-      </Typography>
-      <Typography level="p3" className="mb-3 text-center max-w-md">
+      </p>
+      <p className="text-base sm:text-lg text-text-primary max-w-md">
         Connect your wallet to verify and get full access to Tono with more
         exclusive privileges.
-      </Typography>
+      </p>
       <div>
         <Modal open={isOpen} onOpenChange={onOpenChange}>
           <ModalPortal>
@@ -90,7 +86,7 @@ const Verify = () => {
                   signature,
                   platform,
                 }) => {
-                  if (!code || loading) return;
+                  if (loading) return;
                   setLoading(true);
                   const payload = {
                     code,
@@ -127,7 +123,16 @@ const Verify = () => {
             </ModalContent>
           </ModalPortal>
         </Modal>
-        <Button color="primary" onClick={() => onOpenChange(true)}>
+        <Button
+          color="primary"
+          onClick={() => {
+            if (!code) {
+              setError("code not found");
+              return;
+            }
+            onOpen();
+          }}
+        >
           Verify
         </Button>
       </div>

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,38 +1,29 @@
-import { SOCIAL_LINKS } from "@/constants/links";
-import { Logo, Footer as FooterCore } from "@mochi-ui/core";
-import { X, Discord, Telegram } from "@mochi-ui/icons";
+import { Typography } from "@mochi-ui/core";
+import { X, Discord } from "@mochi-ui/icons";
 
 export const Footer = () => {
   return (
-    <FooterCore
-      className="[&>*]:px-4 lg:[&>*]:px-8"
-      copyrightText="Copyright © 2024 Tono, All rights reserved"
-      logo={<Logo className="!h-8 !w-8" />}
-      nav={[
-        {
-          title: "Developers",
-          links: [
-            { href: SOCIAL_LINKS.DOCUMENT, text: "Documentation" },
-            { href: SOCIAL_LINKS.GITHUB, text: "GitHub" },
-          ],
-        },
-        {
-          title: "Resources",
-          links: [{ href: SOCIAL_LINKS.CHANGELOG, text: "Changelog" }],
-        },
-        {
-          title: "Company",
-          links: [
-            { href: SOCIAL_LINKS.DISCORD, text: "Contact" },
-            { href: SOCIAL_LINKS.TWITTER, text: "Twitter" },
-          ],
-        },
-      ]}
-      social={[
-        { href: SOCIAL_LINKS.TWITTER, Icon: X, title: "X" },
-        { href: SOCIAL_LINKS.DISCORD, Icon: Discord, title: "Discord" },
-        { href: SOCIAL_LINKS.TELEGRAM, Icon: Telegram, title: "Telegram" },
-      ]}
-    />
+    <div className="px-4 py-6 border-t border-divider">
+      <div className="flex items-center justify-between w-full max-w-6xl mx-auto">
+        <Typography level="p6" className="text-text-tertiary">
+          Copyright © 2024 Tono, All rights reserved.
+        </Typography>
+        <div className="flex items-center space-x-4">
+          <Typography level="p6" className="text-text-tertiary">
+            Docs
+          </Typography>
+          <Typography level="p6" className="text-text-tertiary">
+            GitHub
+          </Typography>
+          <Typography level="p6" className="text-text-tertiary">
+            Support
+          </Typography>
+          <div className="flex items-center space-x-2">
+            <Discord className="w-4 h-4 text-text-tertiary" />
+            <X className="w-4 h-4 text-text-tertiary" />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
diff --git a/components/header/left-slot.tsx b/components/header/left-slot.tsx
@@ -1,19 +1,24 @@
 import { Button, Typography } from "@mochi-ui/core";
 import { Logo } from "../logo";
 import { DocumentStarSolid, SwapCircleSolid } from "@mochi-ui/icons";
+import { useLoginWidget } from "@mochi-web3/login-widget";
 
 export const LeftSlot = () => {
+  const { isLoggedIn } = useLoginWidget();
+
   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>
+      {isLoggedIn && (
+        <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/network-button.tsx b/components/header/network-button.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@mochi-ui/core";
+import { ChevronDownLine } from "@mochi-ui/icons";
+import { TokenImage } from "../token-image";
+import { useWalletNetwork } from "@/hooks/useWalletNetwork";
+
+export const NetworkButton = () => {
+  const { isConnected, isCorrectNetwork, changeNetwork } = useWalletNetwork({
+    chain: {
+      id: 84532,
+      name: "Base",
+      rpc: "https://sepolia.base.org",
+      currency: "ETH",
+    },
+  });
+
+  if (!isConnected) return null;
+
+  return isCorrectNetwork ? (
+    <Button variant="link" color="neutral" size="sm">
+      <TokenImage symbol="base" size={22} />
+      Base
+      <ChevronDownLine className="w-4 h-4 text-text-icon-secondary" />
+    </Button>
+  ) : (
+    <Button variant="link" color="neutral" size="sm" onClick={changeNetwork}>
+      Switch to Base
+      <ChevronDownLine className="w-4 h-4 text-text-icon-secondary" />
+    </Button>
+  );
+};
diff --git a/components/header/right-slot.tsx b/components/header/right-slot.tsx
@@ -3,6 +3,7 @@ import { BellSolid } from "@mochi-ui/icons";
 import { useLoginWidget } from "@mochi-web3/login-widget";
 import { LoginPopover } from "../login-popover";
 import ProfileDropdown from "../profile-dropdown";
+import { NetworkButton } from "./network-button";
 
 export const RightSlot = () => {
   const { isLoggedIn } = useLoginWidget();
@@ -13,6 +14,7 @@ export const RightSlot = () => {
 
   return (
     <div className="flex items-center space-x-3">
+      <NetworkButton />
       <IconButton
         label="notification"
         variant="outline"

diff --git a/components/overview/FlexibleStakingCard.tsx b/components/overview/FlexibleStakingCard.tsx
@@ -15,7 +15,7 @@ import { useDisclosure } from "@dwarvesf/react-hooks";
 import { MinusLine, PlusCircleSolid, PlusLine, Spinner } from "@mochi-ui/icons";
 import { FlexibleStakeModal } from "../stake/flexible/flexible-stake-modal";
 import { useFlexibleStaking } from "@/store/flexible-staking";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { Countdown } from "./Countdown";
 import { retry } from "@/utils/retry";
 import { formatUnits, parseUnits } from "ethers/lib/utils";
@@ -132,18 +132,6 @@ export const FlexibleStakingCard = (props: Props) => {
     setIsClient(true);
   }, []);
 
-  // get connected wallet address or all wallet addresses
-  const addresses = useMemo(
-    () =>
-      wallets.some((w) => w.connectionStatus === "connected")
-        ? [
-            wallets.find((w) => w.connectionStatus === "connected")?.address ||
-              "",
-          ]
-        : wallets.map((w) => w.address),
-    [wallets]
-  );
-
   useEffect(() => {
     initializeValues();
   }, [initializeValues]);