Fix: Plugin update proposal execution flow (#1143)

* add new verification card * update the SDK and fix update flow small issues * Fix lint errors and update SDK to support proposal id for verification functions * text input disabled text color * add SDK integrated verification card in proposal page * add error list to verification card * fix error list view * resolve comments * resolve comment v2 * fix lint errors * fix second round of comments * fix common js * invalidate protocol and plugin queries * status lowercase * lint --------- Co-authored-by: Fabrice Francois <[email protected]>
aragon · Nov 28, 2023 · 354fd27 · 354fd27
1 parent 447845b
commit 354fd27
Show file tree

Hide file tree

Showing 22 changed files with 473 additions and 350 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.8",
     "@aragon/ods": "^1.0.4",
-    "@aragon/sdk-client": "^1.19.0",
+    "@aragon/sdk-client": "^1.19.2",
     "@aragon/sdk-client-common": "1.11.0",
     "@elastic/apm-rum-react": "^2.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -123,4 +123,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}
diff --git a/src/@aragon/ods-old/components/input/textInput.tsx b/src/@aragon/ods-old/components/input/textInput.tsx
@@ -48,7 +48,9 @@ type StyledContainerProps = Pick<
 export const Container = styled.div.attrs<StyledContainerProps>(
   ({mode, disabled, containerClassName}) => {
     let className = `${
-      disabled ? 'bg-neutral-100 border-neutral-200 border-2' : 'bg-neutral-0'
+      disabled
+        ? 'bg-neutral-100 border-neutral-200 border-2  text-neutral-700'
+        : 'bg-neutral-0'
     } flex items-center focus-within:border-primary-500 focus-within:hover:border-primary-500
     rounded-xl hover:border-neutral-300 border-2 h-12 `;
 

diff --git a/src/components/proposalList/index.tsx b/src/components/proposalList/index.tsx
@@ -8,7 +8,6 @@ import {useTranslation} from 'react-i18next';
 import {NavigateFunction, generatePath, useNavigate} from 'react-router-dom';
 
 import {useNetwork} from 'context/network';
-import {useClient} from 'hooks/useClient';
 import {useDaoMembers} from 'hooks/useDaoMembers';
 import {PluginTypes} from 'hooks/usePluginClient';
 import {useWallet} from 'hooks/useWallet';
@@ -25,11 +24,11 @@ import {
   TokenVotingOptions,
   getErc20Results,
   isErc20VotingProposal,
-  isVerifiedAragonUpdateProposal,
   stripPlgnAdrFromProposalId,
   isGaslessProposal,
 } from 'utils/proposals';
 import {ProposalListItem} from 'utils/types';
+import {useIsUpdateProposal} from 'hooks/useIsUpdateProposal';
 
 type ProposalListProps = {
   proposals: Array<ProposalListItem>;
@@ -59,21 +58,19 @@ type ProposalListItemProps = CardProposalProps & {
   actions: DaoAction[];
 };
 
-const ProposalItem: React.FC<ProposalListItemProps> = ({actions, ...props}) => {
+const ProposalItem: React.FC<ProposalListItemProps> = ({
+  proposalId,
+  ...props
+}) => {
   const {t} = useTranslation();
-  const {client} = useClient();
-
-  let verifiedUpdateProposal = false;
-
-  if (client != null) {
-    verifiedUpdateProposal = isVerifiedAragonUpdateProposal(actions, client);
-  }
+  const [{data: isPluginUpdate}, {data: isOSUpdate}] =
+    useIsUpdateProposal(proposalId);
 
   return (
     <CardProposal
       {...props}
       bannerContent={
-        verifiedUpdateProposal &&
+        (isPluginUpdate || isOSUpdate) &&
         featureFlags.getValue('VITE_FEATURE_FLAG_OSX_UPDATES') === 'true'
           ? t('update.proposal.bannerTitle')
           : ''

diff --git a/src/containers/defineProposal/update.tsx b/src/containers/defineProposal/update.tsx
@@ -48,6 +48,10 @@ export const DefineUpdateProposal: React.FC = () => {
   // data fetching
   const {data: dao, isLoading: detailsLoading} = useDaoDetailsQuery();
   const daoAddress = dao?.address as string;
+  const pluginUpdateTypeLabel =
+    dao?.plugins[0].id === 'token-voting.plugin.dao.eth'
+      ? 'Token voting'
+      : 'Multisig';
 
   const {data: releases, isLoading: releaseNotesLoading} = useReleaseNotes();
   const {data: protocolVersion, isLoading: protocolVersionLoading} =
@@ -120,7 +124,10 @@ export const DefineUpdateProposal: React.FC = () => {
     {
       id: 'plugin',
       releaseNote: pluginReleaseNotes,
-      label: osxUpdates.getPluginUpdateLabel(pluginSelectedVersion?.version),
+      label: osxUpdates.getPluginUpdateLabel(
+        pluginSelectedVersion?.version,
+        pluginUpdateTypeLabel
+      ),
       linkLabel: t('update.item.releaseNotesLabel'),
       ...(isLatestPlugin && {tagLabelNatural: t('update.item.tagLatest')}),
       ...(isPluginPrepared
@@ -363,8 +370,7 @@ export const DefineUpdateProposal: React.FC = () => {
 };
 
 const UpdateGroupWrapper = styled.div.attrs({
-  className:
-    'flex flex-col items-center md:flex-row md:justify-center md:items-stretch gap-y-3 gap-x-6',
+  className: 'flex flex-col items-center md:justify-center gap-y-3',
 })``;
 
 const UpdateContainer = styled.div.attrs({

diff --git a/src/containers/proposalSnapshot/index.tsx b/src/containers/proposalSnapshot/index.tsx
@@ -16,7 +16,6 @@ import {proposal2CardProps} from 'components/proposalList';
 import {StateEmpty} from 'components/stateEmpty';
 import {Loading} from 'components/temporary';
 import {useNetwork} from 'context/network';
-import {useClient} from 'hooks/useClient';
 import {useDaoMembers} from 'hooks/useDaoMembers';
 import {PluginTypes} from 'hooks/usePluginClient';
 import {useWallet} from 'hooks/useWallet';
@@ -27,8 +26,8 @@ import {
 import {featureFlags} from 'utils/featureFlags';
 import {htmlIn} from 'utils/htmlIn';
 import {Governance, NewProposal} from 'utils/paths';
-import {isVerifiedAragonUpdateProposal} from 'utils/proposals';
 import {ProposalTypes} from 'utils/types';
+import {useIsUpdateProposal} from 'hooks/useIsUpdateProposal';
 
 type Props = {
   daoAddressOrEns: string;
@@ -41,21 +40,16 @@ type ProposalItemProps = CardProposalProps & {
   actions: DaoAction[];
 };
 
-const ProposalItem: React.FC<ProposalItemProps> = ({actions, ...props}) => {
+const ProposalItem: React.FC<ProposalItemProps> = ({proposalId, ...props}) => {
   const {t} = useTranslation();
-  const {client} = useClient();
-
-  let verifiedUpdateProposal = false;
-
-  if (client != null) {
-    verifiedUpdateProposal = isVerifiedAragonUpdateProposal(actions, client);
-  }
+  const [{data: isPluginUpdate}, {data: isOSUpdate}] =
+    useIsUpdateProposal(proposalId);
 
   return (
     <CardProposal
       {...props}
       bannerContent={
-        verifiedUpdateProposal &&
+        (isPluginUpdate || isOSUpdate) &&
         featureFlags.getValue('VITE_FEATURE_FLAG_OSX_UPDATES') === 'true'
           ? t('update.proposal.bannerTitle')
           : ''

diff --git a/src/containers/reviewProposal/index.tsx b/src/containers/reviewProposal/index.tsx
@@ -291,19 +291,6 @@ const ReviewProposal: React.FC<ReviewProposalProps> = ({
         <ProposalContainer>
           {values.proposal && <StyledEditorContent editor={editor} />}
 
-          {/* TODO: Add isUpdateProposal check once it's developed
-          {featureFlags.getValue('VITE_FEATURE_FLAG_OSX_UPDATES') ===
-            'true' && (
-            <UpdateVerificationCard
-              actions={getNonEmptyActions(
-                values.actions,
-                isMultisigVotingSettings(votingSettings)
-                  ? votingSettings
-                  : undefined
-              )}
-            />
-          )} */}
-
           {votingSettings && (
             <VotingTerminal
               title={

diff --git a/src/containers/smartContractComposer/components/contractAddressValidation.tsx b/src/containers/smartContractComposer/components/contractAddressValidation.tsx
@@ -436,7 +436,9 @@ const ContractAddressValidation: React.FC<Props> = props => {
         <div className="flex space-x-2">
           <Spinner size={'xs'} className="text-primary-500" />
           <VerificationStatus colorClassName="text-primary-800">
-            {t('scc.validation.etherscanStatusPending')}
+            {t('scc.validation.etherscanStatusPending', {
+              blockExplorerName: CHAIN_METADATA[network].explorerName,
+            })}
           </VerificationStatus>
         </div>
       );
@@ -449,7 +451,9 @@ const ContractAddressValidation: React.FC<Props> = props => {
           <div className="flex space-x-2">
             <IconSuccess className="text-success-500" />
             <VerificationStatus colorClassName="text-success-800">
-              {t('scc.validation.etherscanStatusSuccess')}
+              {t('scc.validation.etherscanStatusSuccess', {
+                blockExplorerName: CHAIN_METADATA[network].explorerName,
+              })}
             </VerificationStatus>
           </div>
         );
@@ -458,13 +462,15 @@ const ContractAddressValidation: React.FC<Props> = props => {
           <div className="flex space-x-2">
             <IconRadioCancel className="text-critical-500" />
             <VerificationStatus colorClassName="text-critical-800">
-              {t('scc.validation.etherscanStatusCritical')}
+              {t('scc.validation.etherscanStatusCritical', {
+                blockExplorerName: CHAIN_METADATA[network].explorerName,
+              })}
             </VerificationStatus>
           </div>
         );
       }
     }
-  }, [etherscanData, etherscanLoading, isTransactionError, t]);
+  }, [etherscanData, etherscanLoading, isTransactionError, network, t]);
 
   return (
     <ModalBottomSheetSwitcher

diff --git a/src/containers/updateListItem/updateListItem.tsx b/src/containers/updateListItem/updateListItem.tsx
@@ -96,16 +96,7 @@ export const UpdateListItem: React.FC<CheckboxListItemProps> = ({
           </span>
         </div>
         {(buttonPrimaryLabel || buttonSecondaryLabel) && (
-          <div className="mt-6 flex flex-col gap-y-3">
-            {buttonPrimaryLabel && (
-              <ButtonText
-                label={buttonPrimaryLabel}
-                mode="primary"
-                disabled={disabled}
-                size="medium"
-                onClick={onClickActionPrimary}
-              />
-            )}
+          <div className="mt-6 flex flex-col gap-y-3 md:flex-row">
             {buttonSecondaryLabel && (
               <ButtonText
                 label={buttonSecondaryLabel}
@@ -116,6 +107,15 @@ export const UpdateListItem: React.FC<CheckboxListItemProps> = ({
                 onClick={onClickActionSecondary}
               />
             )}
+            {buttonPrimaryLabel && (
+              <ButtonText
+                label={buttonPrimaryLabel}
+                mode="primary"
+                disabled={disabled}
+                size="medium"
+                onClick={onClickActionPrimary}
+              />
+            )}
           </div>
         )}
       </Wrapper>
@@ -129,7 +129,7 @@ type ContainerTypes = {
 };
 
 const Container = styled.div.attrs<ContainerTypes>(({disabled, type}) => ({
-  className: `flex-1 py-3 px-4 rounded-xl border-2 focus:outline-none focus-visible:ring focus-visible:ring-primary max-w-[364px] ${
+  className: `flex-1 py-3 px-4 rounded-xl border-2 focus:outline-none focus-visible:ring focus-visible:ring-primary w-full ${
     disabled
       ? 'bg-neutral-100 border-neutral-300'
       : `bg-neutral-0 group hover:border-primary-500 cursor-pointer ${

diff --git a/src/containers/updateVerificationCard/Status.tsx b/src/containers/updateVerificationCard/Status.tsx