Cannot Delegate modal added to app (#1208)

src/app.tsx

@@ -31,6 +31,7 @@ import {ProposalSettingsFormData} from 'utils/types';
 import {GatingMenu} from 'containers/gatingMenu';
 import {DelegationGatingMenu} from 'containers/delegationGatingMenu';
 import UpdateBanner from 'containers/navbar/updateBanner';
+import {CannotDelegateModal} from 'containers/cannotDelegateModal';
 
 export const App: React.FC = () => {
   // TODO this needs to be inside a Routes component. Will be moved there with
@@ -193,6 +194,7 @@ const DaoWrapper: React.FC = () => {
           <TransferMenu />
           <DepositModal />
           <GatingMenu />
+          <CannotDelegateModal />
           <DelegateVotingMenu />
           <DelegationGatingMenu />
           {isOpen && <TransactionDetail />}

src/containers/cannotDelegateModal/index.tsx

@@ -0,0 +1,62 @@
+import {ButtonText} from '@aragon/ods-old';
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import styled from 'styled-components';
+
+import ModalBottomSheetSwitcher from 'components/modalBottomSheetSwitcher';
+import {
+  ModalBody,
+  StyledImage,
+  WarningContainer,
+  WarningTitle,
+} from 'containers/networkErrorMenu';
+import {useGlobalModalContext} from 'context/globalModals';
+import WalletIcon from 'public/wallet.svg';
+import {useDaoDetailsQuery} from 'hooks/useDaoDetails';
+import {useDaoToken} from 'hooks/useDaoToken';
+
+export const CannotDelegateModal: React.FC = () => {
+  const {close, isOpen} = useGlobalModalContext('cannotDelegate');
+
+  const {t} = useTranslation();
+
+  const {data: daoDetails} = useDaoDetailsQuery();
+  const {plugins} = daoDetails ?? {};
+  const daoName = daoDetails?.metadata.name;
+
+  const {data: daoToken} = useDaoToken(plugins?.[0].instanceAddress);
+
+  const handleCloseMenu = () => {
+    close();
+  };
+
+  return (
+    <ModalBottomSheetSwitcher isOpen={isOpen} onClose={handleCloseMenu}>
+      <ModalBody>
+        <StyledImage src={WalletIcon} />
+
+        <WarningContainer>
+          <WarningTitle>
+            {t('alert.gatingUsers.cannotDelegateTitle')}
+          </WarningTitle>
+          <WarningDescription>
+            {t('alert.gatingUsers.cannotDelegateDescription', {
+              daoName: daoName,
+              tokenName: daoToken?.name,
+            })}
+          </WarningDescription>
+        </WarningContainer>
+
+        <ButtonText
+          label={t('alert.gatingUsers.buttonLabel')}
+          onClick={handleCloseMenu}
+          size="large"
+        />
+      </ModalBody>
+    </ModalBottomSheetSwitcher>
+  );
+};
+
+const WarningDescription = styled.p.attrs({
+  className: 'text-base text-neutral-500 text-center',
+})``;

src/containers/delegateVotingMenu/delegateVotingMenu.tsx

@@ -225,7 +225,7 @@ export const DelegateVotingMenu: React.FC = () => {
       !isOnWrongNetwork &&
       tokenBalance?.value === 0n
     ) {
-      open('gating');
+      open('cannotDelegate');
     }
   }, [
     isConnected,

src/context/globalModals.tsx

@@ -27,15 +27,15 @@ export type DialogType =
   | 'wallet'
   | 'network'
   | 'mobileMenu'
-  | 'network'
   | 'manageWallet'
   | 'gating'
   | 'deposit'
   | 'poapClaim'
   | 'exportCsv'
   | 'delegateVoting'
   | 'delegationGating'
-  | 'committeeMembers';
+  | 'committeeMembers'
+  | 'cannotDelegate';
 
 type Props = Record<'children', ReactNode>;
 

src/locales/en/common.json

@@ -489,6 +489,8 @@
     "gatingUsers": {
       "tokenTitle": "You can’t create a proposal",
       "tokenDescription": "You don’t have the required voting power or token balance. Creating proposals in {{daoName}} requires at least {{amount}} ‘{{tokenSymbol}}’ in either voting power or token balance.",
+      "cannotDelegateTitle": "You can’t delegate",
+      "cannotDelegateDescription": "You don’t have the required token balance. Delegating in {{daoName}} requires holding {{tokenName}}.",
       "walletTitle": "You can’t create a proposal",
       "walletDescription": "You are not a member. Creating proposals in {{daoName}} can only be done by addresses that have been added to its member list.",
       "buttonLabel": "Ok, understood"