Export address and contact metadata in QR code

Related to #183

locales/bg-BG/translation.json

@@ -288,7 +288,7 @@
   "Review": "Преглед",
   "Save": "Запази",
   "Scan the blockchain for addresses you used in the past.": "Scan the blockchain for addresses you used in the past.",
-  "Scan this QR code with your mobile wallet.": "Scan this QR code with your mobile wallet.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Search",
   "Search for label, a hash or an asset...": "Search for label, a hash or an asset...",
   "Search for name or a hash...": "Search for name or a hash...",

locales/de-DE/translation.json

@@ -288,7 +288,7 @@
   "Review": "Überprüfen",
   "Save": "Speichern",
   "Scan the blockchain for addresses you used in the past.": "Scan the blockchain for addresses you used in the past.",
-  "Scan this QR code with your mobile wallet.": "Scan this QR code with your mobile wallet.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Search",
   "Search for label, a hash or an asset...": "Search for label, a hash or an asset...",
   "Search for name or a hash...": "Search for name or a hash...",

locales/en-US/translation.json

@@ -284,7 +284,7 @@
   "Review": "Review",
   "Save": "Save",
   "Scan the blockchain for addresses you used in the past.": "Scan the blockchain for addresses you used in the past.",
-  "Scan this QR code with your mobile wallet.": "Scan this QR code with your mobile wallet.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Search",
   "Search for label, a hash or an asset...": "Search for label, a hash or an asset...",
   "Search for name or a hash...": "Search for name or a hash...",

locales/es-ES/translation.json

@@ -288,7 +288,7 @@
   "Review": "Comprobar",
   "Save": "Guardar",
   "Scan the blockchain for addresses you used in the past.": "Scan the blockchain for addresses you used in the past.",
-  "Scan this QR code with your mobile wallet.": "Scan this QR code with your mobile wallet.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Search",
   "Search for label, a hash or an asset...": "Search for label, a hash or an asset...",
   "Search for name or a hash...": "Search for name or a hash...",

locales/fr-FR/translation.json

@@ -288,7 +288,7 @@
   "Review": "Vérification",
   "Save": "Sauvegarder",
   "Scan the blockchain for addresses you used in the past.": "Scannez la blockchain pour trouver des adresses utilisées par le passé.",
-  "Scan this QR code with your mobile wallet.": "Scannez ce code QR avec votre portefeuille mobile.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Chercher",
   "Search for label, a hash or an asset...": "Cherchez un label, un hash ou un actif...",
   "Search for name or a hash...": "Cherchez un nom ou un hash...",

locales/id-ID/translation.json

@@ -288,7 +288,7 @@
   "Review": "Ulasan",
   "Save": "Simpan",
   "Scan the blockchain for addresses you used in the past.": "Pindai blockchain untuk alamat yang Anda gunakan sebelumnya.",
-  "Scan this QR code with your mobile wallet.": "Pindai kode QR ini dengan dompet seluler Anda.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Cari",
   "Search for label, a hash or an asset...": "Telusuri untuk label, hash, atau aset...",
   "Search for name or a hash...": "Telusuri untuk nama atau hash...",

locales/pt-PT/translation.json

@@ -288,7 +288,7 @@
   "Review": "Rever",
   "Save": "Guardar",
   "Scan the blockchain for addresses you used in the past.": "Scan the blockchain for addresses you used in the past.",
-  "Scan this QR code with your mobile wallet.": "Scan this QR code with your mobile wallet.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Search",
   "Search for label, a hash or an asset...": "Search for label, a hash or an asset...",
   "Search for name or a hash...": "Search for name or a hash...",

locales/ru-RU/translation.json

@@ -288,7 +288,7 @@
   "Review": "Обзор",
   "Save": "Сохранить",
   "Scan the blockchain for addresses you used in the past.": "Просканируйте блокчейн на наличие адресов, которые вы использовали в прошлом.",
-  "Scan this QR code with your mobile wallet.": "Отсканируйте этот QR-код с помощью своего мобильного кошелька.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Найти",
   "Search for label, a hash or an asset...": "Поиск по имени, хэшу или активу...",
   "Search for name or a hash...": "Поиск по имени или хэшу...",

locales/tr-TR/translation.json

@@ -288,7 +288,7 @@
   "Review": "Gözden geçir",
   "Save": "Kaydet",
   "Scan the blockchain for addresses you used in the past.": "Scan the blockchain for addresses you used in the past.",
-  "Scan this QR code with your mobile wallet.": "Scan this QR code with your mobile wallet.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Search",
   "Search for label, a hash or an asset...": "Search for label, a hash or an asset...",
   "Search for name or a hash...": "Search for name or a hash...",

locales/vi-VN/translation.json

@@ -288,7 +288,7 @@
   "Review": "Xem lại",
   "Save": "Lưu lại",
   "Scan the blockchain for addresses you used in the past.": "Quét các địa chỉ trên blockchain mà bạn đã sử dụng trước đó.",
-  "Scan this QR code with your mobile wallet.": "Quét mã QR này bằng điện thoại của bạn.",
+  "Scan this animated QR code with your mobile wallet.": "Scan this animated QR code with your mobile wallet.",
   "Search": "Tìm kiếm",
   "Search for label, a hash or an asset...": "Tìm theo nhãn, hash hoặc tài sản...",
   "Search for name or a hash...": "Tìm theo tên hoặc hash...",

package.json

@@ -90,6 +90,7 @@
     "nanoid": "^4.0.0",
     "posthog-js": "^1.52.0",
     "prettier": "^2.7.1",
+    "qrloop": "^1.4.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
     "react-color": "^2.19.3",

src/modals/WalletQRCodeExportModal.tsx

@@ -18,35 +18,73 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { encrypt } from '@alephium/sdk'
 import { ScanLine } from 'lucide-react'
-import { useState } from 'react'
+import { dataToFrames } from 'qrloop'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import QRCode from 'react-qr-code'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import InfoBox from '@/components/InfoBox'
 import { Section } from '@/components/PageComponents/PageContainers'
 import PasswordConfirmation from '@/components/PasswordConfirmation'
 import { useAppSelector } from '@/hooks/redux'
 import CenteredModal from '@/modals/CenteredModal'
+import { selectAllAddresses, selectAllContacts } from '@/storage/addresses/addressesSelectors'
+
+const FPS = 5
 
 const WalletQRCodeExportModal = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const activeWalletMnemonic = useAppSelector((state) => state.activeWallet.mnemonic)
+  const addresses = useAppSelector(selectAllAddresses)
+  const contacts = useAppSelector(selectAllContacts)
+
+  const [frames, setFrames] = useState<string[]>([])
+  const [frame, setFrame] = useState(0)
+
+  // Inspired by:
+  // - https://github.com/LedgerHQ/ledger-live/blob/edc7cc4091969564f8fe295ff2bf0a3e425a4ba6/apps/ledger-live-desktop/src/renderer/components/Exporter/QRCodeExporter.tsx
+  // - https://github.com/gre/qrloop/blob/06eaa7fd23bd27e0c638b1c66666cada1bbd0d30/examples/web-text-exporter
+  useEffect(() => {
+    let lastT: number
+    let requestedAnimationFrame: number
+
+    const loop = (t: number) => {
+      requestedAnimationFrame = requestAnimationFrame(loop)
+
+      if (!lastT) lastT = t
+
+      if ((t - lastT) * FPS < 1000) return
 
-  const [qrCodeTextToEncode, setQrCodeTextToEncode] = useState('')
+      lastT = t
+
+      setFrame((frame: number) => (frames.length > 0 ? (frame + 1) % frames.length : 0))
+    }
+
+    requestedAnimationFrame = requestAnimationFrame(loop)
+
+    return () => {
+      cancelAnimationFrame(requestedAnimationFrame)
+    }
+  }, [frames.length])
 
   if (!activeWalletMnemonic) return null
 
   const handleCorrectPasswordEntered = (password: string) => {
-    const encryptedDataToEncode = encrypt(password, activeWalletMnemonic, 'sha512')
+    const dataToEncrypt = {
+      mnemonic: activeWalletMnemonic,
+      addresses: addresses.map(({ index, label, color, isDefault }) => ({ index, label, color, isDefault })),
+      contacts: contacts.map(({ name, address }) => ({ name, address }))
+    }
+    const encryptedData = encrypt(password, JSON.stringify(dataToEncrypt), 'sha512')
 
-    setQrCodeTextToEncode(encryptedDataToEncode)
+    setFrames(dataToFrames(encryptedData, 160, 4))
   }
 
   return (
-    <CenteredModal title={t('Export wallet')} onClose={onClose} focusMode narrow={!qrCodeTextToEncode} skipFocusOnMount>
-      {!qrCodeTextToEncode ? (
+    <CenteredModal title={t('Export wallet')} onClose={onClose} focusMode narrow={frames.length === 0} skipFocusOnMount>
+      {frames.length === 0 ? (
         <div>
           <PasswordConfirmation
             text={t('Type your password to export your wallet.')}
@@ -56,12 +94,30 @@ const WalletQRCodeExportModal = ({ onClose }: { onClose: () => void }) => {
         </div>
       ) : (
         <Section>
-          <InfoBox text={t('Scan this QR code with your mobile wallet.')} Icon={ScanLine} importance="accent" />
-          <QRCode size={550} value={qrCodeTextToEncode} bgColor={theme.bg.primary} fgColor={theme.font.primary} />
+          <InfoBox
+            text={t('Scan this animated QR code with your mobile wallet.')}
+            Icon={ScanLine}
+            importance="accent"
+          />
+          <QRCodeLoop>
+            {frames.map((data, i) => (
+              <div key={i} style={{ position: 'absolute', opacity: i === frame ? 1 : 0 }}>
+                <QRCode size={460} value={data} bgColor={theme.bg.primary} fgColor={theme.font.primary} />
+              </div>
+            ))}
+          </QRCodeLoop>
         </Section>
       )}
     </CenteredModal>
   )
 }
 
 export default WalletQRCodeExportModal
+
+const QRCodeLoop = styled.div`
+  position: relative;
+  height: 460px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`