@instadapp/avocado-base 0.0.0-dev.424dd71 → 0.0.0-dev.4546ed9

package/components/metadata/Swap.vue

@@ -1,63 +1,62 @@
 <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 buyToken = asyncComputed(() => {
-  if (Array.isArray(tokens) && !tokens.length) return null;
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
   return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens)
-}
-);
+},
+)
 const sellToken = asyncComputed(() => {
-  if (Array.isArray(tokens) && !tokens.length) return null;
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
   return fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
-}
-);
+},
+)
 
 const sellAmountFormatted = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.sellAmount, sellToken?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.sellAmount, sellToken?.value?.decimals).toFixed(),
+  ),
+)
 
 const buyAmountFormatted = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.buyAmount, buyToken?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.buyAmount, buyToken?.value?.decimals).toFixed(),
+  ),
+)
 
-const formatProtocol = (protocol: string) => {
+function formatProtocol(protocol: string) {
   return (
     new Map([
-      ["1inch-v5", "1inch"],
-      ["0x-v1", "0x"],
-      ["paraswap-v5", "Paraswap"],
-      ["kyber-v1", "Kyber Network"],
+      ['1inch-v5', '1inch'],
+      ['0x-v1', '0x'],
+      ['paraswap-v5', 'Paraswap'],
+      ['kyber-v1', 'Kyber Network'],
     ]).get(protocol) || protocol
-  );
-};
-
-
+  )
+}
 </script>
 
 <template>
   <div v-if="!sellToken || !buyToken" class="rounded-5 w-24 h-4 loading-box" />
-  <div class="flex items-center gap-5" v-else>
+  <div v-else class="flex items-center gap-5">
     <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="sellToken?.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="sellToken?.logo_url">
       {{ sellAmountFormatted }}
       <span class="uppercase">{{ sellToken?.symbol }}</span>
       <SvgoRefresh class="w-4 h-4 text-slate-400 mx-2" />
-      <img width="20" height="20" class="w-5 h-5" :src="buyToken?.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="buyToken?.logo_url">
       ~ {{ buyAmountFormatted }}
       <span class="uppercase">{{ buyToken?.symbol }}</span>
-      <span class="capitalize hidden sm:flex items-center gap-2.5" v-if="metadata.protocol && !compact">
+      <span v-if="metadata.protocol && !compact" class="capitalize hidden sm:flex items-center gap-2.5">
         On
         <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
         {{ formatProtocol(metadata.protocol) }}

package/components/metadata/Transfer.vue

@@ -1,50 +1,48 @@
 <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 token = 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?.token,
     props?.chain_id,
-    tokens
-  );
-});
+    tokens,
+  )
+})
 
 const formattedAmount = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed(),
+  ),
+)
 </script>
 
 <template>
   <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
-  <div class="flex items-center gap-5" v-else>
+  <div v-else class="flex items-center gap-5">
     <span v-if="!compact" class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
     <span class="inline-flex gap-2.5 items-center">
-      {{ formattedAmount }}
-      <span class="uppercase">{{ token?.symbol }}</span>
-      <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url" />
-      <SvgoArrowRight class="w-4 h-4 text-slate-400 mx-2" />
-      <NuxtLink
-        class="text-primary"
-        target="_blank"
-        external
-        :to="
-          getExplorerUrl(chain_id, `/address/${metadata.receiver}`)
-        "
-        >{{ shortenHash(metadata.receiver) }}
-        </NuxtLink>
+      <span class="w-[8em]">
+        {{ formattedAmount }}
+        <span class="uppercase">{{ token?.symbol }}</span>
+      </span>
+      <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url">
+      <SvgoArrowRight class="w-4 h-4 text-slate-400" />
+      <Address
+        :to="getExplorerUrl(chain_id, `/address/${metadata.receiver}`)"
+        :address="metadata.receiver"
+      />
     </span>
   </div>
 </template>