From 1ab9b8593e26461a01ef9ab7d7942fa10e51ce6e Mon Sep 17 00:00:00 2001
From: Charlie Varley <charlie.varley@iota.org>
Date: Fri, 12 Mar 2021 18:39:45 +0000
Subject: [PATCH] feat: make transaction details copyable

---
 .../shared/components/ActivityDetail.svelte     | 17 ++++++++++++-----
 packages/shared/locales/en.json                 |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/shared/components/ActivityDetail.svelte b/packages/shared/components/ActivityDetail.svelte
index 90b0edf177c..5f23c45e5b5 100644
--- a/packages/shared/components/ActivityDetail.svelte
+++ b/packages/shared/components/ActivityDetail.svelte
@@ -2,6 +2,7 @@
     import { Icon, Text } from 'shared/components'
     import { getInitials, truncateString } from 'shared/lib/helpers'
     import { formatUnit } from 'shared/lib/units'
+    import { setClipboard } from 'shared/lib/utils'
     import type { WalletAccount } from 'shared/lib/wallet'
     import { getContext } from 'svelte'
     import { date } from 'svelte-i18n'
@@ -98,21 +99,27 @@
         {/if}
         {#if id}
             <div class="mb-5">
-                <Text secondary>{locale('general.transaction_id')}</Text>
-                <Text type="pre">{id}</Text>
-            </div>
+                <Text secondary>{locale('general.messageId')}</Text>
+                <button class="text-left" on:click={() => setClipboard(id.toLowerCase())}>
+                    <Text type="pre">{id}</Text>
+                </button>
+           </div>
         {/if}
         {#if senderAddress}
             <div class="mb-5">
                 <Text secondary>{locale('general.input_address')}</Text>
-                <Text type="pre">{senderAddress}</Text>
+                <button class="text-left" on:click={() => setClipboard(senderAddress.toLowerCase())}>
+                    <Text type="pre">{senderAddress}</Text>
+                </button>
             </div>
         {/if}
         {#if receiverAddresses.length > 0}
             <div class="mb-5">
                 <Text secondary>{locale('general.receive_address')}</Text>
                 {#each receiverAddresses as receiver}
-                    <Text type="pre" classes="mb-2">{receiver}</Text>
+                    <button class="text-left" on:click={() => setClipboard(receiver.toLowerCase())}>
+                        <Text type="pre" classes="mb-2">{receiver}</Text>
+                    </button>
                 {/each}
             </div>
         {/if}
diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
index 6834b8fe309..3d85c303a4d 100644
--- a/packages/shared/locales/en.json
+++ b/packages/shared/locales/en.json
@@ -499,7 +499,7 @@
         "wallet": "Wallet",
         "help": "Help",
         "you": "You",
-        "transaction_id": "Transaction ID",
+        "messageId": "Message ID",
         "input_address": "Input Address",
         "receive_address": "Receive Address",
         "date": "Date",