CU-86a12v2r4 - Fix vanilla example, it doesn't update itself automati…

…cally (needs subscriptions from wc events, we might need this exposed on the core-sdk)

examples/wc-dapp-vite-vanilla/main.js

@@ -3,30 +3,33 @@ import WcSdk, { Version } from '@cityofzion/wallet-connect-sdk-core'
 import SignClient from '@walletconnect/sign-client'
 
 let wcSdk
+let signClient
 
 const init = async () => {
   registerInteraction()
 
   // start the sdk
-  wcSdk = new WcSdk(
-    await SignClient.init({
-      projectId: 'a9ff54e3d56a52230ed8767db4d4a810', // the ID of your project on Wallet Connect website
-      relayUrl: 'wss://relay.walletconnect.com', // we are using walletconnect's official relay server
-      metadata: {
-        name: 'MyApplicationName', // your application name to be displayed on the wallet
-        description: 'My Application description', // description to be shown on the wallet
-        url: 'https://myapplicationdescription.app/', // url to be linked on the wallet
-        icons: ['https://myapplicationdescription.app/myappicon.png'], // icon to be shown on the wallet
-      },
-    }),
-  )
+  signClient = await SignClient.init({
+    projectId: 'a9ff54e3d56a52230ed8767db4d4a810', // the ID of your project on Wallet Connect website
+    relayUrl: 'wss://relay.walletconnect.com', // we are using walletconnect's official relay server
+    metadata: {
+      name: 'MyApplicationName', // your application name to be displayed on the wallet
+      description: 'My Application description', // description to be shown on the wallet
+      url: 'https://myapplicationdescription.app/', // url to be linked on the wallet
+      icons: ['https://myapplicationdescription.app/myappicon.png'], // icon to be shown on the wallet
+    },
+  })
 
-  // reload the session if there is one and automatically disconnect upon wallet request
-  await wcSdk.manageSession()
+  wcSdk = new WcSdk(signClient)
+  wcSdk.emitter.on('session', (session) => {
+    if (session) {
+      renderAfterConnect()
+    } else {
+      renderAfterDisconnect()
+    }
+  })
 
-  if (wcSdk.isConnected()) {
-    renderAfterConnect()
-  }
+  await wcSdk.manageSession()
 }
 
 const connect = async () => {

packages/wallet-connect-sdk-core/package.json

@@ -41,13 +41,15 @@
     "@cityofzion/neon-core": "5.5.1",
     "@walletconnect/sign-client": "2.7.3",
     "@walletconnect/types": "2.7.3",
-    "@cityofzion/neon-dappkit-types": "0.3.0"
+    "@cityofzion/neon-dappkit-types": "0.3.0",
+    "typed-emitter": "^2.1.0"
   },
   "devDependencies": {
     "typedoc": "^0.22.10",
     "typescript": "^4.3.2",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "eslint": "^8.51.0"
+    "eslint": "^8.51.0",
+    "typed-emitter": "^2.1.0"
   }
 }

packages/wallet-connect-sdk-core/src/index.ts

@@ -17,13 +17,19 @@ import {
   BuiltTransaction,
   CalculateFee,
 } from '@cityofzion/neon-dappkit-types'
+import EventEmitter from 'events'
+import TypedEventEmitter from 'typed-emitter'
 /**
  * If JavaScript users try to use the connect methods without the methods, they will receive a warning.
  * This constant should be removed on later versions.
  */
 const defaultMethodRemovedWarning =
   'The default value of methods has been deprecated, in future versions you will need to pass a list of method names'
 
+export type CoreEvents = {
+  session(sessions: SessionTypes.Struct | null): void | Promise<void>
+}
+
 export type Blockchain = 'neo3'
 
 export type Chain = 'private' | 'testnet' | 'mainnet'
@@ -101,7 +107,12 @@ export default class WcSdk implements Neo3Invoker, Neo3Signer {
   /**
    * The current WalletConnect connected session
    */
-  session: SessionTypes.Struct | null = null
+  private _session: SessionTypes.Struct | null = null
+
+  /**
+   * The EventEmitter to listen for some property changes
+   */
+  public readonly emitter = new EventEmitter() as TypedEventEmitter<CoreEvents>
 
   /**
    * To initialize the adapter you need to provide the SignClient
@@ -110,36 +121,18 @@ export default class WcSdk implements Neo3Invoker, Neo3Signer {
    */
   constructor(client: SignClient, initSession?: SessionTypes.Struct) {
     this.signClient = client
+
     if (initSession) {
       this.session = initSession
     }
   }
 
-  /**
-   * This method is used to sign a transaction.
-   * @param params the contract invocation options
-   * @return the call result promise
-   */
-  async signTransaction(params: ContractInvocationMulti | BuiltTransaction): Promise<BuiltTransaction> {
-    this.validateContractInvocationMulti(params)
-    const request = {
-      id: 1,
-      jsonrpc: '2.0',
-      method: 'signTransaction',
-      params,
-    }
-
-    const resp = await this.signClient.request({
-      topic: this.session?.topic ?? '',
-      chainId: this.getChainId() ?? '',
-      request,
-    })
-
-    if (!resp) {
-      throw new WcSdkError(resp)
-    }
-
-    return resp as BuiltTransaction
+  get session() {
+    return this._session
+  }
+  set session(session: SessionTypes.Struct | null) {
+    this._session = session
+    this.emitter.emit('session', session)
   }
 
   /**
@@ -178,6 +171,7 @@ export default class WcSdk implements Neo3Invoker, Neo3Signer {
    * subscribe to disconnect events and finishes the session
    */
   manageDisconnect(): void {
+    this.signClient.events.removeAllListeners('session_delete')
     this.signClient.on('session_delete', async () => {
       this.session = null
     })
@@ -279,6 +273,33 @@ export default class WcSdk implements Neo3Invoker, Neo3Signer {
     this.session = null
   }
 
+  /**
+   * This method is used to sign a transaction.
+   * @param params the contract invocation options
+   * @return the call result promise
+   */
+  async signTransaction(params: ContractInvocationMulti | BuiltTransaction): Promise<BuiltTransaction> {
+    this.validateContractInvocationMulti(params)
+    const request = {
+      id: 1,
+      jsonrpc: '2.0',
+      method: 'signTransaction',
+      params,
+    }
+
+    const resp = await this.signClient.request({
+      topic: this.session?.topic ?? '',
+      chainId: this.getChainId() ?? '',
+      request,
+    })
+
+    if (!resp) {
+      throw new WcSdkError(resp)
+    }
+
+    return resp as BuiltTransaction
+  }
+
   /**
    * Sends an 'invokeFunction' request to the Wallet and it will communicate with the blockchain. It will consume gas and persist data to the blockchain.
    *