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

package/components/ActionMetadata.vue

@@ -1,10 +1,16 @@
 <script lang="ts" setup>
 
-defineProps<{
-  metadata: any;
+const props = defineProps<{
+  metadata: {
+    type: MetadataTypes
+    [key: string]: any
+  };
   chain_id: number | string;
+  compact?: boolean;
 }>();
 
+provide('compact', props.compact);
+
 </script>
 
 <template>
@@ -28,7 +34,7 @@ defineProps<{
     <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">
+    <div v-if="metadata.type === 'auth'" class="self-start capitalize flex gap-3">
       Authority {{ metadata.remove ? 'Removed' : 'Added' }}:
        <a
           class="text-primary break-all"
@@ -46,5 +52,22 @@ defineProps<{
       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/metadata/Bridge.vue

@@ -5,6 +5,8 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
+
 const toToken = asyncComputed(() =>
   fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId)
 );
@@ -22,12 +24,12 @@ const bridgeAmountFormatted = computed(() =>
     class="flex gap-5 items-center"
     v-if="metadata.type === 'bridge' && toToken"
   >
-    <span class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
+    <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-5 h-5" />
+      <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>

package/components/metadata/CrossTransfer.vue

@@ -5,6 +5,8 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
+
 const fromToken = asyncComputed(() => {
   if (!props?.chain_id) return null;
 
@@ -27,7 +29,7 @@ const formattedFromAmount = computed(() =>
   </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 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 }}
@@ -41,7 +43,7 @@ const formattedFromAmount = computed(() =>
         <span>{{ chainIdToName(chain_id) }}</span>
       </span>
 
-      <ArrowRight class="w-4 h-4 text-slate-400" />
+      <SvgoArrowRight class="w-4 h-4 text-slate-400" />
 
       <span class="flex items-center gap-2.5">
         <ChainLogo class="w-5" :chain="metadata?.toChainId" />

package/components/metadata/GasTopup.vue

@@ -9,6 +9,8 @@ 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()
@@ -19,7 +21,7 @@ const formattedAmount = computed(() =>
 <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 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 }}

package/components/metadata/Swap.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
 
 const buyToken = asyncComputed(() =>
   fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id)
@@ -45,7 +46,7 @@ const formatProtocol = (protocol: string) => {
       class="flex items-center gap-5"
         v-else
     >
-      <span class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
+      <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 }}
@@ -56,7 +57,7 @@ const formatProtocol = (protocol: string) => {
         <span class="uppercase">{{ buyToken?.symbol }}</span>
         <span
           class="capitalize hidden sm:flex items-center gap-2.5"
-          v-if="metadata.protocol"
+          v-if="metadata.protocol && !compact"
         >
           On <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
           {{ formatProtocol(metadata.protocol) }}

package/components/metadata/Transfer.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const compact = inject('compact');
 
 const token = asyncComputed(() => {
   if (!props?.chain_id) return null;
@@ -25,19 +26,21 @@ const formattedAmount = computed(() =>
 <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 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" />
-      <a
+      <NuxtLink
         class="text-primary"
-        :href="
+        target="_blank"
+        external
+        :to="
           getExplorerUrl(chain_id, `/address/${metadata.receiver}`)
         "
-        >{{ shortenHash(metadata.receiver) }}</a
-      >
+        >{{ shortenHash(metadata.receiver) }}
+        </NuxtLink>
     </span>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.0-dev.c9f5a55",
+  "version": "0.0.0-dev.cfde212",
   "type": "module",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",

package/utils/helper.ts

@@ -52,3 +52,10 @@ 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
+}

package/utils/metadata.ts

@@ -5,7 +5,7 @@ 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 +43,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) => {
@@ -87,6 +91,20 @@ export const encodeTransferMetadata = (
   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: "rejection",
+    encodedData,
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+};
+
 export const encodeCrossTransferMetadata = (
   params: CrossSendMetadataProps,
   single = true
@@ -238,193 +256,265 @@ export const encodeBridgeMetadata = (
   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: "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: "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: "add-signers",
+    encodedData,
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+};
+
 export const encodeMultipleActions = (...actionData: string[]) => {
   return ethers.utils.defaultAbiCoder.encode(multiMetadataTypes, [actionData]);
 };
 
-export const decodeMetadata = (data: string) => {
+export const decodeData = (data: string) => {
+  try {
+    const metadata = getMetadataFromData(data) || "0x";
+
+    return parseMetadata(metadata);
+  } catch (e) {
+    // console.log(e);
+    return null;
+  }
+};
+
+export const decodeMetadata = (metadata: string) => {
   try {
-    const iface = Forwarder__factory.createInterface();
-    let metadata = "0x";
-    let payload = {};
-
-    if (!data) return payload;
-
-    if (data.startsWith("0x18e7f485")) {
-      const executeData = iface.decodeFunctionData("execute", data);
-      if (executeData.metadata_ === "0x" || !executeData.metadata_) {
-        return null;
-      } else {
-        metadata = executeData.metadata_;
-      }
-    } else if (data.startsWith("0x14f80a8d")) {
-      const executeDataV2 = iface.decodeFunctionData("executeV2", data);
-      if (
-        executeDataV2.params_.metadata === "0x" ||
-        !executeDataV2.params_.metadata
-      ) {
-        return null;
-      } else {
-        metadata = executeDataV2.params_.metadata;
-      }
-    } else if (data.startsWith("0x85114d53")) {
-      const executeDataV3 = iface.decodeFunctionData("executeV3", data);
-      if (
-        executeDataV3.params_.metadata === "0x" ||
-        !executeDataV3.params_.metadata
-      ) {
-        return null;
-      } else {
-        metadata = executeDataV3.params_.metadata;
-      }
+    return parseMetadata(metadata);
+  } catch (e) {
+    return null;
+  }
+};
+
+const getMetadataFromData = (data: string) => {
+  const iface = Forwarder__factory.createInterface();
+  let metadata = "0x";
+
+  if (data.startsWith("0x18e7f485")) {
+    const executeData = iface.decodeFunctionData("execute", data);
+    if (executeData.metadata_ === "0x" || !executeData.metadata_) {
+      return null;
     } else {
-      const executeDataMultisigV3 = iface.decodeFunctionData(
-        "executeMultisigV3",
-        data
-      );
-      if (
-        executeDataMultisigV3.params_.metadata === "0x" ||
-        !executeDataMultisigV3.params_.metadata
-      ) {
-        return null;
-      } else {
-        metadata = executeDataMultisigV3.params_.metadata;
-      }
+      metadata = executeData.metadata_;
     }
+  } else if (data.startsWith("0x14f80a8d")) {
+    const executeDataV2 = iface.decodeFunctionData("executeV2", data);
+    if (
+      executeDataV2.params_.metadata === "0x" ||
+      !executeDataV2.params_.metadata
+    ) {
+      return null;
+    } else {
+      metadata = executeDataV2.params_.metadata;
+    }
+  } else if (data.startsWith("0x85114d53")) {
+    const executeDataV3 = iface.decodeFunctionData("executeV3", data);
+    if (
+      executeDataV3.params_.metadata === "0x" ||
+      !executeDataV3.params_.metadata
+    ) {
+      return null;
+    } else {
+      metadata = executeDataV3.params_.metadata;
+    }
+  } else {
+    const executeDataMultisigV3 = iface.decodeFunctionData(
+      "executeMultisigV3",
+      data
+    );
+    if (
+      executeDataMultisigV3.params_.metadata === "0x" ||
+      !executeDataMultisigV3.params_.metadata
+    ) {
+      return null;
+    } else {
+      metadata = executeDataMultisigV3.params_.metadata;
+    }
+  }
+
+  return metadata;
+};
+
 
-    const metadataArr = [];
-
-    const [decodedMultiMetadata = []] =
-      (ethers.utils.defaultAbiCoder.decode(
-        multiMetadataTypes,
-        metadata
-      ) as string[]) || [];
-
-    for (let metadata of decodedMultiMetadata) {
-      const decodedMetadata = ethers.utils.defaultAbiCoder.decode(
-        metadataTypes,
-        metadata
-      );
-
-      const type = ethers.utils.parseBytes32String(
-        decodedMetadata.type
-      ) as keyof typeof actionMetadataTypes;
-
-      const decodedData = ethers.utils.defaultAbiCoder.decode(
-        actionMetadataTypes[type],
-        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 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 = [];
+
+  const [decodedMultiMetadata = []] =
+    (ethers.utils.defaultAbiCoder.decode(
+      multiMetadataTypes,
+      metadata
+    ) as string[]) || [];
+
+  for (let metadata of decodedMultiMetadata) {
+    const decodedMetadata = ethers.utils.defaultAbiCoder.decode(
+      metadataTypes,
+      metadata
+    );
+
+    const type = ethers.utils.parseBytes32String(
+      decodedMetadata.type
+    ) as keyof typeof actionMetadataTypes;
+
+    const decodedData = ethers.utils.defaultAbiCoder.decode(
+      actionMetadataTypes[type],
+      decodedMetadata.data
+    );
+
+    const payloadFunc = typesPayload[type]
+    
+    if (payloadFunc) {
+      const payload = payloadFunc(decodedData, type)
       metadataArr.push(payload);
     }
 
-    return metadataArr;
-  } catch (e) {
-    // console.log(e);
-    return null;
   }
+
+  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
+ *
+ * @returns {string} - The modified sentence with hyphens replaced with spaces and the first letter of each word capitalized.
+ */
+export const formatTxType = (txType: string) => {
+  const finalSentence = txType
+    .replace("-", " ")
+    .replace(/(^\w{1})|(\s+\w{1})/g, (letter) => letter.toUpperCase());
+
+  return finalSentence;
 };

package/utils/utils.d.ts

@@ -13,6 +13,25 @@ type ChainId =
   | 63400;
 
 type ISlackMessageType = "danger" | "error" | "success" | "banner";
+type MetadataTypes =  "transfer"
+    | "bridge"
+    | "swap"
+    | "gas-topup"
+    | "upgrade"
+    | "dapp"
+    | "deploy"
+    | "permit2"
+    | "cross-transfer"
+    | "auth"
+  | "rejection"
+  | 'instadapp-pro'
+  | 'add-signers'
+  | 'remove-signers'
+  | 'change-threshold'
+
+type PayloadFunction = (data: any, type: MetadataTypes) => any;
+
+type IPayload = Record<MetadataTypes, PayloadFunction>;
 
 interface Network {
   name: string;
@@ -101,18 +120,7 @@ type SwapMetadataProps = {
 };
 
 type MetadataProps = {
-  type:
-    | "transfer"
-    | "bridge"
-    | "swap"
-    | "multi"
-    | "gas-topup"
-    | "upgrade"
-    | "dapp"
-    | "deploy"
-    | "permit2"
-    | "cross-transfer"
-    | "auth";
+  type: MetadataTypes,
   encodedData: string;
   version?: string;
 };