poolshark-protocol · obscur0x · Jan 18, 2024 · Jan 18, 2024 · Jan 18, 2024
diff --git a/src/components/Buttons/CompoundOFinButton.tsx b/src/components/Buttons/CompoundOFinButton.tsx
@@ -0,0 +1,16 @@
+
+
+  export default function CompoundOFinButton({
+}) {
+
+
+  return (
+    <>
+      <button
+        className="w-full py-4 mx-auto disabled:cursor-not-allowed cursor-pointer flex items-center justify-center text-center transition rounded-full  border border-main bg-main1 uppercase text-sm disabled:opacity-50 hover:opacity-80"
+      >
+        COMPOUND
+      </button>
+    </>
+  );
+}
diff --git a/src/components/Buttons/StakeFinButton.tsx b/src/components/Buttons/StakeFinButton.tsx
@@ -0,0 +1,17 @@
+
+
+  export default function StakeFinButton({
+  }) {
+
+
+    return (
+      <>
+        <button
+          className="w-full py-4 mx-auto disabled:cursor-not-allowed cursor-pointer flex items-center justify-center text-center transition rounded-full  border border-main bg-main1 uppercase text-sm disabled:opacity-50 hover:opacity-80"
+        >
+          STAKE
+        </button>
+      </>
+    );
+  }
+
diff --git a/src/components/Buttons/UnstakeFinButton.tsx b/src/components/Buttons/UnstakeFinButton.tsx
@@ -0,0 +1,17 @@
+
+
+  export default function UnstakeFinButton({
+  }) {
+
+
+    return (
+      <>
+        <button
+          className="w-full py-4 mx-auto disabled:cursor-not-allowed cursor-pointer flex items-center justify-center text-center transition rounded-full  border border-main bg-main1 uppercase text-sm disabled:opacity-50 hover:opacity-80"
+        >
+          UNSTAKE
+        </button>
+      </>
+    );
+  }
+
diff --git a/src/components/Icons/Earn.jsx b/src/components/Icons/Earn.jsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+const Earn = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M7.5 2c-1.604 0-3.1.235-4.23.646l-.106.039c-.521.199-1.006.453-1.384.778C1.38 3.807 1 4.323 1 5v1.5c0 .677.38 1.193.78 1.537.403.346.928.613 1.49.817 1.13.411 2.626.646 4.23.646.232 0 .462-.005.689-.015.14-.006.21-.009.272-.028a.464.464 0 0 0 .154-.08c.053-.04.106-.109.212-.247.214-.277.442-.505.65-.683.652-.561 1.42-.93 2.109-1.18.532-.194 1.118-.351 1.733-.472.253-.05.38-.074.466-.134a.484.484 0 0 0 .173-.21C14 6.355 14 6.233 14 5.988V5c0-.677-.38-1.193-.78-1.537-.403-.346-.928-.613-1.49-.817C10.6 2.235 9.105 2 7.5 2Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M8 11.992a.496.496 0 0 0-.5-.492c-1.604 0-3.1-.235-4.23-.646-.562-.204-1.087-.47-1.49-.817a2.59 2.59 0 0 1-.415-.448.208.208 0 0 0-.168-.089.197.197 0 0 0-.197.197V11.5c0 .677.38 1.193.78 1.537.403.346.928.613 1.49.817 1.13.411 2.626.646 4.23.646h.012A.508.508 0 0 0 8 13.992v-2ZM8 16.992a.497.497 0 0 0-.5-.492c-1.604 0-3.1-.235-4.23-.646-.562-.204-1.087-.47-1.49-.817a2.587 2.587 0 0 1-.415-.448.208.208 0 0 0-.168-.089.197.197 0 0 0-.197.197V17c0 .677.38 1.193.78 1.537.403.346.928.613 1.49.817C4.4 19.765 5.895 20 7.5 20h.03c.32-.001.525-.228.496-.546l-.008-.086A3.845 3.845 0 0 1 8 19v-2.008Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14.207 8.169C14.923 8.059 15.698 8 16.5 8c1.604 0 3.1.235 4.23.646l.106.039c.521.199 1.006.453 1.384.778.4.344.78.86.78 1.537v2c0 .677-.38 1.193-.78 1.537-.403.346-.928.613-1.49.817-1.13.411-2.626.646-4.23.646-1.604 0-3.1-.235-4.23-.646-.562-.204-1.087-.47-1.49-.817-.4-.344-.78-.86-.78-1.537v-2c0-.677.38-1.193.78-1.537.403-.346.928-.613 1.49-.817.07-.026.142-.05.215-.075a10.432 10.432 0 0 1 1.722-.402Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M10.197 16a.197.197 0 0 0-.197.197V18.5c0 .677.38 1.193.78 1.537.403.346.928.613 1.49.817 1.13.411 2.626.646 4.23.646 1.604 0 3.1-.235 4.23-.646.562-.204 1.087-.47 1.49-.817.4-.344.78-.86.78-1.537v-2.303a.197.197 0 0 0-.197-.197.208.208 0 0 0-.168.089 2.587 2.587 0 0 1-.415.448c-.403.346-.928.613-1.49.817-1.13.411-2.626.646-4.23.646-1.604 0-3.1-.235-4.23-.646-.562-.204-1.087-.47-1.49-.817a2.587 2.587 0 0 1-.415-.448.208.208 0 0 0-.168-.089Z"
+    />
+  </svg>
+)
+export default Earn
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -7,6 +7,7 @@ import Trade from "./Icons/TradeIcon";
 import Range from "./Icons/RangeIcon";
 import Cover from "./Icons/CoverIcon";
 import { useConfigStore } from "../hooks/useConfigStore";
+import Earn from "./Icons/Earn";
 
 interface NavOptions {
   create?: boolean;
@@ -100,6 +101,18 @@ export default function Navbar({ create, setCreate }: NavOptions) {
               ) : (
                 <></>
               )}
+              <Link href="/earn">
+                <div
+                  className={
+                    router.pathname.includes("/earn")
+                      ? "bg-main1 border border-main text-main2 transition-all py-1.5 px-5 md:px-4 text-sm flex items-center cursor-pointer gap-x-1.5 text-[13px]"
+                      : "text-grey1 border border-transparent transition-all py-1.5 px-5 md:px-4 text-sm flex items-center cursor-pointer gap-x-1.5 text-[13px]"
+                  }
+                >
+                  <Earn />
+                  EARN
+                </div>
+              </Link>
             </div>
           </div>
           <div className="w-full flex justify-end items-center gap-x-4">
@@ -172,6 +185,18 @@ export default function Navbar({ create, setCreate }: NavOptions) {
             ) : (
               <></>
             )}
+            <Link href="/earn">
+                <div
+                  className={
+                    router.pathname.includes("/earn")
+                    ? "bg-main1 border border-main text-main2 transition-all py-1.5 px-3 text-sm flex items-center cursor-pointer gap-x-0.5 text-[11px]"
+                    : "text-grey1 border border-transparent transition-all py-1.5 px-3 text-sm flex items-center cursor-pointer gap-x-0.5 text-[11px]"
+                  }
+                >
+                  <Earn />
+                  EARN
+                </div>
+              </Link>
           </div>
         </div>
       </div>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -56,7 +56,7 @@ const whitelist = [
   "0x1DcF623EDf118E4B21b4C5Dc263bb735E170F9B8",
   "0x9dA9409D17DeA285B078af06206941C049F692Dc",
   "0xBd5db4c7D55C086107f4e9D17c4c34395D1B1E1E",
-  "0x73CE13ac285569738bc499ec711bDAa899725d37", // olamide
+  "0x73CE13ac285569738bc499ec711bDAa899725d37", //olamide
   "0xE48870dBBdC4abde7Ed8682254b9fb53270F79d2", // mrmasa
 ];
 

diff --git a/src/pages/earn/index.tsx b/src/pages/earn/index.tsx
@@ -0,0 +1,192 @@
+import Navbar from "../../components/Navbar";
+import InfoIcon from "../../components/Icons/InfoIcon";
+import { useState } from "react";
+import Image from "next/image";
+import useInputBox from "../../hooks/useInputBox";
+import StakeFinButton from "../../components/Buttons/StakeFinButton";
+import UnstakeFinButton from "../../components/Buttons/UnstakeFinButton";
+import CompoundOFinButton from "../../components/Buttons/CompoundOFinButton";
+
+export default function Earn() {
+  const [stakingTab, setStakingTab] = useState("stake");
+
+  return (
+    <div className="bg-black min-h-screen  ">
+      <Navbar />
+      <div className="pt-10 pb-32 md:pb-0 text-white relative min-h-[calc(100vh-76px)] container mx-auto md:px-0 px-3">
+        <div className="flex lg:flex-row flex-col gap-10">
+          <div className="border border-grey rounded-[4px] w-full">
+            <div className=" p-6">
+              <h1 className="text-lg uppercase">$FIN Staking</h1>
+              <p className="text-sm text-grey3 font-light mt-4 mb-10">
+                Lorem ipsum dolor sit amet consectetur adipiscing elit nascetur
+                purus, habitant mattis cum eros senectus fusce suscipit tempor,
+                arcu cubilia porttitor odio natoque fringilla eget in.
+                <br />
+                <br />
+                Dictumst fermentum morbi mollis aliquam nostra vehicula nulla
+                leo ridiculus, habitant taciti phasellus primis mi auctor ac.
+                habitant taciti phasellus primis mi auctor ac.
+              </p>
+              <a
+                href="https://docs.poolsharks.io/overview/range-pools/"
+                target="_blank"
+                rel="noreferrer"
+                className="text-grey3 underline text-sm flex items-center gap-x-2 font-light"
+              >
+                <InfoIcon />
+                Read More
+              </a>
+            </div>
+          </div>
+          <div className="bg-dark font-regular border border-grey rounded-[4px] w-full ">
+            <div className="flex text-xs">
+              <button
+                onClick={() => setStakingTab("stake")}
+                className={`w-full relative py-2.5 ${
+                  stakingTab === "stake"
+                    ? "text-white"
+                    : "text-white/50 border-b border-r border-grey"
+                }`}
+              >
+                {stakingTab === "stake" && (
+                  <div className="h-0.5 w-full bg-main absolute top-[-1px]" />
+                )}
+                STAKE
+              </button>
+              <button
+                onClick={() => setStakingTab("unstake")}
+                className={`w-full relative py-2.5 ${
+                  stakingTab === "unstake"
+                    ? "text-white"
+                    : "text-white/50 border-b border-l border-grey"
+                }`}
+              >
+                {stakingTab === "unstake" && (
+                  <div className="h-0.5 w-full bg-main absolute top-[-1px]" />
+                )}
+                UNSTAKE
+              </button>
+            </div>
+            {stakingTab === "stake" ? 
+            <div className="p-5 flex flex-col gap-y-9">
+            <div className="border border-grey bg-black rounded-[4px] w-full py-3 px-5 mt-2.5 flex flex-col gap-y-2">
+              <div className="flex items-end justify-between text-[11px] text-grey1">
+                <span>~$500</span>
+                <span>BALANCE: 200</span>
+              </div>
+              <div className="flex items-end justify-between mt-2 mb-3 text-3xl">
+                <div></div>
+                <div className="flex items-center gap-x-2 ">
+                  <button className="text-xs text-grey1 bg-dark h-10 px-3 rounded-[4px] border-grey border md:block hidden">
+                    MAX
+                  </button>
+                  <div className="flex items-center gap-x-2 bg-dark border border-grey rounded-[4px] px-3 pr-12 text-xs h-10">
+                    <Image
+                      width={22}
+                      height={22}
+                      src="/static/images/fin_icon.png"
+                    />
+                    FIN
+                  </div>
+                </div>
+              </div>
+            </div>
+            <StakeFinButton />
+          </div>
+          : <div className="p-5 flex flex-col gap-y-9">
+          <div className="border border-grey bg-black rounded-[4px] w-full py-3 px-5 mt-2.5 flex flex-col gap-y-2">
+            <div className="flex items-end justify-between text-[11px] text-grey1">
+              <span>~$500</span>
+              <span>STAKED: 200</span>
+            </div>
+            <div className="flex items-end justify-between mt-2 mb-3 text-3xl">
+              <div></div>
+              <div className="flex items-center gap-x-2 ">
+                <button className="text-xs text-grey1 bg-dark h-10 px-3 rounded-[4px] border-grey border md:block hidden">
+                  MAX
+                </button>
+                <div className="flex items-center gap-x-2 bg-dark border border-grey rounded-[4px] px-3 pr-12 text-xs h-10">
+                  <Image
+                    width={22}
+                    height={22}
+                    src="/static/images/fin_icon.png"
+                  />
+                  FIN
+                </div>
+              </div>
+            </div>
+          </div>
+          <UnstakeFinButton />
+        </div>
+            }
+
+          </div>
+        </div>
+        <div className="flex flex lg:flex-row flex-col items-start gap-10 mt-6">
+          <div className="border border-grey rounded-[4px] p-6 w-full">
+            <h1 className="text-lg uppercase">STATISTICS</h1>
+            <div className="flex items-center gap-x-5 mt-3 w-full">
+              <div className="border border-main rounded-[4px] flex flex-col w-full items-center justify-center gap-y-4 h-32 bg-main1 ">
+                <span className="text-main2/60 text-[13px]">FIN PRICE</span>
+                <span className="text-main2 lg:text-4xl text-3xl">$20</span>
+              </div>
+              <div className=" rounded-[4px] flex flex-col w-full bg-[#2ECC71]/10 items-center justify-center gap-y-4 h-32">
+                <span className="text-[#2ECC71]/50 text-[13px]">APR</span>
+                <span className="text-[#2ECC71] text-2xl md:text-4xl">
+                  8.35%
+                </span>
+              </div>
+            </div>
+            <div>
+              <div className="flex items-center justify-between mt-6">
+                <h1 className="text-lg uppercase">FIN DISTRIBUTION</h1>
+                <span className="uppercase">
+                  43.54% <span className="text-grey1">Staked</span>
+                </span>
+              </div>
+              <div className="border-l border-b border-grey gap-y-4 flex flex-col w-full mt-4 pb-3">
+                <div className="h-9 flex items-center justify-between rounded-r-full w-[30%] px-3 border-l-0 bg-main2/40 border border-main2">
+                  <div className="">
+                  <span className=" text-xs hidden md:block text-[#8FC0FF]">STAKED</span>
+                  </div>
+                  <span className=" text-xs text-[#8FC0FF]">386,698</span>
+                </div>
+                <div className="h-9 flex items-center justify-between rounded-r-full w-[60%] px-3 border-l-0 bg-[#002C85]/40 border border-[#002C85]">
+                  <div>
+                  <span className=" text-xs text-[#3371EF]">
+                    CIRCULATING
+                  </span>
+                  </div>
+                  <span className=" text-xs text-[#3371EF]">386,698</span>
+                </div>
+                <div className="h-9 flex items-center justify-between rounded-r-full w-[100%] px-3 border-l-0 bg-[#2A2A2A] border border-[#717171]">
+                  <span className=" text-xs text-[#D9D9D9]">TOTAL </span>
+                  <span className=" text-xs text-[#D9D9D9]">1,000,000</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="border border-grey rounded-[4px] p-6 w-full bg-dark">
+            <h1 className="text-lg uppercase">MY POSITION</h1>
+            <div className="flex flex-col gap-y-6">
+            <div className="border border-grey bg-black mt-3 rounded-[4px] flex flex-col w-full items-center justify-center gap-y-4 h-32">
+              <span className="text-grey1 text-[13px]">AMOUNT STAKED</span>
+              <span className="text-white text-center xl:text-4xl md:text-3xl text-2xl">
+                442.54 FIN
+              </span>
+            </div>
+            <div className="bg-[#0E315F]/50 border border-[#75A0D7]/40 flex justify-between text-sm text-[#8FC0FF] p-4 rounded-[4px]">
+                <span>
+                    REWARDS EARNED
+                </span>
+                <span>60 oFIN</span>
+            </div>
+            <CompoundOFinButton />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}