Merge branch 'develop' into refactor/replace-is-address

decentdao · Apr 18, 2024 · 79ea404 · 79ea404
2 parents 122bb11 + b7a92bc
commit 79ea404
Show file tree

Hide file tree

Showing 22 changed files with 144 additions and 106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "fractal-interface",
   "private": true,
   "dependencies": {
+    "@adraffy/ens-normalize": "^1.10.1",
     "@apollo/client": "^3.7.10",
     "@chakra-ui/react": "^2.8.2",
     "@decent-org/fractal-ui": "^0.1.25",

diff --git a/src/components/DaoCreator/constants.ts b/src/components/DaoCreator/constants.ts
@@ -13,7 +13,7 @@ export const initialState: CreatorFormState = {
   essentials: {
     daoName: '',
     governance: GovernanceType.MULTISIG,
-    snapshotURL: '',
+    snapshotENS: '',
   },
   erc20Token: {
     tokenCreationType: TokenCreationType.NEW,

diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
@@ -1,6 +1,7 @@
+import { ens_normalize } from '@adraffy/ens-normalize';
 import { Box, Divider, Input, RadioGroup } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { URL_DOCS_GOV_TYPES } from '../../../constants/url';
@@ -29,23 +30,29 @@ export function EstablishEssentials(props: ICreationStepProps) {
   const { t } = useTranslation(['daoCreate', 'common']);
   const { values, setFieldValue, isSubmitting, transactionPending, isSubDAO, errors, mode } = props;
 
+  const [isSnapshotSpaceValid, setSnapshotSpaceValid] = useState(true);
+
   const {
-    node: { daoName, daoSnapshotURL, daoAddress },
+    node: { daoName, daoSnapshotENS, daoAddress },
   } = useFractal();
 
   const isEdit = mode === DAOCreateMode.EDIT;
 
   useEffect(() => {
     if (isEdit) {
       setFieldValue('essentials.daoName', daoName, false);
-      if (createAccountSubstring(daoAddress!) !== daoName)
-        setFieldValue('essentials.snapshotURL', daoSnapshotURL || '', false);
+      if (createAccountSubstring(daoAddress!) !== daoName) {
+        // Pre-fill the snapshot URL form field when editing
+        setFieldValue('essentials.snapshotENS', daoSnapshotENS || '', false);
+      }
     }
-  }, [setFieldValue, mode, daoName, daoSnapshotURL, isEdit, daoAddress]);
+  }, [setFieldValue, mode, daoName, daoSnapshotENS, isEdit, daoAddress]);
 
   const daoNameDisabled =
     isEdit && !!daoName && !!daoAddress && createAccountSubstring(daoAddress) !== daoName;
-  const snapshotURLDisabled = isEdit && !!daoSnapshotURL;
+
+  // If in governance edit mode and snapshot URL is already set, disable the field
+  const snapshotENSDisabled = isEdit && !!daoSnapshotENS;
 
   const handleGovernanceChange = (value: string) => {
     if (value === GovernanceType.AZORIUS_ERC20) {
@@ -57,6 +64,24 @@ export function EstablishEssentials(props: ICreationStepProps) {
     setFieldValue('essentials.governance', value);
   };
 
+  const handleSnapshotSpaceChange = (value: string) => {
+    setFieldValue('essentials.snapshotENS', value, true);
+
+    // If there's no input in the snapshot URL field, we don't need to check if it's valid
+    if (!value) {
+      setSnapshotSpaceValid(true);
+      return;
+    }
+
+    try {
+      ens_normalize(value);
+      setSnapshotSpaceValid(true);
+    } catch (error) {
+      console.log(error);
+      setSnapshotSpaceValid(false);
+    }
+  };
+
   const { createOptions } = useNetworkConfig();
 
   return (
@@ -160,14 +185,13 @@ export function EstablishEssentials(props: ICreationStepProps) {
         helper={t('snapshotHelper')}
         isRequired={false}
       >
-        <LabelWrapper errorMessage={errors?.essentials?.snapshotURL}>
+        <LabelWrapper errorMessage={errors?.essentials?.snapshotENS}>
           <Input
-            value={values.essentials.snapshotURL}
-            onChange={cEvent => setFieldValue('essentials.snapshotURL', cEvent.target.value, true)}
-            isDisabled={snapshotURLDisabled}
-            data-testid="essentials-snapshotURL"
+            value={values.essentials.snapshotENS}
+            onChange={cEvent => handleSnapshotSpaceChange(cEvent.target.value)}
+            isDisabled={snapshotENSDisabled}
+            data-testid="essentials-snapshotENS"
             placeholder="example.eth"
-            maxLength={30}
           />
         </LabelWrapper>
       </LabelComponent>
@@ -179,6 +203,7 @@ export function EstablishEssentials(props: ICreationStepProps) {
       <StepButtons
         {...props}
         isNextDisabled={
+          !isSnapshotSpaceValid ||
           values.essentials.daoName.length === 0 || // TODO formik should do this, not sure why it's enabled on first pass
           (isEdit && values.essentials.governance === GovernanceType.MULTISIG)
         }

diff --git a/src/components/DaoCreator/index.tsx b/src/components/DaoCreator/index.tsx
@@ -29,6 +29,7 @@ function DaoCreator({
         onSubmit={async values => {
           const choosenGovernance = values.essentials.governance;
           const freezeGuard = isSubDAO ? values.freeze : undefined;
+
           switch (choosenGovernance) {
             case GovernanceType.MULTISIG: {
               const data = await prepareMultisigFormData({

diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
@@ -20,7 +20,7 @@ export function ProposalInfo({
   const metaData = useGetMetadata(proposal);
   const { t } = useTranslation('proposal');
   const {
-    node: { daoSnapshotURL },
+    node: { daoSnapshotENS },
   } = useFractal();
   const { isSnapshotProposal } = useSnapshotProposal(proposal);
 
@@ -36,7 +36,7 @@ export function ProposalInfo({
         {isSnapshotProposal && (
           <>
             <Snapshot
-              snapshotURL={`${daoSnapshotURL}/proposal/${proposal.proposalId}`}
+              snapshotENS={`https://snapshot.org/#${daoSnapshotENS}/proposal/${proposal.proposalId}`}
               mt={0}
             />
             {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && (

diff --git a/src/components/Proposals/index.tsx b/src/components/Proposals/index.tsx
@@ -42,7 +42,7 @@ const FILTERS_SNAPSHOT = [FractalProposalState.CLOSED, FractalProposalState.PEND
 
 export default function Proposals() {
   const {
-    node: { daoSnapshotURL },
+    node: { daoSnapshotENS },
     governance: { type },
     guardContracts,
   } = useFractal();
@@ -72,12 +72,12 @@ export default function Proposals() {
         }
         break;
     }
-    if (daoSnapshotURL) {
+    if (daoSnapshotENS) {
       options = [...options, ...FILTERS_SNAPSHOT];
     }
     setAllOptions(options);
     setFilters(options);
-  }, [daoSnapshotURL, guardContracts.freezeGuardContractAddress, type]);
+  }, [daoSnapshotENS, guardContracts.freezeGuardContractAddress, type]);
 
   const toggleFilter = (filter: FractalProposalState) => {
     setFilters(prevState => {

diff --git a/src/components/pages/DaoSettings/components/Metadata/index.tsx b/src/components/pages/DaoSettings/components/Metadata/index.tsx
@@ -1,3 +1,4 @@
+import { ens_normalize } from '@adraffy/ens-normalize';
 import { Flex, Text, Button, Divider } from '@chakra-ui/react';
 import { useState, useEffect, ChangeEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,21 +11,20 @@ import { createAccountSubstring } from '../../../../../hooks/utils/useDisplayNam
 import { useFractal } from '../../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { ProposalExecuteData } from '../../../../../types';
-import { couldBeENS } from '../../../../../utils/url';
 import { InputComponent } from '../../../../ui/forms/InputComponent';
 
 export default function MetadataContainer() {
   const [name, setName] = useState('');
-  const [snapshotURL, setSnapshotURL] = useState('');
-  const [snapshotURLValid, setSnapshotURLValid] = useState<boolean>();
+  const [snapshotENS, setSnapshotENS] = useState('');
+  const [snapshotENSValid, setSnapshotENSValid] = useState<boolean>();
   const { t } = useTranslation(['settings', 'proposalMetadata']);
   const navigate = useNavigate();
 
   const { submitProposal } = useSubmitProposal();
   const { canUserCreateProposal } = useCanUserCreateProposal();
   const {
     baseContracts,
-    node: { daoName, daoSnapshotURL, daoAddress, safe },
+    node: { daoName, daoSnapshotENS, daoAddress, safe },
     readOnly: {
       user: { votingWeight },
     },
@@ -36,19 +36,19 @@ export default function MetadataContainer() {
       setName(daoName);
     }
 
-    if (daoSnapshotURL) {
-      setSnapshotURL(daoSnapshotURL);
+    if (daoSnapshotENS) {
+      setSnapshotENS(daoSnapshotENS);
     }
-  }, [daoName, daoSnapshotURL, daoAddress]);
+  }, [daoName, daoSnapshotENS, daoAddress]);
 
-  const handleSnapshotURLChange: ChangeEventHandler<HTMLInputElement> = e => {
-    if (couldBeENS(e.target.value)) {
-      setSnapshotURLValid(true);
-    } else {
-      setSnapshotURLValid(false);
+  const handleSnapshotENSChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setSnapshotENS(e.target.value);
+    try {
+      ens_normalize(e.target.value);
+      setSnapshotENSValid(true);
+    } catch (error) {
+      setSnapshotENSValid(false);
     }
-
-    setSnapshotURL(e.target.value);
   };
 
   const userHasVotingWeight = votingWeight > 0n;
@@ -87,7 +87,7 @@ export default function MetadataContainer() {
     });
   };
 
-  const handleEditDAOSnapshotURL = () => {
+  const handleEditDAOSnapshotENS = () => {
     if (!baseContracts) {
       return;
     }
@@ -102,8 +102,8 @@ export default function MetadataContainer() {
       values: [0n],
       calldatas: [
         keyValuePairsContract.asProvider.interface.encodeFunctionData('updateValues', [
-          ['snapshotURL'],
-          [snapshotURL],
+          ['snapshotENS'],
+          [snapshotENS],
         ]),
       ],
     };
@@ -182,21 +182,21 @@ export default function MetadataContainer() {
         {canUserCreateProposal && (
           <Button
             variant="tertiary"
-            disabled={!snapshotURLValid || snapshotURL === daoSnapshotURL}
-            isDisabled={!snapshotURLValid || snapshotURL === daoSnapshotURL}
-            onClick={handleEditDAOSnapshotURL}
+            disabled={!snapshotENSValid || snapshotENS === daoSnapshotENS}
+            isDisabled={!snapshotENSValid || snapshotENS === daoSnapshotENS}
+            onClick={handleEditDAOSnapshotENS}
           >
             {t('proposeChanges')}
           </Button>
         )}
       </Flex>
       <InputComponent
         isRequired={false}
-        onChange={handleSnapshotURLChange}
-        value={snapshotURL}
+        onChange={handleSnapshotENSChange}
+        value={snapshotENS}
         disabled={!userHasVotingWeight}
-        placeholder="httpsexample.eth"
-        testId="daoSettings.snapshotUrl"
+        placeholder="example.eth"
+        testId="daoSettings.snapshotENS"
         gridContainerProps={{
           display: 'inline-flex',
           flexWrap: 'wrap',

diff --git a/src/components/ui/badges/Snapshot.tsx b/src/components/ui/badges/Snapshot.tsx
@@ -2,13 +2,13 @@ import { Button, ButtonProps, Image, Link } from '@chakra-ui/react';
 import { t } from 'i18next';
 
 interface Props extends ButtonProps {
-  snapshotURL: string;
+  snapshotENS: string;
 }
 
-export default function Snapshot({ snapshotURL, mt }: Props) {
+export default function Snapshot({ snapshotENS, mt }: Props) {
   return (
     <Button
-      href={snapshotURL}
+      href={`https://snapshot.org/#${snapshotENS}`}
       as={Link}
       target="_blank"
       variant="secondary"

diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
@@ -138,7 +138,7 @@ export function DAOInfoCard({
           // empty box to keep snapshot bottom aligned
           <Box />
         )}
-        {node.daoSnapshotURL && <Snapshot snapshotURL={node.daoSnapshotURL} />}
+        {node.daoSnapshotENS && <Snapshot snapshotENS={node.daoSnapshotENS} />}
       </Flex>
     </Flex>
   );

diff --git a/src/hooks/DAO/loaders/snapshot/index.ts b/src/hooks/DAO/loaders/snapshot/index.ts
@@ -11,9 +11,9 @@ const defaultOptions: DefaultOptions = {
   },
 };
 
-export const createClient = (uri: string) =>
+export const createSnapshotGraphQlClient = () =>
   new ApolloClient({
-    uri: `https://${uri.includes('testnet') ? 'testnet.' : ''}hub.snapshot.org/graphql`,
+    uri: 'https://hub.snapshot.org/graphql',
     cache: new InMemoryCache(),
     defaultOptions,
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -138,7 +138,7 @@ export function DAOInfoCard({ @@
               // empty box to keep snapshot bottom aligned
               <Box />
             )}
-            {node.daoSnapshotURL && <Snapshot snapshotURL={node.daoSnapshotURL} />}
+            {node.daoSnapshotENS && <Snapshot snapshotENS={node.daoSnapshotENS} />}
           </Flex>
         </Flex>
       );
@@ Expand Down @@