Merge pull request #1869 from aeternity/release/13.2.0

Release 13.2.0

Author: davidyuk

docs/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [13.2.0](https://github.com/aeternity/aepp-sdk-js/compare/v13.1.0...v13.2.0) (2023-07-28)
+
+
+### Features
+
+* **account:** add methods to generate delegation signatures ([18bdf5a](https://github.com/aeternity/aepp-sdk-js/commit/18bdf5a113afac2c9a0c99555e2e301f043fa3ab))
+* **aepp,wallet:** support delegation signatures ([fd0dc43](https://github.com/aeternity/aepp-sdk-js/commit/fd0dc439418d2b63935bb8bbfb04020ef0884ecc))
+
+
+### Bug Fixes
+
+* **account:** add implementation of `signTypedData` in AccountBase ([fc6e42f](https://github.com/aeternity/aepp-sdk-js/commit/fc6e42f1229c5bebb0a0802126bd7ea5c8726f3d))
+* **wallet:** don't ask to confirm unsubscription ([e2ffc25](https://github.com/aeternity/aepp-sdk-js/commit/e2ffc25021d16b197bba41c88520e0a842b88ba9))
+* **wallet:** don't require to be subscribed to request addresses ([36920b4](https://github.com/aeternity/aepp-sdk-js/commit/36920b4234a00be4e3cc2728372e875b361f9409))
+* **wallet:** return accounts according to subscription ([fa900c0](https://github.com/aeternity/aepp-sdk-js/commit/fa900c0481cc898211a3d99d22d57d34cac02177))
+
 ## [13.1.0](https://github.com/aeternity/aepp-sdk-js/compare/v13.0.1...v13.1.0) (2023-07-07)
 
 

examples/browser/aepp/src/App.vue

@@ -32,6 +32,13 @@
     >
       Typed data
     </a>
+    <a
+      href="#"
+      :class="{ active: view === 'DelegationSignature' }"
+      @click="view = 'DelegationSignature'"
+    >
+      Delegation signature
+    </a>
   </div>
 
   <Component
@@ -41,19 +48,18 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import Connect from './Connect.vue';
 import Basic from './Basic.vue';
 import Contracts from './Contracts.vue';
 import PayForTx from './PayForTx.vue';
 import TypedData from './TypedData.vue';
+import DelegationSignature from './DelegationSignature.vue';
 
 export default {
   components: {
-    Connect, Basic, Contracts, PayForTx, TypedData,
+    Connect, Basic, Contracts, PayForTx, TypedData, DelegationSignature,
   },
   data: () => ({ view: '' }),
-  computed: mapState(['aeSdk']),
 };
 </script>
 

examples/browser/aepp/src/Connect.vue

@@ -13,18 +13,26 @@
       </label>
       <div><input v-model="reverseIframeWalletUrl"></div>
     </div>
+
+    <button
+      v-if="walletConnected"
+      @click="disconnect"
+    >
+      Disconnect
+    </button>
     <button
-      v-if="connectMethod && !walletConnected"
+      v-else-if="connectMethod"
       :disabled="walletConnecting"
       @click="connect"
     >
       Connect
     </button>
+
     <button
-      v-if="walletConnected"
-      @click="disconnect"
+      v-if="cancelWalletDetection"
+      @click="cancelWalletDetection"
     >
-      Disconnect
+      Cancel detection
     </button>
   </div>
 
@@ -34,6 +42,7 @@
       <div>
         {{
           (walletConnected && 'Wallet connected')
+          || (cancelWalletDetection && 'Wallet detection')
           || (walletConnecting && 'Wallet connecting')
           || 'Ready to connect to wallet'
         }}
@@ -48,7 +57,7 @@
 
 <script>
 import {
-  walletDetector, BrowserWindowMessageConnection, RpcConnectionDenyError,
+  walletDetector, BrowserWindowMessageConnection, RpcConnectionDenyError, RpcRejectedByUserError,
 } from '@aeternity/aepp-sdk';
 import { mapState } from 'vuex';
 
@@ -60,6 +69,7 @@ export default {
     reverseIframe: null,
     reverseIframeWalletUrl: process.env.VUE_APP_WALLET_URL ?? 'http://localhost:9000',
     walletInfo: null,
+    cancelWalletDetection: null,
   }),
   computed: {
     ...mapState(['aeSdk']),
@@ -69,32 +79,40 @@ export default {
     },
   },
   methods: {
-    async scanForWallets() {
-      return new Promise((resolve) => {
-        let stopScan;
-
-        const handleWallets = async ({ wallets, newWallet }) => {
-          newWallet = newWallet || Object.values(wallets)[0];
+    async detectWallets() {
+      if (this.connectMethod === 'reverse-iframe') {
+        this.reverseIframe = document.createElement('iframe');
+        this.reverseIframe.src = this.reverseIframeWalletUrl;
+        this.reverseIframe.style.display = 'none';
+        document.body.appendChild(this.reverseIframe);
+      }
+      const connection = new BrowserWindowMessageConnection();
+      return new Promise((resolve, reject) => {
+        const stopDetection = walletDetector(connection, async ({ newWallet }) => {
           if (confirm(`Do you want to connect to wallet ${newWallet.info.name} with id ${newWallet.info.id}`)) {
-            stopScan();
+            stopDetection();
             resolve(newWallet.getConnection());
+            this.cancelWalletDetection = null;
           }
+        });
+        this.cancelWalletDetection = () => {
+          reject(new Error('Wallet detection cancelled'));
+          stopDetection();
+          this.cancelWalletDetection = null;
+          if (this.reverseIframe) this.reverseIframe.remove();
         };
-
-        const scannerConnection = new BrowserWindowMessageConnection();
-        stopScan = walletDetector(scannerConnection, handleWallets);
       });
     },
     async connect() {
       this.walletConnecting = true;
+      this.aeSdk.onDisconnect = () => {
+        this.walletConnected = false;
+        this.walletInfo = null;
+        this.$store.commit('setAddress', undefined);
+        if (this.reverseIframe) this.reverseIframe.remove();
+      };
       try {
-        if (this.connectMethod === 'reverse-iframe') {
-          this.reverseIframe = document.createElement('iframe');
-          this.reverseIframe.src = this.reverseIframeWalletUrl;
-          this.reverseIframe.style.display = 'none';
-          document.body.appendChild(this.reverseIframe);
-        }
-        const connection = await this.scanForWallets();
+        const connection = await this.detectWallets();
         try {
           this.walletInfo = await this.aeSdk.connectToWallet(connection);
         } catch (error) {
@@ -104,14 +122,19 @@ export default {
         this.walletConnected = true;
         const { address: { current } } = await this.aeSdk.subscribeAddress('subscribe', 'connected');
         this.$store.commit('setAddress', Object.keys(current)[0]);
+      } catch (error) {
+        if (
+          error.message === 'Wallet detection cancelled'
+          || error instanceof RpcConnectionDenyError
+          || error instanceof RpcRejectedByUserError
+        ) return;
+        throw error;
       } finally {
         this.walletConnecting = false;
       }
     },
-    async disconnect() {
-      await this.aeSdk.disconnectWallet();
-      this.walletConnected = false;
-      if (this.reverseIframe) this.reverseIframe.remove();
+    disconnect() {
+      this.aeSdk.disconnectWallet();
     },
   },
 };

examples/browser/aepp/src/DelegationSignature.vue

@@ -0,0 +1,68 @@
+<template>
+  <h2>Sign delegation to contract</h2>
+  <div class="group">
+    <div>
+      <div>Contract address</div>
+      <div><input v-model="contractAddress"></div>
+    </div>
+    <div>
+      <label>
+        <input v-model="type" type="radio" value="general">
+        AENS and oracle
+      </label>
+    </div>
+    <div>
+      <label>
+        <input v-model="type" type="radio" value="name">
+        AENS name
+      </label>
+      <div><input v-model="name"></div>
+    </div>
+    <div>
+      <label>
+        <input v-model="type" type="radio" value="oracle-query">
+        Oracle query
+      </label>
+      <div><input v-model="oracleQueryId"></div>
+    </div>
+    <button @click="signPromise = sign()">
+      Sign
+    </button>
+    <div v-if="signPromise">
+      <div>Signature</div>
+      <Value :value="signPromise" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Value from './components/Value.vue';
+
+export default {
+  components: { Value },
+  data: () => ({
+    type: 'general',
+    contractAddress: 'ct_6y3N9KqQb74QsvR9NrESyhWeLNiA9aJgJ7ua8CvsTuGot6uzh',
+    name: 'test.chain',
+    oracleQueryId: 'oq_6y3N9KqQb74QsvR9NrESyhWeLNiA9aJgJ7ua8CvsTuGot6uzh',
+    signPromise: null,
+  }),
+  computed: mapState(['aeSdk']),
+  methods: {
+    sign() {
+      switch (this.type) {
+        case 'general':
+          return this.aeSdk.signDelegationToContract(this.contractAddress);
+        case 'name':
+          return this.aeSdk.signNameDelegationToContract(this.contractAddress, this.name);
+        case 'oracle-query':
+          return this.aeSdk
+            .signOracleQueryDelegationToContract(this.contractAddress, this.oracleQueryId);
+        default:
+          throw new Error(`Unknown delegation signature type: ${this.type}`)
+      }
+    },
+  },
+};
+</script>

examples/browser/aepp/src/store.js

@@ -25,7 +25,6 @@ const store = createStore({
         store.commit('setNetworkId', networkId);
       },
       onAddressChange: ({ current }) => store.commit('setAddress', Object.keys(current)[0]),
-      onDisconnect: () => alert('Aepp is disconnected'),
     })),
   },
   mutations: {

examples/browser/aepp/src/styles.scss

@@ -19,7 +19,7 @@ body {
 }
 
 button {
-  @extend .w-32, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
+  @extend .w-40, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
 
   &:disabled {
     @extend .bg-purple-300, .cursor-not-allowed;