fix: make manager safe app compatible (#3737)

* fix: make manager safe app compatible

* adds missing dependency to tests

* add missing deps for tests

Author: nijoe1

packages/round-manager/package.json

@@ -38,6 +38,8 @@
     "@openzeppelin/merkle-tree": "^1.0.2",
     "@rainbow-me/rainbowkit": "2.1.2",
     "@reduxjs/toolkit": "^1.8.1",
+    "@safe-global/safe-apps-provider": "^0.18.5",
+    "@safe-global/safe-apps-react-sdk": "^4.7.2",
     "@sentry/integrations": "^7.28.0",
     "@sentry/react": "^7.27.0",
     "@sentry/tracing": "^7.26.0",

packages/round-manager/public/manager-logo.svg

@@ -0,0 +1,36 @@
+{
+    "short_name": "Manager",
+    "name": "Gitcoin Safe App Manager",
+    "description": "Gitcoin Safe App Manager",
+    "icons": [
+      {
+        "src": "manager-logo.svg",
+        "sizes": "any",
+        "type": "image/svg+xml"
+      },
+      {
+        "src": "favicon.ico",
+        "sizes": "64x64 32x32 24x24 16x16",
+        "type": "image/x-icon"
+      },
+      {
+        "src": "favicon.ico",
+        "sizes": "64x64 32x32 24x24 16x16",
+        "type": "image/x-icon"
+      },
+      {
+        "src": "logo192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+      {
+        "src": "logo512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#FFFFFF",
+    "background_color": "#FFFFFF"  
+  }

packages/round-manager/public/manifest.json

@@ -0,0 +1,14 @@
+// App is an express application, we can add an express middleware that will set headers for manifest.json request
+// https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
+
+module.exports = function (app) {
+  app.use("/manifest.json", function (req, res, next) {
+    res.set({
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET",
+      "Access-Control-Allow-Headers":
+        "X-Requested-With, content-type, Authorization",
+    });
+    next();
+  });
+};

packages/round-manager/setUpProxy.js

@@ -1,26 +1,58 @@
 import "@rainbow-me/rainbowkit/styles.css";
 import { QueryClient } from "@tanstack/react-query";
-import { Chain as RChain, getDefaultConfig } from "@rainbow-me/rainbowkit";
 import { allNetworks, mainnetNetworks } from "common/src/chains";
 import { getClient, getConnectorClient } from "@wagmi/core";
 import { providers } from "ethers";
-import { type Account, type Chain, type Client, type Transport } from "viem";
+import {
+  http,
+  type Account,
+  type Chain,
+  type Client,
+  type Transport,
+} from "viem";
 import { Connector } from "wagmi";
-
-export const allChains: RChain[] =
-  process.env.REACT_APP_ENV === "development" ? allNetworks : mainnetNetworks;
+import {
+  rainbowWallet,
+  safeWallet,
+  walletConnectWallet,
+  coinbaseWallet,
+} from "@rainbow-me/rainbowkit/wallets";
+import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 
 /* TODO: remove hardcoded value once we have environment variables validation */
 const projectId =
   process.env.REACT_APP_WALLETCONNECT_PROJECT_ID ??
   "2685061cae0bcaf2b244446153eda9e1";
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "Popular",
+      wallets: [safeWallet, rainbowWallet, walletConnectWallet, coinbaseWallet],
+    },
+  ],
+  {
+    appName: "Gitcoin Manager",
+    projectId,
+  }
+);
+export const allChains: Chain[] =
+  process.env.REACT_APP_ENV === "development" ? allNetworks : mainnetNetworks;
+
+import { createConfig } from "wagmi";
+
+const transports = allChains.reduce(
+  (acc, chain) => {
+    acc[chain.id] = http();
+    return acc;
+  },
+  {} as Record<number, ReturnType<typeof http>>
+);
 
-export const config = getDefaultConfig({
-  appName: "Gitcoin Manager",
-  projectId,
-  chains: [...allChains] as [Chain, ...Chain[]],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}) as any;
+export const config = createConfig({
+  chains: [...allChains] as unknown as readonly [Chain, ...Chain[]],
+  connectors,
+  transports,
+});
 
 const queryClient = new QueryClient();
 

packages/round-manager/src/app/wagmi.ts

@@ -26,10 +26,11 @@ jest.mock("wagmi", () => ({
     chainId: 1,
     address: "0x0",
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 jest.mock("data-layer", () => ({
   ...jest.requireActual("data-layer"),

packages/round-manager/src/context/program/__tests__/ReadProgramContext.test.tsx

@@ -12,6 +12,7 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("../../../features/api/payoutStrategy/payoutStrategy");
 
@@ -23,7 +24,6 @@ jest.mock("viem", () => ({
 jest.mock("common", () => ({
   ...jest.requireActual("common"),
   useAllo: jest.fn(),
-  
 }));
 
 const alloBackend = new AlloV1({
@@ -37,7 +37,6 @@ const alloBackend = new AlloV1({
   transactionSender: createMockTransactionSender(),
 });
 
-
 const testParams: ReclaimFundsParams = {
   allo: alloBackend,
   payoutStrategy: "0x0000000000000000000000000000000000000001",

packages/round-manager/src/context/round/__tests__/ReclaimFundsContext.test.tsx

@@ -12,10 +12,11 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 jest.mock("../../../features/common/Auth", () => ({
   useWallet: () => mockWallet,

packages/round-manager/src/context/round/__tests__/RoundContext.test.tsx

@@ -31,10 +31,11 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 
 jest.mock("../../../features/api/round");

packages/round-manager/src/context/round/__tests__/UpdateRoundContext.test.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+import { useConnect, useAccount } from "wagmi";
+
+const AUTOCONNECTED_CONNECTOR_IDS = ["safe"];
+
+function useAutoConnect() {
+  const { connect, connectors } = useConnect();
+  const { address } = useAccount();
+
+  useEffect(() => {
+    AUTOCONNECTED_CONNECTOR_IDS.forEach((connector) => {
+      const connectorInstance = connectors.find((c) => c.id === connector);
+      const isIframe = window.top !== window.self;
+      if (connectorInstance && isIframe) {
+        connect({ connector: connectorInstance });
+      }
+    });
+  }, [connect, connectors, address]);
+}
+
+export const SafeAutoConnect = ({
+  children,
+}: {
+  children: JSX.Element | JSX.Element[];
+}) => {
+  useAutoConnect();
+  return <>{children}</>;
+};

packages/round-manager/src/features/api/SafeAutoConnect.tsx

@@ -20,10 +20,11 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 
 describe("TransactionBuilder", () => {

packages/round-manager/src/features/api/__tests__/round.test.ts

@@ -5,7 +5,7 @@ import ErrorModal from "../../common/ErrorModal";
 jest.mock("../../common/Auth");
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 
 describe("<ErrorModal />", () => {

packages/round-manager/src/features/common/__tests__/ErrorModal.test.tsx

@@ -18,7 +18,7 @@ jest.mock("../../api/ipfs");
 jest.mock("../../common/Auth");
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 
 jest.mock("../../../constants", () => ({

packages/round-manager/src/features/program/__tests__/CreateProgramPage.test.tsx

@@ -14,10 +14,11 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 jest.mock("data-layer", () => ({
   ...jest.requireActual("data-layer"),

packages/round-manager/src/features/program/__tests__/ListProgramPage.test.tsx

@@ -23,7 +23,7 @@ jest.mock("../../common/Auth");
 jest.mock("../../api/program");
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),

packages/round-manager/src/features/program/__tests__/ViewProgramPage.test.tsx

@@ -170,7 +170,7 @@ export default function ViewApplicationPage() {
     };
 
     if (roundChainId) fetchApplications();
-  }, [roundChainId, roundId]);
+  }, [roundChainId, roundId, id, dataLayer]);
 
   useEffect(() => {
     if (contractUpdatingStatus === ProgressStatus.IS_ERROR) {
@@ -334,7 +334,10 @@ export default function ViewApplicationPage() {
 
       if (application?.answers && application.answers.length > 0) {
         for (let _answerBlock of application.answers) {
-          if (_answerBlock.encryptedAnswer && !isLitUnavailable(round.chainId!)) {
+          if (
+            _answerBlock.encryptedAnswer &&
+            !isLitUnavailable(round.chainId!)
+          ) {
             try {
               const encryptedAnswer = _answerBlock.encryptedAnswer;
               const base64EncryptedString = [
@@ -349,7 +352,7 @@ export default function ViewApplicationPage() {
                 chainId: Number(roundChainId!),
                 contract: roundId.startsWith("0x")
                   ? roundId
-                  : round?.payoutStrategy.id ?? "",
+                  : (round?.payoutStrategy.id ?? ""),
               });
 
               const decryptedString = await lit.decryptString(
@@ -816,7 +819,7 @@ export default function ViewApplicationPage() {
                   answerBlocks?.map((block: AnswerBlock) => {
                     const answerText = Array.isArray(block.answer)
                       ? block.answer.join(", ")
-                      : block.answer ?? "";
+                      : (block.answer ?? "");
 
                     return (
                       <div key={block.questionId} className="pb-5">

packages/round-manager/src/features/round/ViewApplicationPage.tsx

@@ -29,10 +29,11 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 jest.mock("../../api/application");
 jest.mock("../../common/Auth", () => ({

packages/round-manager/src/features/round/__tests__/ApplicationsToApproveReject.test.tsx

@@ -30,11 +30,12 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 
 jest.mock("common/src/allo/backends/allo-v1");

packages/round-manager/src/features/round/__tests__/ApplicationsToReview.test.tsx

@@ -12,10 +12,11 @@ jest.mock("wagmi", () => ({
   useAccount: () => ({
     chainId: 1,
   }),
+  createConfig: jest.fn(),
 }));
 jest.mock("@rainbow-me/rainbowkit", () => ({
   ConnectButton: jest.fn(),
-  getDefaultConfig: jest.fn(),
+  connectorsForWallets: jest.fn(),
 }));
 jest.mock("../../common/Navbar");
 jest.mock("../../common/Auth");
@@ -33,9 +34,7 @@ jest.mock("react-router-dom", () => ({
 }));
 
 describe("<CreateRoundPage />", () => {
-  beforeEach(() => {
-   
-  });
+  beforeEach(() => {});
 
   it("sends program to form wizard", () => {
     const programs = [makeProgramData({ id: programId })];