@wishknish/knishio-client-js 0.4.44 → 0.4.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishknish/knishio-client-js",
-  "version": "0.4.44",
+  "version": "0.4.45",
   "productName": "Knish.IO Javascript SDK Client",
   "description": "JavaScript implementation of the Knish.IO SDK to consume Knish.IO GraphQL APIs.",
   "license": "GPL-3.0-or-later",
@@ -29,7 +29,6 @@
   "main": "dist/client.umd.js",
   "module": "dist/client.esm.js",
   "commonjs": "dist/client.cjs.js",
-  "unpkg": "dist/client.min.js",
   "keywords": [
     "wishknish",
     "knishio",
@@ -39,21 +38,21 @@
     "graphql"
   ],
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@stablelib/base64": "^1.0.0",
-    "@stablelib/utf8": "^1.0.0",
-    "base-x": "^3.0.8",
-    "big-integer": "^1.6.48",
+    "@apollo/client": "^3.5.10",
+    "@stablelib/base64": "^1.0.1",
+    "@stablelib/utf8": "^1.0.1",
+    "base-x": "^4.0.0",
+    "big-integer": "^1.6.51",
     "buffer": "^6.0.3",
     "core-js": "3.21.1",
     "get-random-values": "^1.2.2",
-    "graphql": "^15.5.0",
+    "graphql": "^16.3.0",
     "isomorphic-fetch": "^3.0.0",
     "js-sha3": "^0.8.0",
-    "laravel-echo": "^1.10.0",
-    "socket.io-client": "^2.4.0",
+    "pusher-js": "^7.0.6",
     "tweetnacl": "^1.0.3",
-    "tweetnacl-sealedbox-js": "^1.2.0"
+    "tweetnacl-sealedbox-js": "^1.2.0",
+    "uri-js": "^4.4.1"
   },
   "files": [
     "/src"
@@ -89,21 +88,21 @@
     "@babel/preset-env": "^7.12.13",
     "@babel/runtime": "^7.12.13",
     "@rollup/plugin-babel": "^5.2.3",
-    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-inject": "^4.0.4",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.23.0",
-    "eslint-plugin-vue": "^7.8.0",
+    "babel-loader": "^8.2.4",
+    "eslint": "^8.12.0",
+    "eslint-plugin-vue": "^8.6.0",
     "nodemon": "^2.0.15",
     "rollup": "^2.70.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "uglify-js": "^3.15.3",
-    "webpack": "^5.21.1",
-    "webpack-cli": "^4.5.0",
-    "webpack-merge": "^5.7.3"
+    "webpack": "^5.71.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-merge": "^5.8.0"
   },
   "browserslist": [
     "> 1%",
@@ -111,8 +110,7 @@
     "not ie <= 8"
   ],
   "scripts": {
-    "build": "yarn build:browser && yarn build:es && yarn build:umd && yarn build:cjs",
-    "build:browser": "rollup --config build/rollup.config.browser.js",
+    "build": "yarn build:es && yarn build:umd && yarn build:cjs",
     "build:es": "rollup --config build/rollup.config.es.js",
     "build:umd": "rollup --config build/rollup.config.umd.js",
     "build:cjs": "rollup --config build/rollup.config.cjs.js",

package/src/KnishIOClient.js

@@ -590,15 +590,15 @@ export default class KnishIOClient {
   /**
    * @param {string|null} bundle
    * @param {function} closure
-   * @return {string}
+   * @return {Promise<string>}
    */
-  subscribeCreateMolecule ( {
+  async subscribeCreateMolecule ( {
     bundle,
     closure
   } ) {
     const subscribe = this.createSubscribe( CreateMoleculeSubscribe );
 
-    return subscribe.execute( {
+    return await subscribe.execute( {
       variables: {
         bundle: bundle || this.getBundle()
       },

package/src/Molecule.js

@@ -174,7 +174,7 @@ export default class Molecule {
   tokenUnitMetas ( wallet, meta = [] ) {
 
     // Add token units meta key
-    if ( wallet.hasTokenUnits() ) {
+    if ( wallet.tokenUnits.length ) {
       meta[ 'tokenUnits' ] = wallet.tokenUnitsJson();
     }
 

package/src/{libraries/ApolloLink/EchoLink.js → TokenUnit.js}

@@ -1,3 +1,4 @@
+
 /*
                                (
                               (/(
@@ -45,90 +46,82 @@ Please visit https://github.com/WishKnish/KnishIO-Client-JS for information.
 
 License: https://github.com/WishKnish/KnishIO-Client-JS/blob/master/LICENSE
 */
-import {
-  ApolloLink
-} from '@apollo/client/core';
-import Echo from 'laravel-echo';
-import createRequestHandler from './handler';
-import io from 'socket.io-client';
 
 /**
- *
+ * AuthToken class
  */
-class EchoLink extends ApolloLink {
+export default class TokenUnit {
+
   /**
-   * @param {string} socketUri
+   *
+   * @param data
+   * @returns {*}
    */
-  constructor ( { socketUri } ) {
-    super();
-
-    console.log( 'EchoLink::constructor()...' );
-
-    this.echo = null;
-    this.socketUri = null;
-    this.auth = '';
-
-    this.setEcho( socketUri );
+  static createFromGraphQL( data ) {
+    let metas = data[ 'metas' ] || {};
+    if ( metas.length ) {
+      metas = JSON.parse( metas );
+      if ( !metas.length ) { // set an empty object instead of an array
+        metas = {};
+      }
+    }
+    return new TokenUnit(
+      data[ 'id' ],
+      data[ 'name' ],
+      metas
+    );
   }
 
   /**
    *
-   * @return {string}
+   * @param data
+   * @returns {TokenUnit}
    */
-  getAuthToken () {
-    return this.auth;
+  static createFromDB( data ) {
+    return new TokenUnit(
+      data[ 0 ],
+      data[ 1 ],
+      data.length > 2 ? data[ 2 ] : {}
+    );
   }
 
   /**
-   * @param {string} auth
+   *
+   * @param id
+   * @param name
+   * @param metas
    */
-  setAuthToken ( auth ) {
-    this.auth = auth;
+  constructor( id, name, metas ) {
+    this.id = id;
+    this.name = name;
+    this.metas = metas;
   }
 
   /**
-   * @return {string|null}
+   *
+   * @returns {*|null}
    */
-  getSocketUri () {
-    return this.socketUri;
+  getFragmentZone() {
+    return this.metas[ 'fragmentZone' ] || null;
   }
 
   /**
-   * @param {string} socketUri
+   * @return array
    */
-  setEcho ( socketUri ) {
-
-    console.log( `Connecting to socket endpoint ${ socketUri }...` );
-
-    this.socketUri = socketUri;
-    this.echo = new Echo( {
-      broadcaster: 'socket.io',
-      client: io,
-      authEndpoint: 'graphql/subscriptions/auth',
-      host: this.getSocketUri(),
-      transports: [ 'websocket' ],
-      auth: {
-        headers: {
-          'X-Auth-Token': this.getAuthToken(),
-          Accept: 'application/json'
-        }
-      }
-    } );
+  toData() {
+    return [ this.id, this.name, this.metas, ];
   }
 
   /**
    *
-   * @param {Operation} operation
-   * @param {NextLink} forward
-   * @return {*}
+   * @returns {{metas: string, name: *, id: *}}
    */
-  request ( operation, forward ) {
-
-    this.echo.options.auth.headers[ 'X-Auth-Token' ] = this.getAuthToken();
-
-    return createRequestHandler( this.echo )( operation, forward );
+  toGraphQLResponse() {
+    return {
+      id: this.id,
+      name: this.name,
+      metas: JSON.stringify( this.metas )
+    };
   }
 
 }
-
-export default EchoLink;

package/src/Wallet.js

@@ -62,6 +62,7 @@ import {
   hashShare
 } from './libraries/crypto';
 import BaseX from './libraries/BaseX';
+import TokenUnit from './TokenUnit';
 
 /**
  * Wallet class represents the set of public and private
@@ -164,32 +165,20 @@ export default class Wallet {
   static getTokenUnits ( unitsData ) {
     let result = [];
     unitsData.forEach( unitData => {
-      result.push( {
-        id: unitData.shift(),
-        name: unitData.shift(),
-        metas: unitData
-      } );
+      result.push( TokenUnit.createFromDB( unitData ) );
     } );
     return result;
   }
 
-  /**
-   * Has token units?
-   * @return {boolean}
-   */
-  hasTokenUnits () {
-    return !!this.tokenUnits && this.tokenUnits.length > 0;
-  }
-
   /**
    * @return string|null
    */
   tokenUnitsJson () {
 
-    if ( this.hasTokenUnits() ) {
+    if ( this.tokenUnits.length ) {
       const result = [];
       this.tokenUnits.forEach( tokenUnit => {
-        result.push( [ tokenUnit.id, tokenUnit.name ].concat( tokenUnit.metas ) );
+        result.push( tokenUnit.toData() );
       } );
       return JSON.stringify( result );
     }
@@ -206,7 +195,7 @@ export default class Wallet {
    * @param recipientWallet
    */
   splitUnits (
-    units,
+    units,  // Array: token unit IDs
     remainderWallet,
     recipientWallet = null
   ) {

package/src/httpClient/ApolloClient.js

@@ -83,14 +83,13 @@ export default class ApolloClient {
     } );
 
     if ( this.$__client ) {
-
-      this.unsubscribeAll();
-
       client.setAuthData( {
         token: this.$__client.getAuthToken(),
         pubkey: this.$__client.getPubKey(),
         wallet: this.$__client.getWallet()
       } );
+
+      this.socketDisconnect();
     }
 
     this.$__client = client;
@@ -114,8 +113,9 @@ export default class ApolloClient {
    * @param {string} operationName
    */
   unsubscribe ( operationName ) {
-    if ( this.$__subscribers[ operationName ] ) {
+    if ( this.$__subscribers.hasOwnProperty( operationName ) ) {
       this.$__subscribers[ operationName ].unsubscribe();
+      this.$__client.unsubscribeFromChannel( operationName );
       delete this.$__subscribers[ operationName ];
     }
   }
@@ -125,12 +125,15 @@ export default class ApolloClient {
    */
   unsubscribeAll () {
     for ( let subscribe in this.$__subscribers ) {
-      if ( this.$__subscribers.hasOwnProperty( subscribe ) ) {
-        this.unsubscribe( subscribe );
-      }
+      this.unsubscribe( subscribe );
     }
   }
 
+  socketDisconnect() {
+    this.$__client.socketDisconnect();
+    this.$__subscribers = {};
+  }
+
   /**
    * @param {Operation} request
    * @param {function} closure

package/src/libraries/ApolloLink/Client.js

@@ -55,7 +55,8 @@ import { InMemoryCache } from '@apollo/client/cache';
 import { onError } from '@apollo/client/link/error';
 
 import HttpLink from './HttpLink';
-import EchoLink from './EchoLink';
+import PusherLink from './PusherLink';
+import { parse } from 'uri-js';
 import AuthLink from './AuthLink';
 import { errorHandler } from './handler';
 import CipherLink from './CipherLink';
@@ -82,7 +83,7 @@ class Client extends ApolloClient {
     const auth = new AuthLink();
 
     let cipher = null;
-    let echo = null;
+    let socket = null;
 
     links.push( auth );
 
@@ -92,8 +93,12 @@ class Client extends ApolloClient {
     }
 
     if ( socketUri ) {
-      echo = new EchoLink( { socketUri: socketUri } );
-      links.push( echo );
+      const path = parse( serverUri );
+      socket = new PusherLink( {
+        socketUri: socketUri,
+        authEndpoint: `${ path.scheme }://${ path.host }/graphql/subscriptions/auth`
+      } );
+      links.push( socket );
     }
 
     links.push( concat( onError( errorHandler ), http ) );
@@ -125,7 +130,12 @@ class Client extends ApolloClient {
     this.__serverUri = serverUri;
     this.__socketUri = socketUri;
     this.__authLink = auth;
-    this.__echoLink = echo;
+    /**
+     *
+     * @type {PusherLink}
+     * @private
+     */
+    this.__socket = socket;
     this.__cipherLink = cipher;
 
     this.__pubkey = null;
@@ -169,8 +179,8 @@ class Client extends ApolloClient {
     this.__pubkey = pubkey;
     this.__authLink.setAuthToken( token );
 
-    if ( this.__echoLink ) {
-      this.__echoLink.setAuthToken( token );
+    if ( this.__socket ) {
+      this.__socket.setAuthToken( token );
     }
 
     if ( this.__cipherLink ) {
@@ -179,6 +189,22 @@ class Client extends ApolloClient {
     }
   }
 
+  socketDisconnect() {
+    if ( this.__socket ) {
+      this.__socket.disconnect();
+    }
+  }
+
+  /**
+   *
+   * @param {string} channel
+   */
+  unsubscribeFromChannel( channel ) {
+    if ( this.__socket ) {
+      this.__socket.unsubscribeFromChannel( channel );
+    }
+  }
+
   /**
    * @return {string}
    */

package/src/libraries/ApolloLink/PusherLink.js

@@ -0,0 +1,226 @@
+/*
+                               (
+                              (/(
+                              (//(
+                              (///(
+                             (/////(
+                             (//////(                          )
+                            (////////(                        (/)
+                            (////////(                       (///)
+                           (//////////(                      (////)
+                           (//////////(                     (//////)
+                          (////////////(                    (///////)
+                         (/////////////(                   (/////////)
+                        (//////////////(                  (///////////)
+                        (///////////////(                (/////////////)
+                       (////////////////(               (//////////////)
+                      (((((((((((((((((((              (((((((((((((((
+                     (((((((((((((((((((              ((((((((((((((
+                     (((((((((((((((((((            ((((((((((((((
+                    ((((((((((((((((((((           (((((((((((((
+                    ((((((((((((((((((((          ((((((((((((
+                    (((((((((((((((((((         ((((((((((((
+                    (((((((((((((((((((        ((((((((((
+                    ((((((((((((((((((/      (((((((((
+                    ((((((((((((((((((     ((((((((
+                    (((((((((((((((((    (((((((
+                   ((((((((((((((((((  (((((
+                   #################  ##
+                   ################  #
+                  ################# ##
+                 %################  ###
+                 ###############(   ####
+                ###############      ####
+               ###############       ######
+              %#############(        (#######
+             %#############           #########
+            ############(              ##########
+           ###########                  #############
+          #########                      ##############
+        %######
+
+        Powered by Knish.IO: Connecting a Decentralized World
+
+Please visit https://github.com/WishKnish/KnishIO-Client-JS for information.
+
+License: https://github.com/WishKnish/KnishIO-Client-JS/blob/master/LICENSE
+*/
+import { ApolloLink, Observable } from '@apollo/client/core';
+import Pusher from 'pusher-js';
+import { parse } from 'uri-js';
+import CodeException from '../../exception/CodeException';
+
+
+class PusherLink extends ApolloLink {
+
+    // constructor( options ) {
+    constructor( { socketUri, authEndpoint, appKey = 'app-key' } ) {
+        console.log( 'PusherLink::constructor()...' );
+        super();
+
+        this.socketUri = socketUri;
+        this.authEndpoint = authEndpoint;
+        this.appKey = appKey;
+
+        this.setAuthToken( '' );
+        this.setTransport( this.getSocketUri() );
+    }
+
+    /**
+     *
+     * @param {string} socketUri
+     */
+    setTransport ( socketUri ) {
+
+        console.log( `Connecting to socket endpoint ${ socketUri }...` );
+
+        const wsPath = parse( socketUri );
+
+        if ( ![ 'ws', 'wss' ].includes( wsPath.scheme ) ) {
+            throw new CodeException( 'Incorrect scheme for the socket' );
+        }
+
+        this.transport = new Pusher( this.appKey, {
+            auth: {
+                headers: {
+                    'X-Auth-Token': this.getAuthToken(),
+                    Accept: 'application/json'
+                }
+            },
+            wsHost: wsPath.host,
+            wsPort: wsPath.port,
+            forceTLS: wsPath.scheme === 'wss',
+            encrypted: true,
+            enabledTransports: [ wsPath.scheme ],
+            authEndpoint: this.authEndpoint
+        } );
+    }
+
+    disconnect() {
+        this.transport.disconnect();
+    }
+
+    /**
+     *
+     * @param {string} name
+     * @returns {Channel|null}
+     */
+    channel( name ) {
+        return this.transport.channel( name ) || null;
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    getAuthToken () {
+        return this.auth;
+    }
+
+    /**
+     * @param {string} auth
+     */
+    setAuthToken ( auth ) {
+        this.auth = auth;
+    }
+
+    /**
+     * @return {string|null}
+     */
+    getSocketUri () {
+        return this.socketUri;
+    }
+
+    request( operation, forward ) {
+        this.transport.config.auth.headers[ 'X-Auth-Token' ] = this.getAuthToken();
+
+        const subscribeObservable = new Observable( ( _observer ) => {
+            //
+        } );
+
+        // Capture the super method
+        const prevSubscribe = subscribeObservable.subscribe.bind( subscribeObservable );
+
+        // Override subscribe to return an `unsubscribe` object, see
+        // https://github.com/apollographql/subscriptions-transport-ws/blob/master/src/client.ts#L182-L212
+        subscribeObservable.subscribe = ( observerOrNext, onError, onComplete ) => {
+            prevSubscribe( observerOrNext, onError, onComplete );
+
+            const observer = getObserver( observerOrNext, onError, onComplete );
+
+            let subscriptionChannel;
+
+            forward( operation ).subscribe({
+                next: ( data ) => {
+                    // If the operation has the subscription channel, it's a subscription
+                    subscriptionChannel = data?.extensions?.lighthouse_subscriptions.channel ?? null;
+
+                    // No subscription found in the response, pipe data through
+                    if ( !subscriptionChannel ) {
+                        observer.next( data );
+                        observer.complete();
+
+                        return;
+                    }
+
+                    this.subscribeToChannel( subscriptionChannel, observer );
+                }
+            });
+
+            // Return an object that will unsubscribe_if the query was a subscription
+            return {
+                closed: false,
+                unsubscribe: () => {
+                    subscriptionChannel &&
+                    this.unsubscribeFromChannel( subscriptionChannel );
+                }
+            };
+        };
+
+        return subscribeObservable;
+    }
+
+    subscribeToChannel( subscriptionChannel, observer ) {
+        this.transport
+            .subscribe( subscriptionChannel )
+            .bind('lighthouse-subscription', ( payload ) => {
+                if ( !payload.more ) {
+                    this.unsubscribeFromChannel( subscriptionChannel );
+
+                    observer.complete();
+                }
+
+                const result = payload.result;
+
+                if (result) {
+                    observer.next( result );
+                }
+            });
+    }
+
+    unsubscribeFromChannel( subscriptionChannel ) {
+        this.transport.unsubscribe( subscriptionChannel );
+    }
+}
+
+// Turn `subscribe` arguments into an observer-like thing, see getObserver
+// https://github.com/apollographql/subscriptions-transport-ws/blob/master/src/client.ts#L329-L343
+function getObserver( observerOrNext, onError, onComplete ) {
+    if ( typeof observerOrNext === 'function' ) {
+        // Duck-type an observer
+        return {
+            next: ( v ) => observerOrNext( v ),
+            error: ( e ) => onError && onError( e ),
+            complete: () => onComplete && onComplete()
+        };
+    } else {
+        // Make an object that calls to the given object, with safety checks
+        return {
+            next: ( v ) => observerOrNext.next && observerOrNext.next( v ),
+            error: ( e ) => observerOrNext.error && observerOrNext.error( e ),
+            complete: () => observerOrNext.complete && observerOrNext.complete()
+        };
+    }
+}
+
+export default PusherLink;

package/src/response/ResponseWalletList.js

@@ -48,6 +48,7 @@ License: https://github.com/WishKnish/KnishIO-Client-JS/blob/master/LICENSE
 import Response from './Response';
 import Query from '../query/Query';
 import Wallet from '../Wallet';
+import TokenUnit from '../TokenUnit';
 
 /**
  * Response for Wallet List query
@@ -110,7 +111,11 @@ export default class ResponseWalletList extends Response {
       wallet.tokenFungibility = data.token.fungibility;
     }
 
-    wallet.tokenUnits = data.tokenUnits;
+    if ( data.tokenUnits.length ) {
+      for ( let tokenUnitData of data.tokenUnits ) {
+        wallet.tokenUnits.push( TokenUnit.createFromGraphQL( tokenUnitData ) );
+      }
+    }
     wallet.molecules = data.molecules;
     wallet.balance = Number( data.amount );
     wallet.pubkey = data.pubkey;