Merge pull request #1899 from aeternity/feature/url-input-wallet-iframe

Add url input and "show aepp" button to wallet-iframe example
aeternity · Sep 19, 2023 · 6dcdbf5 · 6dcdbf5
2 parents 9589384 + f6b5bcd
commit 6dcdbf5
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 4 deletions.
diff --git a/examples/browser/aepp/src/Connect.vue b/examples/browser/aepp/src/Connect.vue
@@ -67,7 +67,7 @@ export default {
     walletConnected: false,
     walletConnecting: null,
     reverseIframe: null,
-    reverseIframeWalletUrl: process.env.VUE_APP_WALLET_URL ?? 'http://localhost:9000',
+    reverseIframeWalletUrl: process.env.VUE_APP_WALLET_URL ?? `http://${location.hostname}:9000`,
     walletInfo: null,
     cancelWalletDetection: null,
   }),

diff --git a/examples/browser/wallet-iframe/src/App.vue b/examples/browser/wallet-iframe/src/App.vue
@@ -1,7 +1,24 @@
 <template>
-  <h2>Wallet Iframe</h2>
+  <input id="toggle-aepp" type="checkbox" />
+  <h2>
+    Wallet Iframe
+    <label for="toggle-aepp" />
+  </h2>
 
   <div class="group">
+    <div>
+      <div>Aepp URL</div>
+      <form
+        novalidate
+        @submit.prevent="navigate"
+      >
+        <input
+          type="url"
+          v-model="nextAeppUrl"
+          @focus="$event.target.select()"
+        >
+      </form>
+    </div>
     <div>
       <div>Address</div>
       <div>{{ address }}</div>
@@ -54,7 +71,8 @@ import Value from './Value.vue';
 export default {
   components: { Value },
   data: () => ({
-    aeppUrl: process.env.VUE_APP_AEPP_URL ?? 'http://localhost:9001',
+    nextAeppUrl: process.env.VUE_APP_AEPP_URL ?? `http://${location.hostname}:9001`,
+    aeppUrl: '',
     runningInFrame: window.parent !== window,
     nodeName: '',
     address: '',
@@ -64,6 +82,13 @@ export default {
     stopSharingWalletInfo: null,
   }),
   methods: {
+    navigate() {
+      if (!/^https?:\/\//.test(this.nextAeppUrl)) this.nextAeppUrl = 'http://' + this.nextAeppUrl;
+      this.aeppUrl = '';
+      this.$nextTick(() => {
+        this.aeppUrl = this.nextAeppUrl;
+      });
+    },
     shareWalletInfo({ interval = 5000, attempts = 5 } = {}) {
       const target = this.runningInFrame ? window.parent : this.$refs.aepp.contentWindow;
       const connection = new BrowserWindowMessageConnection({ target });
@@ -116,6 +141,8 @@ export default {
     },
   },
   mounted() {
+    this.navigate();
+
     const aeppInfo = {};
     const genConfirmCallback = (actionName) => (aeppId, parameters, origin) => {
       if (!confirm([
@@ -242,3 +269,40 @@ export default {
 </script>
 
 <style lang="scss" src="./styles.scss" />
+
+<style lang="scss" scoped>
+input[id=toggle-aepp] {
+  display: none;
+}
+
+label[for=toggle-aepp]::after {
+  font-size: initial;
+  font-weight: initial;
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+
+@media (max-width: 450px), (max-height: 650px) {
+  input[id=toggle-aepp] {
+    &:checked ~ {
+      h2 label[for=toggle-aepp]::after {
+        content: 'Hide aepp';
+      }
+
+      .group {
+        display: none;
+      }
+    }
+
+    &:not(:checked) ~ {
+      h2 label[for=toggle-aepp]::after {
+        content: 'Show aepp';
+      }
+
+      iframe {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/browser/wallet-iframe/src/styles.scss b/examples/browser/wallet-iframe/src/styles.scss
@@ -6,7 +6,7 @@ body {
   @extend .bg-gray-300;
 
   #app {
-    @extend .p-4, .flex, .flex-col, .w-full, .h-screen;
+    @extend .p-4, .flex, .flex-col, .w-full, .min-h-screen;
 
     iframe {
       @extend .flex-grow, .mt-4, .bg-white, .border, .border-black, .border-dashed;
@@ -26,6 +26,10 @@ h2 {
   @extend .mt-2, .font-bold, .text-2xl;
 }
 
+input:not([type=radio]):not([type=checkbox]), textarea {
+  @extend .bg-gray-900, .text-white, .p-2, .w-full;
+}
+
 .group {
   @extend .border, .mt-4, .rounded, .bg-gray-100, .font-mono;