From 7243a2ff88ec6097c148f4b527ced5a1d6491728 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 20 Aug 2024 11:38:18 -0400
Subject: [PATCH 01/46] type the push

---
 src/components/pages/Roles/RoleCard.tsx       |   2 +-
 src/components/pages/Roles/RolesTable.tsx     |   7 +-
 .../Roles/forms/RoleFormCreateProposal.tsx    |  23 +--
 .../pages/Roles/forms/RoleFormInfo.tsx        |   6 +-
 .../Roles/forms/RoleFormPaymentStream.tsx     |   6 +-
 .../Roles/forms/RoleFormPaymentStreams.tsx    |   7 +-
 .../pages/Roles/forms/RoleFormTabs.tsx        |   4 +-
 src/components/pages/Roles/types.tsx          |  12 +-
 .../ui/modals/PaymentWithdrawModal.tsx        |   9 +-
 .../[daoAddress]/roles/edit/details/index.tsx |   3 +-
 src/store/roles/rolesStoreUtils.ts            |  12 +-
 ....timestamp-1724166329011-a3ecd76c28483.mjs | 149 ++++++++++++++++++
 12 files changed, 211 insertions(+), 29 deletions(-)
 create mode 100644 vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs

diff --git a/src/components/pages/Roles/RoleCard.tsx b/src/components/pages/Roles/RoleCard.tsx
index 56fac6bef8..94c3aef0d1 100644
--- a/src/components/pages/Roles/RoleCard.tsx
+++ b/src/components/pages/Roles/RoleCard.tsx
@@ -19,7 +19,7 @@ export function AvatarAndRoleName({
   paymentsCount,
 }: {
   wearerAddress: string | undefined;
-  name: string;
+  name?: string;
   paymentsCount?: number;
 }) {
   const { addressPrefix } = useNetworkConfig();
diff --git a/src/components/pages/Roles/RolesTable.tsx b/src/components/pages/Roles/RolesTable.tsx
index 00bb487164..8fe3c8c0c7 100644
--- a/src/components/pages/Roles/RolesTable.tsx
+++ b/src/components/pages/Roles/RolesTable.tsx
@@ -53,7 +53,7 @@ function RoleNameEditColumn({
   roleName,
   editStatus,
 }: {
-  roleName: string;
+  roleName?: string;
   editStatus?: EditBadgeStatus;
 }) {
   return (
@@ -311,8 +311,11 @@ export function RolesEditTable({ handleRoleClick }: { handleRoleClick: (hatId: H
               name={role.name}
               wearerAddress={role.wearer}
               handleRoleClick={() => {
+                if (!role.id) {
+                  throw new Error('Role ID is missing');
+                }
                 setFieldValue('roleEditing', role);
-                handleRoleClick(role.id);
+                handleRoleClick(getAddress(role.id));
               }}
               editStatus={role.editedRole?.status}
               payments={role.payments}
diff --git a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
index b5560eb7eb..ba216283e6 100644
--- a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
+++ b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
@@ -123,16 +123,19 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
         boxShadow={CARD_SHADOW}
         borderRadius="0.5rem"
       >
-        {editedRoles.map((role, index) => (
-          <RoleCardShort
-            key={index}
-            name={role.name}
-            handleRoleClick={() => {
-              setDrawerViewingRole(normalizeRoleFormData(role));
-            }}
-            editStatus={role.editedRole?.status}
-          />
-        ))}
+        {editedRoles.map((role, index) => {
+          const normalizedRole = normalizeRoleFormData(role);
+          return (
+            <RoleCardShort
+              key={index}
+              name={normalizedRole.name}
+              handleRoleClick={() => {
+                setDrawerViewingRole(normalizedRole);
+              }}
+              editStatus={role.editedRole?.status}
+            />
+          );
+        })}
       </Box>
       <Flex
         gap="1rem"
diff --git a/src/components/pages/Roles/forms/RoleFormInfo.tsx b/src/components/pages/Roles/forms/RoleFormInfo.tsx
index daee878f88..a91a4571ac 100644
--- a/src/components/pages/Roles/forms/RoleFormInfo.tsx
+++ b/src/components/pages/Roles/forms/RoleFormInfo.tsx
@@ -1,5 +1,5 @@
 import { Box, FormControl } from '@chakra-ui/react';
-import { Field, FieldProps } from 'formik';
+import { Field, FieldProps, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { CARD_SHADOW } from '../../../../constants/common';
 import { AddressInput } from '../../../ui/forms/EthAddressInput';
@@ -9,7 +9,9 @@ import { RoleFormValues } from '../types';
 
 export default function RoleFormInfo() {
   const { t } = useTranslation('roles');
-
+  const { values, errors } = useFormikContext<RoleFormValues>();
+  console.log("🚀 ~ values:", values.roleEditing)
+  console.log("🚀 ~ errors:", errors)
   return (
     <Box
       px={{ base: '1rem', md: 0 }}
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx
index 483333b8a4..518fd48c1a 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx
@@ -2,6 +2,7 @@ import { Box, Button, Flex, FormControl, Grid, GridItem, Icon } from '@chakra-ui
 import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
 import { FormikErrors, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
+import { getAddress } from 'viem';
 import { CARD_SHADOW } from '../../../../constants/common';
 import { useRolesStore } from '../../../../store/roles';
 import { DecentDatePicker, DecentDatePickerRange } from '../../../ui/utils/DecentDatePicker';
@@ -117,10 +118,11 @@ export default function RoleFormPaymentStream({ formIndex }: { formIndex: number
         leftIcon={<ArrowLeft size="1.5rem" />}
         isDisabled={!values?.roleEditing?.payments?.[formIndex]}
         onClick={() => {
-          if (!values?.roleEditing?.payments?.[formIndex]) return;
+          const hatId = values.roleEditing?.id;
+          if (!values?.roleEditing?.payments?.[formIndex] || !hatId) return;
           const streamId = values.roleEditing?.payments?.[formIndex]?.streamId;
           const isExistingPayment = !!streamId
-            ? getPayment(values.roleEditing.id, streamId)
+            ? getPayment(getAddress(hatId), streamId)
             : undefined;
           // if payment is new, and unedited, remove it
           if (
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
index d438166a7f..ca18010d51 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -12,17 +12,16 @@ export function RoleFormPaymentStreams() {
 
   return (
     <FieldArray name="roleEditing.payments">
-      {({ push: pushPayment }) => (
+      {({ push: pushPayment }: { push: (obj: SablierPaymentFormValues) => void }) => (
         <Box>
           <Button
             variant="secondary"
             size="sm"
             leftIcon={<Plus />}
             onClick={async () => {
-              const newPayment: SablierPaymentFormValues = {
+              pushPayment({
                 isStreaming: () => false,
-              };
-              pushPayment(newPayment);
+              });
               await validateForm();
               setFieldValue('roleEditing.roleEditingPaymentIndex', (payments ?? []).length);
             }}
diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx
index 56a4cdcad3..b4894c0419 100644
--- a/src/components/pages/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx
@@ -8,7 +8,7 @@ import { DAO_ROUTES } from '../../../../constants/routes';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { useRolesStore } from '../../../../store/roles';
-import { EditBadgeStatus, RoleFormValues } from '../types';
+import { EditBadgeStatus, RoleFormValues, RoleHatFormValue } from '../types';
 import RoleFormInfo from './RoleFormInfo';
 import RoleFormPaymentStream from './RoleFormPaymentStream';
 import { RoleFormPaymentStreams } from './RoleFormPaymentStreams';
@@ -19,7 +19,7 @@ export default function RoleFormTabs({
   pushRole,
 }: {
   hatId: Hex;
-  pushRole: (obj: any) => void;
+  pushRole: (obj: RoleHatFormValue) => void;
 }) {
   const { hatsTree } = useRolesStore();
   const {
diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index a2d5add1e8..7ac8e519b3 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -40,7 +40,11 @@ export interface RoleProps {
 }
 
 export interface RoleEditProps
-  extends Omit<RoleProps, 'hatId' | 'wearerAddress' | 'handleRoleClick' | 'paymentsCount'> {
+  extends Omit<
+    RoleProps,
+    'hatId' | 'wearerAddress' | 'handleRoleClick' | 'paymentsCount' | 'name'
+  > {
+  name?: string;
   handleRoleClick: () => void;
   wearerAddress: string | undefined;
   payments?: SablierPaymentFormValues[];
@@ -85,8 +89,10 @@ export interface DurationBreakdown {
   days: number;
 }
 
-export interface RoleHatFormValue extends Omit<DecentRoleHat, 'wearer' | 'payments'> {
-  wearer: string;
+export interface RoleHatFormValue
+  extends Partial<Omit<DecentRoleHat, 'id' | 'wearer' | 'payments'>> {
+  id?: string;
+  wearer?: string;
   editedRole?: EditedRole;
   payments?: SablierPaymentFormValues[];
   roleEditingPaymentIndex?: number;
diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index 15733280da..4a1fd400dc 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -39,7 +39,14 @@ export default function PaymentWithdrawModal({
   const { chain } = useNetworkConfig();
 
   const handleWithdraw = useCallback(async () => {
-    if (payment?.contractAddress && payment?.streamId && walletClient && publicClient) {
+    if (
+      payment?.contractAddress &&
+      payment?.streamId &&
+      walletClient &&
+      publicClient &&
+      roleHat.smartAddress &&
+      roleHat.wearer
+    ) {
       let withdrawToast: Id | undefined = undefined;
       try {
         const hatsAccountContract = getContract({
diff --git a/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx
index 56f8330a8c..bec04bd926 100644
--- a/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx
@@ -23,6 +23,7 @@ import {
   EditBadgeStatus,
   EditedRole,
   RoleFormValues,
+  RoleHatFormValue,
 } from '../../../../../../components/pages/Roles/types';
 import DraggableDrawer from '../../../../../../components/ui/containers/DraggableDrawer';
 import { ModalBase } from '../../../../../../components/ui/modals/ModalBase';
@@ -205,7 +206,7 @@ export default function RoleEditDetails() {
         </>
       )}
       <FieldArray name="hats">
-        {({ push }) => (
+        {({ push }: { push: (obj: RoleHatFormValue) => void }) => (
           <>
             <Show below="md">
               <Portal>
diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index 00ffda7260..8bce34b397 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -365,8 +365,18 @@ export const normalizePaymentFormData = (payment: SablierPaymentFormValues): Sab
 };
 
 export const normalizeRoleFormData = (role: RoleHatFormValue): DecentRoleHat => {
+  if (
+    !role.id ||
+    !role.prettyId ||
+    !role.wearer ||
+    !role.name ||
+    !role.description ||
+    !role.smartAddress
+  ) {
+    throw new Error('Form not properly filled out');
+  }
   return {
-    id: role.id,
+    id: getAddress(role.id),
     prettyId: role.prettyId,
     wearer: getAddress(role.wearer),
     name: role.name,
diff --git a/vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs b/vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs
new file mode 100644
index 0000000000..621a798f8e
--- /dev/null
+++ b/vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs
@@ -0,0 +1,149 @@
+// vite.config.mts
+import react from "file:///Users/epicbadtiming/Projects/Fractal/fractal-interface/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import { defineConfig } from "file:///Users/epicbadtiming/Projects/Fractal/fractal-interface/node_modules/vite/dist/node/index.js";
+import { checker } from "file:///Users/epicbadtiming/Projects/Fractal/fractal-interface/node_modules/vite-plugin-checker/dist/esm/main.js";
+
+// package.json
+var package_default = {
+  name: "decent-interface",
+  version: "0.2.12",
+  private: true,
+  dependencies: {
+    "@apollo/client": "^3.7.10",
+    "@chakra-ui/anatomy": "^2.2.2",
+    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/theme-tools": "^2.1.2",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@ethersproject/abstract-signer": "^5.7.0",
+    "@ethersproject/providers": "^5.7.2",
+    "@fontsource/space-mono": "^5.0.19",
+    "@fractal-framework/fractal-contracts": "^0.8.1",
+    "@graphprotocol/client-apollo": "^1.0.16",
+    "@hatsprotocol/sdk-v1-core": "^0.9.0",
+    "@hatsprotocol/sdk-v1-subgraph": "^1.0.0",
+    "@lido-sdk/contracts": "^3.0.2",
+    "@netlify/blobs": "^6.5.0",
+    "@netlify/functions": "^2.6.0",
+    "@phosphor-icons/react": "^2.1.4",
+    "@safe-global/api-kit": "^2.4.2",
+    "@safe-global/safe-core-sdk-types": "^5.0.2",
+    "@safe-global/safe-deployments": "^1.34.0",
+    "@sentry/react": "^8.7.0",
+    "@shutter-network/shutter-crypto": "^1.0.1",
+    "@snapshot-labs/snapshot.js": "^0.7.3",
+    "@tanstack/react-query": "^5.36.2",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@web3modal/wagmi": "^4.2.3",
+    axios: "^0.27.2",
+    blo: "^1.2.0",
+    classnames: "^2.3.1",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.1",
+    ethers: "^5.7.2",
+    "evm-proxy-detection": "^1.1.0",
+    formik: "^2.2.9",
+    "framer-motion": "^6.5.1",
+    graphql: "^16.6.0",
+    i18next: "^23.10.1",
+    "i18next-browser-languagedetector": "^6.1.5",
+    "js-big-decimal": "^1.3.12",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.groupby": "^4.6.0",
+    "lodash.isequal": "^4.5.0",
+    moralis: "^2.27.1",
+    react: "^18.2.0",
+    "react-calendar": "^5.0.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0",
+    "react-idle-timer": "^5.5.3",
+    "react-image": "^4.0.3",
+    "react-markdown": "^9.0.0",
+    "react-router-dom": "^6.22.0",
+    "react-toastify": "^9.0.8",
+    "remark-gfm": "^4.0.0",
+    viem: "^2.13.1",
+    vite: "^5.1.0",
+    "vite-plugin-checker": "^0.6.4",
+    wagmi: "^2.9.7",
+    yup: "^1",
+    zustand: "^4.5.2"
+  },
+  scripts: {
+    lint: "eslint . --ext .ts,.tsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx",
+    pretty: "prettier . --write",
+    "pretty:check": "prettier . --check",
+    dev: "vite --force",
+    "dev:netlify": "netlify dev",
+    start: "vite start",
+    preview: "vite preview",
+    build: "NODE_OPTIONS=--max-old-space-size=8192 vite build",
+    "graphql:build": "graphclient build",
+    "graphql:dev-server": "graphclient serve-dev",
+    test: "vitest --dir=test",
+    postinstall: "npm run graphql:build"
+  },
+  engines: {
+    node: "20.12.0",
+    npm: "10.5.0"
+  },
+  browserslist: {
+    production: [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    development: [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  devDependencies: {
+    "@graphprotocol/client-cli": "^2.2.20",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.2.1",
+    "@types/lodash.camelcase": "^4.3.9",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.groupby": "^4.6.9",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    encoding: "^0.1.13",
+    eslint: "^8.22.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    jsdom: "^24.0.0",
+    "netlify-cli": "^17.33.3",
+    prettier: "^3.2.5",
+    typescript: "^5.3.3",
+    url: "^0.11.0",
+    vitest: "^1.2.2"
+  }
+};
+
+// vite.config.mts
+var vite_config_default = defineConfig({
+  plugins: [react(), checker({ typescript: true })],
+  server: {
+    port: 3e3
+  },
+  build: {
+    sourcemap: true
+  },
+  define: {
+    "import.meta.env.PACKAGE_VERSION": JSON.stringify(package_default.version)
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcubXRzIiwgInBhY2thZ2UuanNvbiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9lcGljYmFkdGltaW5nL1Byb2plY3RzL0ZyYWN0YWwvZnJhY3RhbC1pbnRlcmZhY2VcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9lcGljYmFkdGltaW5nL1Byb2plY3RzL0ZyYWN0YWwvZnJhY3RhbC1pbnRlcmZhY2Uvdml0ZS5jb25maWcubXRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9lcGljYmFkdGltaW5nL1Byb2plY3RzL0ZyYWN0YWwvZnJhY3RhbC1pbnRlcmZhY2Uvdml0ZS5jb25maWcubXRzXCI7aW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0LXN3Yyc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB7IGNoZWNrZXIgfSBmcm9tICd2aXRlLXBsdWdpbi1jaGVja2VyJztcbmltcG9ydCBwYWNrYWdlSnNvbiBmcm9tICcuL3BhY2thZ2UuanNvbic7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbcmVhY3QoKSwgY2hlY2tlcih7IHR5cGVzY3JpcHQ6IHRydWUgfSldLFxuICBzZXJ2ZXI6IHtcbiAgICBwb3J0OiAzMDAwLFxuICB9LFxuICBidWlsZDoge1xuICAgIHNvdXJjZW1hcDogdHJ1ZSxcbiAgfSxcbiAgZGVmaW5lOiB7XG4gICAgJ2ltcG9ydC5tZXRhLmVudi5QQUNLQUdFX1ZFUlNJT04nOiBKU09OLnN0cmluZ2lmeShwYWNrYWdlSnNvbi52ZXJzaW9uKSxcbiAgfSxcbn0pO1xuIiwgIntcbiAgXCJuYW1lXCI6IFwiZGVjZW50LWludGVyZmFjZVwiLFxuICBcInZlcnNpb25cIjogXCIwLjIuMTJcIixcbiAgXCJwcml2YXRlXCI6IHRydWUsXG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcIkBhcG9sbG8vY2xpZW50XCI6IFwiXjMuNy4xMFwiLFxuICAgIFwiQGNoYWtyYS11aS9hbmF0b215XCI6IFwiXjIuMi4yXCIsXG4gICAgXCJAY2hha3JhLXVpL3JlYWN0XCI6IFwiXjIuOC4yXCIsXG4gICAgXCJAY2hha3JhLXVpL3RoZW1lLXRvb2xzXCI6IFwiXjIuMS4yXCIsXG4gICAgXCJAZW1vdGlvbi9yZWFjdFwiOiBcIl4xMS4xMC42XCIsXG4gICAgXCJAZW1vdGlvbi9zdHlsZWRcIjogXCJeMTEuMTAuNlwiLFxuICAgIFwiQGV0aGVyc3Byb2plY3QvYWJzdHJhY3Qtc2lnbmVyXCI6IFwiXjUuNy4wXCIsXG4gICAgXCJAZXRoZXJzcHJvamVjdC9wcm92aWRlcnNcIjogXCJeNS43LjJcIixcbiAgICBcIkBmb250c291cmNlL3NwYWNlLW1vbm9cIjogXCJeNS4wLjE5XCIsXG4gICAgXCJAZnJhY3RhbC1mcmFtZXdvcmsvZnJhY3RhbC1jb250cmFjdHNcIjogXCJeMC44LjFcIixcbiAgICBcIkBncmFwaHByb3RvY29sL2NsaWVudC1hcG9sbG9cIjogXCJeMS4wLjE2XCIsXG4gICAgXCJAaGF0c3Byb3RvY29sL3Nkay12MS1jb3JlXCI6IFwiXjAuOS4wXCIsXG4gICAgXCJAaGF0c3Byb3RvY29sL3Nkay12MS1zdWJncmFwaFwiOiBcIl4xLjAuMFwiLFxuICAgIFwiQGxpZG8tc2RrL2NvbnRyYWN0c1wiOiBcIl4zLjAuMlwiLFxuICAgIFwiQG5ldGxpZnkvYmxvYnNcIjogXCJeNi41LjBcIixcbiAgICBcIkBuZXRsaWZ5L2Z1bmN0aW9uc1wiOiBcIl4yLjYuMFwiLFxuICAgIFwiQHBob3NwaG9yLWljb25zL3JlYWN0XCI6IFwiXjIuMS40XCIsXG4gICAgXCJAc2FmZS1nbG9iYWwvYXBpLWtpdFwiOiBcIl4yLjQuMlwiLFxuICAgIFwiQHNhZmUtZ2xvYmFsL3NhZmUtY29yZS1zZGstdHlwZXNcIjogXCJeNS4wLjJcIixcbiAgICBcIkBzYWZlLWdsb2JhbC9zYWZlLWRlcGxveW1lbnRzXCI6IFwiXjEuMzQuMFwiLFxuICAgIFwiQHNlbnRyeS9yZWFjdFwiOiBcIl44LjcuMFwiLFxuICAgIFwiQHNodXR0ZXItbmV0d29yay9zaHV0dGVyLWNyeXB0b1wiOiBcIl4xLjAuMVwiLFxuICAgIFwiQHNuYXBzaG90LWxhYnMvc25hcHNob3QuanNcIjogXCJeMC43LjNcIixcbiAgICBcIkB0YW5zdGFjay9yZWFjdC1xdWVyeVwiOiBcIl41LjM2LjJcIixcbiAgICBcIkB2aXRlanMvcGx1Z2luLXJlYWN0LXN3Y1wiOiBcIl4zLjUuMFwiLFxuICAgIFwiQHdlYjNtb2RhbC93YWdtaVwiOiBcIl40LjIuM1wiLFxuICAgIFwiYXhpb3NcIjogXCJeMC4yNy4yXCIsXG4gICAgXCJibG9cIjogXCJeMS4yLjBcIixcbiAgICBcImNsYXNzbmFtZXNcIjogXCJeMi4zLjFcIixcbiAgICBcImRhdGUtZm5zXCI6IFwiXjIuMjkuM1wiLFxuICAgIFwiZGF0ZS1mbnMtdHpcIjogXCJeMi4wLjFcIixcbiAgICBcImV0aGVyc1wiOiBcIl41LjcuMlwiLFxuICAgIFwiZXZtLXByb3h5LWRldGVjdGlvblwiOiBcIl4xLjEuMFwiLFxuICAgIFwiZm9ybWlrXCI6IFwiXjIuMi45XCIsXG4gICAgXCJmcmFtZXItbW90aW9uXCI6IFwiXjYuNS4xXCIsXG4gICAgXCJncmFwaHFsXCI6IFwiXjE2LjYuMFwiLFxuICAgIFwiaTE4bmV4dFwiOiBcIl4yMy4xMC4xXCIsXG4gICAgXCJpMThuZXh0LWJyb3dzZXItbGFuZ3VhZ2VkZXRlY3RvclwiOiBcIl42LjEuNVwiLFxuICAgIFwianMtYmlnLWRlY2ltYWxcIjogXCJeMS4zLjEyXCIsXG4gICAgXCJsb2Rhc2guY2FtZWxjYXNlXCI6IFwiXjQuMy4wXCIsXG4gICAgXCJsb2Rhc2guZGVib3VuY2VcIjogXCJeNC4wLjhcIixcbiAgICBcImxvZGFzaC5ncm91cGJ5XCI6IFwiXjQuNi4wXCIsXG4gICAgXCJsb2Rhc2guaXNlcXVhbFwiOiBcIl40LjUuMFwiLFxuICAgIFwibW9yYWxpc1wiOiBcIl4yLjI3LjFcIixcbiAgICBcInJlYWN0XCI6IFwiXjE4LjIuMFwiLFxuICAgIFwicmVhY3QtY2FsZW5kYXJcIjogXCJeNS4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4yLjBcIixcbiAgICBcInJlYWN0LWkxOG5leHRcIjogXCJeMTMuNS4wXCIsXG4gICAgXCJyZWFjdC1pZGxlLXRpbWVyXCI6IFwiXjUuNS4zXCIsXG4gICAgXCJyZWFjdC1pbWFnZVwiOiBcIl40LjAuM1wiLFxuICAgIFwicmVhY3QtbWFya2Rvd25cIjogXCJeOS4wLjBcIixcbiAgICBcInJlYWN0LXJvdXRlci1kb21cIjogXCJeNi4yMi4wXCIsXG4gICAgXCJyZWFjdC10b2FzdGlmeVwiOiBcIl45LjAuOFwiLFxuICAgIFwicmVtYXJrLWdmbVwiOiBcIl40LjAuMFwiLFxuICAgIFwidmllbVwiOiBcIl4yLjEzLjFcIixcbiAgICBcInZpdGVcIjogXCJeNS4xLjBcIixcbiAgICBcInZpdGUtcGx1Z2luLWNoZWNrZXJcIjogXCJeMC42LjRcIixcbiAgICBcIndhZ21pXCI6IFwiXjIuOS43XCIsXG4gICAgXCJ5dXBcIjogXCJeMVwiLFxuICAgIFwienVzdGFuZFwiOiBcIl40LjUuMlwiXG4gIH0sXG4gIFwic2NyaXB0c1wiOiB7XG4gICAgXCJsaW50XCI6IFwiZXNsaW50IC4gLS1leHQgLnRzLC50c3ggLS1maXhcIixcbiAgICBcImxpbnQ6Y2hlY2tcIjogXCJlc2xpbnQgLiAtLWV4dCAudHMsLnRzeFwiLFxuICAgIFwicHJldHR5XCI6IFwicHJldHRpZXIgLiAtLXdyaXRlXCIsXG4gICAgXCJwcmV0dHk6Y2hlY2tcIjogXCJwcmV0dGllciAuIC0tY2hlY2tcIixcbiAgICBcImRldlwiOiBcInZpdGUgLS1mb3JjZVwiLFxuICAgIFwiZGV2Om5ldGxpZnlcIjogXCJuZXRsaWZ5IGRldlwiLFxuICAgIFwic3RhcnRcIjogXCJ2aXRlIHN0YXJ0XCIsXG4gICAgXCJwcmV2aWV3XCI6IFwidml0ZSBwcmV2aWV3XCIsXG4gICAgXCJidWlsZFwiOiBcIk5PREVfT1BUSU9OUz0tLW1heC1vbGQtc3BhY2Utc2l6ZT04MTkyIHZpdGUgYnVpbGRcIixcbiAgICBcImdyYXBocWw6YnVpbGRcIjogXCJncmFwaGNsaWVudCBidWlsZFwiLFxuICAgIFwiZ3JhcGhxbDpkZXYtc2VydmVyXCI6IFwiZ3JhcGhjbGllbnQgc2VydmUtZGV2XCIsXG4gICAgXCJ0ZXN0XCI6IFwidml0ZXN0IC0tZGlyPXRlc3RcIixcbiAgICBcInBvc3RpbnN0YWxsXCI6IFwibnBtIHJ1biBncmFwaHFsOmJ1aWxkXCJcbiAgfSxcbiAgXCJlbmdpbmVzXCI6IHtcbiAgICBcIm5vZGVcIjogXCIyMC4xMi4wXCIsXG4gICAgXCJucG1cIjogXCIxMC41LjBcIlxuICB9LFxuICBcImJyb3dzZXJzbGlzdFwiOiB7XG4gICAgXCJwcm9kdWN0aW9uXCI6IFtcbiAgICAgIFwiPjAuMiVcIixcbiAgICAgIFwibm90IGRlYWRcIixcbiAgICAgIFwibm90IG9wX21pbmkgYWxsXCJcbiAgICBdLFxuICAgIFwiZGV2ZWxvcG1lbnRcIjogW1xuICAgICAgXCJsYXN0IDEgY2hyb21lIHZlcnNpb25cIixcbiAgICAgIFwibGFzdCAxIGZpcmVmb3ggdmVyc2lvblwiLFxuICAgICAgXCJsYXN0IDEgc2FmYXJpIHZlcnNpb25cIlxuICAgIF1cbiAgfSxcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQGdyYXBocHJvdG9jb2wvY2xpZW50LWNsaVwiOiBcIl4yLjIuMjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvamVzdC1kb21cIjogXCJeNS4xNi41XCIsXG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L3JlYWN0XCI6IFwiXjE0LjIuMVwiLFxuICAgIFwiQHR5cGVzL2xvZGFzaC5jYW1lbGNhc2VcIjogXCJeNC4zLjlcIixcbiAgICBcIkB0eXBlcy9sb2Rhc2guZGVib3VuY2VcIjogXCJeNC4wLjlcIixcbiAgICBcIkB0eXBlcy9sb2Rhc2guZ3JvdXBieVwiOiBcIl40LjYuOVwiLFxuICAgIFwiQHR5cGVzL2xvZGFzaC5pc2VxdWFsXCI6IFwiXjQuNS44XCIsXG4gICAgXCJAdHlwZXMvcmVhY3RcIjogXCJeMTguMC4xN1wiLFxuICAgIFwiQHR5cGVzL3JlYWN0LWRvbVwiOiBcIl4xOC4wLjZcIixcbiAgICBcIkB0eXBlc2NyaXB0LWVzbGludC9lc2xpbnQtcGx1Z2luXCI6IFwiXjYuMTkuMFwiLFxuICAgIFwiQHR5cGVzY3JpcHQtZXNsaW50L3BhcnNlclwiOiBcIl42LjE5LjBcIixcbiAgICBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI6IFwiXjQuMi4xXCIsXG4gICAgXCJlbmNvZGluZ1wiOiBcIl4wLjEuMTNcIixcbiAgICBcImVzbGludFwiOiBcIl44LjIyLjBcIixcbiAgICBcImVzbGludC1jb25maWctYWlyYm5iLXR5cGVzY3JpcHRcIjogXCJeMTcuMS4wXCIsXG4gICAgXCJlc2xpbnQtY29uZmlnLXByZXR0aWVyXCI6IFwiXjkuMS4wXCIsXG4gICAgXCJlc2xpbnQtcGx1Z2luLWltcG9ydFwiOiBcIl4yLjI2LjBcIixcbiAgICBcImVzbGludC1wbHVnaW4tcmVhY3RcIjogXCJeNy4zMy4yXCIsXG4gICAgXCJlc2xpbnQtcGx1Z2luLXJlYWN0LWhvb2tzXCI6IFwiXjQuNi4wXCIsXG4gICAgXCJqc2RvbVwiOiBcIl4yNC4wLjBcIixcbiAgICBcIm5ldGxpZnktY2xpXCI6IFwiXjE3LjMzLjNcIixcbiAgICBcInByZXR0aWVyXCI6IFwiXjMuMi41XCIsXG4gICAgXCJ0eXBlc2NyaXB0XCI6IFwiXjUuMy4zXCIsXG4gICAgXCJ1cmxcIjogXCJeMC4xMS4wXCIsXG4gICAgXCJ2aXRlc3RcIjogXCJeMS4yLjJcIlxuICB9XG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXlWLE9BQU8sV0FBVztBQUMzVyxTQUFTLG9CQUFvQjtBQUM3QixTQUFTLGVBQWU7OztBQ0Z4QjtBQUFBLEVBQ0UsTUFBUTtBQUFBLEVBQ1IsU0FBVztBQUFBLEVBQ1gsU0FBVztBQUFBLEVBQ1gsY0FBZ0I7QUFBQSxJQUNkLGtCQUFrQjtBQUFBLElBQ2xCLHNCQUFzQjtBQUFBLElBQ3RCLG9CQUFvQjtBQUFBLElBQ3BCLDBCQUEwQjtBQUFBLElBQzFCLGtCQUFrQjtBQUFBLElBQ2xCLG1CQUFtQjtBQUFBLElBQ25CLGtDQUFrQztBQUFBLElBQ2xDLDRCQUE0QjtBQUFBLElBQzVCLDBCQUEwQjtBQUFBLElBQzFCLHdDQUF3QztBQUFBLElBQ3hDLGdDQUFnQztBQUFBLElBQ2hDLDZCQUE2QjtBQUFBLElBQzdCLGlDQUFpQztBQUFBLElBQ2pDLHVCQUF1QjtBQUFBLElBQ3ZCLGtCQUFrQjtBQUFBLElBQ2xCLHNCQUFzQjtBQUFBLElBQ3RCLHlCQUF5QjtBQUFBLElBQ3pCLHdCQUF3QjtBQUFBLElBQ3hCLG9DQUFvQztBQUFBLElBQ3BDLGlDQUFpQztBQUFBLElBQ2pDLGlCQUFpQjtBQUFBLElBQ2pCLG1DQUFtQztBQUFBLElBQ25DLDhCQUE4QjtBQUFBLElBQzlCLHlCQUF5QjtBQUFBLElBQ3pCLDRCQUE0QjtBQUFBLElBQzVCLG9CQUFvQjtBQUFBLElBQ3BCLE9BQVM7QUFBQSxJQUNULEtBQU87QUFBQSxJQUNQLFlBQWM7QUFBQSxJQUNkLFlBQVk7QUFBQSxJQUNaLGVBQWU7QUFBQSxJQUNmLFFBQVU7QUFBQSxJQUNWLHVCQUF1QjtBQUFBLElBQ3ZCLFFBQVU7QUFBQSxJQUNWLGlCQUFpQjtBQUFBLElBQ2pCLFNBQVc7QUFBQSxJQUNYLFNBQVc7QUFBQSxJQUNYLG9DQUFvQztBQUFBLElBQ3BDLGtCQUFrQjtBQUFBLElBQ2xCLG9CQUFvQjtBQUFBLElBQ3BCLG1CQUFtQjtBQUFBLElBQ25CLGtCQUFrQjtBQUFBLElBQ2xCLGtCQUFrQjtBQUFBLElBQ2xCLFNBQVc7QUFBQSxJQUNYLE9BQVM7QUFBQSxJQUNULGtCQUFrQjtBQUFBLElBQ2xCLGFBQWE7QUFBQSxJQUNiLGlCQUFpQjtBQUFBLElBQ2pCLG9CQUFvQjtBQUFBLElBQ3BCLGVBQWU7QUFBQSxJQUNmLGtCQUFrQjtBQUFBLElBQ2xCLG9CQUFvQjtBQUFBLElBQ3BCLGtCQUFrQjtBQUFBLElBQ2xCLGNBQWM7QUFBQSxJQUNkLE1BQVE7QUFBQSxJQUNSLE1BQVE7QUFBQSxJQUNSLHVCQUF1QjtBQUFBLElBQ3ZCLE9BQVM7QUFBQSxJQUNULEtBQU87QUFBQSxJQUNQLFNBQVc7QUFBQSxFQUNiO0FBQUEsRUFDQSxTQUFXO0FBQUEsSUFDVCxNQUFRO0FBQUEsSUFDUixjQUFjO0FBQUEsSUFDZCxRQUFVO0FBQUEsSUFDVixnQkFBZ0I7QUFBQSxJQUNoQixLQUFPO0FBQUEsSUFDUCxlQUFlO0FBQUEsSUFDZixPQUFTO0FBQUEsSUFDVCxTQUFXO0FBQUEsSUFDWCxPQUFTO0FBQUEsSUFDVCxpQkFBaUI7QUFBQSxJQUNqQixzQkFBc0I7QUFBQSxJQUN0QixNQUFRO0FBQUEsSUFDUixhQUFlO0FBQUEsRUFDakI7QUFBQSxFQUNBLFNBQVc7QUFBQSxJQUNULE1BQVE7QUFBQSxJQUNSLEtBQU87QUFBQSxFQUNUO0FBQUEsRUFDQSxjQUFnQjtBQUFBLElBQ2QsWUFBYztBQUFBLE1BQ1o7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLElBQ0Y7QUFBQSxJQUNBLGFBQWU7QUFBQSxNQUNiO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUFBLEVBQ0EsaUJBQW1CO0FBQUEsSUFDakIsNkJBQTZCO0FBQUEsSUFDN0IsNkJBQTZCO0FBQUEsSUFDN0IsMEJBQTBCO0FBQUEsSUFDMUIsMkJBQTJCO0FBQUEsSUFDM0IsMEJBQTBCO0FBQUEsSUFDMUIseUJBQXlCO0FBQUEsSUFDekIseUJBQXlCO0FBQUEsSUFDekIsZ0JBQWdCO0FBQUEsSUFDaEIsb0JBQW9CO0FBQUEsSUFDcEIsb0NBQW9DO0FBQUEsSUFDcEMsNkJBQTZCO0FBQUEsSUFDN0Isd0JBQXdCO0FBQUEsSUFDeEIsVUFBWTtBQUFBLElBQ1osUUFBVTtBQUFBLElBQ1YsbUNBQW1DO0FBQUEsSUFDbkMsMEJBQTBCO0FBQUEsSUFDMUIsd0JBQXdCO0FBQUEsSUFDeEIsdUJBQXVCO0FBQUEsSUFDdkIsNkJBQTZCO0FBQUEsSUFDN0IsT0FBUztBQUFBLElBQ1QsZUFBZTtBQUFBLElBQ2YsVUFBWTtBQUFBLElBQ1osWUFBYztBQUFBLElBQ2QsS0FBTztBQUFBLElBQ1AsUUFBVTtBQUFBLEVBQ1o7QUFDRjs7O0FEdEhBLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLEdBQUcsUUFBUSxFQUFFLFlBQVksS0FBSyxDQUFDLENBQUM7QUFBQSxFQUNoRCxRQUFRO0FBQUEsSUFDTixNQUFNO0FBQUEsRUFDUjtBQUFBLEVBQ0EsT0FBTztBQUFBLElBQ0wsV0FBVztBQUFBLEVBQ2I7QUFBQSxFQUNBLFFBQVE7QUFBQSxJQUNOLG1DQUFtQyxLQUFLLFVBQVUsZ0JBQVksT0FBTztBQUFBLEVBQ3ZFO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

From 9f4cf79d722eac771ec932905186d0232ea2eaca Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 14:08:59 -0400
Subject: [PATCH 02/46] temp

---
 src/components/pages/Roles/RolesTable.tsx |   2 +-
 src/components/pages/Roles/types.tsx      |   4 +-
 src/hooks/utils/useCreateRoles.ts         | 131 ++++++++++++++--------
 3 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/src/components/pages/Roles/RolesTable.tsx b/src/components/pages/Roles/RolesTable.tsx
index 8fe3c8c0c7..d2c8a92b0f 100644
--- a/src/components/pages/Roles/RolesTable.tsx
+++ b/src/components/pages/Roles/RolesTable.tsx
@@ -315,7 +315,7 @@ export function RolesEditTable({ handleRoleClick }: { handleRoleClick: (hatId: H
                   throw new Error('Role ID is missing');
                 }
                 setFieldValue('roleEditing', role);
-                handleRoleClick(getAddress(role.id));
+                handleRoleClick(role.id);
               }}
               editStatus={role.editedRole?.status}
               payments={role.payments}
diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 7ac8e519b3..2aac1e3eee 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -91,10 +91,10 @@ export interface DurationBreakdown {
 
 export interface RoleHatFormValue
   extends Partial<Omit<DecentRoleHat, 'id' | 'wearer' | 'payments'>> {
-  id?: string;
+  id: Hex;
   wearer?: string;
-  editedRole?: EditedRole;
   payments?: SablierPaymentFormValues[];
+  editedRole?: EditedRole;
   roleEditingPaymentIndex?: number;
 }
 
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 9c2fec244e..c96c26976d 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -133,6 +133,14 @@ export default function useCreateRoles() {
         editedHats
           .filter(hat => hat.editedRole?.status === EditBadgeStatus.New)
           .map(async hat => {
+            if (hat.name === undefined || hat.description === undefined) {
+              throw new Error('Hat name or description of added hat is undefined.');
+            }
+
+            if (hat.wearer === undefined) {
+              throw new Error('Hat wearer of added hat is undefined.');
+            }
+
             const details = await uploadHatDescription(
               hatsDetailsBuilder({
                 name: hat.name,
@@ -155,7 +163,13 @@ export default function useCreateRoles() {
       // Parse removed hats
       const removedHatIds = editedHats
         .filter(hat => hat.editedRole?.status === EditBadgeStatus.Removed)
-        .map(hat => hat.id);
+        .map(hat => {
+          if (hat.id === undefined) {
+            throw new Error('Hat ID of removed hat is undefined.');
+          }
+
+          return hat.id;
+        });
 
       // Parse member changed hats
       const memberChangedHats: HatWearerChangedParams[] = editedHats
@@ -164,11 +178,22 @@ export default function useCreateRoles() {
             hat.editedRole?.status === EditBadgeStatus.Updated &&
             hat.editedRole.fieldNames.includes('member'),
         )
-        .map(hat => ({
-          id: hat.id,
-          currentWearer: getAddress(getHat(hat.id)!.wearer),
-          newWearer: getAddress(hat.wearer),
-        }))
+        .map(hat => {
+          if (hat.wearer === undefined || hat.id === undefined) {
+            throw new Error('Hat wearer of member changed Hat is undefined.');
+          }
+
+          const currentHat = getHat(hat.id);
+          if (currentHat === null) {
+            throw new Error("Couldn't find existing Hat for member changed Hat.");
+          }
+
+          return {
+            id: hat.id,
+            currentWearer: getAddress(currentHat.wearer),
+            newWearer: getAddress(hat.wearer),
+          };
+        })
         .filter(hat => hat.currentWearer !== hat.newWearer);
 
       // Parse role details changed hats (name and/or description updated)
@@ -180,15 +205,25 @@ export default function useCreateRoles() {
               (hat.editedRole.fieldNames.includes('roleName') ||
                 hat.editedRole.fieldNames.includes('roleDescription')),
           )
-          .map(async hat => ({
-            id: hat.id,
-            details: await uploadHatDescription(
-              hatsDetailsBuilder({
-                name: hat.name,
-                description: hat.description,
-              }),
-            ),
-          })),
+          .map(async hat => {
+            if (hat.id === undefined) {
+              throw new Error('Hat ID of existing hat is undefined.');
+            }
+
+            if (hat.name === undefined || hat.description === undefined) {
+              throw new Error('Hat name or description of existing hat is undefined.');
+            }
+
+            return {
+              id: hat.id,
+              details: await uploadHatDescription(
+                hatsDetailsBuilder({
+                  name: hat.name,
+                  description: hat.description,
+                }),
+              ),
+            };
+          }),
       );
 
       // Parse role with edited payroll hats
@@ -545,37 +580,43 @@ export default function useCreateRoles() {
 
       if (editedPayrollHats.length) {
         const paymentCancelTxs: { calldata: Hex; targetAddress: Address }[] = [];
-        editedPayrollHats.forEach(role =>
-          (role.payments ?? []).forEach(payment => {
-            if (payment.streamId) {
-              const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
-                normalizePaymentFormData(payment),
-                getAddress(role.wearer),
-              );
-              paymentCancelTxs.push({
-                calldata: encodeFunctionData({
-                  abi: HatsAbi,
-                  functionName: 'transferHat',
-                  args: [BigInt(role.id), getAddress(role.wearer), daoAddress],
-                }),
-                targetAddress: hatsProtocol,
-              });
-              paymentCancelTxs.push({
-                calldata: wrappedFlushStreamTx,
-                targetAddress: role.smartAddress,
-              });
-              paymentCancelTxs.push(cancelStreamTx);
-              paymentCancelTxs.push({
-                calldata: encodeFunctionData({
-                  abi: HatsAbi,
-                  functionName: 'transferHat',
-                  args: [BigInt(role.id), daoAddress, getAddress(role.wearer)],
-                }),
-                targetAddress: hatsProtocol,
-              });
+        editedPayrollHats.forEach(role => {
+          return (role.payments ?? []).forEach(payment => {
+            // if (payment.streamId === undefined) {
+            //   return;
+            // }
+
+            if (role.wearer === undefined) {
+              throw new Error('Role wearer of edited payroll hat is undefined');
             }
-          }),
-        );
+
+            const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
+              normalizePaymentFormData(payment),
+              getAddress(role.wearer),
+            );
+            paymentCancelTxs.push({
+              calldata: encodeFunctionData({
+                abi: HatsAbi,
+                functionName: 'transferHat',
+                args: [BigInt(role.id), getAddress(role.wearer), daoAddress],
+              }),
+              targetAddress: hatsProtocol,
+            });
+            paymentCancelTxs.push({
+              calldata: wrappedFlushStreamTx,
+              targetAddress: role.smartAddress,
+            });
+            paymentCancelTxs.push(cancelStreamTx);
+            paymentCancelTxs.push({
+              calldata: encodeFunctionData({
+                abi: HatsAbi,
+                functionName: 'transferHat',
+                args: [BigInt(role.id), daoAddress, getAddress(role.wearer)],
+              }),
+              targetAddress: hatsProtocol,
+            });
+          });
+        });
         const streamsData = editedPayrollHats.flatMap(role =>
           (role.payments ?? []).map(payment => normalizePaymentFormData(payment)),
         );

From ae981d53bc7009a476bdce783cba3359dbf8d9d8 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 14:46:42 -0400
Subject: [PATCH 03/46] Finish dealing with build errors

---
 .../pages/Roles/forms/RoleFormTabs.tsx        |  7 +++-
 src/components/pages/Roles/types.tsx          |  2 +-
 .../ui/modals/PaymentWithdrawModal.tsx        |  4 +--
 src/hooks/utils/useCreateRoles.ts             | 23 +++++++++++--
 src/store/roles/rolesStoreUtils.ts            | 33 +++++++++++++++++--
 5 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx
index b4894c0419..ef07b70513 100644
--- a/src/components/pages/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx
@@ -86,7 +86,12 @@ export default function RoleFormTabs({
             const hatIndex = values.hats.findIndex(h => h.id === hatId);
             if (hatIndex === -1) {
               // @dev new hat
-              pushRole(roleUpdated);
+
+              if (roleUpdated.id === undefined) {
+                throw new Error('New Hat id is undefined. I think this is going to be a problem.');
+              }
+              const roleUpdatedId = roleUpdated.id;
+              pushRole({ ...roleUpdated, id: roleUpdatedId });
             } else {
               setFieldValue(
                 `hats.${hatIndex}`,
diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 2aac1e3eee..454187cf05 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -101,7 +101,7 @@ export interface RoleHatFormValue
 export interface RoleFormValues {
   proposalMetadata: CreateProposalMetadata;
   hats: RoleHatFormValue[];
-  roleEditing?: RoleHatFormValue;
+  roleEditing?: RoleHatFormValue; // is this here to "indicate" which role's payments are "currently" being edited?
   customNonce?: number;
 }
 
diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index 4a1fd400dc..52680c3c24 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -14,7 +14,7 @@ import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { DecentRoleHat } from '../../../store/roles';
 import { formatCoin } from '../../../utils';
-import { RoleHatFormValue, SablierPayment } from '../../pages/Roles/types';
+import { SablierPayment } from '../../pages/Roles/types';
 import Avatar, { AvatarSize } from '../page/Header/Avatar';
 
 export default function PaymentWithdrawModal({
@@ -25,7 +25,7 @@ export default function PaymentWithdrawModal({
   withdrawableAmount,
 }: {
   payment: SablierPayment;
-  roleHat: DecentRoleHat | RoleHatFormValue;
+  roleHat: DecentRoleHat;
   onSuccess: () => Promise<void>;
   onClose: () => void;
   withdrawableAmount: bigint;
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index fd1812498b..57b6f58a3d 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -27,6 +27,7 @@ import { CreateProposalMetadata, ProposalExecuteData } from '../../types';
 import { SENTINEL_MODULE } from '../../utils/address';
 import useSubmitProposal from '../DAO/proposal/useSubmitProposal';
 import useCreateSablierStream from '../streams/useCreateSablierStream';
+import { normalizePaymentFormData } from './../../store/roles/rolesStoreUtils';
 
 const hatsDetailsBuilder = (data: { name: string; description: string }) => {
   return JSON.stringify({
@@ -573,7 +574,12 @@ export default function useCreateRoles() {
           (role.payments ?? []).map(payment => payment),
         );
         const recipients = addedNewPaymentsHats.flatMap(role =>
-          (role.payments ?? []).map(() => role.smartAddress),
+          (role.payments ?? []).map(() => {
+            if (role.smartAddress === undefined) {
+              throw new Error('Hat smart address for new payment on role is undefined.');
+            }
+            return role.smartAddress;
+          }),
         );
         const preparedPaymentTransactions = prepareBatchLinearStreamCreation(
           streamsData,
@@ -595,6 +601,14 @@ export default function useCreateRoles() {
 
         editedPayrollHats.forEach(role =>
           (role.payments ?? []).forEach(payment => {
+            if (role.wearer === undefined) {
+              throw new Error('Hat wearer of edited payroll role is undefined.');
+            }
+
+            if (role.smartAddress === undefined) {
+              throw new Error('Hat smart address of edited payroll role is undefined');
+            }
+
             if (payment.streamId && payment.contractAddress && payment.amount && payment.asset) {
               const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
                 {
@@ -659,7 +673,12 @@ export default function useCreateRoles() {
           (role.payments ?? []).map(payment => payment),
         );
         const recipients = editedPayrollHats.flatMap(role =>
-          (role.payments ?? []).map(() => role.smartAddress),
+          (role.payments ?? []).map(() => {
+            if (role.smartAddress === undefined) {
+              throw new Error('Hat smart address for new payment on role is undefined.');
+            }
+            return role.smartAddress;
+          }),
         );
         const preparedPaymentTransactions = prepareBatchLinearStreamCreation(
           streamsData,
diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index 7a49d09686..9e058b64d7 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -10,7 +10,11 @@ import {
   getAddress,
 } from 'viem';
 import ERC6551RegistryAbi from '../../assets/abi/ERC6551RegistryAbi';
-import { RoleHatFormValue, SablierPayment } from '../../components/pages/Roles/types';
+import {
+  RoleHatFormValue,
+  SablierPayment,
+  SablierPaymentFormValues,
+} from '../../components/pages/Roles/types';
 import { getRandomBytes } from '../../helpers';
 
 export class DecentHatsError extends Error {
@@ -337,6 +341,29 @@ export async function getNewRole({
   };
 }
 
+export const normalizePaymentFormData = (payment: SablierPaymentFormValues): SablierPayment => {
+  if (
+    !payment.streamId ||
+    !payment.contractAddress ||
+    !payment.asset ||
+    !payment.amount ||
+    !payment.startDate ||
+    !payment.endDate
+  ) {
+    throw new Error('SablierPaymentFormValues not complete enough to create SablierPayment');
+  }
+  return {
+    streamId: payment.streamId,
+    contractAddress: payment.contractAddress,
+    asset: payment.asset,
+    amount: payment.amount,
+    startDate: payment.startDate,
+    endDate: payment.endDate,
+    cliffDate: payment.cliffDate,
+    isStreaming: payment.isStreaming,
+  };
+};
+
 export const normalizeRoleFormData = (role: RoleHatFormValue): DecentRoleHat => {
   if (
     !role.id ||
@@ -346,7 +373,7 @@ export const normalizeRoleFormData = (role: RoleHatFormValue): DecentRoleHat =>
     !role.description ||
     !role.smartAddress
   ) {
-    throw new Error('Form not properly filled out');
+    throw new Error('RoleHatFormValue data not complete enough to create DecentRoleHat');
   }
   return {
     id: getAddress(role.id),
@@ -355,6 +382,6 @@ export const normalizeRoleFormData = (role: RoleHatFormValue): DecentRoleHat =>
     name: role.name,
     description: role.description,
     smartAddress: role.smartAddress,
-    payments: role.payments as SablierPayment[] | undefined,
+    payments: role.payments?.map(payment => normalizePaymentFormData(payment)),
   };
 };

From 4b007ffed4812856e316a82f0c7f8fce5346b421 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 14:57:54 -0400
Subject: [PATCH 04/46] Rename function

---
 src/hooks/utils/useCreateRoles.ts                | 4 ++--
 src/pages/daos/[daoAddress]/roles/edit/index.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 57b6f58a3d..93d9c92910 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -742,7 +742,7 @@ export default function useCreateRoles() {
     ],
   );
 
-  const createRolesEditProposal = useCallback(
+  const createEditRolesProposal = useCallback(
     async (values: RoleFormValues, formikHelpers: FormikHelpers<RoleFormValues>) => {
       const { setSubmitting } = formikHelpers;
       setSubmitting(true);
@@ -803,6 +803,6 @@ export default function useCreateRoles() {
   );
 
   return {
-    createRolesEditProposal,
+    createEditRolesProposal,
   };
 }
diff --git a/src/pages/daos/[daoAddress]/roles/edit/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
index 3a2d52f387..d2f2f25631 100644
--- a/src/pages/daos/[daoAddress]/roles/edit/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
@@ -46,7 +46,7 @@ function RolesEdit() {
   const { hatsTree } = useRolesStore();
 
   const navigate = useNavigate();
-  const { createRolesEditProposal } = useCreateRoles();
+  const { createEditRolesProposal } = useCreateRoles();
 
   function generateRoleProposalTitle({ formValues }: { formValues: RoleFormValues }) {
     const filteredHats = formValues.hats.filter(hat => !!hat.editedRole);
@@ -102,7 +102,7 @@ function RolesEdit() {
       enableReinitialize
       validationSchema={rolesSchema}
       validateOnMount
-      onSubmit={createRolesEditProposal}
+      onSubmit={createEditRolesProposal}
     >
       {({ handleSubmit, values, touched, setFieldValue }) => (
         <form onSubmit={handleSubmit}>

From 5b484ee732d28eac618f821d8d88c84422d99e15 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 15:36:45 -0400
Subject: [PATCH 05/46] Remove console.logs

---
 src/components/pages/Roles/forms/RoleFormInfo.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/pages/Roles/forms/RoleFormInfo.tsx b/src/components/pages/Roles/forms/RoleFormInfo.tsx
index a91a4571ac..7020ef4aaf 100644
--- a/src/components/pages/Roles/forms/RoleFormInfo.tsx
+++ b/src/components/pages/Roles/forms/RoleFormInfo.tsx
@@ -1,5 +1,5 @@
 import { Box, FormControl } from '@chakra-ui/react';
-import { Field, FieldProps, useFormikContext } from 'formik';
+import { Field, FieldProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { CARD_SHADOW } from '../../../../constants/common';
 import { AddressInput } from '../../../ui/forms/EthAddressInput';
@@ -9,9 +9,6 @@ import { RoleFormValues } from '../types';
 
 export default function RoleFormInfo() {
   const { t } = useTranslation('roles');
-  const { values, errors } = useFormikContext<RoleFormValues>();
-  console.log("🚀 ~ values:", values.roleEditing)
-  console.log("🚀 ~ errors:", errors)
   return (
     <Box
       px={{ base: '1rem', md: 0 }}

From a30b0f1951e0673b0ee49f4234b12340d0a9f5f6 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 15:46:40 -0400
Subject: [PATCH 06/46] Remove unused type, narrow down type

---
 src/components/pages/Roles/types.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 454187cf05..803e249643 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -1,7 +1,6 @@
 import { Address, Hex } from 'viem';
 import { DecentRoleHat } from '../../../store/roles';
 import { BigIntValuePair, CreateProposalMetadata } from '../../../types';
-export type RoleViewMode = 'edit' | 'view';
 
 export interface SablierAsset {
   address: Address;
@@ -30,6 +29,7 @@ export interface SablierPaymentFormValues extends Partial<SablierPayment> {
 }
 
 export type SablierPaymentOrPartial = SablierPayment | SablierPaymentFormValues;
+
 export interface RoleProps {
   editStatus?: EditBadgeStatus;
   handleRoleClick: (hatId: Address) => void;
@@ -67,7 +67,7 @@ export const BadgeStatusColor: Record<EditBadgeStatus, string> = {
 };
 
 export interface HatStruct {
-  maxSupply: number; // No more than this number of wearers. Hardcode to 1
+  maxSupply: 1; // No more than this number of wearers. Hardcode to 1
   details: string; // IPFS url/hash to JSON { version: '1.0', data: { name, description, ...arbitraryData } }
   imageURI: string;
   isMutable: boolean; // true

From 2c3936f636061a77f96df2f4c116dad87903d061 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 15:51:08 -0400
Subject: [PATCH 07/46] Remove generated build file

---
 ....timestamp-1724166329011-a3ecd76c28483.mjs | 149 ------------------
 1 file changed, 149 deletions(-)
 delete mode 100644 vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs

diff --git a/vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs b/vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs
deleted file mode 100644
index 621a798f8e..0000000000
--- a/vite.config.mts.timestamp-1724166329011-a3ecd76c28483.mjs
+++ /dev/null
@@ -1,149 +0,0 @@
-// vite.config.mts
-import react from "file:///Users/epicbadtiming/Projects/Fractal/fractal-interface/node_modules/@vitejs/plugin-react-swc/index.mjs";
-import { defineConfig } from "file:///Users/epicbadtiming/Projects/Fractal/fractal-interface/node_modules/vite/dist/node/index.js";
-import { checker } from "file:///Users/epicbadtiming/Projects/Fractal/fractal-interface/node_modules/vite-plugin-checker/dist/esm/main.js";
-
-// package.json
-var package_default = {
-  name: "decent-interface",
-  version: "0.2.12",
-  private: true,
-  dependencies: {
-    "@apollo/client": "^3.7.10",
-    "@chakra-ui/anatomy": "^2.2.2",
-    "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/theme-tools": "^2.1.2",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@ethersproject/abstract-signer": "^5.7.0",
-    "@ethersproject/providers": "^5.7.2",
-    "@fontsource/space-mono": "^5.0.19",
-    "@fractal-framework/fractal-contracts": "^0.8.1",
-    "@graphprotocol/client-apollo": "^1.0.16",
-    "@hatsprotocol/sdk-v1-core": "^0.9.0",
-    "@hatsprotocol/sdk-v1-subgraph": "^1.0.0",
-    "@lido-sdk/contracts": "^3.0.2",
-    "@netlify/blobs": "^6.5.0",
-    "@netlify/functions": "^2.6.0",
-    "@phosphor-icons/react": "^2.1.4",
-    "@safe-global/api-kit": "^2.4.2",
-    "@safe-global/safe-core-sdk-types": "^5.0.2",
-    "@safe-global/safe-deployments": "^1.34.0",
-    "@sentry/react": "^8.7.0",
-    "@shutter-network/shutter-crypto": "^1.0.1",
-    "@snapshot-labs/snapshot.js": "^0.7.3",
-    "@tanstack/react-query": "^5.36.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "@web3modal/wagmi": "^4.2.3",
-    axios: "^0.27.2",
-    blo: "^1.2.0",
-    classnames: "^2.3.1",
-    "date-fns": "^2.29.3",
-    "date-fns-tz": "^2.0.1",
-    ethers: "^5.7.2",
-    "evm-proxy-detection": "^1.1.0",
-    formik: "^2.2.9",
-    "framer-motion": "^6.5.1",
-    graphql: "^16.6.0",
-    i18next: "^23.10.1",
-    "i18next-browser-languagedetector": "^6.1.5",
-    "js-big-decimal": "^1.3.12",
-    "lodash.camelcase": "^4.3.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.groupby": "^4.6.0",
-    "lodash.isequal": "^4.5.0",
-    moralis: "^2.27.1",
-    react: "^18.2.0",
-    "react-calendar": "^5.0.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^13.5.0",
-    "react-idle-timer": "^5.5.3",
-    "react-image": "^4.0.3",
-    "react-markdown": "^9.0.0",
-    "react-router-dom": "^6.22.0",
-    "react-toastify": "^9.0.8",
-    "remark-gfm": "^4.0.0",
-    viem: "^2.13.1",
-    vite: "^5.1.0",
-    "vite-plugin-checker": "^0.6.4",
-    wagmi: "^2.9.7",
-    yup: "^1",
-    zustand: "^4.5.2"
-  },
-  scripts: {
-    lint: "eslint . --ext .ts,.tsx --fix",
-    "lint:check": "eslint . --ext .ts,.tsx",
-    pretty: "prettier . --write",
-    "pretty:check": "prettier . --check",
-    dev: "vite --force",
-    "dev:netlify": "netlify dev",
-    start: "vite start",
-    preview: "vite preview",
-    build: "NODE_OPTIONS=--max-old-space-size=8192 vite build",
-    "graphql:build": "graphclient build",
-    "graphql:dev-server": "graphclient serve-dev",
-    test: "vitest --dir=test",
-    postinstall: "npm run graphql:build"
-  },
-  engines: {
-    node: "20.12.0",
-    npm: "10.5.0"
-  },
-  browserslist: {
-    production: [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    development: [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  devDependencies: {
-    "@graphprotocol/client-cli": "^2.2.20",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.2.1",
-    "@types/lodash.camelcase": "^4.3.9",
-    "@types/lodash.debounce": "^4.0.9",
-    "@types/lodash.groupby": "^4.6.9",
-    "@types/lodash.isequal": "^4.5.8",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    encoding: "^0.1.13",
-    eslint: "^8.22.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    jsdom: "^24.0.0",
-    "netlify-cli": "^17.33.3",
-    prettier: "^3.2.5",
-    typescript: "^5.3.3",
-    url: "^0.11.0",
-    vitest: "^1.2.2"
-  }
-};
-
-// vite.config.mts
-var vite_config_default = defineConfig({
-  plugins: [react(), checker({ typescript: true })],
-  server: {
-    port: 3e3
-  },
-  build: {
-    sourcemap: true
-  },
-  define: {
-    "import.meta.env.PACKAGE_VERSION": JSON.stringify(package_default.version)
-  }
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcubXRzIiwgInBhY2thZ2UuanNvbiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9lcGljYmFkdGltaW5nL1Byb2plY3RzL0ZyYWN0YWwvZnJhY3RhbC1pbnRlcmZhY2VcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9lcGljYmFkdGltaW5nL1Byb2plY3RzL0ZyYWN0YWwvZnJhY3RhbC1pbnRlcmZhY2Uvdml0ZS5jb25maWcubXRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9lcGljYmFkdGltaW5nL1Byb2plY3RzL0ZyYWN0YWwvZnJhY3RhbC1pbnRlcmZhY2Uvdml0ZS5jb25maWcubXRzXCI7aW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0LXN3Yyc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB7IGNoZWNrZXIgfSBmcm9tICd2aXRlLXBsdWdpbi1jaGVja2VyJztcbmltcG9ydCBwYWNrYWdlSnNvbiBmcm9tICcuL3BhY2thZ2UuanNvbic7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbcmVhY3QoKSwgY2hlY2tlcih7IHR5cGVzY3JpcHQ6IHRydWUgfSldLFxuICBzZXJ2ZXI6IHtcbiAgICBwb3J0OiAzMDAwLFxuICB9LFxuICBidWlsZDoge1xuICAgIHNvdXJjZW1hcDogdHJ1ZSxcbiAgfSxcbiAgZGVmaW5lOiB7XG4gICAgJ2ltcG9ydC5tZXRhLmVudi5QQUNLQUdFX1ZFUlNJT04nOiBKU09OLnN0cmluZ2lmeShwYWNrYWdlSnNvbi52ZXJzaW9uKSxcbiAgfSxcbn0pO1xuIiwgIntcbiAgXCJuYW1lXCI6IFwiZGVjZW50LWludGVyZmFjZVwiLFxuICBcInZlcnNpb25cIjogXCIwLjIuMTJcIixcbiAgXCJwcml2YXRlXCI6IHRydWUsXG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcIkBhcG9sbG8vY2xpZW50XCI6IFwiXjMuNy4xMFwiLFxuICAgIFwiQGNoYWtyYS11aS9hbmF0b215XCI6IFwiXjIuMi4yXCIsXG4gICAgXCJAY2hha3JhLXVpL3JlYWN0XCI6IFwiXjIuOC4yXCIsXG4gICAgXCJAY2hha3JhLXVpL3RoZW1lLXRvb2xzXCI6IFwiXjIuMS4yXCIsXG4gICAgXCJAZW1vdGlvbi9yZWFjdFwiOiBcIl4xMS4xMC42XCIsXG4gICAgXCJAZW1vdGlvbi9zdHlsZWRcIjogXCJeMTEuMTAuNlwiLFxuICAgIFwiQGV0aGVyc3Byb2plY3QvYWJzdHJhY3Qtc2lnbmVyXCI6IFwiXjUuNy4wXCIsXG4gICAgXCJAZXRoZXJzcHJvamVjdC9wcm92aWRlcnNcIjogXCJeNS43LjJcIixcbiAgICBcIkBmb250c291cmNlL3NwYWNlLW1vbm9cIjogXCJeNS4wLjE5XCIsXG4gICAgXCJAZnJhY3RhbC1mcmFtZXdvcmsvZnJhY3RhbC1jb250cmFjdHNcIjogXCJeMC44LjFcIixcbiAgICBcIkBncmFwaHByb3RvY29sL2NsaWVudC1hcG9sbG9cIjogXCJeMS4wLjE2XCIsXG4gICAgXCJAaGF0c3Byb3RvY29sL3Nkay12MS1jb3JlXCI6IFwiXjAuOS4wXCIsXG4gICAgXCJAaGF0c3Byb3RvY29sL3Nkay12MS1zdWJncmFwaFwiOiBcIl4xLjAuMFwiLFxuICAgIFwiQGxpZG8tc2RrL2NvbnRyYWN0c1wiOiBcIl4zLjAuMlwiLFxuICAgIFwiQG5ldGxpZnkvYmxvYnNcIjogXCJeNi41LjBcIixcbiAgICBcIkBuZXRsaWZ5L2Z1bmN0aW9uc1wiOiBcIl4yLjYuMFwiLFxuICAgIFwiQHBob3NwaG9yLWljb25zL3JlYWN0XCI6IFwiXjIuMS40XCIsXG4gICAgXCJAc2FmZS1nbG9iYWwvYXBpLWtpdFwiOiBcIl4yLjQuMlwiLFxuICAgIFwiQHNhZmUtZ2xvYmFsL3NhZmUtY29yZS1zZGstdHlwZXNcIjogXCJeNS4wLjJcIixcbiAgICBcIkBzYWZlLWdsb2JhbC9zYWZlLWRlcGxveW1lbnRzXCI6IFwiXjEuMzQuMFwiLFxuICAgIFwiQHNlbnRyeS9yZWFjdFwiOiBcIl44LjcuMFwiLFxuICAgIFwiQHNodXR0ZXItbmV0d29yay9zaHV0dGVyLWNyeXB0b1wiOiBcIl4xLjAuMVwiLFxuICAgIFwiQHNuYXBzaG90LWxhYnMvc25hcHNob3QuanNcIjogXCJeMC43LjNcIixcbiAgICBcIkB0YW5zdGFjay9yZWFjdC1xdWVyeVwiOiBcIl41LjM2LjJcIixcbiAgICBcIkB2aXRlanMvcGx1Z2luLXJlYWN0LXN3Y1wiOiBcIl4zLjUuMFwiLFxuICAgIFwiQHdlYjNtb2RhbC93YWdtaVwiOiBcIl40LjIuM1wiLFxuICAgIFwiYXhpb3NcIjogXCJeMC4yNy4yXCIsXG4gICAgXCJibG9cIjogXCJeMS4yLjBcIixcbiAgICBcImNsYXNzbmFtZXNcIjogXCJeMi4zLjFcIixcbiAgICBcImRhdGUtZm5zXCI6IFwiXjIuMjkuM1wiLFxuICAgIFwiZGF0ZS1mbnMtdHpcIjogXCJeMi4wLjFcIixcbiAgICBcImV0aGVyc1wiOiBcIl41LjcuMlwiLFxuICAgIFwiZXZtLXByb3h5LWRldGVjdGlvblwiOiBcIl4xLjEuMFwiLFxuICAgIFwiZm9ybWlrXCI6IFwiXjIuMi45XCIsXG4gICAgXCJmcmFtZXItbW90aW9uXCI6IFwiXjYuNS4xXCIsXG4gICAgXCJncmFwaHFsXCI6IFwiXjE2LjYuMFwiLFxuICAgIFwiaTE4bmV4dFwiOiBcIl4yMy4xMC4xXCIsXG4gICAgXCJpMThuZXh0LWJyb3dzZXItbGFuZ3VhZ2VkZXRlY3RvclwiOiBcIl42LjEuNVwiLFxuICAgIFwianMtYmlnLWRlY2ltYWxcIjogXCJeMS4zLjEyXCIsXG4gICAgXCJsb2Rhc2guY2FtZWxjYXNlXCI6IFwiXjQuMy4wXCIsXG4gICAgXCJsb2Rhc2guZGVib3VuY2VcIjogXCJeNC4wLjhcIixcbiAgICBcImxvZGFzaC5ncm91cGJ5XCI6IFwiXjQuNi4wXCIsXG4gICAgXCJsb2Rhc2guaXNlcXVhbFwiOiBcIl40LjUuMFwiLFxuICAgIFwibW9yYWxpc1wiOiBcIl4yLjI3LjFcIixcbiAgICBcInJlYWN0XCI6IFwiXjE4LjIuMFwiLFxuICAgIFwicmVhY3QtY2FsZW5kYXJcIjogXCJeNS4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4yLjBcIixcbiAgICBcInJlYWN0LWkxOG5leHRcIjogXCJeMTMuNS4wXCIsXG4gICAgXCJyZWFjdC1pZGxlLXRpbWVyXCI6IFwiXjUuNS4zXCIsXG4gICAgXCJyZWFjdC1pbWFnZVwiOiBcIl40LjAuM1wiLFxuICAgIFwicmVhY3QtbWFya2Rvd25cIjogXCJeOS4wLjBcIixcbiAgICBcInJlYWN0LXJvdXRlci1kb21cIjogXCJeNi4yMi4wXCIsXG4gICAgXCJyZWFjdC10b2FzdGlmeVwiOiBcIl45LjAuOFwiLFxuICAgIFwicmVtYXJrLWdmbVwiOiBcIl40LjAuMFwiLFxuICAgIFwidmllbVwiOiBcIl4yLjEzLjFcIixcbiAgICBcInZpdGVcIjogXCJeNS4xLjBcIixcbiAgICBcInZpdGUtcGx1Z2luLWNoZWNrZXJcIjogXCJeMC42LjRcIixcbiAgICBcIndhZ21pXCI6IFwiXjIuOS43XCIsXG4gICAgXCJ5dXBcIjogXCJeMVwiLFxuICAgIFwienVzdGFuZFwiOiBcIl40LjUuMlwiXG4gIH0sXG4gIFwic2NyaXB0c1wiOiB7XG4gICAgXCJsaW50XCI6IFwiZXNsaW50IC4gLS1leHQgLnRzLC50c3ggLS1maXhcIixcbiAgICBcImxpbnQ6Y2hlY2tcIjogXCJlc2xpbnQgLiAtLWV4dCAudHMsLnRzeFwiLFxuICAgIFwicHJldHR5XCI6IFwicHJldHRpZXIgLiAtLXdyaXRlXCIsXG4gICAgXCJwcmV0dHk6Y2hlY2tcIjogXCJwcmV0dGllciAuIC0tY2hlY2tcIixcbiAgICBcImRldlwiOiBcInZpdGUgLS1mb3JjZVwiLFxuICAgIFwiZGV2Om5ldGxpZnlcIjogXCJuZXRsaWZ5IGRldlwiLFxuICAgIFwic3RhcnRcIjogXCJ2aXRlIHN0YXJ0XCIsXG4gICAgXCJwcmV2aWV3XCI6IFwidml0ZSBwcmV2aWV3XCIsXG4gICAgXCJidWlsZFwiOiBcIk5PREVfT1BUSU9OUz0tLW1heC1vbGQtc3BhY2Utc2l6ZT04MTkyIHZpdGUgYnVpbGRcIixcbiAgICBcImdyYXBocWw6YnVpbGRcIjogXCJncmFwaGNsaWVudCBidWlsZFwiLFxuICAgIFwiZ3JhcGhxbDpkZXYtc2VydmVyXCI6IFwiZ3JhcGhjbGllbnQgc2VydmUtZGV2XCIsXG4gICAgXCJ0ZXN0XCI6IFwidml0ZXN0IC0tZGlyPXRlc3RcIixcbiAgICBcInBvc3RpbnN0YWxsXCI6IFwibnBtIHJ1biBncmFwaHFsOmJ1aWxkXCJcbiAgfSxcbiAgXCJlbmdpbmVzXCI6IHtcbiAgICBcIm5vZGVcIjogXCIyMC4xMi4wXCIsXG4gICAgXCJucG1cIjogXCIxMC41LjBcIlxuICB9LFxuICBcImJyb3dzZXJzbGlzdFwiOiB7XG4gICAgXCJwcm9kdWN0aW9uXCI6IFtcbiAgICAgIFwiPjAuMiVcIixcbiAgICAgIFwibm90IGRlYWRcIixcbiAgICAgIFwibm90IG9wX21pbmkgYWxsXCJcbiAgICBdLFxuICAgIFwiZGV2ZWxvcG1lbnRcIjogW1xuICAgICAgXCJsYXN0IDEgY2hyb21lIHZlcnNpb25cIixcbiAgICAgIFwibGFzdCAxIGZpcmVmb3ggdmVyc2lvblwiLFxuICAgICAgXCJsYXN0IDEgc2FmYXJpIHZlcnNpb25cIlxuICAgIF1cbiAgfSxcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge1xuICAgIFwiQGdyYXBocHJvdG9jb2wvY2xpZW50LWNsaVwiOiBcIl4yLjIuMjBcIixcbiAgICBcIkB0ZXN0aW5nLWxpYnJhcnkvamVzdC1kb21cIjogXCJeNS4xNi41XCIsXG4gICAgXCJAdGVzdGluZy1saWJyYXJ5L3JlYWN0XCI6IFwiXjE0LjIuMVwiLFxuICAgIFwiQHR5cGVzL2xvZGFzaC5jYW1lbGNhc2VcIjogXCJeNC4zLjlcIixcbiAgICBcIkB0eXBlcy9sb2Rhc2guZGVib3VuY2VcIjogXCJeNC4wLjlcIixcbiAgICBcIkB0eXBlcy9sb2Rhc2guZ3JvdXBieVwiOiBcIl40LjYuOVwiLFxuICAgIFwiQHR5cGVzL2xvZGFzaC5pc2VxdWFsXCI6IFwiXjQuNS44XCIsXG4gICAgXCJAdHlwZXMvcmVhY3RcIjogXCJeMTguMC4xN1wiLFxuICAgIFwiQHR5cGVzL3JlYWN0LWRvbVwiOiBcIl4xOC4wLjZcIixcbiAgICBcIkB0eXBlc2NyaXB0LWVzbGludC9lc2xpbnQtcGx1Z2luXCI6IFwiXjYuMTkuMFwiLFxuICAgIFwiQHR5cGVzY3JpcHQtZXNsaW50L3BhcnNlclwiOiBcIl42LjE5LjBcIixcbiAgICBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI6IFwiXjQuMi4xXCIsXG4gICAgXCJlbmNvZGluZ1wiOiBcIl4wLjEuMTNcIixcbiAgICBcImVzbGludFwiOiBcIl44LjIyLjBcIixcbiAgICBcImVzbGludC1jb25maWctYWlyYm5iLXR5cGVzY3JpcHRcIjogXCJeMTcuMS4wXCIsXG4gICAgXCJlc2xpbnQtY29uZmlnLXByZXR0aWVyXCI6IFwiXjkuMS4wXCIsXG4gICAgXCJlc2xpbnQtcGx1Z2luLWltcG9ydFwiOiBcIl4yLjI2LjBcIixcbiAgICBcImVzbGludC1wbHVnaW4tcmVhY3RcIjogXCJeNy4zMy4yXCIsXG4gICAgXCJlc2xpbnQtcGx1Z2luLXJlYWN0LWhvb2tzXCI6IFwiXjQuNi4wXCIsXG4gICAgXCJqc2RvbVwiOiBcIl4yNC4wLjBcIixcbiAgICBcIm5ldGxpZnktY2xpXCI6IFwiXjE3LjMzLjNcIixcbiAgICBcInByZXR0aWVyXCI6IFwiXjMuMi41XCIsXG4gICAgXCJ0eXBlc2NyaXB0XCI6IFwiXjUuMy4zXCIsXG4gICAgXCJ1cmxcIjogXCJeMC4xMS4wXCIsXG4gICAgXCJ2aXRlc3RcIjogXCJeMS4yLjJcIlxuICB9XG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXlWLE9BQU8sV0FBVztBQUMzVyxTQUFTLG9CQUFvQjtBQUM3QixTQUFTLGVBQWU7OztBQ0Z4QjtBQUFBLEVBQ0UsTUFBUTtBQUFBLEVBQ1IsU0FBVztBQUFBLEVBQ1gsU0FBVztBQUFBLEVBQ1gsY0FBZ0I7QUFBQSxJQUNkLGtCQUFrQjtBQUFBLElBQ2xCLHNCQUFzQjtBQUFBLElBQ3RCLG9CQUFvQjtBQUFBLElBQ3BCLDBCQUEwQjtBQUFBLElBQzFCLGtCQUFrQjtBQUFBLElBQ2xCLG1CQUFtQjtBQUFBLElBQ25CLGtDQUFrQztBQUFBLElBQ2xDLDRCQUE0QjtBQUFBLElBQzVCLDBCQUEwQjtBQUFBLElBQzFCLHdDQUF3QztBQUFBLElBQ3hDLGdDQUFnQztBQUFBLElBQ2hDLDZCQUE2QjtBQUFBLElBQzdCLGlDQUFpQztBQUFBLElBQ2pDLHVCQUF1QjtBQUFBLElBQ3ZCLGtCQUFrQjtBQUFBLElBQ2xCLHNCQUFzQjtBQUFBLElBQ3RCLHlCQUF5QjtBQUFBLElBQ3pCLHdCQUF3QjtBQUFBLElBQ3hCLG9DQUFvQztBQUFBLElBQ3BDLGlDQUFpQztBQUFBLElBQ2pDLGlCQUFpQjtBQUFBLElBQ2pCLG1DQUFtQztBQUFBLElBQ25DLDhCQUE4QjtBQUFBLElBQzlCLHlCQUF5QjtBQUFBLElBQ3pCLDRCQUE0QjtBQUFBLElBQzVCLG9CQUFvQjtBQUFBLElBQ3BCLE9BQVM7QUFBQSxJQUNULEtBQU87QUFBQSxJQUNQLFlBQWM7QUFBQSxJQUNkLFlBQVk7QUFBQSxJQUNaLGVBQWU7QUFBQSxJQUNmLFFBQVU7QUFBQSxJQUNWLHVCQUF1QjtBQUFBLElBQ3ZCLFFBQVU7QUFBQSxJQUNWLGlCQUFpQjtBQUFBLElBQ2pCLFNBQVc7QUFBQSxJQUNYLFNBQVc7QUFBQSxJQUNYLG9DQUFvQztBQUFBLElBQ3BDLGtCQUFrQjtBQUFBLElBQ2xCLG9CQUFvQjtBQUFBLElBQ3BCLG1CQUFtQjtBQUFBLElBQ25CLGtCQUFrQjtBQUFBLElBQ2xCLGtCQUFrQjtBQUFBLElBQ2xCLFNBQVc7QUFBQSxJQUNYLE9BQVM7QUFBQSxJQUNULGtCQUFrQjtBQUFBLElBQ2xCLGFBQWE7QUFBQSxJQUNiLGlCQUFpQjtBQUFBLElBQ2pCLG9CQUFvQjtBQUFBLElBQ3BCLGVBQWU7QUFBQSxJQUNmLGtCQUFrQjtBQUFBLElBQ2xCLG9CQUFvQjtBQUFBLElBQ3BCLGtCQUFrQjtBQUFBLElBQ2xCLGNBQWM7QUFBQSxJQUNkLE1BQVE7QUFBQSxJQUNSLE1BQVE7QUFBQSxJQUNSLHVCQUF1QjtBQUFBLElBQ3ZCLE9BQVM7QUFBQSxJQUNULEtBQU87QUFBQSxJQUNQLFNBQVc7QUFBQSxFQUNiO0FBQUEsRUFDQSxTQUFXO0FBQUEsSUFDVCxNQUFRO0FBQUEsSUFDUixjQUFjO0FBQUEsSUFDZCxRQUFVO0FBQUEsSUFDVixnQkFBZ0I7QUFBQSxJQUNoQixLQUFPO0FBQUEsSUFDUCxlQUFlO0FBQUEsSUFDZixPQUFTO0FBQUEsSUFDVCxTQUFXO0FBQUEsSUFDWCxPQUFTO0FBQUEsSUFDVCxpQkFBaUI7QUFBQSxJQUNqQixzQkFBc0I7QUFBQSxJQUN0QixNQUFRO0FBQUEsSUFDUixhQUFlO0FBQUEsRUFDakI7QUFBQSxFQUNBLFNBQVc7QUFBQSxJQUNULE1BQVE7QUFBQSxJQUNSLEtBQU87QUFBQSxFQUNUO0FBQUEsRUFDQSxjQUFnQjtBQUFBLElBQ2QsWUFBYztBQUFBLE1BQ1o7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLElBQ0Y7QUFBQSxJQUNBLGFBQWU7QUFBQSxNQUNiO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUFBLEVBQ0EsaUJBQW1CO0FBQUEsSUFDakIsNkJBQTZCO0FBQUEsSUFDN0IsNkJBQTZCO0FBQUEsSUFDN0IsMEJBQTBCO0FBQUEsSUFDMUIsMkJBQTJCO0FBQUEsSUFDM0IsMEJBQTBCO0FBQUEsSUFDMUIseUJBQXlCO0FBQUEsSUFDekIseUJBQXlCO0FBQUEsSUFDekIsZ0JBQWdCO0FBQUEsSUFDaEIsb0JBQW9CO0FBQUEsSUFDcEIsb0NBQW9DO0FBQUEsSUFDcEMsNkJBQTZCO0FBQUEsSUFDN0Isd0JBQXdCO0FBQUEsSUFDeEIsVUFBWTtBQUFBLElBQ1osUUFBVTtBQUFBLElBQ1YsbUNBQW1DO0FBQUEsSUFDbkMsMEJBQTBCO0FBQUEsSUFDMUIsd0JBQXdCO0FBQUEsSUFDeEIsdUJBQXVCO0FBQUEsSUFDdkIsNkJBQTZCO0FBQUEsSUFDN0IsT0FBUztBQUFBLElBQ1QsZUFBZTtBQUFBLElBQ2YsVUFBWTtBQUFBLElBQ1osWUFBYztBQUFBLElBQ2QsS0FBTztBQUFBLElBQ1AsUUFBVTtBQUFBLEVBQ1o7QUFDRjs7O0FEdEhBLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLEdBQUcsUUFBUSxFQUFFLFlBQVksS0FBSyxDQUFDLENBQUM7QUFBQSxFQUNoRCxRQUFRO0FBQUEsSUFDTixNQUFNO0FBQUEsRUFDUjtBQUFBLEVBQ0EsT0FBTztBQUFBLElBQ0wsV0FBVztBQUFBLEVBQ2I7QUFBQSxFQUNBLFFBQVE7QUFBQSxJQUNOLG1DQUFtQyxLQUFLLFVBQVUsZ0JBQVksT0FBTztBQUFBLEVBQ3ZFO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

From d45becd75a9ce9c99c98a1136b4b4d4d9ed86ced Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Tue, 20 Aug 2024 16:47:00 -0400
Subject: [PATCH 08/46] Update typescript to 5.5.4

---
 package-lock.json                 | 8 ++++----
 package.json                      | 2 +-
 src/hooks/utils/useCreateRoles.ts | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e88809d05..5ceec4504c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,7 +95,7 @@
         "jsdom": "^24.0.0",
         "netlify-cli": "^17.33.3",
         "prettier": "^3.2.5",
-        "typescript": "^5.3.3",
+        "typescript": "^5.5.4",
         "url": "^0.11.0",
         "vitest": "^1.2.2"
       },
@@ -43570,9 +43570,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/package.json b/package.json
index 83ada89aaa..c4c719ec38 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "jsdom": "^24.0.0",
     "netlify-cli": "^17.33.3",
     "prettier": "^3.2.5",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
     "url": "^0.11.0",
     "vitest": "^1.2.2"
   }
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 93d9c92910..d8b3dd0d9a 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -251,7 +251,7 @@ export default function useCreateRoles() {
           const payments = hat.payments?.filter(payment => !payment.streamId);
           return payments?.length ? { ...hat, payments } : null;
         })
-        .filter(hat => !!hat) as RoleHatFormValue[];
+        .filter(hat => hat !== null);
 
       return {
         addedHats,

From a5764399e555d04b5adb918d7bef1d8c2cb83cc8 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:51:12 -0400
Subject: [PATCH 09/46] refactor RoleDetails prop typing and Withdraw modal

---
 .../pages/Roles/RolePaymentDetails.tsx        | 20 ++++++----
 .../pages/Roles/RolesDetailsDrawer.tsx        |  3 +-
 .../pages/Roles/RolesDetailsDrawerMobile.tsx  |  3 +-
 .../Roles/forms/RoleFormPaymentStreams.tsx    |  3 ++
 .../Roles/forms/useRoleFormEditedRole.tsx     |  8 +---
 src/components/pages/Roles/types.tsx          |  3 +-
 src/components/ui/modals/ModalProvider.tsx    |  3 +-
 .../ui/modals/PaymentWithdrawModal.tsx        | 39 ++++++++++++-------
 .../daos/[daoAddress]/roles/edit/index.tsx    | 24 ++----------
 9 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
index ad6fa265dd..8322f4a611 100644
--- a/src/components/pages/Roles/RolePaymentDetails.tsx
+++ b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -4,7 +4,7 @@ import { format } from 'date-fns';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { getAddress, getContract } from 'viem';
+import { Address, getAddress, getContract } from 'viem';
 import { useWalletClient } from 'wagmi';
 import { SablierV2LockupLinearAbi } from '../../../assets/abi/SablierV2LockupLinear';
 import { DETAILS_SHADOW } from '../../../constants/common';
@@ -12,11 +12,10 @@ import { DAO_ROUTES } from '../../../constants/routes';
 import { convertStreamIdToBigInt } from '../../../hooks/streams/useCreateSablierStream';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat } from '../../../store/roles';
 import { DEFAULT_DATE_FORMAT, formatCoin, formatUSD } from '../../../utils';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
-import { RoleHatFormValue, SablierPaymentOrPartial } from './types';
+import { SablierPayment, SablierPaymentFormValues } from './types';
 
 function PaymentDate({ label, date }: { label: string; date?: Date }) {
   const { t } = useTranslation(['roles']);
@@ -63,8 +62,9 @@ function GreenStreamingDot({ isStreaming }: { isStreaming: boolean }) {
 }
 
 interface RolePaymentDetailsProps {
-  roleHat?: DecentRoleHat | RoleHatFormValue;
-  payment: SablierPaymentOrPartial;
+  roleHatWearerAddress: Address;
+  roleHatSmartAddress: Address;
+  payment: SablierPayment | SablierPaymentFormValues;
   onClick?: () => void;
   showWithdraw?: boolean;
 }
@@ -72,7 +72,8 @@ export function RolePaymentDetails({
   payment,
   onClick,
   showWithdraw,
-  roleHat,
+  roleHatWearerAddress,
+  roleHatSmartAddress,
 }: RolePaymentDetailsProps) {
   const { t } = useTranslation(['roles']);
   const {
@@ -108,9 +109,12 @@ export function RolePaymentDetails({
 
   const withdraw = useDecentModal(ModalType.WITHDRAW_PAYMENT, {
     payment,
-    roleHat,
     onSuccess: loadAmounts,
-    withdrawableAmount,
+    withdrawInformation: {
+      withdrawableAmount,
+      roleHatWearerAddress,
+      roleHatSmartAddress,
+    },
   });
 
   const handleClickWithdraw = useCallback(() => {
diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/src/components/pages/Roles/RolesDetailsDrawer.tsx
index ca3ebabfed..50df1644e2 100644
--- a/src/components/pages/Roles/RolesDetailsDrawer.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawer.tsx
@@ -173,7 +173,8 @@ export default function RolesDetailsDrawer({
                 <RolePaymentDetails
                   key={index}
                   payment={payment}
-                  roleHat={roleHat}
+                  roleHatSmartAddress={roleHat.smartAddress}
+                  roleHatWearerAddress={roleHat.wearer}
                   showWithdraw
                 />
               ))}
diff --git a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
index e73973cfb2..375fd50b79 100644
--- a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
@@ -105,7 +105,8 @@ export default function RolesDetailsDrawerMobile({
               <RolePaymentDetails
                 key={index}
                 payment={payment}
-                roleHat={roleHat}
+                roleHatSmartAddress={roleHat.smartAddress}
+                roleHatWearerAddress={roleHat.wearer}
                 showWithdraw
               />
             ))}
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
index ca18010d51..3acc47ff83 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -32,6 +32,9 @@ export function RoleFormPaymentStreams() {
             {payments?.map((payment, index) => (
               <Flex key={index}>
                 <RolePaymentDetails
+                  // @dev used for withdraw payments, not needed here
+                  roleHatWearerAddress={'0x'}
+                  roleHatSmartAddress={'0x'}
                   payment={payment}
                   onClick={() => {
                     setFieldValue('roleEditing.roleEditingPaymentIndex', index);
diff --git a/src/components/pages/Roles/forms/useRoleFormEditedRole.tsx b/src/components/pages/Roles/forms/useRoleFormEditedRole.tsx
index 30dc839d56..c6ef34b0b3 100644
--- a/src/components/pages/Roles/forms/useRoleFormEditedRole.tsx
+++ b/src/components/pages/Roles/forms/useRoleFormEditedRole.tsx
@@ -1,8 +1,7 @@
 import { useFormikContext } from 'formik';
 import { useMemo } from 'react';
-import { zeroAddress } from 'viem';
 import { DecentTree } from '../../../../store/roles';
-import { RoleHatFormValue, EditedRole, EditBadgeStatus, RoleFormValues } from '../types';
+import { EditedRole, EditBadgeStatus, RoleFormValues } from '../types';
 
 const addRemoveField = (fieldNames: string[], fieldName: string, isRemoved: boolean) => {
   if (fieldNames.includes(fieldName) && isRemoved) {
@@ -15,10 +14,7 @@ export function useRoleFormEditedRole({ hatsTree }: { hatsTree: DecentTree | und
   const { values } = useFormikContext<RoleFormValues>();
   const existingRoleHat = useMemo(
     () =>
-      hatsTree?.roleHats.find(
-        (role: RoleHatFormValue) =>
-          !!values.roleEditing && role.id === values.roleEditing.id && role.id !== zeroAddress,
-      ),
+      hatsTree?.roleHats.find(role => !!values.roleEditing && role.id === values.roleEditing.id),
     [values.roleEditing, hatsTree],
   );
   const isRoleNameUpdated = !!existingRoleHat && values.roleEditing?.name !== existingRoleHat.name;
diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 803e249643..a9fc05a598 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -28,8 +28,6 @@ export interface SablierPaymentFormValues extends Partial<SablierPayment> {
   isStreaming: () => boolean;
 }
 
-export type SablierPaymentOrPartial = SablierPayment | SablierPaymentFormValues;
-
 export interface RoleProps {
   editStatus?: EditBadgeStatus;
   handleRoleClick: (hatId: Address) => void;
@@ -94,6 +92,7 @@ export interface RoleHatFormValue
   id: Hex;
   wearer?: string;
   payments?: SablierPaymentFormValues[];
+  // form specific state
   editedRole?: EditedRole;
   roleEditingPaymentIndex?: number;
 }
diff --git a/src/components/ui/modals/ModalProvider.tsx b/src/components/ui/modals/ModalProvider.tsx
index 089dd0dfdb..b6f13d43c3 100644
--- a/src/components/ui/modals/ModalProvider.tsx
+++ b/src/components/ui/modals/ModalProvider.tsx
@@ -185,8 +185,7 @@ export function ModalProvider({ children }: { children: ReactNode }) {
         modalContent = (
           <PaymentWithdrawModal
             payment={current.props.payment}
-            roleHat={current.props.roleHat}
-            withdrawableAmount={current.props.withdrawableAmount}
+            withdrawInformation={current.props.withdrawInformation}
             onSuccess={current.props.onSuccess}
             onClose={closeModal}
           />
diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index 52680c3c24..343fa29d57 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -3,7 +3,7 @@ import { Download } from '@phosphor-icons/react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Id, toast } from 'react-toastify';
-import { encodeFunctionData, getAddress, getContract } from 'viem';
+import { Address, encodeFunctionData, getAddress, getContract } from 'viem';
 import { usePublicClient, useWalletClient } from 'wagmi';
 import HatsAccount1ofNAbi from '../../../assets/abi/HatsAccount1ofN';
 import { SablierV2LockupLinearAbi } from '../../../assets/abi/SablierV2LockupLinear';
@@ -12,28 +12,31 @@ import { convertStreamIdToBigInt } from '../../../hooks/streams/useCreateSablier
 import useAvatar from '../../../hooks/utils/useAvatar';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat } from '../../../store/roles';
 import { formatCoin } from '../../../utils';
 import { SablierPayment } from '../../pages/Roles/types';
 import Avatar, { AvatarSize } from '../page/Header/Avatar';
 
 export default function PaymentWithdrawModal({
   payment,
-  roleHat,
+  withdrawInformation,
   onSuccess,
   onClose,
-  withdrawableAmount,
 }: {
   payment: SablierPayment;
-  roleHat: DecentRoleHat;
+  withdrawInformation: {
+    roleHatSmartAddress: Address;
+    roleHatwearerAddress: Address;
+    withdrawableAmount: bigint;
+  };
   onSuccess: () => Promise<void>;
   onClose: () => void;
-  withdrawableAmount: bigint;
 }) {
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
   const { t } = useTranslation(['roles', 'menu', 'common', 'modals']);
-  const { displayName: accountDisplayName } = useDisplayName(roleHat.wearer);
+  const { displayName: accountDisplayName } = useDisplayName(
+    withdrawInformation.roleHatwearerAddress,
+  );
   const avatarURL = useAvatar(accountDisplayName);
   const iconSize = useBreakpointValue<AvatarSize>({ base: 'sm', md: 'icon' }) || 'sm';
   const { chain } = useNetworkConfig();
@@ -44,21 +47,21 @@ export default function PaymentWithdrawModal({
       payment?.streamId &&
       walletClient &&
       publicClient &&
-      roleHat.smartAddress &&
-      roleHat.wearer
+      withdrawInformation.roleHatSmartAddress &&
+      withdrawInformation.roleHatwearerAddress
     ) {
       let withdrawToast: Id | undefined = undefined;
       try {
         const hatsAccountContract = getContract({
           abi: HatsAccount1ofNAbi,
-          address: roleHat.smartAddress,
+          address: withdrawInformation.roleHatSmartAddress,
           client: walletClient,
         });
         const bigIntStreamId = convertStreamIdToBigInt(payment.streamId);
         let hatsAccountCalldata = encodeFunctionData({
           abi: SablierV2LockupLinearAbi,
           functionName: 'withdrawMax',
-          args: [bigIntStreamId, getAddress(roleHat.wearer)],
+          args: [bigIntStreamId, getAddress(withdrawInformation.roleHatwearerAddress)],
         });
         withdrawToast = toast(t('withdrawPendingMessage'), {
           autoClose: false,
@@ -95,10 +98,10 @@ export default function PaymentWithdrawModal({
     payment?.streamId,
     publicClient,
     walletClient,
-    roleHat.smartAddress,
-    roleHat.wearer,
     onSuccess,
     onClose,
+    withdrawInformation.roleHatSmartAddress,
+    withdrawInformation.roleHatwearerAddress,
     t,
   ]);
 
@@ -162,7 +165,13 @@ export default function PaymentWithdrawModal({
               textStyle="display-4xl"
               w="full"
             >
-              {formatCoin(withdrawableAmount, true, payment.asset.decimals, undefined, false)}
+              {formatCoin(
+                withdrawInformation.withdrawableAmount,
+                true,
+                payment.asset.decimals,
+                undefined,
+                false,
+              )}
             </Text>
           </Flex>
         </Flex>
@@ -188,7 +197,7 @@ export default function PaymentWithdrawModal({
             >
               <Box>
                 <Avatar
-                  address={roleHat.wearer}
+                  address={withdrawInformation.roleHatwearerAddress}
                   url={avatarURL}
                   size={iconSize}
                 />
diff --git a/src/pages/daos/[daoAddress]/roles/edit/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
index d2f2f25631..17e0c0d863 100644
--- a/src/pages/daos/[daoAddress]/roles/edit/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
@@ -4,7 +4,7 @@ import { Formik } from 'formik';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Hex, getAddress } from 'viem';
+import { Hex } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { RoleCardEdit } from '../../../../../components/pages/Roles/RoleCard';
 import {
@@ -30,16 +30,7 @@ function RolesEdit() {
   const {
     node: { daoAddress, safe },
   } = useFractal();
-  const {
-    addressPrefix,
-    chain,
-    contracts: {
-      hatsProtocol,
-      erc6551Registry,
-      decentHatsMasterCopy,
-      hatsAccount1ofNMasterCopy: hatsAccountImplementation,
-    },
-  } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfig();
 
   const publicClient = usePublicClient();
   const { rolesSchema } = useRolesSchema();
@@ -160,16 +151,7 @@ function RolesEdit() {
               buttonClick={async () => {
                 if (!publicClient) return;
 
-                const newRole = await getNewRole({
-                  adminHatId: hatsTree?.adminHat.id,
-                  hatsCount: values.hats.length,
-                  implementation: hatsAccountImplementation,
-                  chainId: BigInt(chain.id),
-                  publicClient,
-                  registryAddress: erc6551Registry,
-                  decentHats: getAddress(decentHatsMasterCopy),
-                  tokenContract: hatsProtocol,
-                });
+                const newRole = await getNewRole();
                 setFieldValue('roleEditing', newRole);
                 showRoleEditDetails(newRole.id);
               }}

From 2461a6cb2bdf429b9c30a6d04823bed1b257159b Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 10:33:54 -0400
Subject: [PATCH 10/46] Remove use of dangerous `is` casting

---
 src/hooks/DAO/loaders/useDecentTreasury.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/DAO/loaders/useDecentTreasury.ts b/src/hooks/DAO/loaders/useDecentTreasury.ts
index a6db425ae3..bfb4787c57 100644
--- a/src/hooks/DAO/loaders/useDecentTreasury.ts
+++ b/src/hooks/DAO/loaders/useDecentTreasury.ts
@@ -1,4 +1,4 @@
-import { TokenInfoResponse, TransferResponse } from '@safe-global/api-kit';
+import { TokenInfoResponse } from '@safe-global/api-kit';
 import { useEffect, useCallback, useRef } from 'react';
 import { toast } from 'react-toastify';
 import { getAddress } from 'viem';
@@ -106,15 +106,15 @@ export const useDecentTreasury = () => {
 
     action.dispatch({ type: TreasuryAction.UPDATE_TREASURY, payload: treasuryData });
 
-    type TransferResponse2 = TransferResponse & { tokenAddress: string };
-
     const tokenAddresses = transfers.results
-      // no null or undefined tokenAddresses
-      .filter((transfer): transfer is TransferResponse2 => !!transfer.tokenAddress)
+      // map down to just the addresses, with a type of `string | undefined`
+      .map(transfer => transfer.tokenAddress)
+      // no undefined addresses
+      .filter(address => address !== undefined)
       // make unique
       .filter((value, index, self) => self.indexOf(value) === index)
       // turn them into Address type
-      .map(transfer => getAddress(transfer.tokenAddress));
+      .map(address => getAddress(address));
 
     // Instead of this block of code, check the commented out snippet
     // below this for a half-implemented alternative.

From 2f62891cb4c6a0f3dd1404adfc462440eb3ddab7 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 11:11:28 -0400
Subject: [PATCH 11/46] Rename some functions

---
 .../pages/Roles/forms/RoleFormCreateProposal.tsx          | 4 ++--
 src/hooks/utils/useCreateRoles.ts                         | 4 ++--
 src/store/roles/rolesStoreUtils.ts                        | 8 +++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
index ba216283e6..dfde48a495 100644
--- a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
+++ b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
@@ -8,7 +8,7 @@ import { CARD_SHADOW } from '../../../../constants/common';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat, normalizeRoleFormData } from '../../../../store/roles';
+import { DecentRoleHat, mapRoleHatFormValueToDecentRoleHat } from '../../../../store/roles';
 import { CustomNonceInput } from '../../../ui/forms/CustomNonceInput';
 import { InputComponent, TextareaComponent } from '../../../ui/forms/InputComponent';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
@@ -124,7 +124,7 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
         borderRadius="0.5rem"
       >
         {editedRoles.map((role, index) => {
-          const normalizedRole = normalizeRoleFormData(role);
+          const normalizedRole = mapRoleHatFormValueToDecentRoleHat(role);
           return (
             <RoleCardShort
               key={index}
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index d8b3dd0d9a..b99c0a49e3 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -27,7 +27,7 @@ import { CreateProposalMetadata, ProposalExecuteData } from '../../types';
 import { SENTINEL_MODULE } from '../../utils/address';
 import useSubmitProposal from '../DAO/proposal/useSubmitProposal';
 import useCreateSablierStream from '../streams/useCreateSablierStream';
-import { normalizePaymentFormData } from './../../store/roles/rolesStoreUtils';
+import { mapSablierPaymentFormValuesToSablierPayment } from './../../store/roles/rolesStoreUtils';
 
 const hatsDetailsBuilder = (data: { name: string; description: string }) => {
   return JSON.stringify({
@@ -643,7 +643,7 @@ export default function useCreateRoles() {
             }
 
             const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
-              normalizePaymentFormData(payment),
+              mapSablierPaymentFormValuesToSablierPayment(payment),
               getAddress(role.wearer),
             );
             paymentCancelTxs.push({
diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index 9e058b64d7..6d2823396b 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -341,7 +341,9 @@ export async function getNewRole({
   };
 }
 
-export const normalizePaymentFormData = (payment: SablierPaymentFormValues): SablierPayment => {
+export const mapSablierPaymentFormValuesToSablierPayment = (
+  payment: SablierPaymentFormValues,
+): SablierPayment => {
   if (
     !payment.streamId ||
     !payment.contractAddress ||
@@ -364,7 +366,7 @@ export const normalizePaymentFormData = (payment: SablierPaymentFormValues): Sab
   };
 };
 
-export const normalizeRoleFormData = (role: RoleHatFormValue): DecentRoleHat => {
+export const mapRoleHatFormValueToDecentRoleHat = (role: RoleHatFormValue): DecentRoleHat => {
   if (
     !role.id ||
     !role.prettyId ||
@@ -382,6 +384,6 @@ export const normalizeRoleFormData = (role: RoleHatFormValue): DecentRoleHat =>
     name: role.name,
     description: role.description,
     smartAddress: role.smartAddress,
-    payments: role.payments?.map(payment => normalizePaymentFormData(payment)),
+    payments: role.payments?.map(payment => mapSablierPaymentFormValuesToSablierPayment(payment)),
   };
 };

From af70037518de9d22783967137c9574ad6ef8ded7 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 11:11:49 -0400
Subject: [PATCH 12/46] Fix build errors by re-adding some accidentally-removed
 code

---
 .../daos/[daoAddress]/roles/edit/index.tsx    | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/daos/[daoAddress]/roles/edit/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
index 17e0c0d863..d2f2f25631 100644
--- a/src/pages/daos/[daoAddress]/roles/edit/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
@@ -4,7 +4,7 @@ import { Formik } from 'formik';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Hex } from 'viem';
+import { Hex, getAddress } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { RoleCardEdit } from '../../../../../components/pages/Roles/RoleCard';
 import {
@@ -30,7 +30,16 @@ function RolesEdit() {
   const {
     node: { daoAddress, safe },
   } = useFractal();
-  const { addressPrefix } = useNetworkConfig();
+  const {
+    addressPrefix,
+    chain,
+    contracts: {
+      hatsProtocol,
+      erc6551Registry,
+      decentHatsMasterCopy,
+      hatsAccount1ofNMasterCopy: hatsAccountImplementation,
+    },
+  } = useNetworkConfig();
 
   const publicClient = usePublicClient();
   const { rolesSchema } = useRolesSchema();
@@ -151,7 +160,16 @@ function RolesEdit() {
               buttonClick={async () => {
                 if (!publicClient) return;
 
-                const newRole = await getNewRole();
+                const newRole = await getNewRole({
+                  adminHatId: hatsTree?.adminHat.id,
+                  hatsCount: values.hats.length,
+                  implementation: hatsAccountImplementation,
+                  chainId: BigInt(chain.id),
+                  publicClient,
+                  registryAddress: erc6551Registry,
+                  decentHats: getAddress(decentHatsMasterCopy),
+                  tokenContract: hatsProtocol,
+                });
                 setFieldValue('roleEditing', newRole);
                 showRoleEditDetails(newRole.id);
               }}

From f59c11bb61c5304fcfedb1d7bb62c56564400f80 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 12:01:28 -0400
Subject: [PATCH 13/46] Only need to create a new temp ID when creating new
 Role

---
 .../daos/[daoAddress]/roles/edit/index.tsx    | 41 +++++--------------
 src/store/roles/rolesStoreUtils.ts            | 35 ----------------
 2 files changed, 10 insertions(+), 66 deletions(-)

diff --git a/src/pages/daos/[daoAddress]/roles/edit/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
index d2f2f25631..a2120458ec 100644
--- a/src/pages/daos/[daoAddress]/roles/edit/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/edit/index.tsx
@@ -4,8 +4,7 @@ import { Formik } from 'formik';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Hex, getAddress } from 'viem';
-import { usePublicClient } from 'wagmi';
+import { Hex, toHex } from 'viem';
 import { RoleCardEdit } from '../../../../../components/pages/Roles/RoleCard';
 import {
   RoleCardLoading,
@@ -17,12 +16,13 @@ import DraggableDrawer from '../../../../../components/ui/containers/DraggableDr
 import { ModalBase } from '../../../../../components/ui/modals/ModalBase';
 import PageHeader from '../../../../../components/ui/page/Header/PageHeader';
 import { DAO_ROUTES } from '../../../../../constants/routes';
+import { getRandomBytes } from '../../../../../helpers';
 import { useRolesSchema } from '../../../../../hooks/schemas/roles/useRolesSchema';
 import useCreateRoles from '../../../../../hooks/utils/useCreateRoles';
 import { useNavigationBlocker } from '../../../../../hooks/utils/useNavigationBlocker';
 import { useFractal } from '../../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { getNewRole, useRolesStore } from '../../../../../store/roles';
+import { useRolesStore } from '../../../../../store/roles';
 import { UnsavedChangesWarningContent } from './unsavedChangesWarningContent';
 
 function RolesEdit() {
@@ -30,18 +30,8 @@ function RolesEdit() {
   const {
     node: { daoAddress, safe },
   } = useFractal();
-  const {
-    addressPrefix,
-    chain,
-    contracts: {
-      hatsProtocol,
-      erc6551Registry,
-      decentHatsMasterCopy,
-      hatsAccount1ofNMasterCopy: hatsAccountImplementation,
-    },
-  } = useNetworkConfig();
-
-  const publicClient = usePublicClient();
+  const { addressPrefix } = useNetworkConfig();
+
   const { rolesSchema } = useRolesSchema();
   const { hatsTree } = useRolesStore();
 
@@ -89,8 +79,8 @@ function RolesEdit() {
 
   if (daoAddress === null) return null;
 
-  const showRoleEditDetails = (hatId: Hex) => {
-    navigate(DAO_ROUTES.rolesEditDetails.relative(addressPrefix, daoAddress, hatId));
+  const showRoleEditDetails = (roleId: Hex) => {
+    navigate(DAO_ROUTES.rolesEditDetails.relative(addressPrefix, daoAddress, roleId));
   };
 
   const hatsTreeLoading = hatsTree === undefined;
@@ -158,20 +148,9 @@ function RolesEdit() {
                 leftIcon: <Plus />,
               }}
               buttonClick={async () => {
-                if (!publicClient) return;
-
-                const newRole = await getNewRole({
-                  adminHatId: hatsTree?.adminHat.id,
-                  hatsCount: values.hats.length,
-                  implementation: hatsAccountImplementation,
-                  chainId: BigInt(chain.id),
-                  publicClient,
-                  registryAddress: erc6551Registry,
-                  decentHats: getAddress(decentHatsMasterCopy),
-                  tokenContract: hatsProtocol,
-                });
-                setFieldValue('roleEditing', newRole);
-                showRoleEditDetails(newRole.id);
+                const newId = toHex(getRandomBytes(), { size: 32 });
+                setFieldValue('roleEditing', { id: newId });
+                showRoleEditDetails(newId);
               }}
             />
 
diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index 6d2823396b..dbd9a10a68 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -306,41 +306,6 @@ export const predictHatId = ({ adminHatId, hatsCount }: { adminHatId: Hex; hatsC
   return BigInt(`${adminLevelBinary}${newSiblingId}`.padEnd(66, '0'));
 };
 
-export async function getNewRole({
-  adminHatId,
-  hatsCount,
-  chainId,
-  publicClient,
-  implementation,
-  tokenContract,
-  registryAddress,
-  decentHats,
-}: {
-  adminHatId?: Hex;
-  hatsCount: number;
-} & Omit<PredictAccountParams, 'tokenId'>): Promise<RoleHatFormValue> {
-  // @dev creates a unique id for the hat for new hats for use in form, not stored on chain
-  const id = adminHatId
-    ? toHex(predictHatId({ adminHatId, hatsCount }))
-    : toHex(getRandomBytes(), { size: 32 });
-  return {
-    id,
-    wearer: '',
-    name: '',
-    description: '',
-    prettyId: '',
-    smartAddress: await predictAccountAddress({
-      implementation,
-      chainId: BigInt(chainId),
-      tokenContract,
-      tokenId: BigInt(id),
-      registryAddress,
-      publicClient,
-      decentHats,
-    }),
-  };
-}
-
 export const mapSablierPaymentFormValuesToSablierPayment = (
   payment: SablierPaymentFormValues,
 ): SablierPayment => {

From 5df53d1822e30cf1bbbb64dc212898b8ab5db875 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 13:36:09 -0400
Subject: [PATCH 14/46] Remove unused imorts

---
 src/store/roles/rolesStoreUtils.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index dbd9a10a68..6a79513531 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -1,21 +1,11 @@
 import { Tree, Hat } from '@hatsprotocol/sdk-v1-subgraph';
-import {
-  Address,
-  Hex,
-  PublicClient,
-  encodePacked,
-  getContract,
-  keccak256,
-  toHex,
-  getAddress,
-} from 'viem';
+import { Address, Hex, PublicClient, encodePacked, getContract, keccak256, getAddress } from 'viem';
 import ERC6551RegistryAbi from '../../assets/abi/ERC6551RegistryAbi';
 import {
   RoleHatFormValue,
   SablierPayment,
   SablierPaymentFormValues,
 } from '../../components/pages/Roles/types';
-import { getRandomBytes } from '../../helpers';
 
 export class DecentHatsError extends Error {
   constructor(message: string) {

From 0af9ac8f57d980e6570070a3ce3ce5de08cb526a Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 13:35:09 -0400
Subject: [PATCH 15/46] Removed undefined check by adding a new more explicit
 type

---
 src/components/pages/Roles/types.tsx |  4 ++++
 src/hooks/utils/useCreateRoles.ts    | 25 +++++++++++++++----------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index a9fc05a598..831e1cd234 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -97,6 +97,10 @@ export interface RoleHatFormValue
   roleEditingPaymentIndex?: number;
 }
 
+export interface RoleHatFormValueEdited extends RoleHatFormValue {
+  editedRole: EditedRole;
+}
+
 export interface RoleFormValues {
   proposalMetadata: CreateProposalMetadata;
   hats: RoleHatFormValue[];
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index b99c0a49e3..6535227542 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -17,6 +17,7 @@ import {
   HatWearerChangedParams,
   RoleFormValues,
   RoleHatFormValue,
+  RoleHatFormValueEdited,
 } from '../../components/pages/Roles/types';
 import { DAO_ROUTES } from '../../constants/routes';
 import { useFractal } from '../../providers/App/AppProvider';
@@ -122,13 +123,13 @@ export default function useCreateRoles() {
     [ipfsClient],
   );
 
-  const parseEditedHatsFormValues = useCallback(
-    async (editedHats: RoleHatFormValue[]) => {
+  const editedHatsGroupedByType = useCallback(
+    async (editedHats: RoleHatFormValueEdited[]) => {
       //  Parse added hats
 
       const addedHats: HatStruct[] = await Promise.all(
         editedHats
-          .filter(hat => hat.editedRole?.status === EditBadgeStatus.New)
+          .filter(hat => hat.editedRole.status === EditBadgeStatus.New)
           .map(async hat => {
             if (hat.name === undefined || hat.description === undefined) {
               throw new Error('Hat name or description of added hat is undefined.');
@@ -159,7 +160,7 @@ export default function useCreateRoles() {
 
       // Parse removed hats
       const removedHatIds = editedHats
-        .filter(hat => hat.editedRole?.status === EditBadgeStatus.Removed)
+        .filter(hat => hat.editedRole.status === EditBadgeStatus.Removed)
         .map(hat => {
           if (hat.id === undefined) {
             throw new Error('Hat ID of removed hat is undefined.');
@@ -172,7 +173,7 @@ export default function useCreateRoles() {
       const memberChangedHats: HatWearerChangedParams[] = editedHats
         .filter(
           hat =>
-            hat.editedRole?.status === EditBadgeStatus.Updated &&
+            hat.editedRole.status === EditBadgeStatus.Updated &&
             hat.editedRole.fieldNames.includes('member'),
         )
         .map(hat => {
@@ -198,7 +199,7 @@ export default function useCreateRoles() {
         editedHats
           .filter(
             hat =>
-              hat.editedRole?.status === EditBadgeStatus.Updated &&
+              hat.editedRole.status === EditBadgeStatus.Updated &&
               (hat.editedRole.fieldNames.includes('roleName') ||
                 hat.editedRole.fieldNames.includes('roleDescription')),
           )
@@ -753,11 +754,15 @@ export default function useCreateRoles() {
 
       try {
         // filter to hats that have been modified (ie includes `editedRole` prop)
-        const modifiedHats = values.hats.filter(hat => !!hat.editedRole);
-        let proposalData: ProposalExecuteData;
+        const modifiedHats: RoleHatFormValueEdited[] = values.hats
+          .map(hat =>
+            hat.editedRole !== undefined ? { ...hat, editedRole: hat.editedRole } : null,
+          )
+          .filter(hat => hat !== null);
 
-        const editedHatStructs = await parseEditedHatsFormValues(modifiedHats);
+        const editedHatStructs = await editedHatsGroupedByType(modifiedHats);
 
+        let proposalData: ProposalExecuteData;
         if (!hatsTreeId) {
           // This safe has no top hat, so we prepare a proposal to create one. This will also create an admin hat,
           // along with any other hats that are added.
@@ -791,7 +796,7 @@ export default function useCreateRoles() {
     },
     [
       safe,
-      parseEditedHatsFormValues,
+      editedHatsGroupedByType,
       hatsTreeId,
       submitProposal,
       t,

From 535a18557f4956bdf8e4bf782fbe06be1c7d609f Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Wed, 21 Aug 2024 17:03:43 -0400
Subject: [PATCH 16/46] Work in progress, will be back later to continue.

---
 src/hooks/utils/useCreateRoles.ts | 413 ++++++++++++++++--------------
 1 file changed, 224 insertions(+), 189 deletions(-)

diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 6535227542..86c47286ae 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -18,6 +18,8 @@ import {
   RoleFormValues,
   RoleHatFormValue,
   RoleHatFormValueEdited,
+  SablierPayment,
+  SablierPaymentFormValues,
 } from '../../components/pages/Roles/types';
 import { DAO_ROUTES } from '../../constants/routes';
 import { useFractal } from '../../providers/App/AppProvider';
@@ -28,7 +30,10 @@ import { CreateProposalMetadata, ProposalExecuteData } from '../../types';
 import { SENTINEL_MODULE } from '../../utils/address';
 import useSubmitProposal from '../DAO/proposal/useSubmitProposal';
 import useCreateSablierStream from '../streams/useCreateSablierStream';
-import { mapSablierPaymentFormValuesToSablierPayment } from './../../store/roles/rolesStoreUtils';
+import {
+  DecentRoleHat,
+  mapSablierPaymentFormValuesToSablierPayment,
+} from './../../store/roles/rolesStoreUtils';
 
 const hatsDetailsBuilder = (data: { name: string; description: string }) => {
   return JSON.stringify({
@@ -37,6 +42,155 @@ const hatsDetailsBuilder = (data: { name: string; description: string }) => {
   });
 };
 
+const identifyAndPrepareAddedHats = (
+  modifiedHats: RoleHatFormValueEdited[],
+  // hatsTree: DecentTree | null | undefined,
+  uploadHatDescription: (hatDescription: string) => Promise<string>,
+) => {
+  return Promise.all(
+    modifiedHats
+      .filter(hat => hat.editedRole.status === EditBadgeStatus.New)
+      .map(async hat => {
+        if (hat.name === undefined || hat.description === undefined) {
+          throw new Error('Hat name or description of added hat is undefined.');
+        }
+
+        if (hat.wearer === undefined) {
+          throw new Error('Hat wearer of added hat is undefined.');
+        }
+
+        const details = await uploadHatDescription(
+          hatsDetailsBuilder({
+            name: hat.name,
+            description: hat.description,
+          }),
+        );
+
+        const newHat: HatStruct = {
+          // eligibility: hatsTree?.topHat.smartAddress,
+          // toggle: hatsTree?.topHat.smartAddress,
+          maxSupply: 1,
+          details,
+          imageURI: '',
+          isMutable: true,
+          wearer: getAddress(hat.wearer),
+        };
+
+        return newHat;
+      }),
+  );
+};
+
+const identifyAndPrepareRemovedHats = (modifiedHats: RoleHatFormValueEdited[]) => {
+  return modifiedHats
+    .filter(hat => hat.editedRole.status === EditBadgeStatus.Removed)
+    .map(hat => {
+      if (hat.id === undefined) {
+        throw new Error('Hat ID of removed hat is undefined.');
+      }
+
+      return hat.id;
+    });
+};
+
+const identifyAndPrepareMemberChangedHats = (
+  modifiedHats: RoleHatFormValueEdited[],
+  getHat: (hatId: Hex) => DecentRoleHat | null,
+) => {
+  return modifiedHats
+    .filter(
+      hat =>
+        hat.editedRole.status === EditBadgeStatus.Updated &&
+        hat.editedRole.fieldNames.includes('member'),
+    )
+    .map(hat => {
+      if (hat.wearer === undefined || hat.id === undefined) {
+        throw new Error('Hat wearer of member changed Hat is undefined.');
+      }
+
+      const currentHat = getHat(hat.id);
+      if (currentHat === null) {
+        throw new Error("Couldn't find existing Hat for member changed Hat.");
+      }
+
+      const hatWearerChanged: HatWearerChangedParams = {
+        id: hat.id,
+        currentWearer: getAddress(currentHat.wearer),
+        newWearer: getAddress(hat.wearer),
+      };
+
+      return hatWearerChanged;
+    })
+    .filter(hat => hat.currentWearer !== hat.newWearer);
+};
+
+const identifyAndPrepareRoleDetailsChangedHats = (
+  modifiedHats: RoleHatFormValueEdited[],
+  uploadHatDescription: (hatDescription: string) => Promise<string>,
+) => {
+  return Promise.all(
+    modifiedHats
+      .filter(
+        hat =>
+          hat.editedRole.status === EditBadgeStatus.Updated &&
+          (hat.editedRole.fieldNames.includes('roleName') ||
+            hat.editedRole.fieldNames.includes('roleDescription')),
+      )
+      .map(async hat => {
+        if (hat.id === undefined) {
+          throw new Error('Hat ID of existing hat is undefined.');
+        }
+
+        if (hat.name === undefined || hat.description === undefined) {
+          throw new Error('Hat name or description of existing hat is undefined.');
+        }
+
+        return {
+          id: hat.id,
+          details: await uploadHatDescription(
+            hatsDetailsBuilder({
+              name: hat.name,
+              description: hat.description,
+            }),
+          ),
+        };
+      }),
+  );
+};
+
+const identifyAndPrepareEditedPaymentStreams = (
+  modifiedHats: RoleHatFormValueEdited[],
+  getPayment: (hatId: Hex, streamId: string) => SablierPayment | null,
+) => {
+  return modifiedHats.flatMap(hat => {
+    const payments = hat.payments?.filter(payment => !!payment.streamId) || [];
+
+    return payments
+      .filter(payment => {
+        if (payment.streamId === undefined) {
+          return false;
+        }
+        const originalPayment = getPayment(hat.id, payment.streamId);
+        return !isEqual(payment, originalPayment);
+      })
+      .map(payment => ({
+        hatId: hat.id,
+        payment,
+      }));
+  });
+};
+
+const identifyAndPrepareAddedPaymentStreams = (modifiedHats: RoleHatFormValueEdited[]) => {
+  return modifiedHats.flatMap(hat => {
+    const payments = hat.payments?.filter(payment => !payment.streamId) || [];
+
+    return payments.map(payment => ({
+      hatId: hat.id,
+      payment,
+    }));
+  });
+};
+
 const prepareAddHatsTxArgs = (addedHats: HatStruct[], adminHatId: Hex, topHatAccount: Address) => {
   const admins: bigint[] = [];
   const details: string[] = [];
@@ -123,149 +277,6 @@ export default function useCreateRoles() {
     [ipfsClient],
   );
 
-  const editedHatsGroupedByType = useCallback(
-    async (editedHats: RoleHatFormValueEdited[]) => {
-      //  Parse added hats
-
-      const addedHats: HatStruct[] = await Promise.all(
-        editedHats
-          .filter(hat => hat.editedRole.status === EditBadgeStatus.New)
-          .map(async hat => {
-            if (hat.name === undefined || hat.description === undefined) {
-              throw new Error('Hat name or description of added hat is undefined.');
-            }
-
-            if (hat.wearer === undefined) {
-              throw new Error('Hat wearer of added hat is undefined.');
-            }
-
-            const details = await uploadHatDescription(
-              hatsDetailsBuilder({
-                name: hat.name,
-                description: hat.description,
-              }),
-            );
-
-            return {
-              eligibility: hatsTree?.topHat.smartAddress,
-              toggle: hatsTree?.topHat.smartAddress,
-              maxSupply: 1,
-              details,
-              imageURI: '',
-              isMutable: true,
-              wearer: getAddress(hat.wearer),
-            };
-          }),
-      );
-
-      // Parse removed hats
-      const removedHatIds = editedHats
-        .filter(hat => hat.editedRole.status === EditBadgeStatus.Removed)
-        .map(hat => {
-          if (hat.id === undefined) {
-            throw new Error('Hat ID of removed hat is undefined.');
-          }
-
-          return hat.id;
-        });
-
-      // Parse member changed hats
-      const memberChangedHats: HatWearerChangedParams[] = editedHats
-        .filter(
-          hat =>
-            hat.editedRole.status === EditBadgeStatus.Updated &&
-            hat.editedRole.fieldNames.includes('member'),
-        )
-        .map(hat => {
-          if (hat.wearer === undefined || hat.id === undefined) {
-            throw new Error('Hat wearer of member changed Hat is undefined.');
-          }
-
-          const currentHat = getHat(hat.id);
-          if (currentHat === null) {
-            throw new Error("Couldn't find existing Hat for member changed Hat.");
-          }
-
-          return {
-            id: hat.id,
-            currentWearer: getAddress(currentHat.wearer),
-            newWearer: getAddress(hat.wearer),
-          };
-        })
-        .filter(hat => hat.currentWearer !== hat.newWearer);
-
-      // Parse role details changed hats (name and/or description updated)
-      const roleDetailsChangedHats = await Promise.all(
-        editedHats
-          .filter(
-            hat =>
-              hat.editedRole.status === EditBadgeStatus.Updated &&
-              (hat.editedRole.fieldNames.includes('roleName') ||
-                hat.editedRole.fieldNames.includes('roleDescription')),
-          )
-          .map(async hat => {
-            if (hat.id === undefined) {
-              throw new Error('Hat ID of existing hat is undefined.');
-            }
-
-            if (hat.name === undefined || hat.description === undefined) {
-              throw new Error('Hat name or description of existing hat is undefined.');
-            }
-
-            return {
-              id: hat.id,
-              details: await uploadHatDescription(
-                hatsDetailsBuilder({
-                  name: hat.name,
-                  description: hat.description,
-                }),
-              ),
-            };
-          }),
-      );
-
-      // Parse role with edited payroll hats
-      const editedPayrollHats = editedHats
-        .filter(hat => {
-          const payments = hat.payments?.filter(payment => !!payment.streamId);
-          if (payments?.length) {
-            const originalHat = getHat(hat.id);
-            if (originalHat) {
-              const editedPayments = payments.filter(payment => {
-                if (payment.streamId) {
-                  const originalPayment = getPayment(hat.id, payment.streamId);
-                  return !isEqual(payment, originalPayment);
-                }
-                return false;
-              });
-
-              return { ...hat, payments: editedPayments };
-            }
-          }
-          return null;
-        })
-        .filter(hat => !!hat);
-
-      // Parse role with added payroll hats
-      const addedNewPaymentsHats: RoleHatFormValue[] = editedHats
-        .map(hat => {
-          const payments = hat.payments?.filter(payment => !payment.streamId);
-          return payments?.length ? { ...hat, payments } : null;
-        })
-        .filter(hat => hat !== null);
-
-      return {
-        addedHats,
-        removedHatIds,
-        memberChangedHats,
-        roleDetailsChangedHats,
-        addedNewPaymentsHats,
-        editedPayrollHats,
-      };
-    },
-    [getHat, getPayment, hatsTree?.topHat.smartAddress, uploadHatDescription],
-  );
-
   const prepareCreateTopHatProposalData = useCallback(
     async (proposalMetadata: CreateProposalMetadata, addedHats: HatStruct[]) => {
       if (!daoAddress) {
@@ -369,17 +380,21 @@ export default function useCreateRoles() {
   const prepareEditHatsProposalData = useCallback(
     (
       proposalMetadata: CreateProposalMetadata,
-      edits: {
-        addedHats: HatStruct[];
-        removedHatIds: Hex[];
-        memberChangedHats: HatWearerChangedParams[];
-        roleDetailsChangedHats: {
-          id: Address;
-          details: string;
-        }[];
-        addedNewPaymentsHats: RoleHatFormValue[];
-        editedPayrollHats: RoleHatFormValue[];
-      },
+      addedHats: HatStruct[],
+      removedHatIds: Hex[],
+      memberChangedHats: HatWearerChangedParams[],
+      roleDetailsChangedHats: {
+        id: Hex;
+        details: string;
+      }[],
+      editedPaymentStreams: {
+        hatId: Hex;
+        payment: SablierPaymentFormValues;
+      }[],
+      addedPaymentStreams: {
+        hatId: Hex;
+        payment: SablierPaymentFormValues;
+      }[],
     ) => {
       if (!hatsTree || !daoAddress) {
         throw new Error('Can not edit hats without Hats Tree!');
@@ -387,14 +402,6 @@ export default function useCreateRoles() {
 
       const adminHatId = hatsTree.adminHat.id;
       const topHatAccount = hatsTree.topHat.smartAddress;
-      const {
-        addedHats,
-        removedHatIds,
-        memberChangedHats,
-        roleDetailsChangedHats,
-        addedNewPaymentsHats,
-        editedPayrollHats,
-      } = edits;
 
       const createAndMintHatsTxs: Hex[] = [];
       let removeHatTxs: Hex[] = [];
@@ -570,11 +577,18 @@ export default function useCreateRoles() {
         });
       }
 
-      if (addedNewPaymentsHats.length) {
-        const streamsData = addedNewPaymentsHats.flatMap(role =>
+      // TODO DEV
+      // i've changed the type of `addedPaymentStreams` and
+      // `editedPaymentStreams` and maybe another input type.
+      // We'll need figure out these smart addresses here.
+      // Probably should see if we can grab them from store off the hat if the hat
+      // exists already to save network calls. Cause I think there's a network call
+      // involved with determining the smart address of new hat.
+      if (addedPaymentStreams.length) {
+        const streamsData = addedPaymentStreams.flatMap(role =>
           (role.payments ?? []).map(payment => payment),
         );
-        const recipients = addedNewPaymentsHats.flatMap(role =>
+        const recipients = addedPaymentStreams.flatMap(role =>
           (role.payments ?? []).map(() => {
             if (role.smartAddress === undefined) {
               throw new Error('Hat smart address for new payment on role is undefined.');
@@ -597,10 +611,10 @@ export default function useCreateRoles() {
         });
       }
 
-      if (editedPayrollHats.length) {
+      if (editedPaymentStreams.length) {
         const paymentCancelTxs: { calldata: Hex; targetAddress: Address }[] = [];
 
-        editedPayrollHats.forEach(role =>
+        editedPaymentStreams.forEach(role =>
           (role.payments ?? []).forEach(payment => {
             if (role.wearer === undefined) {
               throw new Error('Hat wearer of edited payroll role is undefined.');
@@ -670,10 +684,10 @@ export default function useCreateRoles() {
             });
           }),
         );
-        const streamsData = editedPayrollHats.flatMap(role =>
+        const streamsData = editedPaymentStreams.flatMap(role =>
           (role.payments ?? []).map(payment => payment),
         );
-        const recipients = editedPayrollHats.flatMap(role =>
+        const recipients = editedPaymentStreams.flatMap(role =>
           (role.payments ?? []).map(() => {
             if (role.smartAddress === undefined) {
               throw new Error('Hat smart address for new payment on role is undefined.');
@@ -752,30 +766,49 @@ export default function useCreateRoles() {
         throw new Error('Cannot create Roles proposal without known Safe');
       }
 
-      try {
-        // filter to hats that have been modified (ie includes `editedRole` prop)
-        const modifiedHats: RoleHatFormValueEdited[] = values.hats
-          .map(hat =>
-            hat.editedRole !== undefined ? { ...hat, editedRole: hat.editedRole } : null,
-          )
-          .filter(hat => hat !== null);
+      // filter to hats that have been modified (ie includes `editedRole` prop)
+      const modifiedHats: RoleHatFormValueEdited[] = values.hats
+        .map(hat => {
+          if (hat.editedRole === undefined) {
+            return null;
+          }
+          return { ...hat, editedRole: hat.editedRole };
+        })
+        .filter(hat => hat !== null);
 
-        const editedHatStructs = await editedHatsGroupedByType(modifiedHats);
+      try {
+        const addedHats = await identifyAndPrepareAddedHats(modifiedHats, uploadHatDescription);
+        const removedHatIds = identifyAndPrepareRemovedHats(modifiedHats);
+        const memberChangedHats = identifyAndPrepareMemberChangedHats(modifiedHats, getHat);
+        const roleDetailsChangedHats = await identifyAndPrepareRoleDetailsChangedHats(
+          modifiedHats,
+          uploadHatDescription,
+        );
+        const editedPaymentStreams = identifyAndPrepareEditedPaymentStreams(
+          modifiedHats,
+          getPayment,
+        );
+        const addedPaymentStreams = identifyAndPrepareAddedPaymentStreams(modifiedHats);
 
         let proposalData: ProposalExecuteData;
         if (!hatsTreeId) {
           // This safe has no top hat, so we prepare a proposal to create one. This will also create an admin hat,
           // along with any other hats that are added.
-          proposalData = await prepareCreateTopHatProposalData(
-            values.proposalMetadata,
-            editedHatStructs.addedHats,
-          );
+          proposalData = await prepareCreateTopHatProposalData(values.proposalMetadata, addedHats);
         } else {
           if (!hatsTree) {
             throw new Error('Cannot edit Roles without a HatsTree');
           }
           // This safe has a top hat, so we prepare a proposal to edit the hats that have changed.
-          proposalData = prepareEditHatsProposalData(values.proposalMetadata, editedHatStructs);
+          proposalData = prepareEditHatsProposalData(
+            values.proposalMetadata,
+            addedHats,
+            removedHatIds,
+            memberChangedHats,
+            roleDetailsChangedHats,
+            editedPaymentStreams,
+            addedPaymentStreams,
+          );
         }
 
         // All done, submit the proposal!
@@ -795,15 +828,17 @@ export default function useCreateRoles() {
       }
     },
     [
-      safe,
-      editedHatsGroupedByType,
+      getHat,
+      getPayment,
+      hatsTree,
       hatsTreeId,
-      submitProposal,
-      t,
-      submitProposalSuccessCallback,
       prepareCreateTopHatProposalData,
-      hatsTree,
       prepareEditHatsProposalData,
+      safe,
+      submitProposal,
+      submitProposalSuccessCallback,
+      t,
+      uploadHatDescription,
     ],
   );
 

From 2d799e6b1b983f4ea010f82850b9f905372dcbd8 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Thu, 22 Aug 2024 10:37:00 -0400
Subject: [PATCH 17/46] wip

---
 src/components/pages/Roles/types.tsx        |   2 +-
 src/hooks/streams/useCreateSablierStream.ts |  40 +++----
 src/hooks/utils/useCreateRoles.ts           | 117 ++++++++++++--------
 src/store/roles/rolesStoreUtils.ts          |  28 +++--
 4 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 831e1cd234..ee3900f820 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -88,7 +88,7 @@ export interface DurationBreakdown {
 }
 
 export interface RoleHatFormValue
-  extends Partial<Omit<DecentRoleHat, 'id' | 'wearer' | 'payments'>> {
+  extends Partial<Omit<DecentRoleHat, 'id' | 'wearer' | 'payments' | 'smartAddress'>> {
   id: Hex;
   wearer?: string;
   payments?: SablierPaymentFormValues[];
diff --git a/src/hooks/streams/useCreateSablierStream.ts b/src/hooks/streams/useCreateSablierStream.ts
index f74e2e72fd..1a7e760255 100644
--- a/src/hooks/streams/useCreateSablierStream.ts
+++ b/src/hooks/streams/useCreateSablierStream.ts
@@ -126,30 +126,28 @@ export default function useCreateSablierStream() {
   }, []);
 
   const prepareBatchLinearStreamCreation = useCallback(
-    (linearStreams: SablierPaymentFormValues[], recipients: Address[]) => {
-      if (linearStreams.length !== recipients.length) {
-        console.error('Error batch creating linear streams', { linearStreams, recipients });
-        throw new Error(
-          'Parameters mismatch. Amount of created streams has to match amount of recipients',
-        );
-      }
-
+    (
+      paymentStreams: {
+        recipient: Address;
+        payment: SablierPaymentFormValues;
+      }[],
+    ) => {
       const preparedStreamCreationTransactions: { calldata: Hex; targetAddress: Address }[] = [];
       const preparedTokenApprovalsTransactions: { calldata: Hex; targetAddress: Address }[] = [];
 
-      const groupedStreams = groupBy(linearStreams, 'asset.address');
+      const groupedStreams = groupBy(paymentStreams, 'payment.asset.address');
       Object.keys(groupedStreams).forEach(assetAddress => {
         const assembledStreams: ReturnType<typeof prepareLinearStream>[] = [];
         const streams = groupedStreams[assetAddress];
         const tokenAddress = getAddress(assetAddress);
         let totalStreamsAmount = 0n;
 
-        streams.forEach((streamData, index) => {
+        streams.forEach(streamData => {
           if (
-            !streamData?.amount?.bigintValue ||
-            streamData.amount.bigintValue <= 0n ||
-            !streamData.startDate ||
-            !streamData.endDate
+            !streamData.payment.amount?.bigintValue ||
+            streamData.payment.amount.bigintValue <= 0n ||
+            !streamData.payment.startDate ||
+            !streamData.payment.endDate
           ) {
             console.error(
               'Error creating linear stream - stream amount must be bigger than 0, startDate and endDate must be set',
@@ -159,17 +157,15 @@ export default function useCreateSablierStream() {
               'Stream total amount must be greater than 0, startDate and endDate must be set',
             );
           }
-          totalStreamsAmount += streamData.amount.bigintValue;
-          const recipient = recipients[index];
+          totalStreamsAmount += streamData.payment.amount.bigintValue;
 
           assembledStreams.push(
             prepareLinearStream({
-              recipient,
-              ...streamData,
-              startDate: streamData.startDate,
-              endDate: streamData.endDate,
-              cliffDate: streamData.cliffDate,
-              totalAmount: streamData.amount.bigintValue,
+              recipient: streamData.recipient,
+              startDate: streamData.payment.startDate,
+              endDate: streamData.payment.endDate,
+              cliffDate: streamData.payment.cliffDate,
+              totalAmount: streamData.payment.amount.bigintValue,
             }),
           );
         });
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 86c47286ae..d02f535d19 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Address, encodeFunctionData, getAddress, Hash, Hex, zeroAddress } from 'viem';
+import { usePublicClient } from 'wagmi';
 import DecentHatsAbi from '../../assets/abi/DecentHats_0_1_0_Abi';
 import ERC6551RegistryAbi from '../../assets/abi/ERC6551RegistryAbi';
 import GnosisSafeL2 from '../../assets/abi/GnosisSafeL2';
@@ -16,7 +17,6 @@ import {
   HatStruct,
   HatWearerChangedParams,
   RoleFormValues,
-  RoleHatFormValue,
   RoleHatFormValueEdited,
   SablierPayment,
   SablierPaymentFormValues,
@@ -33,6 +33,7 @@ import useCreateSablierStream from '../streams/useCreateSablierStream';
 import {
   DecentRoleHat,
   mapSablierPaymentFormValuesToSablierPayment,
+  predictAccountAddress,
 } from './../../store/roles/rolesStoreUtils';
 
 const hatsDetailsBuilder = (data: { name: string; description: string }) => {
@@ -161,31 +162,45 @@ const identifyAndPrepareRoleDetailsChangedHats = (
 const identifyAndPrepareEditedPaymentStreams = (
   modifiedHats: RoleHatFormValueEdited[],
   getPayment: (hatId: Hex, streamId: string) => SablierPayment | null,
+  getHat: (hatId: Hex) => DecentRoleHat | null,
 ) => {
-  return modifiedHats.flatMap(hat => {
-    const payments = hat.payments?.filter(payment => !!payment.streamId) || [];
+  return modifiedHats.flatMap(formHat => {
+    const currentHat = getHat(formHat.id);
+    if (currentHat === null) {
+      throw new Error("Couldn't find existing Hat for edited payment stream Hat.");
+    }
+
+    const payments = formHat.payments?.filter(payment => !!payment.streamId) || [];
 
     return payments
       .filter(payment => {
         if (payment.streamId === undefined) {
           return false;
         }
-        const originalPayment = getPayment(hat.id, payment.streamId);
+        const originalPayment = getPayment(formHat.id, payment.streamId);
         return !isEqual(payment, originalPayment);
       })
       .map(payment => ({
-        hatId: hat.id,
+        recipient: currentHat.smartAddress,
         payment,
       }));
   });
 };
 
-const identifyAndPrepareAddedPaymentStreams = (modifiedHats: RoleHatFormValueEdited[]) => {
-  return modifiedHats.flatMap(hat => {
-    const payments = hat.payments?.filter(payment => !payment.streamId) || [];
+const identifyAndPrepareAddedPaymentStreams = (
+  modifiedHats: RoleHatFormValueEdited[],
+  getHat: (hatId: Hex) => DecentRoleHat | null,
+) => {
+  return modifiedHats.flatMap(formHat => {
+    const currentHat = getHat(formHat.id);
+    if (currentHat === null) {
+      throw new Error("Couldn't find existing Hat for added payment stream Hat.");
+    }
+
+    const payments = formHat.payments?.filter(payment => !payment.streamId) || [];
 
     return payments.map(payment => ({
-      hatId: hat.id,
+      recipient: currentHat.smartAddress,
       payment,
     }));
   });
@@ -261,7 +276,7 @@ export default function useCreateRoles() {
   const { prepareBatchLinearStreamCreation, prepareFlushStreamTx, prepareCancelStreamTx } =
     useCreateSablierStream();
   const ipfsClient = useIPFSClient();
-
+  const publicClient = usePublicClient();
   const navigate = useNavigate();
   const submitProposalSuccessCallback = useCallback(() => {
     if (daoAddress) {
@@ -380,7 +395,7 @@ export default function useCreateRoles() {
   const prepareEditHatsProposalData = useCallback(
     (
       proposalMetadata: CreateProposalMetadata,
-      addedHats: HatStruct[],
+      addedHats: (HatStruct & { smartAddress: Address; id: bigint })[],
       removedHatIds: Hex[],
       memberChangedHats: HatWearerChangedParams[],
       roleDetailsChangedHats: {
@@ -388,11 +403,11 @@ export default function useCreateRoles() {
         details: string;
       }[],
       editedPaymentStreams: {
-        hatId: Hex;
+        recipient: Address;
         payment: SablierPaymentFormValues;
       }[],
       addedPaymentStreams: {
-        hatId: Hex;
+        recipient: Address;
         payment: SablierPaymentFormValues;
       }[],
     ) => {
@@ -577,39 +592,12 @@ export default function useCreateRoles() {
         });
       }
 
-      // TODO DEV
-      // i've changed the type of `addedPaymentStreams` and
-      // `editedPaymentStreams` and maybe another input type.
-      // We'll need figure out these smart addresses here.
-      // Probably should see if we can grab them from store off the hat if the hat
-      // exists already to save network calls. Cause I think there's a network call
-      // involved with determining the smart address of new hat.
-      if (addedPaymentStreams.length) {
-        const streamsData = addedPaymentStreams.flatMap(role =>
-          (role.payments ?? []).map(payment => payment),
-        );
-        const recipients = addedPaymentStreams.flatMap(role =>
-          (role.payments ?? []).map(() => {
-            if (role.smartAddress === undefined) {
-              throw new Error('Hat smart address for new payment on role is undefined.');
-            }
-            return role.smartAddress;
-          }),
-        );
-        const preparedPaymentTransactions = prepareBatchLinearStreamCreation(
-          streamsData,
-          recipients,
-        );
+      const preparedPaymentTransactions = prepareBatchLinearStreamCreation(addedPaymentStreams);
 
-        streamsData.forEach((_, i) => {
-          hatPaymentAddedTxs.push(
-            preparedPaymentTransactions.preparedTokenApprovalsTransactions[i],
-          );
-          hatPaymentAddedTxs.push(
-            preparedPaymentTransactions.preparedStreamCreationTransactions[i],
-          );
-        });
-      }
+      addedPaymentStreams.forEach((_, i) => {
+        hatPaymentAddedTxs.push(preparedPaymentTransactions.preparedTokenApprovalsTransactions[i]);
+        hatPaymentAddedTxs.push(preparedPaymentTransactions.preparedStreamCreationTransactions[i]);
+      });
 
       if (editedPaymentStreams.length) {
         const paymentCancelTxs: { calldata: Hex; targetAddress: Address }[] = [];
@@ -759,6 +747,9 @@ export default function useCreateRoles() {
 
   const createEditRolesProposal = useCallback(
     async (values: RoleFormValues, formikHelpers: FormikHelpers<RoleFormValues>) => {
+      if (!publicClient) {
+        throw new Error('Cannot create Roles proposal without public client');
+      }
       const { setSubmitting } = formikHelpers;
       setSubmitting(true);
       if (!safe) {
@@ -787,8 +778,9 @@ export default function useCreateRoles() {
         const editedPaymentStreams = identifyAndPrepareEditedPaymentStreams(
           modifiedHats,
           getPayment,
+          getHat,
         );
-        const addedPaymentStreams = identifyAndPrepareAddedPaymentStreams(modifiedHats);
+        const addedPaymentStreams = identifyAndPrepareAddedPaymentStreams(modifiedHats, getHat);
 
         let proposalData: ProposalExecuteData;
         if (!hatsTreeId) {
@@ -800,9 +792,34 @@ export default function useCreateRoles() {
             throw new Error('Cannot edit Roles without a HatsTree');
           }
           // This safe has a top hat, so we prepare a proposal to edit the hats that have changed.
+
+          // Convert addedHats to include id and smartAddress
+          const addedHatsWithIds = await Promise.all(
+            addedHats.map(async (hat, index) => {
+              const hatId = predictHatId({
+                adminHatId: hatsTree.adminHat.id,
+                hatsCount: hatsTree.roleHats.length + index,
+              });
+              const smartAddress = await predictAccountAddress({
+                implementation: hatsAccount1ofNMasterCopy,
+                chainId: BigInt(chain.id),
+                tokenContract: hatsProtocol,
+                tokenId: hatId,
+                registryAddress: erc6551Registry,
+                publicClient,
+                decentHats: getAddress(decentHatsMasterCopy),
+              });
+              return {
+                ...hat,
+                id: hatId,
+                smartAddress,
+              };
+            }),
+          );
+
           proposalData = prepareEditHatsProposalData(
             values.proposalMetadata,
-            addedHats,
+            addedHatsWithIds,
             removedHatIds,
             memberChangedHats,
             roleDetailsChangedHats,
@@ -828,12 +845,18 @@ export default function useCreateRoles() {
       }
     },
     [
+      chain.id,
+      decentHatsMasterCopy,
+      erc6551Registry,
       getHat,
       getPayment,
+      hatsAccount1ofNMasterCopy,
+      hatsProtocol,
       hatsTree,
       hatsTreeId,
       prepareCreateTopHatProposalData,
       prepareEditHatsProposalData,
+      publicClient,
       safe,
       submitProposal,
       submitProposalSuccessCallback,
diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index 6a79513531..302664abf0 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -1,5 +1,14 @@
 import { Tree, Hat } from '@hatsprotocol/sdk-v1-subgraph';
-import { Address, Hex, PublicClient, encodePacked, getContract, keccak256, getAddress } from 'viem';
+import {
+  Address,
+  Hex,
+  PublicClient,
+  encodePacked,
+  getContract,
+  keccak256,
+  getAddress,
+  zeroAddress,
+} from 'viem';
 import ERC6551RegistryAbi from '../../assets/abi/ERC6551RegistryAbi';
 import {
   RoleHatFormValue,
@@ -169,10 +178,6 @@ export const predictAccountAddress = (params: PredictAccountParams) => {
     client: publicClient,
   });
 
-  if (!publicClient.chain) {
-    throw new Error('Public client needs to be on a chain');
-  }
-
   const salt = getERC6551RegistrySalt(chainId, decentHats);
 
   return erc6551RegistryContract.read.account([
@@ -322,23 +327,16 @@ export const mapSablierPaymentFormValuesToSablierPayment = (
 };
 
 export const mapRoleHatFormValueToDecentRoleHat = (role: RoleHatFormValue): DecentRoleHat => {
-  if (
-    !role.id ||
-    !role.prettyId ||
-    !role.wearer ||
-    !role.name ||
-    !role.description ||
-    !role.smartAddress
-  ) {
+  if (!role.id || !role.prettyId || !role.wearer || !role.name || !role.description) {
     throw new Error('RoleHatFormValue data not complete enough to create DecentRoleHat');
   }
   return {
-    id: getAddress(role.id),
+    id: role.id,
     prettyId: role.prettyId,
     wearer: getAddress(role.wearer),
     name: role.name,
     description: role.description,
-    smartAddress: role.smartAddress,
+    smartAddress: zeroAddress,
     payments: role.payments?.map(payment => mapSablierPaymentFormValuesToSablierPayment(payment)),
   };
 };

From e38901aa758a9d8adea3519e6b2e657f9924bf0c Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Thu, 22 Aug 2024 16:54:03 -0400
Subject: [PATCH 18/46] wip

---
 src/components/pages/Roles/types.tsx |   6 -
 src/hooks/utils/useCreateRoles.ts    | 174 ++++++++++++++++++---------
 2 files changed, 117 insertions(+), 63 deletions(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index ee3900f820..be43e2b429 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -107,9 +107,3 @@ export interface RoleFormValues {
   roleEditing?: RoleHatFormValue; // is this here to "indicate" which role's payments are "currently" being edited?
   customNonce?: number;
 }
-
-export interface HatWearerChangedParams {
-  id: Address;
-  currentWearer: Address;
-  newWearer: Address;
-}
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index d02f535d19..d49042beab 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -14,8 +14,8 @@ import HatsAccount1ofNAbi from '../../assets/abi/HatsAccount1ofN';
 import {
   BaseSablierStream,
   EditBadgeStatus,
+  EditedRole,
   HatStruct,
-  HatWearerChangedParams,
   RoleFormValues,
   RoleHatFormValueEdited,
   SablierPayment,
@@ -43,43 +43,45 @@ const hatsDetailsBuilder = (data: { name: string; description: string }) => {
   });
 };
 
-const identifyAndPrepareAddedHats = (
+const identifyAndPrepareAddedHats = async (
   modifiedHats: RoleHatFormValueEdited[],
-  // hatsTree: DecentTree | null | undefined,
   uploadHatDescription: (hatDescription: string) => Promise<string>,
 ) => {
-  return Promise.all(
+  let roleHatFormValuesPlus: (RoleHatFormValueEdited & { wearer: Address; details: string })[] = [];
+
+  const hatStructs = await Promise.all(
     modifiedHats
-      .filter(hat => hat.editedRole.status === EditBadgeStatus.New)
-      .map(async hat => {
-        if (hat.name === undefined || hat.description === undefined) {
+      .filter(formHat => formHat.editedRole.status === EditBadgeStatus.New)
+      .map(async formHat => {
+        if (formHat.name === undefined || formHat.description === undefined) {
           throw new Error('Hat name or description of added hat is undefined.');
         }
 
-        if (hat.wearer === undefined) {
+        if (formHat.wearer === undefined) {
           throw new Error('Hat wearer of added hat is undefined.');
         }
 
         const details = await uploadHatDescription(
           hatsDetailsBuilder({
-            name: hat.name,
-            description: hat.description,
+            name: formHat.name,
+            description: formHat.description,
           }),
         );
 
         const newHat: HatStruct = {
-          // eligibility: hatsTree?.topHat.smartAddress,
-          // toggle: hatsTree?.topHat.smartAddress,
           maxSupply: 1,
           details,
           imageURI: '',
           isMutable: true,
-          wearer: getAddress(hat.wearer),
+          wearer: getAddress(formHat.wearer),
         };
 
+        roleHatFormValuesPlus.push({ ...formHat, wearer: getAddress(formHat.wearer), details });
         return newHat;
       }),
   );
+
+  return [hatStructs, roleHatFormValuesPlus] as const;
 };
 
 const identifyAndPrepareRemovedHats = (modifiedHats: RoleHatFormValueEdited[]) => {
@@ -114,8 +116,8 @@ const identifyAndPrepareMemberChangedHats = (
         throw new Error("Couldn't find existing Hat for member changed Hat.");
       }
 
-      const hatWearerChanged: HatWearerChangedParams = {
-        id: hat.id,
+      const hatWearerChanged = {
+        id: currentHat.id,
         currentWearer: getAddress(currentHat.wearer),
         newWearer: getAddress(hat.wearer),
       };
@@ -128,30 +130,36 @@ const identifyAndPrepareMemberChangedHats = (
 const identifyAndPrepareRoleDetailsChangedHats = (
   modifiedHats: RoleHatFormValueEdited[],
   uploadHatDescription: (hatDescription: string) => Promise<string>,
+  getHat: (hatId: Hex) => DecentRoleHat | null,
 ) => {
   return Promise.all(
     modifiedHats
       .filter(
-        hat =>
-          hat.editedRole.status === EditBadgeStatus.Updated &&
-          (hat.editedRole.fieldNames.includes('roleName') ||
-            hat.editedRole.fieldNames.includes('roleDescription')),
+        formHat =>
+          formHat.editedRole.status === EditBadgeStatus.Updated &&
+          (formHat.editedRole.fieldNames.includes('roleName') ||
+            formHat.editedRole.fieldNames.includes('roleDescription')),
       )
-      .map(async hat => {
-        if (hat.id === undefined) {
+      .map(async formHat => {
+        if (formHat.id === undefined) {
           throw new Error('Hat ID of existing hat is undefined.');
         }
 
-        if (hat.name === undefined || hat.description === undefined) {
+        if (formHat.name === undefined || formHat.description === undefined) {
           throw new Error('Hat name or description of existing hat is undefined.');
         }
 
+        const currentHat = getHat(formHat.id);
+        if (currentHat === null) {
+          throw new Error("Couldn't find existing Hat for details changed Hat.");
+        }
+
         return {
-          id: hat.id,
+          id: currentHat.id,
           details: await uploadHatDescription(
             hatsDetailsBuilder({
-              name: hat.name,
-              description: hat.description,
+              name: formHat.name,
+              description: formHat.description,
             }),
           ),
         };
@@ -161,7 +169,6 @@ const identifyAndPrepareRoleDetailsChangedHats = (
 
 const identifyAndPrepareEditedPaymentStreams = (
   modifiedHats: RoleHatFormValueEdited[],
-  getPayment: (hatId: Hex, streamId: string) => SablierPayment | null,
   getHat: (hatId: Hex) => DecentRoleHat | null,
 ) => {
   return modifiedHats.flatMap(formHat => {
@@ -170,35 +177,77 @@ const identifyAndPrepareEditedPaymentStreams = (
       throw new Error("Couldn't find existing Hat for edited payment stream Hat.");
     }
 
-    const payments = formHat.payments?.filter(payment => !!payment.streamId) || [];
+    if (formHat.payments === undefined) {
+      return [];
+    }
 
-    return payments
-      .filter(payment => {
-        if (payment.streamId === undefined) {
-          return false;
-        }
-        const originalPayment = getPayment(formHat.id, payment.streamId);
-        return !isEqual(payment, originalPayment);
-      })
+    const payments = formHat.payments
+      .filter(payment => !!payment.streamId)
       .map(payment => ({
         recipient: currentHat.smartAddress,
         payment,
       }));
+
+    return payments;
+  });
+};
+
+const identifyAndPrepareAddedPaymentStreamsOnNewHats = (
+  modifiedHats: RoleHatFormValueEdited[],
+  addedHatsWithIds: {
+    id: bigint;
+    smartAddress: `0x${string}`;
+    editedRole: EditedRole;
+    wearer: `0x${string}`;
+    payments?: SablierPaymentFormValues[];
+    roleEditingPaymentIndex?: number;
+    prettyId?: string | undefined;
+    name?: string | undefined;
+    description?: string | undefined;
+    details: string;
+  }[],
+) => {
+  return modifiedHats.flatMap(formHat => {
+    if (formHat.payments === undefined || formHat.editedRole.status !== EditBadgeStatus.New) {
+      return [];
+    }
+
+    const payments = formHat.payments.filter(payment => !payment.streamId);
+
+    const matchingAddedHat = addedHatsWithIds.find(addedHat => addedHat.id === formHat.id);
+
+    return {
+      ...modifiedHat,
+      smartAddress: matchingAddedHat ? matchingAddedHat.smartAddress : undefined,
+    };
+
+    return payments.map(payment => ({
+      recipient: formHat.smartAddress,
+      payment,
+    }));
   });
 };
 
-const identifyAndPrepareAddedPaymentStreams = (
+const identifyAndPrepareAddedPaymentStreamsOnExistingHats = (
   modifiedHats: RoleHatFormValueEdited[],
   getHat: (hatId: Hex) => DecentRoleHat | null,
 ) => {
   return modifiedHats.flatMap(formHat => {
+    if (formHat.payments === undefined) {
+      return [];
+    }
+
+    const payments = formHat.payments.filter(payment => !payment.streamId);
+
+    if (payments.length === 0) {
+      return [];
+    }
+
     const currentHat = getHat(formHat.id);
     if (currentHat === null) {
-      throw new Error("Couldn't find existing Hat for added payment stream Hat.");
+      throw new Error("Couldn't find existing Hat for added payment stream on existing Hat.");
     }
 
-    const payments = formHat.payments?.filter(payment => !payment.streamId) || [];
-
     return payments.map(payment => ({
       recipient: currentHat.smartAddress,
       payment,
@@ -257,7 +306,7 @@ export default function useCreateRoles() {
   const {
     node: { safe, daoAddress, daoName },
   } = useFractal();
-  const { hatsTree, hatsTreeId, getHat, getPayment } = useRolesStore();
+  const { hatsTree, hatsTreeId, getHat } = useRolesStore();
   const {
     addressPrefix,
     chain,
@@ -397,7 +446,11 @@ export default function useCreateRoles() {
       proposalMetadata: CreateProposalMetadata,
       addedHats: (HatStruct & { smartAddress: Address; id: bigint })[],
       removedHatIds: Hex[],
-      memberChangedHats: HatWearerChangedParams[],
+      memberChangedHats: {
+        id: Address;
+        currentWearer: Address;
+        newWearer: Address;
+      }[],
       roleDetailsChangedHats: {
         id: Hex;
         details: string;
@@ -757,7 +810,7 @@ export default function useCreateRoles() {
         throw new Error('Cannot create Roles proposal without known Safe');
       }
 
-      // filter to hats that have been modified (ie includes `editedRole` prop)
+      // filter to hats that have been modified, or whose payments have been modified (ie includes `editedRole` prop)
       const modifiedHats: RoleHatFormValueEdited[] = values.hats
         .map(hat => {
           if (hat.editedRole === undefined) {
@@ -768,21 +821,13 @@ export default function useCreateRoles() {
         .filter(hat => hat !== null);
 
       try {
-        const addedHats = await identifyAndPrepareAddedHats(modifiedHats, uploadHatDescription);
-        const removedHatIds = identifyAndPrepareRemovedHats(modifiedHats);
-        const memberChangedHats = identifyAndPrepareMemberChangedHats(modifiedHats, getHat);
-        const roleDetailsChangedHats = await identifyAndPrepareRoleDetailsChangedHats(
+        const [addedHats, addedHatsRolesValues] = await identifyAndPrepareAddedHats(
           modifiedHats,
           uploadHatDescription,
         );
-        const editedPaymentStreams = identifyAndPrepareEditedPaymentStreams(
-          modifiedHats,
-          getPayment,
-          getHat,
-        );
-        const addedPaymentStreams = identifyAndPrepareAddedPaymentStreams(modifiedHats, getHat);
 
         let proposalData: ProposalExecuteData;
+
         if (!hatsTreeId) {
           // This safe has no top hat, so we prepare a proposal to create one. This will also create an admin hat,
           // along with any other hats that are added.
@@ -791,11 +836,9 @@ export default function useCreateRoles() {
           if (!hatsTree) {
             throw new Error('Cannot edit Roles without a HatsTree');
           }
-          // This safe has a top hat, so we prepare a proposal to edit the hats that have changed.
-
-          // Convert addedHats to include id and smartAddress
+          // Convert addedHats to include predicted id and smartAddress
           const addedHatsWithIds = await Promise.all(
-            addedHats.map(async (hat, index) => {
+            addedHatsRolesValues.map(async (hat, index) => {
               const hatId = predictHatId({
                 adminHatId: hatsTree.adminHat.id,
                 hatsCount: hatsTree.roleHats.length + index,
@@ -811,12 +854,30 @@ export default function useCreateRoles() {
               });
               return {
                 ...hat,
+                // formId: hat.formId,
                 id: hatId,
                 smartAddress,
               };
             }),
           );
 
+          const removedHatIds = identifyAndPrepareRemovedHats(modifiedHats);
+          const memberChangedHats = identifyAndPrepareMemberChangedHats(modifiedHats, getHat);
+          const roleDetailsChangedHats = await identifyAndPrepareRoleDetailsChangedHats(
+            modifiedHats,
+            uploadHatDescription,
+            getHat,
+          );
+          const editedPaymentStreams = identifyAndPrepareEditedPaymentStreams(modifiedHats, getHat);
+
+          const addedPaymentStreamsOnNewHats = identifyAndPrepareAddedPaymentStreamsOnNewHats(
+            modifiedHats,
+            addedHatsWithIds,
+          );
+
+          const addedPaymentStreamsOnExistingHats =
+            identifyAndPrepareAddedPaymentStreamsOnExistingHats(modifiedHats, getHat);
+
           proposalData = prepareEditHatsProposalData(
             values.proposalMetadata,
             addedHatsWithIds,
@@ -849,7 +910,6 @@ export default function useCreateRoles() {
       decentHatsMasterCopy,
       erc6551Registry,
       getHat,
-      getPayment,
       hatsAccount1ofNMasterCopy,
       hatsProtocol,
       hatsTree,

From 54c94a6ca50cfe894619fa01bbfa907650559888 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:00:40 -0400
Subject: [PATCH 19/46] role create proposal workflow typing updated

---
 src/components/pages/Roles/types.tsx        |  45 ++
 src/hooks/streams/useCreateSablierStream.ts |  97 ++--
 src/hooks/utils/useCreateRoles.ts           | 461 +++++++++-----------
 3 files changed, 288 insertions(+), 315 deletions(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index be43e2b429..3b12f9e605 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -107,3 +107,48 @@ export interface RoleFormValues {
   roleEditing?: RoleHatFormValue; // is this here to "indicate" which role's payments are "currently" being edited?
   customNonce?: number;
 }
+
+export type PreparedAddedHatsData = HatStruct & { id: bigint };
+
+export type PreparedMemberChangeData = {
+  id: Address;
+  currentWearer: Address;
+  newWearer: Address;
+};
+
+export type PreparedChangedRoleDetailsData = {
+  id: Hex;
+  details: string;
+};
+
+export type AddedHatsWithIds = {
+  id: bigint;
+  editedRole: EditedRole;
+  wearer: `0x${string}`;
+  payments?: SablierPaymentFormValues[];
+  roleEditingPaymentIndex?: number;
+  prettyId?: string | undefined;
+  name?: string | undefined;
+  description?: string | undefined;
+  details: string;
+  formId: `0x${string}`;
+};
+
+export type PreparedNewStreamData = {
+  recipient: Address;
+  startDateTs: number;
+  endDateTs: number;
+  cliffDateTs: number;
+  totalAmount: bigint;
+  assetAddress: Address;
+};
+
+/**
+ * Prepared Stream data with streamId
+ */
+export type PreparedEditedStreamData = PreparedNewStreamData & {
+  streamId: string;
+  roleHatId: bigint;
+  roleHatWearer: Address;
+  roleHatSmartAddress: Address;
+};
diff --git a/src/hooks/streams/useCreateSablierStream.ts b/src/hooks/streams/useCreateSablierStream.ts
index 1a7e760255..364cfae4ec 100644
--- a/src/hooks/streams/useCreateSablierStream.ts
+++ b/src/hooks/streams/useCreateSablierStream.ts
@@ -1,20 +1,12 @@
 import groupBy from 'lodash.groupby';
 import { useCallback } from 'react';
-import { Address, Hex, encodeFunctionData, erc20Abi, getAddress, zeroAddress } from 'viem';
+import { Address, Hex, encodeFunctionData, erc20Abi, zeroAddress, getAddress } from 'viem';
 import SablierV2BatchAbi from '../../assets/abi/SablierV2Batch';
 import { SablierV2LockupLinearAbi } from '../../assets/abi/SablierV2LockupLinear';
-import { BaseSablierStream, SablierPaymentFormValues } from '../../components/pages/Roles/types';
+import { PreparedNewStreamData } from '../../components/pages/Roles/types';
 import { useFractal } from '../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
 
-type LinearStreamInputs = {
-  totalAmount: bigint;
-  recipient: Address;
-  startDate: Date;
-  endDate: Date;
-  cliffDate: Date | undefined;
-};
-
 export function convertStreamIdToBigInt(streamId: string) {
   // streamId is formatted as ${streamContractAddress}-${chainId}-${numericId}
   const lastDash = streamId.lastIndexOf('-');
@@ -59,14 +51,11 @@ export default function useCreateSablierStream() {
   );
 
   const prepareLinearStream = useCallback(
-    ({ totalAmount, recipient, startDate, endDate, cliffDate }: LinearStreamInputs) => {
-      const startDateTs = startDate.getTime();
-      const endDateTs = endDate.getTime();
+    ({ totalAmount, recipient, startDateTs, endDateTs, cliffDateTs }: PreparedNewStreamData) => {
       if (startDateTs >= endDateTs) {
         throw new Error('Start date of the stream can not be larger than end date');
       }
 
-      const cliffDateTs = cliffDate ? cliffDate.getTime() : 0;
       let cliffDuration = 0;
       if (cliffDateTs) {
         if (cliffDateTs <= startDateTs) {
@@ -90,84 +79,52 @@ export default function useCreateSablierStream() {
     [prepareBasicStreamData],
   );
 
-  const prepareFlushStreamTx = useCallback((stream: BaseSablierStream, to: Address) => {
-    if (!stream.streamId || !stream.contractAddress) {
-      throw new Error('Can not flush stream without streamId or contract address');
-    }
-
-    // @dev This function comes from "basic" SablierV2
-    // all the types of streams are inheriting from that
-    // so it's safe to rely on any stream ABI
-
-    const flushCalldata = encodeFunctionData({
-      abi: SablierV2LockupLinearAbi,
-      functionName: 'withdrawMax',
-      args: [convertStreamIdToBigInt(stream.streamId), to],
-    });
+  const prepareFlushStreamTx = useCallback(
+    (streamId: string, contractAddress: Address, to: Address) => {
+      // @dev This function comes from "basic" SablierV2
+      // all the types of streams are inheriting from that
+      // so it's safe to rely on any stream ABI
 
-    return { calldata: flushCalldata, targetAddress: stream.contractAddress };
-  }, []);
+      const flushCalldata = encodeFunctionData({
+        abi: SablierV2LockupLinearAbi,
+        functionName: 'withdrawMax',
+        args: [convertStreamIdToBigInt(streamId), to],
+      });
 
-  const prepareCancelStreamTx = useCallback((stream: BaseSablierStream) => {
-    if (!stream.streamId || !stream.contractAddress) {
-      throw new Error('Can not flush stream without streamId or contract address');
-    }
+      return { calldata: flushCalldata, targetAddress: contractAddress };
+    },
+    [],
+  );
 
+  const prepareCancelStreamTx = useCallback((streamId: string, targetAddress: Address) => {
     // @dev This function comes from "basic" SablierV2
     // all the types of streams are inheriting from that
     // so it's safe to rely on any stream ABI
     const flushCalldata = encodeFunctionData({
       abi: SablierV2LockupLinearAbi,
       functionName: 'cancel',
-      args: [convertStreamIdToBigInt(stream.streamId)],
+      args: [convertStreamIdToBigInt(streamId)],
     });
 
-    return { calldata: flushCalldata, targetAddress: stream.contractAddress };
+    return { calldata: flushCalldata, targetAddress };
   }, []);
 
   const prepareBatchLinearStreamCreation = useCallback(
-    (
-      paymentStreams: {
-        recipient: Address;
-        payment: SablierPaymentFormValues;
-      }[],
-    ) => {
+    (paymentStreams: PreparedNewStreamData[]) => {
       const preparedStreamCreationTransactions: { calldata: Hex; targetAddress: Address }[] = [];
       const preparedTokenApprovalsTransactions: { calldata: Hex; targetAddress: Address }[] = [];
 
-      const groupedStreams = groupBy(paymentStreams, 'payment.asset.address');
+      // @todo SablierV2Batch contract groups streams by asset address
+      const groupedStreams = groupBy(paymentStreams, 'assetAddress');
       Object.keys(groupedStreams).forEach(assetAddress => {
         const assembledStreams: ReturnType<typeof prepareLinearStream>[] = [];
         const streams = groupedStreams[assetAddress];
-        const tokenAddress = getAddress(assetAddress);
         let totalStreamsAmount = 0n;
-
+        const tokenAddress = getAddress(assetAddress);
         streams.forEach(streamData => {
-          if (
-            !streamData.payment.amount?.bigintValue ||
-            streamData.payment.amount.bigintValue <= 0n ||
-            !streamData.payment.startDate ||
-            !streamData.payment.endDate
-          ) {
-            console.error(
-              'Error creating linear stream - stream amount must be bigger than 0, startDate and endDate must be set',
-              streamData,
-            );
-            throw new Error(
-              'Stream total amount must be greater than 0, startDate and endDate must be set',
-            );
-          }
-          totalStreamsAmount += streamData.payment.amount.bigintValue;
-
-          assembledStreams.push(
-            prepareLinearStream({
-              recipient: streamData.recipient,
-              startDate: streamData.payment.startDate,
-              endDate: streamData.payment.endDate,
-              cliffDate: streamData.payment.cliffDate,
-              totalAmount: streamData.payment.amount.bigintValue,
-            }),
-          );
+          totalStreamsAmount += streamData.totalAmount;
+
+          assembledStreams.push(prepareLinearStream(streamData));
         });
 
         preparedStreamCreationTransactions.push({
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index d49042beab..58fbac3f22 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -1,5 +1,5 @@
 import { FormikHelpers } from 'formik';
-import isEqual from 'lodash.isequal';
+import { isEqual } from 'lodash';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -12,14 +12,17 @@ import GnosisSafeL2 from '../../assets/abi/GnosisSafeL2';
 import { HatsAbi } from '../../assets/abi/HatsAbi';
 import HatsAccount1ofNAbi from '../../assets/abi/HatsAccount1ofN';
 import {
-  BaseSablierStream,
+  AddedHatsWithIds,
   EditBadgeStatus,
-  EditedRole,
   HatStruct,
+  PreparedAddedHatsData,
+  PreparedChangedRoleDetailsData,
+  PreparedMemberChangeData,
+  PreparedNewStreamData,
+  PreparedEditedStreamData,
   RoleFormValues,
   RoleHatFormValueEdited,
   SablierPayment,
-  SablierPaymentFormValues,
 } from '../../components/pages/Roles/types';
 import { DAO_ROUTES } from '../../constants/routes';
 import { useFractal } from '../../providers/App/AppProvider';
@@ -170,7 +173,8 @@ const identifyAndPrepareRoleDetailsChangedHats = (
 const identifyAndPrepareEditedPaymentStreams = (
   modifiedHats: RoleHatFormValueEdited[],
   getHat: (hatId: Hex) => DecentRoleHat | null,
-) => {
+  getPayment: (hatId: Hex, streamId: string) => SablierPayment | null,
+): PreparedEditedStreamData[] => {
   return modifiedHats.flatMap(formHat => {
     const currentHat = getHat(formHat.id);
     if (currentHat === null) {
@@ -181,78 +185,80 @@ const identifyAndPrepareEditedPaymentStreams = (
       return [];
     }
 
-    const payments = formHat.payments
-      .filter(payment => !!payment.streamId)
-      .map(payment => ({
-        recipient: currentHat.smartAddress,
-        payment,
-      }));
-
-    return payments;
-  });
-};
-
-const identifyAndPrepareAddedPaymentStreamsOnNewHats = (
-  modifiedHats: RoleHatFormValueEdited[],
-  addedHatsWithIds: {
-    id: bigint;
-    smartAddress: `0x${string}`;
-    editedRole: EditedRole;
-    wearer: `0x${string}`;
-    payments?: SablierPaymentFormValues[];
-    roleEditingPaymentIndex?: number;
-    prettyId?: string | undefined;
-    name?: string | undefined;
-    description?: string | undefined;
-    details: string;
-  }[],
-) => {
-  return modifiedHats.flatMap(formHat => {
-    if (formHat.payments === undefined || formHat.editedRole.status !== EditBadgeStatus.New) {
-      return [];
-    }
-
-    const payments = formHat.payments.filter(payment => !payment.streamId);
-
-    const matchingAddedHat = addedHatsWithIds.find(addedHat => addedHat.id === formHat.id);
-
-    return {
-      ...modifiedHat,
-      smartAddress: matchingAddedHat ? matchingAddedHat.smartAddress : undefined,
-    };
+    return formHat.payments
+      .filter(payment => {
+        if (payment.streamId === undefined) {
+          return false;
+        }
+        // @note remove payments that haven't been edited
+        const originalPayment = getPayment(formHat.id, payment.streamId);
+        return !isEqual(payment, originalPayment);
+      })
+      .map(payment => {
+        const sablierPayment = mapSablierPaymentFormValuesToSablierPayment(payment);
+        // @note payment amount should not be 0 or undefined
+        if (!sablierPayment.amount?.bigintValue || sablierPayment.amount.bigintValue > 0n) {
+          throw new Error('Payment amount required.');
+        }
 
-    return payments.map(payment => ({
-      recipient: formHat.smartAddress,
-      payment,
-    }));
+        return {
+          streamId: sablierPayment.streamId,
+          recipient: currentHat.smartAddress,
+          startDateTs: sablierPayment.startDate.getTime(),
+          endDateTs: sablierPayment.endDate.getTime(),
+          cliffDateTs: sablierPayment.cliffDate?.getTime() ?? 0,
+          totalAmount: sablierPayment.amount.bigintValue,
+          assetAddress: sablierPayment.asset.address,
+          roleHatId: BigInt(currentHat.id),
+          roleHatWearer: currentHat.wearer,
+          roleHatSmartAddress: currentHat.smartAddress,
+        };
+      });
   });
 };
 
-const identifyAndPrepareAddedPaymentStreamsOnExistingHats = (
+const identifyAndPrepareAddedPaymentStreams = async (
   modifiedHats: RoleHatFormValueEdited[],
+  addedHatsWithIds: AddedHatsWithIds[],
   getHat: (hatId: Hex) => DecentRoleHat | null,
-) => {
-  return modifiedHats.flatMap(formHat => {
-    if (formHat.payments === undefined) {
-      return [];
-    }
-
-    const payments = formHat.payments.filter(payment => !payment.streamId);
-
-    if (payments.length === 0) {
-      return [];
-    }
-
-    const currentHat = getHat(formHat.id);
-    if (currentHat === null) {
-      throw new Error("Couldn't find existing Hat for added payment stream on existing Hat.");
-    }
+  predictSmartAccount: (hatId: bigint) => Promise<Address>,
+): Promise<PreparedNewStreamData[]> => {
+  const preparedStreamDataMapped = await Promise.all(
+    modifiedHats.map(async formHat => {
+      if (formHat.payments === undefined || formHat.editedRole.status !== EditBadgeStatus.New) {
+        return [];
+      }
 
-    return payments.map(payment => ({
-      recipient: currentHat.smartAddress,
-      payment,
-    }));
-  });
+      const payments = formHat.payments.filter(payment => !payment.streamId);
+      let recipientAddress: Address;
+      const existingRoleHat = getHat(formHat.id);
+      if (!!existingRoleHat) {
+        recipientAddress = existingRoleHat.smartAddress;
+      } else {
+        const addedRoleHat = addedHatsWithIds.find(addedHat => addedHat.formId === formHat.id);
+        if (!addedRoleHat) {
+          throw new Error('Could not find added role hat for added payment stream.');
+        }
+        recipientAddress = await predictSmartAccount(addedRoleHat.id);
+      }
+      return payments.map(payment => {
+        const sablierPayment = mapSablierPaymentFormValuesToSablierPayment(payment);
+        // @note payment amount should not be 0 or undefined
+        if (!sablierPayment.amount?.bigintValue || sablierPayment.amount.bigintValue > 0n) {
+          throw new Error('Payment amount required.');
+        }
+        return {
+          recipient: recipientAddress,
+          startDateTs: sablierPayment.startDate.getTime(),
+          endDateTs: sablierPayment.endDate.getTime(),
+          cliffDateTs: sablierPayment.cliffDate?.getTime() ?? 0,
+          totalAmount: sablierPayment.amount.bigintValue,
+          assetAddress: sablierPayment.asset.address,
+        };
+      });
+    }),
+  );
+  return preparedStreamDataMapped.flat();
 };
 
 const prepareAddHatsTxArgs = (addedHats: HatStruct[], adminHatId: Hex, topHatAccount: Address) => {
@@ -285,28 +291,11 @@ const prepareAddHatsTxArgs = (addedHats: HatStruct[], adminHatId: Hex, topHatAcc
   ] as const;
 };
 
-const prepareMintHatsTxArgs = (addedHats: HatStruct[], adminHatId: Hex, hatsCount: number) => {
-  const hatIds: bigint[] = [];
-  const wearers: Address[] = [];
-
-  addedHats.forEach((hat, i) => {
-    const predictedHatId = predictHatId({
-      adminHatId,
-      // Each predicted hat id is based on the current hat count, plus however many hat id have been predicted so far
-      hatsCount: hatsCount + i,
-    });
-    hatIds.push(predictedHatId);
-    wearers.push(hat.wearer);
-  });
-
-  return [hatIds, wearers] as const;
-};
-
 export default function useCreateRoles() {
   const {
     node: { safe, daoAddress, daoName },
   } = useFractal();
-  const { hatsTree, hatsTreeId, getHat } = useRolesStore();
+  const { hatsTree, hatsTreeId, getHat, getPayment } = useRolesStore();
   const {
     addressPrefix,
     chain,
@@ -341,6 +330,31 @@ export default function useCreateRoles() {
     [ipfsClient],
   );
 
+  const predictSmartAccount = useCallback(
+    async (hatId: bigint) => {
+      if (!publicClient) {
+        throw new Error('Public client is not set');
+      }
+      return predictAccountAddress({
+        implementation: hatsAccount1ofNMasterCopy,
+        chainId: BigInt(chain.id),
+        tokenContract: hatsProtocol,
+        tokenId: hatId,
+        registryAddress: erc6551Registry,
+        publicClient,
+        decentHats: getAddress(decentHatsMasterCopy),
+      });
+    },
+    [
+      publicClient,
+      hatsAccount1ofNMasterCopy,
+      chain.id,
+      hatsProtocol,
+      erc6551Registry,
+      decentHatsMasterCopy,
+    ],
+  );
+
   const prepareCreateTopHatProposalData = useCallback(
     async (proposalMetadata: CreateProposalMetadata, addedHats: HatStruct[]) => {
       if (!daoAddress) {
@@ -418,8 +432,8 @@ export default function useCreateRoles() {
   );
 
   const prepareHatsAccountFlushExecData = useCallback(
-    (stream: BaseSablierStream, wearer: Address) => {
-      const flushStreamTx = prepareFlushStreamTx(stream, wearer);
+    (streamId: string, contractAddress: Address, wearer: Address) => {
+      const flushStreamTx = prepareFlushStreamTx(streamId, contractAddress, wearer);
       const wrappedFlushStreamTx = encodeFunctionData({
         abi: HatsAccount1ofNAbi,
         functionName: 'execute',
@@ -432,9 +446,13 @@ export default function useCreateRoles() {
   );
 
   const prepareHatFlushAndCancelPayment = useCallback(
-    (stream: BaseSablierStream, wearer: Address) => {
-      const cancelStreamTx = prepareCancelStreamTx(stream);
-      const wrappedFlushStreamTx = prepareHatsAccountFlushExecData(stream, wearer);
+    (streamId: string, contractAddress: Address, wearer: Address) => {
+      const cancelStreamTx = prepareCancelStreamTx(streamId, contractAddress);
+      const wrappedFlushStreamTx = prepareHatsAccountFlushExecData(
+        streamId,
+        contractAddress,
+        wearer,
+      );
 
       return { wrappedFlushStreamTx, cancelStreamTx };
     },
@@ -444,32 +462,19 @@ export default function useCreateRoles() {
   const prepareEditHatsProposalData = useCallback(
     (
       proposalMetadata: CreateProposalMetadata,
-      addedHats: (HatStruct & { smartAddress: Address; id: bigint })[],
+      addedHats: PreparedAddedHatsData[],
       removedHatIds: Hex[],
-      memberChangedHats: {
-        id: Address;
-        currentWearer: Address;
-        newWearer: Address;
-      }[],
-      roleDetailsChangedHats: {
-        id: Hex;
-        details: string;
-      }[],
-      editedPaymentStreams: {
-        recipient: Address;
-        payment: SablierPaymentFormValues;
-      }[],
-      addedPaymentStreams: {
-        recipient: Address;
-        payment: SablierPaymentFormValues;
-      }[],
+      memberChangedHats: PreparedMemberChangeData[],
+      roleDetailsChangedHats: PreparedChangedRoleDetailsData[],
+      editedPaymentStreams: PreparedEditedStreamData[],
+      addedPaymentStreams: PreparedNewStreamData[],
     ) => {
       if (!hatsTree || !daoAddress) {
         throw new Error('Can not edit hats without Hats Tree!');
       }
 
-      const adminHatId = hatsTree.adminHat.id;
       const topHatAccount = hatsTree.topHat.smartAddress;
+      const adminHatId = hatsTree.adminHat.id;
 
       const createAndMintHatsTxs: Hex[] = [];
       let removeHatTxs: Hex[] = [];
@@ -491,20 +496,15 @@ export default function useCreateRoles() {
           args: prepareAddHatsTxArgs(addedHats, adminHatId, topHatAccount),
         });
 
-        // Finally, prepare a single tx to mint all the hats to the wearers
-        const [hatIds, wearers] = prepareMintHatsTxArgs(
-          addedHats,
-          adminHatId,
-          hatsTree.roleHatsTotalCount,
-        );
         const mintHatsTx = encodeFunctionData({
           abi: HatsAbi,
           functionName: 'batchMintHats',
-          args: [hatIds, wearers],
+          // @note hatIds[], wearers[]
+          args: [addedHats.map(h => h.id), addedHats.map(h => h.wearer)],
         });
 
         // finally, finally create smart account for hats.
-        const createSmartAccountCallDatas = addedHats.map((_, i) => {
+        const createSmartAccountCallDatas = addedHats.map(hat => {
           return encodeFunctionData({
             abi: ERC6551RegistryAbi,
             functionName: 'createAccount',
@@ -513,7 +513,7 @@ export default function useCreateRoles() {
               getERC6551RegistrySalt(BigInt(chain.id), getAddress(decentHatsMasterCopy)),
               BigInt(chain.id),
               hatsProtocol,
-              hatIds[i],
+              hat.id,
             ],
           });
         });
@@ -539,7 +539,8 @@ export default function useCreateRoles() {
               roleHat.payments.forEach(payment => {
                 if (payment?.streamId) {
                   const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
-                    payment,
+                    payment.streamId,
+                    payment.asset.address,
                     roleHat.wearer,
                   );
                   wrappedFlushStreamTxs.push(wrappedFlushStreamTx);
@@ -600,7 +601,8 @@ export default function useCreateRoles() {
               const payment = roleHat.payments[0];
               if (payment?.streamId) {
                 const wrappedFlushStreamTx = prepareHatsAccountFlushExecData(
-                  payment,
+                  payment.streamId,
+                  payment.asset.address,
                   roleHat.wearer,
                 );
                 hatPaymentWearerChangedTxs.push({
@@ -645,103 +647,80 @@ export default function useCreateRoles() {
         });
       }
 
-      const preparedPaymentTransactions = prepareBatchLinearStreamCreation(addedPaymentStreams);
-
-      addedPaymentStreams.forEach((_, i) => {
-        hatPaymentAddedTxs.push(preparedPaymentTransactions.preparedTokenApprovalsTransactions[i]);
-        hatPaymentAddedTxs.push(preparedPaymentTransactions.preparedStreamCreationTransactions[i]);
-      });
+      if (addedPaymentStreams.length) {
+        const preparedPaymentTransactions = prepareBatchLinearStreamCreation(addedPaymentStreams);
+        addedPaymentStreams.forEach((_, i) => {
+          hatPaymentAddedTxs.push(
+            preparedPaymentTransactions.preparedTokenApprovalsTransactions[i],
+          );
+          hatPaymentAddedTxs.push(
+            preparedPaymentTransactions.preparedStreamCreationTransactions[i],
+          );
+        });
+      }
 
+      // @todo start here
       if (editedPaymentStreams.length) {
         const paymentCancelTxs: { calldata: Hex; targetAddress: Address }[] = [];
+        editedPaymentStreams.forEach(paymentStream => {
+          const preparedHatFlushAndCancelTxs = prepareHatFlushAndCancelPayment(
+            paymentStream.streamId,
+            paymentStream.assetAddress,
+            paymentStream.roleHatWearer,
+          );
+          paymentCancelTxs.push({
+            calldata: encodeFunctionData({
+              abi: HatsAbi,
+              functionName: 'transferHat',
+              args: [BigInt(paymentStream.roleHatId), paymentStream.roleHatWearer, daoAddress],
+            }),
+            targetAddress: hatsProtocol,
+          });
+          paymentCancelTxs.push({
+            calldata: preparedHatFlushAndCancelTxs.wrappedFlushStreamTx,
+            targetAddress: paymentStream.roleHatSmartAddress,
+          });
+          paymentCancelTxs.push(preparedHatFlushAndCancelTxs.cancelStreamTx);
+          paymentCancelTxs.push({
+            calldata: encodeFunctionData({
+              abi: HatsAbi,
+              functionName: 'transferHat',
+              args: [BigInt(paymentStream.roleHatId), daoAddress, paymentStream.roleHatWearer],
+            }),
+            targetAddress: hatsProtocol,
+          });
 
-        editedPaymentStreams.forEach(role =>
-          (role.payments ?? []).forEach(payment => {
-            if (role.wearer === undefined) {
-              throw new Error('Hat wearer of edited payroll role is undefined.');
-            }
-
-            if (role.smartAddress === undefined) {
-              throw new Error('Hat smart address of edited payroll role is undefined');
-            }
-
-            if (payment.streamId && payment.contractAddress && payment.amount && payment.asset) {
-              const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
-                {
-                  streamId: payment.streamId,
-                  contractAddress: payment.contractAddress,
-                  amount: payment.amount,
-                  asset: payment.asset,
-                },
-                getAddress(role.wearer),
-              );
-              paymentCancelTxs.push({
-                calldata: encodeFunctionData({
-                  abi: HatsAbi,
-                  functionName: 'transferHat',
-                  args: [BigInt(role.id), getAddress(role.wearer), daoAddress],
-                }),
-                targetAddress: hatsProtocol,
-              });
-              paymentCancelTxs.push({
-                calldata: wrappedFlushStreamTx,
-                targetAddress: role.smartAddress,
-              });
-              paymentCancelTxs.push(cancelStreamTx);
-              paymentCancelTxs.push({
-                calldata: encodeFunctionData({
-                  abi: HatsAbi,
-                  functionName: 'transferHat',
-                  args: [BigInt(role.id), daoAddress, getAddress(role.wearer)],
-                }),
-                targetAddress: hatsProtocol,
-              });
-            }
-
-            const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
-              mapSablierPaymentFormValuesToSablierPayment(payment),
-              getAddress(role.wearer),
-            );
-            paymentCancelTxs.push({
-              calldata: encodeFunctionData({
-                abi: HatsAbi,
-                functionName: 'transferHat',
-                args: [BigInt(role.id), getAddress(role.wearer), daoAddress],
-              }),
-              targetAddress: hatsProtocol,
-            });
-            paymentCancelTxs.push({
-              calldata: wrappedFlushStreamTx,
-              targetAddress: role.smartAddress,
-            });
-            paymentCancelTxs.push(cancelStreamTx);
-            paymentCancelTxs.push({
-              calldata: encodeFunctionData({
-                abi: HatsAbi,
-                functionName: 'transferHat',
-                args: [BigInt(role.id), daoAddress, getAddress(role.wearer)],
-              }),
-              targetAddress: hatsProtocol,
-            });
-          }),
-        );
-        const streamsData = editedPaymentStreams.flatMap(role =>
-          (role.payments ?? []).map(payment => payment),
-        );
-        const recipients = editedPaymentStreams.flatMap(role =>
-          (role.payments ?? []).map(() => {
-            if (role.smartAddress === undefined) {
-              throw new Error('Hat smart address for new payment on role is undefined.');
-            }
-            return role.smartAddress;
-          }),
-        );
-        const preparedPaymentTransactions = prepareBatchLinearStreamCreation(
-          streamsData,
-          recipients,
-        );
+          const { wrappedFlushStreamTx, cancelStreamTx } = prepareHatFlushAndCancelPayment(
+            paymentStream.streamId,
+            paymentStream.assetAddress,
+            paymentStream.roleHatWearer,
+          );
+          paymentCancelTxs.push({
+            calldata: encodeFunctionData({
+              abi: HatsAbi,
+              functionName: 'transferHat',
+              args: [paymentStream.roleHatId, paymentStream.roleHatWearer, daoAddress],
+            }),
+            targetAddress: hatsProtocol,
+          });
+          paymentCancelTxs.push({
+            calldata: wrappedFlushStreamTx,
+            targetAddress: paymentStream.roleHatSmartAddress,
+          });
+          paymentCancelTxs.push(cancelStreamTx);
+          paymentCancelTxs.push({
+            calldata: encodeFunctionData({
+              abi: HatsAbi,
+              functionName: 'transferHat',
+              args: [paymentStream.roleHatId, daoAddress, paymentStream.roleHatWearer],
+            }),
+            targetAddress: hatsProtocol,
+          });
+        });
 
-        streamsData.forEach((_, i) => {
+        const preparedPaymentTransactions = prepareBatchLinearStreamCreation(editedPaymentStreams);
+        hatPaymentEditedTxs.push(...paymentCancelTxs);
+        editedPaymentStreams.forEach((_, i) => {
           hatPaymentEditedTxs.push(
             preparedPaymentTransactions.preparedTokenApprovalsTransactions[i],
           );
@@ -820,6 +799,7 @@ export default function useCreateRoles() {
         })
         .filter(hat => hat !== null);
 
+      // find all new hats and prepare them for creation
       try {
         const [addedHats, addedHatsRolesValues] = await identifyAndPrepareAddedHats(
           modifiedHats,
@@ -836,27 +816,18 @@ export default function useCreateRoles() {
           if (!hatsTree) {
             throw new Error('Cannot edit Roles without a HatsTree');
           }
-          // Convert addedHats to include predicted id and smartAddress
+          // Convert addedHats to include predicted id
           const addedHatsWithIds = await Promise.all(
             addedHatsRolesValues.map(async (hat, index) => {
               const hatId = predictHatId({
                 adminHatId: hatsTree.adminHat.id,
                 hatsCount: hatsTree.roleHats.length + index,
               });
-              const smartAddress = await predictAccountAddress({
-                implementation: hatsAccount1ofNMasterCopy,
-                chainId: BigInt(chain.id),
-                tokenContract: hatsProtocol,
-                tokenId: hatId,
-                registryAddress: erc6551Registry,
-                publicClient,
-                decentHats: getAddress(decentHatsMasterCopy),
-              });
               return {
                 ...hat,
-                // formId: hat.formId,
                 id: hatId,
-                smartAddress,
+                // @note For new hats, a randomId is created for temporary indentification
+                formId: hat.id,
               };
             }),
           );
@@ -868,24 +839,27 @@ export default function useCreateRoles() {
             uploadHatDescription,
             getHat,
           );
-          const editedPaymentStreams = identifyAndPrepareEditedPaymentStreams(modifiedHats, getHat);
+          const editedPaymentStreams = identifyAndPrepareEditedPaymentStreams(
+            modifiedHats,
+            getHat,
+            getPayment,
+          );
 
-          const addedPaymentStreamsOnNewHats = identifyAndPrepareAddedPaymentStreamsOnNewHats(
+          const addedPaymentStreamsOnNewHats = await identifyAndPrepareAddedPaymentStreams(
             modifiedHats,
             addedHatsWithIds,
+            getHat,
+            predictSmartAccount,
           );
 
-          const addedPaymentStreamsOnExistingHats =
-            identifyAndPrepareAddedPaymentStreamsOnExistingHats(modifiedHats, getHat);
-
           proposalData = prepareEditHatsProposalData(
             values.proposalMetadata,
-            addedHatsWithIds,
+            addedHats.map((hat, index) => ({ ...hat, id: addedHatsWithIds[index].id })),
             removedHatIds,
             memberChangedHats,
             roleDetailsChangedHats,
             editedPaymentStreams,
-            addedPaymentStreams,
+            addedPaymentStreamsOnNewHats,
           );
         }
 
@@ -906,22 +880,19 @@ export default function useCreateRoles() {
       }
     },
     [
-      chain.id,
-      decentHatsMasterCopy,
-      erc6551Registry,
-      getHat,
-      hatsAccount1ofNMasterCopy,
-      hatsProtocol,
-      hatsTree,
+      safe,
       hatsTreeId,
+      hatsTree,
+      uploadHatDescription,
+      predictSmartAccount,
+      getHat,
+      getPayment,
+      submitProposal,
+      submitProposalSuccessCallback,
       prepareCreateTopHatProposalData,
       prepareEditHatsProposalData,
       publicClient,
-      safe,
-      submitProposal,
-      submitProposalSuccessCallback,
       t,
-      uploadHatDescription,
     ],
   );
 

From bbde6647b3d98999e29f631c65d1a5e86b418431 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:41:34 -0400
Subject: [PATCH 20/46] remove todo comment

---
 src/hooks/utils/useCreateRoles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 10094a68be..0d0e8de8f9 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -662,7 +662,6 @@ export default function useCreateRoles() {
         });
       }
 
-      // @todo start here
       if (editedPaymentStreams.length) {
         const paymentCancelTxs: { calldata: Hex; targetAddress: Address }[] = [];
         editedPaymentStreams.forEach(paymentStream => {

From dec42d52472913b7664376918f807a0ade45e4bd Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:48:16 -0400
Subject: [PATCH 21/46] run pretty

---
 src/models/FreezeGuardTxBuilder.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/models/FreezeGuardTxBuilder.ts b/src/models/FreezeGuardTxBuilder.ts
index a968d14576..739422bf06 100644
--- a/src/models/FreezeGuardTxBuilder.ts
+++ b/src/models/FreezeGuardTxBuilder.ts
@@ -124,7 +124,7 @@ export class FreezeGuardTxBuilder extends BaseTxBuilder {
     const parentStrategyAddress =
       this.parentStrategyType === VotingStrategyType.LINEAR_ERC721
         ? this.parentStrategyAddress
-        : (this.parentTokenAddress ?? this.parentAddress);
+        : this.parentTokenAddress ?? this.parentAddress;
     if (!this.parentAddress || !parentStrategyAddress) {
       throw new Error(
         'Error building contract call for setting up freeze voting - required addresses were not provided.',

From 6eda3288178d3bf791c9f729b48e1ea42cc23459 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:48:25 -0400
Subject: [PATCH 22/46] fix merge conflicts

---
 src/components/pages/Roles/RolePaymentDetails.tsx | 2 +-
 src/components/ui/modals/PaymentWithdrawModal.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
index 8653da94c9..4b3261a38c 100644
--- a/src/components/pages/Roles/RolePaymentDetails.tsx
+++ b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -92,7 +92,7 @@ export function RolePaymentDetails({
       return true;
     }
     return false;
-  }, [connectedAccount, showWithdraw]);
+  }, [connectedAccount, showWithdraw, roleHatWearerAddress]);
 
   const loadAmounts = useCallback(async () => {
     if (walletClient && payment?.streamId && payment?.contractAddress && canWithdraw) {
diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index 6d298c98f2..efcedfe785 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -202,7 +202,7 @@ export default function PaymentWithdrawModal({
                   size={iconSize}
                 />
               </Box>
-              <Text textStyle="label-base">{roleHat.wearer}</Text>
+              <Text textStyle="label-base">{withdrawInformation.roleHatwearerAddress}</Text>
             </Flex>
           </Flex>
           <Flex

From 554b1012146ba53b7e9d553a41af14e8f6bf2b8a Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:56:36 -0400
Subject: [PATCH 23/46] run pretty

---
 src/models/FreezeGuardTxBuilder.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/models/FreezeGuardTxBuilder.ts b/src/models/FreezeGuardTxBuilder.ts
index 739422bf06..a968d14576 100644
--- a/src/models/FreezeGuardTxBuilder.ts
+++ b/src/models/FreezeGuardTxBuilder.ts
@@ -124,7 +124,7 @@ export class FreezeGuardTxBuilder extends BaseTxBuilder {
     const parentStrategyAddress =
       this.parentStrategyType === VotingStrategyType.LINEAR_ERC721
         ? this.parentStrategyAddress
-        : this.parentTokenAddress ?? this.parentAddress;
+        : (this.parentTokenAddress ?? this.parentAddress);
     if (!this.parentAddress || !parentStrategyAddress) {
       throw new Error(
         'Error building contract call for setting up freeze voting - required addresses were not provided.',

From 72c1301b2ecd3aaa6b26aa55344898e32465d322 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 09:58:56 -0400
Subject: [PATCH 24/46] update typing to Address/Hex

---
 src/components/pages/Roles/types.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 3b12f9e605..d8fcc5648a 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -124,14 +124,14 @@ export type PreparedChangedRoleDetailsData = {
 export type AddedHatsWithIds = {
   id: bigint;
   editedRole: EditedRole;
-  wearer: `0x${string}`;
+  wearer: Address;
   payments?: SablierPaymentFormValues[];
   roleEditingPaymentIndex?: number;
   prettyId?: string | undefined;
   name?: string | undefined;
   description?: string | undefined;
   details: string;
-  formId: `0x${string}`;
+  formId: Hex;
 };
 
 export type PreparedNewStreamData = {

From 0f4b269b1fa958f69e4d69500bcefc75393748db Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:04:17 -0400
Subject: [PATCH 25/46] don't need contract as a param

---
 src/hooks/streams/useCreateSablierStream.ts | 4 ++--
 src/hooks/utils/useCreateRoles.ts           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/streams/useCreateSablierStream.ts b/src/hooks/streams/useCreateSablierStream.ts
index 364cfae4ec..2711bc1072 100644
--- a/src/hooks/streams/useCreateSablierStream.ts
+++ b/src/hooks/streams/useCreateSablierStream.ts
@@ -80,7 +80,7 @@ export default function useCreateSablierStream() {
   );
 
   const prepareFlushStreamTx = useCallback(
-    (streamId: string, contractAddress: Address, to: Address) => {
+    (streamId: string, to: Address) => {
       // @dev This function comes from "basic" SablierV2
       // all the types of streams are inheriting from that
       // so it's safe to rely on any stream ABI
@@ -91,7 +91,7 @@ export default function useCreateSablierStream() {
         args: [convertStreamIdToBigInt(streamId), to],
       });
 
-      return { calldata: flushCalldata, targetAddress: contractAddress };
+      return flushCalldata;
     },
     [],
   );
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 0d0e8de8f9..f3e31668e5 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -436,11 +436,11 @@ export default function useCreateRoles() {
 
   const prepareHatsAccountFlushExecData = useCallback(
     (streamId: string, contractAddress: Address, wearer: Address) => {
-      const flushStreamTx = prepareFlushStreamTx(streamId, contractAddress, wearer);
+      const flushStreamTxCalldata = prepareFlushStreamTx(streamId, wearer);
       const wrappedFlushStreamTx = encodeFunctionData({
         abi: HatsAccount1ofNAbi,
         functionName: 'execute',
-        args: [flushStreamTx.targetAddress, 0n, flushStreamTx.calldata, 0],
+        args: [contractAddress, 0n, flushStreamTxCalldata, 0],
       });
 
       return wrappedFlushStreamTx;

From 5b864ad712dce89c6b731e2eccaf839cfdc68ae6 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:17:24 -0400
Subject: [PATCH 26/46] run pretty

---
 src/hooks/streams/useCreateSablierStream.ts | 27 +++++++++------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/hooks/streams/useCreateSablierStream.ts b/src/hooks/streams/useCreateSablierStream.ts
index 2711bc1072..4bb4bf2d25 100644
--- a/src/hooks/streams/useCreateSablierStream.ts
+++ b/src/hooks/streams/useCreateSablierStream.ts
@@ -79,22 +79,19 @@ export default function useCreateSablierStream() {
     [prepareBasicStreamData],
   );
 
-  const prepareFlushStreamTx = useCallback(
-    (streamId: string, to: Address) => {
-      // @dev This function comes from "basic" SablierV2
-      // all the types of streams are inheriting from that
-      // so it's safe to rely on any stream ABI
-
-      const flushCalldata = encodeFunctionData({
-        abi: SablierV2LockupLinearAbi,
-        functionName: 'withdrawMax',
-        args: [convertStreamIdToBigInt(streamId), to],
-      });
+  const prepareFlushStreamTx = useCallback((streamId: string, to: Address) => {
+    // @dev This function comes from "basic" SablierV2
+    // all the types of streams are inheriting from that
+    // so it's safe to rely on any stream ABI
 
-      return flushCalldata;
-    },
-    [],
-  );
+    const flushCalldata = encodeFunctionData({
+      abi: SablierV2LockupLinearAbi,
+      functionName: 'withdrawMax',
+      args: [convertStreamIdToBigInt(streamId), to],
+    });
+
+    return flushCalldata;
+  }, []);
 
   const prepareCancelStreamTx = useCallback((streamId: string, targetAddress: Address) => {
     // @dev This function comes from "basic" SablierV2

From bab220e833b94e2c148da710a7fc3680993e5759 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 18:56:44 -0400
Subject: [PATCH 27/46] Add type safety to the modal

---
 src/components/ui/modals/ModalProvider.tsx  | 97 ++++++++++++++++++---
 src/components/ui/modals/useDecentModal.tsx | 14 ++-
 2 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/src/components/ui/modals/ModalProvider.tsx b/src/components/ui/modals/ModalProvider.tsx
index b6f13d43c3..7326c1d7b7 100644
--- a/src/components/ui/modals/ModalProvider.tsx
+++ b/src/components/ui/modals/ModalProvider.tsx
@@ -1,7 +1,9 @@
 import { Portal, Show, useDisclosure } from '@chakra-ui/react';
 import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Address } from 'viem';
 import { UnsavedChangesWarningContent } from '../../../pages/daos/[daoAddress]/roles/edit/unsavedChangesWarningContent';
+import { ProposalTemplate } from '../../../types';
 import AddSignerModal from '../../pages/DaoSettings/components/Signers/modals/AddSignerModal';
 import RemoveSignerModal from '../../pages/DaoSettings/components/Signers/modals/RemoveSignerModal';
 import DraggableDrawer from '../containers/DraggableDrawer';
@@ -36,18 +38,79 @@ export enum ModalType {
   WITHDRAW_PAYMENT,
 }
 
-export interface CurrentModal {
-  type: ModalType;
-  props: Record<string, any>;
-}
+export type CurrentModal =
+  | { type: ModalType.DELEGATE; props: ModalPropsTypes[ModalType.DELEGATE] }
+  | { type: ModalType.SEND_ASSETS; props: ModalPropsTypes[ModalType.SEND_ASSETS] }
+  | { type: ModalType.STAKE; props: ModalPropsTypes[ModalType.STAKE] }
+  | { type: ModalType.WRAP_TOKEN; props: ModalPropsTypes[ModalType.WRAP_TOKEN] }
+  | { type: ModalType.UNWRAP_TOKEN; props: ModalPropsTypes[ModalType.UNWRAP_TOKEN] }
+  | { type: ModalType.CONFIRM_URL; props: ModalPropsTypes[ModalType.CONFIRM_URL] }
+  | { type: ModalType.REMOVE_SIGNER; props: ModalPropsTypes[ModalType.REMOVE_SIGNER] }
+  | { type: ModalType.ADD_SIGNER; props: ModalPropsTypes[ModalType.ADD_SIGNER] }
+  | {
+      type: ModalType.CREATE_PROPOSAL_FROM_TEMPLATE;
+      props: ModalPropsTypes[ModalType.CREATE_PROPOSAL_FROM_TEMPLATE];
+    }
+  | {
+      type: ModalType.COPY_PROPOSAL_TEMPLATE;
+      props: ModalPropsTypes[ModalType.COPY_PROPOSAL_TEMPLATE];
+    }
+  | {
+      type: ModalType.CONFIRM_MODIFY_GOVERNANCE;
+      props: ModalPropsTypes[ModalType.CONFIRM_MODIFY_GOVERNANCE];
+    }
+  | { type: ModalType.SEARCH_SAFE; props: ModalPropsTypes[ModalType.SEARCH_SAFE] }
+  | { type: ModalType.WARN_UNSAVED_CHANGES; props: ModalPropsTypes[ModalType.WARN_UNSAVED_CHANGES] }
+  | { type: ModalType.WITHDRAW_PAYMENT; props: ModalPropsTypes[ModalType.WITHDRAW_PAYMENT] }
+  | { type: ModalType.NONE; props: ModalPropsTypes[ModalType.NONE] };
+
+export type ModalPropsTypes = {
+  [ModalType.NONE]: {};
+  [ModalType.DELEGATE]: {};
+  [ModalType.SEND_ASSETS]: {};
+  [ModalType.STAKE]: {};
+  [ModalType.WRAP_TOKEN]: {};
+  [ModalType.UNWRAP_TOKEN]: {};
+  [ModalType.CONFIRM_URL]: { url: string };
+  [ModalType.REMOVE_SIGNER]: {
+    selectedSigner: string;
+    signers: string[];
+    currentThreshold: number;
+  };
+  [ModalType.ADD_SIGNER]: { signers: string[]; currentThreshold: number };
+  [ModalType.CREATE_PROPOSAL_FROM_TEMPLATE]: { proposalTemplate: ProposalTemplate };
+  [ModalType.COPY_PROPOSAL_TEMPLATE]: {
+    proposalTemplate: ProposalTemplate;
+    templateIndex: number;
+  };
+  [ModalType.CONFIRM_MODIFY_GOVERNANCE]: {};
+  [ModalType.SEARCH_SAFE]: {};
+  [ModalType.WARN_UNSAVED_CHANGES]: {
+    discardChanges: () => void;
+    keepEditing: () => void;
+  };
+  [ModalType.WITHDRAW_PAYMENT]: {
+    paymentAssetLogo?: string;
+    paymentAssetSymbol: string;
+    paymentAssetDecimals: number;
+    paymentStreamId?: string;
+    paymentContractAddress: Address;
+    withdrawInformation: {
+      roleHatSmartAddress: Address;
+      roleHatwearerAddress: Address;
+      withdrawableAmount: bigint;
+    };
+    onSuccess: () => Promise<void>;
+  };
+};
 
 export interface IModalContext {
   current: CurrentModal;
-  setCurrent: Function;
+  setCurrent: (modal: CurrentModal) => void;
 }
 
 export const ModalContext = createContext<IModalContext>({
-  current: { type: ModalType.NONE, props: [] },
+  current: { type: ModalType.NONE, props: {} },
   setCurrent: () => {},
 });
 
@@ -58,6 +121,7 @@ interface ModalUI {
   isSearchInputModal: boolean;
   onSetClosed: () => void;
 }
+
 /**
  * A provider that handles displaying modals in the app.
  *
@@ -68,24 +132,27 @@ interface ModalUI {
  *  4. Utilize the useDecentModal hook to get a click listener to open your new modal.
  */
 export function ModalProvider({ children }: { children: ReactNode }) {
-  const [current, setCurrent] = useState<CurrentModal>({ type: ModalType.NONE, props: [] });
+  const [current, setCurrent] = useState<CurrentModal>({
+    type: ModalType.NONE,
+    props: {},
+  });
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation('modals');
 
   useEffect(() => {
     if (current.type != ModalType.NONE) onOpen();
-  });
+  }, [current.type, onOpen]);
 
   const { title, warn, content, onSetClosed, isSearchInputModal } = useMemo<ModalUI>(() => {
     const closeModal = () => {
-      setCurrent({ type: ModalType.NONE, props: [] });
+      setCurrent({ type: ModalType.NONE, props: {} });
       onClose();
     };
 
-    let modalTitle;
+    let modalTitle: string | undefined;
     let hasWarning = false;
     let isSearchInput = false;
-    let modalContent;
+    let modalContent: ReactNode | null = null;
 
     switch (current.type) {
       case ModalType.DELEGATE:
@@ -184,7 +251,11 @@ export function ModalProvider({ children }: { children: ReactNode }) {
       case ModalType.WITHDRAW_PAYMENT:
         modalContent = (
           <PaymentWithdrawModal
-            payment={current.props.payment}
+            paymentAssetLogo={current.props.paymentAssetLogo}
+            paymentAssetSymbol={current.props.paymentAssetSymbol}
+            paymentAssetDecimals={current.props.paymentAssetDecimals}
+            paymentStreamId={current.props.paymentStreamId}
+            paymentContractAddress={current.props.paymentContractAddress}
             withdrawInformation={current.props.withdrawInformation}
             onSuccess={current.props.onSuccess}
             onClose={closeModal}
@@ -199,7 +270,7 @@ export function ModalProvider({ children }: { children: ReactNode }) {
 
     return {
       isSearchInputModal: isSearchInput,
-      title: modalTitle,
+      title: modalTitle || '',
       warn: hasWarning,
       content: modalContent,
       onSetClosed: closeModal,
diff --git a/src/components/ui/modals/useDecentModal.tsx b/src/components/ui/modals/useDecentModal.tsx
index 334dbbee7e..a21f3037a7 100644
--- a/src/components/ui/modals/useDecentModal.tsx
+++ b/src/components/ui/modals/useDecentModal.tsx
@@ -1,5 +1,11 @@
 import { useContext } from 'react';
-import { IModalContext, ModalContext, ModalType } from './ModalProvider';
+import {
+  CurrentModal,
+  IModalContext,
+  ModalContext,
+  ModalPropsTypes,
+  ModalType,
+} from './ModalProvider';
 
 /**
  * Returns a Function intended to be used in a click listener to open the provided ModalType.
@@ -8,9 +14,11 @@ import { IModalContext, ModalContext, ModalType } from './ModalProvider';
  * @param props optional arbitrary key:value properties to pass to the modal
  * @returns a Function that when called opens the provided ModalType modal.
  */
-export const useDecentModal = (modal: ModalType, props?: Record<string, any>) => {
+export const useDecentModal = <T extends ModalType>(modal: T, props?: ModalPropsTypes[T]) => {
   const { setCurrent } = useContext<IModalContext>(ModalContext);
   return () => {
-    setCurrent({ type: modal, props: props ? props : [] });
+    const modalObject = { type: modal, props: props ?? {} } as CurrentModal;
+
+    setCurrent(modalObject);
   };
 };

From 83427258f0bf5d37d5af33c809ea29567a237cc9 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 18:57:03 -0400
Subject: [PATCH 28/46] ensure type safety when passing in props

---
 src/components/Proposals/ProposalInfo.tsx     | 15 +++++-
 .../components/Signers/SignersContainer.tsx   | 34 +++++++++----
 .../pages/Roles/RolePaymentDetails.tsx        | 50 +++++++++++++++----
 .../ui/modals/PaymentWithdrawModal.tsx        | 33 +++++++-----
 4 files changed, 97 insertions(+), 35 deletions(-)

diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
index a28705551b..bd290d2059 100644
--- a/src/components/Proposals/ProposalInfo.tsx
+++ b/src/components/Proposals/ProposalInfo.tsx
@@ -1,5 +1,6 @@
 import { Box, Button, Flex, Link } from '@chakra-ui/react';
 import { ArrowUpRight } from '@phosphor-icons/react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Shield } from '../../assets/theme/custom/icons/Shield';
 import useSnapshotProposal from '../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
@@ -27,7 +28,19 @@ export function ProposalInfo({
   } = useFractal();
   const { isSnapshotProposal } = useSnapshotProposal(proposal);
 
-  const confirmUrl = useDecentModal(ModalType.CONFIRM_URL, { url: metaData.documentationUrl });
+  const [modalType, props] = useMemo(() => {
+    if (!metaData.documentationUrl) {
+      return [ModalType.NONE] as const;
+    }
+    return [
+      ModalType.CONFIRM_URL,
+      {
+        url: metaData.documentationUrl,
+      },
+    ] as const;
+  }, [metaData.documentationUrl]);
+
+  const confirmUrl = useDecentModal(modalType, props);
 
   return (
     <Box
diff --git a/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx b/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx
index a17e6c2cba..9dcb11aa3e 100644
--- a/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx
+++ b/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx
@@ -1,6 +1,6 @@
 import { Button, Flex, Hide, HStack, Icon, Show, Text } from '@chakra-ui/react';
 import { MinusCircle, PlusCircle } from '@phosphor-icons/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccount } from 'wagmi';
 import { useFractal } from '../../../../../providers/App/AppProvider';
@@ -20,11 +20,21 @@ function Signer({
   threshold: number | undefined;
   disabled: boolean;
 }) {
-  const removeSigner = useDecentModal(ModalType.REMOVE_SIGNER, {
-    selectedSigner: signer,
-    signers: signers,
-    currentThreshold: threshold,
-  });
+  const [modalType, props] = useMemo(() => {
+    if (!signers || !threshold) {
+      return [ModalType.NONE] as const;
+    }
+    return [
+      ModalType.REMOVE_SIGNER,
+      {
+        selectedSigner: signer,
+        signers: signers,
+        currentThreshold: threshold,
+      },
+    ] as const;
+  }, [signer, signers, threshold]);
+
+  const removeSigner = useDecentModal(modalType, props);
   return (
     <HStack
       key={signer}
@@ -68,10 +78,14 @@ export function SignersContainer() {
   const [signers, setSigners] = useState<string[]>();
   const [userIsSigner, setUserIsSigner] = useState<boolean>();
 
-  const addSigner = useDecentModal(ModalType.ADD_SIGNER, {
-    signers: signers,
-    currentThreshold: safe?.threshold,
-  });
+  const [modalType, props] = useMemo(() => {
+    if (!signers) {
+      return [ModalType.NONE] as const;
+    }
+    return [ModalType.ADD_SIGNER, { signers, currentThreshold: safe?.threshold }] as const;
+  }, [signers, safe?.threshold]);
+
+  const addSigner = useDecentModal(modalType, props);
   const { t } = useTranslation(['common', 'breadcrumbs']);
   const { address: account } = useAccount();
   const enableRemove = userIsSigner && signers && signers?.length > 1;
diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
index 7ce811dc42..8a63be2349 100644
--- a/src/components/pages/Roles/RolePaymentDetails.tsx
+++ b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -62,8 +62,8 @@ function GreenStreamingDot({ isStreaming }: { isStreaming: boolean }) {
 }
 
 interface RolePaymentDetailsProps {
-  roleHatWearerAddress: Address;
-  roleHatSmartAddress: Address;
+  roleHatWearerAddress?: Address;
+  roleHatSmartAddress?: Address;
   payment: SablierPayment | SablierPaymentFormValues;
   onClick?: () => void;
   showWithdraw?: boolean;
@@ -115,15 +115,43 @@ export function RolePaymentDetails({
     loadAmounts();
   }, [loadAmounts]);
 
-  const withdraw = useDecentModal(ModalType.WITHDRAW_PAYMENT, {
-    payment,
-    onSuccess: loadAmounts,
-    withdrawInformation: {
-      withdrawableAmount,
-      roleHatWearerAddress,
-      roleHatSmartAddress,
-    },
-  });
+  const [modalType, props] = useMemo(() => {
+    if (
+      !payment.asset ||
+      !payment.streamId ||
+      !payment.contractAddress ||
+      !roleHatWearerAddress ||
+      !roleHatSmartAddress
+    ) {
+      return [ModalType.NONE] as const;
+    }
+    return [
+      ModalType.WITHDRAW_PAYMENT,
+      {
+        paymentAssetLogo: payment.asset.logo,
+        paymentAssetSymbol: payment.asset.symbol,
+        paymentAssetDecimals: payment.asset.decimals,
+        paymentStreamId: payment.streamId,
+        paymentContractAddress: payment.contractAddress,
+        onSuccess: loadAmounts,
+        withdrawInformation: {
+          withdrawableAmount,
+          roleHatWearerAddress,
+          roleHatSmartAddress,
+        },
+      },
+    ] as const;
+  }, [
+    payment.asset,
+    payment.contractAddress,
+    payment.streamId,
+    roleHatSmartAddress,
+    roleHatWearerAddress,
+    loadAmounts,
+    withdrawableAmount,
+  ]);
+
+  const withdraw = useDecentModal(modalType ?? ModalType.NONE, props);
 
   const handleClickWithdraw = useCallback(() => {
     if (safe?.address) {
diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index efcedfe785..ae85005618 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -13,16 +13,23 @@ import useAvatar from '../../../hooks/utils/useAvatar';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { formatCoin } from '../../../utils';
-import { SablierPayment } from '../../pages/Roles/types';
 import Avatar, { AvatarSize } from '../page/Header/Avatar';
 
 export default function PaymentWithdrawModal({
-  payment,
+  paymentAssetLogo,
+  paymentAssetSymbol,
+  paymentAssetDecimals,
+  paymentStreamId,
+  paymentContractAddress,
   withdrawInformation,
   onSuccess,
   onClose,
 }: {
-  payment: SablierPayment;
+  paymentAssetLogo?: string;
+  paymentAssetSymbol: string;
+  paymentStreamId?: string;
+  paymentAssetDecimals: number;
+  paymentContractAddress?: Address;
   withdrawInformation: {
     roleHatSmartAddress: Address;
     roleHatwearerAddress: Address;
@@ -43,8 +50,8 @@ export default function PaymentWithdrawModal({
 
   const handleWithdraw = useCallback(async () => {
     if (
-      payment?.contractAddress &&
-      payment?.streamId &&
+      paymentContractAddress &&
+      paymentStreamId &&
       walletClient &&
       publicClient &&
       withdrawInformation.roleHatSmartAddress &&
@@ -57,7 +64,7 @@ export default function PaymentWithdrawModal({
           address: withdrawInformation.roleHatSmartAddress,
           client: walletClient,
         });
-        const bigIntStreamId = convertStreamIdToBigInt(payment.streamId);
+        const bigIntStreamId = convertStreamIdToBigInt(paymentStreamId);
         let hatsAccountCalldata = encodeFunctionData({
           abi: SablierV2LockupLinearAbi,
           functionName: 'withdrawMax',
@@ -71,7 +78,7 @@ export default function PaymentWithdrawModal({
           progress: 1,
         });
         const txHash = await hatsAccountContract.write.execute([
-          payment.contractAddress,
+          paymentContractAddress,
           0n,
           hatsAccountCalldata,
           0,
@@ -94,8 +101,8 @@ export default function PaymentWithdrawModal({
       }
     }
   }, [
-    payment?.contractAddress,
-    payment?.streamId,
+    paymentContractAddress,
+    paymentStreamId,
     publicClient,
     walletClient,
     onSuccess,
@@ -140,13 +147,13 @@ export default function PaymentWithdrawModal({
             justifyContent="center"
           >
             <Image
-              src={payment.asset.logo}
+              src={paymentAssetLogo}
               fallbackSrc="/images/coin-icon-default.svg"
-              alt={payment.asset.symbol}
+              alt={paymentAssetSymbol}
               w="2rem"
               h="2rem"
             />
-            <Text textStyle="label-large">{payment.asset.symbol}</Text>
+            <Text textStyle="label-large">{paymentAssetSymbol}</Text>
           </Flex>
           <Flex
             px="1rem"
@@ -168,7 +175,7 @@ export default function PaymentWithdrawModal({
               {formatCoin(
                 withdrawInformation.withdrawableAmount,
                 true,
-                payment.asset.decimals,
+                paymentAssetDecimals,
                 undefined,
                 false,
               )}

From a543374036beff305a6f1b4c14c2eca91160f8da Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 23:28:19 -0400
Subject: [PATCH 29/46] unneeded code

---
 src/components/pages/Roles/RolePaymentDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
index 8a63be2349..955d4c780f 100644
--- a/src/components/pages/Roles/RolePaymentDetails.tsx
+++ b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -151,7 +151,7 @@ export function RolePaymentDetails({
     withdrawableAmount,
   ]);
 
-  const withdraw = useDecentModal(modalType ?? ModalType.NONE, props);
+  const withdraw = useDecentModal(modalType, props);
 
   const handleClickWithdraw = useCallback(() => {
     if (safe?.address) {

From c6801192e26afad911ca43fa87d5bbad2d50783f Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:18:46 -0400
Subject: [PATCH 30/46] fix capitalization

---
 src/components/ui/modals/ModalProvider.tsx    |  5 +++--
 .../ui/modals/PaymentWithdrawModal.tsx        | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/modals/ModalProvider.tsx b/src/components/ui/modals/ModalProvider.tsx
index 7326c1d7b7..835d51a03e 100644
--- a/src/components/ui/modals/ModalProvider.tsx
+++ b/src/components/ui/modals/ModalProvider.tsx
@@ -97,7 +97,7 @@ export type ModalPropsTypes = {
     paymentContractAddress: Address;
     withdrawInformation: {
       roleHatSmartAddress: Address;
-      roleHatwearerAddress: Address;
+      roleHatWearerAddress: Address;
       withdrawableAmount: bigint;
     };
     onSuccess: () => Promise<void>;
@@ -248,7 +248,7 @@ export function ModalProvider({ children }: { children: ReactNode }) {
           />
         );
         break;
-      case ModalType.WITHDRAW_PAYMENT:
+      case ModalType.WITHDRAW_PAYMENT: {
         modalContent = (
           <PaymentWithdrawModal
             paymentAssetLogo={current.props.paymentAssetLogo}
@@ -262,6 +262,7 @@ export function ModalProvider({ children }: { children: ReactNode }) {
           />
         );
         break;
+      }
       case ModalType.NONE:
       default:
         modalTitle = '';
diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index ae85005618..05e55e64c8 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -32,17 +32,18 @@ export default function PaymentWithdrawModal({
   paymentContractAddress?: Address;
   withdrawInformation: {
     roleHatSmartAddress: Address;
-    roleHatwearerAddress: Address;
+    roleHatWearerAddress: Address;
     withdrawableAmount: bigint;
   };
   onSuccess: () => Promise<void>;
   onClose: () => void;
 }) {
+  console.log('🚀 ~ withdrawInformation:', withdrawInformation);
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
   const { t } = useTranslation(['roles', 'menu', 'common', 'modals']);
   const { displayName: accountDisplayName } = useDisplayName(
-    withdrawInformation.roleHatwearerAddress,
+    withdrawInformation.roleHatWearerAddress,
   );
   const avatarURL = useAvatar(accountDisplayName);
   const iconSize = useBreakpointValue<AvatarSize>({ base: 'sm', md: 'icon' }) || 'sm';
@@ -55,7 +56,7 @@ export default function PaymentWithdrawModal({
       walletClient &&
       publicClient &&
       withdrawInformation.roleHatSmartAddress &&
-      withdrawInformation.roleHatwearerAddress
+      withdrawInformation.roleHatWearerAddress
     ) {
       let withdrawToast: Id | undefined = undefined;
       try {
@@ -68,7 +69,7 @@ export default function PaymentWithdrawModal({
         let hatsAccountCalldata = encodeFunctionData({
           abi: SablierV2LockupLinearAbi,
           functionName: 'withdrawMax',
-          args: [bigIntStreamId, getAddress(withdrawInformation.roleHatwearerAddress)],
+          args: [bigIntStreamId, getAddress(withdrawInformation.roleHatWearerAddress)],
         });
         withdrawToast = toast(t('withdrawPendingMessage'), {
           autoClose: false,
@@ -108,9 +109,13 @@ export default function PaymentWithdrawModal({
     onSuccess,
     onClose,
     withdrawInformation.roleHatSmartAddress,
-    withdrawInformation.roleHatwearerAddress,
+    withdrawInformation.roleHatWearerAddress,
     t,
   ]);
+  console.log(
+    '🚀 ~ withdrawInformation.roleHatWearerAddress:',
+    withdrawInformation.roleHatWearerAddress,
+  );
 
   return (
     <Flex
@@ -204,12 +209,12 @@ export default function PaymentWithdrawModal({
             >
               <Box>
                 <Avatar
-                  address={withdrawInformation.roleHatwearerAddress}
+                  address={withdrawInformation.roleHatWearerAddress}
                   url={avatarURL}
                   size={iconSize}
                 />
               </Box>
-              <Text textStyle="label-base">{withdrawInformation.roleHatwearerAddress}</Text>
+              <Text textStyle="label-base">{withdrawInformation.roleHatWearerAddress}</Text>
             </Flex>
           </Flex>
           <Flex

From 0c1799077a7183010dcee6f9c2ecb6b2b1c93d27 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 19:14:33 -0400
Subject: [PATCH 31/46] spread out the typing instead of union.

---
 .../pages/Roles/RolePaymentDetails.tsx        | 95 +++++++++++--------
 .../pages/Roles/RolesDetailsDrawer.tsx        |  8 +-
 .../pages/Roles/RolesDetailsDrawerMobile.tsx  |  8 +-
 .../Roles/forms/RoleFormPaymentStreams.tsx    | 32 ++++---
 4 files changed, 88 insertions(+), 55 deletions(-)

diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
index 955d4c780f..455b34f852 100644
--- a/src/components/pages/Roles/RolePaymentDetails.tsx
+++ b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -12,10 +12,10 @@ import { DAO_ROUTES } from '../../../constants/routes';
 import { convertStreamIdToBigInt } from '../../../hooks/streams/useCreateSablierStream';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { BigIntValuePair } from '../../../types';
 import { DEFAULT_DATE_FORMAT, formatCoin, formatUSD } from '../../../utils';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
-import { SablierPayment, SablierPaymentFormValues } from './types';
 
 function PaymentDate({ label, date }: { label: string; date?: Date }) {
   const { t } = useTranslation(['roles']);
@@ -64,12 +64,31 @@ function GreenStreamingDot({ isStreaming }: { isStreaming: boolean }) {
 interface RolePaymentDetailsProps {
   roleHatWearerAddress?: Address;
   roleHatSmartAddress?: Address;
-  payment: SablierPayment | SablierPaymentFormValues;
+  paymentStreamId?: string;
+  paymentContractAddress?: Address;
+  paymentAsset: {
+    logo: string;
+    symbol: string;
+    decimals: number;
+    address: Address;
+  };
+  paymentAmount: BigIntValuePair;
+  paymentStartDate: Date;
+  paymentEndDate: Date;
+  paymentCliffDate?: Date;
+  isStreaming: () => boolean;
   onClick?: () => void;
   showWithdraw?: boolean;
 }
 export function RolePaymentDetails({
-  payment,
+  paymentStreamId,
+  paymentContractAddress,
+  paymentAsset,
+  paymentAmount,
+  paymentStartDate,
+  paymentEndDate,
+  paymentCliffDate,
+  isStreaming,
   onClick,
   showWithdraw,
   roleHatWearerAddress,
@@ -95,21 +114,21 @@ export function RolePaymentDetails({
   }, [connectedAccount, showWithdraw, roleHatWearerAddress]);
 
   const loadAmounts = useCallback(async () => {
-    if (walletClient && payment?.streamId && payment?.contractAddress && canWithdraw) {
+    if (walletClient && paymentStreamId && paymentContractAddress && canWithdraw) {
       const streamContract = getContract({
         abi: SablierV2LockupLinearAbi,
-        address: payment.contractAddress,
+        address: paymentContractAddress,
         client: walletClient,
       });
 
-      const bigintStreamId = convertStreamIdToBigInt(payment.streamId);
+      const bigintStreamId = convertStreamIdToBigInt(paymentStreamId);
 
       const newWithdrawableAmount = await streamContract.read.withdrawableAmountOf([
         bigintStreamId,
       ]);
       setWithdrawableAmount(newWithdrawableAmount);
     }
-  }, [walletClient, payment?.streamId, payment?.contractAddress, canWithdraw]);
+  }, [walletClient, paymentStreamId, paymentContractAddress, canWithdraw]);
 
   useEffect(() => {
     loadAmounts();
@@ -117,9 +136,8 @@ export function RolePaymentDetails({
 
   const [modalType, props] = useMemo(() => {
     if (
-      !payment.asset ||
-      !payment.streamId ||
-      !payment.contractAddress ||
+      !paymentStreamId ||
+      !paymentContractAddress ||
       !roleHatWearerAddress ||
       !roleHatSmartAddress
     ) {
@@ -128,11 +146,11 @@ export function RolePaymentDetails({
     return [
       ModalType.WITHDRAW_PAYMENT,
       {
-        paymentAssetLogo: payment.asset.logo,
-        paymentAssetSymbol: payment.asset.symbol,
-        paymentAssetDecimals: payment.asset.decimals,
-        paymentStreamId: payment.streamId,
-        paymentContractAddress: payment.contractAddress,
+        paymentAssetLogo: paymentAsset.logo,
+        paymentAssetSymbol: paymentAsset.symbol,
+        paymentAssetDecimals: paymentAsset.decimals,
+        paymentStreamId: paymentStreamId,
+        paymentContractAddress: paymentContractAddress,
         onSuccess: loadAmounts,
         withdrawInformation: {
           withdrawableAmount,
@@ -142,9 +160,9 @@ export function RolePaymentDetails({
       },
     ] as const;
   }, [
-    payment.asset,
-    payment.contractAddress,
-    payment.streamId,
+    paymentAsset,
+    paymentContractAddress,
+    paymentStreamId,
     roleHatSmartAddress,
     roleHatWearerAddress,
     loadAmounts,
@@ -161,31 +179,28 @@ export function RolePaymentDetails({
   }, [addressPrefix, navigate, safe?.address, withdraw]);
 
   const amountPerWeek = useMemo(() => {
-    if (!payment.amount?.bigintValue || !payment.startDate || !payment.endDate) {
+    if (!paymentAmount?.bigintValue) {
       return;
     }
 
-    const endTime = payment.endDate.getTime() / 1000;
-    const startTime = payment.startDate.getTime() / 1000;
+    const endTime = paymentEndDate.getTime() / 1000;
+    const startTime = paymentStartDate.getTime() / 1000;
     const totalSeconds = Math.round(endTime - startTime); // @dev due to milliseconds we need to round it to avoid problems with BigInt
-    const amountPerSecond = payment.amount.bigintValue / BigInt(totalSeconds);
+    const amountPerSecond = paymentAmount.bigintValue / BigInt(totalSeconds);
     const secondsInWeek = BigInt(60 * 60 * 24 * 7);
     return amountPerSecond * secondsInWeek;
-  }, [payment]);
+  }, [paymentAmount, paymentStartDate, paymentEndDate]);
 
   const streamAmountUSD = useMemo(() => {
-    if (!payment.amount) {
-      return;
-    }
     // @todo add price support for tokens not found in assetsFungible
     const foundAsset = assetsFungible.find(
-      asset => getAddress(asset.tokenAddress) === payment.asset?.address,
+      asset => getAddress(asset.tokenAddress) === paymentAsset.address,
     );
     if (!foundAsset || foundAsset.usdPrice === undefined) {
       return;
     }
-    return Number(payment.amount.value) * foundAsset.usdPrice;
-  }, [payment.amount, payment.asset?.address, assetsFungible]);
+    return Number(paymentAmount.value) * foundAsset.usdPrice;
+  }, [paymentAmount, paymentAsset, assetsFungible]);
 
   return (
     <Box
@@ -208,12 +223,12 @@ export function RolePaymentDetails({
               textStyle="display-2xl"
               color="white-0"
             >
-              {payment.amount?.bigintValue
+              {paymentAmount?.bigintValue
                 ? formatCoin(
-                    payment.amount.bigintValue,
+                    paymentAmount.bigintValue,
                     false,
-                    payment.asset?.decimals,
-                    payment.asset?.symbol,
+                    paymentAsset.decimals,
+                    paymentAsset.symbol,
                   )
                 : undefined}
             </Text>
@@ -228,7 +243,7 @@ export function RolePaymentDetails({
               p="0.5rem"
             >
               <Image
-                src={payment.asset?.logo}
+                src={paymentAsset.logo}
                 fallbackSrc="/images/coin-icon-default.svg"
                 boxSize="1.5rem"
               />
@@ -236,7 +251,7 @@ export function RolePaymentDetails({
                 textStyle="label-base"
                 color="white-0"
               >
-                {payment.asset?.symbol ?? t('selectLabel', { ns: 'modals' })}
+                {paymentAsset.symbol ?? t('selectLabel', { ns: 'modals' })}
               </Text>
             </Flex>
           </Flex>
@@ -252,12 +267,12 @@ export function RolePaymentDetails({
                 alignItems="center"
                 gap="0.5rem"
               >
-                <GreenStreamingDot isStreaming={payment.isStreaming()} />
+                <GreenStreamingDot isStreaming={isStreaming()} />
                 <Text
                   textStyle="label-small"
                   color="white-0"
                 >
-                  {`${formatCoin(amountPerWeek, true, payment.asset?.decimals, payment.asset?.symbol)} / ${t('week')}`}
+                  {`${formatCoin(amountPerWeek, true, paymentAsset.decimals, paymentAsset.symbol)} / ${t('week')}`}
                 </Text>
               </Flex>
             )}
@@ -279,7 +294,7 @@ export function RolePaymentDetails({
           <GridItem area="starting">
             <PaymentDate
               label="starting"
-              date={payment.startDate}
+              date={paymentStartDate}
             />
           </GridItem>
           <GridItem area="dividerOne">
@@ -294,7 +309,7 @@ export function RolePaymentDetails({
           <GridItem area="cliff">
             <PaymentDate
               label="cliff"
-              date={payment.cliffDate}
+              date={paymentCliffDate}
             />
           </GridItem>
           <GridItem area="dividerTwo">
@@ -309,7 +324,7 @@ export function RolePaymentDetails({
           <GridItem area="ending">
             <PaymentDate
               label="ending"
-              date={payment.endDate}
+              date={paymentEndDate}
             />
           </GridItem>
         </Grid>
diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/src/components/pages/Roles/RolesDetailsDrawer.tsx
index 50df1644e2..d269af0276 100644
--- a/src/components/pages/Roles/RolesDetailsDrawer.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawer.tsx
@@ -172,7 +172,13 @@ export default function RolesDetailsDrawer({
               {payments.map((payment, index) => (
                 <RolePaymentDetails
                   key={index}
-                  payment={payment}
+                  paymentAmount={payment.amount}
+                  paymentAsset={payment.asset}
+                  paymentContractAddress={payment.contractAddress}
+                  paymentStreamId={payment.streamId}
+                  paymentEndDate={payment.endDate}
+                  paymentStartDate={payment.startDate}
+                  isStreaming={payment.isStreaming}
                   roleHatSmartAddress={roleHat.smartAddress}
                   roleHatWearerAddress={roleHat.wearer}
                   showWithdraw
diff --git a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
index 375fd50b79..af877c93af 100644
--- a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
@@ -104,7 +104,13 @@ export default function RolesDetailsDrawerMobile({
             {payments.map((payment, index) => (
               <RolePaymentDetails
                 key={index}
-                payment={payment}
+                paymentAmount={payment.amount}
+                paymentAsset={payment.asset}
+                paymentContractAddress={payment.contractAddress}
+                paymentStreamId={payment.streamId}
+                paymentEndDate={payment.endDate}
+                paymentStartDate={payment.startDate}
+                isStreaming={payment.isStreaming}
                 roleHatSmartAddress={roleHat.smartAddress}
                 roleHatWearerAddress={roleHat.wearer}
                 showWithdraw
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
index 3acc47ff83..53b49d8277 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -29,19 +29,25 @@ export function RoleFormPaymentStreams() {
             {t('addPayment')}
           </Button>
           <Box mt="0.5rem">
-            {payments?.map((payment, index) => (
-              <Flex key={index}>
-                <RolePaymentDetails
-                  // @dev used for withdraw payments, not needed here
-                  roleHatWearerAddress={'0x'}
-                  roleHatSmartAddress={'0x'}
-                  payment={payment}
-                  onClick={() => {
-                    setFieldValue('roleEditing.roleEditingPaymentIndex', index);
-                  }}
-                />
-              </Flex>
-            ))}
+            {payments?.map((payment, index) => {
+              // @note don't render if form isn't valid
+              if (!payment.amount || !payment.asset || !payment.startDate || !payment.endDate)
+                return null;
+              return (
+                <Flex key={index}>
+                  <RolePaymentDetails
+                    paymentAmount={payment.amount}
+                    paymentAsset={payment.asset}
+                    paymentEndDate={payment.endDate}
+                    paymentStartDate={payment.startDate}
+                    isStreaming={() => false}
+                    onClick={() => {
+                      setFieldValue('roleEditing.roleEditingPaymentIndex', index);
+                    }}
+                  />
+                </Flex>
+              );
+            })}
           </Box>
         </Box>
       )}

From c2e551c1b6af4c17f9140fe2c6803d1205c94855 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 22:51:05 -0400
Subject: [PATCH 32/46] spread the love responbily - update props for drawer
 components. - remove type mapping functions - makes type conversions locally
 and intentional

---
 .../pages/Roles/RolePaymentDetails.tsx        | 105 ++++++++----------
 .../pages/Roles/RolesDetailsDrawer.tsx        |  19 ++--
 .../pages/Roles/RolesDetailsDrawerMobile.tsx  |  28 ++---
 .../Roles/forms/RoleFormCreateProposal.tsx    |  55 +++++++--
 .../Roles/forms/RoleFormPaymentStreams.tsx    |  14 ++-
 src/components/pages/Roles/types.tsx          |  11 +-
 src/hooks/utils/useCreateRoles.ts             |  59 ++++++----
 .../daos/[daoAddress]/roles/details/index.tsx |   2 -
 src/store/roles/rolesStoreUtils.ts            |  57 +---------
 9 files changed, 169 insertions(+), 181 deletions(-)

diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
index 455b34f852..c9dd0ed99e 100644
--- a/src/components/pages/Roles/RolePaymentDetails.tsx
+++ b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -64,31 +64,26 @@ function GreenStreamingDot({ isStreaming }: { isStreaming: boolean }) {
 interface RolePaymentDetailsProps {
   roleHatWearerAddress?: Address;
   roleHatSmartAddress?: Address;
-  paymentStreamId?: string;
-  paymentContractAddress?: Address;
-  paymentAsset: {
-    logo: string;
-    symbol: string;
-    decimals: number;
-    address: Address;
+  payment: {
+    streamId?: string;
+    contractAddress?: Address;
+    asset: {
+      logo: string;
+      symbol: string;
+      decimals: number;
+      address: Address;
+    };
+    amount: BigIntValuePair;
+    startDate: Date;
+    endDate: Date;
+    cliffDate?: Date;
+    isStreaming: () => boolean;
   };
-  paymentAmount: BigIntValuePair;
-  paymentStartDate: Date;
-  paymentEndDate: Date;
-  paymentCliffDate?: Date;
-  isStreaming: () => boolean;
   onClick?: () => void;
   showWithdraw?: boolean;
 }
 export function RolePaymentDetails({
-  paymentStreamId,
-  paymentContractAddress,
-  paymentAsset,
-  paymentAmount,
-  paymentStartDate,
-  paymentEndDate,
-  paymentCliffDate,
-  isStreaming,
+  payment,
   onClick,
   showWithdraw,
   roleHatWearerAddress,
@@ -114,21 +109,21 @@ export function RolePaymentDetails({
   }, [connectedAccount, showWithdraw, roleHatWearerAddress]);
 
   const loadAmounts = useCallback(async () => {
-    if (walletClient && paymentStreamId && paymentContractAddress && canWithdraw) {
+    if (walletClient && payment.streamId && payment.contractAddress && canWithdraw) {
       const streamContract = getContract({
         abi: SablierV2LockupLinearAbi,
-        address: paymentContractAddress,
+        address: payment.contractAddress,
         client: walletClient,
       });
 
-      const bigintStreamId = convertStreamIdToBigInt(paymentStreamId);
+      const bigintStreamId = convertStreamIdToBigInt(payment.streamId);
 
       const newWithdrawableAmount = await streamContract.read.withdrawableAmountOf([
         bigintStreamId,
       ]);
       setWithdrawableAmount(newWithdrawableAmount);
     }
-  }, [walletClient, paymentStreamId, paymentContractAddress, canWithdraw]);
+  }, [walletClient, payment, canWithdraw]);
 
   useEffect(() => {
     loadAmounts();
@@ -136,8 +131,8 @@ export function RolePaymentDetails({
 
   const [modalType, props] = useMemo(() => {
     if (
-      !paymentStreamId ||
-      !paymentContractAddress ||
+      !payment.streamId ||
+      !payment.contractAddress ||
       !roleHatWearerAddress ||
       !roleHatSmartAddress
     ) {
@@ -146,11 +141,11 @@ export function RolePaymentDetails({
     return [
       ModalType.WITHDRAW_PAYMENT,
       {
-        paymentAssetLogo: paymentAsset.logo,
-        paymentAssetSymbol: paymentAsset.symbol,
-        paymentAssetDecimals: paymentAsset.decimals,
-        paymentStreamId: paymentStreamId,
-        paymentContractAddress: paymentContractAddress,
+        paymentAssetLogo: payment.asset.logo,
+        paymentAssetSymbol: payment.asset.symbol,
+        paymentAssetDecimals: payment.asset.decimals,
+        paymentStreamId: payment.streamId,
+        paymentContractAddress: payment.contractAddress,
         onSuccess: loadAmounts,
         withdrawInformation: {
           withdrawableAmount,
@@ -159,15 +154,7 @@ export function RolePaymentDetails({
         },
       },
     ] as const;
-  }, [
-    paymentAsset,
-    paymentContractAddress,
-    paymentStreamId,
-    roleHatSmartAddress,
-    roleHatWearerAddress,
-    loadAmounts,
-    withdrawableAmount,
-  ]);
+  }, [payment, roleHatSmartAddress, roleHatWearerAddress, loadAmounts, withdrawableAmount]);
 
   const withdraw = useDecentModal(modalType, props);
 
@@ -179,28 +166,28 @@ export function RolePaymentDetails({
   }, [addressPrefix, navigate, safe?.address, withdraw]);
 
   const amountPerWeek = useMemo(() => {
-    if (!paymentAmount?.bigintValue) {
+    if (!payment.amount?.bigintValue) {
       return;
     }
 
-    const endTime = paymentEndDate.getTime() / 1000;
-    const startTime = paymentStartDate.getTime() / 1000;
+    const endTime = payment.endDate.getTime() / 1000;
+    const startTime = payment.startDate.getTime() / 1000;
     const totalSeconds = Math.round(endTime - startTime); // @dev due to milliseconds we need to round it to avoid problems with BigInt
-    const amountPerSecond = paymentAmount.bigintValue / BigInt(totalSeconds);
+    const amountPerSecond = payment.amount.bigintValue / BigInt(totalSeconds);
     const secondsInWeek = BigInt(60 * 60 * 24 * 7);
     return amountPerSecond * secondsInWeek;
-  }, [paymentAmount, paymentStartDate, paymentEndDate]);
+  }, [payment]);
 
   const streamAmountUSD = useMemo(() => {
     // @todo add price support for tokens not found in assetsFungible
     const foundAsset = assetsFungible.find(
-      asset => getAddress(asset.tokenAddress) === paymentAsset.address,
+      asset => getAddress(asset.tokenAddress) === payment.asset.address,
     );
     if (!foundAsset || foundAsset.usdPrice === undefined) {
       return;
     }
-    return Number(paymentAmount.value) * foundAsset.usdPrice;
-  }, [paymentAmount, paymentAsset, assetsFungible]);
+    return Number(payment.amount.value) * foundAsset.usdPrice;
+  }, [payment, assetsFungible]);
 
   return (
     <Box
@@ -223,12 +210,12 @@ export function RolePaymentDetails({
               textStyle="display-2xl"
               color="white-0"
             >
-              {paymentAmount?.bigintValue
+              {payment.amount?.bigintValue
                 ? formatCoin(
-                    paymentAmount.bigintValue,
+                    payment.amount.bigintValue,
                     false,
-                    paymentAsset.decimals,
-                    paymentAsset.symbol,
+                    payment.asset.decimals,
+                    payment.asset.symbol,
                   )
                 : undefined}
             </Text>
@@ -243,7 +230,7 @@ export function RolePaymentDetails({
               p="0.5rem"
             >
               <Image
-                src={paymentAsset.logo}
+                src={payment.asset.logo}
                 fallbackSrc="/images/coin-icon-default.svg"
                 boxSize="1.5rem"
               />
@@ -251,7 +238,7 @@ export function RolePaymentDetails({
                 textStyle="label-base"
                 color="white-0"
               >
-                {paymentAsset.symbol ?? t('selectLabel', { ns: 'modals' })}
+                {payment.asset.symbol ?? t('selectLabel', { ns: 'modals' })}
               </Text>
             </Flex>
           </Flex>
@@ -267,12 +254,12 @@ export function RolePaymentDetails({
                 alignItems="center"
                 gap="0.5rem"
               >
-                <GreenStreamingDot isStreaming={isStreaming()} />
+                <GreenStreamingDot isStreaming={payment.isStreaming()} />
                 <Text
                   textStyle="label-small"
                   color="white-0"
                 >
-                  {`${formatCoin(amountPerWeek, true, paymentAsset.decimals, paymentAsset.symbol)} / ${t('week')}`}
+                  {`${formatCoin(amountPerWeek, true, payment.asset.decimals, payment.asset.symbol)} / ${t('week')}`}
                 </Text>
               </Flex>
             )}
@@ -294,7 +281,7 @@ export function RolePaymentDetails({
           <GridItem area="starting">
             <PaymentDate
               label="starting"
-              date={paymentStartDate}
+              date={payment.startDate}
             />
           </GridItem>
           <GridItem area="dividerOne">
@@ -309,7 +296,7 @@ export function RolePaymentDetails({
           <GridItem area="cliff">
             <PaymentDate
               label="cliff"
-              date={paymentCliffDate}
+              date={payment.cliffDate}
             />
           </GridItem>
           <GridItem area="dividerTwo">
@@ -324,7 +311,7 @@ export function RolePaymentDetails({
           <GridItem area="ending">
             <PaymentDate
               label="ending"
-              date={paymentEndDate}
+              date={payment.endDate}
             />
           </GridItem>
         </Grid>
diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/src/components/pages/Roles/RolesDetailsDrawer.tsx
index d269af0276..9cbfaea6b4 100644
--- a/src/components/pages/Roles/RolesDetailsDrawer.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawer.tsx
@@ -16,11 +16,10 @@ import { useGetDAOName } from '../../../hooks/DAO/useGetDAOName';
 import useAvatar from '../../../hooks/utils/useAvatar';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat } from '../../../store/roles';
 import Avatar from '../../ui/page/Header/Avatar';
 import Divider from '../../ui/utils/Divider';
 import { RolePaymentDetails } from './RolePaymentDetails';
-import { SablierPayment } from './types';
+import { RoleDetailsDrawerRoleHatProp, SablierPayment } from './types';
 
 function RoleAndDescriptionLabel({ label, icon }: { label: string; icon: React.ElementType }) {
   return (
@@ -40,7 +39,7 @@ function RoleAndDescriptionLabel({ label, icon }: { label: string; icon: React.E
 }
 
 interface RoleDetailsDrawerProps {
-  roleHat: DecentRoleHat;
+  roleHat: RoleDetailsDrawerRoleHatProp;
   payments?: SablierPayment[];
   onOpen?: () => void;
   onClose: () => void;
@@ -172,13 +171,13 @@ export default function RolesDetailsDrawer({
               {payments.map((payment, index) => (
                 <RolePaymentDetails
                   key={index}
-                  paymentAmount={payment.amount}
-                  paymentAsset={payment.asset}
-                  paymentContractAddress={payment.contractAddress}
-                  paymentStreamId={payment.streamId}
-                  paymentEndDate={payment.endDate}
-                  paymentStartDate={payment.startDate}
-                  isStreaming={payment.isStreaming}
+                  payment={{
+                    amount: payment.amount,
+                    asset: payment.asset,
+                    endDate: payment.endDate,
+                    startDate: payment.startDate,
+                    isStreaming: payment.isStreaming,
+                  }}
                   roleHatSmartAddress={roleHat.smartAddress}
                   roleHatWearerAddress={roleHat.wearer}
                   showWithdraw
diff --git a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
index af877c93af..85c6212edc 100644
--- a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
@@ -3,16 +3,15 @@ import { PencilLine } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Hex } from 'viem';
 import { useFractal } from '../../../providers/App/AppProvider';
-import { DecentRoleHat, useRolesStore } from '../../../store/roles';
+import { useRolesStore } from '../../../store/roles';
 import DraggableDrawer from '../../ui/containers/DraggableDrawer';
 import Divider from '../../ui/utils/Divider';
 import { AvatarAndRoleName } from './RoleCard';
 import { RolePaymentDetails } from './RolePaymentDetails';
-import { SablierPayment } from './types';
+import { RoleDetailsDrawerRoleHatProp } from './types';
 
 interface RoleDetailsDrawerMobileProps {
-  roleHat: DecentRoleHat;
-  payments?: SablierPayment[];
+  roleHat: RoleDetailsDrawerRoleHatProp;
   onOpen?: () => void;
   onClose?: () => void;
   isOpen?: boolean;
@@ -25,7 +24,6 @@ export default function RolesDetailsDrawerMobile({
   onOpen,
   isOpen = true,
   onEdit,
-  payments,
 }: RoleDetailsDrawerMobileProps) {
   const {
     node: { daoAddress },
@@ -87,7 +85,7 @@ export default function RolesDetailsDrawerMobile({
         px="1rem"
         mb="1.5rem"
       >
-        {payments && (
+        {roleHat.payments && (
           <>
             <Divider
               variant="darker"
@@ -101,16 +99,18 @@ export default function RolesDetailsDrawerMobile({
             >
               {t('payments')}
             </Text>
-            {payments.map((payment, index) => (
+            {roleHat.payments.map((payment, index) => (
               <RolePaymentDetails
                 key={index}
-                paymentAmount={payment.amount}
-                paymentAsset={payment.asset}
-                paymentContractAddress={payment.contractAddress}
-                paymentStreamId={payment.streamId}
-                paymentEndDate={payment.endDate}
-                paymentStartDate={payment.startDate}
-                isStreaming={payment.isStreaming}
+                payment={{
+                  amount: payment.amount,
+                  asset: payment.asset,
+                  contractAddress: payment.contractAddress,
+                  streamId: payment.streamId,
+                  endDate: payment.endDate,
+                  startDate: payment.startDate,
+                  isStreaming: payment.isStreaming,
+                }}
                 roleHatSmartAddress={roleHat.smartAddress}
                 roleHatWearerAddress={roleHat.wearer}
                 showWithdraw
diff --git a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
index dfde48a495..d821f29427 100644
--- a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
+++ b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
@@ -3,26 +3,62 @@ import { Field, FieldProps, useFormikContext } from 'formik';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Hex } from 'viem';
+import { getAddress, Hex } from 'viem';
 import { CARD_SHADOW } from '../../../../constants/common';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat, mapRoleHatFormValueToDecentRoleHat } from '../../../../store/roles';
 import { CustomNonceInput } from '../../../ui/forms/CustomNonceInput';
 import { InputComponent, TextareaComponent } from '../../../ui/forms/InputComponent';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
 import { RoleCardShort } from '../RoleCard';
 import RolesDetailsDrawer from '../RolesDetailsDrawer';
 import RolesDetailsDrawerMobile from '../RolesDetailsDrawerMobile';
-import { RoleFormValues } from '../types';
+import { EditedRole, RoleDetailsDrawerRoleHatProp, RoleFormValues } from '../types';
 
 export default function RoleFormCreateProposal({ close }: { close: () => void }) {
-  const [drawerViewingRole, setDrawerViewingRole] = useState<DecentRoleHat>();
+  const [drawerViewingRole, setDrawerViewingRole] = useState<RoleDetailsDrawerRoleHatProp>();
   const { t } = useTranslation(['modals', 'common', 'proposal']);
   const { values, isSubmitting, submitForm } = useFormikContext<RoleFormValues>();
-  const editedRoles = useMemo(() => {
-    return values.hats.filter(hat => !!hat.editedRole);
+  const editedRoles = useMemo<
+    (RoleDetailsDrawerRoleHatProp & {
+      editedRole: EditedRole;
+    })[]
+  >(() => {
+    return values.hats
+      .filter(hat => !!hat.editedRole)
+      .map(roleHat => {
+        if (!roleHat.wearer || !roleHat.name || !roleHat.description || !roleHat.editedRole) {
+          throw new Error('Role missing data', {
+            cause: roleHat,
+          });
+        }
+        return {
+          ...roleHat,
+          editedRole: roleHat.editedRole,
+          prettyId: roleHat.id,
+          name: roleHat.name,
+          description: roleHat.description,
+          wearer: getAddress(roleHat.wearer),
+          payments: roleHat.payments
+            ? roleHat.payments.map(payment => {
+                if (!payment.startDate || !payment.endDate || !payment.amount || !payment.asset) {
+                  throw new Error('Payment missing data', {
+                    cause: payment,
+                  });
+                }
+                return {
+                  ...payment,
+                  startDate: payment.startDate,
+                  endDate: payment.endDate,
+                  amount: payment.amount,
+                  asset: payment.asset,
+                  cliffDate: payment.cliffDate,
+                };
+              })
+            : [],
+        };
+      });
   }, [values.hats]);
 
   const {
@@ -124,13 +160,12 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
         borderRadius="0.5rem"
       >
         {editedRoles.map((role, index) => {
-          const normalizedRole = mapRoleHatFormValueToDecentRoleHat(role);
           return (
             <RoleCardShort
               key={index}
-              name={normalizedRole.name}
+              name={role.name}
               handleRoleClick={() => {
-                setDrawerViewingRole(normalizedRole);
+                setDrawerViewingRole(role);
               }}
               editStatus={role.editedRole?.status}
             />
@@ -163,7 +198,6 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
               isOpen={drawerViewingRole !== undefined}
               onClose={handleCloseDrawer}
               onEdit={handleEditRoleClick}
-              payments={drawerViewingRole.payments}
             />
           </Show>
           <Show above="md">
@@ -172,7 +206,6 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
               isOpen={drawerViewingRole !== undefined}
               onClose={handleCloseDrawer}
               onEdit={handleEditRoleClick}
-              payments={drawerViewingRole.payments}
             />
           </Show>
         </>
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
index 53b49d8277..60c2eb9438 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -36,11 +36,15 @@ export function RoleFormPaymentStreams() {
               return (
                 <Flex key={index}>
                   <RolePaymentDetails
-                    paymentAmount={payment.amount}
-                    paymentAsset={payment.asset}
-                    paymentEndDate={payment.endDate}
-                    paymentStartDate={payment.startDate}
-                    isStreaming={() => false}
+                    payment={{
+                      amount: payment.amount,
+                      asset: payment.asset,
+                      contractAddress: payment.contractAddress,
+                      streamId: payment.streamId,
+                      endDate: payment.endDate,
+                      startDate: payment.startDate,
+                      isStreaming: () => false,
+                    }}
                     onClick={() => {
                       setFieldValue('roleEditing.roleEditingPaymentIndex', index);
                     }}
diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index d8fcc5648a..39bca4206d 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -48,6 +48,15 @@ export interface RoleEditProps
   payments?: SablierPaymentFormValues[];
 }
 
+export interface RoleDetailsDrawerRoleHatProp
+  extends Omit<DecentRoleHat, 'payments' | 'smartAddress'> {
+  smartAddress?: Address;
+  payments?: (Omit<SablierPayment, 'contractAddress' | 'streamId'> & {
+    contractAddress?: Address;
+    streamId?: string;
+  })[];
+}
+
 export enum EditBadgeStatus {
   Updated,
   New,
@@ -88,7 +97,7 @@ export interface DurationBreakdown {
 }
 
 export interface RoleHatFormValue
-  extends Partial<Omit<DecentRoleHat, 'id' | 'wearer' | 'payments' | 'smartAddress'>> {
+  extends Partial<Omit<DecentRoleHat, 'id' | 'wearer' | 'payments'>> {
   id: Hex;
   wearer?: string;
   payments?: SablierPaymentFormValues[];
diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index f3e31668e5..cc052cd55c 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -33,11 +33,7 @@ import { CreateProposalMetadata, ProposalExecuteData } from '../../types';
 import { SENTINEL_MODULE } from '../../utils/address';
 import useSubmitProposal from '../DAO/proposal/useSubmitProposal';
 import useCreateSablierStream from '../streams/useCreateSablierStream';
-import {
-  DecentRoleHat,
-  mapSablierPaymentFormValuesToSablierPayment,
-  predictAccountAddress,
-} from './../../store/roles/rolesStoreUtils';
+import { DecentRoleHat, predictAccountAddress } from './../../store/roles/rolesStoreUtils';
 
 const hatsDetailsBuilder = (data: { name: string; description: string }) => {
   return JSON.stringify({
@@ -198,20 +194,28 @@ const identifyAndPrepareEditedPaymentStreams = (
         return !isEqual(payment, originalPayment);
       })
       .map(payment => {
-        const sablierPayment = mapSablierPaymentFormValuesToSablierPayment(payment);
-        // @note payment amount should not be 0 or undefined
-        if (!sablierPayment.amount?.bigintValue || sablierPayment.amount.bigintValue > 0n) {
-          throw new Error('Payment amount required.');
+        if (
+          !payment.streamId ||
+          !payment.contractAddress ||
+          !payment.asset ||
+          !payment.startDate ||
+          !payment.endDate ||
+          !payment.amount?.bigintValue ||
+          payment.amount.bigintValue > 0n
+        ) {
+          throw new Error('Form Values inValid', {
+            cause: payment,
+          });
         }
 
         return {
-          streamId: sablierPayment.streamId,
+          streamId: payment.streamId,
           recipient: currentHat.smartAddress,
-          startDateTs: sablierPayment.startDate.getTime(),
-          endDateTs: sablierPayment.endDate.getTime(),
-          cliffDateTs: sablierPayment.cliffDate?.getTime() ?? 0,
-          totalAmount: sablierPayment.amount.bigintValue,
-          assetAddress: sablierPayment.asset.address,
+          startDateTs: payment.startDate.getTime(),
+          endDateTs: payment.endDate.getTime(),
+          cliffDateTs: payment.cliffDate?.getTime() ?? 0,
+          totalAmount: payment.amount.bigintValue,
+          assetAddress: payment.asset.address,
           roleHatId: BigInt(currentHat.id),
           roleHatWearer: currentHat.wearer,
           roleHatSmartAddress: currentHat.smartAddress,
@@ -245,18 +249,25 @@ const identifyAndPrepareAddedPaymentStreams = async (
         recipientAddress = await predictSmartAccount(addedRoleHat.id);
       }
       return payments.map(payment => {
-        const sablierPayment = mapSablierPaymentFormValuesToSablierPayment(payment);
-        // @note payment amount should not be 0 or undefined
-        if (!sablierPayment.amount?.bigintValue || sablierPayment.amount.bigintValue > 0n) {
-          throw new Error('Payment amount required.');
+        if (
+          !payment.asset ||
+          !payment.startDate ||
+          !payment.endDate ||
+          !payment.amount?.bigintValue ||
+          payment.amount.bigintValue > 0n
+        ) {
+          throw new Error('Form Values inValid', {
+            cause: payment,
+          });
         }
+
         return {
           recipient: recipientAddress,
-          startDateTs: sablierPayment.startDate.getTime(),
-          endDateTs: sablierPayment.endDate.getTime(),
-          cliffDateTs: sablierPayment.cliffDate?.getTime() ?? 0,
-          totalAmount: sablierPayment.amount.bigintValue,
-          assetAddress: sablierPayment.asset.address,
+          startDateTs: payment.startDate.getTime(),
+          endDateTs: payment.endDate.getTime(),
+          cliffDateTs: payment.cliffDate?.getTime() ?? 0,
+          totalAmount: payment.amount.bigintValue,
+          assetAddress: payment.asset.address,
         };
       });
     }),
diff --git a/src/pages/daos/[daoAddress]/roles/details/index.tsx b/src/pages/daos/[daoAddress]/roles/details/index.tsx
index e4c987a247..bb0f72b847 100644
--- a/src/pages/daos/[daoAddress]/roles/details/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/details/index.tsx
@@ -38,7 +38,6 @@ export default function RoleDetails() {
           roleHat={roleHat}
           onClose={handleDrawerClose}
           onEdit={handleEditRoleClick}
-          payments={roleHat.payments}
         />
       </Show>
       <Show above="md">
@@ -46,7 +45,6 @@ export default function RoleDetails() {
           roleHat={roleHat}
           onClose={handleDrawerClose}
           onEdit={handleEditRoleClick}
-          payments={roleHat.payments}
         />
       </Show>
     </>
diff --git a/src/store/roles/rolesStoreUtils.ts b/src/store/roles/rolesStoreUtils.ts
index 24f26590f7..4c0fec110d 100644
--- a/src/store/roles/rolesStoreUtils.ts
+++ b/src/store/roles/rolesStoreUtils.ts
@@ -1,20 +1,7 @@
 import { Tree, Hat } from '@hatsprotocol/sdk-v1-subgraph';
-import {
-  Address,
-  Hex,
-  PublicClient,
-  encodePacked,
-  getContract,
-  keccak256,
-  getAddress,
-  zeroAddress,
-} from 'viem';
+import { Address, Hex, PublicClient, encodePacked, getContract, keccak256 } from 'viem';
 import ERC6551RegistryAbi from '../../assets/abi/ERC6551RegistryAbi';
-import {
-  RoleHatFormValue,
-  SablierPayment,
-  SablierPaymentFormValues,
-} from '../../components/pages/Roles/types';
+import { SablierPayment } from '../../components/pages/Roles/types';
 
 export class DecentHatsError extends Error {
   constructor(message: string) {
@@ -302,43 +289,3 @@ export const predictHatId = ({ adminHatId, hatsCount }: { adminHatId: Hex; hatsC
   // Total length of Hat ID is **32 bytes** + 2 bytes for 0x
   return BigInt(`${adminLevelBinary}${newSiblingId}`.padEnd(66, '0'));
 };
-
-export const mapSablierPaymentFormValuesToSablierPayment = (
-  payment: SablierPaymentFormValues,
-): SablierPayment => {
-  if (
-    !payment.streamId ||
-    !payment.contractAddress ||
-    !payment.asset ||
-    !payment.amount ||
-    !payment.startDate ||
-    !payment.endDate
-  ) {
-    throw new Error('SablierPaymentFormValues not complete enough to create SablierPayment');
-  }
-  return {
-    streamId: payment.streamId,
-    contractAddress: payment.contractAddress,
-    asset: payment.asset,
-    amount: payment.amount,
-    startDate: payment.startDate,
-    endDate: payment.endDate,
-    cliffDate: payment.cliffDate,
-    isStreaming: payment.isStreaming,
-  };
-};
-
-export const mapRoleHatFormValueToDecentRoleHat = (role: RoleHatFormValue): DecentRoleHat => {
-  if (!role.id || !role.prettyId || !role.wearer || !role.name || !role.description) {
-    throw new Error('RoleHatFormValue data not complete enough to create DecentRoleHat');
-  }
-  return {
-    id: role.id,
-    prettyId: role.prettyId,
-    wearer: getAddress(role.wearer),
-    name: role.name,
-    description: role.description,
-    smartAddress: zeroAddress,
-    payments: role.payments?.map(payment => mapSablierPaymentFormValuesToSablierPayment(payment)),
-  };
-};

From 8dda038145d7e371c6303e5e0565429a85f1ddc5 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 27 Aug 2024 23:47:04 -0400
Subject: [PATCH 33/46] remove payment prop

---
 src/components/pages/Roles/RolesDetailsDrawer.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/src/components/pages/Roles/RolesDetailsDrawer.tsx
index 9cbfaea6b4..2444d04896 100644
--- a/src/components/pages/Roles/RolesDetailsDrawer.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawer.tsx
@@ -19,7 +19,7 @@ import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfig
 import Avatar from '../../ui/page/Header/Avatar';
 import Divider from '../../ui/utils/Divider';
 import { RolePaymentDetails } from './RolePaymentDetails';
-import { RoleDetailsDrawerRoleHatProp, SablierPayment } from './types';
+import { RoleDetailsDrawerRoleHatProp } from './types';
 
 function RoleAndDescriptionLabel({ label, icon }: { label: string; icon: React.ElementType }) {
   return (
@@ -40,7 +40,6 @@ function RoleAndDescriptionLabel({ label, icon }: { label: string; icon: React.E
 
 interface RoleDetailsDrawerProps {
   roleHat: RoleDetailsDrawerRoleHatProp;
-  payments?: SablierPayment[];
   onOpen?: () => void;
   onClose: () => void;
   onEdit: (hatId: Hex) => void;
@@ -52,7 +51,6 @@ export default function RolesDetailsDrawer({
   onClose,
   isOpen = true,
   onEdit,
-  payments,
 }: RoleDetailsDrawerProps) {
   const {
     node: { daoAddress },
@@ -156,7 +154,7 @@ export default function RolesDetailsDrawer({
               </Text>
             </GridItem>
           </Grid>
-          {payments && (
+          {roleHat.payments && (
             <>
               <Divider
                 variant="darker"
@@ -168,7 +166,7 @@ export default function RolesDetailsDrawer({
               >
                 {t('payments')}
               </Text>
-              {payments.map((payment, index) => (
+              {roleHat.payments.map((payment, index) => (
                 <RolePaymentDetails
                   key={index}
                   payment={{

From 55975180239779b0ae30fb70dfbf7c3511378016 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:17:49 -0400
Subject: [PATCH 34/46] clean up - add missing payment - remove unneeded
 passing of props

---
 src/components/pages/Roles/RolesDetailsDrawer.tsx  | 10 ++--------
 .../pages/Roles/RolesDetailsDrawerMobile.tsx       | 14 +++-----------
 .../pages/Roles/forms/RoleFormPaymentStream.tsx    |  5 +----
 .../pages/Roles/forms/RoleFormPaymentStreams.tsx   |  2 --
 4 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/src/components/pages/Roles/RolesDetailsDrawer.tsx
index 2444d04896..b257f63f19 100644
--- a/src/components/pages/Roles/RolesDetailsDrawer.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawer.tsx
@@ -169,15 +169,9 @@ export default function RolesDetailsDrawer({
               {roleHat.payments.map((payment, index) => (
                 <RolePaymentDetails
                   key={index}
-                  payment={{
-                    amount: payment.amount,
-                    asset: payment.asset,
-                    endDate: payment.endDate,
-                    startDate: payment.startDate,
-                    isStreaming: payment.isStreaming,
-                  }}
+                  payment={payment}
                   roleHatSmartAddress={roleHat.smartAddress}
-                  roleHatWearerAddress={roleHat.wearer}
+                  roleHatWearerAddress={getAddress(roleHat.wearer)}
                   showWithdraw
                 />
               ))}
diff --git a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
index 85c6212edc..dd74a88260 100644
--- a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
+++ b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react';
 import { PencilLine } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
-import { Hex } from 'viem';
+import { getAddress, Hex } from 'viem';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useRolesStore } from '../../../store/roles';
 import DraggableDrawer from '../../ui/containers/DraggableDrawer';
@@ -102,17 +102,9 @@ export default function RolesDetailsDrawerMobile({
             {roleHat.payments.map((payment, index) => (
               <RolePaymentDetails
                 key={index}
-                payment={{
-                  amount: payment.amount,
-                  asset: payment.asset,
-                  contractAddress: payment.contractAddress,
-                  streamId: payment.streamId,
-                  endDate: payment.endDate,
-                  startDate: payment.startDate,
-                  isStreaming: payment.isStreaming,
-                }}
+                payment={payment}
                 roleHatSmartAddress={roleHat.smartAddress}
-                roleHatWearerAddress={roleHat.wearer}
+                roleHatWearerAddress={getAddress(roleHat.wearer)}
                 showWithdraw
               />
             ))}
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx
index e4111fe424..2d20b1951e 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx
@@ -2,7 +2,6 @@ import { Box, Button, Flex, FormControl, Grid, GridItem, Icon } from '@chakra-ui
 import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
 import { FormikErrors, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { getAddress } from 'viem';
 import { CARD_SHADOW } from '../../../../constants/common';
 import { useRolesStore } from '../../../../store/roles';
 import { DecentDatePicker, DecentDatePickerRange } from '../../../ui/utils/DecentDatePicker';
@@ -120,9 +119,7 @@ export default function RoleFormPaymentStream({ formIndex }: { formIndex: number
           const hatId = values.roleEditing?.id;
           if (!values?.roleEditing?.payments?.[formIndex] || !hatId) return;
           const streamId = values.roleEditing?.payments?.[formIndex]?.streamId;
-          const isExistingPayment = !!streamId
-            ? getPayment(getAddress(hatId), streamId)
-            : undefined;
+          const isExistingPayment = !!streamId ? getPayment(hatId, streamId) : undefined;
           // if payment is new, and unedited, remove it
           if (
             formIndex === values.roleEditing.payments.length - 1 &&
diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
index 60c2eb9438..e1342a0c1c 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -39,8 +39,6 @@ export function RoleFormPaymentStreams() {
                     payment={{
                       amount: payment.amount,
                       asset: payment.asset,
-                      contractAddress: payment.contractAddress,
-                      streamId: payment.streamId,
                       endDate: payment.endDate,
                       startDate: payment.startDate,
                       isStreaming: () => false,

From da9604f93ece862e47c1e2cdcef8ea8a6f7ab93a Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:22:57 -0400
Subject: [PATCH 35/46] fix payments logic

---
 src/hooks/utils/useCreateRoles.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index cc052cd55c..5ccea6bbf4 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -201,7 +201,7 @@ const identifyAndPrepareEditedPaymentStreams = (
           !payment.startDate ||
           !payment.endDate ||
           !payment.amount?.bigintValue ||
-          payment.amount.bigintValue > 0n
+          payment.amount.bigintValue < 0n
         ) {
           throw new Error('Form Values inValid', {
             cause: payment,
@@ -232,7 +232,7 @@ const identifyAndPrepareAddedPaymentStreams = async (
 ): Promise<PreparedNewStreamData[]> => {
   const preparedStreamDataMapped = await Promise.all(
     modifiedHats.map(async formHat => {
-      if (formHat.payments === undefined || formHat.editedRole.status !== EditBadgeStatus.New) {
+      if (formHat.payments === undefined || formHat.editedRole.status !== EditBadgeStatus.Updated) {
         return [];
       }
 
@@ -254,7 +254,7 @@ const identifyAndPrepareAddedPaymentStreams = async (
           !payment.startDate ||
           !payment.endDate ||
           !payment.amount?.bigintValue ||
-          payment.amount.bigintValue > 0n
+          payment.amount.bigintValue < 0n
         ) {
           throw new Error('Form Values inValid', {
             cause: payment,

From 76f155ff0208bb3bb3653a322d9c697fa11e1605 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:27:34 -0400
Subject: [PATCH 36/46] remove unneeded conditional

---
 src/components/pages/Roles/RolesTable.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/pages/Roles/RolesTable.tsx b/src/components/pages/Roles/RolesTable.tsx
index d2c8a92b0f..d73f535e18 100644
--- a/src/components/pages/Roles/RolesTable.tsx
+++ b/src/components/pages/Roles/RolesTable.tsx
@@ -311,9 +311,6 @@ export function RolesEditTable({ handleRoleClick }: { handleRoleClick: (hatId: H
               name={role.name}
               wearerAddress={role.wearer}
               handleRoleClick={() => {
-                if (!role.id) {
-                  throw new Error('Role ID is missing');
-                }
                 setFieldValue('roleEditing', role);
                 handleRoleClick(role.id);
               }}

From 0f63d0b5393113fca5a98ad35152ba8ab68599b1 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:37:01 -0400
Subject: [PATCH 37/46] refactor: Remove unnecessary code and improve type
 safety

---
 src/components/pages/Roles/forms/RoleFormTabs.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx
index ef07b70513..11104c3ad5 100644
--- a/src/components/pages/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx
@@ -82,16 +82,11 @@ export default function RoleFormTabs({
         <Button
           isDisabled={!!errors.roleEditing}
           onClick={() => {
+            if (!values.roleEditing) return;
             const roleUpdated = { ...values.roleEditing, editedRole: editedRoleData };
             const hatIndex = values.hats.findIndex(h => h.id === hatId);
             if (hatIndex === -1) {
-              // @dev new hat
-
-              if (roleUpdated.id === undefined) {
-                throw new Error('New Hat id is undefined. I think this is going to be a problem.');
-              }
-              const roleUpdatedId = roleUpdated.id;
-              pushRole({ ...roleUpdated, id: roleUpdatedId });
+              pushRole({ ...roleUpdated });
             } else {
               setFieldValue(
                 `hats.${hatIndex}`,

From a812ceb675f84605988b18f39b9c75ce603c87db Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:37:47 -0400
Subject: [PATCH 38/46] chore: remove comment

---
 src/components/pages/Roles/types.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
index 39bca4206d..9ba0f9c9f0 100644
--- a/src/components/pages/Roles/types.tsx
+++ b/src/components/pages/Roles/types.tsx
@@ -113,7 +113,7 @@ export interface RoleHatFormValueEdited extends RoleHatFormValue {
 export interface RoleFormValues {
   proposalMetadata: CreateProposalMetadata;
   hats: RoleHatFormValue[];
-  roleEditing?: RoleHatFormValue; // is this here to "indicate" which role's payments are "currently" being edited?
+  roleEditing?: RoleHatFormValue;
   customNonce?: number;
 }
 

From 9d49b80ae867a4576a940e885ccd418a59fc3505 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:39:53 -0400
Subject: [PATCH 39/46] remove "@todo"

---
 src/hooks/streams/useCreateSablierStream.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/hooks/streams/useCreateSablierStream.ts b/src/hooks/streams/useCreateSablierStream.ts
index 4bb4bf2d25..4663fb4b28 100644
--- a/src/hooks/streams/useCreateSablierStream.ts
+++ b/src/hooks/streams/useCreateSablierStream.ts
@@ -111,7 +111,6 @@ export default function useCreateSablierStream() {
       const preparedStreamCreationTransactions: { calldata: Hex; targetAddress: Address }[] = [];
       const preparedTokenApprovalsTransactions: { calldata: Hex; targetAddress: Address }[] = [];
 
-      // @todo SablierV2Batch contract groups streams by asset address
       const groupedStreams = groupBy(paymentStreams, 'assetAddress');
       Object.keys(groupedStreams).forEach(assetAddress => {
         const assembledStreams: ReturnType<typeof prepareLinearStream>[] = [];

From 2b66f1525f694f1bd820a9b68741fd974c66a18d Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:44:17 -0400
Subject: [PATCH 40/46] replace 'obj'

---
 src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx | 2 +-
 src/components/pages/Roles/forms/RoleFormTabs.tsx           | 2 +-
 src/pages/daos/[daoAddress]/roles/edit/details/index.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
index e1342a0c1c..7e03a8fa0c 100644
--- a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -12,7 +12,7 @@ export function RoleFormPaymentStreams() {
 
   return (
     <FieldArray name="roleEditing.payments">
-      {({ push: pushPayment }: { push: (obj: SablierPaymentFormValues) => void }) => (
+      {({ push: pushPayment }: { push: (streamFormValue: SablierPaymentFormValues) => void }) => (
         <Box>
           <Button
             variant="secondary"
diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx
index 11104c3ad5..a2d60d148b 100644
--- a/src/components/pages/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/pages/Roles/forms/RoleFormTabs.tsx
@@ -19,7 +19,7 @@ export default function RoleFormTabs({
   pushRole,
 }: {
   hatId: Hex;
-  pushRole: (obj: RoleHatFormValue) => void;
+  pushRole: (roleHatFormValue: RoleHatFormValue) => void;
 }) {
   const { hatsTree } = useRolesStore();
   const {
diff --git a/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx
index bec04bd926..bedbb7cbc6 100644
--- a/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx
+++ b/src/pages/daos/[daoAddress]/roles/edit/details/index.tsx
@@ -206,7 +206,7 @@ export default function RoleEditDetails() {
         </>
       )}
       <FieldArray name="hats">
-        {({ push }: { push: (obj: RoleHatFormValue) => void }) => (
+        {({ push }: { push: (roleHatFormValue: RoleHatFormValue) => void }) => (
           <>
             <Show below="md">
               <Portal>

From faa6d196095d788238499fc62765ea40dfc8f249 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:44:24 -0400
Subject: [PATCH 41/46] remove console log

---
 src/components/ui/modals/PaymentWithdrawModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index 05e55e64c8..e27083079d 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -38,7 +38,6 @@ export default function PaymentWithdrawModal({
   onSuccess: () => Promise<void>;
   onClose: () => void;
 }) {
-  console.log('🚀 ~ withdrawInformation:', withdrawInformation);
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
   const { t } = useTranslation(['roles', 'menu', 'common', 'modals']);

From d5006b1219a6f77631fc0c64a1b74215402a6cce Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:08:25 -0400
Subject: [PATCH 42/46] less than or equal too

---
 src/hooks/utils/useCreateRoles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/utils/useCreateRoles.ts b/src/hooks/utils/useCreateRoles.ts
index 5ccea6bbf4..e44da0bd4f 100644
--- a/src/hooks/utils/useCreateRoles.ts
+++ b/src/hooks/utils/useCreateRoles.ts
@@ -201,7 +201,7 @@ const identifyAndPrepareEditedPaymentStreams = (
           !payment.startDate ||
           !payment.endDate ||
           !payment.amount?.bigintValue ||
-          payment.amount.bigintValue < 0n
+          payment.amount.bigintValue <= 0n
         ) {
           throw new Error('Form Values inValid', {
             cause: payment,
@@ -254,7 +254,7 @@ const identifyAndPrepareAddedPaymentStreams = async (
           !payment.startDate ||
           !payment.endDate ||
           !payment.amount?.bigintValue ||
-          payment.amount.bigintValue < 0n
+          payment.amount.bigintValue <= 0n
         ) {
           throw new Error('Form Values inValid', {
             cause: payment,

From ce45785d44494a177c10671bae3c683c5bb73d88 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:09:43 -0400
Subject: [PATCH 43/46] update CurrentModal typing to use typescript mapping

---
 src/components/ui/modals/ModalProvider.tsx | 28 +++-------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/components/ui/modals/ModalProvider.tsx b/src/components/ui/modals/ModalProvider.tsx
index 835d51a03e..d6f7ee3da5 100644
--- a/src/components/ui/modals/ModalProvider.tsx
+++ b/src/components/ui/modals/ModalProvider.tsx
@@ -38,31 +38,9 @@ export enum ModalType {
   WITHDRAW_PAYMENT,
 }
 
-export type CurrentModal =
-  | { type: ModalType.DELEGATE; props: ModalPropsTypes[ModalType.DELEGATE] }
-  | { type: ModalType.SEND_ASSETS; props: ModalPropsTypes[ModalType.SEND_ASSETS] }
-  | { type: ModalType.STAKE; props: ModalPropsTypes[ModalType.STAKE] }
-  | { type: ModalType.WRAP_TOKEN; props: ModalPropsTypes[ModalType.WRAP_TOKEN] }
-  | { type: ModalType.UNWRAP_TOKEN; props: ModalPropsTypes[ModalType.UNWRAP_TOKEN] }
-  | { type: ModalType.CONFIRM_URL; props: ModalPropsTypes[ModalType.CONFIRM_URL] }
-  | { type: ModalType.REMOVE_SIGNER; props: ModalPropsTypes[ModalType.REMOVE_SIGNER] }
-  | { type: ModalType.ADD_SIGNER; props: ModalPropsTypes[ModalType.ADD_SIGNER] }
-  | {
-      type: ModalType.CREATE_PROPOSAL_FROM_TEMPLATE;
-      props: ModalPropsTypes[ModalType.CREATE_PROPOSAL_FROM_TEMPLATE];
-    }
-  | {
-      type: ModalType.COPY_PROPOSAL_TEMPLATE;
-      props: ModalPropsTypes[ModalType.COPY_PROPOSAL_TEMPLATE];
-    }
-  | {
-      type: ModalType.CONFIRM_MODIFY_GOVERNANCE;
-      props: ModalPropsTypes[ModalType.CONFIRM_MODIFY_GOVERNANCE];
-    }
-  | { type: ModalType.SEARCH_SAFE; props: ModalPropsTypes[ModalType.SEARCH_SAFE] }
-  | { type: ModalType.WARN_UNSAVED_CHANGES; props: ModalPropsTypes[ModalType.WARN_UNSAVED_CHANGES] }
-  | { type: ModalType.WITHDRAW_PAYMENT; props: ModalPropsTypes[ModalType.WITHDRAW_PAYMENT] }
-  | { type: ModalType.NONE; props: ModalPropsTypes[ModalType.NONE] };
+export type CurrentModal = {
+  [K in ModalType]: { type: K; props: ModalPropsTypes[K] }
+}[ModalType];
 
 export type ModalPropsTypes = {
   [ModalType.NONE]: {};

From fed626d849011a963fa2f4a991aa14a6843bcb83 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:24:08 -0400
Subject: [PATCH 44/46] run pretty

---
 src/components/ui/modals/ModalProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/modals/ModalProvider.tsx b/src/components/ui/modals/ModalProvider.tsx
index d6f7ee3da5..03ffd409cc 100644
--- a/src/components/ui/modals/ModalProvider.tsx
+++ b/src/components/ui/modals/ModalProvider.tsx
@@ -39,7 +39,7 @@ export enum ModalType {
 }
 
 export type CurrentModal = {
-  [K in ModalType]: { type: K; props: ModalPropsTypes[K] }
+  [K in ModalType]: { type: K; props: ModalPropsTypes[K] };
 }[ModalType];
 
 export type ModalPropsTypes = {

From c02165d7b7187327a78323f4b2225841efe806f0 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 11:02:44 -0400
Subject: [PATCH 45/46] remove console log

---
 src/components/ui/modals/PaymentWithdrawModal.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/ui/modals/PaymentWithdrawModal.tsx b/src/components/ui/modals/PaymentWithdrawModal.tsx
index e27083079d..98b0ee84e5 100644
--- a/src/components/ui/modals/PaymentWithdrawModal.tsx
+++ b/src/components/ui/modals/PaymentWithdrawModal.tsx
@@ -111,10 +111,6 @@ export default function PaymentWithdrawModal({
     withdrawInformation.roleHatWearerAddress,
     t,
   ]);
-  console.log(
-    '🚀 ~ withdrawInformation.roleHatWearerAddress:',
-    withdrawInformation.roleHatWearerAddress,
-  );
 
   return (
     <Flex

From f580a4d9715e8690e0a5f2affabce15e5ccd09d5 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Wed, 28 Aug 2024 11:03:33 -0400
Subject: [PATCH 46/46] update naming

---
 src/hooks/streams/useCreateSablierStream.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/streams/useCreateSablierStream.ts b/src/hooks/streams/useCreateSablierStream.ts
index 4663fb4b28..e4d8d51d97 100644
--- a/src/hooks/streams/useCreateSablierStream.ts
+++ b/src/hooks/streams/useCreateSablierStream.ts
@@ -97,13 +97,13 @@ export default function useCreateSablierStream() {
     // @dev This function comes from "basic" SablierV2
     // all the types of streams are inheriting from that
     // so it's safe to rely on any stream ABI
-    const flushCalldata = encodeFunctionData({
+    const cancelCallData = encodeFunctionData({
       abi: SablierV2LockupLinearAbi,
       functionName: 'cancel',
       args: [convertStreamIdToBigInt(streamId)],
     });
 
-    return { calldata: flushCalldata, targetAddress };
+    return { calldata: cancelCallData, targetAddress };
   }, []);
 
   const prepareBatchLinearStreamCreation = useCallback(