@instadapp/avocado-base 0.0.0-dev.d4500cb → 0.0.0-dev.d66833c

package/.github/workflows/npm-publish-dev.yml

@@ -3,7 +3,7 @@ name: NPM Publish(Dev)
 on:
   push:
     branches:
-      - 'main'
+      - "main"
 
 jobs:
   dev-npm-publish:
@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: ">=v18.18.0"
 
       - uses: actions/cache@v3
         with:
@@ -48,6 +48,3 @@ jobs:
           token: ${{ secrets.NPM_AUTH_TOKEN }}
           tag: dev
           access: public
-
-
-

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/components/ActionLogo.vue

@@ -1,19 +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 HammerSVG from '~/assets/images/icons/hammer.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
@@ -22,19 +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 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'"/>
+  <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

@@ -23,6 +23,10 @@ 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 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>

package/components/AuthorityAvatar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// @ts-expect-error
 import * as XXH from 'xxhashjs';
 
 defineProps<{
@@ -19,11 +20,9 @@ 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,15 @@
 <template>
-  <template v-if="isNetworkNotAvailable">
-    <svg v-bind="$attrs" class="dark:hidden block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-      <rect width="20" height="20" fill="#CBD5E1" rx="10" />
-      <path fill="#fff" 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" />
-    </svg>
-    <svg v-bind="$attrs" class="dark:block hidden" 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"
-        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" />
-    </svg>
-  </template>
-  <span v-else-if="stroke" class="outline stroke-color dark:outline-[#161E2D] outline-[#F8FAFC]  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`"/>
+  <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"
+      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" />
+  </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>

package/components/CopyClipboard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CopySVG from '~/assets/images/icons/copy.svg'
-import CheckCircle from '~/assets/images/icons/check-circle.svg'
+import CopySVG from '../assets/images/icons/copy.svg'
+import CheckCircle from '../assets/images/icons/check-circle.svg'
 
 defineProps<{
   text: string
@@ -12,22 +12,16 @@ const slots = useSlots()
 </script>
 
 <template>
-  <button
-    class="text-slate-400 font-semibold inline-flex items-center gap-2.5"
-    @click.stop="copy(text)"
-  >
+  <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-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"
-      />
+      <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 />

package/components/metadata/Signers.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Tippy } from 'vue-tippy'
-import Info2 from '~/assets/images/icons/info-2.svg'
+import Info2 from '../../assets/images/icons/info-2.svg'
 
 defineProps<{
   metadata: {
@@ -14,44 +14,47 @@ defineProps<{
 <template>
   <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]" />
-          <Tippy max-width="none" interactive>
-            <template #default>
-              <p class="text-xs leading-5 text-slate-500 dark:text-slate-400">
+      <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]" />
+        <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>
+          </template>
+          <template #content>
             {{ address }}
-            </template>
-         </Tippy>          
-        </div>
+          </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]].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">
+      <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]" />
 
         <Tippy max-width="none" interactive>
-            <template #default>
-               <p class="text-xs leading-5 text-slate-400">
-                {{ shortenHash(address, 2) }}
-              </p>
-            </template>
-            <template #content>
+          <template #default>
+            <p class="text-xs leading-5 text-slate-400">
+              {{ shortenHash(address, 2) }}
+            </p>
+          </template>
+          <template #content>
             {{ address }}
-            </template>
-         </Tippy>      
+          </template>
+        </Tippy>
       </div>
-      
+
       <Tippy max-width="none" interactive tag="button" content-tag="div" content-class="content-wrapper">
         <template #default>
           <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 text-slate-400 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/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.0-dev.d4500cb",
+  "version": "0.0.0-dev.d66833c",
   "type": "module",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",
+  "engines": {
+    "node": ">=v18.18.0"
+  },
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "generate:contracts": "rimraf contracts && typechain --target=ethers-v5 'abi/*.json' --out-dir 'contracts'"
+    "generate:contracts": "rimraf contracts && typechain --target=ethers-v5 'abi/*.json' --out-dir 'contracts'",
+    "typecheck": "nuxi typecheck"
   },
   "devDependencies": {
-    "@instadapp/avocado": "^0.1.10",
-    "@instadapp/avocado-dev": "npm:@instadapp/avocado@dev",
-    "@nuxtjs/tailwindcss": "^6.6.5",
+    "@nuxtjs/tailwindcss": "^6.11.3",
     "@typechain/ethers-v5": "^10.2.0",
-    "nuxt": "^3.6.1",
-    "nuxt-svgo": "^3.1.0",
+    "nuxt": "^3.10.1",
+    "nuxt-svgo": "^4.0.0",
     "rimraf": "^3.0.2",
     "typechain": "^8.1.1",
     "unplugin-vue-components": "^0.25.1",
@@ -27,6 +29,7 @@
     "@vueuse/nuxt": "^10.2.0",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
+    "viem": "^2.7.16",
     "xxhashjs": "^0.2.2"
   }
 }

package/utils/formatter.ts

@@ -19,7 +19,7 @@ export function formatPercent(
   return formatter.format(valueAsNumber);
 }
 
-export function shortenHash(hash: string, length: number = 4) {
+export function shortenHash(hash: string | `0x${string}`, length: number = 4) {
   if (!hash) return;
   if (hash.length < 12) return hash;
   const beginningChars = hash.startsWith("0x") ? length + 2 : length;

package/utils/metadata.ts

@@ -19,6 +19,7 @@ export const MetadataEnums = {
   "remove-signers": "remove-signers",
   "change-threshold": "change-threshold",
   import: "import",
+  mass: "mass",
   "tx-builder": "tx-builder",
   "avocado-bridge": "avocado-bridge",
 } as const;
@@ -72,6 +73,7 @@ const actionMetadataTypes: Record<MetadataTypes, string[]> = {
   "change-threshold": ["uint8 count"],
   rejection: ["bytes32 id"],
   "avocado-bridge": ["bytes32 id", "uint256 toChainId"],
+  mass: ["bool isMass"],
 };
 
 const encodeMetadata = (props: MetadataProps) => {
@@ -366,6 +368,15 @@ export const encodeImportMetadata = (
   return single ? encodeMultipleActions(data) : data;
 };
 
+export const encodeMassMetadata = (single = true) => {
+  const data = encodeMetadata({
+    type: MetadataEnums.mass,
+    encodedData: '0x',
+  });
+
+  return single ? encodeMultipleActions(data) : data;
+}
+
 export const encodeAddSignersMetadata = (
   addresses: string[],
   single = true
@@ -546,6 +557,10 @@ const typesPayload: IPayload = {
     id: data.id,
     toChainId: data.toChainId ? data.toChainId.toString() : null,
   }),
+  mass: (data, type) => ({
+    type: 'Chain Agnostic Payments',
+    data,
+  }),
 };
 
 const parseMetadata = (metadata: string) => {
@@ -567,7 +582,7 @@ const parseMetadata = (metadata: string) => {
       decodedMetadata.type
     ) as keyof typeof actionMetadataTypes;
 
-    const decodedData = ethers.utils.defaultAbiCoder.decode(
+    const decodedData = decodedMetadata?.data === '0x' ? '' : ethers.utils.defaultAbiCoder.decode(
       actionMetadataTypes[type],
       decodedMetadata.data
     );

package/utils/network.ts

@@ -1,4 +1,21 @@
 import { ethers } from "ethers";
+import {
+  polygon,
+  arbitrum,
+  mainnet,
+  base,
+  optimism,
+  polygonZkEvm,
+  bsc,
+  avalanche,
+  fantom,
+  gnosis,
+  aurora,
+  fuse,
+  scroll,
+  opBNB,
+  mode,
+} from "viem/chains";
 import {
   AVO_PROD_CHAIN_NAME,
   AVO_PROD_CHAIN_ID,
@@ -9,11 +26,44 @@ import {
   AVO_STAGING_RPC_URL,
   AVO_STAGING_EXPLORER_URL,
 } from "./avocado";
+import { defineChain } from "viem";
 
 export const bridgeDisabledNetworks = [];
 
 export const networksSimulationNotSupported = [1313161554, 1101];
 
+const avocado = defineChain({
+  id: AVO_PROD_CHAIN_ID,
+  name: AVO_PROD_CHAIN_NAME,
+  nativeCurrency: {
+    name: "Avocado",
+    symbol: "USDC",
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: { http: [AVO_PROD_RPC_URL] },
+  },
+  blockExplorers: {
+    default: { name: "Avoscan", url: AVO_PROD_EXPLORER_URL },
+  },
+});
+
+const avocadoStaging = defineChain({
+  id: AVO_STAGING_CHAIN_ID,
+  name: AVO_STAGING_CHAIN_NAME,
+  nativeCurrency: {
+    name: "Avocado",
+    symbol: "USDC",
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: { http: [AVO_STAGING_RPC_URL] },
+  },
+  blockExplorers: {
+    default: { name: "Avoscan", url: AVO_STAGING_EXPLORER_URL },
+  },
+});
+
 export const networks: Network[] = [
   {
     name: "Polygon",
@@ -22,6 +72,7 @@ export const networks: Network[] = [
     zerionName: "polygon",
     color: "#7A4ADD",
     chainId: 137,
+    viemChain: polygon,
     balanceResolverAddress: "0x58632D23120b20650262b8A629a14e4F4043E0D9",
     usdcAddress: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174",
     explorerUrl: "https://polygonscan.com",
@@ -46,6 +97,7 @@ export const networks: Network[] = [
     debankName: "arb",
     ankrName: "arbitrum",
     zerionName: "arbitrum",
+    viemChain: arbitrum,
     color: "#2D374B",
     chainId: 42161,
     usdcAddress: "0xff970a61a04b1ca14834a43f5de4533ebddb5cc8",
@@ -72,6 +124,7 @@ export const networks: Network[] = [
     debankName: "eth",
     ankrName: "eth",
     zerionName: "ethereum",
+    viemChain: mainnet,
     chainId: 1,
     explorerUrl: "https://etherscan.io",
     fakeTransactionHash:
@@ -97,6 +150,7 @@ export const networks: Network[] = [
     chainId: 8453,
     color: "#1E2024",
     ankrName: "base",
+    viemChain: base,
     explorerUrl: "https://basescan.org",
     fakeTransactionHash:
       "0xf7833d80da33730c4fc5d4c64151f0eaa64c0c0535be022af0228a44cc4e9c8e",
@@ -122,6 +176,7 @@ export const networks: Network[] = [
     ankrName: "optimism",
     zerionName: "optimism",
     color: "#FF0420",
+    viemChain: optimism,
     chainId: 10,
     apiURL: "https://api-optimistic.etherscan.io",
     usdcAddress: "0x7f5c764cbc14f9669b88837ca1490cca17c31607",
@@ -147,6 +202,7 @@ export const networks: Network[] = [
     chainId: 1101,
     color: "#8544f6",
     ankrName: "polygon_zkevm",
+    viemChain: polygonZkEvm,
     explorerUrl: "https://zkevm.polygonscan.com",
     apiURL: "https://api-zkevm.polygonscan.com",
     balanceResolverAddress: "0x48D1Fa5Ee6691a1E0B45d2B515650997BEA27a01",
@@ -174,6 +230,7 @@ export const networks: Network[] = [
     color: "#F3BA2F",
     chainId: 56,
     explorerUrl: "https://bscscan.com",
+    viemChain: bsc,
     fakeTransactionHash:
       "0x897d54bf8e492f840bd4d8f1e743bfcab8226ab4d5a899e47ee433dcd6d6abf7",
     apiURL: "https://api.bscscan.com",
@@ -198,6 +255,7 @@ export const networks: Network[] = [
     ankrName: "avalanche",
     zerionName: "avalanche",
     color: "#EB5757",
+    viemChain: avalanche,
     chainId: 43114,
     usdcAddress: "0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e",
     balanceResolverAddress: "0x63009f31D054E0ac9F321Cf0D642375236A4Bf1E",
@@ -225,6 +283,7 @@ export const networks: Network[] = [
     explorerUrl: "https://ftmscan.com",
     ankrName: "fantom",
     color: "#1969ff",
+    viemChain: fantom,
     get serverRpcUrl() {
       return process.env?.FANTOM_RPC_URL || this.params.rpcUrls[0];
     },
@@ -248,6 +307,7 @@ export const networks: Network[] = [
     zerionName: "xdai",
     color: "#04795C",
     ankrName: "gnosis",
+    viemChain: gnosis,
     chainId: 100,
     balanceResolverAddress: "0xfaa244e276b1597f663975ed007ee4ff70d27849",
     explorerUrl: "https://gnosisscan.io",
@@ -273,6 +333,7 @@ export const networks: Network[] = [
     chainId: 1313161554,
     zerionName: "aurora",
     color: "#78d64b",
+    viemChain: aurora,
     explorerUrl: "https://explorer.mainnet.aurora.dev",
     fakeTransactionHash:
       "0x0923401c5a80c39a5cd57c098a6c4729edbefd0db6894def7d349493f4ff3ec6",
@@ -297,6 +358,7 @@ export const networks: Network[] = [
     zerionName: "fuse",
     color: "#78d64b",
     explorerUrl: "https://explorer.fuse.io",
+    viemChain: fuse,
     fakeTransactionHash:
       "0xf22a8031de9b978a57c728e18c6b54633356c39db4d0466e53b9b7c3ee7f8def",
     get serverRpcUrl() {
@@ -318,7 +380,9 @@ export const networks: Network[] = [
     name: "Scroll",
     chainId: 534352,
     color: "#78d64b",
+    ankrName: 'scroll',
     explorerUrl: "https://scrollscan.com",
+    viemChain: scroll,
     fakeTransactionHash:
       "0x6bf297c414264fc8cddd47224632b4426a02138df2f50fe891eca87f6aefea01",
     get serverRpcUrl() {
@@ -339,6 +403,7 @@ export const networks: Network[] = [
     chainId: 204,
     color: "#78d64b",
     explorerUrl: "https://opbnbscan.com",
+    viemChain: opBNB,
     fakeTransactionHash:
       "0xb9438a3eae61442bc7d419d79930370ce09ac0f46e0695025751e3bfe1a931e7",
     get serverRpcUrl() {
@@ -354,31 +419,52 @@ export const networks: Network[] = [
       },
     },
   },
-  {
-    name: "Manta Pacific",
-    chainId: 169,
-    explorerUrl: "https://manta-pacific.l2scan.co",
-    params: {
-      rpcUrls: ["https://pacific-rpc.manta.network/http"],
-      chainName: "Manta Pacific",
-      nativeCurrency: {
-        name: "Ethereum",
-        symbol: "ETH",
-        decimals: 18,
-      },
-    },
-    color: "#78d64b",
-    fakeTransactionHash: "0x3fB128aA5AC254C8539996B11C587E521AE0d3ab",
-    get serverRpcUrl() {
-      return process.env?.MANTA_RPC_URL || this.params.rpcUrls[0];
-    },
-  },
+  // {
+  //   chainId: 34443,
+  //   name: "Mode",
+  //   color: "#d7ff00",
+  //   explorerUrl: 'https://explorer.mode.network',
+  //   fakeTransactionHash: '0xb58002db3481f2c51855a91280ec940d0bebec075c4b362b9f90c21a2b14edbe',
+  //   params: {
+  //     rpcUrls: ["https://1rpc.io/mode"],
+  //     chainName: "Mode",
+  //     nativeCurrency: {
+  //       name: "Ethereum",
+  //       symbol: "ETH",
+  //       decimals: 18,
+  //     }
+  //   },
+  //   get serverRpcUrl() {
+  //     return process.env?.MODE_RPC_URL || this.params.rpcUrls[0];
+  //   },
+  //   viemChain: mode,
+  // },
+  // {
+  //   name: "Manta Pacific",
+  //   chainId: 169,
+  //   explorerUrl: "https://pacific-explorer.manta.network",
+  //   params: {
+  //     rpcUrls: ["https://pacific-rpc.manta.network/http"],
+  //     chainName: "Manta Pacific",
+  //     nativeCurrency: {
+  //       name: "Ethereum",
+  //       symbol: "ETH",
+  //       decimals: 18,
+  //     },
+  //   },
+  //   color: "#78d64b",
+  //   fakeTransactionHash: "0x3fB128aA5AC254C8539996B11C587E521AE0d3ab",
+  //   get serverRpcUrl() {
+  //     return process.env?.MANTA_RPC_URL || this.params.rpcUrls[0];
+  //   },
+  // },
   {
     name: AVO_PROD_CHAIN_NAME,
     chainId: AVO_PROD_CHAIN_ID,
     isAvocado: true,
     balanceResolverAddress: "",
     fakeTransactionHash: "",
+    viemChain: avocado,
     color: "#16A34A",
     usdcAddress: "",
     serverRpcUrl: AVO_PROD_RPC_URL,
@@ -400,6 +486,7 @@ export const networks: Network[] = [
     serverRpcUrl: AVO_STAGING_RPC_URL,
     color: "#16A34A",
     explorerUrl: AVO_STAGING_EXPLORER_URL,
+    viemChain: avocadoStaging,
     fakeTransactionHash: "",
     isAvocado: true,
     balanceResolverAddress: "",

package/utils/utils.d.ts

@@ -1,3 +1,5 @@
+import type { Chain } from "viem";
+
 declare global {
   type ChainId =
     | 1
@@ -16,7 +18,8 @@ declare global {
     | 534352
     | 204
     | 63400
-    | 169;
+    | 169
+    | 34443
 
   type ISlackMessageType = "danger" | "error" | "success" | "banner";
 
@@ -39,6 +42,7 @@ declare global {
     usdcAddress?: string;
     explorerUrl: string;
     fakeTransactionHash: string;
+    viemChain: Chain;
     apiURL?: string;
     params: {
       chainName?: string;