Update to use ethers v6 and update chains config from dist.

package.json

@@ -4,13 +4,10 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@ethersproject/contracts": "^5.7.0",
-    "@ethersproject/providers": "^5.7.2",
-    "@ethersproject/wallet": "^5.7.0",
-    "@safe-global/protocol-kit": "^1.0.1",
-    "@safe-global/safe-deployments": "^1.25.0",
+    "@safe-global/protocol-kit": "^2.0.0",
+    "@safe-global/safe-deployments": "^1.32.0",
     "@zoralabs/zorb": "^0.1.0",
-    "ethers": "5",
+    "ethers": "^6.7.1",
     "formik": "^2.4.5",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
@@ -30,7 +27,7 @@
     "deploy": "yarn build && gh-pages -d dist"
   },
   "devDependencies": {
-    "@safe-global/safe-core-sdk-types": "^2.0.0",
+    "@safe-global/safe-core-sdk-types": "^3.0.1",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.16",
     "@typescript-eslint/eslint-plugin": "^6.12.0",

src/app/CreateSafe.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { CurrentNetwork, WalletProviderContext } from "./Root";
 import { Field, FieldArray, Formik } from "formik";
 import { Text, Button, FormControl, TextField, View, useToast } from "reshaped";
@@ -7,6 +7,8 @@ import { isAddress } from "viem";
 import { ethers } from "ethers";
 import { EthersAdapter, SafeFactory } from "@safe-global/protocol-kit";
 import { useNavigate } from "react-router-dom";
+import { AbstractSigner } from "ethers";
+import { BrowserProvider } from "ethers";
 
 function validateAddress(value: string) {
   if (!isAddress(value)) {
@@ -32,16 +34,37 @@ export function CreateSafe() {
   const network = useContext(CurrentNetwork);
   const toaster = useToast();
   const navigate = useNavigate();
+  const [signerInfo, setSignerInfo] = useState<
+    undefined | { signer: AbstractSigner; address: string }
+  >(undefined);
+
+  const updateSignerInfo = useCallback(
+    async (provider: BrowserProvider) => {
+      const signer = await provider.getSigner();
+      const address = await signer.getAddress();
+      setSignerInfo({ signer, address });
+    },
+    [setSignerInfo]
+  );
+
+  useEffect(() => {
+    if (provider) {
+      updateSignerInfo(provider);
+    }
+  }, [provider]);
 
   const submitCallback = useCallback(
     async (data: any) => {
+      if (!signerInfo) {
+        return;
+      }
       try {
         const ethAdapter = new EthersAdapter({
           ethers,
-          signerOrProvider: provider!.getSigner(),
+          signerOrProvider: signerInfo.signer,
         });
         const adapter = await SafeFactory.create({
-          ethAdapter,
+          ethAdapter: ethAdapter,
           contractNetworks,
         });
         const sdk = await adapter.deploySafe({
@@ -63,20 +86,20 @@ export function CreateSafe() {
         });
       }
     },
-    [provider]
+    [provider, signerInfo]
   );
 
   return (
     <View gap={4} paddingTop={10}>
       <Text variant="title-3">Create a new safe</Text>
       <Text variant="body-1">
-        Network: {allowedNetworks[network]?.name || "unknown"}
+        Network: {allowedNetworks[Number(network)]?.name || "unknown"}
       </Text>
       <Formik
         onSubmit={submitCallback}
         initialValues={{
           threshold: 1,
-          addresses: [provider!.getSigner()._address || "0x"],
+          addresses: [signerInfo?.address || "0x"],
         }}
         validate={validateSafeArguments}
       >
@@ -118,7 +141,7 @@ export function CreateSafe() {
                             />
                             {errors.addresses && errors.addresses[indx] && (
                               <FormControl.Error>
-                                {errors.addresses[indx]}
+                                {errors.addresses[indx].toString()}
                               </FormControl.Error>
                             )}
                           </FormControl>

src/app/NewSafeProposal.tsx

@@ -29,6 +29,7 @@ import {
   transformValuesFromWei,
   transformValuesToWei,
 } from "../utils/etherFormatting";
+import { BrowserProvider } from "ethers";
 
 const FormActionItem = ({
   name,
@@ -65,12 +66,12 @@ const createSafeAdapter = async ({
   provider,
   safeAddress,
 }: {
-  provider: ethers.providers.Web3Provider;
+  provider: BrowserProvider;
   safeAddress: Address;
 }) => {
   const ethAdapter = new EthersAdapter({
     ethers,
-    signerOrProvider: provider!.getSigner(),
+    signerOrProvider: await provider!.getSigner(),
   });
   return await Safe.create({
     ethAdapter,
@@ -89,11 +90,9 @@ const createSafeTransaction = async ({
   if (!proposal.actions) {
     return;
   }
-  const proposalData =
-    proposal.actions.length === 1 ? proposal.actions[0] : proposal?.actions;
 
   return await safe.createTransaction({
-    safeTransactionData: proposalData,
+    transactions: proposal.actions,
     options: { nonce: proposal.nonce || undefined },
   });
 };
@@ -145,7 +144,7 @@ const useSafe = ({
   provider,
   safeAddress,
 }: {
-  provider: ethers.providers.Web3Provider | null;
+  provider: BrowserProvider | null;
   safeAddress: Address | undefined;
 }) => {
   const [safe, setSafe] = useState<Safe>();
@@ -205,9 +204,8 @@ const useAccountAddress = () => {
     if (!walletProvider) return;
 
     (async () => {
-      setAddress(
-        (await walletProvider.getSigner().getAddress()) as Address | undefined
-      );
+      const signer = await walletProvider.getSigner();
+      setAddress((await signer.getAddress()) as Address | undefined);
     })();
   }, [walletProvider]);
 

src/app/Root.tsx

@@ -1,25 +1,26 @@
-import { Web3Provider } from "@ethersproject/providers";
 import { ethers } from "ethers";
 import { createContext, useCallback, useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 import { Button, View } from "reshaped";
 import { NetworkSwitcher } from "../components/NetworkSwitcher";
+import { BrowserProvider } from "ethers";
 
-export const WalletProviderContext = createContext<null | Web3Provider>(null);
+export const WalletProviderContext =
+  createContext<null | ethers.BrowserProvider>(null);
 export const CurrentNetwork = createContext(0);
 
 export const Root = () => {
-  const [provider, setProvider] = useState<Web3Provider | undefined>();
+  const [provider, setProvider] = useState<
+    ethers.BrowserProvider | undefined
+  >();
   const [currentNetwork, setCurrentNetwork] = useState<number>(0);
 
   const connectMetamask = useCallback(async () => {
-    const provider = new ethers.providers.Web3Provider(
-      (window as any).ethereum
-    );
+    const provider = new BrowserProvider((window as any).ethereum, "any");
     provider.on("accountsChanged", async (accounts) => {
       console.log({ accounts });
       const newNetwork = await provider.getNetwork();
-      setCurrentNetwork(newNetwork.chainId);
+      setCurrentNetwork(Number(newNetwork.chainId));
     });
     provider.on("disconnect", () => {
       setProvider(undefined);
@@ -28,13 +29,13 @@ export const Root = () => {
     provider.on("connect", async () => {
       setProvider(provider);
       const network = await provider.getNetwork();
-      setCurrentNetwork(network.chainId);
+      setCurrentNetwork(Number(network.chainId));
     });
     await provider.send("eth_requestAccounts", []);
-    const signer = provider.getSigner();
+    const signer = await provider.getSigner();
     if (provider && signer) {
       const network = await provider.getNetwork();
-      setCurrentNetwork(network.chainId);
+      setCurrentNetwork(Number(network.chainId));
       setProvider(provider);
     }
   }, [setProvider, setCurrentNetwork]);
@@ -53,6 +54,8 @@ export const Root = () => {
   return (
     <WalletProviderContext.Provider value={provider}>
       <CurrentNetwork.Provider value={currentNetwork}>
+        <br />
+        <br />
         <NetworkSwitcher {...{ currentNetwork, setCurrentNetwork, provider }} />
         <Outlet />
       </CurrentNetwork.Provider>

src/app/ViewSafe.tsx

@@ -63,7 +63,7 @@ const useLoadSafeInformation = ({
       const { safeSdk, safeSdk2 } = safeData;
       const owners = await safeSdk.getOwners();
       const threshold = await safeSdk.getThreshold();
-      const chainId = await safeSdk.getChainId();
+      const chainId = Number(await safeSdk.getChainId());
       const nonce = await safeSdk.getNonce();
       const address = (await safeSdk.getAddress()) as Address;
 
@@ -93,7 +93,7 @@ export const ViewSafe = () => {
   const setupSafe = useCallback(async () => {
     if (params.safeAddress && providerContext) {
       setSafeData(
-        await getSafeSDK(params.safeAddress, providerContext.getSigner())
+        await getSafeSDK(params.safeAddress, await providerContext.getSigner())
       );
     }
   }, [params.safeAddress, providerContext]);

src/chains.ts

@@ -9,6 +9,8 @@ const defaultL2Addresses = {
   fallbackHandlerAddress: "0x1AC114C2099aFAf5261731655Dc6c306bFcd4Dbd",
   createCallAddress: "0x7cbB62EaA69F79e6873cD1ecB2392971036cFAa4",
   signMessageLibAddress: "0xA65387F16B013cf2Af4605Ad8aA5ec25a2cbA3a2",
+  safeSingletonAddress: "0x",
+  simulateTxAccessorAddress: "0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da",
 };
 
 const baseL2Addresses = {
@@ -19,28 +21,17 @@ const baseL2Addresses = {
   fallbackHandlerAddress: "0x017062a1dE2FE6b99BE3d9d37841FeD19F573804",
   createCallAddress: "0xB19D6FFc2182150F8Eb585b79D4ABcd7C5640A9d",
   signMessageLibAddress: "0x98FFBBF51bb33A056B08ddf711f289936AafF717",
+  safeSingletonAddress: "0x",
+  simulateTxAccessorAddress: "0x59AD6735bCd8152B84860Cb256dD9e96b85F69Da",
 };
 
-// sepolia is the same as base.
-const sepoliaAddresses = baseL2Addresses;
-
 export const contractNetworks: ContractNetworksConfig = {
-  // ZORA goerli
-  [999]: defaultL2Addresses,
-  // ZORA sepolia testnet
-  [999999999]: defaultL2Addresses,
-  // ZORA mainnet
-  [7777777]: defaultL2Addresses,
-  // base goerli
-  [84531]: baseL2Addresses,
-  // base mainnet
-  [8453]: baseL2Addresses,
-  // pgn sepolia
-  [58008]: defaultL2Addresses,
-  // pgn mainnet
-  [424]: defaultL2Addresses,
+  // // ZORA mainnet
+  // [`${chains.zora.id}`]: defaultL2Addresses,
+  // arbitrium sepolia
+  // [`${chains.arbitrumSepolia.id}`]: baseL2Addresses,
   // sepolia testnet
-  [11155111]: sepoliaAddresses,
+  // [`${chains.sepolia.id}`]: sepoliaAddresses,
 };
 
 const pgn = {
@@ -69,9 +60,14 @@ const pgn = {
 }
 
 export const allowedNetworks: { [chainId: number]: chains.Chain }= {
-  [999]: chains.zoraTestnet,
-  [999999999]: chains.zoraSepolia,
-  [424]: pgn,
+  [chains.zoraTestnet.id]: chains.zoraTestnet,
+  [chains.zoraSepolia.id]: chains.zoraSepolia,
+  [chains.arbitrumGoerli.id]: chains.arbitrumGoerli,
+  [chains.arbitrumSepolia.id]: chains.arbitrumSepolia,
+  [chains.arbitrum.id]: chains.arbitrum,
+  [chains.base.id]: chains.base,
+  [chains.baseSepolia.id]: chains.baseSepolia,
+  [chains.sepolia.id]: chains.sepolia,
 };
 
 Object.keys(contractNetworks).map((network) => {

src/components/AddressView.tsx

@@ -29,7 +29,7 @@ export const AddressView = ({
         target="_blank"
         className="text-gray-600 hover:color-black transition-color"
         href={`${
-          (networkToExplorer as any)[currentNetwork]
+          (networkToExplorer as any)[Number(currentNetwork)]
         }/address/${address}`}
       >
         ↗

src/components/DataActionPreview.tsx

@@ -29,7 +29,7 @@ export const DataActionPreview = ({ to, data }: { to: Address; data: Hex }) => {
     let json;
     try {
       const response = await fetch(
-        `https://${networkToEtherActor[currentNetwork]}.ether.actor/decode/${to}/${data}`
+        `https://${networkToEtherActor[Number(currentNetwork)]}.ether.actor/decode/${to}/${data}`
       );
       if (!response.ok) {
         throw new Error();

src/components/NetworkSwitcher.tsx

@@ -2,7 +2,7 @@
 import { useCallback, useEffect } from "react";
 import { FormControl, Select } from "reshaped";
 import { allowedNetworks } from "../chains";
-import { Web3Provider } from "@ethersproject/providers";
+import { BrowserProvider } from "ethers";
 
 export const NetworkSwitcher = ({
   currentNetwork,
@@ -11,7 +11,7 @@ export const NetworkSwitcher = ({
 }: {
   currentNetwork: number;
   setCurrentNetwork: (chainId: number) => void;
-  provider: Web3Provider | undefined;
+  provider: BrowserProvider | undefined;
 }) => {
   const changeNetwork = useCallback(
     ({ value }: { value: string }) => {

src/main.tsx

@@ -2,6 +2,8 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Wrapper } from "./app/Wrapper";
 import "reshaped/themes/reshaped/theme.css";
+import { Buffer } from 'buffer'
+globalThis.Buffer = Buffer
 
 const container = document.getElementById("app");
 const root = createRoot(container!);