@instadapp/avocado-base 0.0.49 → 0.0.51

package/components/ActionMetadata.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const props = defineProps<{
   metadata: {
     type: MetadataTypes
@@ -55,9 +54,7 @@ provide('tokens', props.tokens);
       {{ 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>
+    <MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata" :compact="compact" />
 
      <div v-if="metadata.type === 'change-threshold'" class="text-left w-fit" >
      Change Threshold to {{ metadata.count }}

package/components/AuthorityAvatar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  address: string
+}>();
+
+const randomId = Math.random().toString(36).substr(2, 9);
+</script>
+
+<template>
+  <svg
+    :style="{
+      color: generateColor(address),
+    }" width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30"
+  >
+    <g fill="currentColor" :clip-path="`url(#${randomId})`">
+      <rect width="30" height="30" fill-opacity=".4" rx="15" />
+      <ellipse cx="15.004" cy="26.399" rx="11.4" ry="6.6" />
+      <circle cx="15" cy="12.75" r="5.4" />
+    </g>
+    <defs>
+      <clipPath :id="randomId">
+        <rect width="30" height="30" fill="#fff" rx="15" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

package/components/metadata/Bridge.vue

@@ -15,6 +15,17 @@ const toToken = asyncComputed(() =>
   }
 );
 
+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()
@@ -23,18 +34,23 @@ const bridgeAmountFormatted = computed(() =>
 </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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "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/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
@@ -58,4 +60,14 @@ export function formatMultipleAddresses(addresses: string[], shorten = true) {
   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}%)`
 }