From cd6b13627b8ac51a98fafd426fbb31376675b71a Mon Sep 17 00:00:00 2001
From: OKendigelyan <oleg.chendighelean@trili.tech>
Date: Thu, 3 Oct 2024 13:20:28 +0100
Subject: [PATCH] Add earn section (#1954)

---
 apps/web/src/Layout.tsx                       |  3 +-
 apps/web/src/assets/icons/index.ts            |  1 +
 apps/web/src/assets/icons/percent.svg         | 13 ++++++
 .../components/EmptyMessage/EmptyMessage.tsx  |  1 +
 apps/web/src/components/Main/Main.tsx         |  2 +-
 .../components/ViewOverlay/ViewOverlay.tsx    | 25 ++++++-----
 apps/web/src/index.scss                       |  2 +-
 apps/web/src/styles/colors.ts                 |  3 +-
 apps/web/src/views/Earn/Earn.test.tsx         | 42 +++++++++++++++++++
 apps/web/src/views/Earn/Earn.tsx              | 31 +++++++++++++-
 10 files changed, 108 insertions(+), 15 deletions(-)
 create mode 100644 apps/web/src/assets/icons/percent.svg
 create mode 100644 apps/web/src/views/Earn/Earn.test.tsx

diff --git a/apps/web/src/Layout.tsx b/apps/web/src/Layout.tsx
index 0ed3ff98e6..15621e8953 100644
--- a/apps/web/src/Layout.tsx
+++ b/apps/web/src/Layout.tsx
@@ -20,7 +20,8 @@ export const Layout = () => {
         base: '"header" "sidebar" "main" "footer" "nav"',
         md: `"header header" "sidebar nav" "sidebar main" "footer main"`,
       }}
-      height={{ md: "100vh", base: "100dvh" }}
+      height={{ md: "100vh" }}
+      minHeight={{ base: "100dvh" }}
       padding={{ md: "20px 46px 0", base: "54px 0 0" }}
       data-testid="signed-in-layout"
     >
diff --git a/apps/web/src/assets/icons/index.ts b/apps/web/src/assets/icons/index.ts
index 6c9ce6a89b..f60d24e7f0 100644
--- a/apps/web/src/assets/icons/index.ts
+++ b/apps/web/src/assets/icons/index.ts
@@ -43,6 +43,7 @@ export { default as MenuIcon } from "./menu.svg";
 export { default as MoonIcon } from "./moon.svg";
 export { default as MultisigIcon } from "./multisig.svg";
 export { default as OutgoingArrowIcon } from "./outgoing-arrow.svg";
+export { default as PercentIcon } from "./percent.svg";
 export { default as PencilIcon } from "./pencil.svg";
 export { default as PlusIcon } from "./plus.svg";
 export { default as PyramidIcon } from "./pyramid.svg";
diff --git a/apps/web/src/assets/icons/percent.svg b/apps/web/src/assets/icons/percent.svg
new file mode 100644
index 0000000000..98c1533b4a
--- /dev/null
+++ b/apps/web/src/assets/icons/percent.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="156" height="156" viewBox="0 0 156 156" fill="none">
+  <g>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M128.096 27.9038C130.635 30.4422 130.635 34.5578 128.096 37.0962L37.0962 128.096C34.5578 130.635 30.4422 130.635 27.9038 128.096C25.3654 125.558 25.3654 121.442 27.9038 118.904L118.904 27.9038C121.442 25.3654 125.558 25.3654 128.096 27.9038Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M42.25 32.5C36.8652 32.5 32.5 36.8652 32.5 42.25C32.5 47.6348 36.8652 52 42.25 52C47.6348 52 52 47.6348 52 42.25C52 36.8652 47.6348 32.5 42.25 32.5ZM19.5 42.25C19.5 29.6855 29.6855 19.5 42.25 19.5C54.8145 19.5 65 29.6855 65 42.25C65 54.8145 54.8145 65 42.25 65C29.6855 65 19.5 54.8145 19.5 42.25Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M113.75 104C108.365 104 104 108.365 104 113.75C104 119.135 108.365 123.5 113.75 123.5C119.135 123.5 123.5 119.135 123.5 113.75C123.5 108.365 119.135 104 113.75 104ZM91 113.75C91 101.186 101.186 91 113.75 91C126.314 91 136.5 101.186 136.5 113.75C136.5 126.314 126.314 136.5 113.75 136.5C101.186 136.5 91 126.314 91 113.75Z"
+      fill="currentColor" />
+  </g>
+</svg>
diff --git a/apps/web/src/components/EmptyMessage/EmptyMessage.tsx b/apps/web/src/components/EmptyMessage/EmptyMessage.tsx
index f21fcc660b..fa12197ca8 100644
--- a/apps/web/src/components/EmptyMessage/EmptyMessage.tsx
+++ b/apps/web/src/components/EmptyMessage/EmptyMessage.tsx
@@ -48,6 +48,7 @@ export const EmptyMessage = ({
       {cta && (
         <Button
           as={Link}
+          marginTop={{ base: "12px", md: "0" }}
           padding="0 24px"
           fontSize="18px"
           href={ctaUrl}
diff --git a/apps/web/src/components/Main/Main.tsx b/apps/web/src/components/Main/Main.tsx
index 9f7ee63858..701a22f287 100644
--- a/apps/web/src/components/Main/Main.tsx
+++ b/apps/web/src/components/Main/Main.tsx
@@ -9,7 +9,7 @@ import { Tokens } from "../../views/Tokens";
 export const Main = () => (
   <Box
     overflowY="auto"
-    height={{ md: "calc(100% + 29px)" }}
+    height={{ base: "100%", md: "calc(100% + 29px)" }}
     marginTop={{ md: "-75px" }}
     paddingTop={{ md: "75px" }}
     borderRadius="30px"
diff --git a/apps/web/src/components/ViewOverlay/ViewOverlay.tsx b/apps/web/src/components/ViewOverlay/ViewOverlay.tsx
index 3e710b1d5c..9443791615 100644
--- a/apps/web/src/components/ViewOverlay/ViewOverlay.tsx
+++ b/apps/web/src/components/ViewOverlay/ViewOverlay.tsx
@@ -1,6 +1,6 @@
 import { Box, Icon } from "@chakra-ui/react";
 
-import { CoinIcon, LockIcon, PyramidIcon, WalletIcon } from "../../assets/icons";
+import { CoinIcon, LockIcon, PercentIcon, PyramidIcon, WalletIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { useIsAccountVerified } from "../Onboarding/VerificationFlow";
 
@@ -8,6 +8,13 @@ type ViewOverlayProps = {
   iconType: "activity" | "earn" | "nfts" | "tokens";
 };
 
+const iconMap = {
+  activity: WalletIcon,
+  earn: PercentIcon,
+  nfts: PyramidIcon,
+  tokens: CoinIcon,
+};
+
 export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
   const color = useColor();
   const isVerified = useIsAccountVerified();
@@ -15,15 +22,13 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
   const getIcon = () => {
     if (!isVerified) {
       return LockIcon;
-    } else if (iconType === "activity") {
-      return WalletIcon;
-    } else if (iconType === "nfts") {
-      return PyramidIcon;
-    } else if (iconType === "tokens") {
-      return CoinIcon;
+    } else {
+      return iconMap[iconType];
     }
   };
 
+  const currentColor = color("50");
+
   return (
     <Box
       position="absolute"
@@ -41,7 +46,7 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
         left="-20%"
         width="50%"
         height="auto"
-        color={color("50")}
+        color={currentColor}
       />
       <Icon
         as={getIcon()}
@@ -50,7 +55,7 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
         left="50%"
         width="20%"
         height="auto"
-        color={color("50")}
+        color={currentColor}
       />
       <Icon
         as={getIcon()}
@@ -59,7 +64,7 @@ export const ViewOverlay = ({ iconType }: ViewOverlayProps) => {
         right="5%"
         width="30%"
         height="auto"
-        color={color("50")}
+        color={currentColor}
       />
     </Box>
   );
diff --git a/apps/web/src/index.scss b/apps/web/src/index.scss
index 8011011cdf..8266261793 100644
--- a/apps/web/src/index.scss
+++ b/apps/web/src/index.scss
@@ -13,7 +13,7 @@ body:before {
   top: 0;
   left: 0;
   right: 0;
-  height: 100vh;
+  min-height: 100%;
 }
 
 code {
diff --git a/apps/web/src/styles/colors.ts b/apps/web/src/styles/colors.ts
index 4ba1e801a0..76be446da3 100644
--- a/apps/web/src/styles/colors.ts
+++ b/apps/web/src/styles/colors.ts
@@ -6,7 +6,8 @@ const light = {
   green: "#38A169",
   greenDark: "#25855A",
   bg: "#E0E0FF",
-  bgGradient: "linear-gradient(67deg, rgba(226, 232, 240, 0.7) 0%, #E2E8F0 100%);",
+  bgGradient:
+    "linear-gradient(67deg, rgba(248, 248, 255, 0.70) 0%, rgba(248, 248, 255, 0.96) 29.5%, #F8F8FF 100%);",
   bgMaskColor: "#F8F8FF",
   grey: {
     black: "#121224",
diff --git a/apps/web/src/views/Earn/Earn.test.tsx b/apps/web/src/views/Earn/Earn.test.tsx
new file mode 100644
index 0000000000..e28d570477
--- /dev/null
+++ b/apps/web/src/views/Earn/Earn.test.tsx
@@ -0,0 +1,42 @@
+import { mockImplicitAccount } from "@umami/core";
+import { type UmamiStore, accountsActions, addTestAccount, makeStore } from "@umami/state";
+
+import { Earn } from "./Earn";
+import { render, screen } from "../../testUtils";
+
+let store: UmamiStore;
+
+const account = mockImplicitAccount(0);
+
+beforeEach(() => {
+  store = makeStore();
+  addTestAccount(store, account);
+  store.dispatch(accountsActions.setCurrent(account.address.pkh));
+});
+
+describe("<Earn />", () => {
+  it("renders correctly if user is verified", () => {
+    render(<Earn />, { store });
+
+    const link = screen.getByRole("link", { name: "Start Earning" });
+
+    expect(screen.getByText("Boost your rewards")).toBeInTheDocument();
+    expect(
+      screen.getByText("Maximize your tez with staking.com. Secure, efficient, and simple.")
+    ).toBeInTheDocument();
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "https://stake.tezos.com/");
+  });
+
+  it("renders empty message if user is not verified", () => {
+    store.dispatch(
+      accountsActions.setIsVerified({
+        isVerified: false,
+        pkh: account.address.pkh,
+      })
+    );
+    render(<Earn />, { store });
+
+    expect(screen.getByTestId("empty-state-message")).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/src/views/Earn/Earn.tsx b/apps/web/src/views/Earn/Earn.tsx
index de941d533c..4a47046f11 100644
--- a/apps/web/src/views/Earn/Earn.tsx
+++ b/apps/web/src/views/Earn/Earn.tsx
@@ -1 +1,30 @@
-export const Earn = () => <div>"earn"</div>;
+import { Flex } from "@chakra-ui/react";
+
+import { EmptyMessage } from "../../components/EmptyMessage";
+import { useIsAccountVerified } from "../../components/Onboarding/VerificationFlow";
+import { VerifyMessage } from "../../components/Onboarding/VerificationFlow/VerifyMessage";
+import { ViewOverlay } from "../../components/ViewOverlay/ViewOverlay";
+
+export const Earn = () => {
+  const isVerified = useIsAccountVerified();
+
+  const buyTezUrl = "https://stake.tezos.com/";
+
+  return (
+    <>
+      <Flex zIndex={1} flexGrow={1} width="full">
+        {isVerified ? (
+          <EmptyMessage
+            cta="Start Earning"
+            ctaUrl={buyTezUrl}
+            subtitle={"Maximize your tez with staking.com.\nSecure, efficient, and simple."}
+            title="Boost your rewards"
+          />
+        ) : (
+          <VerifyMessage />
+        )}
+      </Flex>
+      <ViewOverlay iconType="earn" />
+    </>
+  );
+};