Qr scanners and codes for passing around guardian links / verification codes. #435
Conversation
Kodylow
changed the title
WalkthroughWalkthroughThis update enhances the Changes
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (2)
Files skipped from review as they are similar to previous changes (1)
Additional comments not posted (3)
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
|
Note: getting this annoying @IroncladDev @alexlwn123 wizards plz help |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| onDecodeError: (error) => { | ||
| if (typeof error === 'string' && err.current !== error) { | ||
| err.current = error; | ||
| onError(error); | ||
| } else if ( | ||
| typeof error !== 'string' && | ||
| err.current !== error.message | ||
| ) { | ||
| err.current = error.message; | ||
| onError(error.message); | ||
| } |
There was a problem hiding this comment.
Handle non-string error types more robustly.
Ensure that all possible error types are handled correctly by adding a default case.
+ else {
+ const errorMessage = error.message || 'Unknown error';
+ err.current = errorMessage;
+ onError(errorMessage);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onDecodeError: (error) => { | |
| if (typeof error === 'string' && err.current !== error) { | |
| err.current = error; | |
| onError(error); | |
| } else if ( | |
| typeof error !== 'string' && | |
| err.current !== error.message | |
| ) { | |
| err.current = error.message; | |
| onError(error.message); | |
| } | |
| onDecodeError: (error) => { | |
| if (typeof error === 'string' && err.current !== error) { | |
| err.current = error; | |
| onError(error); | |
| } else if ( | |
| typeof error !== 'string' && | |
| err.current !== error.message | |
| ) { | |
| err.current = error.message; | |
| onError(error.message); | |
| } else { | |
| const errorMessage = error.message || 'Unknown error'; | |
| err.current = errorMessage; | |
| onError(errorMessage); | |
| } |
| onError: (error: string) => void; | ||
| } & React.VideoHTMLAttributes<HTMLVideoElement>; |
There was a problem hiding this comment.
Add a default value for onError in ScannerProps.
To prevent potential runtime errors, consider adding a default value for the onError function.
+ onError: (error: string) => void = () => {},Committable suggestion was skipped due to low confidence.
| @@ -39,6 +44,7 @@ export const BasicSettingsForm: React.FC<BasicSettingsFormProps> = ({ | |||
| }) => { | |||
| const { t } = useTranslation(); | |||
| const theme = useTheme(); | |||
| const [isQrScannerOpen, setIsQrScannerOpen] = useState(false); | |||
There was a problem hiding this comment.
Ensure the QR scanner modal state is reset appropriately.
Add a cleanup function to reset the QR scanner modal state when the component unmounts.
+ React.useEffect(() => {
+ return () => setIsQrScannerOpen(false);
+ }, []);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [isQrScannerOpen, setIsQrScannerOpen] = useState(false); | |
| const [isQrScannerOpen, setIsQrScannerOpen] = useState(false); | |
| React.useEffect(() => { | |
| return () => setIsQrScannerOpen(false); | |
| }, []); |
| <QrScannerModal | ||
| isOpen={isQrScannerOpen} | ||
| onClose={() => setIsQrScannerOpen(false)} | ||
| onScan={(data) => setHostServerUrl(data)} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR scanner modal.
Add error handling for the QR scanner modal to handle potential scanning errors.
+ onError={(error) => console.error('QR Scanner Error:', error)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <QrScannerModal | |
| isOpen={isQrScannerOpen} | |
| onClose={() => setIsQrScannerOpen(false)} | |
| onScan={(data) => setHostServerUrl(data)} | |
| /> | |
| <QrScannerModal | |
| isOpen={isQrScannerOpen} | |
| onClose={() => setIsQrScannerOpen(false)} | |
| onScan={(data) => setHostServerUrl(data)} | |
| onError={(error) => console.error('QR Scanner Error:', error)} | |
| /> |
| @@ -32,6 +34,7 @@ export const ConnectGuardians: React.FC<Props> = ({ next }) => { | |||
| const { | |||
| state: { role, peers, numPeers, configGenParams, ourCurrentId }, | |||
| } = useSetupContext(); | |||
| const [isOpen, setIsOpen] = useState(false); | |||
There was a problem hiding this comment.
Ensure the QR modal state is reset appropriately.
Add a cleanup function to reset the QR modal state when the component unmounts.
+ React.useEffect(() => {
+ return () => setIsOpen(false);
+ }, []);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [isOpen, setIsOpen] = useState(false); | |
| const [isOpen, setIsOpen] = useState(false); | |
| React.useEffect(() => { | |
| return () => setIsOpen(false); | |
| }, []); |
| <QrModal | ||
| isOpen={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| content={guardianLink} | ||
| header={t('connect-guardians.invite-guardians')} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR modal.
Add error handling for the QR modal to handle potential errors when generating the QR code.
+ onError={(error) => console.error('QR Modal Error:', error)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <QrModal | |
| isOpen={isOpen} | |
| onClose={() => setIsOpen(false)} | |
| content={guardianLink} | |
| header={t('connect-guardians.invite-guardians')} | |
| /> | |
| <QrModal | |
| isOpen={isOpen} | |
| onClose={() => setIsOpen(false)} | |
| content={guardianLink} | |
| header={t('connect-guardians.invite-guardians')} | |
| onError={(error) => console.error('QR Modal Error:', error)} | |
| /> |
| const [isQrModalOpen, setQrModalOpen] = useState(false); | ||
| const [scanningGuardian, setScanningGuardian] = useState<string>(); |
There was a problem hiding this comment.
Ensure the QR scanner modal state is reset appropriately.
Add a cleanup function to reset the QR scanner modal state when the component unmounts.
+ React.useEffect(() => {
+ return () => setQrModalOpen(false);
+ }, []);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [isQrModalOpen, setQrModalOpen] = useState(false); | |
| const [scanningGuardian, setScanningGuardian] = useState<string>(); | |
| const [isQrModalOpen, setQrModalOpen] = useState(false); | |
| const [scanningGuardian, setScanningGuardian] = useState<string>(); | |
| React.useEffect(() => { | |
| return () => setQrModalOpen(false); | |
| }, []); |
|
I'll take a look in a bit. I have a bunch of high-priority tickets on my sprint board right now. |
| const handleScan = (data: string) => { | ||
| onScan(data); | ||
| onClose(); | ||
| }; |
There was a problem hiding this comment.
Ensure valid data before calling onScan.
Add a check to ensure data is valid before calling onScan.
- onScan(data);
+ if (data) {
+ onScan(data);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleScan = (data: string) => { | |
| onScan(data); | |
| onClose(); | |
| }; | |
| const handleScan = (data: string) => { | |
| if (data) { | |
| onScan(data); | |
| } | |
| onClose(); | |
| }; |
| const handleError = (error: string) => { | ||
| console.error(error); | ||
| if (error.includes('play() request was interrupted')) { | ||
| toast({ | ||
| title: 'Scanner Error', | ||
| description: 'The camera stream was interrupted. Please try again.', | ||
| status: 'error', | ||
| duration: 5000, | ||
| isClosable: true, | ||
| }); | ||
| onClose(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Improve error handling for non-specific errors.
Handle non-specific errors by adding a default case.
- if (error.includes('play() request was interrupted')) {
+ if (error.includes('play() request was interrupted')) {
toast({
title: 'Scanner Error',
description: 'The camera stream was interrupted. Please try again.',
status: 'error',
duration: 5000,
isClosable: true,
});
onClose();
+ } else {
+ toast({
+ title: 'Scanner Error',
+ description: 'An unknown error occurred. Please try again.',
+ status: 'error',
+ duration: 5000,
+ isClosable: true,
+ });
+ onClose();
}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleError = (error: string) => { | |
| console.error(error); | |
| if (error.includes('play() request was interrupted')) { | |
| toast({ | |
| title: 'Scanner Error', | |
| description: 'The camera stream was interrupted. Please try again.', | |
| status: 'error', | |
| duration: 5000, | |
| isClosable: true, | |
| }); | |
| onClose(); | |
| } | |
| }; | |
| const handleError = (error: string) => { | |
| console.error(error); | |
| if (error.includes('play() request was interrupted')) { | |
| toast({ | |
| title: 'Scanner Error', | |
| description: 'The camera stream was interrupted. Please try again.', | |
| status: 'error', | |
| duration: 5000, | |
| isClosable: true, | |
| }); | |
| onClose(); | |
| } else { | |
| toast({ | |
| title: 'Scanner Error', | |
| description: 'An unknown error occurred. Please try again.', | |
| status: 'error', | |
| duration: 5000, | |
| isClosable: true, | |
| }); | |
| onClose(); | |
| } | |
| }; |
| <InputGroup> | ||
| <Input | ||
| value={hostServerUrl} | ||
| onChange={(ev) => setHostServerUrl(ev.currentTarget.value)} | ||
| placeholder='ws://...' | ||
| pr='4.5rem' | ||
| /> | ||
| <InputRightElement width='4.5rem'> | ||
| <Icon | ||
| as={ScanIcon} | ||
| cursor='pointer' | ||
| onClick={() => setIsQrScannerOpen(true)} | ||
| boxSize='1.5rem' | ||
| color='gray.500' | ||
| _hover={{ color: 'blue.500' }} | ||
| /> | ||
| </InputRightElement> | ||
| </InputGroup> | ||
| <FormHelperText> | ||
| {t('set-config.join-federation-help')} | ||
| </FormHelperText> | ||
| </FormControl> | ||
| )} | ||
| <QrScannerModal | ||
| isOpen={isQrScannerOpen} | ||
| onClose={() => setIsQrScannerOpen(false)} | ||
| onScan={(data) => setHostServerUrl(data)} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR scanner modal.
Add error handling for the QR scanner modal to handle potential scanning errors.
+ onError={(error) => console.error('QR Scanner Error:', error)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <InputGroup> | |
| <Input | |
| value={hostServerUrl} | |
| onChange={(ev) => setHostServerUrl(ev.currentTarget.value)} | |
| placeholder='ws://...' | |
| pr='4.5rem' | |
| /> | |
| <InputRightElement width='4.5rem'> | |
| <Icon | |
| as={ScanIcon} | |
| cursor='pointer' | |
| onClick={() => setIsQrScannerOpen(true)} | |
| boxSize='1.5rem' | |
| color='gray.500' | |
| _hover={{ color: 'blue.500' }} | |
| /> | |
| </InputRightElement> | |
| </InputGroup> | |
| <FormHelperText> | |
| {t('set-config.join-federation-help')} | |
| </FormHelperText> | |
| </FormControl> | |
| )} | |
| <QrScannerModal | |
| isOpen={isQrScannerOpen} | |
| onClose={() => setIsQrScannerOpen(false)} | |
| onScan={(data) => setHostServerUrl(data)} | |
| /> | |
| <InputGroup> | |
| <Input | |
| value={hostServerUrl} | |
| onChange={(ev) => setHostServerUrl(ev.currentTarget.value)} | |
| placeholder='ws://...' | |
| pr='4.5rem' | |
| /> | |
| <InputRightElement width='4.5rem'> | |
| <Icon | |
| as={ScanIcon} | |
| cursor='pointer' | |
| onClick={() => setIsQrScannerOpen(true)} | |
| boxSize='1.5rem' | |
| color='gray.500' | |
| _hover={{ color: 'blue.500' }} | |
| /> | |
| </InputRightElement> | |
| </InputGroup> | |
| <FormHelperText> | |
| {t('set-config.join-federation-help')} | |
| </FormHelperText> | |
| </FormControl> | |
| )} | |
| <QrScannerModal | |
| isOpen={isQrScannerOpen} | |
| onClose={() => setIsQrScannerOpen(false)} | |
| onScan={(data) => setHostServerUrl(data)} | |
| onError={(error) => console.error('QR Scanner Error:', error)} | |
| /> |
| <Flex direction='row' alignItems='center' gap='6px'> | ||
| <CopyInput | ||
| value={guardianLink} | ||
| size='sm' | ||
| buttonLeftIcon={<Icon as={CopyIcon} />} | ||
| /> | ||
| <Icon | ||
| as={QrIcon} | ||
| cursor='pointer' | ||
| onClick={() => setIsOpen(true)} | ||
| bg='white' | ||
| boxSize='40px' | ||
| borderRadius='10%' | ||
| border='1px solid lightgray' | ||
| _hover={{ bg: 'gray.100' }} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR modal.
Add error handling for the QR modal to handle potential errors when generating the QR code.
+ onError={(error) => console.error('QR Modal Error:', error)}Committable suggestion was skipped due to low confidence.
| <InputGroup size='md'> | ||
| <Input | ||
| variant='filled' | ||
| value={value} | ||
| placeholder={`${t('verify-guardians.verified-placeholder')}`} | ||
| onChange={(ev) => handleChangeHash(ev.currentTarget.value, idx)} | ||
| readOnly={isValid} | ||
| /> | ||
| <InputRightElement> | ||
| <Icon | ||
| as={ScanIcon} | ||
| cursor='pointer' | ||
| onClick={() => { | ||
| setQrModalOpen(true); | ||
| setScanningGuardian(peersWithHash[idx].peer.name); | ||
| }} | ||
| boxSize='1.5rem' | ||
| color='gray.500' | ||
| _hover={{ color: 'blue.500' }} | ||
| /> | ||
| </InputRightElement> |
There was a problem hiding this comment.
Ensure proper error handling for QR scanner modal.
Add error handling for the QR scanner modal to handle potential scanning errors.
+ onError={(error) => console.error('QR Scanner Error:', error)}Committable suggestion was skipped due to low confidence.
| const handleScanHash = useCallback( | ||
| (data: string) => { | ||
| // parse out index:value from the data string | ||
| const [index, value] = data.split(':'); | ||
| handleChangeHash(value, parseInt(index, 10)); | ||
| }, | ||
| [handleChangeHash] | ||
| ); |
There was a problem hiding this comment.
Ensure proper error handling for QR scanner modal.
Add error handling for the QR scanner modal to handle potential scanning errors.
+ onError={(error) => console.error('QR Scanner Error:', error)}Committable suggestion was skipped due to low confidence.
| <QrScannerModal | ||
| isOpen={isQrModalOpen} | ||
| onClose={() => setQrModalOpen(false)} | ||
| onScan={handleScanHash} | ||
| title={t('verify-guardians.scanning-guardian', { | ||
| guardian: scanningGuardian, | ||
| })} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR scanner modal.
Add error handling for the QR scanner modal to handle potential scanning errors.
+ onError={(error) => console.error('QR Scanner Error:', error)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <QrScannerModal | |
| isOpen={isQrModalOpen} | |
| onClose={() => setQrModalOpen(false)} | |
| onScan={handleScanHash} | |
| title={t('verify-guardians.scanning-guardian', { | |
| guardian: scanningGuardian, | |
| })} | |
| /> | |
| <QrScannerModal | |
| isOpen={isQrModalOpen} | |
| onClose={() => setQrModalOpen(false)} | |
| onScan={handleScanHash} | |
| title={t('verify-guardians.scanning-guardian', { | |
| guardian: scanningGuardian, | |
| })} | |
| onError={(error) => console.error('QR Scanner Error:', error)} | |
| /> |
| <QrModal | ||
| isOpen={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| content={`${ourCurrentId}:${myHash}`} | ||
| header={t('setup.verify-guardians.verification-code')} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR modal.
Add error handling for the QR modal to handle potential errors when generating the QR code.
+ onError={(error) => console.error('QR Modal Error:', error)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <QrModal | |
| isOpen={isOpen} | |
| onClose={() => setIsOpen(false)} | |
| content={`${ourCurrentId}:${myHash}`} | |
| header={t('setup.verify-guardians.verification-code')} | |
| /> | |
| <QrModal | |
| isOpen={isOpen} | |
| onClose={() => setIsOpen(false)} | |
| content={`${ourCurrentId}:${myHash}`} | |
| header={t('setup.verify-guardians.verification-code')} | |
| onError={(error) => console.error('QR Modal Error:', error)} | |
| /> |
| @@ -8,7 +8,8 @@ fi | |||
| DEVIMINT_COMMAND=$1 | |||
| MPROCS_PATH=$2 | |||
|
|
|||
| export FM_TEST_DIR="$TMP/fm-$(LC_ALL=C tr -dc A-Za-z0-9 </dev/urandom | head -c 4 || true)" | |||
| TMP="${TMP:-/tmp}" | |||
| export FM_TEST_DIR="${TMP}/fm-$(LC_ALL=C tr -dc A-Za-z0-9 </dev/urandom | head -c 4 || true)" | |||
There was a problem hiding this comment.
Declare and assign separately to avoid masking return values.
To follow best practices and avoid potential issues, declare and assign the variable separately.
+ TMP="${TMP:-/tmp}"
export FM_TEST_DIR="${TMP}/fm-$(LC_ALL=C tr -dc A-Za-z0-9 </dev/urandom | head -c 4 || true)"Committable suggestion was skipped due to low confidence.
Tools
Shellcheck
[warning] 12-12: Declare and assign separately to avoid masking return values.
(SC2155)
| pb={8} | ||
| > | ||
| <QRCode value={content} size={256} /> | ||
| </ModalBody> |
There was a problem hiding this comment.
Add a "copy" button below the QR code... similar to the paste button on the scanner
| onScan(data); | ||
| onClose(); | ||
| }; | ||
| const handlePaste = async () => { |
There was a problem hiding this comment.
wrap callback function in useCallback
| } | ||
| }; | ||
|
|
||
| const handleError = (error: string) => { |
There was a problem hiding this comment.
wrap callback function in useCallback
| onError, | ||
| ...props | ||
| }) => { | ||
| const [res, setRes] = React.useState<string | null>(null); |
There was a problem hiding this comment.
nit: import {useState, useRef, useEffect} from 'react'
| ...props | ||
| }) => { | ||
| const [res, setRes] = React.useState<string | null>(null); | ||
| const err = React.useRef<string | null>(null); |
There was a problem hiding this comment.
nit: useState over useRef for strings
| @@ -37,6 +32,11 @@ import { ReactComponent as CopyIcon } from '../../../../assets/svgs/copy.svg'; | |||
| import { formatApiErrorMessage } from '../../../../utils/api'; | |||
| import { ReactComponent as CheckCircleIcon } from '../../../../assets/svgs/check-circle.svg'; | |||
| import { ReactComponent as XCircleIcon } from '../../../../assets/svgs/x-circle.svg'; | |||
| import { ReactComponent as QrIcon } from '../../../../assets/svgs/qr.svg'; | |||
There was a problem hiding this comment.
nit: I'm not a huge fan of this pattern. (importing ReactComponent then use as within the chakra Icon)
Perhaps we can consider doing this:
import QrIcon from '../../../../assets/svgs/qr.svg';
....
<>
<Icon>
<QrIcon />
</Icon>
</>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 12
Outside diff range, codebase verification and nitpick comments (3)
JUSTFILE (1)
13-14: User lacks necessary sudo permissions.The current user does not have the required sudo permissions to execute the
rm -rf fm_*command. This will cause thereset dccommand to fail.
- Ensure the user has the necessary sudo permissions to remove directories.
Analysis chain
Ensure the backup file exists and permissions are correct.
Verify that
original-docker-compose.ymlexists and the script has the necessary permissions to copy and remove directories.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the backup Docker Compose file and check permissions. # Test: Check if original-docker-compose.yml exists and is readable. Expect: File exists and is readable. if [ ! -r "original-docker-compose.yml" ]; then echo "original-docker-compose.yml does not exist or is not readable." exit 1 fi echo "original-docker-compose.yml exists and is readable."Length of output: 157
Script:
#!/bin/bash # Description: Verify sudo permissions and existence of fm_* directories. # Test: Check if the user has sudo permissions. Expect: User has sudo permissions. if ! sudo -n true 2>/dev/null; then echo "User does not have sudo permissions." exit 1 fi echo "User has sudo permissions." # Test: Check if any fm_* directories exist. Expect: Directories exist. if ls fm_* 1> /dev/null 2>&1; then echo "fm_* directories exist." else echo "No fm_* directories found." fiLength of output: 106
apps/guardian-ui/src/components/dashboard/tabs/ApiAnnouncements.tsx (2)
23-24: Translation keyfederation-dashboard.api-announcements.guardianis missing.The translation key
federation-dashboard.api-announcements.guardiandoes not exist in the translation files. Please ensure that this key is defined and translated appropriately.
Analysis chain
Ensure translation keys are correct.
Verify that the translation key
federation-dashboard.api-announcements.guardianexists and is correctly translated.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the translation key for `guardian`. # Test: Search for the translation key. Expect: Only occurrences of the correct key. rg --type json 'federation-dashboard.api-announcements.guardian'Length of output: 64
Script:
#!/bin/bash # Description: Verify the existence of the translation key for `guardian` in all files. # Test: Search for the translation key in all files. Expect: Only occurrences of the correct key. rg 'federation-dashboard.api-announcements.guardian'Length of output: 191
Script:
#!/bin/bash # Description: Verify the existence of the translation key for `guardian` in translation files. # Test: Search for the translation key in JSON and YAML translation files. Expect: Only occurrences of the correct key. rg 'federation-dashboard.api-announcements.guardian' --type json --type yamlLength of output: 76
28-29: The translation keyfederation-dashboard.api-announcements.revisionis missing in the language files. Please add the necessary translations.
- Missing key:
federation-dashboard.api-announcements.revisioninapps/guardian-ui/src/languages/ko.json,apps/guardian-ui/src/languages/en.json, andapps/guardian-ui/src/languages/es.json.Analysis chain
Ensure translation keys are correct.
Verify that the translation key
federation-dashboard.api-announcements.revisionexists and is correctly translated.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the translation key for `revision`. # Test: Search for the translation key. Expect: Only occurrences of the correct key. rg --type json 'federation-dashboard.api-announcements.revision'Length of output: 64
Script:
#!/bin/bash # Description: Search for all translation keys under `federation-dashboard.api-announcements`. # Test: Search for translation keys. Expect: List of all keys under `federation-dashboard.api-announcements`. rg --type json 'federation-dashboard.api-announcements'Length of output: 55
Script:
#!/bin/bash # Description: Search for all translation keys under `federation-dashboard`. # Test: Search for translation keys. Expect: List of all keys under `federation-dashboard`. rg --type json 'federation-dashboard'Length of output: 238
Script:
#!/bin/bash # Description: Verify the existence of the specific translation key `federation-dashboard.api-announcements.revision` within the identified files. # Test: Search for the specific translation key in the identified files. Expect: Occurrences of the specific key. rg 'federation-dashboard.api-announcements.revision' apps/guardian-ui/src/languages/ko.json apps/guardian-ui/src/languages/en.json apps/guardian-ui/src/languages/es.jsonLength of output: 169
| <Flex direction='row' alignItems='center' gap='6px'> | ||
| <CopyInput | ||
| value={myHash} | ||
| buttonLeftIcon={<Icon as={CopyIcon} />} | ||
| size='sm' | ||
| /> | ||
| <Icon | ||
| as={QrIcon} | ||
| cursor='pointer' | ||
| onClick={() => setIsOpen(true)} | ||
| bg='white' | ||
| boxSize='40px' | ||
| borderRadius='10%' | ||
| border='1px solid lightgray' | ||
| _hover={{ bg: 'gray.100' }} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR scanner and modal.
Add error handling to handle potential errors when generating or scanning QR codes.
+ onError={(error) => console.error('QR Scanner/Modal Error:', error)}Also applies to: 399-404, 405-412
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| <Flex direction='row' alignItems='center' gap='6px'> | ||
| <CopyInput | ||
| value={myHash} | ||
| buttonLeftIcon={<Icon as={CopyIcon} />} | ||
| size='sm' | ||
| /> | ||
| <Icon | ||
| as={QrIcon} | ||
| cursor='pointer' | ||
| onClick={() => setQrModalOpen(true)} | ||
| bg='white' | ||
| boxSize='40px' | ||
| borderRadius='10%' | ||
| border='1px solid lightgray' | ||
| _hover={{ bg: 'gray.100' }} | ||
| /> | ||
| <Button | ||
| onClick={() => setIsScannerActive(!isScannerActive)} | ||
| leftIcon={<Icon as={ScanIcon} />} | ||
| size='sm' | ||
| variant='outline' | ||
| bg='white' | ||
| borderColor='gray.200' | ||
| _hover={{ bg: 'gray.100' }} | ||
| color='black.700' | ||
| > | ||
| {isScannerActive | ||
| ? t('verify-guardians.stop-scan') | ||
| : t('verify-guardians.start-scan')} | ||
| </Button> | ||
| </Flex> |
There was a problem hiding this comment.
Ensure proper error handling for QR code functionalities.
Add error handling for the QR code generation and scanning functionalities to handle potential errors.
+ onError={(error) => console.error('QR Code Error:', error)}Committable suggestion was skipped due to low confidence.
| import { ReactComponent as QrIcon } from '../../../../assets/svgs/qr.svg'; | ||
| import { ReactComponent as ScanIcon } from '../../../../assets/svgs/scan.svg'; | ||
| import { QrModal } from '../../qr/QrModal'; | ||
| import { ConfirmFollowersConnected } from './ConfirmFollowersConnected'; | ||
| import { Scanner } from '../../qr/Scanner'; |
There was a problem hiding this comment.
Ensure consistency in import patterns.
Consider following a consistent import pattern for SVG components to improve readability.
- import { ReactComponent as QrIcon } from '../../../../assets/svgs/qr.svg';
- import { ReactComponent as ScanIcon } from '../../../../assets/svgs/scan.svg';
+ import QrIcon from '../../../../assets/svgs/qr.svg';
+ import ScanIcon from '../../../../assets/svgs/scan.svg';Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { ReactComponent as QrIcon } from '../../../../assets/svgs/qr.svg'; | |
| import { ReactComponent as ScanIcon } from '../../../../assets/svgs/scan.svg'; | |
| import { QrModal } from '../../qr/QrModal'; | |
| import { ConfirmFollowersConnected } from './ConfirmFollowersConnected'; | |
| import { Scanner } from '../../qr/Scanner'; | |
| import QrIcon from '../../../../assets/svgs/qr.svg'; | |
| import ScanIcon from '../../../../assets/svgs/scan.svg'; | |
| import { QrModal } from '../../qr/QrModal'; | |
| import { ConfirmFollowersConnected } from './ConfirmFollowersConnected'; | |
| import { Scanner } from '../../qr/Scanner'; |
| <ConfirmFollowersConnected | ||
| isOpen={isConfirmOpen} | ||
| setIsOpen={setIsConfirmOpen} | ||
| handleNext={handleNext} | ||
| /> | ||
| <QrModal | ||
| isOpen={isQrModalOpen} | ||
| onClose={() => setQrModalOpen(false)} | ||
| content={`${ourCurrentId}:${myHash}`} | ||
| header={t('verify-guardians.verification-code')} | ||
| /> |
There was a problem hiding this comment.
Ensure proper error handling for QR modal.
Add error handling for the QR modal to handle potential errors when generating the QR code.
+ onError={(error) => console.error('QR Modal Error:', error)}Committable suggestion was skipped due to low confidence.
| {isScannerActive && ( | ||
| <Scanner | ||
| scanning={true} | ||
| onResult={(data) => { | ||
| const [index, hash] = data.split(':'); | ||
| handleChangeHash(hash, parseInt(index, 10)); | ||
| }} | ||
| onError={(error) => console.error(error)} | ||
| /> | ||
| <FormHelperText> | ||
| {t('verify-guardians.verification-code-help')} | ||
| </FormHelperText> | ||
| </FormControl> | ||
| <Hide below='sm'> | ||
| <Table | ||
| title={t('verify-guardians.table-title')} | ||
| description={t('verify-guardians.table-description')} | ||
| columns={tableColumns} | ||
| rows={tableRows} | ||
| )} |
There was a problem hiding this comment.
Ensure proper error handling for Scanner.
The Scanner component is used correctly, but add error handling to manage potential scanning errors.
- onError={(error) => console.error(error)}
+ onError={(error) => console.error('QR Scanner Error:', error)}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {isScannerActive && ( | |
| <Scanner | |
| scanning={true} | |
| onResult={(data) => { | |
| const [index, hash] = data.split(':'); | |
| handleChangeHash(hash, parseInt(index, 10)); | |
| }} | |
| onError={(error) => console.error(error)} | |
| /> | |
| <FormHelperText> | |
| {t('verify-guardians.verification-code-help')} | |
| </FormHelperText> | |
| </FormControl> | |
| <Hide below='sm'> | |
| <Table | |
| title={t('verify-guardians.table-title')} | |
| description={t('verify-guardians.table-description')} | |
| columns={tableColumns} | |
| rows={tableRows} | |
| )} | |
| {isScannerActive && ( | |
| <Scanner | |
| scanning={true} | |
| onResult={(data) => { | |
| const [index, hash] = data.split(':'); | |
| handleChangeHash(hash, parseInt(index, 10)); | |
| }} | |
| onError={(error) => console.error('QR Scanner Error:', error)} | |
| /> | |
| )} |
| interface VerificationCodeInputProps { | ||
| myHash: string; | ||
| setQrModalOpen: (isOpen: boolean) => void; | ||
| isScannerActive: boolean; | ||
| setIsScannerActive: (isActive: boolean) => void; | ||
| } |
There was a problem hiding this comment.
Consider adding prop types validation.
Ensure that the props passed to the component are validated for type safety.
+ import PropTypes from 'prop-types';
VerificationCodeInput.propTypes = {
myHash: PropTypes.string.isRequired,
setQrModalOpen: PropTypes.func.isRequired,
isScannerActive: PropTypes.bool.isRequired,
setIsScannerActive: PropTypes.func.isRequired,
};Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| interface VerificationCodeInputProps { | |
| myHash: string; | |
| setQrModalOpen: (isOpen: boolean) => void; | |
| isScannerActive: boolean; | |
| setIsScannerActive: (isActive: boolean) => void; | |
| } | |
| import PropTypes from 'prop-types'; | |
| interface VerificationCodeInputProps { | |
| myHash: string; | |
| setQrModalOpen: (isOpen: boolean) => void; | |
| isScannerActive: boolean; | |
| setIsScannerActive: (isActive: boolean) => void; | |
| } | |
| VerificationCodeInput.propTypes = { | |
| myHash: PropTypes.string.isRequired, | |
| setQrModalOpen: PropTypes.func.isRequired, | |
| isScannerActive: PropTypes.bool.isRequired, | |
| setIsScannerActive: PropTypes.func.isRequired, | |
| }; |
| return ( | ||
| <FormControl bg={theme.colors.blue[50]} p={4} borderRadius='md' maxW='md'> | ||
| <FormLabel>{t('verify-guardians.verification-code')}</FormLabel> | ||
| <Flex direction='row' alignItems='center' gap='6px'> | ||
| <CopyInput | ||
| value={myHash} | ||
| buttonLeftIcon={<Icon as={CopyIcon} />} | ||
| size='sm' | ||
| /> | ||
| <Icon | ||
| as={QrIcon} | ||
| cursor='pointer' | ||
| onClick={() => setQrModalOpen(true)} | ||
| bg='white' | ||
| boxSize='40px' | ||
| borderRadius='10%' | ||
| border='1px solid lightgray' | ||
| _hover={{ bg: 'gray.100' }} | ||
| /> | ||
| <Button | ||
| onClick={() => setIsScannerActive(!isScannerActive)} | ||
| leftIcon={<Icon as={ScanIcon} />} | ||
| size='sm' | ||
| variant='outline' | ||
| bg='white' | ||
| borderColor='gray.200' | ||
| _hover={{ bg: 'gray.100' }} | ||
| color='black.700' | ||
| > | ||
| {isScannerActive | ||
| ? t('verify-guardians.stop-scan') | ||
| : t('verify-guardians.start-scan')} | ||
| </Button> | ||
| </Flex> | ||
| <FormHelperText> | ||
| {t('verify-guardians.verification-code-help')} | ||
| </FormHelperText> | ||
| </FormControl> |
There was a problem hiding this comment.
Add error handling for QR modal and scanner.
Ensure that opening the QR modal and toggling the scanner handle errors gracefully.
- onClick={() => setQrModalOpen(true)}
+ onClick={() => {
+ try {
+ setQrModalOpen(true);
+ } catch (error) {
+ console.error('Failed to open QR modal', error);
+ }
+ }}
- onClick={() => setIsScannerActive(!isScannerActive)}
+ onClick={() => {
+ try {
+ setIsScannerActive(!isScannerActive);
+ } catch (error) {
+ console.error('Failed to toggle scanner', error);
+ }
+ }}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <FormControl bg={theme.colors.blue[50]} p={4} borderRadius='md' maxW='md'> | |
| <FormLabel>{t('verify-guardians.verification-code')}</FormLabel> | |
| <Flex direction='row' alignItems='center' gap='6px'> | |
| <CopyInput | |
| value={myHash} | |
| buttonLeftIcon={<Icon as={CopyIcon} />} | |
| size='sm' | |
| /> | |
| <Icon | |
| as={QrIcon} | |
| cursor='pointer' | |
| onClick={() => setQrModalOpen(true)} | |
| bg='white' | |
| boxSize='40px' | |
| borderRadius='10%' | |
| border='1px solid lightgray' | |
| _hover={{ bg: 'gray.100' }} | |
| /> | |
| <Button | |
| onClick={() => setIsScannerActive(!isScannerActive)} | |
| leftIcon={<Icon as={ScanIcon} />} | |
| size='sm' | |
| variant='outline' | |
| bg='white' | |
| borderColor='gray.200' | |
| _hover={{ bg: 'gray.100' }} | |
| color='black.700' | |
| > | |
| {isScannerActive | |
| ? t('verify-guardians.stop-scan') | |
| : t('verify-guardians.start-scan')} | |
| </Button> | |
| </Flex> | |
| <FormHelperText> | |
| {t('verify-guardians.verification-code-help')} | |
| </FormHelperText> | |
| </FormControl> | |
| return ( | |
| <FormControl bg={theme.colors.blue[50]} p={4} borderRadius='md' maxW='md'> | |
| <FormLabel>{t('verify-guardians.verification-code')}</FormLabel> | |
| <Flex direction='row' alignItems='center' gap='6px'> | |
| <CopyInput | |
| value={myHash} | |
| buttonLeftIcon={<Icon as={CopyIcon} />} | |
| size='sm' | |
| /> | |
| <Icon | |
| as={QrIcon} | |
| cursor='pointer' | |
| onClick={() => { | |
| try { | |
| setQrModalOpen(true); | |
| } catch (error) { | |
| console.error('Failed to open QR modal', error); | |
| } | |
| }} | |
| bg='white' | |
| boxSize='40px' | |
| borderRadius='10%' | |
| border='1px solid lightgray' | |
| _hover={{ bg: 'gray.100' }} | |
| /> | |
| <Button | |
| onClick={() => { | |
| try { | |
| setIsScannerActive(!isScannerActive); | |
| } catch (error) { | |
| console.error('Failed to toggle scanner', error); | |
| } | |
| }} | |
| leftIcon={<Icon as={ScanIcon} />} | |
| size='sm' | |
| variant='outline' | |
| bg='white' | |
| borderColor='gray.200' | |
| _hover={{ bg: 'gray.100' }} | |
| color='black.700' | |
| > | |
| {isScannerActive | |
| ? t('verify-guardians.stop-scan') | |
| : t('verify-guardians.start-scan')} | |
| </Button> | |
| </Flex> | |
| <FormHelperText> | |
| {t('verify-guardians.verification-code-help')} | |
| </FormHelperText> | |
| </FormControl> |
| const handleClick = () => { | ||
| if (role === GuardianRole.Host) { | ||
| setIsConfirmOpen(true); | ||
| } else { | ||
| handleNext(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Add error handling for button click.
Ensure that the button click handler handles errors gracefully.
- if (role === GuardianRole.Host) {
- setIsConfirmOpen(true);
- } else {
- handleNext();
- }
+ try {
+ if (role === GuardianRole.Host) {
+ setIsConfirmOpen(true);
+ } else {
+ handleNext();
+ }
+ } catch (error) {
+ console.error('Failed to handle button click', error);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleClick = () => { | |
| if (role === GuardianRole.Host) { | |
| setIsConfirmOpen(true); | |
| } else { | |
| handleNext(); | |
| } | |
| }; | |
| const handleClick = () => { | |
| try { | |
| if (role === GuardianRole.Host) { | |
| setIsConfirmOpen(true); | |
| } else { | |
| handleNext(); | |
| } | |
| } catch (error) { | |
| console.error('Failed to handle button click', error); | |
| } | |
| }; |
| interface VerificationButtonProps { | ||
| verifiedConfigs: boolean; | ||
| isStarting: boolean; | ||
| role: GuardianRole; | ||
| handleNext: () => void; | ||
| } |
There was a problem hiding this comment.
Consider adding prop types validation.
Ensure that the props passed to the component are validated for type safety.
+ import PropTypes from 'prop-types';
VerificationButton.propTypes = {
verifiedConfigs: PropTypes.bool.isRequired,
isStarting: PropTypes.bool.isRequired,
role: PropTypes.string.isRequired,
handleNext: PropTypes.func.isRequired,
};Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| interface VerificationButtonProps { | |
| verifiedConfigs: boolean; | |
| isStarting: boolean; | |
| role: GuardianRole; | |
| handleNext: () => void; | |
| } | |
| import PropTypes from 'prop-types'; | |
| interface VerificationButtonProps { | |
| verifiedConfigs: boolean; | |
| isStarting: boolean; | |
| role: GuardianRole; | |
| handleNext: () => void; | |
| } | |
| VerificationButton.propTypes = { | |
| verifiedConfigs: PropTypes.bool.isRequired, | |
| isStarting: PropTypes.bool.isRequired, | |
| role: PropTypes.string.isRequired, | |
| handleNext: PropTypes.func.isRequired, | |
| }; |
| interface PeerWithHash { | ||
| id: string; | ||
| peer: { | ||
| name: string; | ||
| cert: string; | ||
| }; | ||
| hash: string; | ||
| } | ||
|
|
||
| interface Props { | ||
| peersWithHash: PeerWithHash[]; | ||
| enteredHashes: string[]; | ||
| handleChangeHash: (value: string, index: number) => void; | ||
| } |
There was a problem hiding this comment.
Consider adding prop types validation.
Ensure that the props passed to the component are validated for type safety.
+ import PropTypes from 'prop-types';
PeerVerificationTable.propTypes = {
peersWithHash: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
peer: PropTypes.shape({
name: PropTypes.string.isRequired,
cert: PropTypes.string.isRequired,
}).isRequired,
hash: PropTypes.string.isRequired,
})
).isRequired,
enteredHashes: PropTypes.arrayOf(PropTypes.string).isRequired,
handleChangeHash: PropTypes.func.isRequired,
};Committable suggestion was skipped due to low confidence.
| const tableRows = peersWithHash.map(({ peer, hash }, idx) => { | ||
| const value = enteredHashes[idx] || ''; | ||
| const isValid = Boolean(value && value === hash); | ||
| const isError = Boolean(value && !isValid); | ||
| return { | ||
| key: peer.cert, | ||
| name: ( | ||
| <Text maxWidth={200} isTruncated> | ||
| {peer.name} | ||
| </Text> | ||
| ), | ||
| status: isValid ? ( | ||
| <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag> | ||
| ) : ( | ||
| '' | ||
| ), | ||
| hashInput: ( | ||
| <FormControl isInvalid={isError}> | ||
| <Input | ||
| variant='filled' | ||
| value={value} | ||
| placeholder={`${t('verify-guardians.verified-placeholder')}`} | ||
| onChange={(ev) => handleChangeHash(ev.currentTarget.value, idx)} | ||
| readOnly={isValid} | ||
| /> | ||
| </FormControl> | ||
| ), | ||
| }; | ||
| }); |
There was a problem hiding this comment.
Optimize table row mapping.
Ensure that the table row mapping is optimized for performance.
- const tableRows = peersWithHash.map(({ peer, hash }, idx) => {
- const value = enteredHashes[idx] || '';
- const isValid = Boolean(value && value === hash);
- const isError = Boolean(value && !isValid);
- return {
- key: peer.cert,
- name: (
- <Text maxWidth={200} isTruncated>
- {peer.name}
- </Text>
- ),
- status: isValid ? (
- <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag>
- ) : (
- ''
- ),
- hashInput: (
- <FormControl isInvalid={isError}>
- <Input
- variant='filled'
- value={value}
- placeholder={`${t('verify-guardians.verified-placeholder')}`}
- onChange={(ev) => handleChangeHash(ev.currentTarget.value, idx)}
- readOnly={isValid}
- />
- </FormControl>
- ),
- };
- });
+ const tableRows = peersWithHash.map(({ peer, hash }, idx) => {
+ const value = enteredHashes[idx] || '';
+ const isValid = value === hash;
+ const isError = value && !isValid;
+ return {
+ key: peer.cert,
+ name: <Text maxWidth={200} isTruncated>{peer.name}</Text>,
+ status: isValid ? <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag> : '',
+ hashInput: (
+ <FormControl isInvalid={isError}>
+ <Input
+ variant='filled'
+ value={value}
+ placeholder={t('verify-guardians.verified-placeholder')}
+ onChange={(ev) => handleChangeHash(ev.currentTarget.value, idx)}
+ readOnly={isValid}
+ />
+ </FormControl>
+ ),
+ };
+ });Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const tableRows = peersWithHash.map(({ peer, hash }, idx) => { | |
| const value = enteredHashes[idx] || ''; | |
| const isValid = Boolean(value && value === hash); | |
| const isError = Boolean(value && !isValid); | |
| return { | |
| key: peer.cert, | |
| name: ( | |
| <Text maxWidth={200} isTruncated> | |
| {peer.name} | |
| </Text> | |
| ), | |
| status: isValid ? ( | |
| <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag> | |
| ) : ( | |
| '' | |
| ), | |
| hashInput: ( | |
| <FormControl isInvalid={isError}> | |
| <Input | |
| variant='filled' | |
| value={value} | |
| placeholder={`${t('verify-guardians.verified-placeholder')}`} | |
| onChange={(ev) => handleChangeHash(ev.currentTarget.value, idx)} | |
| readOnly={isValid} | |
| /> | |
| </FormControl> | |
| ), | |
| }; | |
| }); | |
| const tableRows = peersWithHash.map(({ peer, hash }, idx) => { | |
| const value = enteredHashes[idx] || ''; | |
| const isValid = value === hash; | |
| const isError = value && !isValid; | |
| return { | |
| key: peer.cert, | |
| name: <Text maxWidth={200} isTruncated>{peer.name}</Text>, | |
| status: isValid ? <Tag colorScheme='green'>{t('verify-guardians.verified')}</Tag> : '', | |
| hashInput: ( | |
| <FormControl isInvalid={isError}> | |
| <Input | |
| variant='filled' | |
| value={value} | |
| placeholder={t('verify-guardians.verified-placeholder')} | |
| onChange={(ev) => handleChangeHash(ev.currentTarget.value, idx)} | |
| readOnly={isValid} | |
| /> | |
| </FormControl> | |
| ), | |
| }; | |
| }); |
|
This PR is in rebase hell 😬 |
|
yeah gotta update it, but bigger issue is I still can't stop the fucking flickering. Will rebase but then could use some help or maybe just ask around on nostr for someone who might know what's up |
We had a workshop at BTC prague where a bunch of people tried running the guardian setup on their phones and passing around the codes was a total pain. This adds qr scanning and qr codes for all the inputs/fields that need to get passed around between the guardians.
Summary by CodeRabbit
New Features
QrModal,QrScannerModal) for improved user interaction.Scannercomponent for seamless QR code scanning.BasicSettingsFormwith a QR code scanner for setting the host server URL.ConnectGuardianscomponent with a QR code icon that triggers a modal display.ConfirmFollowersConnectedcomponent for confirming the connection status of followers.VerifyGuardianscomponent to allow direct QR scanning and verification.Bug Fixes
Chores
mprocs-nix.shscript for reliable directory handling.Documentation