feat: add profile tooltip

components/ProfileCard.vue

@@ -1,14 +1,5 @@
 <script setup lang="ts">
 const { viewedProfile } = useViewedProfile()
-
-const handleCopyAddress = () => {
-  try {
-    assertAddress(viewedProfile.value?.address)
-    navigator.clipboard.writeText(viewedProfile.value.address)
-  } catch (error) {
-    console.error(error)
-  }
-}
 </script>
 
 <template>
@@ -23,21 +14,27 @@ const handleCopyAddress = () => {
       <div slot="content" class="flex flex-col items-center">
         <div class="relative -bottom-[140px] text-center">
           <div class="group cursor-pointer flex flex-col items-center">
-            <lukso-profile
-              :profile-url="viewedProfile?.profileImage?.base64"
-              :profile-address="viewedProfile?.address"
-              size="x-large"
-              has-identicon
-              class="relative z-[1] flex outline outline-4 outline-neutral-100 rounded-full transition group-hover:scale-105"
-              @click="handleCopyAddress"
-            >
-            </lukso-profile>
-            <div
-              class="relative -top-10 h-0 opacity-10 paragraph-ptmono-16-regular text-24 transition group-hover:opacity-30"
-              @click="handleCopyAddress"
+            <lukso-tooltip
+              variant="light"
+              offset="15"
+              is-clipboard-copy
+              :copy-text="$formatMessage('profile_card_copy_address')"
+              :copy-value="viewedProfile?.address"
             >
-              {{ viewedProfile?.address }}
-            </div>
+              <lukso-profile
+                :profile-url="viewedProfile?.profileImage?.base64"
+                :profile-address="viewedProfile?.address"
+                size="x-large"
+                has-identicon
+                class="relative z-[1] inline-flex outline outline-4 outline-neutral-100 rounded-full transition group-hover:scale-105"
+              >
+              </lukso-profile>
+              <div
+                class="relative -top-10 h-0 opacity-10 paragraph-ptmono-16-regular text-24 transition group-hover:opacity-30"
+              >
+                {{ viewedProfile?.address }}
+              </div>
+            </lukso-tooltip>
           </div>
           <lukso-username
             v-if="viewedProfile?.name"

package.json

@@ -31,7 +31,7 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@formatjs/intl": "^2.9.6",
     "@lukso/lsp-smart-contracts": "0.12.1",
-    "@lukso/web-components": "1.49.2",
+    "@lukso/web-components": "1.50.0",
     "@nuxt/devtools": "^0.7.6",
     "@nuxtjs/algolia": "^1.9.0",
     "@nuxtjs/device": "^3.1.1",

translations/en_US.json

@@ -75,5 +75,6 @@
   "web3_connect_error": "There was an error while connecting to the browser extension.",
   "footer_privacy_policy_text": "Privacy Policy",
   "token_details_images": "Token Images",
-  "profile_search_no_results": "No profile found"
+  "profile_search_no_results": "No profile found",
+  "profile_card_copy_address": "UP address copied!"
 }

yarn.lock

@@ -1894,12 +1894,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:1.49.2":
-  version: 1.49.2
-  resolution: "@lukso/web-components@npm:1.49.2"
+"@lukso/web-components@npm:1.50.0":
+  version: 1.50.0
+  resolution: "@lukso/web-components@npm:1.50.0"
   dependencies:
     ethereum-blockies-base64: "npm:^1.0.2"
-  checksum: 608d9262306df95ddcb216125cd54f73859cc95e7b15c75c4c62b60ad3a490926483b32b9a3dee99dd3086c998c0fea61d87bbcb2180a5493f3857cccb7a7882
+    tippy.js: "npm:^6.3.7"
+  checksum: 6101a085083a1ff40f5940188c040d094cd4ce201daa9eb8eeb7c6aa05b513798a8cfe88d5f8fc5b95e5b13270699b5c6ff94a5ff02fb979a4816c5fff1adf52
   languageName: node
   linkType: hard
 
@@ -2574,6 +2575,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.9.0":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: ddd16090cde777aaf102940f05d0274602079a95ad9805bd20bc55dcc7c3a2ba1b99dd5c73e5cc2753c3d31250ca52a67d58059459d7d27debb983a9f552936c
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-alias@npm:^5.0.0":
   version: 5.0.0
   resolution: "@rollup/plugin-alias@npm:5.0.0"
@@ -15151,6 +15159,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tippy.js@npm:^6.3.7":
+  version: 6.3.7
+  resolution: "tippy.js@npm:6.3.7"
+  dependencies:
+    "@popperjs/core": "npm:^2.9.0"
+  checksum: 9bd1c6ab68704dd10b8896fd66e28f3b4b4017a32b8802a9d57a565dee1704df45c249d8363bcaca235dbc0d9a7a90d6f1326f1e6b999f7809b36599a3f92eb3
+  languageName: node
+  linkType: hard
+
 "titleize@npm:^3.0.0":
   version: 3.0.0
   resolution: "titleize@npm:3.0.0"
@@ -16358,7 +16375,7 @@ __metadata:
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@formatjs/intl": "npm:^2.9.6"
     "@lukso/lsp-smart-contracts": "npm:0.12.1"
-    "@lukso/web-components": "npm:1.49.2"
+    "@lukso/web-components": "npm:1.50.0"
     "@nuxt/devtools": "npm:^0.7.6"
     "@nuxtjs/algolia": "npm:^1.9.0"
     "@nuxtjs/device": "npm:^3.1.1"