@instadapp/avocado-base 0.0.0-dev.3c9f95c → 0.0.0-dev.424dd71

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

@@ -23,12 +23,16 @@ provide('tokens', props.tokens);
     <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>
@@ -37,36 +41,38 @@ provide('tokens', props.tokens);
     </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>
 
-    <MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata" :compact="compact" />
+    <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>

package/components/metadata/CrossTransfer.vue

@@ -20,9 +20,17 @@ const fromToken = asyncComputed(() => {
   );
 });
 
-const formattedFromAmount = computed(() =>
+const toToken = asyncComputed(() => {
+  if (!props?.metadata?.toChainId) return null;
+
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens);
+});
+
+const formattedToAmount = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
+    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
   )
 );
 </script>
@@ -36,7 +44,7 @@ const formattedFromAmount = computed(() =>
       <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 }}
+        {{ formattedToAmount }}
         <span class="uppercase">{{ fromToken?.symbol }}</span>
       </span>
     </div>

package/components/metadata/Signers.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Tippy } from 'vue-tippy'
-const props = defineProps<{
+import Info2 from '~/assets/images/icons/info-2.svg'
+
+defineProps<{
   metadata: {
     type: MetadataTypes,
     [key: string]: any
@@ -10,30 +12,46 @@ const props = defineProps<{
 </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]">
+  <div class="font-medium">
+    <div v-if="!compact || metadata.addresses.length < 3" class="flex gap-[14px] flex-wrap items-end">
+        <p v-if="!compact" class="text-xs"> {{ formatTxType(metadata.type) }} </p>
+        <div v-for="address of metadata.addresses" :key="address" class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
           <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
-          <p class="text-xs leading-5">
-            {{ shortenHash(address, compact ? 2 : 4) }}
-          </p>
+          <Tippy max-width="none" interactive>
+            <template #default>
+              <p class="text-xs leading-5 text-slate-500 dark:text-slate-400">
+              {{ shortenHash(address, compact ? 2 : 4) }}
+            </p>
+            </template>
+            <template #content>
+            {{ address }}
+            </template>
+         </Tippy>          
         </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]">
+      <div v-for="address of [metadata.addresses[0], metadata.addresses[1]].filter(Boolean)" :key="address" class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
         <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
-        <p class="text-xs leading-5">
-          {{ shortenHash(address, 2) }}
-        </p>
+
+        <Tippy max-width="none" interactive>
+            <template #default>
+               <p class="text-xs leading-5 text-slate-400">
+                {{ shortenHash(address, 2) }}
+              </p>
+            </template>
+            <template #content>
+            {{ address }}
+            </template>
+         </Tippy>      
       </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" />
+          <Info2 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">
+            <li v-for="address in metadata.addresses" :key="address" class="flex text-xs text-slate-400 items-center gap-2.5">
               <AuthorityAvatar class="shrink-0 w-5 h-5" :address="address" />
               {{ address }}
             </li>

package/components/metadata/Swap.vue

@@ -8,17 +8,15 @@ const props = defineProps<{
 const compact = inject('compact');
 const tokens = inject<ITokenPrice[]>('tokens');
 
-const buyToken = asyncComputed(() =>
-{
+const buyToken = asyncComputed(() => {
   if (Array.isArray(tokens) && !tokens.length) return null;
-    return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens) 
-  }
+  return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens)
+}
 );
-const sellToken = asyncComputed(() =>
-{
+const sellToken = asyncComputed(() => {
   if (Array.isArray(tokens) && !tokens.length) return null;
-  return  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
-  }
+  return fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
+}
 );
 
 const sellAmountFormatted = computed(() =>
@@ -49,26 +47,21 @@ const formatProtocol = (protocol: string) => {
 
 <template>
   <div v-if="!sellToken || !buyToken" class="rounded-5 w-24 h-4 loading-box" />
-  <div
-      class="flex items-center gap-5"
-        v-else
-    >
-      <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 }}
-        <span class="uppercase">{{ sellToken?.symbol }}</span>
-        <SvgoRefresh class="w-4 h-4 text-slate-400 mx-2" />
-        <img width="20" height="20" class="w-5 h-5" :src="buyToken?.logo_url" />
-        {{ buyAmountFormatted }}
-        <span class="uppercase">{{ buyToken?.symbol }}</span>
-        <span
-          class="capitalize hidden sm:flex items-center gap-2.5"
-          v-if="metadata.protocol && !compact"
-        >
-          On <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
-          {{ formatProtocol(metadata.protocol) }}
-        </span>
+  <div class="flex items-center gap-5" v-else>
+    <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 }}
+      <span class="uppercase">{{ sellToken?.symbol }}</span>
+      <SvgoRefresh class="w-4 h-4 text-slate-400 mx-2" />
+      <img width="20" height="20" class="w-5 h-5" :src="buyToken?.logo_url" />
+      ~ {{ buyAmountFormatted }}
+      <span class="uppercase">{{ buyToken?.symbol }}</span>
+      <span class="capitalize hidden sm:flex items-center gap-2.5" v-if="metadata.protocol && !compact">
+        On
+        <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
+        {{ formatProtocol(metadata.protocol) }}
       </span>
-    </div>
+    </span>
+  </div>
 </template>