add copy button next to address (#175)

## Goal The goal of this PR is to be able to copy the account id Closes #169 ## Discussion - copy button added to login pages next to address dropdowns - copy button added to dashboard next to address - doesn't appear if no address - color changes for better UX. ## Checklist - [x] PR Self-Review and Commenting - [n/a] Docs updated - [n/a] Tests added ## How To Test the Changes 1. Clone the pr branch 2. test copy in login windows 3. test copy in dashboard window ## Demo https://github.com/user-attachments/assets/344302e2-a50a-4c41-8dbd-e0daedb812d7 https://github.com/user-attachments/assets/7f004eb7-4a6b-4683-92d4-965cf38af700 Co-authored-by: Claire Olmstead <[email protected]>
frequency-chain · Sep 26, 2024 · 8ba3c81 · 8ba3c81
1 parent 4e3ee45
commit 8ba3c81
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 11 deletions.
diff --git a/src/components/AddToClipboard.svelte b/src/components/AddToClipboard.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Clipboard from './Clipboard.svelte';
+  import CopyIcon from '../lib/assets/CopyIcon.svelte';
+
+  let fillColor = '#fff';
+  let isClicked = false;
+
+  function handleMouseEnter() {
+    fillColor = '#459ABA';
+  }
+
+  function handleMouseLeave() {
+    if (!isClicked) fillColor = '#fff';
+  }
+
+  function handleClick() {
+    fillColor = '#7CFA4D'; // Change to green on click
+    isClicked = true;
+    setTimeout(() => {
+      fillColor = '#fff'; // Reset to original
+      isClicked = false;
+    }, 2000);
+  }
+
+  export let copyValue = '';
+
+  const copy = () => {
+    const app = new Clipboard({
+      target: document.getElementById('clipboard')!,
+      props: { copyValue },
+    });
+    app.$destroy();
+  };
+</script>
+
+<button on:click={copy} class="ml-2 flex h-[30px] items-center justify-center">
+  <CopyIcon {fillColor} {handleClick} {handleMouseEnter} {handleMouseLeave} />
+  <slot />
+</button>
+
+<div id="clipboard"></div>
diff --git a/src/components/Clipboard.svelte b/src/components/Clipboard.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let copyValue: string;
+
+  let textarea: HTMLTextAreaElement;
+
+  onMount(() => {
+    textarea.select();
+    document.execCommand('copy');
+  });
+</script>
+
+<textarea bind:value={copyValue} bind:this={textarea} />
diff --git a/src/components/Profile.svelte b/src/components/Profile.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { user } from '$lib/stores/userStore';
+  import AddToClipboard from './AddToClipboard.svelte';
 </script>
 
 <div class="flex min-w-[300px] max-w-[500px] items-center gap-4">
@@ -11,6 +12,9 @@
   <div class="flex flex-col gap-2">
     <div class="data-value-lg">{$user.providerName}</div>
     <div class="text-sm">{$user.msaId}</div>
-    <div class="text-sm leading-3">{$user.address}</div>
+    <div class="flex items-center justify-center align-middle">
+      <div class="text-sm leading-3">{$user.address}</div>
+      <AddToClipboard copyValue={$user.address} />
+    </div>
   </div>
 </div>
diff --git a/src/components/SelectNetworkAndAccount.svelte b/src/components/SelectNetworkAndAccount.svelte
@@ -7,6 +7,7 @@
   import DropDownMenu from '$components/DropDownMenu.svelte';
   import { formatNetwork, formatAccount, isValidURL } from '$lib/utils';
   import { createApi } from '$lib/polkadotApi';
+  import AddToClipboard from './AddToClipboard.svelte';
 
   export let newUser: Account | undefined;
   export let accounts: Accounts;
@@ -110,15 +111,20 @@
     />
   {/if}
   <div id="network-error-msg" class="text-sm text-error">{networkErrorMsg}</div>
-  <DropDownMenu
-    id="controlkeys"
-    label={accountSelectorTitle}
-    bind:value={selectedAccount}
-    placeholder={accountSelectorPlaceholder}
-    options={Array.from(accounts.values())}
-    onChange={accountChanged}
-    formatter={formatAccount}
-    disabled={accounts.size === 0 || isLoading}
-  />
+  <div class="flex items-end">
+    <DropDownMenu
+      id="controlkeys"
+      label={accountSelectorTitle}
+      bind:value={selectedAccount}
+      placeholder={accountSelectorPlaceholder}
+      options={Array.from(accounts.values())}
+      onChange={accountChanged}
+      formatter={formatAccount}
+      disabled={accounts.size === 0 || isLoading}
+    />
+    {#if selectedAccount?.address}
+      <AddToClipboard copyValue={selectedAccount?.address} />
+    {/if}
+  </div>
   <div id="controlkey-error-msg" class="text-sm text-error">{controlKeysErrorMsg}</div>
 </div>
diff --git a/src/lib/assets/CopyIcon.svelte b/src/lib/assets/CopyIcon.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  export let fillColor = '#fff';
+  export let handleClick;
+  export let handleMouseEnter;
+  export let handleMouseLeave;
+</script>
+
+<button on:click={handleClick} on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave}
+  ><svg
+    class="transition"
+    fill={fillColor}
+    height="24px"
+    width="24px"
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 64 64"
+    enable-background="new 0 0 64 64"
+    xml:space="preserve"
+  >
+    <g id="Text-files">
+      <path
+        d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228
+		C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999
+		c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64
+		h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002
+		C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228
+		c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999
+		c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z
+		 M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699
+		c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946
+		c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999
+		h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"
+      />
+      <path
+        d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005
+		c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997
+		C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"
+      />
+      <path
+        d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986
+		c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016
+		C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"
+      />
+      <path
+        d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997
+		S39.16465,29.4603004,38.6031494,29.4603004z"
+      />
+      <path
+        d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997
+		S29.0059509,37.5872993,28.4444485,37.5872993z"
+      />
+    </g>
+  </svg>
+</button>