Qr scanners and codes for passing around guardian links / verification codes.

JUSTFILE

@@ -2,9 +2,13 @@ default:
   @just --list
 mprocs:
     mprocs -c mprocs.yml
+rotate:
+    mprocs -c mprocs-rotate.yml
 restart:
     docker compose down && echo 'Removing fm dirs' && sudo rm -rf fm_* && echo 'Done' && mprocs -c mprocs.yml
 gateway:
     yarn nix-gateway
 guardian:
     yarn nix-guardian
+reset dc:
+    cp original-docker-compose.yml docker-compose.yml && docker compose down -v && echo 'Removing fm dirs' && sudo rm -rf fm_* && echo 'Done'

README.md

@@ -21,6 +21,10 @@ This project includes the following apps / packages:
 - `eslint-config`: Shared `eslint` configurations (includes `eslint-plugin-react` and `eslint-config-prettier`)
 - `tsconfig`: Shared `tsconfig.json`s used throughout Fedimint UI apps
 
+## Testing
+
+For detailed testing instructions, please refer to the [testing.md](./testing.md) file in this repository. It contains comprehensive information on how to set up and run local tests for the Fedimint UI projects.
+
 ## Version Policy
 
 Fedimint UI releases use semantic versioning (`major.minor.patch`)

apps/guardian-ui/package.json

@@ -26,6 +26,7 @@
     "framer-motion": "^6",
     "jsonrpc-client-websocket": "^1.5.2",
     "node": "^20.1.0",
+    "qr-scanner": "^1.4.2",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/guardian-ui/src/GuardianApi.ts

@@ -285,7 +285,7 @@ export class GuardianApi {
   public signApiAnnouncement = async (
     newUrl: string
   ): Promise<SignedApiAnnouncement> => {
-    return this.call(AdminRpc.signApiAnnouncement, { new_url: newUrl });
+    return this.call(AdminRpc.signApiAnnouncement, newUrl);
   };
 
   public shutdown = async (session?: number): Promise<void> => {
@@ -314,14 +314,14 @@ export class GuardianApi {
   ): Promise<T> => {
     try {
       const websocket = await this.connect();
-      console.log('method', method);
+      // console.log('method', method);
       const response = await websocket.call(method, [
         {
           auth: this.getPassword() || null,
           params,
         },
       ]);
-      console.log('response', response);
+      // console.log('response', response);
 
       if (response.error) {
         throw response.error;

apps/guardian-ui/src/admin/FederationAdmin.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Flex, Box, Heading, Skeleton } from '@chakra-ui/react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Flex, Box, Heading, Skeleton, useDisclosure } from '@chakra-ui/react';
 import {
   ClientConfig,
   SignedApiAnnouncement,
@@ -15,6 +15,38 @@ import { InviteCode } from '../components/dashboard/admin/InviteCode';
 import { FederationTabsCard } from '../components/dashboard/tabs/FederationTabsCard';
 import { BftInfo } from '../components/BftInfo';
 import { DangerZone } from '../components/dashboard/danger/DangerZone';
+import { SignApiAnnouncement } from '../components/dashboard/danger/SignApiAnnouncement';
+import { normalizeUrl } from '../utils';
+
+const checkAnnouncementNeeded = (
+  currentApiUrl: string,
+  currentAnnouncement: SignedApiAnnouncement['api_announcement'] | undefined,
+  setAnnouncementNeeded: React.Dispatch<React.SetStateAction<boolean>>,
+  onOpen: () => void
+) => {
+  try {
+    if (currentAnnouncement) {
+      console.log('currentAnnouncement', currentAnnouncement.api_url);
+      console.log('currentApiUrl', currentApiUrl);
+      const announcementMatches =
+        normalizeUrl(currentAnnouncement.api_url) ===
+        normalizeUrl(currentApiUrl);
+      setAnnouncementNeeded(!announcementMatches);
+      if (!announcementMatches) {
+        onOpen();
+      }
+    }
+  } catch (error) {
+    console.error('Error checking announcement:', error);
+  }
+};
+
+const findOurPeerId = (
+  configPeerIds: number[],
+  statusPeerIds: number[]
+): number | undefined => {
+  return configPeerIds.find((id) => !statusPeerIds.includes(id));
+};
 
 export const FederationAdmin: React.FC = () => {
   const { api } = useAdminContext();
@@ -26,40 +58,65 @@ export const FederationAdmin: React.FC = () => {
   >({});
   const [ourPeer, setOurPeer] = useState<{ id: number; name: string }>();
   const [latestSession, setLatestSession] = useState<number>();
+  // API announcement modal
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [announcementNeeded, setAnnouncementNeeded] = useState(false);
+  const checkAnnouncementRef = useRef(false);
 
-  // Extracting our peer ID and name from intersection of config and status
   useEffect(() => {
-    if (config && status?.federation) {
-      const peerIds = Object.keys(status.federation.status_by_peer).map((id) =>
-        parseInt(id, 10)
+    if (announcementNeeded) {
+      onOpen();
+    }
+  }, [announcementNeeded, onOpen]);
+
+  const fetchData = useCallback(() => {
+    api.inviteCode().then(setInviteCode).catch(console.error);
+    api.config().then(setConfig).catch(console.error);
+    api.apiAnnouncements().then(setSignedApiAnnouncements).catch(console.error);
+    api
+      .status()
+      .then((statusData) => {
+        setStatus(statusData);
+        setLatestSession(statusData?.federation?.session_count);
+      })
+      .catch(console.error);
+  }, [api]);
+
+  useEffect(() => {
+    fetchData();
+    const interval = setInterval(fetchData, 5000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  useEffect(() => {
+    if (config && status?.federation && !checkAnnouncementRef.current) {
+      const statusPeerIds = Object.keys(status.federation.status_by_peer).map(
+        (id) => parseInt(id, 10)
       );
       const configPeerIds = Object.keys(config.global.api_endpoints).map((id) =>
         parseInt(id, 10)
       );
-      // Finding our peer ID as the one present in config but not in status
-      const ourPeerId = configPeerIds.find((id) => !peerIds.includes(id));
+
+      const ourPeerId = findOurPeerId(configPeerIds, statusPeerIds);
       if (ourPeerId !== undefined) {
         setOurPeer({
           id: ourPeerId,
           name: config.global.api_endpoints[ourPeerId].name,
         });
+        const currentApiUrl = process.env.REACT_APP_FM_CONFIG_API || '';
+        const currentAnnouncement =
+          signedApiAnnouncements[ourPeerId.toString()]?.api_announcement;
+
+        checkAnnouncementNeeded(
+          currentApiUrl,
+          currentAnnouncement,
+          setAnnouncementNeeded,
+          onOpen
+        );
+        checkAnnouncementRef.current = true;
       }
-      const latestSession = status?.federation?.session_count;
-      setLatestSession(latestSession);
     }
-  }, [config, status]);
-
-  useEffect(() => {
-    api.inviteCode().then(setInviteCode).catch(console.error);
-    api.config().then(setConfig).catch(console.error);
-    const fetchStatus = () => {
-      api.status().then(setStatus).catch(console.error);
-    };
-    api.apiAnnouncements().then(setSignedApiAnnouncements).catch(console.error);
-    fetchStatus();
-    const interval = setInterval(fetchStatus, 5000);
-    return () => clearInterval(interval);
-  }, [api]);
+  }, [config, status, signedApiAnnouncements, onOpen]);
 
   return (
     <Flex gap='32px' flexDirection='row'>
@@ -109,16 +166,30 @@ export const FederationAdmin: React.FC = () => {
           signedApiAnnouncements={signedApiAnnouncements}
         />
         <GatewaysCard config={config} />
-        {ourPeer ? (
-          <FederationTabsCard config={config} ourPeer={ourPeer} />
-        ) : null}
+        {ourPeer && (
+          <FederationTabsCard
+            config={config}
+            ourPeer={ourPeer}
+            signedApiAnnouncements={signedApiAnnouncements}
+          />
+        )}
         <DangerZone
           inviteCode={inviteCode}
           ourPeer={ourPeer}
           latestSession={latestSession}
           signedApiAnnouncements={signedApiAnnouncements}
+          onApiAnnouncementOpen={onOpen}
         />
       </Flex>
+      {ourPeer && (
+        <SignApiAnnouncement
+          isOpen={isOpen}
+          onClose={onClose}
+          ourPeer={ourPeer}
+          signedApiAnnouncements={signedApiAnnouncements}
+          currentApiUrl={process.env.REACT_APP_FM_CONFIG_API || ''}
+        />
+      )}
     </Flex>
   );
 };

apps/guardian-ui/src/components/dashboard/admin/BitcoinNodeCard.tsx

@@ -35,14 +35,10 @@ export const BitcoinNodeCard: React.FC<Props> = ({ modulesConfigs }) => {
         key: 'network',
         label: t('federation-dashboard.bitcoin-node.network-label'),
         value: walletConfig ? (
-          <Text as='span'>
-            {walletConfig.network && (
-              <NetworkIndicator
-                network={walletConfig.network}
-                bitcoinRpcUrl={walletConfig.default_bitcoin_rpc?.url}
-              />
-            )}
-          </Text>
+          <NetworkIndicator
+            network={walletConfig.network}
+            bitcoinRpcUrl={walletConfig.default_bitcoin_rpc?.url}
+          />
         ) : (
           <Skeleton height='24px' width='100px' />
         ),

apps/guardian-ui/src/components/dashboard/admin/InviteCode.tsx

@@ -18,8 +18,7 @@ import { useTranslation } from '@fedimint/utils';
 import { ReactComponent as CopyIcon } from '../../../assets/svgs/copy.svg';
 import { ReactComponent as QrIcon } from '../../../assets/svgs/qr.svg';
 import QRCode from 'qrcode.react';
-
-const QR_CODE_SIZE = 256;
+import { QR_CODE_SIZE } from '../../../utils/constants';
 
 interface InviteCodeProps {
   inviteCode: string;

apps/guardian-ui/src/components/dashboard/danger/DangerZone.tsx

@@ -1,26 +1,34 @@
 import React, { useState } from 'react';
-import { Box, Text, Flex, theme, Collapse, IconButton } from '@chakra-ui/react';
+import {
+  Box,
+  Text,
+  Flex,
+  theme,
+  Collapse,
+  IconButton,
+  Button,
+} from '@chakra-ui/react';
 import { GuardianAuthenticationCode } from './GuardianAuthenticationCode';
 import { DownloadBackup } from './DownloadBackup';
 import { useTranslation } from '@fedimint/utils';
 import { ReactComponent as ChevronDownIcon } from '../../../assets/svgs/chevron-down.svg';
 import { ReactComponent as ChevronUpIcon } from '../../../assets/svgs/chevron-up.svg';
 import { ScheduleShutdown } from './ScheduleShutdown';
 import { SignedApiAnnouncement } from '@fedimint/types';
-import { SignApiAnnouncement } from './SignApiAnnouncement';
 
 interface DangerZoneProps {
   ourPeer: { id: number; name: string } | undefined;
   inviteCode: string;
   latestSession: number | undefined;
   signedApiAnnouncements: Record<string, SignedApiAnnouncement>;
+  onApiAnnouncementOpen: () => void;
 }
 
 export const DangerZone: React.FC<DangerZoneProps> = ({
   ourPeer,
   inviteCode,
   latestSession,
-  signedApiAnnouncements,
+  onApiAnnouncementOpen,
 }) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
@@ -59,18 +67,24 @@ export const DangerZone: React.FC<DangerZoneProps> = ({
       </Flex>
       <Collapse in={isOpen} animateOpacity>
         <Flex direction={['column', 'row']} alignItems='center' gap='6px'>
-          {ourPeer !== undefined && (
+          {ourPeer && (
             <GuardianAuthenticationCode
               ourPeer={ourPeer}
               inviteCode={inviteCode}
             />
           )}
           <DownloadBackup />
           {ourPeer && (
-            <SignApiAnnouncement
-              ourPeer={ourPeer}
-              signedApiAnnouncements={signedApiAnnouncements}
-            />
+            <Button
+              size={['sm', 'md']}
+              bg={theme.colors.red[500]}
+              _hover={{ bg: theme.colors.red[600] }}
+              onClick={onApiAnnouncementOpen}
+            >
+              {t(
+                'federation-dashboard.danger-zone.sign-api-announcement.label'
+              )}
+            </Button>
           )}
           {latestSession && <ScheduleShutdown latestSession={latestSession} />}
         </Flex>

apps/guardian-ui/src/components/dashboard/danger/GuardianAuthenticationCode.tsx

@@ -13,8 +13,8 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from '@fedimint/utils';
 import QRCode from 'qrcode.react';
+import { QR_CODE_SIZE } from '../../../utils/constants';
 
-const QR_CODE_SIZE = 256;
 const FEDIMINT_GUARDIAN_PREFIX = 'fedimint:guardian:';
 
 type GuardianAuth = {
@@ -89,7 +89,7 @@ export const GuardianAuthenticationCode: React.FC<
               >
                 <Text mb={4}>
                   {t(
-                    'federation-dashboard.danger-zone.guardian-warning-message',
+                    'federation-dashboard.danger-zone.guardian-warning-message'
                   )}
                 </Text>
                 <Flex
@@ -113,7 +113,7 @@ export const GuardianAuthenticationCode: React.FC<
                     }}
                   >
                     {t(
-                      'federation-dashboard.danger-zone.acknowledge-and-download',
+                      'federation-dashboard.danger-zone.acknowledge-and-download'
                     )}
                   </Button>
                 </Flex>
@@ -135,7 +135,7 @@ export const GuardianAuthenticationCode: React.FC<
                 />
                 <Text fontWeight={'bold'} color={'red'} mt={4}>
                   {t(
-                    'federation-dashboard.danger-zone.guardian-connect-warning',
+                    'federation-dashboard.danger-zone.guardian-connect-warning'
                   )}
                 </Text>
               </Flex>