@arcxmoney/passport-js - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

build/src/interfaces.d.ts

@@ -20,2 +20,3 @@ export interface IPosition {
     closable?: boolean;
+    showSpinner?: boolean;
 }

build/src/Passport.js

@@ -59,2 +59,4 @@ "use strict";
   right: 18px;
+  display: flex;
+  justify-content: center;
   &:hover ${StyledX} {
@@ -66,4 +68,6 @@ display: block;
   position: relative;
+  width: 100%;
+  height: 100%;
 `;
-const Passport = ({ account, analytics = true, closable = true, position = 'fixed', width = 256, height = 256, chainId = '1', arcxUrl = 'https://api.arcx.money', }) => {
+const Passport = ({ account, analytics = true, closable = true, position = 'fixed', width = 256, height = 256, chainId = '1', showSpinner = false, arcxUrl = 'https://api.arcx.money', }) => {
     const { width: windowWidth } = (0, useWindowDimensions_1.useWindowDimensions)();
@@ -94,16 +98,24 @@ const canvasRef = (0, react_1.useRef)(null);
             onReady: () => setIsReady(true),
+            width,
+            height,
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [passportMetadata, isLoaded]);
+    const isLoading = !isReady || !passportMetadata;
+    const notVisiblePassport = isLoading ||
+        passportMetadata.status !== 'active' || (windowWidth < 640 && position === 'fixed');
+    /* || !creditScore */
+    const hideComponent = (windowWidth < 640 && position === 'fixed') || showSpinner
+        ? passportMetadata && passportMetadata.status !== 'active'
+        : notVisiblePassport;
     if (closed)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [!isReady && position === 'fixed' && (0, jsx_runtime_1.jsx)(CanvasWrapper, Object.assign({ position: position, width: width, height: height, zIndex: 1001 }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { width: width, height: height }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(CanvasWrapper, Object.assign({ position: position, width: width, height: height, style: {
-                    display: (passportMetadata === null || passportMetadata === void 0 ? void 0 : passportMetadata.status) !== 'active' || /* || !creditScore */
-                        (windowWidth < 640 && position === 'fixed')
-                        ? 'none'
-                        : 'block',
-                } }, { children: (0, jsx_runtime_1.jsxs)(RelativeWrapper, { children: [(0, jsx_runtime_1.jsx)("canvas", { id: "arcx-passport-js", ref: canvasRef, width: `${width}px`, height: `${height}px`, style: {
-                                width: `${width}px`,
-                                height: `${height}px`,
-                            } }, void 0), closable && (0, jsx_runtime_1.jsx)(StyledX, Object.assign({ parentHeight: height, onClickCapture: () => setClosed(true) }, { children: "X" }), void 0)] }, void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsx)(CanvasWrapper, Object.assign({ position: position, width: width, height: height, style: {
+            display: hideComponent ? 'none' : 'block',
+        } }, { children: (0, jsx_runtime_1.jsxs)(RelativeWrapper, { children: [(0, jsx_runtime_1.jsx)("canvas", { id: "arcx-passport-js", ref: canvasRef, style: {
+                        width: `${width}px`,
+                        height: `${height}px`,
+                        display: notVisiblePassport ? 'none' : 'block',
+                        // visibility: notVisiblePassport ? 'hidden' : undefined,
+                    } }, void 0), closable && (0, jsx_runtime_1.jsx)(StyledX, Object.assign({ parentHeight: height, onClickCapture: () => setClosed(true) }, { children: "X" }), void 0), showSpinner && isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}, void 0)] }, void 0) }), void 0));
 };
@@ -110,0 +122,0 @@ exports.Passport = Passport;

build/src/Spinner.d.ts

@@ -1,2 +0,1 @@
-import { ISize } from './interfaces';
-export declare const Spinner: import("styled-components").StyledComponent<"div", any, ISize, never>;
+export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;

build/src/Spinner.js

@@ -36,5 +36,6 @@ "use strict";
 
+  z-index: 1001;
   position: absolute;
-  bottom: ${p => (0, styled_components_1.css) `${p.height / 2}`}px;
-  right: ${p => (0, styled_components_1.css) `${p.width / 2}`}px;
+  bottom: 50%;
+  right: 50%;
 
@@ -41,0 +42,0 @@ border-top: 2px solid #C4C4C4;

package.json

 {
   "name": "@arcxmoney/passport-js",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./build/src/index.js",
@@ -5,0 +5,0 @@ "types": "./build/src/index.d.ts",

src/interfaces.ts

@@ -26,2 +26,3 @@
   closable?: boolean;
+  showSpinner?: boolean;
 }

No alert changes

Improved metrics

Total package byte prevSize

4425341

Lines of code

1004

increased by1.62%

No dependency changes