@instadapp/avocado-base 0.0.0-dev.f24809a → 0.0.0-dev.f307ae7

package/components/metadata/CrossTransfer.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const props = defineProps<{
+  metadata: any
+  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,
+    tokens,
+  )
+})
+
+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, toToken?.value?.decimals).toFixed(),
+  ),
+)
+</script>
+
+<template>
+  <div v-if="!fromToken" class="h-[60px]">
+    <div class="rounded-5 w-24 h-4 loading-box" />
+  </div>
+  <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">
+        {{ formattedToAmount }}
+        <span class="uppercase">{{ fromToken?.symbol }}</span>
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2.5">
+      <span class="flex items-center gap-2.5">
+        <ChainLogo class="w-5" :chain="chain_id" />
+        <span>{{ chainIdToName(chain_id) }}</span>
+      </span>
+
+      <SvgoArrowRight class="w-4 h-4 text-slate-400" />
+
+      <span class="flex items-center gap-2.5">
+        <ChainLogo class="w-5" :chain="metadata?.toChainId" />
+        <Address
+          :address="metadata.receiver" :to="getExplorerUrl(
+            metadata?.toChainId,
+            `/address/${metadata.receiver}`,
+          )"
+        />
+        on
+        <span>{{ chainIdToName(metadata?.toChainId) }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/metadata/GasTopup.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  metadata: any
+  chain_id: number | string
+}>()
+
+const tokens = inject<ITokenPrice[]>('tokens')
+
+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 formattedAmount = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed(),
+  ),
+)
+</script>
+
+<template>
+  <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
+  <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">
+      {{ formattedAmount }}
+      <span class="uppercase">{{ token?.symbol }}</span>
+      <SvgoGas class="w-4 h-4 text-slate-400 mx-2" />
+      <span>{{ shortenHash(metadata.onBehalf) }}</span>
+    </span>
+  </div>
+</template>

package/components/metadata/Permit2.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  metadata: any
+  chain_id: number | string
+}>()
+
+const tokens = inject<ITokenPrice[]>('tokens')
+
+const token = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
+  return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
+},
+)
+
+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">
+    <span class="capitalize">{{ token?.symbol }}</span>
+    to
+    <NuxtLink
+      class="text-primary"
+      :href="
+        getExplorerUrl(chain_id, `/address/${metadata.spender}`)
+      "
+      target="_blank"
+      external
+    >
+      {{ shortenHash(metadata.spender) }}
+    </NuxtLink>
+    |
+    <span> Expiration date at {{ calculateDate(metadata?.expiration) }}</span>
+  </div>
+</template>

package/components/metadata/Signers.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  chain_id: number | string
+  metadata: {
+    type: MetadataTypes
+    [key: string]: any
+  }
+  compact?: boolean
+}>()
+</script>
+
+<template>
+  <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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = defineProps<{
+  metadata: any
+  chain_id: number | string
+}>()
+
+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 sellAmountFormatted = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.sellAmount, sellToken?.value?.decimals).toFixed(),
+  ),
+)
+
+const buyAmountFormatted = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.buyAmount, buyToken?.value?.decimals).toFixed(),
+  ),
+)
+
+function formatProtocol(protocol: string) {
+  return (
+    new Map([
+      ['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 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>
+    </span>
+  </div>
+</template>

package/components/metadata/Transfer.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = defineProps<{
+  metadata: any
+  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,
+    tokens,
+  )
+})
+
+const formattedAmount = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed(),
+    3,
+  ),
+)
+</script>
+
+<template>
+  <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
+  <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">
+      <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>

package/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}