rework rendering and add landing page

blockworks-foundation · Aug 11, 2024 · 8fd8f89 · 8fd8f89
1 parent 1f9aee8
commit 8fd8f89
Show file tree

Hide file tree

Showing 32 changed files with 1,299 additions and 171 deletions.
diff --git a/components/HomePage.tsx → components/DashboardPage.tsx b/components/HomePage.tsx → components/DashboardPage.tsx
@@ -10,7 +10,7 @@ import { BOOST_ACCOUNT_PREFIX } from 'utils/constants'
 
 const set = mangoStore.getState().set
 
-const HomePage = () => {
+const DashboardPage = () => {
   const activeTab = mangoStore((s) => s.activeTab)
   const selectedToken = mangoStore((s) => s.selectedToken)
   const { positions } = usePositions()
@@ -60,7 +60,7 @@ const HomePage = () => {
   )
 }
 
-export default HomePage
+export default DashboardPage
 
 const TabContent = ({
   activeTab,

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -2,59 +2,99 @@ import Link from 'next/link'
 import DiscordIcon from './icons/DiscordIcon'
 import { XIcon } from './icons/XIcon'
 import MangoMade from './icons/MangoMade'
+import Image from 'next/image'
+import { ZigZagRepeatLine } from './Stake'
 
 const Footer = () => {
   return (
-    <>
-      <div className="my-6 flex items-center justify-between rounded-xl border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-4">
-        <a
-          className="text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-2"
-          href="https://mango.markets"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <MangoMade className="h-4 w-auto" />
-        </a>
-        <div className="flex items-center space-x-4">
-          <a
-            className="text-th-fgd-1 md:hover:text-th-fgd-3"
-            href="https://discord.gg/2uwjsBc5yw"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <DiscordIcon className="h-5 w-5" />
-          </a>
+    <div className="bg-th-bkg-1">
+      <div className="mx-auto max-w-[1440px]">
+        <div className="grid grid-cols-4 gap-4 p-8">
+          <div className="col-span-4 md:col-span-1">
+            <Link className="mb-3 block focus:outline-none" href="/">
+              <Image
+                src="/logos/yieldfan.png"
+                alt="Logo"
+                height={48}
+                width={48}
+              />
+            </Link>
+            <p className="mb-4 text-th-fgd-4">
+              Multiply your yield on
+              <br />
+              Solana&apos;s best yield farm.
+            </p>
+            <div className="flex items-center space-x-4">
+              <a
+                className="text-th-fgd-1 md:hover:text-th-fgd-3"
+                href="https://discord.gg/2uwjsBc5yw"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <DiscordIcon className="h-5 w-5" />
+              </a>
+              <a
+                className="text-th-fgd-1 md:hover:text-th-fgd-3"
+                href="https://x.com/yieldfan"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <XIcon className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+          <div className="col-span-4 space-y-3 md:col-span-1">
+            <h4>Get started</h4>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/dashboard"
+            >
+              Dashboard
+            </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/stats"
+            >
+              Stats
+            </Link>
+          </div>
+          <div className="col-span-4 space-y-3 md:col-span-1">
+            <h4>Important Info</h4>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/risks"
+            >
+              Risks
+            </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/terms-of-use"
+            >
+              Terms of Use
+            </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/privacy-policy"
+            >
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+        <div className="px-6">
+          <ZigZagRepeatLine />
+        </div>
+        <div className="flex justify-center px-6 py-4">
           <a
-            className="text-th-fgd-1 md:hover:text-th-fgd-3"
-            href="https://x.com/yieldfan"
+            className="text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-2"
+            href="https://mango.markets"
+            rel="noreferrer noopener"
             target="_blank"
-            rel="noopener noreferrer"
           >
-            <XIcon className="h-5 w-5" />
+            <MangoMade className="h-4 w-auto" />
           </a>
         </div>
       </div>
-      <div className="flex items-center justify-center space-x-4">
-        <Link
-          className="font-bold text-th-fgd-1 md:hover:text-th-fgd-3"
-          href="/risks"
-        >
-          Risks
-        </Link>
-        <Link
-          className="font-bold text-th-fgd-1 md:hover:text-th-fgd-3"
-          href="/terms-of-use"
-        >
-          Terms of Use
-        </Link>
-        <Link
-          className="font-bold text-th-fgd-1 md:hover:text-th-fgd-3"
-          href="/privacy-policy"
-        >
-          Privacy Policy
-        </Link>
-      </div>
-    </>
+    </div>
   )
 }
 

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -20,6 +20,9 @@ import { useRouter } from 'next/router'
 import Modal from './shared/Modal'
 import Button from './shared/Button'
 import Image from 'next/image'
+import ThemeToggle from './ThemeToggle'
+import ButtonLink from './shared/ButtonLink'
+import Link from 'next/link'
 
 export const NON_RESTRICTED_JURISDICTION_KEY = 'non-restricted-jurisdiction-0.1'
 
@@ -29,10 +32,15 @@ const termsLastUpdated = 1679441610978
 const Layout = ({ children }: { children: ReactNode }) => {
   const { ipCountry, loadingIpCountry } = useIpAddress()
   const themeData = mangoStore((s) => s.themeData)
+  const { asPath } = useRouter()
 
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => setMounted(true), [])
-  if (!mounted) return null
+  const isDashboardLayout = useMemo(() => {
+    return asPath === '/dashboard' || asPath === '/stats'
+  }, [asPath])
+
+  // const [mounted, setMounted] = useState(false)
+  // useEffect(() => setMounted(true), [])
+  // if (!mounted) return null
 
   return (
     <main
@@ -42,11 +50,36 @@ const Layout = ({ children }: { children: ReactNode }) => {
       <div className={`relative min-h-screen`}>
         {/* <div className="border-th-primary-4 from-th-primary-3 to-th-primary-2 absolute bottom-0 h-44 w-full border-b-[20px] bg-gradient-to-b" /> */}
         <div className="relative z-10">
-          <TopBar />
-          <div className="mx-auto max-w-3xl px-6 pb-20 md:pb-12 lg:px-12">
-            {children}
-            <Footer />
-          </div>
+          {isDashboardLayout ? (
+            <>
+              <TopBar />
+              <div className="mx-auto max-w-3xl px-6 pb-20 md:pb-12 lg:px-12">
+                {children}
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="mx-auto flex max-w-[1440px] items-center justify-between px-4 py-3 md:px-6 md:py-4">
+                <Link href="/" shallow={true}>
+                  <Image
+                    src="/logos/yieldfan.png"
+                    alt="Logo"
+                    height={48}
+                    width={48}
+                  />
+                </Link>
+                <div className="flex items-center space-x-4">
+                  <ThemeToggle />
+                  <ButtonLink path="/dashboard" size="small">
+                    Launch App
+                  </ButtonLink>
+                </div>
+              </div>
+              {children}
+            </>
+            // <div className="mx-auto max-w-[1440px]">{children}</div>
+          )}
+          <Footer />
           <DeployRefreshManager />
           <TermsOfUse />
           <YieldFansIntro />
@@ -99,6 +132,10 @@ const YieldFansIntro = () => {
     false,
   )
 
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
   return !yieldFansIntro ? (
     <Modal isOpen={!yieldFansIntro} onClose={() => setYieldFansIntro(true)}>
       <div className="flex flex-col items-center">

diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
 
 type Values = string | number
 
@@ -52,12 +53,25 @@ const NavTabs = <T extends Values>({
 
 export default NavTabs
 
-const ZigZagLine = ({ className }: { className?: string }) => {
+export const ZigZagLine = ({
+  className,
+  reverse,
+}: {
+  className?: string
+  reverse?: boolean
+}) => {
   const { theme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
   return (
     <div
       className={`h-2 ${
         theme === 'Light'
+          ? reverse
+            ? `bg-[url('/images/zigzag-dark.svg')]`
+            : `bg-[url('/images/zigzag.svg')]`
+          : reverse
           ? `bg-[url('/images/zigzag.svg')]`
           : `bg-[url('/images/zigzag-dark.svg')]`
       } bg-contain  bg-no-repeat ${className}`}

diff --git a/components/Positions.tsx b/components/Positions.tsx
@@ -28,8 +28,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import UnstakeForm from './UnstakeForm'
 import StakeForm from './StakeForm'
 import DespositForm from './DepositForm'
-import { useTheme } from 'next-themes'
 import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions'
+import { ZigZagRepeatLine } from './Stake'
 
 const set = mangoStore.getState().set
 
@@ -150,7 +150,6 @@ const PositionItem = ({
   borrowBank: Bank | undefined
 }) => {
   const { connected } = useWallet()
-  const { theme } = useTheme()
   const { jlpGroup, lstGroup } = useMangoGroup()
   const { stakeBalance, bank, pnl, acct, solPnl } = position
   const [showEditLeverageModal, setShowEditLeverageModal] = useState(false)
@@ -178,7 +177,6 @@ const PositionItem = ({
 
   const leverage = useMemo(() => {
     if (!acct || !bank) return 1
-    const isJlpGroup = bank.name === 'JLP' || bank.name === 'USDC'
     const group = isJlpGroup ? jlpGroup : lstGroup
     if (!group) return 1
     const accountValue = toUiDecimalsForQuote(acct.getEquity(group).toNumber())
@@ -260,13 +258,7 @@ const PositionItem = ({
           </Button>
         )}
       </div>
-      <div
-        className={`bg-x-repeat h-2 w-full ${
-          theme === 'Light'
-            ? `bg-[url('/images/zigzag-repeat.svg')]`
-            : `bg-[url('/images/zigzag-repeat-dark.svg')]`
-        } bg-contain opacity-20`}
-      />
+      <ZigZagRepeatLine />
       <div className="grid grid-cols-1 gap-4 pt-6 sm:grid-cols-2">
         <div>
           <p className="mb-1 text-th-fgd-4">Position Size</p>

diff --git a/components/Stake.tsx b/components/Stake.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import StakeForm, { MIN_SOL_BALANCE_FOR_ACCOUNT } from '@components/StakeForm'
 import mangoStore from '@store/mangoStore'
 import { getStakableTokensDataForTokenName } from 'utils/tokens'
@@ -33,7 +33,6 @@ export const SOL_YIELD = [
 ]
 
 const Stake = () => {
-  const { theme } = useTheme()
   const { connected } = useWallet()
   const { positions } = usePositions()
   const walletTokens = mangoStore((s) => s.wallet.tokens)
@@ -115,17 +114,9 @@ const Stake = () => {
                 <div className="flex flex-col items-center">
                   <div className="w-full pb-6 text-center md:pb-8">
                     <h1 className="mb-1">Welcome yield fan 👋</h1>
-                    <p>
-                      It&apos;s time to leverage up your liquid staking yield.
-                    </p>
+                    <p>It&apos;s time to multiply your liquid staking yield.</p>
                   </div>
-                  <div
-                    className={`bg-x-repeat h-2 w-full ${
-                      theme === 'Light'
-                        ? `bg-[url('/images/zigzag-repeat.svg')]`
-                        : `bg-[url('/images/zigzag-repeat-dark.svg')]`
-                    } bg-contain opacity-20`}
-                  />
+                  <ZigZagRepeatLine />
                 </div>
                 <div className="space-y-3 pt-6 md:pt-8">
                   <h2 className="text-center text-lg font-normal">
@@ -205,3 +196,19 @@ const Stake = () => {
 }
 
 export default Stake
+
+export const ZigZagRepeatLine = () => {
+  const { theme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+  return (
+    <div
+      className={`bg-x-repeat h-2 w-full ${
+        theme === 'Light'
+          ? `bg-[url('/images/zigzag-repeat.svg')]`
+          : `bg-[url('/images/zigzag-repeat-dark.svg')]`
+      } bg-contain opacity-20`}
+    />
+  )
+}