⚡️ perf: Bundle optimization!

.eslintrc

@@ -1,5 +1,8 @@
 {
-  "extends": "@antfu",
+  "extends": [
+    "@antfu",
+    "plugin:import/recommended",
+  ],
   "rules": {
     "brace-style": [
       "error",
@@ -26,6 +29,10 @@
     "@typescript-eslint/consistent-type-definitions": [
       "error",
       "type"
-    ]
+    ],
+    /**
+     * ESLint import rules
+     */
+    "import/no-extraneous-dependencies": 1,
   }
 }

.gitignore

@@ -8,3 +8,6 @@ yarn-error.log
 # Yalc
 .yalc
 yalc.lock
+
+stats.html
+.idea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viaprotocol/web3-wallets",
-  "version": "1.0.31",
+  "version": "1.1.0",
   "private": false,
   "description": "Universal interface for web3 wallets",
   "author": "Via Protocol (https://via.exchange)",
@@ -17,29 +17,45 @@
     "web3",
     "typescript"
   ],
-  "browser": {
-    "events": "events",
-    "path": "path-browserify",
-    "stream": "stream-browserify",
-    "util": "node-util"
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "module": "./build/index.esm.js",
+      "default": "./build/index.cjs.js"
+    },
+    "./types": {
+      "types": "./build/types.d.ts"
+    }
+  },
+  "main": "build/index.cjs.js",
+  "module": "build/index.esm.js",
+  "types": "build/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "types": [
+        "build/types.d.ts"
+      ]
+    }
   },
-  "main": "index.js",
-  "module": "index.js",
-  "types": "index.d.ts",
+  "files": [
+    "/build"
+  ],
   "engines": {
     "node": ">=16",
     "npm": ">=7"
   },
   "scripts": {
     "clean": "shx rm -rf ./build",
-    "build": "yarn clean && node esbuild.config.mjs && ts-patch i -s && tsc -p tsconfig.build.json",
+    "build": "yarn clean && microbundle --entry src/index.ts --jsx React.createElement --visualize --tsconfig tsconfig.json --compress false --format esm,cjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "package": "shx cp -R package.json ./build && shx cp -R README.md ./build",
-    "publish:pre": "yarn build && yarn package",
-    "publish:yalc": "yarn publish:pre && cd build && yalc publish --no-script --push",
-    "publish:rc": "npm version prerelease --preid=rc && yarn publish:pre && cd build && npm publish --tag rc --access public",
-    "publish:latest": "yarn publish:pre && cd build && npm publish --tag latest --access public"
+    "publish:yalc": "yarn build && yalc publish --no-script --push",
+    "publish:rc": "npm version prerelease --preid=rc && yarn build && npm publish --tag rc --access public",
+    "publish:latest": "yarn build && npm publish --tag latest --access public",
+    "build:test": "microbundle --visualise --tsconfig tsconfig.json",
+    "test:treeshake": "agadoo"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -59,11 +75,14 @@
     }
   ],
   "peerDependencies": {
+    "ethers": "^5.6.8",
     "react": "^18.1.0"
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.3.0",
+    "@cosmjs/launchpad": "0.24.1",
     "@cosmjs/stargate": "^0.27.0",
+    "@ethersproject/providers": "^5.6.8",
     "@gnosis.pm/safe-apps-provider": "^0.13.1",
     "@gnosis.pm/safe-apps-sdk": "^7.8.0",
     "@keplr-wallet/cosmos": "^0.9.9",
@@ -75,19 +94,19 @@
     "@solana/web3.js": "^1.43.5",
     "@tanstack/react-query": "^4.1.3",
     "@walletconnect/web3-provider": "^1.7.8",
-    "ethers": "^5.6.8",
     "ismobilejs": "^1.1.1",
     "long": "^5.2.0",
-    "path": "^0.12.7",
     "rango-sdk": "^0.0.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.1",
     "@types/node-fetch": "^2.6.2",
     "@types/react": "^18.0.12",
-    "esbuild": "^0.14.42",
-    "esbuild-node-externals": "^1.4.1",
+    "agadoo": "^2.0.0",
     "eslint": "^8.18.0",
+    "eslint-plugin-import": "^2.26.0",
+    "microbundle": "^0.15.1",
+    "rollup-plugin-polyfill-node": "^0.10.2",
     "shx": "^0.3.4",
     "ts-patch": "^2.0.1",
     "typescript": "^4.7.3",

src/components/balance/config.ts

@@ -8,6 +8,7 @@ import type { TAvailableWalletNames, TWalletStore } from '@/types'
 const evmValidator = ({ provider }: TWalletStore) => Boolean(provider)
 
 const BALANCE_PROVIDER_BY_NAME: Record<TAvailableWalletNames, TBalanceProviderMetadata | null> = {
+  // 🚧 TODO: Refactor using lazy loading
   MetaMask: {
     component: BalanceEVM,
     validatePropsFunc: evmValidator

src/constants.ts

@@ -1,6 +1,6 @@
 import type { TChainWallet, TChainsWithWalletsLink } from './types'
 
-export const WALLET_NAMES = {
+export const WALLET_NAMES = /* #__PURE__ */ {
   WalletConnect: 'WalletConnect',
   MetaMask: 'MetaMask',
   xDefi: 'xDefi',
@@ -11,11 +11,11 @@ export const WALLET_NAMES = {
   Safe: 'Safe'
 } as const
 
-export const WALLET_SUBNAME = {
+export const WALLET_SUBNAME = /* #__PURE__ */ {
   Safe: 'Safe'
 } as const
 
-export const NETWORK_IDS = {
+export const NETWORK_IDS = /* #__PURE__ */ {
   Ethereum: 1,
   Rinkeby: 4,
   Optimism: 10,
@@ -81,7 +81,7 @@ export const SOL_WALLETS_CONFIG = [WALLET_NAMES.Phantom]
 export const COSMOS_WALLETS_CONFIG = [WALLET_NAMES.Keplr]
 
 export const BTC_CHAINS = [NETWORK_IDS.BTC, NETWORK_IDS.Litecoin, NETWORK_IDS.BCH]
-export const EVM_CHAINS = Object.keys(NETWORK_IDS).filter(chainName => NETWORK_IDS[chainName as keyof typeof NETWORK_IDS] > 0).map(chainName => NETWORK_IDS[chainName as keyof typeof NETWORK_IDS])
+export const EVM_CHAINS = /* #__PURE__ */ Object.keys(NETWORK_IDS).filter(chainName => NETWORK_IDS[chainName as keyof typeof NETWORK_IDS] > 0).map(chainName => NETWORK_IDS[chainName as keyof typeof NETWORK_IDS])
 export const SOL_CHAINS = [NETWORK_IDS.Solana, NETWORK_IDS.SolanaTestnet]
 export const COSMOS_CHAINS = [NETWORK_IDS.Cosmos, NETWORK_IDS.Osmosis, NETWORK_IDS.Sifchain] as const
 
@@ -101,11 +101,11 @@ export const chainWalletMap: TChainWallet[] = [
   { name: 'BCH', chainId: NETWORK_IDS.BCH, network: 'bitcoincash' }
 ]
 
-export const cosmosChainWalletMap = chainWalletMap.filter(chainWallet => COSMOS_CHAINS.includes(chainWallet.chainId as any))
+export const cosmosChainWalletMap = /* #__PURE__ */ chainWalletMap.filter(chainWallet => COSMOS_CHAINS.includes(chainWallet.chainId as any))
 
-export const btcChainWalletMap = chainWalletMap.filter(chainWallet => BTC_CHAINS.includes(chainWallet.chainId as any))
+export const btcChainWalletMap = /* #__PURE__ */ chainWalletMap.filter(chainWallet => BTC_CHAINS.includes(chainWallet.chainId as any))
 
-export const CHAINS_WITH_WALLET: TChainsWithWalletsLink[] = [
+export const CHAINS_WITH_WALLET: TChainsWithWalletsLink[] = /* #__PURE__ */ [
   {
     key: 'BTC',
     chains: BTC_CHAINS,

src/context/QueryProvider.tsx

@@ -5,7 +5,7 @@ type TQueryProviderProps = {
   children: ReactNode
 }
 
-const queryClient = new QueryClient()
+const queryClient = /* #__PURE__ */ new QueryClient()
 
 function QueryProvider({ children }: TQueryProviderProps) {
   return (

src/context/WalletContext.ts

@@ -1,11 +1,11 @@
 import { createContext } from 'react'
-import { WALLET_NAMES } from '..'
+import { WALLET_NAMES } from '../constants'
 
 import type { TWallet, TWalletState, TWalletStore } from '../types'
-import { WalletStatusEnum } from '../types'
+import { WALLET_STATUS } from '../types'
 
-const INITIAL_STATE: TWalletStore = {
-  status: WalletStatusEnum.NOT_INITED,
+const INITIAL_STATE: TWalletStore = /* #__PURE__ */ {
+  status: WALLET_STATUS.NOT_INITED,
   isConnected: false, // TODO: Remove (use status)
   name: null,
   subName: null,
@@ -22,7 +22,7 @@ const INITIAL_STATE: TWalletStore = {
 
 const INITIAL_WALLET_STATE = Object.values(WALLET_NAMES).reduce((acc, walletName) => ({ ...acc, [walletName]: INITIAL_STATE }), {} as TWalletState)
 
-const WalletContext = createContext<TWallet>({
+const WalletContext = /* #__PURE__ */ createContext<TWallet>({
   ...INITIAL_STATE,
   walletAddressesHistory: {},
   walletState: INITIAL_WALLET_STATE,