vault balances UI

src/components/CopyButton.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-btn v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()"
+         :class="error?'error':copied?'success':''"
+         :icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"/>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const props = defineProps(['text'])
+const permitted = ref(true)
+const copied = ref(false)
+const error = ref(false)
+
+navigator.permissions.query({name: "clipboard-write"}).then((permission) => {
+  permitted.value = permission.state === "granted" || permission.state === "prompt"
+})
+
+function copy() {
+  if (!copied.value) {
+    navigator.clipboard.writeText(props.text)
+        .then(() => {
+          copied.value = true
+          setTimeout(() => copied.value = false, 3000)
+        })
+        .catch(() => {
+          error.value = true
+        })
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+.error {
+  color: $red;
+}
+
+.success {
+  color: $green;
+}
+</style>