improve QR code loading behavior and translation

iotaledger · Sep 6, 2024 · bb1bb37 · bb1bb37
1 parent a01374d
commit bb1bb37
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -334,6 +334,11 @@
       "incorporatedOn": "Incorporated on",
       "status": "Status"
     },
+    "QR": {
+      "copySuccess": "Link copied to clipboard",
+      "copyErrorPermission": "Could not get permission to copy text to clipboard",
+      "copyError": "Could not copy text to clipboard"
+    },
     "websocket": {
       "connectionErrorDescription": "Please try again!",
       "verification": "Verification",

diff --git a/web/src/components/QRCode.tsx b/web/src/components/QRCode.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import { App, Input, QRCode } from 'antd';
 import { CopyOutlined, SendOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
 
 const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
 
     const { message } = App.useApp();
 
+    const { t } = useTranslation();
+
     const copyToClipbloard = (text: string) => {
 
         //@ts-ignore
@@ -15,18 +18,18 @@ const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
                 navigator.clipboard.writeText(text).then(function () {
                     message.open({
                         type: 'success',
-                        content: 'Link copied to clipboard', // TODO: translate
+                        content: t("components.QR.copySuccess"),
                     });
                 }, function (err) {
                     message.open({
                         type: 'error',
-                        content: 'Could not copy text to clipboard', // TODO: translate
+                        content: t("components.QR.copyError"),
                     });
                 });
             } else {
                 message.open({
                     type: 'error',
-                    content: 'Could not get permission to copy text to clipboard', // TODO: translate
+                    content: t("components.QR.copyErrorPermission"),
                 });
             }
         });
@@ -41,9 +44,7 @@ const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
     return (
         <>
             <div className='qr-code'>
-                {text && (
-                    <QRCode type="svg" status={text ? 'active' : 'loading'} bordered={false} value={text} errorLevel='H' size={size || 290} />
-                )}
+                <QRCode type="svg" status={text ? 'active' : 'loading'} bordered={false} value={text ?? "loading"} errorLevel='H' size={size || 290} />
             </div>
             <div className='qr-code__link'>
                 <Input addonBefore={<CopyOutlined onClick={() => copyToClipbloard(text ?? "")} />} value={text} onChange={() => undefined} addonAfter={<SendOutlined onClick={() => gotoLink(text ?? "")} />} />

diff --git a/web/src/pages/Company/ProveIdentity.tsx b/web/src/pages/Company/ProveIdentity.tsx
@@ -55,7 +55,7 @@ const ProveIdentity: React.FC = () => {
                         <Trans i18nKey="pages.company.signIn.subtitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        <QRCode text={state[Scopes.CompanyHouse]?.QRcontent} />
+                        <QRCode text={undefined} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}

diff --git a/web/src/styles/pages/scanQRcode.scss b/web/src/styles/pages/scanQRcode.scss
@@ -20,6 +20,10 @@
             margin-top: 15px;
             margin-bottom: 10px;
         }
+
+        .ant-qrcode-mask {
+            background: white;
+        }
     }
 
     .cta {