Merge pull request #999 from aeternity/release/7.3.1

Release 7.3.1

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [7.3.1](https://github.com/aeternity/aepp-sdk-js/compare/7.2.1...7.3.1) (2020-05-25)
+
+### Improvements
+
+* **AEX_2:** Handle network switch and update state on both sides. Adjust networkId check for signing request. Add node switcher for example apps ([#996](https://github.com/aeternity/aepp-sdk-js/pull/996))
+
+
+
 # [7.3.0](https://github.com/aeternity/aepp-sdk-js/compare/7.2.1...7.3.0) (2020-05-20)
 
 

es/utils/aepp-wallet-communication/connection/browser-runtime.js

@@ -105,6 +105,7 @@ function isConnected () {
 
 export const BrowserRuntimeConnection = stampit({
   init ({ connectionInfo = {}, port, debug = false }) {
+    if (!getBrowserAPI().runtime) throw new Error('Runtime is not accessible in your environment')
     this.debug = debug
     this.connectionInfo = connectionInfo
     this.port = port || getBrowserAPI().runtime.connect(...[connectionInfo.id || undefined])

es/utils/aepp-wallet-communication/helpers.js

@@ -7,8 +7,10 @@ import { isMemoryAccount } from '../../account/selector'
 const isWeb = () => location && location.protocol && location.protocol.startsWith('http')
 
 export const getBrowserAPI = (force = false) => {
-  if (chrome === Object(chrome) && chrome.runtime) return chrome
-  if (browser === Object(browser) && browser.runtime) return browser
+  // Chrome, Opera support
+  if (chrome === Object(chrome)) return chrome
+  // Firefox support
+  if (browser === Object(browser)) return browser
   if (!force) throw new Error('Browser is not detected')
   return {}
 }

es/utils/aepp-wallet-communication/rpc/aepp-rpc.js

@@ -187,7 +187,7 @@ export const AeppRpc = Ae.compose({
       if (!this.rpcClient || !this.rpcClient.isConnected()) throw new Error('You are not connected to Wallet')
       if (!this.rpcClient.currentAccount) throw new Error('You do not subscribed for account.')
       if (opt.onAccount && !this.rpcClient.hasAccessToAccount(opt.onAccount)) throw new Error(`You are not have access to account ${opt.onAccount}`)
-      return this.rpcClient.request(METHODS.aepp.sign, { ...opt, tx, returnSigned: true })
+      return this.rpcClient.request(METHODS.aepp.sign, { ...opt, tx, returnSigned: true, networkId: this.getNetworkId() })
     },
     /**
      * Overwriting of `signMessage` AE method
@@ -240,7 +240,7 @@ export const AeppRpc = Ae.compose({
         const signed = await this.signTransaction(tx, { onAccount: opt.onAccount })
         return this.sendTransaction(signed, opt)
       }
-      return this.rpcClient.request(METHODS.aepp.sign, { onAccount: opt.onAccount, tx, returnSigned: false })
+      return this.rpcClient.request(METHODS.aepp.sign, { onAccount: opt.onAccount, tx, returnSigned: false, networkId: this.getNetworkId() })
     }
   }
 })

es/utils/aepp-wallet-communication/rpc/wallet-rpc.js

@@ -33,7 +33,6 @@ const REQUESTS = {
   async [METHODS.aepp.connect] (callInstance, instance, client, { name, networkId, version, icons }) {
     // Check if protocol and network is compatible with wallet
     if (version !== VERSION) return { error: ERRORS.unsupportedProtocol() }
-    // if (networkId !== instance.getNetworkId()) return { error: ERRORS.unsupportedNetwork() }
 
     // Store new AEPP and wait for connection approve
     rpcClients.updateClientInfo(client.id, {
@@ -97,14 +96,16 @@ const REQUESTS = {
       (error) => ({ error: ERRORS.rejectedByUser(error) })
     )
   },
-  async [METHODS.aepp.sign] (callInstance, instance, client, { tx, onAccount, returnSigned = false }) {
+  async [METHODS.aepp.sign] (callInstance, instance, client, { tx, onAccount, networkId, returnSigned = false }) {
     const address = onAccount || client.currentAccount
+    // Update client with new networkId
+    networkId && rpcClients.updateClientInfo(client.id, { networkId })
     // Authorization check
     if (!client.isConnected()) return { error: ERRORS.notAuthorize() }
     // Account permission check
     if (!client.hasAccessToAccount(address)) return { error: ERRORS.permissionDeny({ account: address }) }
     // NetworkId check
-    if (client.info.networkId !== instance.getNetworkId()) return { error: ERRORS.unsupportedNetwork() }
+    if (!networkId || networkId !== instance.getNetworkId()) return { error: ERRORS.unsupportedNetwork() }
 
     return callInstance(
       'onSign',

examples/browser/vuejs/connect-two-ae/aepp/package.json

@@ -13,7 +13,7 @@
   "author": "Enrico Icardi <[email protected]>",
   "license": "ISC",
   "dependencies": {
-    "@aeternity/aepp-sdk": "7.2.1",
+    "@aeternity/aepp-sdk": "7.3.0",
     "purgecss-webpack-plugin": "^1.2.0",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",

examples/browser/vuejs/connect-two-ae/aepp/src/components/Home.vue

@@ -202,8 +202,8 @@
   import BrowserWindowMessageConnection from '@aeternity/aepp-sdk/es/utils/aepp-wallet-communication/connection/browser-window-message'
 
   // Send wallet connection info to Aepp throug content script
-  const NODE_URL = 'https://sdk-testnet.aepps.com'
-  const NODE_INTERNAL_URL = 'https://sdk-testnet.aepps.com'
+  const TEST_NET_NODE_URL = 'https://testnet.aeternity.io'
+  const MAIN_NET_NODE_INTERNAL_URL = 'https://mainnet.aeternity.io'
   const COMPILER_URL = 'https://compiler.aepps.com'
 
   const errorAsField = async fn => {
@@ -332,10 +332,14 @@
 
       this.client = await RpcAepp({
         name: 'AEPP',
-        nodes: [{ name: 'test-net', instance: await Node({ url: NODE_URL, internalUrl: NODE_INTERNAL_URL }) }],
+        nodes: [
+          { name: 'ae_uat', instance: await Node({ url: TEST_NET_NODE_URL }) },
+          { name: 'ae_mainnet', instance: await Node({ url: MAIN_NET_NODE_INTERNAL_URL }) }
+        ],
         compilerUrl: COMPILER_URL,
-        onNetworkChange (params) {
-          if (this.getNetworkId() !== params.networkId) alert(`Connected network ${this.getNetworkId()} is not supported with wallet network ${params.networkId}`)
+        onNetworkChange: async (params) => {
+          this.client.selectNode(params.networkId)
+          this.nodeInfoResponse = await errorAsField(this.client.getNodeInfo())
         },
         onAddressChange:  async (addresses) => {
           this.pub = await this.client.address()

examples/browser/vuejs/connect-two-ae/identity/package.json

@@ -13,7 +13,7 @@
   "author": "Enrico Icardi <[email protected]>",
   "license": "ISC",
   "dependencies": {
-    "@aeternity/aepp-sdk": "7.2.1",
+    "@aeternity/aepp-sdk": "7.3.0",
     "purgecss-webpack-plugin": "^1.2.0",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",

examples/browser/vuejs/connect-two-ae/identity/src/components/Home.vue

@@ -6,6 +6,29 @@
     <h1 class="mb-4">Wallet Aepp</h1>
 
     <div class="border">
+      <template v-if="nodeInfoResponse">
+        <div v-if="nodeInfoResponse.error" class="bg-green w-full flex flex-row font-mono border border-b">
+          <div class="p-2 w-1/4">
+            NodeInfo error
+          </div>
+          <div class="p-2 w-3/4 bg-grey-lightest break-words">
+            {{nodeInfoResponse.error}}
+          </div>
+        </div>
+        <div
+          v-for="(value, name) in nodeInfoResponse.result"
+          v-if="['url', 'name', 'nodeNetworkId', 'version'].includes(name)"
+          class="bg-green w-full flex flex-row font-mono border border-b"
+        >
+          <div class="p-2 w-1/4 capitalize">
+            {{name.replace('nodeNetworkId', 'NetworkId')}}
+          </div>
+          <div class="p-2 w-3/4 bg-grey-lightest">
+            {{value}}
+          </div>
+        </div>
+      </template>
+
       <div class="bg-green w-full flex flex-row font-mono border border-b">
         <div class="p-2 w-1/4">
           Public Key
@@ -27,6 +50,11 @@
         class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs"
         @click="switchAccount"
       >Switch Account</button>
+      <button
+        v-if="client"
+        class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs"
+        @click="switchNode"
+      >Switch Node</button>
     </div>
 
     <div v-if="!aeppUrl" class="w-full p-4 h-64 border border-black border-dashed shadow mx-auto mt-4 bg-grey-lighter">
@@ -46,6 +74,15 @@
     from '@aeternity/aepp-sdk/es/utils/aepp-wallet-communication/connection/browser-window-message'
   import { generateKeyPair } from '@aeternity/aepp-sdk/es/utils/crypto'
 
+  const errorAsField = async fn => {
+    try {
+      return { result: await fn }
+    } catch (error) {
+      console.log(error)
+      return { error }
+    }
+  }
+
   export default {
     data () {
       return {
@@ -54,9 +91,11 @@
         secretKey: 'bf66e1c256931870908a649572ed0257876bb84e3cdf71efb12f56c7335fad54d5cf08400e988222f26eb4b02c8f89077457467211a6e6d955edb70749c6a33b', // Your private key
         client: null,
         balance: null,
+        nodeInfoResponse: null,
         height: null,
         url: 'https://sdk-testnet.aepps.com',
-        internalUrl: 'https://sdk-testnet.aepps.com',
+        mainNetUrl: 'https://mainnet.aeternity.io',
+        internalUrl: 'https://testnet.aeternity.io',
         compilerUrl: 'https://compiler.aepps.com',
         aeppUrl: '//0.0.0.0:9001'
       }
@@ -91,11 +130,17 @@
         this.client.selectAccount(secondAcc)
         this.publicKey = await this.client.address()
         this.balance = await this.client.balance(this.publicKey).catch(() => 0)
+      },
+      async switchNode () {
+        const toNode = this.client.getNodesInPool().find(n => n.name !== this.client.selectedNode.name)
+        this.client.selectNode(toNode.name)
+        this.nodeInfoResponse = await errorAsField(this.client.getNodeInfo())
       }
     },
     async created () {
       const account2 = MemoryAccount({ keypair: generateKeyPair() })
-      const node = await Node({ url: this.url, internalUrl: this.internalUrl })
+      const testNetNode = await Node({ url: this.url })
+      const mainNetNode = await Node({ url: this.mainNetUrl })
 
       const genConfirmCallback = getActionName => (aepp, { accept, deny, params }) => {
         if (confirm(`Client ${aepp.info.name} with id ${aepp.id} want to ${getActionName(params)}`)) accept()
@@ -105,7 +150,10 @@
       const keypair2 = generateKeyPair()
       const sdkAcc = this.publicKey
       this.client = await RpcWallet({
-        nodes: [{ name: 'test-net', instance: node }],
+        nodes: [
+          { name: 'ae_uat', instance: testNetNode },
+          { name: 'ae_mainnet', instance: mainNetNode },
+        ],
         compilerUrl: this.compilerUrl,
         accounts: [MemoryAccount({ keypair: { secretKey: this.secretKey, publicKey: this.publicKey } }), account2],
         address: this.publicKey,
@@ -148,6 +196,8 @@
       this.client.addRpcClient(connection)
       this.shareWalletInfo(connection.sendMessage.bind(connection))
 
+      // Get node info
+      this.nodeInfoResponse = await errorAsField(this.client.getNodeInfo())
       // Get balance
       this.balance = await this.client.balance(await this.client.address()).catch(e => 0)
     }