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}</>;
+};