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 {