Update copy and fix some bugs in airdrop modal

decentdao · Dec 20, 2024 · 4f1c828 · 4f1c828
1 parent bbb5bc9
commit 4f1c828
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 21 deletions.
diff --git a/src/components/ui/modals/AirdropModal.tsx b/src/components/ui/modals/AirdropModal.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Flex, HStack, Select, Text } from '@chakra-ui/react';
-import { CaretDown, Plus } from '@phosphor-icons/react';
+import { Box, Button, Flex, HStack, IconButton, Select, Text } from '@chakra-ui/react';
+import { CaretDown, MinusCircle, Plus } from '@phosphor-icons/react';
 import { Field, FieldAttributes, FieldProps, Form, Formik } from 'formik';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -116,7 +116,7 @@ export function AirdropModal({
       <Formik<AirdropFormValues>
         initialValues={{
           selectedAsset: fungibleAssetsWithBalance[0],
-          recipients: [],
+          recipients: [{ address: '', amount: { bigintValue: 0n, value: '0' } }],
         }}
         onSubmit={handleAirdropSubmit}
         validationSchema={airdropValidationSchema}
@@ -150,8 +150,6 @@ export function AirdropModal({
                         iconSize="1.5rem"
                         icon={<CaretDown />}
                         onChange={e => {
-                          // New asset selected. First reset the form input amount
-                          setFieldValue('inputAmount', undefined);
                           setFieldValue(
                             'selectedAsset',
                             fungibleAssetsWithBalance[Number(e.target.value)],
@@ -203,7 +201,9 @@ export function AirdropModal({
                       <Box
                         key={index}
                         display="flex"
+                        alignItems="center"
                         gap="1rem"
+                        mb="2.5rem"
                       >
                         <LabelWrapper
                           label={t('recipientsLabel')}
@@ -212,6 +212,7 @@ export function AirdropModal({
                             field.value &&
                             field.value[index].address &&
                             errors.recipients &&
+                            errors.recipients[index] &&
                             (errors.recipients[index] as { address: string }).address
                           }
                         >
@@ -252,18 +253,44 @@ export function AirdropModal({
                             parentFormikValue={recipient.amount}
                             decimalPlaces={values.selectedAsset.decimals}
                             placeholder="0"
-                            maxValue={BigInt(values.selectedAsset.balance)}
+                            maxValue={BigInt(values.selectedAsset.balance) - BigInt(totalAmount)}
                             isInvalid={overDraft}
                             errorBorderColor="red-0"
                           />
                         </LabelWrapper>
+                        {/* Remove parameter button */}
+                        {index !== 0 || values.recipients.length !== 1 ? (
+                          <IconButton
+                            icon={<MinusCircle />}
+                            aria-label={t('removeRecipientLabel')}
+                            variant="unstyled"
+                            onClick={() =>
+                              setFieldValue(
+                                `recipients`,
+                                values.recipients.filter(
+                                  (_recipientToRemove, recipientToRemoveIndex) =>
+                                    recipientToRemoveIndex !== index,
+                                ),
+                              )
+                            }
+                            minWidth="auto"
+                            color="lilac-0"
+                            _disabled={{ opacity: 0.4, cursor: 'default' }}
+                            sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }}
+                          />
+                        ) : (
+                          <Box h="2.25rem" />
+                        )}
                       </Box>
                     );
                   })
                 }
               </Field>
 
-              <Box>
+              <Box
+                mt="3rem"
+                w="100%"
+              >
                 <Button
                   onClick={() =>
                     setFieldValue('recipients', [

diff --git a/src/i18n/locales/en/modals.json b/src/i18n/locales/en/modals.json
@@ -52,5 +52,6 @@
   "add": "Add",
   "recipientsLabel": "Recipient",
   "recipientsSublabel": "Enter the Ethereum wallet address of the recipient",
-  "airdropAmountSublabel": "Enter the amount of tokens to be airdropped to the recipient"
+  "airdropAmountSublabel": "Enter the amount of tokens to be airdropped to the recipient",
+  "addRecipient": "Add Recipient"
 }
diff --git a/src/i18n/locales/en/proposalTemplate.json b/src/i18n/locales/en/proposalTemplate.json
@@ -33,11 +33,11 @@
   "targetDAOAddressHelper": "Set the location that will receive this duplicated template",
   "forkTemplateSubmitButton": "Review Forked Template",
   "showParameters": "Show All",
-  "preConfiguredTemplates": "Pre-configured Templates",
+  "defaultTemplates": "Default Templates",
   "templateTransferTitle": "Transfer",
-  "templateTransferDescription": "Transfer funds from DAO's Safe to a specified address",
-  "templateSablierTitle": "Create Sablier Stream",
-  "templateSablierDescription": "Create stream(s) to a specified address(es) with desired tranches - configurable amounts and durations",
-  "templateAirdropTitle": "Airdrop Tokens",
-  "templateAirdropDescription": "Airdrop tokens to a specified address(es) with desired amounts"
+  "templateTransferDescription": "Send payment to a recipient",
+  "templateSablierTitle": "Stream",
+  "templateSablierDescription": "Stream funds to a recipient over time",
+  "templateAirdropTitle": "Airdrop",
+  "templateAirdropDescription": "Send tokens to multiple recipients"
 }
diff --git a/src/pages/dao/proposal-templates/SafeProposalTemplatesPage.tsx b/src/pages/dao/proposal-templates/SafeProposalTemplatesPage.tsx
@@ -87,18 +87,13 @@ export function SafeProposalTemplatesPage() {
 
   const openAirdropModal = useDecentModal(ModalType.AIRDROP, {
     onSubmit: handleAirdropSubmit,
-    submitButtonText: t('submitProposal'),
+    submitButtonText: t('submitProposal', { ns: 'modals' }),
     showNonceInput: false,
   });
 
   const EXAMPLE_TEMPLATES = useMemo(() => {
     if (!safeAddress) return [];
     return [
-      {
-        title: t('templateTransferTitle', { ns: 'proposalTemplate' }),
-        description: t('templateTransferDescription', { ns: 'proposalTemplate' }),
-        onProposalTemplateClick: openSendAssetsModal,
-      },
       {
         title: t('templateAirdropTitle', { ns: 'proposalTemplate' }),
         description: t('templateAirdropDescription', { ns: 'proposalTemplate' }),
@@ -110,6 +105,11 @@ export function SafeProposalTemplatesPage() {
         onProposalTemplateClick: () =>
           navigate(DAO_ROUTES.proposalSablierNew.relative(addressPrefix, safeAddress)),
       },
+      {
+        title: t('templateTransferTitle', { ns: 'proposalTemplate' }),
+        description: t('templateTransferDescription', { ns: 'proposalTemplate' }),
+        onProposalTemplateClick: openSendAssetsModal,
+      },
     ];
   }, [t, openSendAssetsModal, navigate, safeAddress, addressPrefix, openAirdropModal]);
 
@@ -167,7 +167,7 @@ export function SafeProposalTemplatesPage() {
         color="white-0"
         mb="1rem"
       >
-        {t('preConfiguredTemplates', { ns: 'proposalTemplate' })}
+        {t('defaultTemplates', { ns: 'proposalTemplate' })}
       </Text>
       <Flex
         flexDirection="row"