feat: earn tab texts

apps/web/src/views/Earn/Earn.test.tsx

@@ -1,12 +1,20 @@
-import { mockImplicitAccount } from "@umami/core";
-import { type UmamiStore, accountsActions, addTestAccount, makeStore } from "@umami/state";
+import { mockImplicitAccount, rawAccountFixture } from "@umami/core";
+import {
+  type UmamiStore,
+  accountsActions,
+  addTestAccount,
+  assetsActions,
+  makeStore,
+} from "@umami/state";
+import { mockImplicitAddress } from "@umami/tezos";
 
 import { Earn } from "./Earn";
 import { render, screen } from "../../testUtils";
 
 let store: UmamiStore;
 
 const account = mockImplicitAccount(0);
+const stakerAddress = mockImplicitAddress(0).pkh;
 
 beforeEach(() => {
   store = makeStore();
@@ -15,10 +23,52 @@ beforeEach(() => {
 });
 
 describe("<Earn />", () => {
-  it("renders correctly if user is verified", () => {
+  it("renders correctly if user is verified and not delegated", () => {
+    store.dispatch(
+      assetsActions.updateAccountStates([
+        rawAccountFixture({
+          address: account.address.pkh,
+          delegate: null,
+        }),
+      ])
+    );
+    store.dispatch(
+      assetsActions.updateUnstakeRequests([
+        {
+          cycle: 2,
+          amount: 300000,
+          staker: { address: stakerAddress },
+          status: "finalizable",
+        },
+      ])
+    );
+
     render(<Earn />, { store });
 
-    const link = screen.getByRole("link", { name: "Start Earning" });
+    const link = screen.getByRole("link", { name: "Start earning" });
+
+    expect(screen.getByText("Earn rewards")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Unlock the potential of your tez. Delegate or stake now and see your rewards grow."
+      )
+    ).toBeInTheDocument();
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "https://stake.tezos.com/");
+  });
+
+  it("renders correctly if user is verified and delegated and not staked", () => {
+    store.dispatch(
+      assetsActions.updateAccountStates([
+        rawAccountFixture({
+          address: account.address.pkh,
+        }),
+      ])
+    );
+
+    render(<Earn />, { store });
+
+    const link = screen.getByRole("link", { name: "Stake" });
 
     expect(screen.getByText("Boost your rewards")).toBeInTheDocument();
     expect(
@@ -28,6 +78,37 @@ describe("<Earn />", () => {
     expect(link).toHaveAttribute("href", "https://stake.tezos.com/");
   });
 
+  it("renders correctly if user is verified and delegated and staked", () => {
+    store.dispatch(
+      assetsActions.updateAccountStates([
+        rawAccountFixture({
+          address: account.address.pkh,
+        }),
+      ])
+    );
+    store.dispatch(
+      assetsActions.updateUnstakeRequests([
+        {
+          cycle: 2,
+          amount: 300000,
+          staker: { address: stakerAddress },
+          status: "pending",
+        },
+      ])
+    );
+
+    render(<Earn />, { store });
+
+    const link = screen.getByRole("link", { name: "Manage funds" });
+
+    expect(screen.getByText("Manage your funds")).toBeInTheDocument();
+    expect(
+      screen.getByText("Stake, unstake and finalize the unstaked tez using the Tezos staking app.")
+    ).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({

apps/web/src/views/Earn/Earn.tsx

@@ -1,4 +1,10 @@
 import { Flex } from "@chakra-ui/react";
+import {
+  useCurrentAccount,
+  useGetAccountBalanceDetails,
+  useGetAccountDelegate,
+} from "@umami/state";
+import { BigNumber } from "bignumber.js";
 
 import { EmptyMessage } from "../../components/EmptyMessage";
 import { useIsAccountVerified } from "../../components/Onboarding/VerificationFlow";
@@ -7,22 +13,62 @@ import { ViewOverlay } from "../../components/ViewOverlay/ViewOverlay";
 
 export const Earn = () => {
   const isVerified = useIsAccountVerified();
+  const currentAccount = useCurrentAccount()!;
+  const address = currentAccount.address.pkh;
+  const delegate = useGetAccountDelegate()(address);
+  const { spendableBalance, totalBalance } = useGetAccountBalanceDetails(address);
+  const isBalanceEqualToSpendable = BigNumber(totalBalance).isEqualTo(spendableBalance);
 
   const stakeTezosUrl = "https://stake.tezos.com/";
 
+  const CtaMessage = ({
+    cta,
+    subtitle,
+    title,
+  }: {
+    cta: string;
+    subtitle: string;
+    title: string;
+  }) => <EmptyMessage cta={cta} ctaUrl={stakeTezosUrl} subtitle={subtitle} title={title} />;
+
+  const getCtaMessage = () => {
+    if (!isVerified) {
+      return <VerifyMessage />;
+    }
+
+    if (!delegate) {
+      return (
+        <CtaMessage
+          cta="Start earning"
+          subtitle="Unlock the potential of your tez. Delegate or stake now and see your rewards grow."
+          title="Earn rewards"
+        />
+      );
+    }
+
+    if (isBalanceEqualToSpendable) {
+      return (
+        <CtaMessage
+          cta="Stake"
+          subtitle="Maximize your tez with staking.com. Secure, efficient, and simple."
+          title="Boost your rewards"
+        />
+      );
+    }
+
+    return (
+      <CtaMessage
+        cta="Manage funds"
+        subtitle="Stake, unstake and finalize the unstaked tez using the Tezos staking app."
+        title="Manage your funds"
+      />
+    );
+  };
+
   return (
     <>
       <Flex zIndex={1} flexGrow={1} width="full">
-        {isVerified ? (
-          <EmptyMessage
-            cta="Start Earning"
-            ctaUrl={stakeTezosUrl}
-            subtitle={"Maximize your tez with staking.com.\nSecure, efficient, and simple."}
-            title="Boost your rewards"
-          />
-        ) : (
-          <VerifyMessage />
-        )}
+        {getCtaMessage()}
       </Flex>
       <ViewOverlay iconType="earn" />
     </>