@instadapp/avocado-base 0.0.0-dev.d831e20 → 0.0.0-dev.dd1950d

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/assets/images/icons/reject-proposal.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.8555 8.14404L8.14316 11.8564" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M8.14453 8.14404L11.8568 11.8564" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <rect x="3.75" y="3.75" width="12.5" height="12.5" rx="6.25" stroke="#EB5757" stroke-width="1.5"/>
+    <path d="M11.8555 8.14404L8.14316 11.8564" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.14453 8.14404L11.8568 11.8564" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="3.75" y="3.75" width="12.5" height="12.5" rx="6.25" stroke="currentColor" stroke-width="1.5"/>
 </svg>

package/assets/images/icons/stars.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3112 1.14526L12.8087 5.19216L16.8556 6.68965L12.8087 8.18714L11.3112 12.234L9.8137 8.18714L5.76681 6.68965L9.8137 5.19216L11.3112 1.14526Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.38071 10.3859L5.68884 12.312L7.61493 13.6201L5.68884 14.9283L4.38071 16.8544L3.07258 14.9283L1.14648 13.6201L3.07258 12.312L4.38071 10.3859Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -1,8 +1,8 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.64453 7.21045H15.3588" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round"/>
-    <path d="M13.8495 7.21045H6.14754L6.09242 8.20701C5.98681 10.1164 6.07654 12.0315 6.36021 13.9227C6.48391 14.7473 7.19233 15.3574 8.02623 15.3574H11.9708C12.8047 15.3574 13.5131 14.7473 13.6368 13.9227C13.9205 12.0315 14.0102 10.1164 13.9046 8.207L13.8495 7.21045Z" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M7.85938 7.21039V6.7825C7.85938 6.21509 8.08478 5.67091 8.486 5.26969C8.88722 4.86847 9.4314 4.64307 9.99881 4.64307C10.5662 4.64307 11.1104 4.86847 11.5116 5.26969C11.9128 5.67091 12.1382 6.21509 12.1382 6.7825V7.21039" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M8.71484 9.50195V13.0487" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M11.2852 9.50195V13.0487" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.64453 7.21045H15.3588" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+    <path d="M13.8495 7.21045H6.14754L6.09242 8.20701C5.98681 10.1164 6.07654 12.0315 6.36021 13.9227C6.48391 14.7473 7.19233 15.3574 8.02623 15.3574H11.9708C12.8047 15.3574 13.5131 14.7473 13.6368 13.9227C13.9205 12.0315 14.0102 10.1164 13.9046 8.207L13.8495 7.21045Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.85938 7.21039V6.7825C7.85938 6.21509 8.08478 5.67091 8.486 5.26969C8.88722 4.86847 9.4314 4.64307 9.99881 4.64307C10.5662 4.64307 11.1104 4.86847 11.5116 5.26969C11.9128 5.67091 12.1382 6.21509 12.1382 6.7825V7.21039" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.71484 9.50195V13.0487" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M11.2852 9.50195V13.0487" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/components/ActionLogo.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import RefreshSVG from '~/assets/images/icons/refresh.svg'
-import BridgeSVG from '~/assets/images/icons/bridge.svg'
-import CrossTransferSVG from '~/assets/images/icons/cross-transfer.svg'
-import TransferSVG from '~/assets/images/icons/transfer.svg'
-import PlusCircleSVG from '~/assets/images/icons/plus-circle.svg'
-import Trash2SVG from '~/assets/images/icons/trash-2.svg'
-import ChangeThresholdSVG from '~/assets/images/icons/change-threshold.svg'
-import DappSVG from '~/assets/images/icons/dapp.svg'
-import DeploySVG from '~/assets/images/icons/deploy.svg'
-import GasSVG from '~/assets/images/icons/gas.svg'
-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 RefreshSVG from '../assets/images/icons/refresh.svg'
+import BridgeSVG from '../assets/images/icons/bridge.svg'
+import CrossTransferSVG from '../assets/images/icons/cross-transfer.svg'
+import TransferSVG from '../assets/images/icons/transfer.svg'
+import PlusCircleSVG from '../assets/images/icons/plus-circle.svg'
+import StarsSVG from '../assets/images/icons/stars.svg'
+import Trash2SVG from '../assets/images/icons/trash-2.svg'
+import ChangeThresholdSVG from '../assets/images/icons/change-threshold.svg'
+import DappSVG from '../assets/images/icons/dapp.svg'
+import DeploySVG from '../assets/images/icons/deploy.svg'
+import GasSVG from '../assets/images/icons/gas.svg'
+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
@@ -21,18 +23,20 @@ defineProps<{
 </script>
 
 <template>
-    <RefreshSVG class="text-primary" v-if="action === 'swap'"/>
-    <BridgeSVG class="text-primary" v-else-if="action === 'bridge'"/>
-    <CrossTransferSVG class="text-primary" v-else-if="action === 'cross-transfer'"/>
-    <TransferSVG class="text-primary" v-else-if="action === 'transfer'"/>
-    <PlusCircleSVG class="text-primary" v-else-if="action === 'add-signers' || (action === 'auth' && !remove)"/>
-    <Trash2SVG v-else-if="action === 'remove-signers' || (action === 'auth' && remove)"/>
-    <ChangeThresholdSVG v-else-if="action === 'change-threshold'"/>
-    <DappSVG v-else-if="action === 'dapp'"/>
-    <DeploySVG v-else-if="action === 'deploy'"/>
-    <GasSVG v-else-if="action === 'gas-topup'"/>
-    <InstadappProSVG v-else-if="action === 'instadapp-pro'"/>
-    <PermitSignSVG v-else-if="action === 'permit2'"/>
-    <RejectProposalSVG v-else-if="action === 'rejection'"/>
-    <UpgradeSVG v-else-if="action === 'upgrade'"/>
+  <RefreshSVG class="text-primary" v-if="action === 'swap'" />
+  <BridgeSVG class="text-primary" v-else-if="action === 'bridge'" />
+  <CrossTransferSVG class="text-primary" v-else-if="action === 'cross-transfer'" />
+  <TransferSVG class="text-primary" v-else-if="action === 'transfer'" />
+  <PlusCircleSVG class="text-primary" v-else-if="action === 'add-signers' || (action === 'auth' && !remove)" />
+  <Trash2SVG class="text-[#EB5757]" v-else-if="action === 'remove-signers' || (action === 'auth' && remove)" />
+  <RejectProposalSVG class="text-[#EB5757]" v-else-if="action === 'rejection'" />
+  <ChangeThresholdSVG v-else-if="action === 'change-threshold'" />
+  <DappSVG v-else-if="action === 'dapp'" />
+  <DeploySVG v-else-if="action === 'deploy'" />
+  <GasSVG v-else-if="action === 'gas-topup'" />
+  <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'" />
+  <StarsSVG v-else-if="action === 'mass'" />
 </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>
 
@@ -19,15 +20,23 @@ provide('compact', props.compact);
     <MetadataCrossTransfer v-if="metadata.type === 'cross-transfer'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataGasTopup v-if="metadata.type === 'gas-topup'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataSwap v-if="metadata.type === 'swap'" :metadata="metadata" :chain_id="chain_id" />
-    <MetadataBridge v-if="metadata.type === 'bridge'" :metadata="metadata" :chain_id="chain_id" />
+    <MetadataBridge v-if="metadata.type === 'bridge' || metadata.type === 'bridge-v2'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataPermit2 v-if="metadata.type === 'permit2'" :metadata="metadata" :chain_id="chain_id" />
 
+    <div v-if="metadata.type === 'mass'">
+      Chain Agnostic Payments
+    </div>
+
+    <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 +45,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,37 @@
+<script setup lang="ts">
+// @ts-expect-error
+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>