frontend: tap/click to copy QR code

to improve UX especially on mobile, we're enabling tap/click
to copy for our QRCode component.

Author: shonsirsha

frontends/web/src/components/qrcode/qrcode.module.css

@@ -1,5 +1,55 @@
+
+.checkContainer {
+  align-items: center;
+  background: var(--color-success);
+  border-radius: 100%;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.copiedText {
+  margin-top: 16px;
+  transition: opacity 250ms;
+}
+
 .empty {
   width: 256px;
   height: 256px;
   color: var(--color-secondary);
+}
+
+.hide {
+  opacity: 0;
+}
+
+.hiddenInput {
+  height: 0;
+  opacity: 0;
+}
+
+.outerContainer {
+  display: flex;
+  margin: auto;
+  position: relative;
+}
+
+.qrCodeContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  transition: opacity 250ms;
+}
+
+
+.qrCodeContainer:hover {
+  cursor: pointer;
+}
+
+.show {
+  opacity: 1;
 }

frontends/web/src/components/qrcode/qrcode.tsx

@@ -17,18 +17,24 @@
 
 import { useLoad } from '../../hooks/api';
 import { getQRCode } from '../../api/backend';
+import { Check } from '../icon';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import style from './qrcode.module.css';
 
 type TProps = {
     data?: string;
     size?: number;
+    tapToCopy?: boolean;
 };
 
 export const QRCode = ({
   data,
   size = 256,
+  tapToCopy = true
 }: TProps) => {
   const qrCode = useLoad(data !== undefined ? getQRCode(data) : null, [data]);
+
   if (!qrCode) {
     if (data !== undefined) {
       return <div className={style.empty}></div>;
@@ -45,6 +51,49 @@ export const QRCode = ({
   }
 
   return (
-    <img width={size} height={size} src={qrCode.data} />
+    tapToCopy ?
+      <TapToCopyQRCode data={data} qrCodeData={qrCode.data} size={size} /> :
+      <img width={size} height={size} src={qrCode.data} />
+  );
+};
+
+type TTapToCopyQRCodeProps = {
+  data?: string;
+  qrCodeData: string
+  size: number
+}
+
+const TapToCopyQRCode = ({ data, qrCodeData, size }: TTapToCopyQRCodeProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [success, setSuccess] = useState(false);
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (success) {
+      setTimeout(() => setSuccess(false), 1500);
+    }
+  }, [success]);
+
+
+  const handleCopy = () => {
+    inputRef.current?.select();
+    if (document.execCommand('copy')) {
+      setSuccess(true);
+    }
+  };
+
+
+  return (
+    <div onClick={handleCopy}>
+      <input className={style.hiddenInput} ref={inputRef} value={data} readOnly/>
+      <div style={{ width: size, height: size }} className={style.outerContainer}>
+        <img className={`${style.qrCodeContainer}  ${success ? style.hide : style.show}`} width={size} height={size} src={qrCodeData} />
+        <div className={`${style.checkContainer} ${style.show}`}>
+          <Check width={size / 2} height={size / 2} />
+        </div>
+      </div>
+      <p className={`${style.copiedText} ${success ? style.show : style.hide}`}>{t('receive.qrCodeCopiedMessage')}</p>
+    </div>
   );
 };

frontends/web/src/locales/en/app.json

@@ -1380,6 +1380,7 @@
       "description": "To receive other tokens, enable them in the settings. If you deposit other tokens, they might not be accessible.",
       "warning": "Make sure to only receive {{coinName}} on this address."
     },
+    "qrCodeCopiedMessage": "Copied!",
     "scriptType": {
       "p2tr": "Taproot (newest format)",
       "p2wpkh": "Native Segwit (default)",

frontends/web/src/routes/account/receive/receive-bb01.tsx

@@ -164,7 +164,7 @@ export const Receive = ({
               { currentAddresses && (
                 <div style={{ position: 'relative' }}>
                   <div className={style.qrCodeContainer}>
-                    <QRCode data={enableCopy ? uriPrefix + address : undefined} />
+                    <QRCode tapToCopy={false} data={enableCopy ? uriPrefix + address : undefined} />
                   </div>
                   <div className={style.labels}>
                     { currentAddresses.length > 1 && (
@@ -266,7 +266,7 @@ export const Receive = ({
                             {t('receive.onlyThisCoin.description')}
                           </p>
                         )}
-                        <QRCode data={uriPrefix + address} />
+                        <QRCode tapToCopy={false} data={uriPrefix + address} />
                         <p>{t('receive.verifyInstruction')}</p>
                       </>}
                     </div>

frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx

@@ -172,14 +172,14 @@ class MobilePairing extends Component<Props, State> {
                       <div className="column column-1-2">
                         <label className="text-center">Apple App Store</label>
                         <div className="flex flex-column flex-center flex-items-center">
-                          <QRCode data="https://itunes.apple.com/us/app/digital-bitbox-2fa/id1079896740" size={148} />
+                          <QRCode tapToCopy={false} data="https://itunes.apple.com/us/app/digital-bitbox-2fa/id1079896740" size={148} />
                           <a target="_blank" rel="noreferrer" href="https://itunes.apple.com/us/app/digital-bitbox-2fa/id1079896740"><img src={appStoreBadge} className={style.badge} /></a>
                         </div>
                       </div>
                       <div className="column column-1-2">
                         <label className="text-center">Google Play Store</label>
                         <div className="flex flex-column flex-center flex-items-center">
-                          <QRCode data="https://play.google.com/store/apps/details?id=com.digitalbitbox.tfa" size={148} />
+                          <QRCode tapToCopy={false} data="https://play.google.com/store/apps/details?id=com.digitalbitbox.tfa" size={148} />
                           <a target="_blank" rel="noreferrer" href="https://play.google.com/store/apps/details?id=com.digitalbitbox.tfa"><img src={playStoreBadge} className={style.badge} /></a>
                         </div>
                       </div>
@@ -193,14 +193,14 @@ class MobilePairing extends Component<Props, State> {
             <div>
               <p className="m-top-none"><strong className="m-right-quarter">2.</strong>{t('pairing.start.step2')}</p>
               <div className="text-center">
-                <QRCode data={JSON.stringify(channel)} size={196} />
+                <QRCode tapToCopy={false} data={JSON.stringify(channel)} size={196} />
               </div>
             </div>
           </div>
         </div>
       );
     } else if (status === 'connectOnly') {
-      content = (<QRCode data={JSON.stringify({ channel, connectOnly: true })} />);
+      content = (<QRCode tapToCopy={false} data={JSON.stringify({ channel, connectOnly: true })} />);
     } else {
       content = (<p className="m-top-none">{t(`pairing.${status}.text`)}</p>);
     }