support JSON based restore

Author: polymorpher

code/client/src/components/Common.jsx

@@ -109,3 +109,17 @@ export const getDataFromFile = file =>
     reader.addEventListener('error', () => reject(reader.error))
     reader.readAsArrayBuffer(file)
   })
+
+export const getTextFromFile = file =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.addEventListener('load', () => resolve(reader.result))
+    reader.addEventListener('error', () => reject(reader.error))
+    reader.readAsText(file)
+  })
+
+export const getDataURLFromFile = (img) => new Promise((resolve) => {
+  const reader = new FileReader()
+  reader.addEventListener('load', () => resolve(reader.result))
+  reader.readAsDataURL(img)
+})

code/client/src/components/QrCodeScanner.jsx

@@ -9,6 +9,7 @@ import { useWindowDimensions } from '../util'
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined'
 import UploadOutlined from '@ant-design/icons/UploadOutlined'
 import jsQR from 'jsqr'
+import { getDataURLFromFile, getTextFromFile } from './Common'
 
 const QrCodeScanner = ({ onScan, shouldInit, style }) => {
   const ref = useRef()
@@ -78,37 +79,45 @@ const QrCodeScanner = ({ onScan, shouldInit, style }) => {
     image.src = uri
   })
 
-  const getBase64 = (img) => new Promise((resolve) => {
-    const reader = new FileReader()
-    reader.addEventListener('load', () => resolve(reader.result))
-    reader.readAsDataURL(img)
-  })
-
   const onQrcodeChange = async (info) => {
     if (info.file.status === 'uploading') {
       setQrCodeImageUploading(true)
     }
 
     if (info.file.status === 'done') {
-      const imageUri = await getBase64(info.file.originFileObj)
-      const imageData = await convertURIToImageData(imageUri)
-      const qrCode = jsQR(imageData.data, imageData.width, imageData.height)
-      if (!qrCode) {
-        message.error('Fail to read the uploaded image.', 15)
+      try {
+        if (info.file?.name?.endsWith('.json')) {
+          const jsonData = await getTextFromFile(info.file.originFileObj)
+          message.debug(jsonData)
+          const parsed = JSON.parse(jsonData)
+          onScan(parsed, true)
+          return
+        }
+        const imageUri = await getDataURLFromFile(info.file.originFileObj)
+        const imageData = await convertURIToImageData(imageUri)
+        const qrCode = jsQR(imageData.data, imageData.width, imageData.height)
+        if (!qrCode) {
+          message.error('Fail to read the uploaded image.', 15)
+          return
+        }
+        onScan(qrCode.data)
+      } catch (ex) {
+        console.error(ex)
+        message.error('An error occurred while parsing the QR Code image. Please contact 1wallet developer')
+      } finally {
         setQrCodeImageUploading(false)
-        return
       }
-      onScan(qrCode.data)
-      setQrCodeImageUploading(false)
     }
   }
 
   const beforeUpload = (file) => {
     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
-    if (!isJpgOrPng) {
-      message.error('You can only upload JPG/PNG file')
+    const isJson = file.type === 'application/json'
+    // message.debug(`File type: ${file.type}`)
+    if (!isJpgOrPng && !isJson) {
+      message.error('You can only upload JSON or JPG/PNG file')
     }
-    return isJpgOrPng
+    return isJpgOrPng || isJson
   }
 
   return (
@@ -151,7 +160,7 @@ const QrCodeScanner = ({ onScan, shouldInit, style }) => {
           beforeUpload={beforeUpload}
           onChange={onQrcodeChange}
         >
-          <Button shape='round' icon={qrCodeImageUploading ? <LoadingOutlined /> : <UploadOutlined />}>Use Image Instead</Button>
+          <Button shape='round' icon={qrCodeImageUploading ? <LoadingOutlined /> : <UploadOutlined />}>Use Image or JSON Instead</Button>
         </Upload>
       </Row>
     </>

code/client/src/pages/Restore/RestoreByScan.jsx

@@ -89,7 +89,7 @@ const RestoreByScan = ({ isActive, onComplete, onCancel }) => {
     f()
   }, [addressInput])
 
-  const onScan = async (e) => {
+  const onScan = async (e, isJson) => {
     if (e && !secret) {
       const now = performance.now()
       if (!(now - control.lastScan > config.scanDelay)) {
@@ -98,7 +98,9 @@ const RestoreByScan = ({ isActive, onComplete, onCancel }) => {
       control.lastScan = now
       try {
         let parsed
-        if (e.startsWith('otpauth://totp')) {
+        if (isJson) {
+          parsed = e
+        } else if (e.startsWith('otpauth://totp')) {
           parsed = parseOAuthOTP(e)
         } else {
           parsed = parseMigrationPayload(e)

code/client/src/pages/Show/Extend.jsx

@@ -348,16 +348,17 @@ const Extend = ({
     }
   }, [method])
 
-  const onScan = (e) => {
+  const onScan = (e, isJson) => {
     if (e && !seed) {
       try {
         let parsed
-        if (e.startsWith('otpauth://totp')) {
+        if (isJson) {
+          parsed = e
+        } if (e.startsWith('otpauth://totp')) {
           parsed = parseOAuthOTP(e)
         } else {
           parsed = parseMigrationPayload(e)
         }
-
         if (!parsed) {
           return
         }