Skip u8a -> string -> number[] for qrcode generation (#170)

* Skip u8a -> string -> number[] for qrcode generation

* Fix tests for Uint8Array conversion

* Bumps

packages/react-identicon/package.json

@@ -24,8 +24,8 @@
     "react": "*"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^0.95.0-beta.2",
-    "@polkadot/util-crypto": "^0.95.0-beta.2",
+    "@polkadot/keyring": "^0.95.0-beta.3",
+    "@polkadot/util-crypto": "^0.95.0-beta.3",
     "xmlserializer": "^0.6.1"
   }
 }

packages/react-qr/src/Display.tsx

@@ -5,11 +5,11 @@
 import { BaseProps } from './types';
 
 import React from 'react';
-import qrcode from 'qrcode-generator';
 import styled from 'styled-components';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import { createFrames, createImgSize, decodeString } from './util';
+import qrcode from './qrcode';
+import { createFrames, createImgSize } from './util';
 
 interface Props extends BaseProps {
   size?: number;
@@ -18,7 +18,7 @@ interface Props extends BaseProps {
 }
 
 interface State {
-  frames: string[];
+  frames: Uint8Array[];
   frameIdx: number;
   image: string | null;
   timerId: number | null;
@@ -27,9 +27,12 @@ interface State {
 
 const FRAME_DELAY = 2100;
 
-function getDataUrl (value: string): string {
+function getDataUrl (value: Uint8Array): string {
   const qr = qrcode(0, 'M');
 
+  // HACK See out qrcode stringToBytes override as used internally. This
+  // will only work for the case where we actuall pass `Bytes` in here
+  // @ts-ignore
   qr.addData(value, 'Byte');
   qr.make();
 
@@ -52,10 +55,11 @@ class Display extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const frames: string[] = skipEncoding
-      ? [decodeString(value)]
+    const frames: Uint8Array[] = skipEncoding
+      ? [value]
       : createFrames(value);
 
+    // encode on demand
     return {
       frames,
       frameIdx: 0,
@@ -112,6 +116,9 @@ class Display extends React.PureComponent<Props, State> {
       ? 0
       : frameIdx + 1;
 
+    // only encode the frames on demand, not above as part of the
+    // state derivation - in the case of large payloads, this should
+    // be slightly more responsive on initial load
     this.setState({
       frameIdx: nextIdx,
       image: getDataUrl(frames[nextIdx])

packages/react-qr/src/qrcode.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2019 @polkadot/react-qr authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import qrcode from 'qrcode-generator';
+
+// HACK The default function take string -> number[], the Uint8array is compatible
+// with that signature and the use thereof
+// @ts-ignore
+qrcode.stringToBytes = (data: Uint8Array): Uint8Array =>
+  data;
+
+export default qrcode;

packages/react-qr/src/util.spec.ts

@@ -78,7 +78,7 @@ describe('util', (): void => {
       expect(
         createFrames(
           createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', '0x12345678')
-        ).map((str): string => u8aToHex(encodeString(str)))
+        ).map((u8a): string => u8aToHex(u8a))
       ).toEqual([
         '0x' +
         '00' + // multipart

packages/react-qr/src/util.ts

@@ -46,7 +46,7 @@ export function createSignPayload (address: string, payload: string | Uint8Array
   );
 }
 
-export function createFrames (input: Uint8Array): string[] {
+export function createFrames (input: Uint8Array): Uint8Array[] {
   const frames = [];
   let idx = 0;
 
@@ -56,13 +56,13 @@ export function createFrames (input: Uint8Array): string[] {
     idx += FRAME_SIZE;
   }
 
-  return frames.map((frame, index: number): string =>
-    decodeString(u8aConcat(
+  return frames.map((frame, index: number): Uint8Array =>
+    u8aConcat(
       MULTIPART,
       encodeNumber(frames.length),
       encodeNumber(index),
       frame
-    ))
+    )
   );
 }
 

packages/ui-keyring/package.json

@@ -19,9 +19,9 @@
     "styled-components": "^4.3.1"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^0.95.0-beta.2",
-    "@polkadot/types": "^0.90.0-beta.1",
-    "@polkadot/util": "^0.95.0-beta.2"
+    "@polkadot/keyring": "^0.95.0-beta.3",
+    "@polkadot/types": "^0.90.0-beta.8",
+    "@polkadot/util": "^0.95.0-beta.3"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",

packages/ui-settings/package.json

@@ -14,7 +14,7 @@
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@polkadot/util": "^0.95.0-beta.2"
+    "@polkadot/util": "^0.95.0-beta.3"
   },
   "peerDependencies": {
     "@polkadot/util": "*"