@arcxmoney/passport-js - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

build/src/Passport.d.ts

 import { FC } from 'react';
-interface IPosition {
-    position: 'fixed' | 'flex';
-}
-interface ISize {
-    width: number;
-    height: number;
-}
-interface IArcxApi {
-    arcxUrl?: string;
-}
-export interface IPassport extends Partial<ISize>, Partial<IPosition>, IArcxApi {
-    account: string;
-    analytics?: boolean;
-    arcxUrl?: string;
-    chainId?: string | number;
-    closable?: boolean;
-}
+import { IArcxApi, IPassport, ISize } from './interfaces';
 export declare const Passport: FC<IPassport>;
 export declare const DefaultPassport: FC<Partial<ISize> & IArcxApi>;
-export {};

build/src/Passport.js

@@ -32,2 +32,3 @@ "use strict";
 const purple_front_png_1 = __importDefault(require("./assets/purple_front.png"));
+const Spinner_1 = require("./Spinner");
 const useScript_1 = require("./useScript");
@@ -55,2 +56,3 @@ const useWindowDimensions_1 = require("./useWindowDimensions");
   position: ${p => (0, styled_components_1.css) `${p.position}`};
+  z-index: ${p => (0, styled_components_1.css) `${p.zIndex}`};
   cursor: grab;
@@ -68,3 +70,5 @@ bottom: 18px;
     const { width: windowWidth } = (0, useWindowDimensions_1.useWindowDimensions)();
+    const canvasRef = (0, react_1.useRef)(null);
     const isLoaded = (0, useScript_1.useScript)(`${arcxUrl}/public/ARCxCardDisplay.js`);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
     const arcxApi = (0, react_1.useRef)(new ArcxApi_1.ArcxApi(arcxUrl));
@@ -77,2 +81,3 @@ const passportMetadata = usePassport(arcxApi.current, account, analytics, chainId);
             return;
+        setIsReady(false);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -90,2 +95,3 @@ window.ARCxCardDisplay.start({
             supersample: true,
+            onReady: () => setIsReady(true),
         });
@@ -96,9 +102,11 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
         return null;
-    return ((0, jsx_runtime_1.jsx)(CanvasWrapper, Object.assign({ position: position, width: width, height: height }, { children: (0, jsx_runtime_1.jsxs)(RelativeWrapper, { children: [(0, jsx_runtime_1.jsx)("canvas", { id: "arcx-passport-js", style: {
-                        width: `${width}px`,
-                        height: `${height}px`,
-                        display: (passportMetadata === null || passportMetadata === void 0 ? void 0 : passportMetadata.status) !== 'active' /* || !creditScore */ || (windowWidth < 640 && position === 'fixed')
-                            ? 'none'
-                            : 'block',
-                    } }, void 0), closable && (0, jsx_runtime_1.jsx)(StyledX, Object.assign({ parentHeight: height, onClickCapture: () => setClosed(true) }, { children: "X" }), void 0)] }, void 0) }), void 0));
+    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));
 };
@@ -138,2 +146,3 @@ exports.Passport = Passport;
             return;
+        setPassportMetadata(prev => !prev ? prev : undefined);
         arcxApi.getPassportMetadata(account, chainId.toString()).then(result => setPassportMetadata(result));
@@ -140,0 +149,0 @@ }, [account, analytics, arcxApi, chainId]);

build/test/ArcxApi.test.js

@@ -15,9 +15,23 @@ "use strict";
 const TEST_WALLET = '0xC23d9bB10eedF9b7cdeAAdBd5Dc048e7454bD1a2';
+const TEST_NETWORK = '4';
+const PRODUCTION_URL = 'https://api.arcx.money';
+const STAGING_URL = 'https://staging.api.arcx.money';
 describe('ArcxApi (int)', () => {
-    let api;
+    let apiProd;
+    let apiStaging;
     before(() => __awaiter(void 0, void 0, void 0, function* () {
-        api = new ArcxApi_1.ArcxApi('https://staging.api.arcx.money');
+        apiProd = new ArcxApi_1.ArcxApi(PRODUCTION_URL);
+        apiStaging = new ArcxApi_1.ArcxApi(STAGING_URL);
     }));
+    it('gets passport metadata on production', () => __awaiter(void 0, void 0, void 0, function* () {
+        const metadata = yield apiProd.getPassportMetadata(TEST_WALLET, '1');
+        (0, chai_1.expect)(metadata.status).to.equal('active');
+        (0, chai_1.expect)(metadata.address).to.equal(TEST_WALLET);
+        (0, chai_1.expect)(metadata.imageUrlFront).to.not.be.empty;
+        (0, chai_1.expect)(metadata.imageUrlBack).to.not.be.empty;
+    })).timeout(10000);
     it('gets passport metadata on staging', () => __awaiter(void 0, void 0, void 0, function* () {
-        const metadata = yield api.getPassportMetadata(TEST_WALLET, '4');
+        const metadata = yield apiStaging.getPassportMetadata(TEST_WALLET, TEST_NETWORK);
+        (0, chai_1.expect)(metadata.status).to.equal('active');
+        (0, chai_1.expect)(metadata.address).to.equal(TEST_WALLET);
         (0, chai_1.expect)(metadata.imageUrlFront).to.not.be.empty;
@@ -24,0 +38,0 @@ (0, chai_1.expect)(metadata.imageUrlBack).to.not.be.empty;

package.json

 {
   "name": "@arcxmoney/passport-js",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "./build/src/index.js",
@@ -59,3 +59,3 @@ "types": "./build/src/index.d.ts",
   },
-  "description": "Component to show Defi Passport",
+  "description": "Component to show Passport",
   "repository": "[e-mail]:arcxmoney/passport-js.git",
@@ -62,0 +62,0 @@ "config": {

README.md

 [![CircleCI](https://circleci.com/gh/arcxmoney/passport-js/tree/main.svg?style=svg&circle-token=9e39349559e0569af511e66721b3264b4b3c51d5)](https://circleci.com/gh/arcxmoney/passport-js/tree/main)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-## Introduction
+## Documentation
 
-Passport.js ノ is a small React library that offers interactive components to display an individual's DeFi passport in your application. 
-
-[Check out the demo here](https://passport-js-example.netlify.app/)
-
-## How it works
-
-The `Passport` component fetches an address' information from our backend servers and upon success returns the user's passport video.
-
-If the user has no DeFi passport, no widget will be shown.
-
-![Passport component](https://gblobscdn.gitbook.com/assets/-MFZ4FRmb-RPWqf9Dfco/-Miu23Cv3dq1x2xOfHo6/-MiuFqva0-hd5zaEL_5s/defi-passport.gif?alt=media&token=86b346e7-6eb4-45d2-8be2-78d1e4085783)
-
-## Installation
-
-Install our package either through `yarn add @arcxmoney/passport-js` or `npm install @arcxmoney/passport-js --save`.
-
-## Implementation
-
-The `Passport` component is an absolute positioned component written to load on top of your application. 
-We recommend placing it higher up your component tree for readability, but also inside your Web3 provider.
-
-Below is an example of how to combine the useWeb3React hook with the Passport component
-
-```react
-import { Passport } from '@arcxmoney/passport-js';
-import { useWeb3React } from '@web3-react/core'
-
-const Page = () => {
-    const { account } = useWeb3React();
-    return (
-        <Layout>
-            <Passport account={account} />
-        </Layout>
-    );
-}
-```
-
-## Styling
-
-The underlying `<video />` component is fully customizable through the `videoStyles` prop.
-
-```react
-<Passport
-    videoStyles={{ border: '3px solid red' }}
-    account={USER_ADDRESS} 
-/>
-```
-
-### Props
-
-|Name | Description | Required | Default value |
-|--|--|--|--|
-| **account** | The user's address. | Yes | 
-| **analytics** | Voluntary prop to activate if you wish to help us out by sharing metrics. 🙂 | No | true |
-| **videoStyles** | Customize styles for the underlying video component. | No | Default Styles | 
-
-
-## Roadmap
-
-We will be actively working on this library to help other protocols and builders integrate DeFi Passports and reputation.
-
-**Here's a small list of things currently being worked on:**
-
- - [X]  Interactive video component
- - [ ] Utility functions for retrieving an account's passport information
- - [x] Fully interactive WebGL Passport component
-
-If you have any questions or suggestions, feel free to raise an issue in our repository.
-
-Happy building! ノ
-
+See supported documentation in [ARCx Wiki Page](https://wiki.arcx.money/developer-docs/passportjs)

test/ArcxApi.test.ts

@@ -5,13 +5,27 @@ import { expect } from 'chai'
 const TEST_WALLET = '0xC23d9bB10eedF9b7cdeAAdBd5Dc048e7454bD1a2'
+const TEST_NETWORK = '4'
+const PRODUCTION_URL = 'https://api.arcx.money'
+const STAGING_URL = 'https://staging.api.arcx.money'
 
 describe('ArcxApi (int)', () => {
-  let api: ArcxApi
+  let apiProd: ArcxApi
+  let apiStaging: ArcxApi
 
   before(async () => {
-    api = new ArcxApi('https://staging.api.arcx.money')
+    apiProd = new ArcxApi(PRODUCTION_URL)
+    apiStaging = new ArcxApi(STAGING_URL)
   })
 
+  it('gets passport metadata on production', async () => {
+    const metadata = await apiProd.getPassportMetadata(TEST_WALLET, '1')
+    expect(metadata.status).to.equal('active')
+    expect(metadata.address).to.equal(TEST_WALLET)
+    expect(metadata.imageUrlFront).to.not.be.empty
+    expect(metadata.imageUrlBack).to.not.be.empty
+  }).timeout(10000)
+
   it('gets passport metadata on staging', async () => {
-    const metadata = await api.getPassportMetadata(TEST_WALLET, '4')
-
+    const metadata = await apiStaging.getPassportMetadata(TEST_WALLET, TEST_NETWORK)
+    expect(metadata.status).to.equal('active')
+    expect(metadata.address).to.equal(TEST_WALLET)
     expect(metadata.imageUrlFront).to.not.be.empty
@@ -18,0 +32,0 @@ expect(metadata.imageUrlBack).to.not.be.empty

No alert changes

Improved metrics

Total package byte prevSize

4425179

0.09%

Number of package files

43

16.22%

Lines of code

988

18.61%

Worsened metrics

Number of lines in readme file

6

-92.21%

No dependency changes