Basic QR tests (+ number encoding fix) (#168)

* Basic QR tests (+ number encoding fix)

* skipEncoding for Address display

* Fixup comments

packages/react-qr/src/Display.tsx

@@ -7,16 +7,14 @@ import { BaseProps } from './types';
 import React from 'react';
 import qrcode from 'qrcode-generator';
 import styled from 'styled-components';
-import { u8aConcat } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import { createSize } from './constants';
-import { encodeNumber, decodeString } from './util';
+import { createFrames, createImgSize, decodeString } from './util';
 
 interface Props extends BaseProps {
   size?: number;
+  skipEncoding?: boolean;
   value: Uint8Array;
-  withMulti?: boolean;
 }
 
 interface State {
@@ -28,8 +26,6 @@ interface State {
 }
 
 const FRAME_DELAY = 2100;
-const FRAME_SIZE = 1716;
-const MULTIPART = new Uint8Array([0]);
 
 function getDataUrl (value: string): string {
   const qr = qrcode(0, 'M');
@@ -40,26 +36,6 @@ function getDataUrl (value: string): string {
   return qr.createDataURL(16, 0);
 }
 
-function createFrames (input: Uint8Array): string[] {
-  const frames = [];
-  let idx = 0;
-
-  while (idx < input.length) {
-    frames.push(input.subarray(idx, idx + FRAME_SIZE));
-
-    idx += FRAME_SIZE;
-  }
-
-  return frames.map((frame, index: number): string =>
-    decodeString(u8aConcat(
-      MULTIPART,
-      encodeNumber(frames.length),
-      encodeNumber(index),
-      frame
-    ))
-  );
-}
-
 class Display extends React.PureComponent<Props, State> {
   public state: State = {
     frames: [],
@@ -69,16 +45,16 @@ class Display extends React.PureComponent<Props, State> {
     valueHash: null
   };
 
-  public static getDerivedStateFromProps ({ value, withMulti = true }: Props, prevState: State): Pick<State, never> | null {
+  public static getDerivedStateFromProps ({ value, skipEncoding = false }: Props, prevState: State): Pick<State, never> | null {
     const valueHash = xxhashAsHex(value);
 
     if (valueHash === prevState.valueHash) {
       return null;
     }
 
-    const frames: string[] = withMulti
-      ? createFrames(value)
-      : [decodeString(value)];
+    const frames: string[] = skipEncoding
+      ? [decodeString(value)]
+      : createFrames(value);
 
     return {
       frames,
@@ -113,7 +89,7 @@ class Display extends React.PureComponent<Props, State> {
     return (
       <div
         className={className}
-        style={createSize(size)}
+        style={createImgSize(size)}
       >
         <div
           className='ui--qr-Display'