Merge pull request #157 from KeystoneHQ/new-sdk

New sdk

packages/sdk/demo.js

@@ -3,7 +3,9 @@ import { URDecoder } from "@ngraveio/bc-ur";
 
 sdk.bootstrap();
 
-const keystonehqSdk = sdk.getSdk();
+let keystonehqSdk;
+
+
 
 const showRead = async () => {
   const decodedResult = await keystonehqSdk.read(
@@ -25,6 +27,8 @@ const showRead = async () => {
 
 // showRead().then(console.log)
 
+
+
 const showPlay = async () => {
   const ur =
     "ur:eth-sign-request/onadtpdagdndcawmgtfrkigrpmndutdnbtkgfssbjnaohdgryagalalnascsgljpnbaelfdibemwaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaelaoxlbjyihjkjyeyaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaehnaehglalalaaxadaaadahtaaddyoeadlecsdwykadykadykaewkadwkaocybgeehfkswdtklffd";
@@ -36,4 +40,5 @@ const showPlay = async () => {
   });
 };
 
-showPlay().then(console.log);
+sdk.getSdk().then((sdk) => keystonehqSdk = sdk).then(showRead);
+// showRead().then(console.log);

packages/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keystonehq/sdk",
-  "version": "0.20.0",
+  "version": "0.21.3",
   "description": "Keystone airgaped wallet SDK",
   "author": "aaronisme <aarondongchen@gmail.com>",
   "homepage": "https://github.com/KeystoneHQ/keystone-airgaped-base#readme",
@@ -20,22 +20,22 @@
   },
   "scripts": {
     "clean": "rm -rf ./dist",
-    "start": "webpack serve --open",
+    "start": "pnpm run  build && webpack serve --open",
     "build": "tsdx build",
     "test": "jest --passWithNoTests"
   },
   "bugs": {
     "url": "https://github.com/KeystoneHQ/keystone-airgaped-base/issues"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
   },
   "dependencies": {
     "@ngraveio/bc-ur": "^1.0.0",
-    "qrcode.react": "^1.0.1",
-    "react-modal": "^3.12.1",
-    "react-qr-reader": "^2.2.1",
+    "@yudiel/react-qr-scanner": "2.0.0-beta.3",
+    "qrcode.react": "^3.1.0",
+    "react-modal": "^3.16.1",
     "rxjs": "^6.6.3"
   },
   "publishConfig": {
@@ -44,13 +44,12 @@
   "devDependencies": {
     "@babel/preset-typescript": "^7.15.0",
     "@types/qrcode.react": "^1.0.1",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.0.0",
-    "@types/react-modal": "^3.12.0",
-    "@types/react-qr-reader": "^2.1.3",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-modal": "^3.16.1",
     "html-webpack-plugin": "^5.3.2",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.6.2",
     "webpack": "^5.48.0",

packages/sdk/src/Root.tsx

@@ -1,8 +1,11 @@
+import { useEffect } from 'react';
 import { setupSdk } from "./service";
 import { useController } from "./hooks/useController";
 
 export default () => {
   const [Controller, { read, play, cameraReady }] = useController();
-  setupSdk(read, play, cameraReady);
+  useEffect(() => {
+    setupSdk(read, play, cameraReady);
+  }, []);
   return Controller;
-};
+};

packages/sdk/src/components/BaseQRCode.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import QRCode from "qrcode.react";
+import QRCodeSVG from "qrcode.react";
 
 export const BaseQRCode = ({
   size = 200,
@@ -10,5 +10,5 @@ export const BaseQRCode = ({
   size?: number;
   ecl?: "L" | "M" | "Q" | "H";
 }) => {
-  return <QRCode value={data} size={size} level={ecl} />;
+  return <QRCodeSVG value={data} size={size} level={ecl} />;
 };

packages/sdk/src/components/Button.tsx

@@ -1,11 +1,12 @@
 import React, { FunctionComponent } from "react";
 
 type Props = {
+  children: React.ReactNode;
   onClick: () => any;
 };
 
 const styleBase = {
-  minWidth: "16rem",
+  width: "50%",
   height: "3rem",
   background: "#784FFE",
   borderColor: "grey",

packages/sdk/src/components/ButtonGroup.tsx

@@ -1,6 +1,10 @@
-import React, { FunctionComponent } from "react";
+import React, { ReactNode } from 'react';
 
-export const ButtonGroup: FunctionComponent = (props) => {
+interface Props {
+  children: ReactNode;
+}
+
+export const ButtonGroup: React.FC<Props> = (props:Props) => {
   return (
     <div
       style={{

packages/sdk/src/hooks/useAnimatedQRCodeReader.tsx

@@ -7,8 +7,7 @@ import { Read, SupportedResult } from "../types";
 import { ButtonGroup } from "../components/ButtonGroup";
 import { LoadingSpinner } from "../components/LoadingSpinner";
 import { URDecoder } from "@ngraveio/bc-ur";
-
-const QrReader = React.lazy(() => import("react-qr-reader"));
+import { Scanner } from '@yudiel/react-qr-scanner';
 
 export interface URQRCodeData {
   total: number;
@@ -33,6 +32,7 @@ export const useAnimatedQRCodeReader = (): [
   const reset = () => {
     setURDecoder(new URDecoder());
     setError("");
+    setProgress(0);
   };
 
   const processQRCode = (qr: string, errorMessgeOnURType: string) => {
@@ -97,7 +97,7 @@ export const useAnimatedQRCodeReader = (): [
       {description && (
         <p style={{ fontSize: "1rem", textAlign: "center" }}>{description}</p>
       )}
-      <Suspense fallback={<div />}>
+      <Suspense fallback={<div style={{ position: "relative", width: "100%" }} />}>
         <div style={{ position: "relative", width: "100%" }}>
           {!cameraReady ? (
             <div
@@ -111,22 +111,23 @@ export const useAnimatedQRCodeReader = (): [
               <LoadingSpinner />
             </div>
           ) : null}
-          <QrReader
-            onScan={(data: any) => {
+          <Scanner
+            onResult={(data: any) => {
               if (data) {
                 setCameraReady(true);
                 processQRCode(data, URTypeErrorMessage);
               }
             }}
-            delay={100}
-            style={{ width: "100%" }}
+            styles={{ container: { width: "100%" }, finderBorder: 0 }}
             onError={(e) => {
               setError(e.message);
             }}
+            options={{ delayBetweenScanSuccess: 100, delayBetweenScanAttempts: 100 }}
+            components={{ tracker: false, audio: false, torch: false, count: false, onOff: false }}
           />
         </div>
       </Suspense>
-      <p>{(progress * 100).toFixed(0)} %</p>
+      {progress > 0 && progress <= 1 && <p>{(progress * 100).toFixed(0)} %</p>}
       {error && <p style={{ color: "red", fontSize: "1rem" }}>{error}</p>}
       <ButtonGroup>
         <Button onClick={handleStop}>Close</Button>

packages/sdk/src/hooks/useController.tsx

@@ -16,7 +16,8 @@ const customStyles = {
     right: "auto",
     bottom: "auto",
     borderRadius: "10px",
-    width: "37rem",
+    maxWidth: "37rem",
+    width: "85%",
     marginRight: "-50%",
     transform: "translate(-50%, -50%)",
     postion: "relative",
@@ -85,7 +86,7 @@ export const useController = (): [
       </div>
       <div
         style={{
-          width: "35rem",
+          maxWidth: "35rem",
           padding: 18,
           flex: 1,
           flexDirection: "column",

packages/sdk/src/index.ts

@@ -1,3 +1,3 @@
 import sdk from "./service";
-export { SupportedResult, PlayStatus, ReadStatus } from "./types";
+export { SupportedResult, PlayStatus, ReadStatus, SDK } from "./types";
 export default sdk;

packages/sdk/src/service.ts

@@ -1,14 +1,27 @@
-import ReactDOM from "react-dom";
-import Root from "./Root";
 import React from "react";
-import { Play, Read } from "./types";
+import * as ReactDOM from "react-dom";
+import { EventEmitter } from "events";
 import Modal from "react-modal";
+import { createRoot } from "react-dom/client";
+import { Play, Read, SDK } from "./types";
+import { useEffect } from 'react';
+import { useController } from "./hooks/useController";
 
-let initialized = false;
+
+const ee = new EventEmitter();
 let read: Read;
 let play: Play;
 let cameraReady: boolean;
 
+const Container = () => {
+  const [Controller, { read, play, cameraReady }] = useController();
+  useEffect(() => {
+    setupSdk(read, play, cameraReady);
+    ee.emit('RenderDone');
+  }, []);
+  return Controller;
+};
+
 const bootstrap = (): void => {
   const htmlBody = document
     .getElementsByTagName("body")
@@ -17,29 +30,39 @@ const bootstrap = (): void => {
   sdkDiv.id = "kv_sdk_container";
   htmlBody.appendChild(sdkDiv);
   Modal.setAppElement("#kv_sdk_container");
-  ReactDOM.render(React.createElement(Root), sdkDiv);
+
+  const reactVersion = React.version;
+  const big = reactVersion.split('.')[0];
+
+  if (parseInt(big) < 18) {
+    ReactDOM.render(React.createElement(Container), sdkDiv);
+  } else {
+    const RootElement = React.createElement(Container);
+    createRoot(sdkDiv).render(RootElement);
+  }
 };
 
 export const setupSdk = (r: Read, p: Play, status: boolean) => {
-  initialized = true;
   read = r;
   play = p;
   cameraReady = status;
 };
 
+
+const sdkInstance: Promise<SDK> = new Promise((resolve) => {
+  ee.on('RenderDone', () => {
+    let sdkInstance: SDK = {
+      read,
+      play,
+      cameraReady,
+    };
+    resolve(sdkInstance);
+  });
+});
+
 const sdk = {
   bootstrap,
-  getSdk: () => {
-    if (initialized) {
-      return {
-        read,
-        play,
-        cameraReady,
-      };
-    } else {
-      throw new Error("SDK is not initialized");
-    }
-  },
+  getSdk: (): Promise<SDK> => sdkInstance,
 };
 
 export default sdk;

packages/sdk/src/types.ts

@@ -46,6 +46,12 @@ export type Read = (
   }
 ) => Promise<DecodedResult>;
 
+export type SDK = {
+  read: Read,
+  play: Play,
+  cameraReady: boolean
+}
+
 export enum SupportedResult {
   UR_BYTES = "bytes",
   UR_CRYPTO_HDKEY = "crypto-hdkey",

packages/ur-registry-eth/package.json

@@ -42,5 +42,8 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   },
+  "jest": {
+    "testEnvironment": "node"
+  },
   "gitHead": "83d8e223d29e5cc71dccc963388d65a87c894636"
 }