Feat/cold wallet

packages/apps/dev-wallet/package.json

@@ -38,14 +38,19 @@
     "classnames": "^2.3.1",
     "ed25519-keygen": "0.4.8",
     "elliptic": "^6.5.5",
+    "js-base64": "^3.7.7",
     "js-yaml": "~4.1.0",
+    "jsqr": "^1.4.0",
+    "qram": "^0.3.9",
     "react": "^18.2.0",
     "react-aria": "^3.31.1",
     "react-console-emulator": "^5.0.2",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-qr-code": "^2.0.15",
     "react-qrcode-logo": "^2.9.0",
     "react-router-dom": "^6.26.2",
+    "react-webcam": "^7.2.0",
     "swr": "^2.2.2",
     "usehooks-ts": "^2.9.1",
     "yup": "^1.2.0"

packages/apps/dev-wallet/src/pages/signature-builder/qr-code.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+/// <reference types="./qram.d.ts" />
+import { encodeURL } from 'js-base64';
+import { Encoder } from 'qram';
+import { useEffect, useState } from 'react';
+import QR from 'react-qr-code';
+
+const textEncoder = new TextEncoder();
+export const QRCode = ({ payload }: { payload: string }) => {
+  console.warn('DEBUGPRINT[1]: qr-code.tsx:10: payload=', JSON.parse(payload));
+  const [qrCode, setQRCode] = useState<string>();
+  useEffect(() => {
+    let stream: ReadableStream;
+    const updateQRCode = async () => {
+      const p = textEncoder.encode(payload);
+      const encoder = new Encoder({ data: p, blockSize: 256 });
+      const fps = 6;
+      const timer = encoder.createTimer({ fps });
+      stream = await encoder.createReadableStream();
+
+      const reader = stream.getReader();
+      timer.start();
+
+      const readRecursive = async () => {
+        const { value, done } = await reader.read();
+        if (done) {
+          return;
+        }
+        setQRCode(encodeURL(value.data));
+        await timer.nextFrame();
+        readRecursive();
+      };
+      readRecursive();
+    };
+    updateQRCode();
+
+    return () => {
+      stream?.cancel();
+    };
+  }, [payload]);
+  if (!qrCode) {
+    return null;
+  }
+
+  return <QR value={qrCode} />;
+};

packages/apps/dev-wallet/src/pages/signature-builder/qram.d.ts

@@ -0,0 +1,20 @@
+type Timer = {
+  start(): void;
+  cancel(): void;
+  nextFrame(): Promise<void>;
+};
+declare module 'qram' {
+  export class Encoder {
+    constructor({ data: Uint8Array, blockSize: number });
+    createTimer({ fps: number }): Timer;
+    createReadableStream(): Promise<ReadableStream>;
+  }
+  export class Decoder {
+    constructor();
+    decode(): Promise<any>;
+    enqueue(data: Uint8Array): Promise<any>;
+    cancel(): void;
+  }
+  export function decode(str: string): string;
+  export function getImageData(x: any): ImageData;
+}

packages/apps/dev-wallet/src/pages/signature-builder/scanner.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { toUint8Array } from 'js-base64';
+import jsqr from 'jsqr';
+import { Decoder, getImageData } from 'qram';
+import { useEffect, useRef } from 'react';
+import Webcam from 'react-webcam';
+const textDecoder = new TextDecoder();
+type QRScannerProps = {
+  onScanned: (data: any) => void;
+};
+export const QRScanner = ({ onScanned }: QRScannerProps) => {
+  const webcamRef = useRef<any>(null);
+  const canvasRef = useRef<any>(null);
+  useEffect(() => {
+    const decoder = new Decoder();
+    decoder
+      .decode()
+      .then((res) => {
+        onScanned(JSON.parse(textDecoder.decode(res.data)));
+      })
+      .catch((e) => {});
+    requestAnimationFrame(async function enqueue() {
+      try {
+        const video: any = webcamRef.current?.video;
+        if (!video) return requestAnimationFrame(enqueue);
+
+        const ctx = canvasRef.current.getContext('2d', {
+          willReadFrequently: true,
+        });
+        const imageData = getImageData({
+          source: video,
+          canvas: ctx.canvas,
+        });
+        const res = jsqr(imageData.data, imageData.width, imageData.height);
+        console.warn('DEBUGPRINT[5]: qr-scanner.tsx:34: res=', res);
+
+        if (!res) return requestAnimationFrame(enqueue);
+
+        const progress = await decoder.enqueue(toUint8Array(res.data));
+
+        if (!progress.done) requestAnimationFrame(enqueue);
+      } catch (e) {}
+    });
+    return () => {
+      decoder.cancel();
+    };
+  }, []);
+  return (
+    <>
+      <Webcam
+        ref={webcamRef}
+        height={720}
+        width={1280}
+        videoConstraints={{
+          width: 1280,
+          height: 720,
+          facingMode: 'environment',
+        }}
+      />
+      <canvas ref={canvasRef} style={{ display: 'none' }} />
+    </>
+  );
+};

packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx

@@ -34,6 +34,8 @@ import classNames from 'classnames';
 import yaml from 'js-yaml';
 import { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { QRCode } from './qr-code';
+import { QRScanner } from './scanner';
 import { codeArea } from './style.css';
 
 const getTxFromUrlHash = () =>
@@ -54,6 +56,11 @@ export function SignatureBuilder() {
   const { profile, activeNetwork, networks, setActiveNetwork } = useWallet();
   const navigate = usePatchedNavigate();
 
+  // QR Related code
+  const [showQR, setShowQR] = useState(false);
+  const [showScanner, setShowScanner] = useState(false);
+
+  // End QR Related code
   const exec =
     pactCommand && pactCommand.payload && 'exec' in pactCommand.payload
       ? pactCommand.payload.exec
@@ -205,12 +212,26 @@ export function SignatureBuilder() {
           </Notification>
         )}
         <Box>
-          <Box>
-            {['PactCommand', 'quickSignRequest'].includes(schema!) && (
+          {['PactCommand', 'quickSignRequest'].includes(schema!) && (
+            <Stack gap="md">
               <Button onPress={reviewTransaction}>Review Transaction</Button>
-            )}
-          </Box>
+              <Button onPress={() => setShowQR(!showQR)}>Show QR</Button>
+              <Button onPress={() => setShowScanner(!showScanner)}>
+                Scan QR
+              </Button>
+            </Stack>
+          )}
         </Box>
+        {showQR && (
+          <Box>
+            <QRCode payload={JSON.stringify(unsignedTx)} />
+          </Box>
+        )}
+        {showScanner && (
+          <Box>
+            <QRScanner onScanned={(data) => console.log('woop woop', data)} />
+          </Box>
+        )}
       </Stack>
     </>
   );