@instadapp/avocado-base 0.0.0-dev.c8c43bc → 0.0.0-dev.cfde212

package/components/ActionMetadata.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+
+const props = defineProps<{
+  metadata: {
+    type: MetadataTypes
+    [key: string]: any
+  };
+  chain_id: number | string;
+  compact?: boolean;
+}>();
+
+provide('compact', props.compact);
+
+</script>
+
+<template>
+  <div>
+    <MetadataTransfer v-if="metadata.type === 'transfer'" :metadata="metadata" :chain_id="chain_id" />
+    <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" />
+    <MetadataPermit2 v-if="metadata.type === 'permit2'" :metadata="metadata" :chain_id="chain_id" />
+
+    <div v-if="metadata.type === 'upgrade'" class="self-start">
+      Wallet upgraded to {{ metadata?.version }}
+    </div>
+    <div v-if="metadata.type === 'dapp'" class="self-start flex items-center gap-2 text-primary">
+      <a :href="metadata?.url" target="_blank" rel="noopener noreferrer">{{
+        metadata?.name
+      }}</a>
+      <SvgoExternalLink />
+    </div>
+    <div v-if="metadata.type === 'deploy'" class="self-start capitalize">
+      {{ metadata?.type }}
+    </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"
+          >
+          {{ shortenHash(metadata.address) }}
+        </a>
+        <div class="flex gap-3">
+           <ChainLogo class="w-5 h-5" :chain="metadata.chainId"/>
+            {{ chainIdToName(metadata.chainId) }}
+        </div>
+    </div>
+    <div v-if="metadata.type === 'instadapp-pro'" class="self-start capitalize flex gap-3">
+      Instadapp Pro |
+      {{ metadata?.castDetails }}
+    </div>
+
+    <div v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" class="text-left w-fit" v-tippy="formatMultipleAddresses(metadata.addresses, false)" >
+      {{ formatMultipleAddresses(metadata.addresses) }}
+    </div>
+
+     <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">
+     {{ shortenHash(metadata.id) }}
+    </div>
+  </div>
+</template>

package/components/ChainLogo.vue

@@ -380,6 +380,146 @@
     </defs>
   </svg>
 
+  <svg
+    v-else-if="chain == 1313161554"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="22"
+      rx="11"
+      :fill="generateID('aurora', true)"
+    />
+    <path
+      d="M11.9961 7.26624C12.4182 7.26624 12.8014 7.505 12.9902 7.88257L16.1114 14.1291C16.3835 14.6788 16.1614 15.3451 15.6116 15.6172C15.4561 15.6949 15.2894 15.7338 15.1173 15.7338H8.87486C8.26395 15.7338 7.76411 15.234 7.76411 14.6233C7.76411 14.4511 7.80299 14.279 7.88074 14.1291L11.0019 7.88257C11.1908 7.49944 11.574 7.26069 11.9961 7.26624ZM11.9961 6.5C11.2852 6.5 10.6354 6.89978 10.3188 7.53831L7.19763 13.7848C6.73667 14.7121 7.10877 15.8337 8.03624 16.3001C8.29727 16.4278 8.58607 16.5 8.87486 16.5H15.1228C16.1558 16.5 17 15.6616 17 14.6288C17 14.3401 16.9334 14.0514 16.8001 13.7904L13.6733 7.53831C13.3567 6.89978 12.707 6.5 11.9961 6.5Z"
+      fill="white"
+    />
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="22"
+      rx="11"
+      stroke="black"
+      stroke-width="2"
+      v-if="stroke"
+      :class="strokeClass"
+    />
+    <defs>
+      <linearGradient
+        :id="generateID('aurora')"
+        x1="12"
+        y1="2"
+        x2="12"
+        y2="22"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#8EEF6B" />
+        <stop offset="1" stop-color="#70D44B" />
+      </linearGradient>
+    </defs>
+  </svg>
+
+  <svg
+    v-else-if="chain == 250"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="22"
+      rx="11"
+      :fill="generateID('fantom', true)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.75 10.0625L15 8.75V11.375L12.75 10.0625ZM15 15.6875L12 17.4375L9 15.6875V12.625L12 14.375L15 12.625V15.6875ZM9 8.75L11.25 10.0625L9 11.375V8.75ZM12.375 10.6875L14.625 12L12.375 13.3125V10.6875ZM11.625 13.3125L9.375 12L11.625 10.6875V13.3125ZM14.625 8.125L12 9.625L9.375 8.125L12 6.5625L14.625 8.125ZM8.25 7.875V16.0625L12 18.1875L15.75 16.0625V7.875L12 5.75L8.25 7.875Z"
+      fill="white"
+    />
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="22"
+      rx="11"
+      stroke="black"
+      stroke-width="2"
+      v-if="stroke"
+      :class="strokeClass"
+    />
+    <defs>
+      <linearGradient
+        :id="generateID('fantom')"
+        x1="12"
+        y1="2"
+        x2="12"
+        y2="22"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#51D3FF" />
+        <stop offset="1" stop-color="#13B5EC" />
+      </linearGradient>
+    </defs>
+  </svg>
+
+  <svg
+    v-else-if="chain == 634 || chain == 63400"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="22"
+      rx="11"
+      :fill="generateID('avo', true)"
+    />
+    <path
+      d="M11.9999 17.4052C11.9999 17.7497 12.2787 18.0322 12.6197 17.997C15.6422 17.6854 18 15.1194 18 12C18 8.88061 15.6422 6.31462 12.6197 6.00299C12.2787 5.96765 11.9999 6.25038 11.9999 6.59486V8.25799C11.9999 8.60246 12.2806 8.87521 12.6167 8.94319C14.0353 9.2307 15.1035 10.4899 15.1035 12C15.1035 13.5101 14.0353 14.7693 12.6167 15.0569C12.2806 15.1248 11.9999 15.3978 11.9999 15.7421V17.4052ZM10.1378 7.12664C10.1378 6.70254 9.7247 6.4036 9.34642 6.59132C7.36369 7.57527 6 9.62756 6 12C6 14.3725 7.36369 16.4248 9.34642 17.4087C9.7247 17.5964 10.1378 17.2975 10.1378 16.8734V7.12685V7.12664Z"
+      fill="white"
+    />
+    <rect
+      x="1"
+      y="1"
+      width="22"
+      height="22"
+      rx="11"
+      stroke="black"
+      stroke-width="2"
+      v-if="stroke"
+      :class="strokeClass"
+    />
+    <defs>
+      <linearGradient
+        :id="generateID('avo')"
+        x1="12"
+        y1="2"
+        x2="12"
+        y2="22"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#6ED578" />
+        <stop offset="1" stop-color="#4CA054" />
+      </linearGradient>
+    </defs>
+  </svg>
+
   <template v-else>
     <svg
       v-bind="$attrs"
@@ -416,7 +556,7 @@
 
 <script lang="ts" setup>
 defineProps<{
-  chain: ChainId;
+  chain: ChainId | number | string;
   stroke?: boolean;
 }>();
 

package/components/metadata/Bridge.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const compact = inject('compact');
+
+const toToken = asyncComputed(() =>
+  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId)
+);
+
+const bridgeAmountFormatted = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
+  )
+);
+</script>
+
+<template>
+  <div v-if="!toToken" class="rounded-5 w-24 h-4 loading-box" />
+  <div
+    class="flex gap-5 items-center"
+    v-if="metadata.type === 'bridge' && toToken"
+  >
+    <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" />
+      {{ bridgeAmountFormatted }}
+      <span class="uppercase">{{ toToken?.symbol }}</span>
+      <SvgoBridge class="text-slate-400 w-4 h-4" />
+      <span class="flex items-center gap-2.5">
+        <ChainLogo class="w-5" :chain="metadata.toChainId" />
+        <span>{{ chainIdToName(metadata.toChainId) }}</span>
+      </span>
+    </span>
+  </div>
+</template>

package/components/metadata/CrossTransfer.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const compact = inject('compact');
+
+const fromToken = asyncComputed(() => {
+  if (!props?.chain_id) return null;
+
+  return fetchTokenByAddress(
+    props.metadata?.fromToken,
+    props?.chain_id
+  );
+});
+
+const formattedFromAmount = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
+  )
+);
+</script>
+
+<template>
+  <div class="h-[60px]" v-if="!fromToken">
+    <div class="rounded-5 w-24 h-4 loading-box" />
+  </div>
+  <div class="flex gap-5 flex-col" v-else>
+    <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 }}
+        <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" />
+
+        <a
+          target="_blank"
+          class="text-primary"
+          :href="
+            getExplorerUrl(
+              metadata?.toChainId,
+              `/address/${metadata.receiver}`
+            )
+          "
+          >{{ shortenHash(metadata.receiver) }}</a
+        >
+        on
+        <span>{{ chainIdToName(metadata?.toChainId) }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/metadata/GasTopup.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const token = asyncComputed(() =>
+  fetchTokenByAddress(props.metadata?.token, props?.chain_id)
+);
+
+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 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="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,37 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const token = asyncComputed(() =>
+  fetchTokenByAddress(props.metadata?.token, props?.chain_id)
+);
+
+const 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/Swap.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const compact = inject('compact');
+
+const buyToken = asyncComputed(() =>
+  fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id)
+);
+const sellToken = asyncComputed(() =>
+  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id)
+);
+
+const sellAmountFormatted = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.sellAmount, sellToken?.value?.decimals).toFixed()
+  )
+);
+
+const buyAmountFormatted = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.buyAmount, buyToken?.value?.decimals).toFixed()
+  )
+);
+
+const 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
+      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>
+      </span>
+    </div>
+</template>

package/components/metadata/Transfer.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const compact = inject('compact');
+
+const token = asyncComputed(() => {
+  if (!props?.chain_id) return null;
+
+  return fetchTokenByAddress(
+    props.metadata?.token,
+    props?.chain_id
+  );
+});
+
+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 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="token?.logo_url" />
+      {{ formattedAmount }}
+      <span class="uppercase">{{ token?.symbol }}</span>
+      <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>
+  </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']
+  }
+}