Merge branch 'main' into sdk-patch-permissions

.github/workflows/ci.yml

@@ -15,6 +15,7 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - run: yarn
       - run: yarn build
+      - run: yarn test
       - run: yarn coverage
       - name: Coveralls
         uses: coverallsapp/github-action@master

README.md

@@ -29,6 +29,14 @@ The interface mirrors the relevant parts of the Gnosis Safe's interface, so this
 - Assign the role to an address with `assignRoles()`
 - Address can now trigger the safe to call those targets, functions, and parameters via `executeTransactionFromModule()`
 
+### Development environment setup
+
+1. For each package were a `.env.sample` file is present, copy the content of the file into a `.env` file at the same location and populate it with your keys, etc.
+2. From the repo root run `yarn`
+3. From the repo root run `yarn build`
+
+After that, you can start working on the different packages.
+
 ### Solidity Compiler
 
 The contracts have been developed with [Solidity 0.8.6](https://github.com/ethereum/solidity/releases/tag/v0.8.6). This version of Solidity made all arithmetic checked by default, therefore eliminating the need for explicit overflow or underflow (or other arithmetic) checks. This version of solidity was chosen as it allows to easily cast bytes to bytes4 and bytes32.

package.json

@@ -17,9 +17,14 @@
     "subgraph:build": "cd packages/subgraph && yarn build",
     "subgraph:pre-commit": "cd packages/subgraph && yarn pre-commit",
     "subgraph:install": "cd packages/subgraph && yarn install",
-    "preinstall": "yarn contracts:install && yarn app:install && yarn subgraph:install",
+    "sdk:build": "cd packages/sdk && yarn build",
+    "sdk:test": "cd packages/sdk && yarn test",
+    "sdk:pre-commit": "cd packages/sdk && yarn pre-commit",
+    "sdk:install": "cd packages/sdk && yarn install",
+    "preinstall": "yarn contracts:install && yarn app:install && yarn subgraph:install && yarn sdk:install",
     "prepare": "husky install",
-    "pre-commit": "yarn app:pre-commit && yarn subgraph:pre-commit"
+    "pre-commit": "yarn app:pre-commit && yarn subgraph:pre-commit && yarn contracts:pre-commit && yarn sdk:pre-commit",
+    "test": "yarn contracts:test"
   },
   "repository": {
     "type": "git",

packages/app/package.json

@@ -24,7 +24,8 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
     "styled-components": "^5.3.3",
-    "urql": "^2.0.6"
+    "urql": "^2.0.6",
+    "zodiac-ui-components": "^0.0.28"
   },
   "devDependencies": {
     "@typechain/ethers-v5": "^9.0.0",

packages/app/src/components/App.tsx

@@ -1,22 +1,21 @@
 import React from "react"
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
+import { HashRouter, Route, Routes } from "react-router-dom"
 import RolesView from "./views/Roles/RolesView"
 import AttachRolesModifierView from "./views/AttachRolesModifier/AttachRolesModifierView"
 import RoleView from "./views/Role/RoleView"
 import { Root } from "./Root"
 
 export const App = (): React.ReactElement => {
   return (
-    <BrowserRouter>
+    <HashRouter>
       <Routes>
         <Route path="/" element={<Root />}>
           <Route index element={<AttachRolesModifierView />} />
           <Route path=":module" element={<RolesView />} />
           <Route path=":module/roles/:roleId" element={<RoleView />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
         </Route>
       </Routes>
-    </BrowserRouter>
+    </HashRouter>
   )
 }
 

packages/app/src/components/commons/layout/Dashboard.tsx

@@ -40,6 +40,7 @@ const useStyles = makeStyles((theme) => ({
   },
   content: {
     gridColumnStart: 3,
+    overflow: "auto",
   },
 }))
 

packages/app/src/components/modals/AddAddressModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { Box, Button, Link, makeStyles, Typography } from "@material-ui/core"
 import { ethers } from "ethers"
 import Modal from "../commons/Modal"
-import { TextField } from "../commons/input/TextField"
+import { colors, ZodiacTextField } from "zodiac-ui-components"
 import AddIcon from "@material-ui/icons/Add"
 
 const useStyles = makeStyles((theme) => ({
@@ -15,6 +15,11 @@ const useStyles = makeStyles((theme) => ({
       opacity: 0.8,
     },
   },
+  textField: {
+    "& .MuiInputBase-root": {
+      borderColor: colors.tan[300],
+    },
+  },
 }))
 
 type Props = {
@@ -55,7 +60,8 @@ const AddAddressModal = ({ type, onAddAddress, onClose, isOpen }: Props): React.
         </Link>
       </Box>
       <Box sx={{ mt: 2 }}>
-        <TextField
+        <ZodiacTextField
+          className={classes.textField}
           onChange={(e) => onAddressChange(e.target.value)}
           label={`${type} address`}
           placeholder={`Add a new ${type} address`}

packages/app/src/components/modals/AddTargetModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { Box, Button, Link, makeStyles, Typography } from "@material-ui/core"
 import { ethers } from "ethers"
 import Modal from "../commons/Modal"
-import { TextField } from "../commons/input/TextField"
+import { colors, ZodiacTextField } from "zodiac-ui-components"
 import AddIcon from "@material-ui/icons/Add"
 import { ConditionType, ExecutionOption, Target } from "../../typings/role"
 import { ExecutionTypeSelect } from "../views/Role/targets/ExecutionTypeSelect"
@@ -17,6 +17,11 @@ const useStyles = makeStyles((theme) => ({
       opacity: 0.8,
     },
   },
+  textField: {
+    "& .MuiInputBase-root": {
+      borderColor: colors.tan[300],
+    },
+  },
 }))
 
 type Props = {
@@ -64,8 +69,8 @@ const AddTargetModal = ({ onAddTarget, onClose, isOpen }: Props): React.ReactEle
           Read more about targets.
         </Link>
       </Box>
-      <Box sx={{ mt: 2 }}>
-        <TextField
+      <Box sx={{ mt: 2 }} className={classes.textField}>
+        <ZodiacTextField
           onChange={(e) => onAddressChange(e.target.value)}
           label={`target address`}
           placeholder={`Add a new target address`}

packages/app/src/components/views/AttachRolesModifier/AttachRolesModifierView.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, makeStyles, Paper, Typography } from "@material-ui/core"
-import { TextField } from "../../commons/input/TextField"
+import { ZodiacTextField } from "zodiac-ui-components"
 import { ReactComponent as ArrowUp } from "../../../assets/icons/arrow-up.svg"
 import { useState } from "react"
 import { useNavigate } from "react-router-dom"
@@ -55,7 +55,7 @@ export const AttachRolesModifierView = () => {
           Once a Role Modifier is connected you can manage roles and permissions.
         </Typography>
 
-        <TextField
+        <ZodiacTextField
           className={classes.spacing}
           onChange={(evt: any) => setAddress(evt.target.value)}
           label="Role Modifier Address"

packages/app/src/components/views/Header/ChainPicker.tsx

@@ -7,18 +7,17 @@ import { getNetwork, NETWORKS } from "../../../utils/networks"
 
 const useStyles = makeStyles((theme) => ({
   networkPickerContainer: {
-    flexDirection: "column",
-    alignItems: "flex-start",
-    flexGrow: 1,
-    maxWidth: 180,
+    "&.MuiPaper-root": {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      flexGrow: 1,
+      maxWidth: 180,
+    },
   },
   networkPicker: {
     marginTop: theme.spacing(0.5),
     padding: theme.spacing(0.5),
     fontSize: 12,
-    "&:after": {
-      display: "none",
-    },
   },
 }))
 

packages/app/src/components/views/Header/ConnectWalletBox.tsx

@@ -2,9 +2,11 @@ import { HeaderAddressBox } from "./HeaderAddressBox"
 import { useRootSelector } from "../../../store"
 import { getConnectedAddress } from "../../../store/main/selectors"
 import { HeaderBox } from "./HeaderBox"
-import { makeStyles, Typography } from "@material-ui/core"
+import { Box, Button, makeStyles, Typography } from "@material-ui/core"
 import AddIcon from "@material-ui/icons/Add"
 import { useWallet } from "../../../hooks/useWallet"
+import { useState } from "react"
+import { WalletType } from "../../../services/rolesModifierContract"
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -17,14 +19,23 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     color: "#D9D4AD",
   },
+  connectWalletBoxContainer: {
+    position: "relative",
+    marginLeft: 16,
+    zIndex: 1,
+  },
+  connectWalletBoxMenu: {
+    position: "absolute",
+    bottom: -50,
+    width: "100%",
+  },
 }))
 
 export const ConnectWalletBox = () => {
   const classes = useStyles()
   const address = useRootSelector(getConnectedAddress)
-
-  const { startOnboard } = useWallet()
-
+  const { startOnboard, onboard, walletType } = useWallet()
+  const [showWalletOption, setShowWalletOption] = useState<boolean>(false)
   if (!address) {
     return (
       <HeaderBox onClick={startOnboard} icon={<AddIcon className={classes.icon} />} className={classes.root}>
@@ -35,5 +46,29 @@ export const ConnectWalletBox = () => {
     )
   }
 
-  return <HeaderAddressBox address={address} emptyText="No Wallet Connected" />
+  return (
+    <Box className={classes.connectWalletBoxContainer}>
+      <HeaderAddressBox
+        address={address}
+        emptyText="No Wallet Connected"
+        onClick={walletType !== WalletType.GNOSIS_SAFE ? () => setShowWalletOption(!showWalletOption) : undefined}
+      />
+      {showWalletOption && (
+        <Box className={classes.connectWalletBoxMenu}>
+          <Button
+            size="large"
+            variant="contained"
+            color="primary"
+            fullWidth
+            onClick={() => {
+              onboard.walletReset()
+              setShowWalletOption(false)
+            }}
+          >
+            Disconnect Wallet
+          </Button>
+        </Box>
+      )}
+    </Box>
+  )
 }

packages/app/src/components/views/Header/Header.tsx

@@ -1,11 +1,11 @@
 import { Box, makeStyles, Typography } from "@material-ui/core"
-import RolesModuleLogo from "../../../assets/images/roles-module-logo.png"
 import { ChainPicker } from "./ChainPicker"
 import { HeaderBox } from "./HeaderBox"
 import { HeaderAddressBox } from "./HeaderAddressBox"
 import { useRootSelector } from "../../../store"
 import { getRolesModifierAddress } from "../../../store/main/selectors"
 import { ConnectWalletBox } from "./ConnectWalletBox"
+import { BadgeIcon } from "zodiac-ui-components"
 import { useNavigate } from "react-router-dom"
 
 const useStyles = makeStyles((theme) => ({
@@ -35,10 +35,7 @@ export const Header = () => {
 
   return (
     <Box className={classes.root}>
-      <HeaderBox
-        icon={<img src={RolesModuleLogo} alt="Roles App Logo" className={classes.img} />}
-        onClick={() => navigate(`/${module}`)}
-      >
+      <HeaderBox icon={<BadgeIcon icon="roles" />} onClick={() => navigate(`/${module}`)}>
         <Typography variant="h5" className={classes.title}>
           Roles
         </Typography>

packages/app/src/components/views/Header/HeaderAddressBox.tsx

@@ -33,9 +33,10 @@ const useStyles = makeStyles((theme) => ({
 interface HeaderAddressBoxProps {
   address?: string
   emptyText: string
+  onClick?: () => void
 }
 
-export const HeaderAddressBox = ({ address, emptyText }: HeaderAddressBoxProps) => {
+export const HeaderAddressBox = ({ address, emptyText, onClick }: HeaderAddressBoxProps) => {
   const classes = useStyles()
   return (
     <HeaderBox
@@ -49,8 +50,9 @@ export const HeaderAddressBox = ({ address, emptyText }: HeaderAddressBoxProps)
             showHash={false}
             avatarSize="md"
           />
-        ) : null
+        ) : undefined
       }
+      onClick={onClick}
     >
       <Typography
         variant="body1"