Fix Roles v1 detection in module select

extension/src/browser/ProvideProvider.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react'
 import { decodeSingle, encodeMulti, encodeSingle } from 'react-multisend'
 
-import { ChainId, MULTI_SEND_ADDRESS } from '../chains'
+import { MULTI_SEND_ADDRESS } from '../chains'
 import {
   ForkProvider,
   useTenderlyProvider,

extension/src/components/Address/index.tsx

@@ -53,7 +53,7 @@ const Address: React.FC<Props> = ({
   const displayAddress = shortenAddress(checksumAddress)
 
   return (
-    <Box rounded className={cn(className, classes.container)}>
+    <Box rounded className={cn(classes.container, className)}>
       <div className={classes.address}>{displayAddress}</div>
       <Box rounded className={classes.blockieContainer}>
         {address && <Blockie address={address} className={classes.blockies} />}

extension/src/components/BlockButton/index.tsx

@@ -9,7 +9,7 @@ type Props = React.DetailedHTMLProps<
 >
 
 const BoxButton: React.FC<Props> = ({ className, ...rest }) => (
-  <button className={cn(className, classes.button)} {...rest} />
+  <button className={cn(classes.button, className)} {...rest} />
 )
 
 export default BoxButton

extension/src/components/BoxButton/index.tsx

@@ -9,7 +9,7 @@ type Props = React.DetailedHTMLProps<
 >
 
 const BlockButton: React.FC<Props> = ({ className, ...rest }) => (
-  <button className={cn(className, classes.button)} {...rest} />
+  <button className={cn(classes.button, className)} {...rest} />
 )
 
 export default BlockButton

extension/src/components/IconButton/index.tsx

@@ -12,7 +12,7 @@ type Props = React.DetailedHTMLProps<
 
 const IconButton: React.FC<Props> = ({ className, danger, ...rest }) => (
   <button
-    className={cn(classes.button, className, { [classes.danger]: danger })}
+    className={cn(classes.button, { [classes.danger]: danger }, className)}
     {...rest}
   />
 )

extension/src/components/Tag/index.tsx

@@ -11,7 +11,7 @@ interface Props {
 }
 
 const Tag: React.FC<Props> = ({ head, children, color, className }) => (
-  <div className={cn(className, classes.container, classes[color])}>
+  <div className={cn(classes.container, classes[color], className)}>
     {head && <div className={classes.head}>{head}</div>}
     {children && <div className={classes.body}>{children}</div>}
   </div>

extension/src/connections/ConnectionsDrawer/List/style.module.css

@@ -58,7 +58,7 @@ button.removeButton:hover {
 }
 
 .modifyButton {
-  position: absolute;
+  position: absolute !important;
   top: var(--spacing-4);
   right: var(--spacing-4);
   background: none;

extension/src/connections/useZodiacModules.ts

@@ -1,4 +1,4 @@
 import { JsonRpcBatchProvider } from '@ethersproject/providers'
 import {
   ContractAbis,
   ContractAddresses,
@@ -13,7 +13,8 @@
 
 import { validateAddress } from '../utils'
 import { useConnection } from './connectionHooks'
 import { ChainId, RPC } from '../chains'
+import { getReadOnlyProvider } from '../providers/readOnlyProvider'
 
 const SUPPORTED_MODULES = [
   KnownContracts.DELAY,
@@ -44,7 +45,7 @@
 
   useEffect(() => {
     if (!chainId) return
-    const provider = new JsonRpcBatchProvider(RPC[chainId as ChainId], chainId)
+    const provider = getReadOnlyProvider(chainId as ChainId)
 
     setLoading(true)
     setError(false)
@@ -93,6 +94,9 @@
 
       const implementationAddress = mastercopyAddress || moduleAddress
 
+      // 'roles' is the old name for roles_v1 is still configured as an alias in the zodiac package for backwards compatibility
+      if (type === KnownContracts.ROLES) type = KnownContracts.ROLES_V1
+
       if (!type) {
         // Not a proxy to one of our master copies. It might be a custom deployment.
         // We try to detect selectors from byte code and match them against the ABIs of known Zodiac modules.