Aepp-wallet connection fixes

examples/browser/aepp/src/App.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import Connect from './Connect.vue';
 import Basic from './Basic.vue';
 import Contracts from './Contracts.vue';
@@ -53,7 +52,6 @@ export default {
     Connect, Basic, Contracts, PayForTx, TypedData,
   },
   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/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;

examples/browser/wallet-iframe/src/App.vue

@@ -14,10 +14,26 @@
       <div>Balance</div>
       <Value :value="balancePromise" />
     </div>
+    <div>
+      <div>RPC client</div>
+      <div>status: {{ clientStatus ?? 'no client' }}, id: {{ clientId ?? 'not defined' }}</div>
+    </div>
 
     <button @click="switchAccount">Switch Account</button>
     <button @click="switchNode">Switch Node</button>
-    <button @click="disconnect">Disconnect</button>
+
+    <button
+      v-if="clientStatus === 'CONNECTED'"
+      @click="disconnect"
+    >
+      Disconnect
+    </button>
+    <button
+      v-else
+      @click="() => (stopSharingWalletInfo ?? shareWalletInfo)()"
+    >
+      {{ stopSharingWalletInfo ? 'Stop sharing' : 'Share wallet info' }}
+    </button>
   </div>
 
   <iframe
@@ -30,7 +46,7 @@
 <script>
 import {
   MemoryAccount, generateKeyPair, AeSdkWallet, Node, CompilerHttp,
-  BrowserWindowMessageConnection, METHODS, WALLET_TYPE,
+  BrowserWindowMessageConnection, METHODS, WALLET_TYPE, RPC_STATUS,
   RpcConnectionDenyError, RpcRejectedByUserError, unpackTx, decodeFateValue,
 } from '@aeternity/aepp-sdk';
 import Value from './Value.vue';
@@ -43,24 +59,42 @@ export default {
     nodeName: '',
     address: '',
     balancePromise: null,
+    clientId: null,
+    clientStatus: null,
+    stopSharingWalletInfo: null,
   }),
   methods: {
-    async shareWalletInfo(clientId, { interval = 5000, attemps = 5 } = {}) {
-      this.aeSdk.shareWalletInfo(clientId);
-      while (attemps) {
-        await new Promise((resolve) => {
-          setTimeout(resolve, interval);
-        });
-        this.aeSdk.shareWalletInfo(clientId);
-        attemps -= 1;
+    shareWalletInfo({ interval = 5000, attempts = 5 } = {}) {
+      const target = this.runningInFrame ? window.parent : this.$refs.aepp.contentWindow;
+      const connection = new BrowserWindowMessageConnection({ target });
+      this.clientId = this.aeSdk.addRpcClient(connection);
+
+      this.aeSdk.shareWalletInfo(this.clientId);
+      const intervalId = setInterval(() => {
+        this.aeSdk.shareWalletInfo(this.clientId);
+        attempts -= 1;
+        if (!attempts) return this.stopSharingWalletInfo();
+      }, interval);
+
+      this.stopSharingWalletInfo = () => {
+        clearInterval(intervalId);
+        // TODO: replace with clientStatus
+        const client = this.aeSdk._getClient(this.clientId);
+        if (client.status === RPC_STATUS.WAITING_FOR_CONNECTION_REQUEST) {
+          this.aeSdk.removeRpcClient(this.clientId);
+        }
+        this.stopSharingWalletInfo = null;
       }
-      console.log('Finish sharing wallet info');
     },
     disconnect() {
-      Object.values(this.aeSdk.rpcClients).forEach((client) => {
-        client.notify(METHODS.closeConnection);
-        client.disconnect();
-      });
+      // TODO: move to removeRpcClient (would be a semi-breaking change)
+      const client = this.aeSdk._getClient(this.clientId);
+      if (client.status === RPC_STATUS.CONNECTED) {
+        client.rpc.notify(METHODS.closeConnection, null);
+      }
+
+      this.aeSdk.removeRpcClient(this.clientId);
+      this.clientId = null;
     },
     async switchAccount() {
       this.address = this.aeSdk.addresses().find((a) => a !== this.address);
@@ -72,6 +106,14 @@ export default {
         .find((name) => name !== this.nodeName);
       this.aeSdk.selectNode(this.nodeName);
     },
+    updateClientStatus() {
+      if (!this.clientId) {
+        this.clientStatus = null;
+        return;
+      }
+      const client = this.aeSdk._getClient(this.clientId);
+      this.clientStatus = client.status;
+    },
   },
   mounted() {
     const aeppInfo = {};
@@ -116,7 +158,6 @@ export default {
       }
     }
 
-    let clientId;
     this.aeSdk = new AeSdkWallet({
       id: window.origin,
       type: WALLET_TYPE.window,
@@ -135,29 +176,32 @@ export default {
           throw new RpcConnectionDenyError();
         }
         aeppInfo[aeppId] = params;
+        setTimeout(() => this.stopSharingWalletInfo());
       },
       onSubscription: genConfirmCallback('subscription'),
       onAskAccounts: genConfirmCallback('get accounts'),
-      onDisconnect() {
-        this.shareWalletInfo(clientId);
+      onDisconnect: (clientId) => {
+        console.log('disconnected client', clientId);
+        this.clientId = null;
       },
     });
 
+    if (this.runningInFrame) this.shareWalletInfo();
+
     this.nodeName = this.aeSdk.selectedNodeName;
     [this.address] = this.aeSdk.addresses();
 
-    const target = this.runningInFrame ? window.parent : this.$refs.aepp.contentWindow;
-    const connection = new BrowserWindowMessageConnection({ target });
-    clientId = this.aeSdk.addRpcClient(connection);
-    this.shareWalletInfo(clientId);
-
     this.$watch(
       ({ address, nodeName }) => [address, nodeName],
       ([address]) => {
         this.balancePromise = this.aeSdk.getBalance(address);
       },
       { immediate: true },
     );
+
+    // TODO: replace setInterval with subscription after refactoring
+    setInterval(() => this.updateClientStatus(), 1000);
+    this.$watch(({ clientId }) => [clientId], () => this.updateClientStatus(), { immediate: true });
   },
 };
 </script>

examples/browser/wallet-iframe/src/styles.scss

@@ -15,7 +15,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;

examples/browser/wallet-web-extension/src/styles.scss

@@ -7,7 +7,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;