feat: update twitter message, add tests (gitcoinco#2328)

Author: vacekj

packages/grant-explorer/src/app/chainConfig.ts

@@ -0,0 +1,34 @@
+import {
+  Chain,
+  fantom,
+  fantomTestnet,
+  goerli,
+  mainnet,
+  optimism,
+} from "wagmi/chains";
+import { arbitrum, arbitrumGoerli } from "viem/chains";
+import { pgnTestnet, pgn } from "common/src/chains";
+
+const testnetChains = () => {
+  return [
+    goerli,
+    { ...fantomTestnet, iconUrl: "/logos/fantom-logo.svg" },
+    pgnTestnet,
+    arbitrumGoerli,
+  ];
+};
+
+const mainnetChains = () => {
+  return [
+    mainnet,
+    optimism,
+    pgn,
+    arbitrum,
+    { ...fantom, iconUrl: "/logos/fantom-logo.svg" },
+  ];
+};
+
+export const allChains: Chain[] =
+  process.env.REACT_APP_ENV === "development"
+    ? [...testnetChains(), ...mainnetChains()]
+    : [...mainnetChains()];

packages/grant-explorer/src/app/wagmi.ts

@@ -10,44 +10,10 @@ import {
   walletConnectWallet,
   metaMaskWallet,
 } from "@rainbow-me/rainbowkit/wallets";
-import {
-  mainnet,
-  goerli,
-  fantom,
-  fantomTestnet,
-  optimism,
-  Chain,
-} from "wagmi/chains";
 import { configureChains, createConfig } from "wagmi";
-
-import { pgnTestnet, pgn } from "common/src/chains";
 import { publicProvider } from "wagmi/providers/public";
 import { infuraProvider } from "wagmi/providers/infura";
-import { arbitrumGoerli, arbitrum } from "viem/chains";
-
-const testnetChains = () => {
-  return [
-    goerli,
-    { ...fantomTestnet, iconUrl: "/logos/fantom-logo.svg" },
-    pgnTestnet,
-    arbitrumGoerli,
-  ];
-};
-
-const mainnetChains = () => {
-  return [
-    mainnet,
-    optimism,
-    pgn,
-    arbitrum,
-    { ...fantom, iconUrl: "/logos/fantom-logo.svg" },
-  ];
-};
-
-export const allChains: Chain[] =
-  process.env.REACT_APP_ENV === "development"
-    ? [...testnetChains(), ...mainnetChains()]
-    : [...mainnetChains()];
+import { allChains } from "./chainConfig";
 
 export const { chains, publicClient, webSocketPublicClient } = configureChains(
   allChains,

packages/grant-explorer/src/checkoutStore.test.tsx

@@ -1,7 +1,8 @@
 import { useCheckoutStore } from "./checkoutStore";
-import { ProgressStatus } from "./features/api/types";
+import { CartProject, ProgressStatus } from "./features/api/types";
 import { ChainId } from "common";
 import { beforeEach } from "vitest";
+import { makeApprovedProjectData } from "./test-utils";
 
 const store = useCheckoutStore;
 const initialState = store.getState();
@@ -67,4 +68,17 @@ describe("Checkout Store", () => {
       ChainId.GOERLI_CHAIN_ID,
     ]);
   });
+
+  it("chainsToCheckout manipulation", async () => {
+    const projects: CartProject[] = [
+      makeApprovedProjectData(),
+      makeApprovedProjectData(),
+      makeApprovedProjectData(),
+    ];
+    expect(store.getState().checkedOutProjects).toEqual([]);
+
+    store.getState().setCheckedOutProjects(projects);
+    expect(store.getState().checkedOutProjects).toStrictEqual(projects);
+    expect(store.getState().getCheckedOutProjects()).toStrictEqual(projects);
+  });
 });

packages/grant-explorer/src/checkoutStore.ts

@@ -24,7 +24,7 @@ import {
 import { MRC_CONTRACTS } from "./features/api/contracts";
 import { groupBy, uniq } from "lodash-es";
 import { datadogLogs } from "@datadog/browser-logs";
-import { allChains } from "./app/wagmi";
+import { allChains } from "./app/chainConfig";
 import { WalletClient } from "wagmi";
 import { getContract, getWalletClient, PublicClient } from "@wagmi/core";
 
@@ -54,6 +54,9 @@ interface CheckoutState {
     walletClient: WalletClient,
     publicClient: PublicClient
   ) => Promise<void>;
+  getCheckedOutProjects: () => CartProject[];
+  checkedOutProjects: CartProject[];
+  setCheckedOutProjects: (newArray: CartProject[]) => void;
 }
 
 const defaultProgressStatusForAllChains = Object.fromEntries(
@@ -289,6 +292,9 @@ export const useCheckoutStore = create<CheckoutState>()(
               [chainId]: ProgressStatus.IS_SUCCESS,
             },
           }));
+          set({
+            checkedOutProjects: [...get().checkedOutProjects, ...donations],
+          });
         } catch (error) {
           datadogLogs.logger.error(
             `error: vote - ${error}. Data - ${donations.toString()}`
@@ -305,6 +311,15 @@ export const useCheckoutStore = create<CheckoutState>()(
       }
       /* End main chain loop*/
     },
+    checkedOutProjects: [],
+    getCheckedOutProjects: () => {
+      return get().checkedOutProjects;
+    },
+    setCheckedOutProjects: (newArray: CartProject[]) => {
+      set({
+        checkedOutProjects: newArray,
+      });
+    },
   }))
 );
 

packages/grant-explorer/src/features/api/voting.ts

@@ -14,7 +14,7 @@ import mrcAbi from "./abi/multiRoundCheckout";
 import { ChainId } from "common";
 import { WalletClient } from "wagmi";
 import { getContract, getPublicClient } from "@wagmi/core";
-import { allChains } from "../../app/wagmi";
+import { allChains } from "../../app/chainConfig";
 
 export type PermitSignature = {
   v: number;

packages/grant-explorer/src/features/discovery/RoundCard.tsx

@@ -1,6 +1,6 @@
 import { ChainId, renderToPlainText, truncateDescription } from "common";
 import { RoundOverview } from "../api/rounds";
-import { getDaysLeft } from "../api/utils";
+import { getDaysLeft, payoutTokens } from "../api/utils";
 import {
   BasicCard,
   CardContent,
@@ -19,13 +19,23 @@ type RoundCardProps = {
 
 const RoundCard = (props: RoundCardProps) => {
   const daysLeft = getDaysLeft(Number(props.round.roundEndTime));
+  const chainIdEnumValue = ChainId[props.round.chainId as keyof typeof ChainId];
 
-  const { data: tokenData } = useToken({
+  const { data } = useToken({
     address: getAddress(props.round.token),
     chainId: Number(props.round.chainId),
   });
 
-  const chainIdEnumValue = ChainId[props.round.chainId as keyof typeof ChainId];
+  const nativePayoutToken = payoutTokens.find(
+    (t) =>
+      t.chainId === chainIdEnumValue &&
+      t.address === getAddress(props.round.token)
+  );
+
+  const tokenData = data ?? {
+    ...nativePayoutToken,
+    symbol: nativePayoutToken?.name ?? "ETH",
+  };
 
   const approvedApplicationsCount = props.round.projects?.length ?? 0;
 

packages/grant-explorer/src/features/round/ThankYou.ignored.tsx

@@ -0,0 +1,125 @@
+import { fireEvent, screen } from "@testing-library/react";
+import ThankYou, {
+  createTwitterShareText,
+  createTwitterShareUrl,
+  TwitterButton,
+} from "./ThankYou";
+import { renderWithContext } from "../../test-utils";
+import { zeroAddress } from "viem";
+import { expect } from "vitest";
+
+vi.mock("wagmi", async () => {
+  const actual = await vi.importActual<typeof import("wagmi")>("wagmi");
+  return {
+    ...actual,
+    useAccount: () => ({
+      address: "",
+    }),
+  };
+});
+
+describe("<TwitterButton />", () => {
+  it("Should render text inside button", async () => {
+    renderWithContext(
+      <TwitterButton address={zeroAddress} isMrc={true} roundName={"Round"} />
+    );
+
+    expect(screen.getByText("Share on Twitter")).toBeInTheDocument();
+  });
+
+  it("Should redirect to twitter with correct text", async () => {
+    const openSpy = vi.spyOn(window, "open").mockImplementation(() => {
+      return null;
+    });
+
+    renderWithContext(
+      <TwitterButton address={zeroAddress} isMrc={true} roundName={"Round"} />
+    );
+
+    fireEvent.click(screen.getByText("Share on Twitter"));
+    expect(openSpy).toHaveBeenCalledOnce();
+    expect(openSpy).toHaveBeenCalledWith(
+      "https://twitter.com/share?text=I%20just%20donated%20to%20Round%20and%20more%20on%20%40gitcoin.%20Join%20me%20in%20making%20a%20difference%20by%20donating%20today%2C%20and%20check%20out%20the%20projects%20I%20supported%20on%20my%20Donation%20History%20page!%0A%0Ahttps%3A%2F%2Fexplorer.gitcoin.co%2F%23%2Fcontributors%2F0x0000000000000000000000000000000000000000",
+      "_blank"
+    );
+  });
+});
+
+describe("createTwitterShareUrl", () => {
+  it("encodes the url properly", function () {
+    expect(
+      createTwitterShareUrl({
+        address: zeroAddress,
+        isMrc: false,
+      })
+    ).toEqual(
+      "https://twitter.com/share?text=I%20just%20donated%20to%20a%20round%20on%20%40gitcoin.%20Join%20me%20in%20making%20a%20difference%20by%20donating%20today%2C%20and%20check%20out%20the%20projects%20I%20supported%20on%20my%20Donation%20History%20page!%0A%0Ahttps%3A%2F%2Fexplorer.gitcoin.co%2F%23%2Fcontributors%2F0x0000000000000000000000000000000000000000"
+    );
+  });
+});
+
+describe("createTwiterShareText", () => {
+  it("handles no round name", function () {
+    expect(
+      createTwitterShareText({
+        address: zeroAddress,
+        isMrc: false,
+      })
+    ).toEqual(
+      `I just donated to a round on @gitcoin. Join me in making a difference by donating today, and check out the projects I supported on my Donation History page!
+
+https://explorer.gitcoin.co/#/contributors/0x0000000000000000000000000000000000000000`
+    );
+  });
+
+  it("handles no round name", function () {
+    expect(
+      createTwitterShareText({
+        address: zeroAddress,
+        isMrc: false,
+      })
+    ).toEqual(
+      `I just donated to a round on @gitcoin. Join me in making a difference by donating today, and check out the projects I supported on my Donation History page!
+
+https://explorer.gitcoin.co/#/contributors/0x0000000000000000000000000000000000000000`
+    );
+  });
+
+  it("handles one round, no mrc", function () {
+    expect(
+      createTwitterShareText({
+        address: zeroAddress,
+        isMrc: false,
+        roundName: "Round",
+      })
+    ).toEqual(
+      `I just donated to Round on @gitcoin. Join me in making a difference by donating today, and check out the projects I supported on my Donation History page!
+
+https://explorer.gitcoin.co/#/contributors/0x0000000000000000000000000000000000000000`
+    );
+  });
+
+  it("handles one round plus mrc", function () {
+    expect(
+      createTwitterShareText({
+        address: zeroAddress,
+        isMrc: true,
+        roundName: "Round",
+      })
+    ).toEqual(
+      `I just donated to Round and more on @gitcoin. Join me in making a difference by donating today, and check out the projects I supported on my Donation History page!
+
+https://explorer.gitcoin.co/#/contributors/0x0000000000000000000000000000000000000000`
+    );
+  });
+});
+
+describe.skip("<ThankYou/>", () => {
+  it("Should show twitter, go back home, view your trasaction button", async () => {
+    renderWithContext(<ThankYou />);
+
+    expect(screen.queryByTestId("view-tx-button")).toBeInTheDocument();
+    expect(screen.queryByTestId("twitter-button")).toBeInTheDocument();
+    expect(screen.queryByTestId("home-button")).toBeInTheDocument();
+  });
+});