Add a clipboard controller and wire up the copy button

app/javascript/controllers/clipboard_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source", "trigger"]
+
+  copy (event) {
+    event.preventDefault();
+    navigator.clipboard.writeText(this.sourceTarget.value);
+    this.triggerTarget.querySelector('.content-initial').classList.add('hidden');
+    this.triggerTarget.querySelector('.content-active').classList.remove('hidden');
+    setTimeout(() => {
+      this.triggerTarget.querySelector('.content-initial').classList.remove('hidden');
+      this.triggerTarget.querySelector('.content-active').classList.add('hidden');
+    }, 2000)
+  }
+}

app/views/icons/_check.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check <%= custom_class %>"><polyline points="20 6 9 17 4 12"></polyline></svg>

app/views/settings/profile/index.html.erb

@@ -6,15 +6,17 @@
     <p class="mb-1">
       <%= label :user_address, 'User address', class: 'font-bold' %>
     </p>
-    <p class="flex gap-1 mb-2 sm:block">
+    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
       <input type="text" id="user_address" class="flex-1 sm:w-3/5"
-             value=<%= @user.address %> disabled="disabled" />
+             value=<%= @user.address %> disabled="disabled"
+             data-clipboard-target="source" />
       <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+              data-clipboard-target="trigger" data-action="clipboard#copy"
               title="Copy to clipboard">
-        <span class="icon-initial">
+        <span class="content-initial">
           <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
         </span>
-        <span class="icon-active hidden">
+        <span class="content-active hidden">
           <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
         </span>
       </button>