feat: add QR Code to ShareModal (#2320)

* add dependency * add qr code to share modal * remove share file icon and increase size of qr code * chore: fix dep-check --------- Co-authored-by: Russell Dempsey <[email protected]>
ipfs · Jan 29, 2025 · 5dbccfd · 5dbccfd
1 parent 878975a
commit 5dbccfd
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/.aegir.js b/.aegir.js
@@ -28,6 +28,7 @@ export default {
       'react-identicons',
       'react-joyride',
       'react-overlays',
+      'react-qr-code',
       'react-virtualized',
       'redux-bundler-react',
       'tachyons',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "react-identicons": "^1.2.4",
     "react-joyride": "^2.3.0",
     "react-overlays": "^2.1.1",
+    "react-qr-code": "^2.0.15",
     "react-scripts": "5.0.1",
     "react-virtualized": "^9.22.3",
     "redux-bundler": "^26.1.0",

diff --git a/src/files/modals/share-modal/ShareModal.js b/src/files/modals/share-modal/ShareModal.js
@@ -1,16 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ShareIcon from '../../../icons/StrokeShare.js'
+import QRCode from 'react-qr-code'
 import Button from '../../../components/button/button.tsx'
 import { withTranslation } from 'react-i18next'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 
 const ShareModal = ({ t, tReady, onLeave, link, className, ...props }) => (
   <Modal {...props} className={className} onCancel={onLeave} >
-    <ModalBody title={t('shareModal.title')} Icon={ShareIcon}>
-      <p className='charcoal w-90 tl center'>{t('shareModal.description')}</p>
-
+    <ModalBody title={t('shareModal.title')}>
+      <p className='charcoal w-90 center'>{t('shareModal.description')}</p>
+      <div className='flex justify-center pb3'>
+        <QRCode
+          size={180}
+          value={link}
+        />
+      </div>
       <div className='flex center w-90 pb2'>
         <input
           value={link}