@instadapp/avocado-base 0.0.0-dev.d8050bd → 0.0.0-dev.dcb4af3

package/app.vue

@@ -2,7 +2,7 @@
   <div class="container mx-auto">
     Networks:
     <ul class="grid grid-cols-5 gap-5">
-      <li class="w-fit" v-for="network in networks">
+      <li v-for="network in networks" :key="network.chainId" class="w-fit">
         <p>
           {{ network.name }}
         </p>
@@ -17,11 +17,11 @@
     </ul>
 
     <ul class="grid grid-cols-5 gap-5 mt-20">
-      <li v-for="item in MetadataEnums">
-      {{ item }}
-      <ActionLogo class="w-10 h-10" :action="item"/>
+      <li v-for="item in MetadataEnums" :key="item">
+        {{ item }}
+        <ActionLogo class="w-10 h-10" :action="item" />
       </li>
     </ul>
   </div>
-  <ul></ul>
+  <ul />
 </template>

package/assets/images/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1L5.375 10L1 5.90909" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/icons/copy.svg

@@ -1,5 +1,12 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
     xmlns="http://www.w3.org/2000/svg">
-    <path class="copy-path" d="M14.1145 9.94827C14.1816 8.8779 14.2168 7.76883 14.2168 6.63246C14.2168 6.17207 14.211 5.71616 14.1997 5.26549C14.1917 4.94654 14.0882 4.63658 13.8994 4.37941C13.185 3.40646 12.6153 2.80088 11.6777 2.07698C11.4181 1.87657 11.0995 1.76786 10.7717 1.76072C10.4455 1.75361 10.105 1.75 9.74121 1.75C8.63995 1.75 7.75104 1.78308 6.8319 1.84613C6.04346 1.90021 5.41726 2.5279 5.36787 3.31665C5.30084 4.38702 5.26562 5.49608 5.26562 6.63246C5.26562 7.76883 5.30085 8.8779 5.36787 9.94827C5.41726 10.737 6.04346 11.3647 6.8319 11.4188C7.75104 11.4818 8.63995 11.5149 9.74121 11.5149C10.8425 11.5149 11.7314 11.4818 12.6505 11.4188C13.439 11.3647 14.0652 10.737 14.1145 9.94827Z" stroke="#94A3B8" stroke-width="2"/>
-    <path class="copy-path" d="M10.6341 12.6834C10.7011 11.613 10.7363 10.5039 10.7363 9.36756C10.7363 8.90717 10.7306 8.45126 10.7192 8.00059C10.7112 7.68165 10.6078 7.37169 10.4189 7.11452C9.70458 6.14157 9.13488 5.53599 8.19725 4.81209C7.93767 4.61167 7.61907 4.50297 7.29121 4.49582C6.96506 4.48872 6.62448 4.48511 6.26074 4.48511C5.15949 4.48511 4.27057 4.51819 3.35143 4.58123C2.56299 4.63531 1.9368 5.26301 1.88741 6.05176C1.82038 7.12213 1.78516 8.23119 1.78516 9.36756C1.78516 10.5039 1.82038 11.613 1.88741 12.6834C1.9368 13.4721 2.56299 14.0998 3.35143 14.1539C4.27057 14.2169 5.15949 14.25 6.26074 14.25C7.362 14.25 8.25091 14.2169 9.17005 14.1539C9.95849 14.0998 10.5847 13.4721 10.6341 12.6834Z" stroke="#94A3B8" stroke-width="2"/>
+    <g clip-path="url(#clip0_854_51869)">
+        <path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M3.33301 10.0002H2.66634C2.31272 10.0002 1.97358 9.85969 1.72353 9.60964C1.47348 9.35959 1.33301 9.02045 1.33301 8.66683V2.66683C1.33301 2.31321 1.47348 1.97407 1.72353 1.72402C1.97358 1.47397 2.31272 1.3335 2.66634 1.3335H8.66634C9.01996 1.3335 9.3591 1.47397 9.60915 1.72402C9.8592 1.97407 9.99967 2.31321 9.99967 2.66683V3.3335" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_854_51869">
+            <rect width="16" height="16" fill="white"/>
+        </clipPath>
+    </defs>
 </svg>

package/assets/images/icons/stars.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3112 1.14526L12.8087 5.19216L16.8556 6.68965L12.8087 8.18714L11.3112 12.234L9.8137 8.18714L5.76681 6.68965L9.8137 5.19216L11.3112 1.14526Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.38071 10.3859L5.68884 12.312L7.61493 13.6201L5.68884 14.9283L4.38071 16.8544L3.07258 14.9283L1.14648 13.6201L3.07258 12.312L4.38071 10.3859Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/ActionLogo.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import RefreshSVG from '~/assets/images/icons/refresh.svg'
-import BridgeSVG from '~/assets/images/icons/bridge.svg'
-import CrossTransferSVG from '~/assets/images/icons/cross-transfer.svg'
-import TransferSVG from '~/assets/images/icons/transfer.svg'
-import PlusCircleSVG from '~/assets/images/icons/plus-circle.svg'
-import Trash2SVG from '~/assets/images/icons/trash-2.svg'
-import ChangeThresholdSVG from '~/assets/images/icons/change-threshold.svg'
-import DappSVG from '~/assets/images/icons/dapp.svg'
-import DeploySVG from '~/assets/images/icons/deploy.svg'
-import GasSVG from '~/assets/images/icons/gas.svg'
-import InstadappProSVG from '~/assets/images/icons/instadapp-pro.svg'
-import PermitSignSVG from '~/assets/images/icons/permit-sign.svg'
-import RejectProposalSVG from '~/assets/images/icons/reject-proposal.svg'
-import UpgradeSVG from '~/assets/images/icons/upgrade.svg'
-import HammerSVG from '~/assets/images/icons/hammer.svg'
+import BridgeSVG from '../assets/images/icons/bridge.svg'
+import ChangeThresholdSVG from '../assets/images/icons/change-threshold.svg'
+import CrossTransferSVG from '../assets/images/icons/cross-transfer.svg'
+import DappSVG from '../assets/images/icons/dapp.svg'
+import DeploySVG from '../assets/images/icons/deploy.svg'
+import GasSVG from '../assets/images/icons/gas.svg'
+import HammerSVG from '../assets/images/icons/hammer.svg'
+import InstadappProSVG from '../assets/images/icons/instadapp-pro.svg'
+import PermitSignSVG from '../assets/images/icons/permit-sign.svg'
+import PlusCircleSVG from '../assets/images/icons/plus-circle.svg'
+import RefreshSVG from '../assets/images/icons/refresh.svg'
+import RejectProposalSVG from '../assets/images/icons/reject-proposal.svg'
+import StarsSVG from '../assets/images/icons/stars.svg'
+import TransferSVG from '../assets/images/icons/transfer.svg'
+import Trash2SVG from '../assets/images/icons/trash-2.svg'
+import UpgradeSVG from '../assets/images/icons/upgrade.svg'
 
 defineProps<{
   action: MetadataTypes
@@ -22,19 +23,20 @@ defineProps<{
 </script>
 
 <template>
-    <RefreshSVG class="text-primary" v-if="action === 'swap'"/>
-    <BridgeSVG class="text-primary" v-else-if="action === 'bridge'"/>
-    <CrossTransferSVG class="text-primary" v-else-if="action === 'cross-transfer'"/>
-    <TransferSVG class="text-primary" v-else-if="action === 'transfer'"/>
-    <PlusCircleSVG class="text-primary" v-else-if="action === 'add-signers' || (action === 'auth' && !remove)"/>
-    <Trash2SVG class="text-[#EB5757]" v-else-if="action === 'remove-signers' || (action === 'auth' && remove)"/>
-    <RejectProposalSVG class="text-[#EB5757]" v-else-if="action === 'rejection'"/>
-    <ChangeThresholdSVG v-else-if="action === 'change-threshold'"/>
-    <DappSVG v-else-if="action === 'dapp'"/>
-    <DeploySVG v-else-if="action === 'deploy'"/>
-    <GasSVG v-else-if="action === 'gas-topup'"/>
-    <InstadappProSVG v-else-if="action === 'instadapp-pro'"/>
-    <PermitSignSVG v-else-if="action === 'permit2'"/>
-    <UpgradeSVG v-else-if="action === 'upgrade'"/>
-    <HammerSVG v-else-if="action === 'tx-builder'"/>
-</template>
+  <RefreshSVG v-if="action === 'swap'" class="text-primary" />
+  <BridgeSVG v-else-if="action === 'bridge'" class="text-primary" />
+  <CrossTransferSVG v-else-if="action === 'cross-transfer'" class="text-primary" />
+  <TransferSVG v-else-if="action === 'transfer'" class="text-primary" />
+  <PlusCircleSVG v-else-if="action === 'add-signers' || (action === 'auth' && !remove)" class="text-primary" />
+  <Trash2SVG v-else-if="action === 'remove-signers' || (action === 'auth' && remove)" class="text-[#EB5757]" />
+  <RejectProposalSVG v-else-if="action === 'rejection'" class="text-[#EB5757]" />
+  <ChangeThresholdSVG v-else-if="action === 'change-threshold'" />
+  <DappSVG v-else-if="action === 'dapp'" />
+  <DeploySVG v-else-if="action === 'deploy'" />
+  <GasSVG v-else-if="action === 'gas-topup'" />
+  <InstadappProSVG v-else-if="action === 'instadapp-pro'" />
+  <PermitSignSVG v-else-if="action === 'permit2'" />
+  <UpgradeSVG v-else-if="action === 'upgrade'" />
+  <HammerSVG v-else-if="action === 'tx-builder'" />
+  <StarsSVG v-else-if="action === 'mass'" />
+</template>

package/components/ActionMetadata.vue

@@ -3,15 +3,14 @@ const props = defineProps<{
   metadata: {
     type: MetadataTypes
     [key: string]: any
-  };
-  chain_id: number | string;
-  compact?: boolean;
-  tokens?: ITokenPrice[];
-}>();
-
-provide('compact', props.compact);
-provide('tokens', props.tokens);
+  }
+  chain_id: number | string
+  compact?: boolean
+  tokens?: ITokenPrice[]
+}>()
 
+provide('compact', props.compact)
+provide('tokens', props.tokens)
 </script>
 
 <template>
@@ -20,10 +19,14 @@ provide('tokens', props.tokens);
     <MetadataCrossTransfer v-if="metadata.type === 'cross-transfer'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataGasTopup v-if="metadata.type === 'gas-topup'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataSwap v-if="metadata.type === 'swap'" :metadata="metadata" :chain_id="chain_id" />
-    <MetadataBridge v-if="metadata.type === 'bridge'" :metadata="metadata" :chain_id="chain_id" />
+    <MetadataBridge v-if="metadata.type === 'bridge' || metadata.type === 'bridge-v2'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataPermit2 v-if="metadata.type === 'permit2'" :metadata="metadata" :chain_id="chain_id" />
 
-    <div class="text-left w-fit capitalize" v-if="metadata.type === 'import'">
+    <div v-if="metadata.type === 'mass'">
+      Chain Agnostic Payments
+    </div>
+
+    <div v-if="metadata.type === 'import'" class="text-left w-fit capitalize">
       Import from {{ metadata.protocol }} ({{ (formatUsd(fromWei(metadata.valueInUsd, 10))) }})
     </div>
 
@@ -41,8 +44,10 @@ provide('tokens', props.tokens);
     </div>
     <div v-if="metadata.type === 'auth'" class="self-start capitalize flex gap-3">
       Authority {{ metadata.remove ? 'Removed' : 'Added' }}:
-      <a class="text-primary break-all" :href="getExplorerUrl(metadata.chainId, `/address/${metadata.address}`)"
-        target="_blank">
+      <a
+        class="text-primary break-all" :href="getExplorerUrl(metadata.chainId, `/address/${metadata.address}`)"
+        target="_blank"
+      >
         {{ shortenHash(metadata.address) }}
       </a>
       <div class="flex gap-3">
@@ -60,19 +65,24 @@ provide('tokens', props.tokens);
       {{ metadata?.castDetails }}
     </div>
 
-    <MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata"
-      :compact="compact" />
+    <MetadataSigners
+      v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'"
+      :chain_id="chain_id" :metadata="metadata"
+      :compact="compact"
+    />
 
     <div v-if="metadata.type === 'change-threshold'" class="text-left w-fit">
       Change Threshold to {{ metadata.count }}
     </div>
 
-    <div v-tippy="{
-      content: metadata.id,
-      maxWidth: 'none',
-      interactive: true,
-    }" v-if="metadata.type === 'rejection'" class="text-left w-fit">
+    <div
+      v-if="metadata.type === 'rejection'" v-tippy="{
+        content: metadata.id,
+        maxWidth: 'none',
+        interactive: true,
+      }" class="text-left w-fit"
+    >
       {{ shortenHash(metadata.id) }}
     </div>
   </div>
-</template>
+</template>

package/components/Address.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Address } from 'viem'
+
+const props = defineProps<{
+  address: Address | string
+  hideContact?: boolean
+  hideCopy?: boolean
+  showFull?: boolean
+  to?: string
+}>()
+
+const nuxtApp = useNuxtApp()
+
+console.log()
+
+// @ts-expect-error
+const contacts = computed(() => nuxtApp.$contacts?.value)
+
+const contactName = computed(() => {
+  if (!contacts?.value)
+    return null
+
+  return contacts.value.find(
+    // @ts-expect-error
+    contract => contract.address?.toLowerCase() === props.address.toLowerCase(),
+  )?.name
+})
+
+function onMouseEnter() {
+  const elements = document.querySelectorAll(`[data-highlight-target="${props.address}"]`)
+
+  elements.forEach((element) => {
+    element.classList.add('address-active')
+  })
+}
+
+function onMouseLeave() {
+  const elements = document.querySelectorAll(`[data-highlight-target="${props.address}"]`)
+
+  elements.forEach((element) => {
+    element.classList.remove('address-active')
+  })
+}
+
+const NuxtLink = resolveComponent('NuxtLink')
+</script>
+
+<template>
+  <div class="flex items-center leading-[1.3339em]">
+    <Component
+      :is="props.to ? NuxtLink : 'span'"
+      v-tippy="{ content: showFull ? undefined : address, maxWidth: 'none', placement: 'bottom' }"
+      :external="props.to ? true : undefined"
+      :target="props.to ? '_blank' : undefined"
+      :to="props.to ? props.to : undefined"
+      :class="props.to ? 'text-primary' : ''"
+      class="px-1 border border-dashed border-opacity-0 -ml-1 border-yellow-500" :data-highlight-target="address"
+      @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
+    >
+      {{ showFull ? address : shortenHash(address) }}
+    </Component>
+    <span v-if="contactName && !hideContact" class="leading-[inherit]">
+      ({{ contactName }})
+    </span>
+    <CopyClipboard v-if="!hideCopy" class="ml-1.5" :text="address" />
+  </div>
+</template>
+
+<style>
+.address-active {
+    @apply border-opacity-100 bg-yellow-500/10;
+    border-radius: 0.375rem;
+}
+</style>

package/components/AuthorityAvatar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import * as XXH from 'xxhashjs';
+// @ts-expect-error
+import * as XXH from 'xxhashjs'
 
 defineProps<{
   address: string
-}>();
+}>()
 
-const randomId = Math.random().toString(36).substr(2, 9);
+const randomId = Math.random().toString(36).substr(2, 9)
 
 function generateColor(address: string): string {
   const hash = XXH.h32(address, 0xABCD).toNumber()

package/components/ChainLogo.vue

@@ -1,29 +1,26 @@
-<template>
-  <template v-if="isNetworkNotAvailable">
-    <svg v-bind="$attrs" class="dark:hidden block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-      <rect width="20" height="20" fill="#CBD5E1" rx="10" />
-      <path fill="#fff" fill-rule="evenodd"
-        d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
-        clip-rule="evenodd" />
-    </svg>
-    <svg v-bind="$attrs" class="dark:block hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-      <rect width="20" height="20" fill="#334155" rx="10" />
-      <path fill="#97A2B7" fill-rule="evenodd"
-        d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
-        clip-rule="evenodd" />
-    </svg>
-  </template>
-  <span v-else-if="stroke" class="outline stroke-color dark:outline-[#161E2D] outline-[#F8FAFC]  outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full">
-    <img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`"/>
-  </span>
-   <img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`"/>
-</template>
-
 <script lang="ts" setup>
 const props = defineProps<{
-  chain?: ChainId | number | string;
-  stroke?: boolean;
-}>();
+  chain?: ChainId | number | string
+  stroke?: boolean
+}>()
 
-const isNetworkNotAvailable = computed(() => !networks.some((network) => String(network.chainId) === String(props.chain)))
+const isNetworkNotAvailable = computed(() => !networks.some(network => String(network.chainId) === String(props.chain)))
 </script>
+
+<template>
+  <svg v-if="isNetworkNotAvailable" v-bind="$attrs" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+    <rect width="20" height="20" fill="#334155" rx="10" />
+    <path
+      fill="#97A2B7" fill-rule="evenodd"
+      d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+  <span
+    v-else-if="stroke"
+    class="outline stroke-color outline-[#161E2D]  outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full"
+  >
+    <img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`">
+  </span>
+  <img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`">
+</template>

package/components/CopyClipboard.vue

@@ -1,56 +1,26 @@
 <script setup lang="ts">
-import CopySVG from '~/assets/images/icons/copy.svg'
-import CheckCircle from '~/assets/images/icons/check-circle.svg'
+import CheckSVG from '../assets/images/icons/check-circle.svg'
+import CopySVG from '../assets/images/icons/copy.svg'
 
 defineProps<{
   text: string
-  iconOnly?: boolean
-  successText?: string
 }>()
 const { copy, copied } = useClipboard()
-const slots = useSlots()
 </script>
 
 <template>
-  <button
-    class="text-slate-400 font-semibold inline-flex items-center gap-2.5"
-    @click.stop="copy(text)"
-  >
-    <Transition mode="out-in" name="slide-left">
-      <span v-if="copied && !iconOnly"> {{ successText || 'Copied' }}  </span>
-      <span v-else-if="slots.content">
-        <slot name="content" />
-      </span>
-    </Transition>
-
+  <button type="button" class="inline-flex copy-btn" @click.stop="copy(text)">
     <Transition mode="out-in" name="slide">
-      <CheckCircle
-        v-if="copied"
-        class="w-4 h-4 shrink-0 dark:text-slate-900 text-white svg-circle"
-      />
-      <slot v-else-if="slots.copy" name="copy" />
-      <slot v-else name="copy-icon">
-        <CopySVG />
-      </slot>
+      <CheckSVG v-if="copied" v-tippy="{ content: 'Copied!' }" class="svg-circle text-slate-850 size-[1em]" />
+      <CopySVG v-else v-tippy="{ content: 'Copy Address' }" class="text-slate-400 size-[1em]" />
     </Transition>
   </button>
 </template>
 
 <style scoped>
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: all 0.1s ease-out;
-}
-
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
+.copy-btn:focus:not(:focus-visible) {
+    outline: none;
+  }
 
 .slide-enter-active,
 .slide-leave-active {
@@ -61,4 +31,12 @@ const slots = useSlots()
 .slide-leave-to {
   opacity: 0;
 }
+
+  .svg-circle > path:first-child {
+    @apply stroke-gray-400 fill-gray-400;
+  }
+
+  .svg-circle.darker > path:first-child {
+    @apply fill-gray-700 stroke-none text-gray-500;
+  }
 </style>

package/components/metadata/Bridge.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const compact = inject('compact');
-const tokens = inject<ITokenPrice[]>('tokens');
+const compact = inject('compact')
+const tokens = inject<ITokenPrice[]>('tokens')
 
-const toToken = asyncComputed(() =>
-{
-   if (Array.isArray(tokens) && !tokens.length) return null;
-    return  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
-  }
-);
+const toToken = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
+  return fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
+},
+)
 
-const fromToken = asyncComputed(() =>
-{
-   if (Array.isArray(tokens) && !tokens.length) return null;
-    return  fetchTokenByAddress(props.metadata?.fromToken, props.chain_id, tokens)
-  }
-);
+const fromToken = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
+  return fetchTokenByAddress(props.metadata?.fromToken, props.chain_id, tokens)
+},
+)
 
 const isTokensSame = computed(() => {
   return toToken.value?.symbol === fromToken.value?.symbol
@@ -28,25 +27,25 @@ const isTokensSame = computed(() => {
 
 const bridgeAmountFormatted = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed(),
+  ),
+)
 </script>
 
 <template>
   <div v-if="!toToken || !fromToken" class="rounded-5 w-24 h-4 loading-box" />
   <div
-    class="flex gap-5 items-center"
     v-if="toToken && fromToken"
+    class="flex gap-5 items-center"
   >
     <span v-if="!compact" class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
     <span class="inline-flex gap-2.5 items-center">
-      <img width="20" height="20" class="w-5 h-5" :src="fromToken.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="fromToken.logo_url">
       {{ bridgeAmountFormatted }}
       <span class="uppercase">{{ fromToken?.symbol }}</span>
       <SvgoBridge class="text-slate-400 w-4 h-4" />
       <template v-if="!isTokensSame">
-        <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url" />
+        <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url">
         <span class="uppercase">{{ toToken?.symbol }}</span>
       </template>
       <span class="flex items-center gap-2.5">

package/components/metadata/CrossTransfer.vue

@@ -1,49 +1,52 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const compact = inject('compact');
-const tokens = inject<ITokenPrice[]>('tokens');
+const compact = inject('compact')
+const tokens = inject<ITokenPrice[]>('tokens')
 
 const fromToken = asyncComputed(() => {
-  if (!props?.chain_id) return null;
+  if (!props?.chain_id)
+    return null
 
-  if (Array.isArray(tokens) && !tokens.length) return null;
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
 
   return fetchTokenByAddress(
     props.metadata?.fromToken,
     props?.chain_id,
-    tokens
-  );
-});
+    tokens,
+  )
+})
 
 const toToken = asyncComputed(() => {
-  if (!props?.metadata?.toChainId) return null;
+  if (!props?.metadata?.toChainId)
+    return null
 
-  if (Array.isArray(tokens) && !tokens.length) return null;
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
 
-  return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens);
-});
+  return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens)
+})
 
 const formattedToAmount = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed(),
+  ),
+)
 </script>
 
 <template>
-  <div class="h-[60px]" v-if="!fromToken">
+  <div v-if="!fromToken" class="h-[60px]">
     <div class="rounded-5 w-24 h-4 loading-box" />
   </div>
-  <div class="flex gap-5 flex-col" v-else>
+  <div v-else class="flex gap-5 flex-col">
     <div class="flex items-center gap-5">
       <span v-if="!compact" class="capitalize text-xs sm:text-sm">Cross-chain send</span>
       <span class="inline-flex gap-2.5 items-center">
-        <img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url" />
+        <img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url">
         {{ formattedToAmount }}
         <span class="uppercase">{{ fromToken?.symbol }}</span>
       </span>
@@ -59,18 +62,12 @@ const formattedToAmount = computed(() =>
 
       <span class="flex items-center gap-2.5">
         <ChainLogo class="w-5" :chain="metadata?.toChainId" />
-
-        <a
-          target="_blank"
-          class="text-primary"
-          :href="
-            getExplorerUrl(
-              metadata?.toChainId,
-              `/address/${metadata.receiver}`
-            )
-          "
-          >{{ shortenHash(metadata.receiver) }}</a
-        >
+        <Address
+          :address="metadata.receiver" :to="getExplorerUrl(
+            metadata?.toChainId,
+            `/address/${metadata.receiver}`,
+          )"
+        />
         on
         <span>{{ chainIdToName(metadata?.toChainId) }}</span>
       </span>