WIP: Feat: Offchain DAO creation

.gitignore

@@ -48,3 +48,4 @@ subgraph.yaml
 
 tests/e2e/videos/*
 test.http
+.idea

src/components/addCommitteeMembers/footer.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import {Label} from '@aragon/ods';
+import {useTranslation} from 'react-i18next';
+
+type WalletsFooterProps = {
+  totalAddresses: number;
+};
+
+const AddWalletsFooter: React.FC<WalletsFooterProps> = ({totalAddresses}) => {
+  const {t} = useTranslation();
+
+  return (
+    <Container>
+      <FooterItem1>
+        <Label label={t('labels.summary')} />
+      </FooterItem1>
+      <FooterRow>
+        <FooterItem1>
+          <StyledLabel>{t('labels.whitelistWallets.totalWallets')}</StyledLabel>
+        </FooterItem1>
+        <FooterItem2>
+          <StyledLabel>{totalAddresses}</StyledLabel>
+        </FooterItem2>
+      </FooterRow>
+    </Container>
+  );
+};
+
+export default AddWalletsFooter;
+
+export const Container = styled.div.attrs({
+  className: 'hidden tablet:flex tablet:flex-col p-2 bg-ui-0',
+})``;
+
+const FooterRow = styled.div.attrs({
+  className: 'flex',
+})``;
+
+export const FooterItem1 = styled.div.attrs({
+  className: 'flex-1',
+})``;
+
+export const FooterItem2 = styled.div.attrs({
+  className: 'w-8 text-right',
+})``;
+
+const StyledLabel = styled.p.attrs({
+  className: 'text-ui-800',
+})``;

src/components/addCommitteeMembers/header.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import {Label} from '@aragon/ods';
+import {useTranslation} from 'react-i18next';
+
+const AddWalletsHeader: React.FC = () => {
+  const {t} = useTranslation();
+
+  return (
+    <Container>
+      <HeaderItem>
+        <Label label={t('labels.whitelistWallets.address')} />
+      </HeaderItem>
+    </Container>
+  );
+};
+
+export default AddWalletsHeader;
+
+export const Container = styled.div.attrs({
+  className: 'hidden tablet:flex p-2 space-x-2 bg-ui-0',
+})``;
+
+export const HeaderItem = styled.div.attrs({
+  className: 'flex-1',
+})``;

src/components/addCommitteeMembers/index.tsx

@@ -0,0 +1,126 @@
+import {
+  AlertInline,
+  ButtonIcon,
+  ButtonText,
+  Dropdown,
+  IconMenuVertical,
+  ListItemAction,
+} from '@aragon/ods';
+import React, {useEffect} from 'react';
+import {useFieldArray, useFormContext, useWatch} from 'react-hook-form';
+import {useTranslation} from 'react-i18next';
+import styled from 'styled-components';
+
+import {useAlertContext} from 'context/alert';
+import {useWallet} from 'hooks/useWallet';
+import Footer from './footer';
+import Header from './header';
+import Row from './row';
+
+const AddCommitteeMembers: React.FC = () => {
+  const {t} = useTranslation();
+  const {address, ensName} = useWallet();
+
+  const {control, trigger} = useFormContext();
+  const wallets = useWatch({name: 'committee', control: control});
+  const {fields, append, remove} = useFieldArray({
+    name: 'committee',
+    control,
+  });
+  const {alert} = useAlertContext();
+
+  const controlledFields = fields.map((field, index) => {
+    return {
+      ...field,
+      ...(wallets && {...wallets[index]}),
+    };
+  });
+
+  useEffect(() => {
+    if (address && !wallets) {
+      // uncomment when minting to treasury is ready
+      // insert(1, {address: address, amount: '0'});
+      append({address, ensName, amount: 1});
+    }
+  }, [address, append, ensName, wallets]);
+
+  // setTimeout added because instant trigger not working
+  const handleAddWallet = () => {
+    append({address: '', ensName: '', amount: 1});
+    setTimeout(() => {
+      trigger(`committee.${controlledFields.length}`);
+    }, 50);
+  };
+
+  const handleDeleteRow = (index: number) => {
+    remove(index);
+    setTimeout(() => {
+      trigger('committee');
+    });
+  };
+
+  return (
+    <Container>
+      <ListGroup>
+        {controlledFields.length > 0 && <Header />}
+        {controlledFields.map((field, index) => {
+          return (
+            <Row key={field.id} index={index} onDelete={handleDeleteRow} />
+          );
+        })}
+        <Footer totalAddresses={fields.length || 0} />
+      </ListGroup>
+      <ActionsWrapper>
+        <ButtonText
+          label={t('labels.addWallet')}
+          mode="secondary"
+          size="large"
+          onClick={handleAddWallet}
+        />
+        <Dropdown
+          align="start"
+          trigger={
+            <ButtonIcon
+              mode="ghost"
+              size="large"
+              bgWhite
+              icon={<IconMenuVertical />}
+              data-testid="trigger"
+            />
+          }
+          sideOffset={8}
+          listItems={[
+            {
+              component: (
+                <ListItemAction
+                  title={t('labels.deleteAllAddresses')}
+                  bgWhite
+                />
+              ),
+              callback: () => {
+                remove();
+                alert(t('alert.chip.removedAllAddresses'));
+              },
+            },
+          ]}
+        />
+      </ActionsWrapper>
+      <AlertInline
+        label={t('alert.committee.automaticallyAdded') as string}
+        mode="neutral"
+      />
+    </Container>
+  );
+};
+
+export default AddCommitteeMembers;
+
+const Container = styled.div.attrs({className: 'space-y-1.5'})``;
+
+const ListGroup = styled.div.attrs({
+  className: 'flex flex-col overflow-hidden space-y-0.25 rounded-xl',
+})``;
+
+const ActionsWrapper = styled.div.attrs({
+  className: 'flex justify-between',
+})``;

src/components/addCommitteeMembers/row.tsx

@@ -0,0 +1,169 @@
+import {
+  ButtonIcon,
+  Dropdown,
+  IconMenuVertical,
+  Label,
+  ListItemAction,
+  InputValue as WalletInputValue,
+} from '@aragon/ods';
+import React, {useCallback} from 'react';
+import {Controller, useFormContext, useWatch} from 'react-hook-form';
+import {useTranslation} from 'react-i18next';
+import styled from 'styled-components';
+
+import {WrappedWalletInput} from 'components/wrappedWalletInput';
+import {useAlertContext} from 'context/alert';
+import {useProviders} from 'context/providers';
+import {Web3Address} from 'utils/library';
+import {validateWeb3Address} from 'utils/validators';
+import {MultisigWalletField} from 'components/multisigWallets/row';
+
+type WalletRowProps = {
+  index: number;
+  onDelete?: (index: number) => void;
+};
+
+const WalletRow: React.FC<WalletRowProps> = ({index, onDelete}) => {
+  const {t} = useTranslation();
+  const {alert} = useAlertContext();
+  const {api: provider} = useProviders();
+
+  const {control} = useFormContext();
+  const [committee, multisigWallets, wallets, membership]: [
+    MultisigWalletField[],
+    MultisigWalletField[],
+    MultisigWalletField[],
+    'multisig' | 'token'
+  ] = useWatch({
+    name: ['committee', 'multisigWallets', 'wallets', 'membership'],
+    control,
+  });
+
+  const addressValidator = useCallback(
+    async ({address, ensName}: WalletInputValue, index: number) => {
+      const web3Address = new Web3Address(provider, address, ensName);
+
+      // check if address is valid
+      let validationResult = await validateWeb3Address(
+        web3Address,
+        t('errors.required.walletAddress'),
+        t
+      );
+
+      if (validationResult && validationResult !== true) {
+        return validationResult;
+      }
+
+      if (
+        committee?.some(
+          (wallet, walletIndex) =>
+            ((web3Address.address &&
+              wallet.address.toLowerCase() ===
+                web3Address.address.toLowerCase()) ||
+              (web3Address.ensName &&
+                wallet.ensName.toLowerCase() ===
+                  web3Address.ensName.toLowerCase())) &&
+            walletIndex !== index
+        )
+      ) {
+        validationResult = t('errors.duplicateAddress');
+      }
+      return validationResult;
+    },
+    [provider, t, committee]
+  );
+
+  const handleOnChange = useCallback(
+    // to avoid nesting the InputWallet value, add the existing amount
+    // when the value of the address/ens changes
+    (e: unknown, onChange: (e: unknown) => void) => {
+      onChange({
+        ...(e as WalletInputValue),
+      });
+    },
+    [index, committee]
+  );
+
+  return (
+    <Container>
+      <Controller
+        defaultValue={{address: '', ensName: ''}}
+        name={`committee.${index}`}
+        control={control}
+        rules={{validate: value => addressValidator(value, index)}}
+        render={({
+          field: {name, ref, value, onBlur, onChange},
+          fieldState: {error},
+        }) => (
+          <AddressWrapper>
+            <LabelWrapper>
+              <Label label={t('labels.whitelistWallets.address')} />
+            </LabelWrapper>
+            <WrappedWalletInput
+              state={error && 'critical'}
+              value={value}
+              onBlur={onBlur}
+              onChange={e => handleOnChange(e, onChange)}
+              error={error?.message}
+              resolveLabels="onBlur"
+              ref={ref}
+              name={name}
+            />
+          </AddressWrapper>
+        )}
+      />
+
+      <DropdownMenuWrapper>
+        {/* Disable index 0 when minting to DAO Treasury is supported */}
+        <Dropdown
+          align="start"
+          trigger={
+            <ButtonIcon
+              mode="ghost"
+              size="large"
+              bgWhite
+              icon={<IconMenuVertical />}
+              data-testid="trigger"
+            />
+          }
+          sideOffset={8}
+          listItems={[
+            {
+              component: (
+                <ListItemAction
+                  title={t('labels.removeWallet')}
+                  {...(typeof onDelete !== 'function' && {mode: 'disabled'})}
+                  bgWhite
+                />
+              ),
+              callback: () => {
+                if (typeof onDelete === 'function') {
+                  onDelete(index);
+                  alert(t('alert.chip.removedAddress') as string);
+                }
+              },
+            },
+          ]}
+        />
+      </DropdownMenuWrapper>
+    </Container>
+  );
+};
+
+export default WalletRow;
+
+const Container = styled.div.attrs({
+  className: 'flex flex-wrap gap-x-2 gap-y-1.5 p-2 bg-ui-0',
+})``;
+
+const LabelWrapper = styled.div.attrs({
+  className: 'tablet:hidden mb-0.5',
+})``;
+
+const AddressWrapper = styled.div.attrs({
+  className: 'flex-1 order-1',
+})``;
+
+const DropdownMenuWrapper = styled.div.attrs({
+  className: 'flex order-2 tablet:order-5 mt-3.5 tablet:mt-0 w-6',
+})``;

src/components/addWallets/index.tsx

@@ -67,7 +67,7 @@ const AddWallets: React.FC = () => {
     remove(index);
     setTimeout(() => {
       trigger('wallets');
-    });
+    }, 50);
   };
 
   return (