feat: info alert for no lightning gateways

Kodylow · Nov 10, 2023 · a489dd0 · a489dd0
1 parent 9ce8ee6
commit a489dd0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/apps/guardian-ui/src/components/GatewaysCard.tsx b/apps/guardian-ui/src/components/GatewaysCard.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
   Card,
-  CardBody,
   CardHeader,
   Flex,
   Link,
@@ -13,6 +17,7 @@ import { Table, TableColumn, TableRow } from '@fedimint/ui';
 import { useTranslation, formatEllipsized } from '@fedimint/utils';
 import { useAdminContext } from '../hooks';
 import { LightningModuleRpc } from '../GuardianApi';
+import { ReactComponent as InfoIcon } from '../assets/svgs/info.svg';
 
 type TableKey = 'nodeId' | 'gatewayId' | 'fee';
 
@@ -106,9 +111,25 @@ export const GatewaysCard: React.FC<GatewaysCardProps> = ({ config }) => {
           {t('federation-dashboard.gateways.label')}
         </Text>
       </CardHeader>
-      <CardBody>
+      {gateways.length === 0 ? (
+        <Flex justifyContent='center' mx={4}>
+          <Alert status='info'>
+            <AlertIcon as={InfoIcon} />
+            <Box>
+              <AlertTitle>
+                {t('federation-dashboard.gateways.no-gateways-info-title')}
+              </AlertTitle>
+              <AlertDescription>
+                {t(
+                  'federation-dashboard.gateways.no-gateways-info-description'
+                )}
+              </AlertDescription>
+            </Box>
+          </Alert>
+        </Flex>
+      ) : (
         <Table columns={columns} rows={rows} />
-      </CardBody>
+      )}
     </Card>
   );
 };
diff --git a/apps/guardian-ui/src/languages/en.json b/apps/guardian-ui/src/languages/en.json
@@ -50,7 +50,9 @@
       "node-id-label": "Node ID",
       "gateway-id-label": "Gateway ID",
       "fee-label": "Gateway fee",
-      "view-on-site": "View on {{site}}"
+      "view-on-site": "View on {{site}}",
+      "no-gateways-info-title": "No connected gateways yet!",
+      "no-gateways-info-description": "Lightning node operators can connect to your federation to provide Lightning Network interoperability. Once connected, they will appear here."
     }
   },
   "login": {