refactor: plugins

components/collection/HeroButtons.vue

@@ -43,8 +43,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="currentCollectionUrl"
- @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+ @click="
+ toast(`${$i18n.t('toast.urlCopy')}`)
+ copy(currentCollectionUrl)
+ ">
  {{ $i18n.t('share.copyLink') }}
  </NeoDropdownItem>
  <NeoDropdownItem @click="QRModalActive = true">
@@ -124,6 +126,8 @@ const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 
+const { copy } = useClipboard()
+
 const collectionId = computed(() => route.params.id)
 const currentCollectionUrl = computed(
  () =>

components/collection/unlockable/UnlockableHeroButtons.vue

@@ -13,8 +13,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="currentUrl"
- @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+ @click="
+ toast(`${$i18n.t('toast.urlCopy')}`)
+ copy(currentUrl)
+ ">
  {{ $i18n.t('share.copyLink') }}
  </NeoDropdownItem>
  <NeoDropdownItem @click="QRModalActive = true">
@@ -52,6 +54,7 @@ import {
  NeoModal,
 } from '@kodadot1/brick'
 
+const { copy } = useClipboard()
 const { $i18n } = useNuxtApp()
 const currentUrl = computed(() => window.location.href)
 

components/common/ConnectWallet/WalletAssetIdentity.vue

@@ -6,7 +6,11 @@
  :prefix="urlPrefix"
  variant="button" />
  <div class="is-flex is-flex-direction-column">
- <a v-clipboard:copy="account" @click="toast('Copied to clipboard')">
+ <a
+ @click="
+ toast('Copied to clipboard')
+ copy(account)
+ ">
  <NeoIcon icon="copy" />
  </a>
  <hr class="my-1" />
@@ -23,6 +27,7 @@ import { useIdentityStore } from '@/stores/identity'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 import useIdentity from '@/components/identity/utils/useIdentity'
 
+const { copy } = useClipboard()
 const identityStore = useIdentityStore()
 const shoppingCartStore = useShoppingCartStore()
 const { urlPrefix } = usePrefix()

components/gallery/GalleryItemButton/GalleryItemShareBtn.vue

@@ -10,8 +10,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="realworldFullPathShare"
- @click="toast(String($t('toast.urlCopy')))">
+ @click="
+ toast(String($t('toast.urlCopy')))
+ copy(realworldFullPathShare)
+ ">
  Copy Link
  </NeoDropdownItem>
  <NeoDropdownItem @click="isModalActive = true">QR Code</NeoDropdownItem>
@@ -47,6 +49,7 @@ import { isMobileDevice } from '@/utils/extension'
 
 const QRCode = () => import('@/components/shared/QRCode.vue')
 
+const { copy } = useClipboard()
 const route = useRoute()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()

components/identity/module/IdentityLink.vue

@@ -5,8 +5,10 @@
  </a>
  <a
  v-if="showClipboard"
- v-clipboard:copy="address"
- @click="toast('Copied to clipboard')">
+ @click="
+ toast('Copied to clipboard')
+ address ? copy(String(address)) : null
+ ">
  <svg
  width="13"
  height="13"
@@ -33,6 +35,8 @@ const props = defineProps<{
  address?: Address
  showClipboard?: boolean
 }>()
+
+const { copy } = useClipboard()
 const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 

components/identity/module/IdentityPopoverHeader.vue

@@ -11,10 +11,13 @@
  >
  </nuxt-link>
  <NeoIcon
- v-clipboard:copy="address"
  icon="copy"
  class="has-text-link is-clickable"
  data-cy="identity-clipboard"
+ @click.native="
+ toast('Copied to clipboard')
+ copy(String(address))
+ " />
  @click="toast('Copied to clipboard')" />
  </div>
  <a
@@ -36,6 +39,8 @@ const address = inject('address')
 const shortenedAddress = inject('shortenedAddress')
 
 const identity = inject<{ [x: string]: string }>('identity')
+
+const { copy } = useClipboard()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 </script>

components/landing/topCollections/TopCollectionsItem.vue

@@ -72,6 +72,7 @@ import { calculateUsdFromToken } from '@/utils/calculation'
 import { CollectionEntityWithVolumes } from './utils/types'
 import { getChainNameByPrefix } from '@/utils/chain'
 import { useFiatStore } from '@/stores/fiat'
+import { truncateStr } from '@/utils/filters'
 
 const BasicImage = defineAsyncComponent(
  () => import('@/components/shared/view/BasicImage.vue')

components/profile/ProfileDetail.vue

@@ -62,10 +62,13 @@
 
  <div class="divider" />
  <NeoButton
- v-clipboard:copy="id"
  variant="text"
  :label="$t('share.copyAddress')"
  no-shadow
+ @click.native="
+ toast(`${$i18n.t('general.copyToClipboard')}`)
+ copy(id)
+ " />
  @click="toast(`${$i18n.t('general.copyToClipboard')}`)" />
  <div class="divider" />
  <NeoButton
@@ -165,6 +168,8 @@ const { toast } = useToast()
 const { replaceUrl } = useReplaceUrl()
 const { accountId } = useAuth()
 const { urlPrefix } = usePrefix()
+const { copy } = useClipboard()
+
 const tabs = ['owned', 'created', 'collections', 'activity']
 
 const switchToTab = (tab: string) => {

components/transfer/Transfer.vue

@@ -29,8 +29,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="generatePaymentLink(accountId)"
- @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+ @click="
+ toast(`${$i18n.t('toast.urlCopy')}`)
+ copy(generatePaymentLink(accountId))
+ ">
  <NeoIcon icon="sack-dollar" pack="fa" class="mr-2" />{{
  $t('transfers.payMeLink')
  }}
@@ -54,9 +56,11 @@
  <Identity :address="accountId" hide-identity-popover />
  </span>
  <a
- v-clipboard:copy="accountId"
  class="ml-2"
- @click="toast(`${$i18n.t('general.copyToClipboard')}`)">
+ @click="
+ toast(`${$i18n.t('general.copyToClipboard')}`)
+ copy(accountId)
+ ">
  <NeoIcon icon="copy" />
  </a>
  </div>
@@ -295,6 +299,8 @@ watch(isLoading, (newValue, oldValue) => {
  }
 })
 
+const { copy } = useClipboard({ source: accountId })
+
 export type TargetAddress = {
  address: string
  usd?: number | string

nuxt.config.js

@@ -162,21 +162,19 @@ export default defineNuxtConfig({
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  { src: '~/plugins/polkadot', mode: 'client' },
- // { src: '~/plugins/endpoint', mode: 'client' },
- // { src: '~/plugins/seoMetaGenerator', mode: 'client' },
- // { src: '~/plugins/keyboardEvents', mode: 'client' },
- // { src: '~/plugins/consola', mode: 'client' },
- // { src: '~/plugins/piniaPersistedState', mode: 'client' },
- // { src: '~/plugins/oruga-modal', mode: 'client' },
- // { src: '~/plugins/oruga-notification', mode: 'client' },
- // '~/plugins/filters',
- // '~/plugins/globalVariables',
- // '~/plugins/pwa',
- // '~/plugins/vueAudioVisual',
- // '~/plugins/vueClipboard',
- // '~/plugins/vueSocialSharing',
- // '~/plugins/vueTippy',
- // '~/plugins/safeHref',
+ { src: '~/plugins/endpoint', mode: 'client' },
+ { src: '~/plugins/seoMetaGenerator', mode: 'client' },
+ { src: '~/plugins/keyboardEvents.client', mode: 'client' },
+ { src: '~/plugins/consola', mode: 'client' },
+ { src: '~/plugins/piniaPersistedState', mode: 'client' },
+ { src: '~/plugins/oruga-modal', mode: 'client' },
+ { src: '~/plugins/oruga-notification', mode: 'client' },
+ '~/plugins/globalVariables',
+ '~/plugins/pwa',
+ '~/plugins/vueAudioVisual',
+ '~/plugins/vueSocialSharing',
+ '~/plugins/vueTippy',
+ '~/plugins/safeHref',
  ],
 
  router: {

plugins/icons.ts → plugins/icons.client.ts

@@ -1,4 +1,3 @@
-// import Vue from 'vue'
 import { Neo } from '@kodadot1/brick'
 
 import { config, library } from '@fortawesome/fontawesome-svg-core'
@@ -244,9 +243,6 @@ library.add(
  faX
 )
 
-// nuxt will handle css
-config.autoAddCss = false
-
 export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon).use(Neo, {
  iconComponent: 'font-awesome-icon',
@@ -261,4 +257,5 @@ export default defineNuxtPlugin((nuxtApp) => {
  // },
  // },
  })
-})
+}
+)

plugins/keyboardEvents.ts → plugins/keyboardEvents.client.ts

@@ -91,10 +91,6 @@ const listenGlobalKeyboardEvents = (app) => {
  })
 }
 
-// export default ({ app }): void => {
-// listenGlobalKeyboardEvents(app)
-// }
-
 export default defineNuxtPlugin(({ vueApp }) =>
  listenGlobalKeyboardEvents(vueApp)
 )

plugins/vueTippy.ts

@@ -1,19 +1,27 @@
-// import Vue from 'vue'
-// import VueTippy, { TippyComponent, tippy } from 'vue-tippy'
+import VueTippy, { TippyComponent, tippy } from 'vue-tippy'
 
-// let activeTippyInstance
-// window.addEventListener('scroll', () => {
-// if (activeTippyInstance && activeTippyInstance.state.isVisible) {
-// activeTippyInstance.hide()
-// activeTippyInstance.reference.blur()
-// }
-// })
-// tippy.setDefaults({
-// onShow(instance) {
-// activeTippyInstance = instance
-// },
-// })
+let activeTippyInstance
+window.addEventListener('scroll', () => {
+ if (activeTippyInstance && activeTippyInstance.state.isVisible) {
+ activeTippyInstance.hide()
+ activeTippyInstance.reference.blur()
+ }
+})
 
-// Vue.use(VueTippy)
-// Vue.component('VTippy', TippyComponent)
-export default defineNuxtPlugin(() => undefined)
+tippy.setDefaults({
+ onShow(instance) {
+ activeTippyInstance = instance
+ },
+})
+
+export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.vueApp.use(VueTippy, {
+ directive: 'tippy',
+ component: 'v-tippy',
+ defaultProps: {
+ placement: 'auto-end',
+ allowHTML: true,
+ },
+ })
+ nuxtApp.vueApp.component('VTippy', TippyComponent)
+})