@instadapp/avocado-base 0.0.0-dev.fd1507c → 0.0.0-dev.fd73c5f

package/components/metadata/Bridge.vue

@@ -5,30 +5,52 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
+
 const toToken = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId)
+{
+   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 isTokensSame = computed(() => {
+  return toToken.value?.symbol === fromToken.value?.symbol
+})
+
 const bridgeAmountFormatted = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
+    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
   )
 );
 </script>
 
 <template>
-  <div v-if="!toToken" class="rounded-5 w-24 h-4 loading-box" />
+  <div v-if="!toToken || !fromToken" class="rounded-5 w-24 h-4 loading-box" />
   <div
     class="flex gap-5 items-center"
-    v-if="metadata.type === 'bridge' && toToken"
+    v-if="toToken && fromToken"
   >
-    <span class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
+    <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="toToken.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="fromToken.logo_url" />
       {{ bridgeAmountFormatted }}
-      <span class="uppercase">{{ toToken?.symbol }}</span>
-      <SvgoBridge class="text-slate-400 w-5 h-5" />
+      <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" />
+        <span class="uppercase">{{ toToken?.symbol }}</span>
+      </template>
       <span class="flex items-center gap-2.5">
+        on
         <ChainLogo class="w-5" :chain="metadata.toChainId" />
         <span>{{ chainIdToName(metadata.toChainId) }}</span>
       </span>

package/components/metadata/CrossTransfer.vue

@@ -5,18 +5,32 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
+
 const fromToken = asyncComputed(() => {
   if (!props?.chain_id) return null;
 
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
   return fetchTokenByAddress(
     props.metadata?.fromToken,
-    props?.chain_id
+    props?.chain_id,
+    tokens
   );
 });
 
-const formattedFromAmount = computed(() =>
+const toToken = asyncComputed(() => {
+  if (!props?.metadata?.toChainId) return null;
+
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens);
+});
+
+const formattedToAmount = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
+    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
   )
 );
 </script>
@@ -27,10 +41,10 @@ const formattedFromAmount = computed(() =>
   </div>
   <div class="flex gap-5 flex-col" v-else>
     <div class="flex items-center gap-5">
-      <span class="capitalize text-xs sm:text-sm">Cross-chain send</span>
+      <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" />
-        {{ formattedFromAmount }}
+        {{ formattedToAmount }}
         <span class="uppercase">{{ fromToken?.symbol }}</span>
       </span>
     </div>

package/components/metadata/GasTopup.vue

@@ -5,10 +5,18 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const tokens = inject<ITokenPrice[]>('tokens');
+
 const token = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.token, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
+ }
 );
 
+const compact = inject('compact');
+
 const formattedAmount = computed(() =>
   formatDecimal(
     fromWei(props.metadata?.amount, token?.value?.decimals).toFixed()
@@ -19,7 +27,7 @@ const formattedAmount = computed(() =>
 <template>
   <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
   <div class="flex items-center gap-5" v-else>
-    <span class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
+    <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="token?.logo_url" />
       {{ formattedAmount }}

package/components/metadata/Permit2.vue

@@ -5,8 +5,13 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const tokens = inject<ITokenPrice[]>('tokens');
+
 const token = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.token, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+  return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
+}
 );
 
 const calculateDate = (timestamp: number) => {

package/components/metadata/Signers.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { Tippy } from 'vue-tippy'
+import Info2 from '~/assets/images/icons/info-2.svg'
+
+defineProps<{
+  metadata: {
+    type: MetadataTypes,
+    [key: string]: any
+  };
+  compact?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="font-medium">
+    <div v-if="!compact || metadata.addresses.length < 3" class="flex gap-[14px] flex-wrap items-end">
+        <p v-if="!compact" class="text-xs"> {{ formatTxType(metadata.type) }} </p>
+        <div v-for="address of metadata.addresses" :key="address" class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
+          <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
+          <Tippy max-width="none" interactive>
+            <template #default>
+              <p class="text-xs leading-5 text-slate-500 dark:text-slate-400">
+              {{ shortenHash(address, compact ? 2 : 4) }}
+            </p>
+            </template>
+            <template #content>
+            {{ address }}
+            </template>
+         </Tippy>          
+        </div>
+    </div>
+    <div v-else class="flex gap-2 flex-wrap items-center">
+      <div v-for="address of [metadata.addresses[0], metadata.addresses[1]].filter(Boolean)" :key="address" class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
+        <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
+
+        <Tippy max-width="none" interactive>
+            <template #default>
+               <p class="text-xs leading-5 text-slate-400">
+                {{ shortenHash(address, 2) }}
+              </p>
+            </template>
+            <template #content>
+            {{ address }}
+            </template>
+         </Tippy>      
+      </div>
+      
+      <Tippy max-width="none" interactive tag="button" content-tag="div" content-class="content-wrapper">
+        <template #default>
+          <Info2 class="w-[16px] h-[16px] text-slate-500 rounded-full" />
+        </template>
+        <template #content>
+          <ul class="flex flex-col gap-2.5">
+            <li v-for="address in metadata.addresses" :key="address" class="flex text-xs text-slate-400 items-center gap-2.5">
+              <AuthorityAvatar class="shrink-0 w-5 h-5" :address="address" />
+              {{ address }}
+            </li>
+          </ul>
+        </template>
+      </Tippy>
+    </div>
+  </div>
+</template>

package/components/metadata/Swap.vue

@@ -5,12 +5,20 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
 
 const buyToken = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+    return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens) 
+  }
 );
 const sellToken = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+  return  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
+  }
 );
 
 const sellAmountFormatted = computed(() =>
@@ -45,7 +53,7 @@ const formatProtocol = (protocol: string) => {
       class="flex items-center gap-5"
         v-else
     >
-      <span class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
+      <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" />
         {{ sellAmountFormatted }}
@@ -56,7 +64,7 @@ const formatProtocol = (protocol: string) => {
         <span class="uppercase">{{ buyToken?.symbol }}</span>
         <span
           class="capitalize hidden sm:flex items-center gap-2.5"
-          v-if="metadata.protocol"
+          v-if="metadata.protocol && !compact"
         >
           On <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
           {{ formatProtocol(metadata.protocol) }}

package/components/metadata/Transfer.vue

@@ -5,13 +5,18 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
 
 const token = asyncComputed(() => {
   if (!props?.chain_id) return null;
 
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
   return fetchTokenByAddress(
     props.metadata?.token,
-    props?.chain_id
+    props?.chain_id,
+    tokens
   );
 });
 
@@ -25,19 +30,21 @@ const formattedAmount = computed(() =>
 <template>
   <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
   <div class="flex items-center gap-5" v-else>
-    <span class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
+    <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="token?.logo_url" />
       {{ 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" />
-      <a
+      <NuxtLink
         class="text-primary"
-        :href="
+        target="_blank"
+        external
+        :to="
           getExplorerUrl(chain_id, `/address/${metadata.receiver}`)
         "
-        >{{ shortenHash(metadata.receiver) }}</a
-      >
+        >{{ shortenHash(metadata.receiver) }}
+        </NuxtLink>
     </span>
   </div>
 </template>