@instadapp/avocado-base 0.0.0-dev.a0ec235 → 0.0.0-dev.a28ed52

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/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

@@ -26,13 +26,13 @@ defineProps<{
     <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)"/>
+    <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'"/>
-    <RejectProposalSVG v-else-if="action === 'rejection'"/>
     <UpgradeSVG v-else-if="action === 'upgrade'"/>
 </template>

package/components/ActionMetadata.vue

@@ -7,9 +7,11 @@ const props = defineProps<{
   };
   chain_id: number | string;
   compact?: boolean;
+  tokens?: ITokenPrice[];
 }>();
 
 provide('compact', props.compact);
+provide('tokens', props.tokens);
 
 </script>
 
@@ -70,4 +72,4 @@ provide('compact', props.compact);
      {{ shortenHash(metadata.id) }}
     </div>
   </div>
-</template>
+</template>

package/components/CopyClipboard.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import CopySVG from '~/assets/images/icons/copy.svg'
+import CheckCircle from '~/assets/images/icons/check-circle.svg'
+
+defineProps<{
+  text: string
+  iconOnly?: boolean
+  successText?: string
+}>()
+const { copy, copied } = useClipboard()
+const slots = useSlots()
+</script>
+
+<template>
+  <button
+    class="text-slate-400 font-semibold inline-flex items-center gap-2.5"
+    @click.stop="copy(text)"
+  >
+    <Transition mode="out-in" name="slide-left">
+      <span v-if="copied && !iconOnly"> {{ successText || 'Copied' }}  </span>
+      <span v-else-if="slots.content">
+        <slot name="content" />
+      </span>
+    </Transition>
+
+    <Transition mode="out-in" name="slide">
+      <CheckCircle
+        v-if="copied"
+        class="w-4 h-4 shrink-0 dark:text-slate-900 text-white svg-circle"
+      />
+      <slot v-else-if="slots.copy" name="copy" />
+      <slot v-else name="copy-icon">
+        <CopySVG />
+      </slot>
+    </Transition>
+  </button>
+</template>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+}
+</style>

package/components/metadata/Bridge.vue

@@ -6,9 +6,13 @@ const props = defineProps<{
 }>();
 
 const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
 
 const toToken = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId)
+{
+   if (Array.isArray(tokens) && !tokens.length) return null;
+    return  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
+  }
 );
 
 const bridgeAmountFormatted = computed(() =>

package/components/metadata/CrossTransfer.vue

@@ -6,13 +6,17 @@ const props = defineProps<{
 }>();
 
 const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
 
 const fromToken = asyncComputed(() => {
   if (!props?.chain_id) return null;
 
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
   return fetchTokenByAddress(
     props.metadata?.fromToken,
-    props?.chain_id
+    props?.chain_id,
+    tokens
   );
 });
 

package/components/metadata/GasTopup.vue

@@ -5,8 +5,14 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const tokens = inject<ITokenPrice[]>('tokens');
+
 const token = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.token, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
+ }
 );
 
 const compact = inject('compact');

package/components/metadata/Permit2.vue

@@ -5,8 +5,13 @@ const props = defineProps<{
   chain_id: number | string
 }>();
 
+const tokens = inject<ITokenPrice[]>('tokens');
+
 const token = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.token, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+  return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
+}
 );
 
 const calculateDate = (timestamp: number) => {

package/components/metadata/Swap.vue

@@ -6,12 +6,19 @@ const props = defineProps<{
 }>();
 
 const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
 
 const buyToken = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+    return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens) 
+  }
 );
 const sellToken = asyncComputed(() =>
-  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id)
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+  return  fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
+  }
 );
 
 const sellAmountFormatted = computed(() =>

package/components/metadata/Transfer.vue

@@ -6,13 +6,17 @@ const props = defineProps<{
 }>();
 
 const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
 
 const token = asyncComputed(() => {
   if (!props?.chain_id) return null;
 
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
   return fetchTokenByAddress(
     props.metadata?.token,
-    props?.chain_id
+    props?.chain_id,
+    tokens
   );
 });
 
@@ -28,9 +32,9 @@ const formattedAmount = computed(() =>
   <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="token?.logo_url" />
       {{ formattedAmount }}
       <span class="uppercase">{{ token?.symbol }}</span>
+      <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url" />
       <SvgoArrowRight class="w-4 h-4 text-slate-400 mx-2" />
       <NuxtLink
         class="text-primary"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.0-dev.a0ec235",
+  "version": "0.0.0-dev.a28ed52",
   "type": "module",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",

package/utils/formatter.ts

@@ -72,7 +72,7 @@ export function formatDecimal(value: string | number, fractionDigits?: number) {
     let decimals;
 
     if (num.lt(1)) {
-      decimals = 8;
+      decimals = 4;
     } else if (num.lt(10)) {
       decimals = 6;
     } else if (num.lt(100)) {

package/utils/network.ts

@@ -175,7 +175,6 @@ export const networks: Network[] = [
     params: {
       chainName: "polygon zkEVM",
       rpcUrls: ["https://zkevm-rpc.com"],
-
       nativeCurrency: {
         name: "Ethereum",
         symbol: "ETH",
@@ -225,6 +224,26 @@ export const networks: Network[] = [
         decimals: 18,
       },
     },
+  },
+   {
+    name: 'Base',
+    chainId: 8453,
+    color: '#1E2024',
+    explorerUrl: 'https://basescan.org',
+    get serverRpcUrl() {
+      return process.env?.BASE_RPC_URL || this.params.rpcUrls[0];
+     },
+     usdcAddress: '0xd9aAEc86B65D86f6A7B5B1b0c42FFA531710b6CA',
+     balanceResolverAddress: '0x23c8EAb8a4373dD16b0947Ebe8bf76Ff7A49d13C',
+     params: {
+      rpcUrls: ['https://rpc.ankr.com/base'],
+      chainName: "Base",
+      nativeCurrency: {
+        name: "Ethereum",
+        symbol: "ETH",
+        decimals: 18,
+      },
+    }
   },
   {
     name: AVO_PROD_CHAIN_NAME,
@@ -268,6 +287,22 @@ export const networks: Network[] = [
   },
 ];
 
+export const chainUsdcAddresses = [
+  { chainId: 1, address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' },
+  { chainId: 10, address: '0x7f5c764cbc14f9669b88837ca1490cca17c31607' },
+  { chainId: 56, address: '0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d' },
+  { chainId: 100, address: '0xddafbb505ad214d7b80b1f830fccc89b60fb7a83' },
+  { chainId: 137, address: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174' },
+  { chainId: 250, address: '0x04068da6c83afcfa0e13ba15a6696662335d5b75' },
+  { chainId: 42161, address: '0xff970a61a04b1ca14834a43f5de4533ebddb5cc8' },
+  { chainId: 42161, address: '0xaf88d065e77c8cc2239327c5edb3a432268e5831' },
+  { chainId: 43114, address: '0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e' },
+  { chainId: 43114, address: '0xa7d7079b0fead91f3e65f86e8915cb59c1a4c664' },
+  { chainId: 1101, address: '0xa8ce8aee21bc2a48a5ef670afcc9274c7bbbc035' },
+  { chainId: 1313161554, address: '0xB12BFcA5A55806AaF64E99521918A4bf0fC40802' },
+  { chainId: 8453, address: '0xd9aAEc86B65D86f6A7B5B1b0c42FFA531710b6CA'}
+];
+
 export const getNetworkByChainId = (
   chainId: ChainId | number | string
 ): Network => {

package/utils/services.ts

@@ -1,8 +1,15 @@
 export const fetchTokenByAddress = async (
   address: string,
-  chainId: string | number
+  chainId: string | number,
+  tokens?: ITokenPrice[]
 ) => {
   if (!address || !chainId) return null;
+
+  if (tokens?.length) {
+    const token = tokens.find((token) => token.address?.toLocaleLowerCase() === address?.toLocaleLowerCase() && token.chain_id == chainId);
+    if (token) return token;
+  }
+
   const [token] = (await $fetch(`${blockQueryURL}/${chainId}/tokens`, {
     params: {
       sparkline: false,

package/utils/utils.d.ts

@@ -11,6 +11,7 @@ declare global {
     | 250
     | 634
     | 1313161554
+    | 8453
     | 63400;
  
   type ISlackMessageType = "danger" | "error" | "success" | "banner";