feat: improve modal consistency

fedimint · Feb 5, 2025 · d8db3a0 · d8db3a0
1 parent 42871d6
commit d8db3a0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/apps/router/src/languages/en.json b/apps/router/src/languages/en.json
@@ -219,7 +219,9 @@
       "helper-text": "Will be wss:// for guardian or https:// for gateway",
       "service-type-label": "Service Type",
       "service-name-label": "Service Name",
-      "sync-status-label": "Sync Status"
+      "sync-status-label": "Sync Status",
+      "service-exists-error": "Service already exists",
+      "no-gateways-error": "Only Guardians can be added right now"
     },
     "remove-service-modal": {
       "title": "Remove {{type}}",

diff --git a/apps/router/src/modals/ConnectServiceModal.tsx b/apps/router/src/modals/ConnectServiceModal.tsx
@@ -10,6 +10,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  ModalFooter,
   Text,
   Badge,
   Flex,
@@ -54,7 +55,7 @@ export const ConnectServiceModal: React.FC<ConnectServiceModalProps> = ({
     try {
       const exists = await checkServiceExists(configUrl);
       if (exists) {
-        throw new Error('Service already exists');
+        throw new Error(t('home.connect-service-modal.service-exists-error'));
       }
 
       const id = await sha256Hash(configUrl);
@@ -69,10 +70,13 @@ export const ConnectServiceModal: React.FC<ConnectServiceModalProps> = ({
           payload: { id, guardian: { config: { id, baseUrl: configUrl } } },
         });
       } else {
-        dispatch({
-          type: APP_ACTION_TYPE.ADD_GATEWAY,
-          payload: { id, gateway: { config: { id, baseUrl: configUrl } } },
-        });
+        // When Gateway UI is production ready, the dispatch can be reinstated
+        throw new Error(t('home.connect-service-modal.no-gateways-error'));
+
+        // dispatch({
+        //   type: APP_ACTION_TYPE.ADD_GATEWAY,
+        //   payload: { id, gateway: { config: { id, baseUrl: configUrl } } },
+        // });
       }
 
       resetForm();
@@ -84,7 +88,7 @@ export const ConnectServiceModal: React.FC<ConnectServiceModalProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [configUrl, dispatch, resetForm, onClose, checkServiceExists]);
+  }, [configUrl, dispatch, resetForm, onClose, checkServiceExists, t]);
 
   return (
     <Modal
@@ -101,7 +105,7 @@ export const ConnectServiceModal: React.FC<ConnectServiceModalProps> = ({
           {t('home.connect-service-modal.title', 'Connect a Service')}
         </ModalHeader>
         <ModalCloseButton />
-        <ModalBody pb={6}>
+        <ModalBody>
           {error && (
             <Text color='red.500' mb={4}>
               {error}
@@ -120,15 +124,16 @@ export const ConnectServiceModal: React.FC<ConnectServiceModalProps> = ({
               }}
             />
           </FormControl>
+        </ModalBody>
+        <ModalFooter>
           <Button
-            mt={4}
             colorScheme='blue'
             onClick={handleConfirm}
             isLoading={isLoading}
           >
             {t('common.confirm')}
           </Button>
-        </ModalBody>
+        </ModalFooter>
       </ModalContent>
     </Modal>
   );

diff --git a/apps/router/src/modals/EditServiceModal.tsx b/apps/router/src/modals/EditServiceModal.tsx
@@ -10,6 +10,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  ModalFooter,
   useToast,
 } from '@chakra-ui/react';
 import { sha256Hash, useTranslation } from '@fedimint/utils';
@@ -103,18 +104,20 @@ export const EditServiceModal: React.FC<EditServiceModalProps> = ({
           })}
         </ModalHeader>
         <ModalCloseButton />
-        <ModalBody pb={6}>
+        <ModalBody>
           <FormControl>
             <FormLabel>{t('home.edit-service-modal.url-label')}</FormLabel>
             <Input
               value={configUrl}
               onChange={(e) => setConfigUrl(e.target.value)}
             />
           </FormControl>
-          <Button mt={4} colorScheme='blue' onClick={handleSubmit}>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme='blue' onClick={handleSubmit}>
             {t('common.save')}
           </Button>
-        </ModalBody>
+        </ModalFooter>
       </ModalContent>
     </Modal>
   );