Add earn section (#1954)

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"
     >

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";

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}

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"

apps/web/src/components/ViewOverlay/ViewOverlay.tsx

@@ -1,29 +1,34 @@
 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";
 
 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();
 
   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>
   );

apps/web/src/index.scss

@@ -13,7 +13,7 @@ body:before {
   top: 0;
   left: 0;
   right: 0;
-  height: 100vh;
+  min-height: 100%;
 }
 
 code {

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",

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();
+  });
+});

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" />
+    </>
+  );
+};