@instadapp/avocado-base 0.0.31 → 0.0.32

package/components/ActionMetadata.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+
+defineProps<{
+  metadata: any;
+  chain_id: number | string;
+}>();
+
+</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 === 'add-authority' || metadata.type === 'remove-authority'" 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>
+</template>

package/components/ChainLogo.vue

@@ -556,7 +556,7 @@
 
 <script lang="ts" setup>
 defineProps<{
-  chain: ChainId;
+  chain: ChainId | number | string;
   stroke?: boolean;
 }>();
 

package/components/metadata/Bridge.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+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 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-5 h-5" />
+      <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,65 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+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 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>
+
+      <ArrowRight 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,31 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const token = asyncComputed(() =>
+  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 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,66 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+
+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 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"
+        >
+          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,43 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+
+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 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" />
+      <a
+        class="text-primary"
+        :href="
+          getExplorerUrl(chain_id, `/address/${metadata.receiver}`)
+        "
+        >{{ shortenHash(metadata.receiver) }}</a
+      >
+    </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']
+  }
+}

package/nuxt.config.ts

@@ -1,4 +1,20 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import ViteComponents from "unplugin-vue-components/vite";
+
 export default defineNuxtConfig({
-  modules: ["@nuxtjs/tailwindcss"],
+  modules: ["@nuxtjs/tailwindcss", "nuxt-svgo", "@vueuse/nuxt"],
+  svgo: {
+    defaultImport: "component",
+    autoImportPath: "./assets/images/icons",
+    svgoConfig: {
+      plugins: ["prefixIds"],
+    },
+  },
+  vite: {
+    plugins: [
+      ViteComponents({
+        dts: true,
+      }),
+    ],
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "type": "module",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",
@@ -16,11 +16,14 @@
     "@instadapp/avocado-dev": "npm:@instadapp/avocado@dev",
     "@nuxtjs/tailwindcss": "^6.6.5",
     "@typechain/ethers-v5": "^10.2.0",
-    "nuxt": "^3.3.3",
+    "nuxt": "^3.6.1",
+    "nuxt-svgo": "^3.1.0",
     "rimraf": "^3.0.2",
-    "typechain": "^8.1.1"
+    "typechain": "^8.1.1",
+    "unplugin-vue-components": "^0.25.1"
   },
   "dependencies": {
+    "@vueuse/nuxt": "^10.2.0",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2"
   }

package/utils/avocado.ts

@@ -20,3 +20,5 @@ export const AVO_STAGING_DEPOSIT_ADDRESS =
 export const AVO_PROD_RPC_URL = "https://rpc.avocado.instadapp.io";
 
 export const AVO_STAGING_RPC_URL = "https://rpc.avocado.instad.app";
+
+export const blockQueryURL = "https://blockquery.instadapp.io";

package/utils/bignumber.ts

@@ -1,6 +1,8 @@
 import { BigNumber } from "bignumber.js";
 import { BigNumber as BN } from "ethers";
 
+type CombinedBigNumber = BigNumber | string | number;
+
 export const toBN = (value: BigNumber.Value | BN) =>
   new BigNumber(BN.isBigNumber(value) ? value.toString() : value);
 export const isZero = (value: BigNumber.Value | BN) => toBN(value).isZero();
@@ -29,3 +31,21 @@ export const ensureValue = (value: any) => {
 export const max = (...args: BigNumber.Value[]) => {
   return BigNumber.max(...args);
 };
+
+export function pow(value: CombinedBigNumber, exponent: string | number) {
+  return toBN(value).pow(toBN(exponent));
+}
+
+export function toWei(val: CombinedBigNumber, decimals: number): string {
+  const num = toBN(val);
+  const multiplier = pow(10, decimals);
+  return times(num, multiplier).toFixed(0);
+}
+
+export function fromWei(val: CombinedBigNumber, decimal = 18) {
+  return toBN(val).div(new BigNumber(10).pow(decimal));
+}
+
+export function abs(value: CombinedBigNumber) {
+  return toBN(value).abs();
+}

package/utils/metadata.ts

@@ -278,7 +278,10 @@ export const decodeMetadata = (data: string) => {
         metadata = executeDataV3.params_.metadata;
       }
     } else {
-      const executeDataMultisigV3 = iface.decodeFunctionData("executeMultisigV3", data);
+      const executeDataMultisigV3 = iface.decodeFunctionData(
+        "executeMultisigV3",
+        data
+      );
       if (
         executeDataMultisigV3.params_.metadata === "0x" ||
         !executeDataMultisigV3.params_.metadata
@@ -421,7 +424,7 @@ export const decodeMetadata = (data: string) => {
 
     return metadataArr;
   } catch (e) {
-    console.log(e);
+    // console.log(e);
     return null;
   }
 };

package/utils/services.ts

@@ -0,0 +1,14 @@
+export const fetchTokenByAddress = async (
+  address: string,
+  chainId: string | number
+) => {
+  if (!address || !chainId) return null;
+  const [token] = (await $fetch(`${blockQueryURL}/${chainId}/tokens`, {
+    params: {
+      sparkline: false,
+      "addresses[]": [address],
+    },
+  })) as ITokenPrice[];
+
+  return token;
+};

package/utils/utils.d.ts

@@ -116,3 +116,15 @@ type MetadataProps = {
   encodedData: string;
   version?: string;
 };
+
+interface ITokenPrice {
+  address: string;
+  chain_id: string;
+  name: string;
+  symbol: string;
+  decimals: number;
+  logo_url: string;
+  price: string;
+  coingecko_id: string;
+  sparkline_price_7d: number[];
+}