@instadapp/avocado-base 0.0.0-dev.e2f5814 → 0.0.0-dev.e5c0876

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,12 +23,16 @@ 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>
     <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
+        metadata?.name || metadata?.url
       }}</a>
       <SvgoExternalLink />
     </div>
@@ -36,38 +41,38 @@ provide('compact', props.compact);
     </div>
     <div v-if="metadata.type === 'auth'" 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>
+      <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 === '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 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) }}
+      content: metadata.id,
+      maxWidth: 'none',
+      interactive: true,
+    }" 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>