Merge pull request #74 from gnosis/fix-safe-tx-service

Fix Safe module fetching

extension/.yarnrc.yml

@@ -1,17 +1,14 @@
 nodeLinker: pnp
 
 packageExtensions:
-  '@safe-global/safe-core-sdk-utils@*':
-    dependencies:
-      '@ethersproject/bignumber': '*'
-  '@safe-global/safe-core-sdk@*':
-    dependencies:
-      '@ethersproject/bignumber': '*'
-      '@ethersproject/bytes': '*'
-  '@safe-global/safe-ethers-lib@*':
+  '@safe-global/protocol-kit@*':
     dependencies:
       '@ethersproject/abstract-signer': '*'
       '@ethersproject/bignumber': '*'
+      '@ethersproject/bytes': '*'
+      '@types/bn.js': '*'
+      'bn.js': '*'
+      'web3-eth-contract': '*'
   '@shazow/whatsabi@*':
     dependencies:
       '@ethersproject/web': '*'

extension/package.json

@@ -27,10 +27,9 @@
     "@ethersproject/abstract-provider": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@gnosis.pm/zodiac": "^3.2.2",
-    "@safe-global/safe-core-sdk": "^3.2.0",
-    "@safe-global/safe-core-sdk-types": "^1.7.0",
-    "@safe-global/safe-ethers-lib": "^1.7.0",
-    "@safe-global/safe-service-client": "^1.4.0",
+    "@safe-global/api-kit": "^1.3.0",
+    "@safe-global/protocol-kit": "^1.2.0",
+    "@safe-global/safe-core-sdk-types": "^2.2.0",
     "@shazow/whatsabi": "^0.2.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@typechain/ethers-v5": "^10.0.0",

extension/src/providers/WrappingProvider.ts

@@ -4,7 +4,7 @@ import { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { ContractFactories, KnownContracts } from '@gnosis.pm/zodiac'
 import { MetaTransaction } from 'react-multisend'
 
-import { initSafeServiceClient, sendTransaction } from '../safe'
+import { initSafeApiKit, sendTransaction } from '../safe'
 import { Connection, Eip1193Provider, TransactionData } from '../types'
 
 const RolesInterface = ContractFactories[KnownContracts.ROLES].createInterface()
@@ -95,11 +95,11 @@ class WrappingProvider extends EventEmitter {
 
         if (!this.connection.moduleAddress) {
           // use safeTxGas estimation for direct execution
-          const safeServiceClient = initSafeServiceClient(
+          const safeApiKit = initSafeApiKit(
             this.provider,
             this.connection.chainId
           )
-          const result = await safeServiceClient.estimateSafeTransaction(
+          const result = await safeApiKit.estimateSafeTransaction(
             this.connection.avatarAddress,
             request
           )

extension/src/safe/index.ts

@@ -1,6 +1,5 @@
-export { initSafeServiceClient } from './initSafeServiceClient'
+export { initSafeApiKit } from './initSafeApiKit'
 export { sendTransaction } from './sendTransaction'
-export { useSafe } from './useSafe'
 export { useSafesWithOwner } from './useSafesWithOwner'
 export { useSafeDelegates } from './useSafeDelegates'
 export { waitForMultisigExecution } from './waitForMultisigExecution'

extension/src/safe/initSafeServiceClient.ts → extension/src/safe/initSafeApiKit.ts

@@ -1,5 +1,5 @@
-import EthersAdapter from '@safe-global/safe-ethers-lib'
-import SafeServiceClient from '@safe-global/safe-service-client'
+import { EthersAdapter } from '@safe-global/protocol-kit'
+import SafeApiKit from '@safe-global/api-kit'
 import * as ethers from 'ethers'
 
 import { ChainId } from '../networks'
@@ -20,10 +20,7 @@ export const TX_SERVICE_URL: Record<ChainId, string | undefined> = {
   [80001]: undefined, // not available
 }
 
-export const initSafeServiceClient = (
-  provider: Eip1193Provider,
-  chainId: ChainId
-) => {
+export const initSafeApiKit = (provider: Eip1193Provider, chainId: ChainId) => {
   const web3Provider = new ethers.providers.Web3Provider(provider)
 
   const txServiceUrl = TX_SERVICE_URL[chainId as ChainId]
@@ -36,5 +33,5 @@ export const initSafeServiceClient = (
     signerOrProvider: web3Provider.getSigner(),
   })
 
-  return new SafeServiceClient({ txServiceUrl, ethAdapter })
+  return new SafeApiKit({ txServiceUrl, ethAdapter })
 }

extension/src/safe/sendTransaction.ts

@@ -1,12 +1,11 @@
-import Safe from '@safe-global/safe-core-sdk'
-import EthersAdapter from '@safe-global/safe-ethers-lib'
+import Safe, { EthersAdapter } from '@safe-global/protocol-kit'
 import * as ethers from 'ethers'
 import { getAddress } from 'ethers/lib/utils'
 import { MetaTransaction } from 'react-multisend'
 
 import { Connection, Eip1193Provider, TransactionData } from '../types'
 
-import { initSafeServiceClient } from './initSafeServiceClient'
+import { initSafeApiKit } from './initSafeApiKit'
 import { waitForMultisigExecution } from './waitForMultisigExecution'
 
 export const sendTransaction = async (
@@ -15,7 +14,7 @@ export const sendTransaction = async (
   request: MetaTransaction | TransactionData
 ) => {
   const web3Provider = new ethers.providers.Web3Provider(provider)
-  const safeServiceClient = initSafeServiceClient(provider, connection.chainId)
+  const safeApiKit = initSafeApiKit(provider, connection.chainId)
   const ethAdapter = new EthersAdapter({
     ethers,
     signerOrProvider: web3Provider.getSigner(),
@@ -25,7 +24,7 @@ export const sendTransaction = async (
     safeAddress: connection.avatarAddress,
   })
 
-  const nonce = await safeServiceClient.getNextNonce(
+  const nonce = await safeApiKit.getNextNonce(
     getAddress(connection.avatarAddress)
   )
 
@@ -41,7 +40,7 @@ export const sendTransaction = async (
   const safeTxHash = await safeSdk.getTransactionHash(safeTransaction)
   const senderSignature = await safeSdk.signTransactionHash(safeTxHash)
 
-  await safeServiceClient.proposeTransaction({
+  await safeApiKit.proposeTransaction({
     safeAddress: getAddress(connection.avatarAddress),
     safeTransactionData: safeTransaction.data,
     safeTxHash,

extension/src/safe/useSafeDelegates.ts

@@ -4,7 +4,7 @@ import { ChainId } from '../networks'
 import { useConnection } from '../settings'
 import { validateAddress } from '../utils'
 
-import { initSafeServiceClient } from './initSafeServiceClient'
+import { initSafeApiKit } from './initSafeApiKit'
 
 export const useSafeDelegates = (
   safeAddress: string,
@@ -20,13 +20,13 @@ export const useSafeDelegates = (
   useEffect(() => {
     if (!connected || !chainId || !checksumSafeAddress) return
 
-    const safeService = initSafeServiceClient(provider, chainId as ChainId)
+    const safeApiKit = initSafeApiKit(provider, chainId as ChainId)
 
     setLoading(true)
     let canceled = false
 
-    safeService
-      .getSafeDelegates(checksumSafeAddress)
+    safeApiKit
+      .getSafeDelegates({ safeAddress: checksumSafeAddress })
       .then((res) => {
         if (!canceled) {
           setDelegates(res.results.map((delegate) => delegate.delegate))

extension/src/safe/useSafesWithOwner.ts

@@ -4,7 +4,7 @@ import { ChainId } from '../networks'
 import { useConnection } from '../settings'
 import { validateAddress } from '../utils'
 
-import { initSafeServiceClient } from './initSafeServiceClient'
+import { initSafeApiKit } from './initSafeApiKit'
 
 export const useSafesWithOwner = (
   ownerAddress: string,
@@ -20,7 +20,7 @@ export const useSafesWithOwner = (
   useEffect(() => {
     if (!connected || !chainId || !checksumOwnerAddress) return
 
-    const safeService = initSafeServiceClient(provider, chainId as ChainId)
+    const safeService = initSafeApiKit(provider, chainId as ChainId)
 
     setLoading(true)
     let canceled = false

extension/src/safe/waitForMultisigExecution.ts

@@ -1,14 +1,14 @@
 import { ChainId } from '../networks'
 import { Eip1193Provider } from '../types'
 
-import { initSafeServiceClient } from './initSafeServiceClient'
+import { initSafeApiKit } from './initSafeApiKit'
 
 export function waitForMultisigExecution(
   provider: Eip1193Provider,
   chainId: number,
   safeTxHash: string
 ): Promise<string> {
-  const safeService = initSafeServiceClient(provider, chainId as ChainId)
+  const safeService = initSafeApiKit(provider, chainId as ChainId)
 
   return new Promise((resolve, reject) => {
     function tryAgain() {

extension/src/settings/Connection/useZodiacModules.ts

@@ -1,4 +1,4 @@
-import { Web3Provider } from '@ethersproject/providers'
+import { JsonRpcBatchProvider, Web3Provider } from '@ethersproject/providers'
 import {
   ContractAbis,
   ContractAddresses,
@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react'
 
 import { validateAddress } from '../../utils'
 import { useConnection } from '../connectionHooks'
+import { ChainId, RPC } from '../../networks'
 
 const SUPPORTED_MODULES = [KnownContracts.DELAY, KnownContracts.ROLES]
 export type SupportedModuleType = KnownContracts.DELAY | KnownContracts.ROLES
@@ -32,20 +33,22 @@ export const useZodiacModules = (
   const [error, setError] = useState(false)
   const [modules, setModules] = useState<Module[]>([])
 
-  const { provider, connected, chainId } = useConnection(connectionId)
+  const { chainId } = useConnection(connectionId)
+
   useEffect(() => {
-    if (!connected) return
+    if (!chainId) return
+    const provider = new JsonRpcBatchProvider(RPC[chainId as ChainId], chainId)
 
     setLoading(true)
     setError(false)
-    fetchModules(safeAddress, new Web3Provider(provider, chainId || undefined))
+    fetchModules(safeAddress, provider)
       .then((modules) => setModules(modules))
       .catch((e) => {
         console.error(`Could not fetch modules of Safe ${safeAddress}`, e)
         setError(true)
       })
       .finally(() => setLoading(false))
-  }, [provider, safeAddress, connected, chainId])
+  }, [chainId, safeAddress])
 
   if (!validateAddress(safeAddress) || error) {
     return { isValidSafe: false, loading, modules: [] }