@instadapp/avocado-base 0.0.0-dev.c3dc65c → 0.0.0-dev.c8dd0df

package/assets/images/icons/info-2.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13856_490518)">
+<path d="M7 -6.11959e-07C3.13401 -9.49935e-07 9.49935e-07 3.13401 6.11959e-07 7C2.73984e-07 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 -2.73984e-07 7 -6.11959e-07Z" fill="currentColor"/>
+<path d="M7.00391 9.72217L7.00391 7.38883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.00391 4.27783L6.99391 4.27783" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_13856_490518">
+<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

package/components/ActionLogo.vue

@@ -13,6 +13,7 @@ import InstadappProSVG from '~/assets/images/icons/instadapp-pro.svg'
 import PermitSignSVG from '~/assets/images/icons/permit-sign.svg'
 import RejectProposalSVG from '~/assets/images/icons/reject-proposal.svg'
 import UpgradeSVG from '~/assets/images/icons/upgrade.svg'
+import HammerSVG from '~/assets/images/icons/hammer.svg'
 
 defineProps<{
   action: MetadataTypes
@@ -35,4 +36,5 @@ defineProps<{
     <InstadappProSVG v-else-if="action === 'instadapp-pro'"/>
     <PermitSignSVG v-else-if="action === 'permit2'"/>
     <UpgradeSVG v-else-if="action === 'upgrade'"/>
+    <HammerSVG v-else-if="action === 'tx-builder'"/>
 </template>

package/components/ActionMetadata.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const props = defineProps<{
   metadata: {
     type: MetadataTypes
@@ -7,9 +6,11 @@ const props = defineProps<{
   };
   chain_id: number | string;
   compact?: boolean;
+  tokens?: ITokenPrice[];
 }>();
 
 provide('compact', props.compact);
+provide('tokens', props.tokens);
 
 </script>
 
@@ -22,6 +23,10 @@ provide('compact', props.compact);
     <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 class="text-left w-fit capitalize" v-if="metadata.type === 'import'">
+      Import from {{ metadata.protocol }}  ({{ (formatUsd(fromWei(metadata.valueInUsd, 10)))}})
+    </div>
+
     <div v-if="metadata.type === 'upgrade'" class="self-start">
       Wallet upgraded to {{ metadata?.version }}
     </div>
@@ -48,28 +53,29 @@ provide('compact', props.compact);
             {{ chainIdToName(metadata.chainId) }}
         </div>
     </div>
+    <div v-if="metadata.type === 'tx-builder'" class="self-start capitalize flex gap-3">
+     <span v-if="!compact">
+        Transaction Builder
+    </span> ({{ metadata?.actionCount }} {{ toBN(metadata?.actionCount).lt(2) ? 'action' : 'actions' }})
+    </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>
+    <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 }}
     </div>
 
-    <div class="flex items-center gap-2.5" v-if="metadata.type === 'rejection'">
-      <div v-tippy="{
+    <div v-tippy="{
         content: metadata.id,
         maxWidth: 'none',
+        interactive: true,
       }" 
-      class="text-left w-fit">
-       {{ shortenHash(metadata.id) }}
-     </div>
-     <CopyClipboard icon-only :text="metadata.id" />
+      v-if="metadata.type === 'rejection'" class="text-left w-fit">
+     {{ shortenHash(metadata.id) }}
     </div>
   </div>
-</template>
+</template>

package/components/AuthorityAvatar.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import * as XXH from 'xxhashjs';
+
+defineProps<{
+  address: string
+}>();
+
+const randomId = Math.random().toString(36).substr(2, 9);
+
+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}%)`
+}
+</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>