Love heart breaker animation

.env

@@ -0,0 +1,11 @@
+NEXT_PUBLIC_ENABLE_TESTNETS=true
+NEXT_PUBLIC_CONTRACT_LOVE_FARM=0xb27D69d0097d9e59657C0dbbf59d3Da103845A2b
+NEXT_PUBLIC_CONTRACT_LOVE_ETH_LP=0x88a464De7EFC2a4009dD9D2a113db7A87D20B1F6
+NEXT_PUBLIC_CONTRACT_LOVE_CLAIM=0xbFE325f40e5A19Ce2d7E0472B7CA5441e3F4aA2E
+NEXT_PUBLIC_CONTRACT_LOVE=0xA530A26BF718689CDeBADDefB11dA54d81669E33
+NEXT_PUBLIC_CONTRACT_USDETHPoolAddy=0x28cee28a7C4b4022AC92685C07d2f33Ab1A0e122
+NEXT_PUBLIC_CONTRACT_ETHLOVEPoolAddy=0x88a464De7EFC2a4009dD9D2a113db7A87D20B1F6
+NEXT_PUBLIC_CONTRACT_USDCAddress=0x28cee28a7C4b4022AC92685C07d2f33Ab1A0e122
+NEXT_PUBLIC_API=http://localhost:3030
+NEXT_PUBLIC_JSON_RPC_URL=
+MONGOO_URL=

components/bottombar.tsx

@@ -29,6 +29,11 @@ const BottomBar = (props: Props) => {
       icon: Paper,
       name: "<u>P</u>APER",
     },
+    {
+      menu: "heartbreaker",
+      icon: "/assets/start-icon.png",
+      name: "<u>H</u>EARTBREAKER",
+    },
     {
       menu: "cp",
       icon: Setting,

components/heartbreaker.tsx

@@ -0,0 +1,19 @@
+import Control from "./heartbreaker/control";
+import Features from "./heartbreaker/features";
+import Game from "./heartbreaker/game";
+
+export const HeartBreaker = () => {
+  return (
+    <div className="flex flex-col w-[100%] h-[90%] py-[20px]">
+      <div className="flex flex-1 w-[100%] justify-between">
+        <div className="w-[255px]">
+          <Game />
+        </div>
+        <Control />
+      </div>
+      <div className="flex-1">
+        <Features />
+      </div>
+    </div>
+  );
+};

components/heartbreaker/chatbox.tsx

@@ -0,0 +1,19 @@
+const ChatBox = () => {
+  return (
+    <div className="my-[5px] mx-[5px]">
+      <div className="bg-white px-[8px] py-[20px] h-[180px] border border-l-gray-600 border-t-gray-500 border-r-gray-200 border-b-gray-200">
+        <div className="flex flex-row text-[10px]">
+          <div>0x23234..:</div>
+          <div>asdasd</div>
+        </div>
+      </div>
+      <input
+        placeholder="type something here..."
+        type="text"
+        className="text-[#000] mt-[5px] px-[3px] py-[3px] text-[10px] border border-l-gray-600 border-t-gray-500 border-r-gray-200 border-b-gray-200 w-full"
+      />
+    </div>
+  );
+};
+
+export default ChatBox;

components/heartbreaker/connect.tsx

@@ -0,0 +1,66 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+
+export const ConnectHeartBreak = () => {
+  return (
+    <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        // Note: If your app doesn't use authentication, you
+        // can remove all 'authenticationStatus' checks
+        const ready = mounted && authenticationStatus !== "loading";
+        const connected =
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus || authenticationStatus === "authenticated");
+        return (
+          <div
+            {...(!ready && {
+              "aria-hidden": true,
+              style: {
+                opacity: 0,
+                pointerEvents: "none",
+                userSelect: "none",
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <button
+                    onClick={openConnectModal}
+                    className="px-[13px] bg-[#0A0080] text-[12px] h-[18px]   border-[#ededed] text-white border-r-[#444444] border border-b-[#444444] px-[3px] text-center  py-[1px]"
+                  >
+                    SIGN IN
+                  </button>
+                );
+              }
+              return (
+                <div className="flex flex-row items-center">
+                  <div className="text-[8px] flex flex-col  items-end text-[#0A0080]">
+                    <div>Wallet Connected</div>
+                    <div> {account.displayName}</div>
+                  </div>
+                  <button
+                    onClick={openConnectModal}
+                    className="px-[13px] ml-1 bg-[#0A0080] text-[12px] h-[18px]   border-[#ededed] text-white border-r-[#444444] border border-b-[#444444] px-[3px] text-center  py-[1px]"
+                  >
+                    Hello!
+                  </button>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};

components/heartbreaker/control.tsx

@@ -0,0 +1,85 @@
+import Image from "next/image";
+import DeadButton from "../../assets/dead-game-button.png";
+import ActiveButton from "../../assets/active-game-button.png";
+import { useState } from "react";
+import { ConnectHeartBreak } from "./connect";
+const Control = () => {
+  const points = [10, 20, 30, 40];
+  const [selectedPoint, setSelectedPoint] = useState(10);
+  const [active, setActive] = useState(false);
+  return (
+    <div className="px-[5px]">
+      <div className="flex flex-row justify-end space-x-1 mb-1">
+        <ConnectHeartBreak />
+      </div>
+      <div className="border border-gray-500">
+        <div className="flex flex-row space-x-2 border px-[4px] py-[5px]">
+          <div className="mt-2">
+            <div className="text-[9px]">$LOVE AVAILABLE</div>
+            <div className="text-[28px]">0</div>
+          </div>
+          <div>
+            <input
+              type="text"
+              className="text-[#0A0080] px-[3px] text-[10px] border-l-gray-600 border-t-gray-600 border-r-gray-200 border-b-gray-200 border-2"
+            />
+            <div>
+              <button className="w-1/2 bg-[#C1C1C1]  border-[#ededed] border-r-[#444444] border border-b-[#444444] px-[3px] text-center text-[6px] py-[2px]">
+                Deposit
+              </button>
+              <button className="w-1/2 bg-[#C1C1C1]  border-[#ededed] border-r-[#444444] border border-b-[#444444] px-[3px] text-center text-[6px] py-[2px]">
+                Withdraw
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-row justify-between h-[20px] px-[10px] cursor-pointer mt-[5px]">
+        {points.map((val, index) => {
+          return (
+            <div
+              onClick={() => setSelectedPoint(val)}
+              key={index}
+              className={`${
+                selectedPoint == val ? "bg-[#0A0080] text-white" : ""
+              } border-2 border-[#0A0080] text-[12px] text-[#0A0080] px-[6px] rounded-sm font-bold text-center flex flex-row items-center`}
+            >
+              {val} {"%"}
+            </div>
+          );
+        })}
+      </div>
+      <div className="px-[10px]">
+        <input
+          placeholder="Custom Amount"
+          type="text"
+          className="text-[#0A0080] px-[3px] text-[10px] border-l-gray-600 border-t-gray-600 border-r-gray-200 border-b-gray-200 border-2 w-full"
+        />
+      </div>
+      <div className="flex flex-row justify-between mt-[4px] px-[10px]">
+        <div className="border border-gray-600  px-[7px] py-[4px] w-[69px]">
+          <div className="text-[#808080]">PLAY</div>
+          <div className="text-[#808080]">0</div>
+        </div>
+        <div>
+          <button
+            onClick={() => setActive(!active)}
+            className="cursor-pointer transform active:scale-90 transition duration-150 ease-in-out"
+          >
+            <Image
+              src={active ? DeadButton : ActiveButton}
+              width={67}
+              height={54}
+              alt="dead-button"
+            />
+          </button>
+        </div>
+      </div>
+      <div className="px-[10px]">
+        <div className="bg-black h-[22px] mt-[12px] "></div>
+      </div>
+    </div>
+  );
+};
+export default Control;

components/heartbreaker/features.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { StakingSelectTab } from "../ui/StakingSelectTab";
+import HeartBreakTable from "./table";
+import { HeartBreakTab } from "./tab";
+import ChatBox from "./chatbox";
+
+const Features = () => {
+  const [tab, setTab] = useState<string>("history");
+  const tabList = [
+    {
+      title: "History",
+      key: "history",
+    },
+    {
+      title: "LeaderBoard",
+      key: "leaderboard",
+    },
+    {
+      title: "Chat",
+      key: "chat",
+    },
+  ];
+
+  const renderBody = () => {
+    switch (tab) {
+      case "history":
+        return <HeartBreakTable />;
+      case "leaderboard":
+        return <HeartBreakTable />;
+      case "chat":
+        return <ChatBox />;
+      default:
+        break;
+    }
+  };
+  return (
+    <div className="border mt-2 h-[247px] border-b-gray-600 border-r-gray-600">
+      <div className="flex flex-row text-xl ">
+        {tabList.map((list, index) => {
+          return (
+            <HeartBreakTab
+              key={index}
+              title={list.title}
+              onClick={() => {
+                setTab(list.key);
+              }}
+              isSelected={tab == list.key}
+            />
+          );
+        })}
+      </div>
+      <div>{renderBody()}</div>
+    </div>
+  );
+};
+
+export default Features;