Merge pull request #2316 from trilitech/fix-buy-tez-url-on-web

[WEB] Fix buy TEZ url

apps/web/src/components/AccountCard/AccountBalance.test.tsx

@@ -5,7 +5,9 @@ import {
   addTestAccount,
   assetsActions,
   makeStore,
+  networksActions,
 } from "@umami/state";
+import { GHOSTNET, MAINNET } from "@umami/tezos";
 
 import { AccountBalance } from "./AccountBalance";
 import { act, render, screen, userEvent, waitFor, within } from "../../testUtils";
@@ -20,7 +22,9 @@ beforeEach(() => {
 });
 
 describe("<AccountBalance />", () => {
-  it("renders a buy tez link", () => {
+  it("renders a buy tez link for mainnet", () => {
+    store.dispatch(networksActions.setCurrent(MAINNET));
+
     render(<AccountBalance />, { store });
 
     const link = screen.getByRole("link", { name: "Buy" });
@@ -31,6 +35,16 @@ describe("<AccountBalance />", () => {
     );
   });
 
+  it("renders a buy tez link for ghostnet", () => {
+    store.dispatch(networksActions.setCurrent(GHOSTNET));
+
+    render(<AccountBalance />, { store });
+
+    const link = screen.getByRole("link", { name: "Buy" });
+    expect(link).toBeVisible();
+    expect(link).toHaveAttribute("href", "https://faucet.ghostnet.teztnets.com/");
+  });
+
   it("renders a receive button", () => {
     render(<AccountBalance />, { store });
 

apps/web/src/components/AccountCard/AccountBalance.tsx

@@ -1,6 +1,11 @@
 import { Box, Flex, Link, Text } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
-import { useCurrentAccount, useGetAccountBalance, useGetDollarBalance } from "@umami/state";
+import {
+  useBuyTezUrl,
+  useCurrentAccount,
+  useGetAccountBalance,
+  useGetDollarBalance,
+} from "@umami/state";
 import { TEZ, prettyTezAmount } from "@umami/tezos";
 
 import { SendTezButton } from "./SendTezButton";
@@ -19,7 +24,7 @@ export const AccountBalance = () => {
   const usdBalance = useGetDollarBalance()(address);
   const isVerified = useIsAccountVerified();
 
-  const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${address}&network=tezos&commodity_id=xtz.simple.tezos`;
+  const buyTezUrl = useBuyTezUrl(address);
 
   const getUsdBalance = () => {
     if (balance === undefined) {

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

@@ -6,7 +6,7 @@ import {
   makeStore,
   networksActions,
 } from "@umami/state";
-import { MAINNET } from "@umami/tezos";
+import { GHOSTNET, MAINNET } from "@umami/tezos";
 import {
   type TzktCombinedOperation,
   getCombinedOperations,
@@ -45,7 +45,7 @@ describe("<Activity />", () => {
       jest.mocked(getRelatedTokenTransfers).mockResolvedValue([]);
     });
 
-    it("displays an empty state ", async () => {
+    it("displays an empty state", async () => {
       render(<Activity />, { store });
 
       await waitFor(() => {
@@ -57,6 +57,32 @@ describe("<Activity />", () => {
       ).toBeVisible();
       expect(screen.queryByTestId("view-all-operations-button")).not.toBeInTheDocument();
     });
+
+    it("has correct mainnet Buy Tez link", async () => {
+      store.dispatch(networksActions.setCurrent(MAINNET));
+      render(<Activity />, { store });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("empty-state-message")).toBeVisible();
+      });
+      const link = screen.getByRole("link", { name: "Buy Tez Now" });
+      expect(link).toHaveAttribute(
+        "href",
+        `https://widget.wert.io/default/widget/?commodity=XTZ&address=${account.address.pkh}&network=tezos&commodity_id=xtz.simple.tezos`
+      );
+    });
+
+    it("has correct ghostnet Buy Tez link", async () => {
+      store.dispatch(networksActions.setCurrent(GHOSTNET));
+      render(<Activity />, { store });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("empty-state-message")).toBeVisible();
+      });
+      const link = screen.getByRole("link", { name: "Buy Tez Now" });
+      expect(link).toBeVisible();
+      expect(link).toHaveAttribute("href", "https://faucet.ghostnet.teztnets.com/");
+    });
   });
 
   describe("with operations", () => {

apps/web/src/views/Activity/Activity.tsx

@@ -1,7 +1,7 @@
 import { Box, Center, Divider, Flex, Image, Spinner } from "@chakra-ui/react";
 import { type Account } from "@umami/core";
 import { useGetOperations } from "@umami/data-polling";
-import { useCurrentAccount } from "@umami/state";
+import { useBuyTezUrl, useCurrentAccount } from "@umami/state";
 
 import loadingDots from "../../assets/loading-dots.gif";
 import { EmptyMessage } from "../../components/EmptyMessage";
@@ -21,7 +21,7 @@ export const Activity = () => {
     isVerified
   );
 
-  const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${currentAccount?.address.pkh}&network=tezos&commodity_id=xtz.simple.tezos`;
+  const buyTezUrl = useBuyTezUrl(currentAccount?.address.pkh);
 
   const isEmpty = operations.length === 0 && !isLoading;
 

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

@@ -8,15 +8,15 @@ import { ViewOverlay } from "../../components/ViewOverlay/ViewOverlay";
 export const Earn = () => {
   const isVerified = useIsAccountVerified();
 
-  const buyTezUrl = "https://stake.tezos.com/";
+  const stakeTezosUrl = "https://stake.tezos.com/";
 
   return (
     <>
       <Flex zIndex={1} flexGrow={1} width="full">
         {isVerified ? (
           <EmptyMessage
             cta="Start Earning"
-            ctaUrl={buyTezUrl}
+            ctaUrl={stakeTezosUrl}
             subtitle={"Maximize your tez with staking.com.\nSecure, efficient, and simple."}
             title="Boost your rewards"
           />

apps/web/src/views/Tokens/Token.tsx

@@ -43,6 +43,7 @@ export const Token = ({ token }: TokenProps) => {
       _notLast={{
         borderBottom: `1px solid ${color("100")}`,
       }}
+      data-testid="token-card"
       paddingY={{ base: "18px", md: "30px" }}
     >
       <Flex alignItems="center" flex="1" gridArea="token">

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

@@ -0,0 +1,72 @@
+import { mockImplicitAccount, mockMnemonicAccount } from "@umami/core";
+import {
+  type UmamiStore,
+  accountsActions,
+  addTestAccount,
+  makeStore,
+  networksActions,
+} from "@umami/state";
+import { GHOSTNET, MAINNET } from "@umami/tezos";
+
+import { Tokens } from "./Tokens";
+import { render, screen, waitFor } from "../../testUtils";
+
+let store: UmamiStore;
+const account = mockImplicitAccount(0);
+
+beforeEach(() => {
+  store = makeStore();
+  addTestAccount(store, account);
+  store.dispatch(accountsActions.setCurrent(account.address.pkh));
+});
+
+describe("<Tokens />", () => {
+  beforeEach(() => {
+    addTestAccount(store, mockMnemonicAccount(1));
+    addTestAccount(store, mockMnemonicAccount(2));
+    store.dispatch(networksActions.setCurrent(MAINNET));
+  });
+
+  describe("without tokens", () => {
+    it("displays an empty state", async () => {
+      render(<Tokens />, { store });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("empty-state-message")).toBeVisible();
+      });
+
+      expect(screen.getByText("Get Started with Tokens")).toBeVisible();
+      expect(
+        screen.getByText("You need Tez to take part in any activity. Buy some to get started.")
+      ).toBeVisible();
+      expect(screen.getByText("Buy Tez Now")).toBeVisible();
+      expect(screen.queryByTestId("token-card")).not.toBeInTheDocument();
+    });
+
+    it("has correct mainnet Buy Tez link", async () => {
+      store.dispatch(networksActions.setCurrent(MAINNET));
+      render(<Tokens />, { store });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("empty-state-message")).toBeVisible();
+      });
+      const link = screen.getByRole("link", { name: "Buy Tez Now" });
+      expect(link).toHaveAttribute(
+        "href",
+        `https://widget.wert.io/default/widget/?commodity=XTZ&address=${account.address.pkh}&network=tezos&commodity_id=xtz.simple.tezos`
+      );
+    });
+
+    it("has correct ghostnet Buy Tez link", async () => {
+      store.dispatch(networksActions.setCurrent(GHOSTNET));
+      render(<Tokens />, { store });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("empty-state-message")).toBeVisible();
+      });
+      const link = screen.getByRole("link", { name: "Buy Tez Now" });
+      expect(link).toBeVisible();
+      expect(link).toHaveAttribute("href", "https://faucet.ghostnet.teztnets.com/");
+    });
+  });
+});

apps/web/src/views/Tokens/Tokens.tsx

@@ -1,6 +1,6 @@
 import { Flex, VStack } from "@chakra-ui/react";
 import { fullId } from "@umami/core";
-import { useCurrentAccount, useGetAccountAllTokens } from "@umami/state";
+import { useBuyTezUrl, useCurrentAccount, useGetAccountAllTokens } from "@umami/state";
 
 import { Token } from "./Token";
 import { EmptyMessage } from "../../components/EmptyMessage";
@@ -13,7 +13,7 @@ export const Tokens = () => {
   const currentAccount = useCurrentAccount()!;
   const availableTokens = useGetAccountAllTokens()(currentAccount.address.pkh);
 
-  const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${currentAccount.address.pkh}&network=tezos&commodity_id=xtz.simple.tezos`;
+  const buyTezUrl = useBuyTezUrl(currentAccount.address.pkh);
 
   return (
     <>

packages/state/src/hooks/network.test.ts

@@ -3,6 +3,7 @@ import { GHOSTNET, MAINNET, mockImplicitAddress } from "@umami/tezos";
 
 import {
   useAvailableNetworks,
+  useBuyTezUrl,
   useFindNetwork,
   useSelectNetwork,
   useSelectedNetwork,
@@ -35,6 +36,28 @@ describe("networkHooks", () => {
     });
   });
 
+  describe("useBuyTezUrl", () => {
+    it("for mainnet - returns customized mainnet url", () => {
+      store.dispatch(networksActions.setCurrent(MAINNET));
+
+      const {
+        result: { current },
+      } = renderHook(() => useBuyTezUrl("pkh123"), { store });
+      expect(current).toEqual(
+        `${MAINNET.buyTezUrl}/default/widget/?commodity=XTZ&address=pkh123&network=tezos&commodity_id=xtz.simple.tezos`
+      );
+    });
+
+    it("for others - returns url from network setting", () => {
+      store.dispatch(networksActions.setCurrent(GHOSTNET));
+
+      const {
+        result: { current },
+      } = renderHook(() => useBuyTezUrl("pkh123"), { store });
+      expect(current).toEqual(GHOSTNET.buyTezUrl);
+    });
+  });
+
   describe("useAvailableNetworks", () => {
     it("returns default networks by default", () => {
       const {

packages/state/src/hooks/network.ts

@@ -1,10 +1,22 @@
+import { MAINNET } from "@umami/tezos";
 import { useDispatch } from "react-redux";
 
 import { useAppSelector } from "./useAppSelector";
 import { assetsActions, networksActions } from "../slices";
 
 export const useSelectedNetwork = () => useAppSelector(s => s.networks.current);
 
+export const useBuyTezUrl = (pkh?: string) => {
+  const network = useSelectedNetwork();
+  let buyTezUrl = network.buyTezUrl;
+
+  if (buyTezUrl && network === MAINNET) {
+    buyTezUrl += `/default/widget/?commodity=XTZ&address=${pkh}&network=tezos&commodity_id=xtz.simple.tezos`;
+  }
+
+  return buyTezUrl;
+};
+
 export const useAvailableNetworks = () => useAppSelector(s => s.networks.available);
 
 export const useFindNetwork = () => {