add stake modal

app/javascript/src/components/Container.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import cx from "classnames";
-
-export type ContainerProps = {
-  className?: string;
-};
-
-export const Container = ({
-  children,
-  className,
-}: React.PropsWithChildren<ContainerProps>) => {
-  return (
-    <div className="w-full flex items-center justify-center px-8 py-2 2xl:p-0">
-      <div className={cx("max-w-5xl w-full flex", className)}>{children}</div>
-    </div>
-  );
-};

app/javascript/src/components/Header.tsx

@@ -1,10 +0,0 @@
-import type { FC } from "react";
-import React from "react";
-
-export const Header: FC = ({ children }) => {
-  return (
-    <div className="w-full h-64 bg-gradient-to-br from-green-300 to-green-400 grid place-items-center">
-      {children}
-    </div>
-  );
-};

app/javascript/src/components/Modal/Modal.tsx

@@ -0,0 +1,73 @@
+import type { FC } from "react";
+import React, { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: (state: boolean) => void;
+  title: string;
+  className?: string;
+};
+
+export const Modal: FC<Props> = ({
+  isOpen,
+  setIsOpen,
+  children,
+  title,
+  className = "",
+}) => {
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog
+        open={isOpen}
+        as="div"
+        className={`fixed inset-0 z-10 overflow-y-auto ${className}`}
+        onClose={closeModal}
+      >
+        <div className="min-h-screen px-4 text-center">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-900 bg-opacity-50" />
+          </Transition.Child>
+
+          <span
+            className="inline-block h-screen align-middle"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded">
+              <Dialog.Title
+                as="h3"
+                className="text-lg font-medium leading-6 text-gray-900 mb-4"
+              >
+                {title}
+              </Dialog.Title>
+              <div className="mt-2">{children}</div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};

app/javascript/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export * from "./Modal";

app/javascript/src/components/Pool.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-
-import type { PoolConfig } from "../types";
-import { useBsc } from "../contexts/BscProvider";
-import { getPriceInBusd } from "../utils/getPrice";
-import { getApr } from "../utils/apr";
-import { getTotalStaked } from "../utils/getTotalStaked";
-
-type PoolProps = {
-  pool: PoolConfig;
-};
-
-export const Pool = ({ pool }: PoolProps) => {
-  const {
-    provider,
-    pancake: { router },
-  } = useBsc();
-
-  const [apr, setApr] = React.useState<{
-    value: string | null;
-    loading: boolean;
-  }>({
-    value: null,
-    loading: true,
-  });
-
-  React.useEffect(() => {
-    (async () => {
-      const stakingPrice = await getPriceInBusd(router, pool.stakingToken);
-      const earningPrice = await getPriceInBusd(router, pool.earningToken);
-
-      const totalStaked = await getTotalStaked(provider, pool);
-
-      // eslint-disable-next-line no-console
-      console.log(
-        `Total Staked for ${pool.stakingToken.symbol} - ${
-          pool.earningToken.symbol
-        }: ${JSON.stringify(totalStaked)}`
-      );
-
-      const aprValue = getApr({
-        rewardTokenPrice: earningPrice,
-        stakingTokenPrice: stakingPrice,
-        tokenPerBlock: parseFloat(pool.tokenPerBlock) / 1e-18,
-        totalStaked,
-      });
-
-      if (aprValue) {
-        setApr({
-          loading: false,
-          value: aprValue.toFixed(2),
-        });
-      }
-    })();
-  }, [pool, provider, router]);
-
-  return (
-    <div
-      key={pool.sousId}
-      id={pool.sousId.toString()}
-      className="flex items-center w-full h-auto bg-white px-16 p-4 rounded-xl shadow flex-col relative z-0 overflow-hidden hover:shadow-lg transition-all duration-300"
-    >
-      <div
-        className="box-border h-full w-full absolute left-0 top-0 rounded-xl opacity-20 filter blur-2xl bg-cover"
-        style={{
-          backgroundImage: `url('https://pancakeswap.finance/images/tokens/${pool.earningToken.address["56"]}.svg')`,
-          backgroundPositionX: "50%",
-          backgroundPositionY: "50%",
-          backgroundSize: "125%",
-          zIndex: -1,
-        }}
-      />
-      <img
-        className="shadow-xl rounded-full w-24"
-        src={`https://pancakeswap.finance/images/tokens/${pool.earningToken.address["56"]}.svg`}
-        alt={`${pool.earningToken.symbol} icon`}
-      />
-      <div className="mt-4 p-2">
-        <p>
-          <span className="font-medium">Investir:</span>{" "}
-          {pool.stakingToken.symbol}
-        </p>
-        <p>
-          <span className="font-medium">Receber:</span>{" "}
-          {pool.earningToken.symbol}
-        </p>
-        <div className="flex items-center">
-          <span className="font-medium mr-1">Rendimento:</span>
-          {apr.loading ? (
-            <div className="w-10 h-5 inline-block animate-pulse bg-gray-300 rounded" />
-          ) : (
-            `${apr.value}%`
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

app/javascript/src/components/PoolListing.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-import { pools } from "../constants/Pools";
-import { Pool } from "./Pool";
-
-export const PoolListing = () => {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">
-      {pools
-        .filter((pool) => !pool.isFinished)
-        .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
-        .map((pool) => (
-          <Pool key={pool.sousId} pool={pool} />
-        ))}
-    </div>
-  );
-};

app/javascript/src/components/SideNav/SideNav.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 
-import { useApp } from "../contexts/AppProvider";
+import { useApp } from "../../contexts/AppProvider";
 
 type MenuItem = {
   label: string;

app/javascript/src/components/SideNav/index.ts

@@ -0,0 +1 @@
+export * from "./SideNav";

app/javascript/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./Navbar";
 export * from "./SideNav";
+export * from "./Modal";