refactor: disable qr upload button on firefox (#445)

ArdentHQ · Jul 19, 2024 · 40f36bc · 40f36bc
1 parent 79052b4
commit 40f36bc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/components/send/SendModalButton.tsx b/src/components/send/SendModalButton.tsx
@@ -1,20 +1,30 @@
 import { MouseEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/shared/components';
+import { Button, Tooltip } from '@/shared/components';
+import { isFirefox } from '@/lib/utils/isFirefox';
 
 const SendModalButton = ({ onClick }: { onClick: MouseEventHandler<HTMLButtonElement> }) => {
     const { t } = useTranslation();
 
     return (
-        <Button
-            variant='secondaryBlack'
-            className='!h-fit !w-fit !px-3 !py-1.5 !text-sm !font-medium'
-            iconTrailing='qr-code'
-            iconClass='h-4 w-4'
-            onClick={onClick}
+        <Tooltip
+            content={t('PAGES.SEND.QR_MODAL.FIREFOX_NOT_SUPPORTED')}
+            disabled={!isFirefox}
+            className='w-60'
         >
-            {t('PAGES.SEND.QR_MODAL.UPLOAD_QR')}
-        </Button>
+            <div>
+                <Button
+                    variant='secondaryBlack'
+                    className='!h-fit !w-fit !px-3 !py-1.5 !text-sm !font-medium'
+                    iconTrailing='qr-code'
+                    iconClass='h-4 w-4'
+                    onClick={onClick}
+                    disabled={isFirefox}
+                >
+                    {t('PAGES.SEND.QR_MODAL.UPLOAD_QR')}
+                </Button>
+            </div>
+        </Tooltip>
     );
 };
 

diff --git a/src/i18n/ns/pages.ts b/src/i18n/ns/pages.ts
@@ -276,6 +276,7 @@ export default {
             UPLOAD_QR: 'Upload QR',
             CHOOSE_YOUR_QR_CODE: 'Choose your QR Code, and the fields will auto-populate',
             PROCESSING_IMAGE: "We're processing your image...",
+            FIREFOX_NOT_SUPPORTED: 'QR Code upload is only supported on Chromium based browsers',
         },
     },
     ADDRESS_SETTINGS: {