Merge branch 'main' of https://github.com/blockworks-foundation/lev-s…

…take-sol
blockworks-foundation · Aug 27, 2024 · 48bc460 · 48bc460
2 parents c7e5faf + a7df4f3
commit 48bc460
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 9 deletions.
diff --git a/components/DepositForm.tsx b/components/DepositForm.tsx
@@ -297,7 +297,7 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
                 })}
               </div>
             ) : ipAllowed ? (
-              `Boost! ${inputAmount} ${formatTokenSymbol(selectedToken)}`
+              `Add ${inputAmount} ${formatTokenSymbol(selectedToken)}`
             ) : (
               'Country not allowed'
             )}

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -57,6 +57,12 @@ const Footer = () => {
             >
               Stats
             </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/yield-calculator"
+            >
+              Yield calculator
+            </Link>
           </div>
           <div className="col-span-4 space-y-3 md:col-span-1">
             <h4>Important Info</h4>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -31,7 +31,11 @@ const Layout = ({ children }: { children: ReactNode }) => {
   const { asPath } = useRouter()
 
   const isDashboardLayout = useMemo(() => {
-    return asPath === '/dashboard' || asPath === '/stats'
+    return (
+      asPath === '/dashboard' ||
+      asPath === '/stats' ||
+      asPath === '/yield-calculator'
+    )
   }, [asPath])
 
   const [mounted, setMounted] = useState(false)
@@ -48,7 +52,11 @@ const Layout = ({ children }: { children: ReactNode }) => {
           {isDashboardLayout ? (
             <>
               <TopBar />
-              <div className="mx-auto max-w-3xl px-6 pb-20 md:pb-12 lg:px-12">
+              <div
+                className={`mx-auto ${
+                  asPath !== '/yield-calculator' ? 'max-w-3xl' : ''
+                } px-6 pb-20 md:pb-12 lg:px-12`}
+              >
                 {children}
               </div>
             </>

diff --git a/components/Stake.tsx b/components/Stake.tsx
@@ -79,7 +79,7 @@ const Stake = () => {
         >
           <div className="mb-4 flex items-center justify-between">
             <div className="h-10 w-10" />
-            <h2>Select token to Boost!</h2>
+            <h2>Select token to add</h2>
             <IconButton
               onClick={() => setShowTokenSelect(false)}
               hideBg

diff --git a/components/TopBar.tsx b/components/TopBar.tsx
@@ -52,7 +52,11 @@ const TopBar = () => {
               path="/stats"
               text="Stats"
             />
-            {/* <NavLink active={pathname === '/faqs'} path="/faqs" text="FAQs" /> */}
+            <NavLink
+              active={pathname === '/yield-calculator'}
+              path="/yield-calculator"
+              text="Calculator"
+            />
           </>
         ) : null}
       </div>
@@ -113,7 +117,7 @@ const MenuPanel = ({
   return (
     <>
       <div
-        className={`fixed right-0 top-0 z-40 h-screen w-[97%] overflow-hidden bg-th-bkg-2 transition duration-300 ease-in-out ${
+        className={`fixed right-0 top-0 z-40 h-screen w-[97%] overflow-hidden bg-th-primary-1 transition duration-300 ease-in-out ${
           showMenu ? 'translate-x-0' : 'translate-x-full'
         }`}
       >
@@ -130,7 +134,15 @@ const MenuPanel = ({
             onClick={closeOnClick}
             shallow
           >
-            Boost!
+            Home
+          </Link>
+          <Link
+            className="block text-xl font-bold text-th-fgd-1"
+            href="/dashboard"
+            onClick={closeOnClick}
+            shallow
+          >
+            Dashboard
           </Link>
           <Link
             className="block text-xl font-bold text-th-fgd-1"
@@ -142,11 +154,11 @@ const MenuPanel = ({
           </Link>
           <Link
             className="block text-xl font-bold text-th-fgd-1"
-            href="/faqs"
+            href="/yield-calculator"
             onClick={closeOnClick}
             shallow
           >
-            FAQs
+            Yield calculator
           </Link>
         </div>
       </div>

diff --git a/pages/yield-calculator.tsx b/pages/yield-calculator.tsx
@@ -0,0 +1,32 @@
+import YieldCalculator from '@components/home/YieldCalculator'
+import { NextPage } from 'next'
+import Link from 'next/link'
+
+const YieldCalc: NextPage = () => {
+  return (
+    <div className="mx-auto w-full max-w-5xl">
+      <div className="px-6">
+        <h2 className="text-shadow mb-2 px-6 text-center text-3xl text-th-button-text md:text-5xl xl:px-0">
+          Yield calculator
+        </h2>
+        <p className="mb-6 text-center text-base text-th-fgd-2">
+          Compare native liquid staking yields with Yield Fan to see the extra
+          returns you could earn.
+        </p>
+      </div>
+      <YieldCalculator />
+      <div className="mx-auto max-w-3xl px-6 pt-6">
+        <p className="text-center text-sm text-th-fgd-4">
+          This calculator is for educational purposes only. It assumes rates and
+          prices remain constant over time. Take the time to understand the{' '}
+          <Link className="underline md:hover:no-underline" href="/risks">
+            risks
+          </Link>{' '}
+          before depositing any funds.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default YieldCalc