feat: make cart handle new chains gracefully (#2372)

Author: vacekj

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

@@ -1,5 +1,3 @@
-// cartStore.test.ts
-
 import { useCartStorage } from "./store";
 import { ChainId } from "common";
 import {
@@ -67,9 +65,9 @@ describe("useCartStorage Zustand store", () => {
     const chainId: ChainId = ChainId.MAINNET; // Mock ChainId
     const payoutToken: VotingToken = votingTokensMap[ChainId.MAINNET][0];
 
-    useCartStorage.getState().setPayoutTokenForChain(chainId, payoutToken);
+    useCartStorage.getState().setVotingTokenForChain(chainId, payoutToken);
 
-    expect(useCartStorage.getState().chainToPayoutToken[chainId]).toEqual(
+    expect(useCartStorage.getState().chainToVotingToken[chainId]).toEqual(
       payoutToken
     );
   });
@@ -119,18 +117,18 @@ describe("useCartStorage Zustand store", () => {
     expect(useCartStorage.getState().projects).toEqual(initialProjects);
   });
 
-  test("should override payout token for a specific chain", () => {
+  test("should override voting token for a specific chain", () => {
     const chainId: ChainId = ChainId.MAINNET; // Mock ChainId
-    const initialPayoutToken: VotingToken = votingTokensMap[ChainId.MAINNET][0];
-    const newPayoutToken: VotingToken = votingTokensMap[ChainId.MAINNET][1];
+    const initialVotingToken: VotingToken = votingTokensMap[ChainId.MAINNET][0];
+    const newVotingToken: VotingToken = votingTokensMap[ChainId.MAINNET][1];
 
     useCartStorage
       .getState()
-      .setPayoutTokenForChain(chainId, initialPayoutToken);
-    useCartStorage.getState().setPayoutTokenForChain(chainId, newPayoutToken);
+      .setVotingTokenForChain(chainId, initialVotingToken);
+    useCartStorage.getState().setVotingTokenForChain(chainId, newVotingToken);
 
-    expect(useCartStorage.getState().chainToPayoutToken[chainId]).toEqual(
-      newPayoutToken
+    expect(useCartStorage.getState().chainToVotingToken[chainId]).toEqual(
+      newVotingToken
     );
   });
 
@@ -181,16 +179,16 @@ describe("useCartStorage Zustand store", () => {
     const payoutToken: VotingToken = votingTokensMap[ChainId.MAINNET][0];
 
     const initialChainToPayoutToken = {
-      ...useCartStorage.getState().chainToPayoutToken,
+      ...useCartStorage.getState().chainToVotingToken,
     };
 
     useCartStorage
       .getState()
       // @ts-expect-error We purposefully pass a wrong ChainId here
-      .setPayoutTokenForChain(nonExistingChainId, payoutToken);
+      .setVotingTokenForChain(nonExistingChainId, payoutToken);
 
-    // The state should remain unchanged unchanged.
-    expect(useCartStorage.getState().chainToPayoutToken).toEqual(
+    // The state should remain unchanged.
+    expect(useCartStorage.getState().chainToVotingToken).toEqual(
       initialChainToPayoutToken
     );
   });

packages/grant-explorer/src/checkoutStore.ts

@@ -114,7 +114,8 @@ export const useCheckoutStore = create<CheckoutState>()(
         [chain: number]: CartProject[];
       };
 
-      const payoutTokens = useCartStorage.getState().chainToPayoutToken;
+      const getVotingTokenForChain =
+        useCartStorage.getState().getVotingTokenForChain;
 
       const totalDonationPerChain = Object.fromEntries(
         Object.entries(projectsByChain).map(([key, value]) => [
@@ -126,7 +127,7 @@ export const useCheckoutStore = create<CheckoutState>()(
                 acc +
                 parseUnits(
                   amount ? amount : "0",
-                  payoutTokens[Number(key) as ChainId].decimal
+                  getVotingTokenForChain(Number(key) as ChainId).decimal
                 ),
               0n
             ),
@@ -149,7 +150,7 @@ export const useCheckoutStore = create<CheckoutState>()(
         const wc = await getWalletClient({
           chainId,
         })!;
-        const token = payoutTokens[chainId];
+        const token = getVotingTokenForChain(chainId);
 
         let sig;
         let nonce;

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

@@ -312,7 +312,7 @@ const ARBITRUM_TOKENS: VotingToken[] = [
 const ARBITRUM_GOERLI_TOKENS: VotingToken[] = [
   {
     name: "ETH",
-    chainId: ChainId.PGN,
+    chainId: ChainId.ARBITRUM_GOERLI,
     address: zeroAddress,
     decimal: 18,
     logo: TokenNamesAndLogos["ETH"],

packages/grant-explorer/src/features/round/ViewCartPage/CartWithProjects.tsx

@@ -25,8 +25,8 @@ export function CartWithProjects({ cart, chainId }: Props) {
 
   const [fixedDonation, setFixedDonation] = useState("");
 
-  const { chainToPayoutToken, setPayoutTokenForChain } = useCartStorage();
-  const selectedPayoutToken = chainToPayoutToken[chainId];
+  const { getVotingTokenForChain, setVotingTokenForChain } = useCartStorage();
+  const selectedPayoutToken = getVotingTokenForChain(chainId);
   const payoutTokenOptions: VotingToken[] = getVotingTokenOptions(
     Number(chainId)
   ).filter((p) => p.canVote);
@@ -42,7 +42,7 @@ export function CartWithProjects({ cart, chainId }: Props) {
   /** The payout token data (like permit version etc.) might've changed since the user last visited the page
    * Refresh it to update, default to the first payout token if the previous token was deleted */
   useEffect(() => {
-    setPayoutTokenForChain(
+    setVotingTokenForChain(
       chainId,
       getVotingTokenOptions(chainId).find(
         (token) => token.address === selectedPayoutToken.address
@@ -83,7 +83,7 @@ export function CartWithProjects({ cart, chainId }: Props) {
             <PayoutTokenDropdown
               selectedPayoutToken={selectedPayoutToken}
               setSelectedPayoutToken={(token) => {
-                setPayoutTokenForChain(chainId, token);
+                setVotingTokenForChain(chainId, token);
               }}
               payoutTokenOptions={payoutTokenOptions}
             />

packages/grant-explorer/src/features/round/ViewCartPage/ChainConfirmationModalBody.tsx

@@ -32,7 +32,9 @@ export function ChainConfirmationModalBody({
     }
   };
 
-  const payoutTokens = useCartStorage((state) => state.chainToPayoutToken);
+  const getVotingTokenForChain = useCartStorage(
+    (state) => state.getVotingTokenForChain
+  );
   return (
     <>
       <p className="text-sm text-grey-400">
@@ -43,7 +45,9 @@ export function ChainConfirmationModalBody({
         {Object.keys(projectsByChain).map((chainId, index) => (
           <ChainSummary
             chainId={Number(chainId) as ChainId}
-            selectedPayoutToken={payoutTokens[Number(chainId) as ChainId]}
+            selectedPayoutToken={getVotingTokenForChain(
+              Number(chainId) as ChainId
+            )}
             totalDonation={totalDonationsPerChain[Number(chainId)]}
             checked={chainIdsBeingCheckedOut.includes(Number(chainId))}
             onChange={(checked) =>

packages/grant-explorer/src/features/round/ViewCartPage/SummaryContainer.tsx

@@ -22,7 +22,8 @@ import { formatUnits, parseUnits } from "viem";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 
 export function SummaryContainer() {
-  const { projects, chainToPayoutToken: payoutTokens } = useCartStorage();
+  const { projects, getVotingTokenForChain, chainToVotingToken } =
+    useCartStorage();
   const { checkout, voteStatus, chainsToCheckout } = useCheckoutStore();
 
   const { openConnectModal } = useConnectModal();
@@ -83,13 +84,15 @@ export function SummaryContainer() {
               acc +
               parseUnits(
                 amount ? amount : "0",
-                payoutTokens[Number(key) as ChainId]?.decimal
+                getVotingTokenForChain(Number(key) as ChainId).decimal
               ),
             0n
           ),
       ])
     );
-  }, [payoutTokens, projectsByChain]);
+    /* NB: we want to update the totalDonationsPerChain value based on chainToVotingToken */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getVotingTokenForChain, chainToVotingToken, projectsByChain]);
 
   const navigate = useNavigate();
   const { address, isConnected } = useAccount();
@@ -247,13 +250,13 @@ export function SummaryContainer() {
         Object.keys(totalDonationsPerChain).map((chainId) =>
           getTokenPrice(
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            payoutTokens[Number(chainId) as ChainId].redstoneTokenId!
+            getVotingTokenForChain(Number(chainId) as ChainId).redstoneTokenId!
           ).then((price) => {
             return (
               Number(
                 formatUnits(
                   totalDonationsPerChain[chainId],
-                  payoutTokens[Number(chainId) as ChainId].decimal
+                  getVotingTokenForChain(Number(chainId) as ChainId).decimal
                 )
               ) * Number(price)
             );
@@ -284,7 +287,9 @@ export function SummaryContainer() {
           <Summary
             key={chainId}
             chainId={Number(chainId) as ChainId}
-            selectedPayoutToken={payoutTokens[Number(chainId) as ChainId]}
+            selectedPayoutToken={getVotingTokenForChain(
+              Number(chainId) as ChainId
+            )}
             totalDonation={totalDonationsPerChain[chainId]}
           />
         ))}

packages/grant-explorer/src/store.ts

@@ -3,6 +3,7 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { CartProject, VotingToken } from "./features/api/types";
 import { votingTokensMap } from "./features/api/utils";
+import { zeroAddress } from "viem";
 
 interface CartState {
   projects: CartProject[];
@@ -11,19 +12,38 @@ interface CartState {
   remove: (grantApplicationId: string) => void;
   updateDonationsForChain: (chainId: ChainId, amount: string) => void;
   updateDonationAmount: (grantApplicationId: string, amount: string) => void;
-  chainToPayoutToken: Record<ChainId, VotingToken>;
-  setPayoutTokenForChain: (chainId: ChainId, payoutToken: VotingToken) => void;
+  chainToVotingToken: Record<ChainId, VotingToken>;
+  getVotingTokenForChain: (chainId: ChainId) => VotingToken;
+  setVotingTokenForChain: (chainId: ChainId, votingToken: VotingToken) => void;
 }
 
-const ethOnlyPayoutTokens = Object.fromEntries(
-  Object.entries(votingTokensMap).map(
-    ([key, value]) =>
-      [
-        Number(key) as ChainId,
-        value.find((token) => token.defaultForVoting && token.canVote) ??
-          value[0],
-      ] as [ChainId, VotingToken]
-  )
+/**
+ * Consumes an array of voting tokens and returns the default one.
+ * If there's no default one, return the first one.
+ * If the array is empty,
+ * return the native token for the chain (Although this should never happen)
+ * */
+function getDefaultVotingToken(votingTokens: VotingToken[], chainId: ChainId) {
+  return (
+    votingTokens.find((token) => token.defaultForVoting && token.canVote) ??
+    votingTokens[0] ?? {
+      chainId,
+      canVote: true,
+      defaultForVoting: true,
+      decimal: 18,
+      name: "Native Token",
+      address: zeroAddress,
+    }
+  );
+}
+
+const defaultVotingTokens = Object.fromEntries(
+  Object.entries(votingTokensMap).map(([key, value]) => {
+    return [
+      Number(key) as ChainId,
+      getDefaultVotingToken(value, Number(key) as ChainId),
+    ] as [ChainId, VotingToken];
+  })
 ) as Record<ChainId, VotingToken>;
 
 export const useCartStorage = create<CartState>()(
@@ -77,8 +97,29 @@ export const useCartStorage = create<CartState>()(
           });
         }
       },
-      chainToPayoutToken: ethOnlyPayoutTokens,
-      setPayoutTokenForChain: (chainId: ChainId, payoutToken: VotingToken) => {
+      chainToVotingToken: defaultVotingTokens,
+      getVotingTokenForChain: (chainId: ChainId) => {
+        const tokenFromStore = get().chainToVotingToken[chainId];
+        if (!tokenFromStore) {
+          const defaultToken = getDefaultVotingToken(
+            votingTokensMap[chainId],
+            chainId
+          );
+          console.log(
+            "no token for chain",
+            chainId,
+            " defaulting to ",
+            defaultToken,
+            " and setting it as the default token for that chain"
+          );
+
+          get().setVotingTokenForChain(chainId, defaultToken);
+          return defaultToken;
+        } else {
+          return tokenFromStore;
+        }
+      },
+      setVotingTokenForChain: (chainId: ChainId, payoutToken: VotingToken) => {
         if (!Object.values(ChainId).includes(chainId)) {
           console.warn(
             "Tried setting payoutToken",
@@ -93,15 +134,14 @@ export const useCartStorage = create<CartState>()(
         }
 
         set({
-          chainToPayoutToken: {
-            ...get().chainToPayoutToken,
+          chainToVotingToken: {
+            ...get().chainToVotingToken,
             [chainId]: payoutToken,
           },
         });
       },
     }),
     {
-      /*This is the localStorage key. Change this whenever the shape of the stores objects changes. append a v1, v2. etc. */
       name: "cart-storage",
       version: 3,
     }