@instadapp/avocado-base 0.2.2 → 0.2.4

package/app.vue

@@ -2,7 +2,7 @@
   <div class="container mx-auto">
     Networks:
     <ul class="grid grid-cols-5 gap-5">
-      <li class="w-fit" v-for="network in networks">
+      <li v-for="network in networks" :key="network.chainId" class="w-fit">
         <p>
           {{ network.name }}
         </p>
@@ -17,11 +17,11 @@
     </ul>
 
     <ul class="grid grid-cols-5 gap-5 mt-20">
-      <li v-for="item in MetadataEnums">
-      {{ item }}
-      <ActionLogo class="w-10 h-10" :action="item"/>
+      <li v-for="item in MetadataEnums" :key="item">
+        {{ item }}
+        <ActionLogo class="w-10 h-10" :action="item" />
       </li>
     </ul>
   </div>
-  <ul></ul>
+  <ul />
 </template>

package/components/ActionLogo.vue

@@ -1,20 +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 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 CrossTransferSVG from '../assets/images/icons/cross-transfer.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 HammerSVG from '../assets/images/icons/hammer.svg'
 import InstadappProSVG from '../assets/images/icons/instadapp-pro.svg'
 import PermitSignSVG from '../assets/images/icons/permit-sign.svg'
+import PlusCircleSVG from '../assets/images/icons/plus-circle.svg'
+import RefreshSVG from '../assets/images/icons/refresh.svg'
 import RejectProposalSVG from '../assets/images/icons/reject-proposal.svg'
+import StarsSVG from '../assets/images/icons/stars.svg'
+import TransferSVG from '../assets/images/icons/transfer.svg'
+import Trash2SVG from '../assets/images/icons/trash-2.svg'
 import UpgradeSVG from '../assets/images/icons/upgrade.svg'
-import HammerSVG from '../assets/images/icons/hammer.svg'
 
 defineProps<{
   action: MetadataTypes
@@ -23,13 +23,13 @@ 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 class="text-[#EB5757]" v-else-if="action === 'remove-signers' || (action === 'auth' && remove)" />
-  <RejectProposalSVG class="text-[#EB5757]" v-else-if="action === 'rejection'" />
+  <RefreshSVG v-if="action === 'swap'" class="text-primary" />
+  <BridgeSVG v-else-if="action === 'bridge'" class="text-primary" />
+  <CrossTransferSVG v-else-if="action === 'cross-transfer'" class="text-primary" />
+  <TransferSVG v-else-if="action === 'transfer'" class="text-primary" />
+  <PlusCircleSVG v-else-if="action === 'add-signers' || (action === 'auth' && !remove)" class="text-primary" />
+  <Trash2SVG v-else-if="action === 'remove-signers' || (action === 'auth' && remove)" class="text-[#EB5757]" />
+  <RejectProposalSVG v-else-if="action === 'rejection'" class="text-[#EB5757]" />
   <ChangeThresholdSVG v-else-if="action === 'change-threshold'" />
   <DappSVG v-else-if="action === 'dapp'" />
   <DeploySVG v-else-if="action === 'deploy'" />
@@ -39,4 +39,4 @@ defineProps<{
   <UpgradeSVG v-else-if="action === 'upgrade'" />
   <HammerSVG v-else-if="action === 'tx-builder'" />
   <StarsSVG v-else-if="action === 'mass'" />
-</template>
+</template>

package/components/AuthorityAvatar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 // @ts-expect-error
-import * as XXH from 'xxhashjs';
+import * as XXH from 'xxhashjs'
 
 defineProps<{
   address: string
-}>();
+}>()
 
-const randomId = Math.random().toString(36).substr(2, 9);
+const randomId = Math.random().toString(36).substr(2, 9)
 
 function generateColor(address: string): string {
   const hash = XXH.h32(address, 0xABCD).toNumber()
@@ -20,9 +20,11 @@ function generateColor(address: string): string {
 </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">
+  <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" />

package/components/ChainLogo.vue

@@ -1,22 +1,26 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  chain?: ChainId | number | string
+  stroke?: boolean
+}>()
+
+const isNetworkNotAvailable = computed(() => !networks.some(network => String(network.chainId) === String(props.chain)))
+</script>
+
 <template>
   <svg v-if="isNetworkNotAvailable" v-bind="$attrs" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
     <rect width="20" height="20" fill="#334155" rx="10" />
-    <path fill="#97A2B7" fill-rule="evenodd"
+    <path
+      fill="#97A2B7" fill-rule="evenodd"
       d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
-      clip-rule="evenodd" />
+      clip-rule="evenodd"
+    />
   </svg>
-  <span v-else-if="stroke"
-    class="outline stroke-color outline-[#161E2D]  outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full">
-    <img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`" />
+  <span
+    v-else-if="stroke"
+    class="outline stroke-color outline-[#161E2D]  outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full"
+  >
+    <img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`">
   </span>
-  <img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`" />
+  <img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`">
 </template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-  chain?: ChainId | number | string;
-  stroke?: boolean;
-}>();
-
-const isNetworkNotAvailable = computed(() => !networks.some((network) => String(network.chainId) === String(props.chain)))
-</script>

package/components/CopyClipboard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CopySVG from '../assets/images/icons/copy.svg'
 import CheckSVG from '../assets/images/icons/check-circle.svg'
+import CopySVG from '../assets/images/icons/copy.svg'
 
 defineProps<{
   text: string

package/components/metadata/Bridge.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const compact = inject('compact');
-const tokens = inject<ITokenPrice[]>('tokens');
+const compact = inject('compact')
+const tokens = inject<ITokenPrice[]>('tokens')
 
-const toToken = asyncComputed(() =>
-{
-   if (Array.isArray(tokens) && !tokens.length) return null;
-    return  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
-  }
-);
+const toToken = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
+  return fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
+},
+)
 
-const fromToken = asyncComputed(() =>
-{
-   if (Array.isArray(tokens) && !tokens.length) return null;
-    return  fetchTokenByAddress(props.metadata?.fromToken, props.chain_id, tokens)
-  }
-);
+const fromToken = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
+  return fetchTokenByAddress(props.metadata?.fromToken, props.chain_id, tokens)
+},
+)
 
 const isTokensSame = computed(() => {
   return toToken.value?.symbol === fromToken.value?.symbol
@@ -28,25 +27,25 @@ const isTokensSame = computed(() => {
 
 const bridgeAmountFormatted = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed(),
+  ),
+)
 </script>
 
 <template>
   <div v-if="!toToken || !fromToken" class="rounded-5 w-24 h-4 loading-box" />
   <div
-    class="flex gap-5 items-center"
     v-if="toToken && fromToken"
+    class="flex gap-5 items-center"
   >
     <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="fromToken.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="fromToken.logo_url">
       {{ bridgeAmountFormatted }}
       <span class="uppercase">{{ fromToken?.symbol }}</span>
       <SvgoBridge class="text-slate-400 w-4 h-4" />
       <template v-if="!isTokensSame">
-        <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url" />
+        <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url">
         <span class="uppercase">{{ toToken?.symbol }}</span>
       </template>
       <span class="flex items-center gap-2.5">

package/components/metadata/GasTopup.vue

@@ -1,35 +1,34 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const tokens = inject<ITokenPrice[]>('tokens');
+const tokens = inject<ITokenPrice[]>('tokens')
 
-const token = asyncComputed(() =>
-{
-  if (Array.isArray(tokens) && !tokens.length) return null;
+const token = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
 
   return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
- }
-);
+},
+)
 
-const compact = inject('compact');
+const compact = inject('compact')
 
 const formattedAmount = computed(() =>
   formatDecimal(
-    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed()
-  )
-);
+    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed(),
+  ),
+)
 </script>
 
 <template>
   <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
-  <div class="flex items-center gap-5" v-else>
+  <div v-else class="flex items-center gap-5">
     <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" />
+      <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url">
       {{ formattedAmount }}
       <span class="uppercase">{{ token?.symbol }}</span>
       <SvgoGas class="w-4 h-4 text-slate-400 mx-2" />

package/components/metadata/Permit2.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  metadata: any;
+  metadata: any
   chain_id: number | string
-}>();
+}>()
 
-const tokens = inject<ITokenPrice[]>('tokens');
+const tokens = inject<ITokenPrice[]>('tokens')
 
-const token = asyncComputed(() =>
-{
-  if (Array.isArray(tokens) && !tokens.length) return null;
+const token = asyncComputed(() => {
+  if (Array.isArray(tokens) && !tokens.length)
+    return null
   return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
-}
-);
+},
+)
 
-const calculateDate = (timestamp: number) => {
-  return new Date(timestamp * 1000).toLocaleString();
-};
+function calculateDate(timestamp: number) {
+  return new Date(timestamp * 1000).toLocaleString()
+}
 </script>
 
 <template>
   <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
   <div v-else class="inline-flex items-center gap-2 flex-wrap">
     <span>Permit2 Allowance: </span>
-    <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url" />
+    <img width="20" height="20" class="w-5 h-5" :src="token?.logo_url">
     <span class="capitalize">{{ token?.symbol }}</span>
     to
     <NuxtLink

package/eslint.config.mjs

@@ -4,6 +4,20 @@ import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt(
   antfu({
+    ignores: [
+      '*.png',
+      '*.ico',
+      '*.toml',
+      '*.yml',
+      '.github/',
+      'deployments/',
+      '*.patch',
+      '*.txt',
+      'Dockerfile',
+      'public/',
+      'contracts/',
+      'yarn.lock',
+    ],
     yaml: false,
     rules: {
       'style/max-statements-per-line': 'off',

package/nuxt.config.ts

@@ -3,6 +3,7 @@
 
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss', 'nuxt-svgo', '@vueuse/nuxt', '@nuxt/eslint'],
+
   svgo: {
     defaultImport: 'component',
     autoImportPath: './assets/images/icons',
@@ -10,6 +11,7 @@ export default defineNuxtConfig({
       plugins: ['prefixIds'],
     },
   },
+
   // vite: {
   //   plugins: [
   //     ViteComponents({
@@ -22,4 +24,6 @@ export default defineNuxtConfig({
       standalone: false,
     },
   },
+
+  compatibilityDate: '2024-09-18',
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instadapp/avocado-base",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",
   "engines": {
@@ -15,18 +15,18 @@
     "typecheck": "nuxi typecheck"
   },
   "dependencies": {
-    "@antfu/eslint-config": "^2.25.2",
+    "@antfu/eslint-config": "^3.6.2",
     "@vueuse/nuxt": "^10.2.0",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
-    "viem": "^2.19.6",
+    "viem": "^2.21.54",
     "xxhashjs": "^0.2.2"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^0.5.0",
+    "@nuxt/eslint": "^0.5.7",
     "@nuxtjs/tailwindcss": "^6.12.1",
-    "nuxt": "3.13.0",
-    "nuxt-svgo": "^4.0.0",
+    "nuxt": "3.13.2",
+    "nuxt-svgo": "^4.0.6",
     "vue-tippy": "^6.0.0"
   }
 }

package/server/utils/index.ts

@@ -1,4 +1,4 @@
-export * from "../../utils/avocado";
-export * from "../../utils/network";
-export * from "../../utils/bignumber";
-export * from "../../utils/formatter";
+export * from '../../utils/avocado'
+export * from '../../utils/bignumber'
+export * from '../../utils/formatter'
+export * from '../../utils/network'

package/utils/avocado.ts

@@ -1,24 +1,24 @@
-export const AVO_PROD_CHAIN_ID = 634;
-export const AVO_PROD_CHAIN_NAME = "Avocado";
+export const AVO_PROD_CHAIN_ID = 634
+export const AVO_PROD_CHAIN_NAME = 'Avocado'
 
-export const AVO_STAGING_CHAIN_ID = 63400;
-export const AVO_STAGING_CHAIN_NAME = "Avocado Testnet";
+export const AVO_STAGING_CHAIN_ID = 63400
+export const AVO_STAGING_CHAIN_NAME = 'Avocado Testnet'
 
-export const AVO_PROD_EXPLORER_URL = "https://avoscan.co";
-export const AVO_STAGING_EXPLORER_URL = "https://explorer.avocado.instad.app";
+export const AVO_PROD_EXPLORER_URL = 'https://avoscan.co'
+export const AVO_STAGING_EXPLORER_URL = 'https://explorer.avocado.instad.app'
 
-export const AVO_PROD_FORWARDER_ADDR =
-  "0x375F6B0CD12b34Dc28e34C26853a37012C24dDE5";
-export const AVO_STAGING_FORWARDER_ADDR =
-  "0x8CDaAC0371a443985c6Faf07938dDAa7A5818674";
+export const AVO_PROD_FORWARDER_ADDR
+  = '0x375F6B0CD12b34Dc28e34C26853a37012C24dDE5'
+export const AVO_STAGING_FORWARDER_ADDR
+  = '0x8CDaAC0371a443985c6Faf07938dDAa7A5818674'
 
-export const AVO_PROD_DEPOSIT_ADDRESS =
-  "0xE8385fB3A5F15dED06EB5E20E5A81BF43115eb8E";
-export const AVO_STAGING_DEPOSIT_ADDRESS =
-  "0x853e991d800Dfd6bC1F83AED3310e859482323dc";
+export const AVO_PROD_DEPOSIT_ADDRESS
+  = '0xE8385fB3A5F15dED06EB5E20E5A81BF43115eb8E'
+export const AVO_STAGING_DEPOSIT_ADDRESS
+  = '0x853e991d800Dfd6bC1F83AED3310e859482323dc'
 
-export const AVO_PROD_RPC_URL = "https://rpc.avocado.instadapp.io";
+export const AVO_PROD_RPC_URL = 'https://rpc.avocado.instadapp.io'
 
-export const AVO_STAGING_RPC_URL = "https://rpc.avocado.instad.app";
+export const AVO_STAGING_RPC_URL = 'https://rpc.avocado.instad.app'
 
-export const blockQueryURL = "https://blockquery.instadapp.io";
+export const blockQueryURL = 'https://blockquery.instadapp.io'

package/utils/bignumber.ts

@@ -1,51 +1,62 @@
-import { BigNumber } from "bignumber.js";
-import { BigNumber as BN } from "ethers";
+import { BigNumber } from 'bignumber.js'
+import { BigNumber as BN } from 'ethers'
 
-type CombinedBigNumber = BigNumber | string | number;
+type CombinedBigNumber = BigNumber | string | number
 
-export const toBN = (value: BigNumber.Value | BN) =>
-  new BigNumber(BN.isBigNumber(value) ? value.toString() : value);
-export const isZero = (value: BigNumber.Value | BN) => toBN(value).isZero();
-export const times = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).times(toBN(b));
-export const minus = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).minus(toBN(b));
-export const plus = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).plus(toBN(b));
-export const lte = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).lte(toBN(b));
-export const gte = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).gte(toBN(b));
-export const div = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).div(toBN(b));
-export const lt = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).lt(toBN(b));
-export const gt = (a: BigNumber.Value | BN, b: BigNumber.Value | BN) =>
-  toBN(a).gt(toBN(b));
-export const ensureValue = (value: any) => {
-  if (!value) return toBN("0");
-  if (toBN(value).isNaN()) return toBN("0");
+export function toBN(value: BigNumber.Value | BN) {
+  return new BigNumber(BN.isBigNumber(value) ? value.toString() : value)
+}
+export const isZero = (value: BigNumber.Value | BN) => toBN(value).isZero()
+export function times(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).times(toBN(b))
+}
+export function minus(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).minus(toBN(b))
+}
+export function plus(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).plus(toBN(b))
+}
+export function lte(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).lte(toBN(b))
+}
+export function gte(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).gte(toBN(b))
+}
+export function div(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).div(toBN(b))
+}
+export function lt(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).lt(toBN(b))
+}
+export function gt(a: BigNumber.Value | BN, b: BigNumber.Value | BN) {
+  return toBN(a).gt(toBN(b))
+}
+export function ensureValue(value: any) {
+  if (!value)
+    return toBN('0')
+  if (toBN(value).isNaN())
+    return toBN('0')
 
-  return toBN(value);
-};
-export const max = (...args: BigNumber.Value[]) => {
-  return BigNumber.max(...args);
-};
+  return toBN(value)
+}
+export function max(...args: BigNumber.Value[]) {
+  return BigNumber.max(...args)
+}
 
 export function pow(value: CombinedBigNumber, exponent: string | number) {
-  return toBN(value).pow(toBN(exponent));
+  return toBN(value).pow(toBN(exponent))
 }
 
 export function toWei(val: CombinedBigNumber, decimals: number): string {
-  const num = toBN(val);
-  const multiplier = pow(10, decimals);
-  return times(num, multiplier).toFixed(0);
+  const num = toBN(val)
+  const multiplier = pow(10, decimals)
+  return times(num, multiplier).toFixed(0)
 }
 
 export function fromWei(val: CombinedBigNumber, decimal = 18) {
-  return toBN(val).div(new BigNumber(10).pow(decimal));
+  return toBN(val).div(new BigNumber(10).pow(decimal))
 }
 
 export function abs(value: CombinedBigNumber) {
-  return toBN(value).abs();
+  return toBN(value).abs()
 }