A bit of infinity and hack for copy message

src/components/InfiniteScroll.vue

@@ -0,0 +1,42 @@
+<template>
+  <div ref="scrollContainer">
+    <slot />
+    <div ref="sentinel" style="height: 1px"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
+
+@Component
+export default class InfiniteScroll extends Vue {
+  @Prop({ default: 100 })
+  readonly distance!: number;
+  private observer!: IntersectionObserver;
+
+  mounted() {
+    const options = {
+      root: this.$refs.scrollContainer as HTMLElement,
+      rootMargin: `0px 0px ${this.distance}px 0px`,
+      threshold: 1.0,
+    };
+    this.observer = new IntersectionObserver(this.handleIntersection, options);
+    this.observer.observe(this.$refs.sentinel as HTMLElement);
+  }
+
+  beforeUnmount() {
+    this.observer.disconnect();
+  }
+  @Emit("reached-bottom")
+  handleIntersection(entries: IntersectionObserverEntry[]) {
+    const entry = entries[0];
+    if (entry.isIntersecting) {
+      return true;
+    }
+    return false;
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>

src/views/AccountViewView.vue

@@ -89,7 +89,16 @@
       <div class="text-slate-500 text-sm font-bold">ID</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ activeDid }}</code>
-        <button @click="copy(activeDid)" class="ml-2">
+        <button
+          @click="
+            copyText($event, activeDid, 'did');
+            did = !did;
+            st(function () {
+              did = !did;
+            });
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
         <span class="whitespace-nowrap ml-4">
@@ -104,30 +113,52 @@
             <fa icon="qrcode" class="fa-fw"></fa>
           </button>
         </span>
+        <span v-show="did">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ publicBase64 }}</code>
-        <button @click="copy(publicBase64)" class="ml-2">
+        <button
+          @click="
+            copyText($event, publicBase64, 'base64');
+            base64 = !base64;
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="base64">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ publicHex }}</code>
-        <button @click="copy(publicHex)" class="ml-2">
+        <button
+          @click="
+            copyText($event, publicHex, 'pubhex');
+            pubhex = !pubhex;
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="pubhex">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ derivationPath }}</code>
-        <button @click="copy(derivationPath)" class="ml-2">
+        <button
+          @click="
+            copyText($event, derivationPath, 'derpath');
+            derpath = !derpath;
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="derpath">Copied!</span>
       </div>
     </div>
 
@@ -288,7 +319,38 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   showContactGives = false;
 
+  did = false;
+  derpath = false;
+  base64 = false;
+  pubhex = false;
+
   copy = useClipboard().copy;
+  text = useClipboard().text;
+
+  showCopyMessage() {
+    this.did = true;
+  }
+
+  st(f) {
+    setTimeout(f, 10000);
+  }
+
+  copyText = (e: MouseEvent, inputText: string, loc: string) => {
+    console.log(this);
+    console.log(e, inputText);
+    this.copy(inputText).then(() => {
+      if (loc == "did") {
+        this.showCopyMessage();
+        console.log(this);
+      } else if (loc == "derpath") {
+        this.derpath = true;
+      } else if (loc == "base64") {
+        this.base64 = true;
+      } else if (loc == "pubhex") {
+        this.pubhex = true;
+      }
+    });
+  };
 
   handleChange() {
     this.showContactGives = !this.showContactGives;
@@ -299,6 +361,9 @@ export default class AccountViewView extends Vue {
     return timeStr.substring(0, timeStr.indexOf("T"));
   }
 
+  mounted() {
+    console.log("Mounted", this);
+  }
   // 'created' hook runs when the Vue instance is first created
   async created() {
     // Uncomment to register this user on the test server.
@@ -306,7 +371,7 @@ export default class AccountViewView extends Vue {
     // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
     // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
     //testServerRegisterUser();
-
+    console.log("created", this);
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);