Fix link to v2 Roles app

packages/app/src/utils/url.ts

@@ -18,7 +18,7 @@ export function rolesV1AppUrl(safeInfo: SafeInfo, rolesAddress: string) {
 }
 
 export function rolesV2AppUrl(safeInfo: SafeInfo, rolesAddress: string) {
-  const base = "http://localhost:3000" //"https://roles.gnosisguild.org"
+  const base = "https://roles.gnosisguild.org"
   const prefix = chainPrefix(safeInfo)
 
   return new URL(`${base}/${prefix}:${rolesAddress}`).href

packages/app/src/views/AddModule/ModuleButton.tsx

@@ -8,9 +8,9 @@ import { Tag } from "components/text/Tag"
 interface ModuleButtonProps extends BadgeIconProps {
   title: string
   description: string
+  available: boolean
   deprecated?: boolean
   className?: string
-
   onClick(): void
 }
 
@@ -19,9 +19,9 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    cursor: "pointer",
     userSelect: "none",
     padding: theme.spacing(2),
+    cursor: "pointer",
     transition: "0.2s ease all",
     "&:hover": {
       background: "rgba(217, 212, 173, 0.15)",
@@ -34,27 +34,25 @@ const useStyles = makeStyles((theme) => ({
   title: {
     marginBottom: theme.spacing(0.5),
   },
-  deprecated: {
-    opacity: 0.7,
-  },
 }))
 
 export const ModuleButton = ({
   title,
   description,
   icon,
+  available,
   deprecated,
   className,
   onClick,
 }: ModuleButtonProps) => {
   const classes = useStyles()
 
+  if (!available) return null
+
   return (
     <ZodiacPaper
       borderStyle="double"
-      className={classNames(classes.root, className, {
-        [classes.deprecated]: deprecated,
-      })}
+      className={classNames(classes.root, className)}
       onClick={onClick}
     >
       <BadgeIcon icon={icon} size={60} className={classes.badgeIcon} />

packages/app/src/views/AddModule/index.tsx

@@ -15,6 +15,11 @@ import {
 import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk"
 import { NETWORK } from "utils/networks"
 import { klerosAvailability } from "components/input/ArbitratorSelect"
+import {
+  ContractAddresses as AllContractAddresses,
+  KnownContracts,
+  SupportedNetworks,
+} from "@gnosis.pm/zodiac"
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -57,6 +62,8 @@ export const AddModulesView = () => {
     dispatch(setModuleAdded(true))
   }
 
+  const ContractAddresses = AllContractAddresses[safe.chainId as SupportedNetworks]
+
   const title = hasModules ? "Add another mod" : "Start by adding a mod"
 
   return (
@@ -99,80 +106,87 @@ export const AddModulesView = () => {
           icon="bridge"
           onClick={() => setModule(ModuleType.BRIDGE)}
           className={classes.firstModule}
+          available={!!ContractAddresses[KnownContracts.BRIDGE]}
         />
 
         <ModuleButton
           title="Delay Modifier"
           description="Enables a time delay between when a module initiates a transaction and when it can be executed"
           icon="delay"
           onClick={() => setModule(ModuleType.DELAY)}
+          available={!!ContractAddresses[KnownContracts.DELAY]}
         />
 
         <ModuleButton
           title="Exit Module"
           description="Enables participants to redeem a designated token for a proportional share of this account’digital assets"
           icon="exit"
           onClick={() => setModule(ModuleType.EXIT)}
+          available={!!ContractAddresses[KnownContracts.EXIT_ERC20]}
         />
 
         <ModuleButton
           title="Roles Modifier"
           description="Allows avatars to enforce granular, role-based, permissions for attached modules"
           icon="roles"
           onClick={() => setModule(ModuleType.ROLES_V2)}
+          available={!!ContractAddresses[KnownContracts.ROLES_V2]}
+        />
+
+        <ModuleButton
+          title="Reality Module"
+          description="Enables on-chain execution based on the outcome of events reported by the Reality.eth oracle"
+          icon="reality"
+          onClick={() => dispatch(setRealityModuleScreen(true))}
+          available={[NETWORK.MAINNET, NETWORK.GOERLI].includes(safe.chainId)}
         />
 
-        {[NETWORK.MAINNET, NETWORK.GOERLI].includes(safe.chainId) ? (
-          <ModuleButton
-            title="Reality Module"
-            description="Enables on-chain execution based on the outcome of events reported by the Reality.eth oracle"
-            icon="reality"
-            onClick={() => dispatch(setRealityModuleScreen(true))}
-          />
-        ) : (
-          <ModuleButton
-            title="Reality Module"
-            description="Enables on-chain execution based on the outcome of events reported by the Reality.eth oracle"
-            icon="reality"
-            onClick={() => setModule(ModuleType.REALITY_ETH)}
-          />
-        )}
-
-        {klerosAvailability.includes(safe.chainId) && (
-          <ModuleButton
-            title="Kleros Snapshot Module"
-            description="Execute transactions for successful Snapshot proposals using Reality.eth, secured by Kleros."
-            icon="reality"
-            onClick={() => setModule(ModuleType.KLEROS_REALITY)}
-          />
-        )}
+        <ModuleButton
+          title="Reality Module"
+          description="Enables on-chain execution based on the outcome of events reported by the Reality.eth oracle"
+          icon="reality"
+          onClick={() => setModule(ModuleType.REALITY_ETH)}
+          available={[NETWORK.MAINNET, NETWORK.GOERLI].includes(safe.chainId)}
+        />
+
+        <ModuleButton
+          title="Kleros Snapshot Module"
+          description="Execute transactions for successful Snapshot proposals using Reality.eth, secured by Kleros."
+          icon="reality"
+          onClick={() => setModule(ModuleType.KLEROS_REALITY)}
+          available={klerosAvailability.includes(safe.chainId)}
+        />
 
         <ModuleButton
           title="Tellor Module"
           description="Enables on-chain execution of successful Snapshot proposals reported by the Tellor oracle"
           icon="tellor"
           onClick={() => setModule(ModuleType.TELLOR)}
+          available={!!ContractAddresses[KnownContracts.TELLOR]}
         />
 
         <ModuleButton
           title="UMA oSnap Module"
           description="Enables on-chain execution of successful Snapshot proposals utilizing UMA's optimistic oracle."
           icon="optimisticGov"
           onClick={() => setModule(ModuleType.OPTIMISTIC_GOVERNOR)}
+          available // TODO
         />
 
         <ModuleButton
           title="Governor Module"
           description="Enables an Open Zeppelin Governor contract as a module."
           icon="ozGov"
           onClick={() => dispatch(setOzGovernorModuleScreen(true))}
+          available={!!ContractAddresses[KnownContracts.OZ_GOVERNOR]}
         />
 
         <ModuleButton
           title="Connext Module"
           description="Enables an address on one chain to control an avatar on another chain using Connext as the messaging layer."
           icon="connext"
           onClick={() => setModule(ModuleType.CONNEXT)}
+          available={!!ContractAddresses[KnownContracts.CONNEXT]}
         />
 
         <ModuleButton
@@ -181,13 +195,15 @@ export const AddModulesView = () => {
           icon="roles"
           deprecated
           onClick={() => setModule(ModuleType.ROLES_V1)}
+          available={!!ContractAddresses[KnownContracts.ROLES_V1]}
         />
 
         <ModuleButton
           title="Custom Module"
           description="Enable a custom contract as a module"
           icon="custom"
           onClick={() => setModule(ModuleType.UNKNOWN)}
+          available
         />
       </div>