Merge pull request #248 from kleros/reality-kleros-on-base

Reality Kleros module on Base + fixes in development mode

Author: jfschwarz

packages/app/package.json

@@ -33,7 +33,7 @@
     "react-select": "^5.4.0",
     "styled-components": "^6.1.11",
     "timeago-react": "^3.0.2",
-    "viem": "^2.17.4",
+    "viem": "^2.41.2",
     "vite": "^5.3.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-top-level-await": "^1.4.1",

packages/app/src/components/input/ArbitratorSelect.tsx

@@ -17,6 +17,7 @@ export const klerosAvailability: number[] = [
   NETWORK.MAINNET,
   NETWORK.GNOSIS_CHAIN,
   NETWORK.POLYGON,
+  NETWORK.BASE,
   NETWORK.SEPOLIA,
 ]
 

packages/app/src/hooks/useEns.ts

@@ -14,12 +14,26 @@ const useEns = () => {
   useEffect(() => {
     const initializeClient = async () => {
       try {
+        const chain = mode === 'development' ? sepolia : mainnet
+        
+        // Add ENS registry contract (required by ENS client but missing in viem chain definitions)
+        const chainWithEns = {
+          ...chain,
+          contracts: {
+            ...chain.contracts,
+            ensRegistry: {
+              // https://docs.ens.domains/resolution/#reverse-resolution
+              address: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e' as const,
+            },
+          },
+        } as const
+
         const client = createEnsPublicClient({
-          chain: mode === 'development' ? sepolia : mainnet,
+          chain: chainWithEns,
           transport: http(),
         })
         const walletClient = createEnsWalletClient({
-          chain: mode === 'development' ? sepolia : mainnet,
+          chain: chainWithEns,
           transport: http(),
         })
         setEnsClient(client as EnsPublicClient<any, any>)

packages/app/src/services/ens.ts

@@ -2,6 +2,9 @@ import { BrowserProvider, Provider, ethers, getAddress } from 'ethers'
 import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk'
 import { EnsPublicClient } from '@ensdomains/ensjs'
 import { namehash, normalize } from 'viem/ens'
+
+const isDev = import.meta.env.MODE === 'development'
+
 //Some apps may show the contract address as the owner. This doesn't affect your ownership.
 enum EnsWrappedContract {
   MAINNET = '0xD4416b13d2b3a9aBae7AcD5D6C2BbDBE25686401',
@@ -80,22 +83,27 @@ export const checkIfIsOwner = async (
   }
 }
 
-export const getEnsTextRecord = async (ensName: string, recordId: string, provider: Provider) => {
+export const getEnsTextRecord = async (
+  ensName: string, 
+  recordId: string, 
+  mainnetProvider: Provider, 
+  sepoliaProvider: Provider) => {
   const nameHash = namehash(ensName)
-  const ensRegistryContract = new ethers.Contract(ensRegistry, abiRegistry, provider)
+  const ensRegistryContract = new ethers.Contract(ensRegistry, abiRegistry, getProvider(mainnetProvider, sepoliaProvider))
   const ensResolverAddress = await ensRegistryContract.resolver(nameHash)
-  const ensResolverContract = new ethers.Contract(ensResolverAddress, abiPublicResolver, provider)
+  const ensResolverContract = new ethers.Contract(ensResolverAddress, abiPublicResolver, getProvider(mainnetProvider, sepoliaProvider))
   const record = ensResolverContract.text(nameHash, recordId)
-  return record
+  return record 
 }
 
 export const checkIfIsController = async (
-  provider: BrowserProvider,
+  mainnetProvider: Provider, 
+  sepoliaProvider: Provider,
   ensClient: EnsPublicClient<any, any>,
   ensName: string,
   safeAddress: string,
 ) => {
-  if (!provider || !ensClient || !ensName || !safeAddress) {
+  if (!mainnetProvider || !sepoliaProvider || !ensClient || !ensName || !safeAddress) {
     throw new Error('all parameter are required')
   }
 
@@ -106,11 +114,13 @@ export const checkIfIsController = async (
       return false
     }
     const node = namehash(ensName)
-    const resolverContract = new ethers.Contract(resolverAddress, resolverAbi, provider)
+    const resolverContract = new ethers.Contract(resolverAddress, resolverAbi, getProvider(mainnetProvider, sepoliaProvider))
     const controller = await resolverContract.addr(node)
     return getAddress(controller) === getAddress(safeAddress)
   } catch (error) {
     console.error('Error verifying the ENS controller:', error)
     return false
   }
 }
+
+const getProvider = (mainnetProvider: Provider, sepoliaProvider: Provider) => isDev ? sepoliaProvider : mainnetProvider;

packages/app/src/services/index.ts

@@ -119,7 +119,7 @@ export function getDefaultOracle(chainId: number): string {
     case NETWORK.SEPOLIA:
       return '0xaf33DcB6E8c5c4D9dDF579f53031b514d19449CA'
     case NETWORK.BASE:
-      return '' // TODO
+      return '0x2F39f464d16402Ca3D8527dA89617b73DE2F60e8'
   }
   return ''
 }
@@ -201,6 +201,8 @@ export function getKlerosAddress(chainId: number): string {
       return '0x29f39de98d750eb77b5fafb31b2837f079fce222'
     case NETWORK.POLYGON:
       return '0x5AFa42b30955f137e10f89dfb5EF1542a186F90e'
+    case NETWORK.BASE:
+      return '0xBeeB211CfE6632E75992488A66F65b0477FBe96B'
     case NETWORK.SEPOLIA:
       return '0x05b942faecfb3924970e3a28e0f230910cedff45'
   }

packages/app/src/services/snapshot.ts

@@ -2,6 +2,8 @@ import snapshot from '@snapshot-labs/snapshot.js'
 import * as R from 'ramda'
 import { NETWORK } from 'utils/networks'
 
+const isDev = import.meta.env.MODE === 'development'
+
 const SNAPSHOT_HUB = 'https://hub.snapshot.org'
 const SNAPSHOT_HUB_TEST = 'https://testnet.hub.snapshot.org'
 const SNAPSHOT_SPACE = 'https://snapshot.org'
@@ -10,7 +12,7 @@ const SNAPSHOT_SPACE_TEST = 'https://testnet.snapshot.org'
 // Returns snapshot space settings, or undefined if no space was found for the ENS name.
 export const getSnapshotSpaceSettings = async (ensName: string, chainId: number) => {
   await updateSnapshotCache(ensName, chainId) // make sure that the returned snapshot space settings is the newest version
-  const res = await fetch(`${getHubUrl(chainId)}/api/spaces/${ensName}`)
+  const res = await fetch(`${getHubUrl()}/api/spaces/${ensName}`)
   if (res.ok) {
     try {
       return await res.json().then((res) => {
@@ -30,7 +32,7 @@ export const validateSchema = (spaceSettings: any) =>
   snapshot.utils.validateSchema(snapshot.schemas.space, spaceSettings)
 
 export const updateSnapshotCache = (ensName: string, chainId: number) =>
-  fetch(`${getHubUrl(chainId)}/api/spaces/${ensName}/poke`)
+  fetch(`${getHubUrl()}/api/spaces/${ensName}/poke`)
 
 export const verifyNewSnapshotSettings = (originalSettings: any, newSettings: any) =>
   R.and(
@@ -44,8 +46,8 @@ export const verifyNewSnapshotSettings = (originalSettings: any, newSettings: an
     validateSchema(newSettings) === true,
   )
 
-const getHubUrl = (chainId: number) =>
-  chainId === NETWORK.SEPOLIA ? SNAPSHOT_HUB_TEST : SNAPSHOT_HUB
+const getHubUrl = () =>
+  isDev ? SNAPSHOT_HUB_TEST : SNAPSHOT_HUB
 
-export const getSnapshotSpaceUrl = (chainId: number, ensName: string) =>
-  (chainId === NETWORK.SEPOLIA ? SNAPSHOT_SPACE_TEST : SNAPSHOT_SPACE) + `/#/${ensName}`
+export const getSnapshotSpaceUrl = (ensName: string) =>
+  isDev ? SNAPSHOT_SPACE_TEST : SNAPSHOT_SPACE + `/#/${ensName}`

packages/app/src/views/AddModule/wizards/KlerosRealityModule/KlerosRealityModuleModal.tsx

@@ -231,8 +231,8 @@ export const KlerosRealityModuleModal = ({ open, onClose, onSubmit }: RealityMod
   const { sdk, safe, provider } = useSafeAppsSDKWithProvider()
   const { ensClient } = useEns()
   // hack to resolve mainnet ENS
-  const mainnetProvider = useMemo(() => new InfuraProvider(1, import.meta.env.VITE_INFURA_ID), [])
-  const goerliProvider = useMemo(() => new InfuraProvider(5, import.meta.env.VITE_INFURA_ID), [])
+  const mainnetProvider = useMemo(() => new InfuraProvider(NETWORK.MAINNET, import.meta.env.VITE_INFURA_ID), [])
+  const sepoliaProvider = useMemo(() => new InfuraProvider(NETWORK.SEPOLIA, import.meta.env.VITE_INFURA_ID), [])
 
   const bondToken = NETWORKS[safe.chainId as NETWORK].nativeAsset
   const [params, setParams] = useState<RealityModuleParams>({
@@ -303,14 +303,16 @@ export const KlerosRealityModuleModal = ({ open, onClose, onSubmit }: RealityMod
       const daorequirements = await getEnsTextRecord(
         params.snapshotEns,
         'daorequirements',
-        provider,
+        mainnetProvider,
+        sepoliaProvider,
       )
       setDaorequirements(daorequirements[0])
       setValidEns(snapshotSpace !== undefined)
       if (snapshotSpace !== undefined) {
         setIsSafesnapInstalled(!!snapshotSpace.plugins?.safeSnap)
         const isController = await checkIfIsController(
-          provider,
+          mainnetProvider,
+          sepoliaProvider,
           ensClient,
           params.snapshotEns,
           safe.safeAddress,
@@ -324,7 +326,7 @@ export const KlerosRealityModuleModal = ({ open, onClose, onSubmit }: RealityMod
       }
     } else {
     }
-  }, [params.snapshotEns, safe.chainId, safe.safeAddress, mainnetProvider, goerliProvider])
+  }, [params.snapshotEns, safe.chainId, safe.safeAddress, mainnetProvider, sepoliaProvider])
 
   const debouncedSnapshotEnsValidation = debounce(() => {
     setValidEns(false)

packages/app/src/views/AddModule/wizards/RealityModule/sections/Oracle/components/OracleInstance/index.tsx

@@ -3,7 +3,7 @@ import { Grid, makeStyles, Typography } from "@material-ui/core"
 import { Dropdown } from "components/Dropdown"
 import React, { useEffect, useState } from "react"
 import { colors, ZodiacTextField } from "zodiac-ui-components"
-import { InputPartProps, ORACLE_MAINNET_OPTIONS, ORACLE_GOERLI_OPTIONS } from "../.."
+import { InputPartProps, ORACLE_MAINNET_OPTIONS, ORACLE_SEPOLIA_OPTIONS } from "../.."
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -32,7 +32,7 @@ export type Data = {
 export const OracleInstance: React.FC<InputPartProps> = ({ data, setData }) => {
   const classes = useStyles()
   const { safe } = useSafeAppsSDK()
-  const options = safe.chainId === 1 ? ORACLE_MAINNET_OPTIONS : ORACLE_GOERLI_OPTIONS
+  const options = safe.chainId === 1 ? ORACLE_MAINNET_OPTIONS : ORACLE_SEPOLIA_OPTIONS
   const [selectedOracle, setSelectedOracle] = useState<string>("")
 
   useEffect(() => {

packages/app/src/views/AddModule/wizards/RealityModule/sections/Oracle/index.tsx

@@ -71,10 +71,10 @@ export const ORACLE_MAINNET_OPTIONS = [
   // { label: "Add Custom Instance", value: "custom" },
 ]
 
-export const ORACLE_GOERLI_OPTIONS = [
+export const ORACLE_SEPOLIA_OPTIONS = [
   {
-    label: 'ETH-0x6F80C5cBCF9FbC2dA2F0675E56A5900BB70Df72f',
-    value: 'ETH-0x6F80C5cBCF9FbC2dA2F0675E56A5900BB70Df72f',
+    label: 'ETH-0xaf33DcB6E8c5c4D9dDF579f53031b514d19449CA',
+    value: 'ETH-0xaf33DcB6E8c5c4D9dDF579f53031b514d19449CA',
   },
   // { label: "Add Custom Instance", value: "custom" },
 ]
@@ -95,7 +95,7 @@ export type OracleSectionData = {
 export const OracleSection: React.FC<SectionProps> = ({ handleBack, handleNext, setupData }) => {
   const classes = useStyles()
   const { safe } = useSafeAppsSDK()
-  const options = safe.chainId === 1 ? ORACLE_MAINNET_OPTIONS : ORACLE_GOERLI_OPTIONS
+  const options = safe.chainId === 1 ? ORACLE_MAINNET_OPTIONS : ORACLE_SEPOLIA_OPTIONS
   const [showModal, setShowModal] = useState<boolean>(false)
   if (setupData?.proposal.ensName == null) {
     throw new Error('ENS name is not set')

packages/app/src/views/AddModule/wizards/RealityModule/sections/Proposal/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '@material-ui/core'
 
 import { Link } from 'components/text/Link'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 // import useSpace from "services/snapshot/hooks/useSpace"
 import { checkIfIsController, checkIfIsOwner } from 'services/ens'
 import { SectionProps } from 'views/AddModule/wizards/RealityModule'
@@ -25,9 +25,11 @@ import DoneIcon from '@material-ui/icons/Done'
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'
 import useSafeAppsSDKWithProvider from 'hooks/useSafeAppsSDKWithProvider'
 import { safeAppUrl } from 'utils/url'
+import { NETWORK } from 'utils/networks'
 import useEns from 'hooks/useEns'
 import useDebouncedState from 'hooks/useDebouncedState'
 import { getAddressRecord } from '@ensdomains/ensjs/public'
+import { InfuraProvider } from 'ethers'
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -128,6 +130,10 @@ export const ProposalSection: React.FC<SectionProps> = ({ handleNext, handleBack
   const [validSnapshot, setValidSnapshot] = useState<boolean>(false)
   const [loading, setLoading] = useState<boolean>(false)
   const [ensIsValid, setEnsIsValid] = useState<boolean>(false)
+  
+  // hack to resolve mainnet ENS
+  const mainnetProvider = useMemo(() => new InfuraProvider(NETWORK.MAINNET, import.meta.env.VITE_INFURA_ID), [])
+  const sepoliaProvider = useMemo(() => new InfuraProvider(NETWORK.SEPOLIA, import.meta.env.VITE_INFURA_ID), [])
 
   useEffect(() => {
     if (provider && setupData && setupData.proposal) {
@@ -154,7 +160,7 @@ export const ProposalSection: React.FC<SectionProps> = ({ handleNext, handleBack
       }
     }
     checkEns()
-  }, [debouncedEnsName, ensClient])
+  }, [debouncedEnsName, ensClient, mainnetProvider, sepoliaProvider])
 
   const validEns = async () => {
     if (!ensClient) return
@@ -165,7 +171,7 @@ export const ProposalSection: React.FC<SectionProps> = ({ handleNext, handleBack
       console.log(snapshotSpace)
       // const snapshotSpaceValidation = snapshot.validateSchema(snapshotSpace)
       const isOwner = await checkIfIsOwner(ensClient, ensName, safe.safeAddress)
-      const isController = await checkIfIsController(provider, ensClient, ensName, safe.safeAddress)
+      const isController = await checkIfIsController(mainnetProvider, sepoliaProvider, ensClient, ensName, safe.safeAddress)
       const plugins = snapshotSpace?.plugins
       if (plugins) {
         setIsSafesnapInstalled(plugins.safeSnap ? true : false) // comment out for easy testing