@instadapp/avocado-base 0.0.0-dev.083a57a → 0.0.0-dev.0841bfc

package/components/metadata/Bridge.vue

@@ -6,31 +6,51 @@ const props = defineProps<{
 }>();
 
 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 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>
+      <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

@@ -6,13 +6,17 @@ const props = defineProps<{
 }>();
 
 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
   );
 });
 

package/components/metadata/GasTopup.vue

@@ -5,8 +5,14 @@ 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');

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,45 @@
+<script setup lang="ts">
+import { Tippy } from 'vue-tippy'
+const props = defineProps<{
+  metadata: {
+    type: MetadataTypes,
+    [key: string]: any
+  };
+  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>
+</template>

package/components/metadata/Swap.vue

@@ -6,12 +6,19 @@ const props = defineProps<{
 }>();
 
 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(() =>

package/components/metadata/Transfer.vue

@@ -6,13 +6,17 @@ const props = defineProps<{
 }>();
 
 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
   );
 });
 
@@ -28,9 +32,9 @@ const formattedAmount = computed(() =>
   <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>
+      <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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.0-dev.083a57a",
+  "version": "0.0.0-dev.0841bfc",
   "type": "module",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",
@@ -20,11 +20,13 @@
     "nuxt-svgo": "^3.1.0",
     "rimraf": "^3.0.2",
     "typechain": "^8.1.1",
-    "unplugin-vue-components": "^0.25.1"
+    "unplugin-vue-components": "^0.25.1",
+    "vue-tippy": "^6.0.0"
   },
   "dependencies": {
     "@vueuse/nuxt": "^10.2.0",
     "bignumber.js": "^9.1.1",
-    "ethers": "^5.7.2"
+    "ethers": "^5.7.2",
+    "xxhashjs": "^0.2.2"
   }
 }

package/utils/formatter.ts

@@ -72,7 +72,7 @@ export function formatDecimal(value: string | number, fractionDigits?: number) {
     let decimals;
 
     if (num.lt(1)) {
-      decimals = 8;
+      decimals = 4;
     } else if (num.lt(10)) {
       decimals = 6;
     } else if (num.lt(100)) {

package/utils/helper.ts

@@ -1,3 +1,5 @@
+import * as XXH from 'xxhashjs';
+
 export const indexSorter = (aIndex: number, bIndex: number) => {
   if (aIndex === -1 && bIndex === -1) {
     return 0; // fallback to other sorting criteria
@@ -52,3 +54,20 @@ export function onImageError(this: HTMLImageElement) {
     parentElement.classList.add("bg-gray-300");
   }
 }
+
+export function formatMultipleAddresses(addresses: string[], shorten = true) {
+  const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
+  const formattedString = formatter.format(addresses.map(i => shorten ? shortenHash(i) || '' : i))
+  
+  return formattedString
+}
+
+export function generateColor(address: string): string {
+  const hash = XXH.h32(address, 0xABCD).toNumber()
+
+  const hue = hash % 360
+  const saturation = 80 + (hash % 30)
+  const lightness = 70 + (hash % 20)
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+}

package/utils/metadata.ts

@@ -1,11 +1,29 @@
 import { ethers, utils } from "ethers";
 import { Forwarder__factory } from "../contracts";
 
+  export const MetadataEnums = {
+    "transfer": "transfer",
+    "bridge": "bridge",
+    "swap": "swap",
+    "gas-topup": "gas-topup",
+    "upgrade": "upgrade",
+    "dapp": "dapp",
+    "deploy": "deploy",
+    "permit2": "permit2",
+    "cross-transfer": "cross-transfer",
+    "auth": "auth",
+    "rejection": "rejection",
+    "instadapp-pro": "instadapp-pro",
+    "add-signers": "add-signers",
+    "remove-signers": "remove-signers",
+    "change-threshold": "change-threshold",
+  } as const;
+
 const multiMetadataTypes = ["bytes[]"];
 
 const metadataTypes = ["bytes32 type", "uint8 version", "bytes data"];
 
-const actionMetadataTypes = {
+const actionMetadataTypes: Record<MetadataTypes, string[]> = {
   transfer: ["address token", "uint256 amount", "address receiver"],
   "cross-transfer": [
     "address fromToken",
@@ -43,6 +61,10 @@ const actionMetadataTypes = {
     "uint48 expiration",
   ],
   "instadapp-pro": ["string castDetails"],
+  'add-signers': ['address[] signers'],
+  'remove-signers': ['address[] signers'],
+  'change-threshold': ['uint8 count'],
+  'rejection': ['bytes32 id'],
 };
 
 const encodeMetadata = (props: MetadataProps) => {
@@ -63,7 +85,7 @@ export const encodeDappMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "dapp",
+    type: MetadataEnums.dapp,
     encodedData,
   });
 
@@ -80,7 +102,21 @@ export const encodeTransferMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "transfer",
+    type: MetadataEnums.transfer,
+    encodedData,
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+};
+
+export const encodeRejectionMetadata = (id: string, single = true) => {
+  const encodedData = ethers.utils.defaultAbiCoder.encode(
+    actionMetadataTypes.rejection,
+    [id]
+  );
+
+  const data = encodeMetadata({
+    type: MetadataEnums.rejection,
     encodedData,
   });
 
@@ -103,7 +139,7 @@ export const encodeCrossTransferMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "cross-transfer",
+    type: MetadataEnums["cross-transfer"],
     encodedData,
   });
 
@@ -120,7 +156,7 @@ export const encodeAuthMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "auth",
+    type: MetadataEnums.auth,
     encodedData,
   });
 
@@ -129,7 +165,7 @@ export const encodeAuthMetadata = (
 
 export const encodeDeployMetadata = (single = true) => {
   const data = encodeMetadata({
-    type: "deploy",
+    type: MetadataEnums.deploy,
     encodedData: "0x",
   });
 
@@ -146,7 +182,7 @@ export const encodeWCSignMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "permit2",
+    type: MetadataEnums.permit2,
     encodedData,
   });
 
@@ -163,7 +199,7 @@ export const encodeUpgradeMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "upgrade",
+    type: MetadataEnums.upgrade,
     encodedData,
   });
 
@@ -187,7 +223,7 @@ export const encodeSwapMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "swap",
+    type: MetadataEnums.swap,
     encodedData,
   });
 
@@ -203,10 +239,8 @@ export const encodeTopupMetadata = (
     [params.amount, params.token, params.onBehalf]
   );
 
-  console.log(params);
-
   const data = encodeMetadata({
-    type: "gas-topup",
+    type: MetadataEnums["gas-topup"],
     encodedData,
   });
 
@@ -231,7 +265,58 @@ export const encodeBridgeMetadata = (
   );
 
   const data = encodeMetadata({
-    type: "bridge",
+    type: MetadataEnums.bridge,
+    encodedData,
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+};
+
+export const encodeChangeThresholdMetadata = (
+  threshold: string | number,
+  single = true
+) => {
+  const encodedData = ethers.utils.defaultAbiCoder.encode(
+    actionMetadataTypes["change-threshold"],
+    [toBN(threshold).toNumber()]
+  );
+
+  const data = encodeMetadata({
+    type: MetadataEnums["change-threshold"],
+    encodedData,
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+};
+
+export const encodeRemoveSignersMetadata = (
+  addresses: string[],
+  single = true
+) => {
+  const encodedData = ethers.utils.defaultAbiCoder.encode(
+    actionMetadataTypes["remove-signers"],
+    [addresses]
+  );
+
+  const data = encodeMetadata({
+    type: MetadataEnums["remove-signers"],
+    encodedData,
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+};
+
+export const encodeAddSignersMetadata = (
+  addresses: string[],
+  single = true
+) => {
+  const encodedData = ethers.utils.defaultAbiCoder.encode(
+    actionMetadataTypes["add-signers"],
+    [addresses]
+  );
+
+  const data = encodeMetadata({
+    type: MetadataEnums["add-signers"],
     encodedData,
   });
 
@@ -310,9 +395,96 @@ const getMetadataFromData = (data: string) => {
   return metadata;
 };
 
+
+const typesPayload: IPayload = {
+  transfer: (data, type) => ({
+    type,
+    token: data.token,
+    amount: toBN(data.amount).toFixed(),
+    receiver: data.receiver,
+  }),
+  bridge: (data, type) => ({
+    type,
+    amount: toBN(data.amount).toFixed(),
+    receiver: data.receiver,
+    toToken: data.toToken,
+    fromToken: data.fromToken,
+    toChainId: data.toChainId ? data.toChainId.toString() : null,
+    bridgeFee: toBN(data.bridgeFee).toFixed(),
+  }),
+  swap: (data, type) => ({
+    type,
+    buyAmount: toBN(data.buyAmount).toFixed(),
+    sellAmount: toBN(data.sellAmount).toFixed(),
+    buyToken: data.buyToken,
+    sellToken: data.sellToken,
+    receiver: data.receiver,
+    protocol: utils.parseBytes32String(data.protocol || ""),
+  }),
+  upgrade: (data, type) => ({
+    type,
+    version: utils.parseBytes32String(data.version || ""),
+    walletImpl: data.walletImpl,
+  }),
+  "gas-topup": (data, type) => ({
+    type,
+    amount: toBN(data.amount).toFixed(),
+    token: data.token,
+    onBehalf: data.onBehalf,
+  }),
+  "dapp": (data, type) => ({
+    type,
+    name: data.name,
+    url: data.url,
+  }),
+  "deploy": (data, type) => ({
+    type,
+  }),
+  "permit2": (data, type) => ({
+    type,
+    token: data.token,
+    spender: data.spender,
+    amount: toBN(data.amount).toFixed(),
+    expiration: data.expiration,
+  }),
+  "cross-transfer": (data, type) => ({
+    type,
+    fromToken: data.fromToken,
+    toToken: data.toToken,
+    toChainId: data.toChainId ? data.toChainId.toString() : null,
+    amount: toBN(data.amount).toFixed(),
+    receiver: data.receiver,
+  }),
+  "auth": (data) => ({
+    type: data.remove ? "remove-authority" : "add-authority",
+    address: data.address,
+    chainId: data.chainId ? data.chainId.toString() : null,
+    remove: data.remove,
+  }),
+  "instadapp-pro": (data, type) => ({
+    type,
+    castDetails: data.castDetails,
+  }),
+  "rejection": (data, type) => ({
+    type,
+    id: data.id,
+  }),
+  "add-signers": (data, type) => ({
+    type,
+    addresses: data.signers,
+  }),
+  "remove-signers": (data, type) => ({
+    type,
+    addresses: data.signers,
+  }),
+  "change-threshold": (data, type) => ({
+    type,
+    count: data.count,
+  }),
+};
+
 const parseMetadata = (metadata: string) => {
   const metadataArr = [];
-  let payload = {};
 
   const [decodedMultiMetadata = []] =
     (ethers.utils.defaultAbiCoder.decode(
@@ -335,114 +507,20 @@ const parseMetadata = (metadata: string) => {
       decodedMetadata.data
     );
 
-    switch (type) {
-      case "transfer":
-        payload = {
-          type,
-          token: decodedData.token,
-          amount: toBN(decodedData.amount).toFixed(),
-          receiver: decodedData.receiver,
-        };
-        break;
-      case "bridge":
-        payload = {
-          type,
-          amount: toBN(decodedData.amount).toFixed(),
-          receiver: decodedData.receiver,
-          toToken: decodedData.toToken,
-          fromToken: decodedData.fromToken,
-          toChainId: decodedData.toChainId
-            ? decodedData.toChainId.toString()
-            : null,
-          bridgeFee: toBN(decodedData.bridgeFee).toFixed(),
-        };
-        break;
-      case "swap":
-        payload = {
-          type,
-          buyAmount: toBN(decodedData.buyAmount).toFixed(),
-          sellAmount: toBN(decodedData.sellAmount).toFixed(),
-          buyToken: decodedData.buyToken,
-          sellToken: decodedData.sellToken,
-          receiver: decodedData.receiver,
-          protocol: utils.parseBytes32String(decodedData?.protocol || ""),
-        };
-        break;
-      case "upgrade":
-        payload = {
-          type,
-          version: utils.parseBytes32String(decodedData?.version || ""),
-          walletImpl: decodedData?.walletImpl,
-        };
-        break;
-      case "gas-topup":
-        payload = {
-          type,
-          amount: toBN(decodedData.amount).toFixed(),
-          token: decodedData.token,
-          onBehalf: decodedData.onBehalf,
-        };
-        break;
-      case "dapp":
-        payload = {
-          type,
-          name: decodedData?.name,
-          url: decodedData?.url,
-        };
-        break;
-      case "deploy":
-        payload = {
-          type,
-        };
-        break;
-
-      case "permit2":
-        payload = {
-          type,
-          token: decodedData.token,
-          spender: decodedData.spender,
-          amount: toBN(decodedData.amount).toFixed(),
-          expiration: decodedData.expiration,
-        };
-        break;
-
-      case "cross-transfer":
-        payload = {
-          type,
-          fromToken: decodedData.fromToken,
-          toToken: decodedData.toToken,
-          toChainId: decodedData.toChainId
-            ? decodedData.toChainId.toString()
-            : null,
-          amount: toBN(decodedData.amount).toFixed(),
-          receiver: decodedData.receiver,
-        };
-
-        break;
-      case "auth":
-        payload = {
-          type: decodedData.remove ? "remove-authority" : "add-authority",
-          address: decodedData.address,
-          chainId: decodedData.chainId ? decodedData.chainId.toString() : null,
-          remove: decodedData.remove,
-        };
-
-        break;
-      case "instadapp-pro":
-        payload = {
-          type,
-          castDetails: decodedData.castDetails,
-        };
-
-        break;
+    const payloadFunc = typesPayload[type]
+    
+    if (payloadFunc) {
+      const payload = payloadFunc(decodedData, type)
+      metadataArr.push(payload);
     }
 
-    metadataArr.push(payload);
   }
 
   return metadataArr;
 };
 
+
+
 /**
  * Replaces hyphens with spaces and capitalizes the first letter of each word in a sentence.
  * @param {string} txType - The input sentence to modify