@instadapp/avocado-base 0.0.0-dev.a80e59d → 0.0.0-dev.aeaa72b

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,42 +1,53 @@
 <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 (Array.isArray(tokens) && !tokens.length)
+    return null
 
-const formattedFromAmount = computed(() =>
+  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>
 
 <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" />
-        {{ formattedFromAmount }}
+        <img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url">
+        {{ formattedToAmount }}
         <span class="uppercase">{{ fromToken?.symbol }}</span>
       </span>
     </div>
@@ -51,18 +62,12 @@ const formattedFromAmount = 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>

package/components/metadata/GasTopup.vue

@@ -1,35 +1,34 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const tokens = inject<ITokenPrice[]>('tokens');
+const tokens = inject<ITokenPrice[]>('tokens')
 
-const token = asyncComputed(() =>
-{
-  if (Array.isArray(tokens) && !tokens.length) return null;
+const token = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
 
   return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
- }
-);
+},
+)
 
-const compact = inject('compact');
+const compact = inject('compact')
 
 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">
-      <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url">
       {{ formattedAmount }}
       <span class="uppercase">{{ token?.symbol }}</span>
       <SvgoGas class="w-4 h-4 text-slate-400 mx-2" />

package/components/metadata/Permit2.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const tokens = inject<ITokenPrice[]>('tokens');
+const tokens = inject<ITokenPrice[]>('tokens')
 
-const token = asyncComputed(() =>
-{
-  if (Array.isArray(tokens) && !tokens.length) return null;
+const token = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
   return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
-}
-);
+},
+)
 
-const calculateDate = (timestamp: number) => {
-  return new Date(timestamp * 1000).toLocaleString();
-};
+function calculateDate(timestamp: number) {
+  return new Date(timestamp * 1000).toLocaleString()
+}
 </script>
 
 <template>
   <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
   <div v-else class="inline-flex items-center gap-2 flex-wrap">
     <span>Permit2 Allowance: </span>
-    <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url" />
+    <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url">
     <span class="capitalize">{{ token?.symbol }}</span>
     to
     <NuxtLink

package/components/metadata/Signers.vue

@@ -1,45 +1,19 @@
 <script setup lang="ts">
-import { Tippy } from 'vue-tippy'
-const props = defineProps<{
+defineProps<{
+  chain_id: number | string
   metadata: {
-    type: MetadataTypes,
+    type: MetadataTypes
     [key: string]: any
-  };
-  compact?: boolean;
-}>();
+  }
+  compact?: boolean
+}>()
 </script>
 
 <template>
-  <div>
-    <div v-if="!compact || metadata.addresses.length < 3" class="flex gap-[14px] flex-wrap">
-        <div v-for="address of metadata.addresses" :key="address" class="flex gap-[8px] rounded-full bg-slate-50 dark:bg-gray-850 justify-start items-center px-[8px] py-[6px]">
-          <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
-          <p class="text-xs leading-5">
-            {{ shortenHash(address, compact ? 2 : 4) }}
-          </p>
-        </div>
-    </div>
-    <div v-else class="flex gap-2 flex-wrap items-center">
-      <div v-for="address of [metadata.addresses[0], metadata.addresses[1]]" :key="address" class="flex gap-[8px] rounded-full bg-slate-50 dark:bg-gray-850 justify-start items-center px-[8px] py-[6px]">
-        <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
-        <p class="text-xs leading-5">
-          {{ shortenHash(address, 2) }}
-        </p>
-      </div>
-      ...
-      <Tippy max-width="none" interactive tag="button" content-tag="div" content-class="content-wrapper">
-        <template #default>
-          <SvgoInfo2 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 items-center gap-2.5">
-              <AuthorityAvatar class="shrink-0 w-5 h-5" :address="address" />
-              {{ address }}
-            </li>
-          </ul>
-        </template>
-      </Tippy>
-    </div>
-  </div>
+  <ul class="flex gap-2 flex-wrap">
+    <li v-for="address in metadata.addresses" :key="address" class="flex rounded-2xl gap-2 bg-gray-900 w-fit items-center py-1.5 px-2.5">
+      <AuthorityAvatar class="size-5" :address="address" />
+      <Address :address="address" />
+    </li>
+  </ul>
 </template>

package/components/metadata/Swap.vue

@@ -1,74 +1,66 @@
 <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;
-    return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens) 
-  }
-);
-const sellToken = asyncComputed(() =>
-{
-  if (Array.isArray(tokens) && !tokens.length) return null;
-  return  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
-  }
-);
+const buyToken = asyncComputed(() => {
+  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
+  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
-    >
-      <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 }}
-        <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" />
-        {{ buyAmountFormatted }}
-        <span class="uppercase">{{ buyToken?.symbol }}</span>
-        <span
-          class="capitalize hidden sm:flex items-center gap-2.5"
-          v-if="metadata.protocol && !compact"
-        >
-          On <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
-          {{ formatProtocol(metadata.protocol) }}
-        </span>
+  <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">
+      {{ 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">
+      ~ {{ buyAmountFormatted }}
+      <span class="uppercase">{{ buyToken?.symbol }}</span>
+      <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) }}
       </span>
-    </div>
+    </span>
+  </div>
 </template>

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>