From 7a5e74868f60197db1d551a1d343e2ecff4769d6 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 26 Oct 2019 09:31:57 +0200
Subject: [PATCH 1/2] Bump QR display timeouts (adjust after looping)

---
 packages/react-qr/src/Display.tsx | 17 ++++++++++++-----
 packages/ui-keyring/package.json  |  2 +-
 yarn.lock                         |  8 ++++----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx
index 59eb116bc6..ee85bb2bcc 100644
--- a/packages/react-qr/src/Display.tsx
+++ b/packages/react-qr/src/Display.tsx
@@ -20,11 +20,13 @@ interface State {
   frames: Uint8Array[];
   frameIdx: number;
   image: string | null;
+  timerDelay: number;
   timerId: number | null;
   valueHash: string | null;
 }
 
-const FRAME_DELAY = 2100;
+const FRAME_DELAY = 2500;
+const TIMER_INC = 500;
 
 function getDataUrl (value: Uint8Array): string {
   const qr = qrcode(0, 'M');
@@ -43,6 +45,7 @@ class Display extends React.PureComponent<Props, State> {
     frames: [],
     frameIdx: 0,
     image: null,
+    timerDelay: FRAME_DELAY,
     timerId: null,
     valueHash: null
   };
@@ -69,7 +72,7 @@ class Display extends React.PureComponent<Props, State> {
 
   public componentDidMount (): void {
     this.setState({
-      timerId: window.setInterval(this.nextFrame, FRAME_DELAY)
+      timerId: window.setTimeout(this.nextFrame, FRAME_DELAY)
     });
   }
 
@@ -77,7 +80,7 @@ class Display extends React.PureComponent<Props, State> {
     const { timerId } = this.state;
 
     if (timerId) {
-      clearInterval(timerId);
+      clearTimeout(timerId);
     }
   }
 
@@ -105,7 +108,7 @@ class Display extends React.PureComponent<Props, State> {
   }
 
   private nextFrame = (): void => {
-    const { frames, frameIdx } = this.state;
+    const { frames, frameIdx, timerDelay } = this.state;
 
     if (!frames || frames.length <= 1) {
       return;
@@ -114,14 +117,18 @@ class Display extends React.PureComponent<Props, State> {
     const nextIdx = frameIdx === frames.length - 1
       ? 0
       : frameIdx + 1;
+    const nextDelay = timerDelay + ((nextIdx === 0) ? TIMER_INC : 0);
 
     // 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])
+      image: getDataUrl(frames[nextIdx]),
+      timerDelay: nextDelay
     });
+
+    setTimeout(this.nextFrame, nextDelay);
   }
 }
 
diff --git a/packages/ui-keyring/package.json b/packages/ui-keyring/package.json
index 40b87a1ea6..d1cd3aba53 100644
--- a/packages/ui-keyring/package.json
+++ b/packages/ui-keyring/package.json
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@polkadot/keyring": "^1.6.1",
-    "@polkadot/types": "^0.95.1",
+    "@polkadot/types": "^0.96.0-beta.1",
     "@polkadot/util": "^1.6.1"
   },
   "optionalDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 8685eaff23..b368cd1542 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2156,10 +2156,10 @@
   dependencies:
     "@types/chrome" "^0.0.91"
 
-"@polkadot/types@^0.95.1":
-  version "0.95.1"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.95.1.tgz#15869606391a3489a142662a4fb9de4bb4111993"
-  integrity sha512-Jh6qOrbGn36xd801DnUmk51q2j+9C4hIOCwRS2XUqgP5OjYmg+sIde+5SkbwXv7H0W0W1qELmlmmvgDs7sCksA==
+"@polkadot/types@^0.96.0-beta.1":
+  version "0.96.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.96.0-beta.1.tgz#805915181bb19fdc94bc9d42bdb7096f19c95bb6"
+  integrity sha512-N+dk8SslV2lqnrmN1bePwO/L1GgCQABLw1OoMDR9WIlFmO95xsZC2a9XaolhOZY71GHDwVfrjvP+weVkH2Xi1g==
   dependencies:
     "@babel/runtime" "^7.6.3"
     "@polkadot/util" "^1.6.1"

From d6881ef5d3bb264724374bc2d6ac1dd0b72144c1 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 10 Nov 2019 16:41:59 +0100
Subject: [PATCH 2/2] timerId to state

---
 packages/react-qr/src/Display.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx
index ee85bb2bcc..e64445e95a 100644
--- a/packages/react-qr/src/Display.tsx
+++ b/packages/react-qr/src/Display.tsx
@@ -118,6 +118,7 @@ class Display extends React.PureComponent<Props, State> {
       ? 0
       : frameIdx + 1;
     const nextDelay = timerDelay + ((nextIdx === 0) ? TIMER_INC : 0);
+    const timerId = setTimeout(this.nextFrame, nextDelay);
 
     // only encode the frames on demand, not above as part of the
     // state derivation - in the case of large payloads, this should
@@ -125,10 +126,9 @@ class Display extends React.PureComponent<Props, State> {
     this.setState({
       frameIdx: nextIdx,
       image: getDataUrl(frames[nextIdx]),
+      timerId,
       timerDelay: nextDelay
     });
-
-    setTimeout(this.nextFrame, nextDelay);
   }
 }