Clipboard now copies address and is styled with tooltip

apps/explorer_web/assets/css/components/_address_link.scss

@@ -7,6 +7,7 @@
 
   &__copy-icon {
     color: $gray-800;
-    display: none;
+    appearance: none;
+    border: none;
   }
 }

apps/explorer_web/assets/js/app.js

@@ -23,4 +23,4 @@ import './lib/sidebar'
 import './lib/market_history_chart'
 import './lib/card_flip'
 import './lib/tooltip'
-
+import './lib/clipboard_buttons'

apps/explorer_web/assets/js/lib/clipboard_buttons.js

@@ -0,0 +1,16 @@
+import ClipboardJS from 'clipboard'
+import $ from 'jquery'
+
+const clipboard = new ClipboardJS('[data-clipboard-text]')
+
+clipboard.on('success', ({trigger})=> {
+  const copyButton = $(trigger)
+  copyButton.tooltip({
+    title: 'Copied!',
+    trigger: 'click',
+    placement: 'top'
+  }).tooltip('show')
+  setTimeout(()=> {
+    copyButton.tooltip('dispose')
+  }, 1000)
+});

apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex

@@ -6,5 +6,7 @@
       title: @address do %>
     <%= @address |> hash |> String.slice(0..3) %><i class="fas fa-ellipsis-v address-link__seperator"></i><%= @address |> hash |> String.slice(-4..-1) %>
 <% end %>
-<i class="fa fa-clipboard address-link__copy-icon"></i>
+<button class="address-link__copy-icon" data-clipboard-text="<%= @address %>" aria-label="copy address">
+  <i class="fa fa-clipboard"></i>
+</button>
 <% end %>