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,9 +89,15 @@
       <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="
+            doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="showDidCopy">Copied!</span>
         <span class="whitespace-nowrap ml-4">
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
@@ -109,25 +115,43 @@
       <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="
+            doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="showB64Copy">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="
+            doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="showPubCopy">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="
+            doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="showDerCopy">Copied!</span>
       </div>
     </div>
 
@@ -288,7 +312,18 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   showContactGives = false;
 
-  copy = useClipboard().copy;
+  showDidCopy = false;
+  showDerCopy = false;
+  showB64Copy = false;
+  showPubCopy = false;
+
+  // call fn, copy text to the clipboard, then redo fn after 2 seconds
+  doCopyTwoSecRedo(text, fn) {
+    fn();
+    useClipboard()
+      .copy(text)
+      .then(() => setTimeout(fn, 2000));
+  }
 
   handleChange() {
     this.showContactGives = !this.showContactGives;
@@ -306,7 +341,6 @@ 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();
-
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);