fix: coderabbit fixes

apps/router/src/guardian-ui/components/dashboard/tabs/FederationTabsCard.tsx

@@ -27,7 +27,7 @@ import { useTranslation, hexToMeta } from '@fedimint/utils';
 import { MetaManager } from './meta/MetaManager';
 import { ApiAnnouncements } from './ApiAnnouncements';
 
-import { ProposedMetas } from './meta/ProposedMetas';
+import { ProposedMetas } from './meta/proposals/ProposedMetas';
 import { ModuleRpc } from '../../../types';
 import { useGuardianAdminApi } from '../../../../context/hooks';
 

apps/router/src/guardian-ui/components/dashboard/tabs/meta/manager/IconPreview.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Flex, Image } from '@chakra-ui/react';
+
+interface IconPreviewProps {
+  iconPreview: string | null;
+}
+
+export const IconPreview: React.FC<IconPreviewProps> = ({ iconPreview }) => (
+  <Flex
+    ml={2}
+    alignItems='center'
+    justifyContent='center'
+    width='36px'
+    height='36px'
+    borderRadius='full'
+    overflow='hidden'
+    boxShadow='sm'
+    bg='gray.100'
+    flexShrink={0}
+  >
+    {iconPreview ? (
+      <Image
+        src={iconPreview}
+        alt='Federation Icon'
+        width='100%'
+        height='100%'
+        objectFit='cover'
+      />
+    ) : (
+      <Flex
+        width='100%'
+        height='100%'
+        alignItems='center'
+        justifyContent='center'
+        fontSize='md'
+        fontWeight='bold'
+        color='gray.400'
+      >
+        ?
+      </Flex>
+    )}
+  </Flex>
+);

apps/router/src/guardian-ui/components/dashboard/tabs/meta/manager/MetaInput.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Flex, FormLabel, Input } from '@chakra-ui/react';
+import { snakeToTitleCase } from '@fedimint/utils';
+import { IconPreview } from '../IconPreview';
+
+interface MetaInputProps {
+  metaKey: string;
+  value: string;
+  onChange: (key: string, value: string) => void;
+  isIconValid: boolean;
+  iconPreview: string | null;
+}
+
+export const MetaInput: React.FC<MetaInputProps> = ({
+  metaKey,
+  value,
+  onChange,
+  isIconValid,
+  iconPreview,
+}) => (
+  <Flex alignItems='center'>
+    <Flex flexDirection='column' flex={1}>
+      <FormLabel fontWeight='bold' mb={1}>
+        {snakeToTitleCase(metaKey)}
+      </FormLabel>
+      <Flex alignItems='center'>
+        <Input
+          type={
+            metaKey === 'popup_end_timestamp'
+              ? 'datetime-local'
+              : metaKey === 'federation_icon_url'
+              ? 'url'
+              : 'text'
+          }
+          value={value}
+          onChange={(e) => onChange(metaKey, e.target.value)}
+          borderColor={
+            (['federation_name', 'welcome_message'].includes(metaKey) &&
+              value.trim() === '') ||
+            (metaKey === 'federation_icon_url' && !isIconValid)
+              ? 'yellow.400'
+              : 'inherit'
+          }
+        />
+        {metaKey === 'federation_icon_url' && (
+          <IconPreview iconPreview={iconPreview} />
+        )}
+      </Flex>
+    </Flex>
+  </Flex>
+);

apps/router/src/guardian-ui/components/dashboard/tabs/meta/manager/RequiredMeta.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { MetaInput } from './MetaInput';
+
+interface RequiredMetaProps {
+  requiredMeta: Record<string, string>;
+  setRequiredMeta: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  isValid: boolean;
+  setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const RequiredMeta: React.FC<RequiredMetaProps> = ({
+  requiredMeta,
+  setRequiredMeta,
+  setIsValid,
+}) => {
+  const [iconPreview, setIconPreview] = useState<string | null>(null);
+  const [isIconValid, setIsIconValid] = useState<boolean>(true);
+
+  useEffect(() => {
+    let objectURL: string | null = null;
+
+    const validateIcon = async (url: string) => {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const blob = await response.blob();
+        if (!blob.type.startsWith('image/')) {
+          throw new Error('Invalid image format');
+        }
+        objectURL = URL.createObjectURL(blob);
+        setIconPreview(objectURL);
+        setIsIconValid(true);
+      } catch (error) {
+        setIconPreview(null);
+        setIsIconValid(false);
+        if (error instanceof Error) {
+          console.error(`Icon validation failed: ${error.message}`);
+        }
+      }
+    };
+
+    if (requiredMeta.federation_icon_url) {
+      validateIcon(requiredMeta.federation_icon_url);
+    } else {
+      setIconPreview(null);
+      setIsIconValid(true);
+    }
+
+    return () => {
+      if (objectURL) {
+        URL.revokeObjectURL(objectURL);
+      }
+    };
+  }, [requiredMeta.federation_icon_url]);
+
+  useEffect(() => {
+    setIsValid(isIconValid);
+  }, [isIconValid, setIsValid]);
+
+  const handleChange = (key: string, value: string) => {
+    setRequiredMeta((prev) => ({ ...prev, [key]: value }));
+  };
+
+  return (
+    <Flex flexDirection='column' gap={4}>
+      {Object.entries(requiredMeta).map(([key, value]) => (
+        <MetaInput
+          key={key}
+          metaKey={key}
+          value={value}
+          onChange={handleChange}
+          isIconValid={isIconValid}
+          iconPreview={iconPreview}
+        />
+      ))}
+    </Flex>
+  );
+};