Merge pull request #105 from BirthdayResearch/feature/withdraw

feature/withdraw
BirthdayResearch · Jul 31, 2024 · 2c849d2 · 2c849d2
2 parents 8afc926 + b54e676
commit 2c849d2
Show file tree

Hide file tree

Showing 88 changed files with 3,129 additions and 988 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [main, mainnet]
+    branches: [main]
   pull_request:
-    branches: [main, mainnet]
+    branches: [main]
 
 concurrency:
   group: ${{ github.workflows }}-${{ github.event_name }}-${{ github.ref }}

diff --git a/apps/web/jest.config.ts b/apps/web/jest.config.ts
diff --git a/apps/web/jest.setup.ts b/apps/web/jest.setup.ts
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -10,12 +10,11 @@
     "cypress:open": "cypress open",
     "cypress:run": "TZ=UTC cypress run --headless --browser chrome",
     "sy:open": "synpress open -cf synpress.config.ts",
-    "sy:test": "synpress run -cf synpress.config.ts",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "sy:test": "synpress run -cf synpress.config.ts"
   },
   "dependencies": {
     "@defichain/whale-api-client": "^4.0.7",
+    "@floating-ui/react-dom": "^1.3.0",
     "@headlessui/react": "^1.7.18",
     "@reduxjs/toolkit": "^2.2.1",
     "@tailwindcss/typography": "^0.5.10",
@@ -27,6 +26,7 @@
     "bignumber.js": "^9.1.2",
     "clsx": "^2.1.0",
     "connectkit": "1.7.3",
+    "date-fns": "^3.6.0",
     "ethers": "^6.12.0",
     "next": "^14.2.3",
     "next13-progressbar": "^1.1.3",
@@ -45,13 +45,9 @@
     "@netlify/plugin-nextjs": "^5.2.1",
     "@synthetixio/synpress": "^3.7.2",
     "@testing-library/cypress": "^10.0.1",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
     "@types/node": "^20",
     "autoprefixer": "^10.4.16",
     "cypress": "^13.7.2",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1"
   }

diff --git a/apps/web/public/check.svg b/apps/web/public/check.svg
diff --git a/apps/web/public/icons/mdfi-icon.svg b/apps/web/public/icons/mdfi-icon.svg
diff --git a/apps/web/src/app/app/components/AddressInput.tsx b/apps/web/src/app/app/components/AddressInput.tsx
@@ -41,7 +41,7 @@ export default function AddressInput({
       toast("Copied to clipboard", {
         duration: 1000,
         className:
-          "bg-green px-2 py-1 !text-xs !text-dark-00 !bg-green mt-10 !rounded-md",
+          "px-2 py-1 !text-xs !text-dark-00 !bg-green mt-10 !rounded-md",
         id: "copy",
       });
     }

diff --git a/apps/web/src/app/app/components/AppFooter.tsx b/apps/web/src/app/app/components/AppFooter.tsx
@@ -4,6 +4,8 @@ import clsx from "clsx";
 import { FaReddit } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 import Link from "next/link";
+import { useGetVersionMutation } from "@/store/marbleFiApi";
+import { useEffect, useState } from "react";
 
 const footerLinks = [
   // {
@@ -27,6 +29,18 @@ const footerLinks = [
 ];
 
 export default function AppFooter() {
+  const [version, setVersion] = useState("0.0.0");
+  const [getVersion] = useGetVersionMutation();
+
+  const fetchVersion = async () => {
+    const ver = await getVersion({}).unwrap();
+    setVersion(ver?.v);
+  };
+
+  useEffect(() => {
+    fetchVersion();
+  }, []);
+
   return (
     <footer className="py-10 md:py-0 max-w-5xl px-5 min-w-fit w-full bottom-0 grid gap-y-5">
       <section className="flex flex-row items-center w-full justify-between md:py-10 md:border-t md:border-light-1000/10">
@@ -38,10 +52,9 @@ export default function AppFooter() {
           </div>
         </div>
         <div className="ml-2 w-full md:w-fit md:justify-end">
-          {/* TODO fetch this from api */}
           <Tag
-            text="v1.0.0"
-            testID="footer-version-tag"
+            text={`V${version}`}
+            testId="footer-version-tag"
             customStyle="bg-light-1000/[0.05] px-3 !py-1 mr-2 w-fit"
           />
         </div>

diff --git a/apps/web/src/app/app/components/AppNavigationBarMobile.tsx b/apps/web/src/app/app/components/AppNavigationBarMobile.tsx
@@ -1,11 +1,15 @@
+import { useNetworkEnvironmentContext } from "@/context/NetworkEnvironmentContext";
 import { IoMdClose } from "react-icons/io";
+
 import MarbleFiLogo from "../../../components/MarbleFiLogo";
 
-import Link from "next/link";
 import ConnectButton from "@/components/button/WalletConnect";
 import { appNavigationTabs } from "@/app/app/components/AppNavigationBarWeb";
+import Link from "@/components/Link";
 
 export default function AppNavigationBarMobile({ onClose }: { onClose: any }) {
+  const { networkEnv } = useNetworkEnvironmentContext();
+
   return (
     <div
       className="w-full fixed top-0 right-0 bg-light-00 min-h-screen z-10"
@@ -35,7 +39,7 @@ export default function AppNavigationBarMobile({ onClose }: { onClose: any }) {
             <Link
               key={link.label}
               className="md:mx-12 mx-5 py-7 lg:py-3 border-b border-light-1000/10 font-bold text-light-1000 active:text-opacity-10 text-sm cursor-pointer"
-              href={link.href}
+              href={{ pathname: `/app${link.href}` }}
             >
               {link.label}
             </Link>

diff --git a/apps/web/src/app/app/components/AppNavigationBarWeb.tsx b/apps/web/src/app/app/components/AppNavigationBarWeb.tsx
@@ -1,17 +1,18 @@
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { AppNavigation } from "@/lib/types";
+import Link from "@/components/Link";
 
 export const appNavigationTabs: AppNavigation[] = [
-  // { label: "Stake", href: "/stake" },
-  // { label: "Withdraw", href: "/withdraw" },
+  { label: "Stake", href: "/stake" },
+  { label: "Withdraw", href: "/withdraw" },
   // { label: "Pool", href: "/pool" },
 ];
 
 export default function AppNavigationBarWeb() {
   const pathname = usePathname();
+
   const [isActive, setIsActive] = useState("/stake");
 
   useEffect(() => {
@@ -31,7 +32,7 @@ export default function AppNavigationBarWeb() {
               { "font-bold": isActive === `/app${link.href}` },
               "text-sm text-light-1000 py-3 px-4 rounded-[30px] cursor-pointer",
             )}
-            href={`/app${link.href}`}
+            href={{ pathname: `/app${link.href}` }}
           >
             {link.label}
           </Link>

diff --git a/apps/web/src/app/app/components/ConfirmScreen.tsx b/apps/web/src/app/app/components/ConfirmScreen.tsx
@@ -1,6 +1,6 @@
-import Panel from "@/app/app/stake/components/Panel";
+import Panel from "@/app/app/components/Panel";
 import SpinnerIcon from "@/app/app/components/icons/SpinnerIcon";
-import DetailsRow from "@/app/app/components/DetailsRow";
+import DetailsRow, { LinkType } from "@/app/app/components/DetailsRow";
 import useCopyToClipboard from "@/hooks/useCopyToClipboard";
 import TxCompletedIcon from "@/app/app/components/icons/TxCompletedIcon";
 import { NumericFormatProps } from "@/components/NumericFormat";
@@ -15,7 +15,7 @@ export default function ConfirmScreen({
   dfiAmounts,
   details,
   isLoading,
-  hasCompleted,
+  isComplete,
 }: {
   title: string;
   description: string;
@@ -24,10 +24,10 @@ export default function ConfirmScreen({
   details: {
     label: string;
     value: string;
-    linkType: string;
+    linkType: LinkType;
   }[];
   isLoading?: boolean;
-  hasCompleted?: boolean;
+  isComplete?: boolean;
 }) {
   const { copy } = useCopyToClipboard();
 
@@ -47,7 +47,7 @@ export default function ConfirmScreen({
     <Panel customStyle="flex flex-col">
       <article className="flex flex-col gap-y-6 md:gap-y-10">
         {isLoading && <SpinnerIcon />}
-        {hasCompleted && <TxCompletedIcon />}
+        {isComplete && <TxCompletedIcon />}
         <section className="flex flex-col gap-y-6">
           <div className="flex flex-col gap-y-2">
             <h3 className="text-2xl leading-7 font-medium">{title}</h3>
@@ -60,7 +60,6 @@ export default function ConfirmScreen({
                 key={item.label}
                 label={item.label}
                 value={item.value}
-                customStyle="py-[18px]"
               />
             ))}
 

diff --git a/apps/web/src/app/app/components/DetailsRow.tsx b/apps/web/src/app/app/components/DetailsRow.tsx
@@ -2,6 +2,14 @@ import clsx from "clsx";
 import { FiCopy, FiExternalLink } from "react-icons/fi";
 import { useContractContext } from "@/context/ContractContext";
 import Link from "next/link";
+import StatusBadge from "@/app/app/withdraw/components/StatusBadge";
+import { truncateTextFromMiddle } from "@/lib/textHelper";
+
+export enum LinkType {
+  TX = "tx",
+  STATUS = "status",
+  ADDRESS = "address",
+}
 
 export default function DetailsRow({
   label,
@@ -10,7 +18,7 @@ export default function DetailsRow({
   handleOnCopy,
 }: {
   label: string;
-  linkType: string;
+  linkType?: LinkType;
   value: string;
   handleOnCopy?: (text: string) => void;
 }) {
@@ -21,31 +29,38 @@ export default function DetailsRow({
       <div className="flex flex-col md:flex-row items-center gap-y-1 gap-x-2">
         <div
           className={clsx(
-            "break-words font-semibold text-sm text-right line-clamp-1 w-[135px] md:w-[228px] lg:w-[350px]",
+            "justify-end flex flex-row items-center line-clamp-1 w-[135px] md:w-[228px] lg:w-[350px] gap-x-2",
           )}
         >
-          {value}
+          {linkType === LinkType.STATUS && <StatusBadge status={value} />}
+          <span className="break-words font-semibold text-sm text-right">
+            {linkType && [LinkType.ADDRESS, LinkType.TX].includes(linkType)
+              ? truncateTextFromMiddle(value, 12)
+              : value}
+          </span>
         </div>
 
         {/* Copy and external link icon */}
-        <div className="flex flex-row w-full md:w-fit justify-end">
-          <button
-            className="hover:bg-light-1000/[0.05] active:bg-light-100/[0.7] rounded-[20px] p-2 cursor-pointer flex flex-row"
-            onClick={() => {
-              if (handleOnCopy) handleOnCopy(value);
-            }}
-          >
-            <FiCopy size={16} />
-          </button>
-          <Link
-            className="hover:bg-light-1000/[0.05] active:bg-light-100/[0.7] rounded-[20px] p-2 cursor-pointer flex flex-row"
-            href={`${ExplorerURL}/${linkType}/${value}`}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <FiExternalLink size={16} />
-          </Link>
-        </div>
+        {linkType && [LinkType.TX, LinkType.ADDRESS].includes(linkType) && (
+          <div className="flex flex-row w-full md:w-fit justify-end">
+            <button
+              className="hover:bg-light-1000/[0.05] active:bg-light-100/[0.7] rounded-[20px] p-2 cursor-pointer flex flex-row"
+              onClick={() => {
+                if (handleOnCopy) handleOnCopy(value);
+              }}
+            >
+              <FiCopy size={16} />
+            </button>
+            <Link
+              className="hover:bg-light-1000/[0.05] active:bg-light-100/[0.7] rounded-[20px] p-2 cursor-pointer flex flex-row"
+              href={`${ExplorerURL}/${linkType}/${value}`}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <FiExternalLink size={16} />
+            </Link>
+          </div>
+        )}
       </div>
     </div>
   );