chore: improve and document code splitting

docs/code-splitting.md

@@ -0,0 +1,31 @@
+# Code Splitting
+
+As explained in [this link](https://legacy.reactjs.org/docs/code-splitting.html), Code-Splitting is a feature supported by some bundlers that allows the creation of multiple bundles that can be loaded dynamically at runtime. This technique enables us to "lazily-load" only the necessary components for the user's current needs, significantly enhancing the performance of the application.
+
+
+## What we did
+
+- Splitting Signers from initial bundle
+
+
+## What we are going to do
+
+Currently, we've achieved a good initial bundle size based on analyses conducted using tools like `lighthouse`. Some potential future works that could contribute to the journey ahead are listed below:
+
+- Implement retry mechanisms for dynamic imports to address issues with failing to import certain chunks.
+- Maintain the applied changes to prevent future modifications from undoing the achieved results.
+- Identify potential areas that can be dynamically imported.
+- Attempt to enhance clients that have integrated widgets (like dapp) to improve overall performance.
+
+
+## Technical Consideration
+
+- Avoid small chunks, they don't add any value to user. they will have network overhead as well.
+- Chunks will be built using esbuild's [splitting](https://esbuild.github.io/api/#splitting) option.
+- Code splitting for libraries is off by default. To enable the option, add the "--splitting" parameter to the "build" script of that package.
+
+
+## Notes
+
+The `@rango-dev/signer-solana` package is not dynamically imported because it has a major dependency ("@solana/web3.js") that is also a dependency in `@solflare-wallet/sdk`, which is used in `provider-solflare`. This dependency cannot be dynamically imported, so importing `@rango-dev/signer-solana` dynamically would only result in a very small reduction in the bundle size.
+

wallets/provider-argentx/src/signer.ts

@@ -1,12 +1,12 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultStarknetSigner } from '@rango-dev/signer-starknet';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const signers = new DefaultSignerFactory();
-  const { DefaultStarknetSigner } = await import('@rango-dev/signer-starknet');
   signers.registerSigner(TxType.STARKNET, new DefaultStarknetSigner(provider));
   return signers;
 }

wallets/provider-bitget/src/signer.ts

@@ -1,5 +1,6 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultTronSigner } from '@rango-dev/signer-tron';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
@@ -10,7 +11,6 @@ export default async function getSigners(
   const tronProvider = getNetworkInstance(provider, Networks.TRON);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { DefaultTronSigner } = await import('@rango-dev/signer-tron');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.TRON, new DefaultTronSigner(tronProvider));
   return signers;

wallets/provider-braavos/src/signer.ts

@@ -1,12 +1,12 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultStarknetSigner } from '@rango-dev/signer-starknet';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const signers = new DefaultSignerFactory();
-  const { DefaultStarknetSigner } = await import('@rango-dev/signer-starknet');
   signers.registerSigner(TxType.STARKNET, new DefaultStarknetSigner(provider));
   return signers;
 }

wallets/provider-brave/src/signer.ts

@@ -3,14 +3,15 @@ import type { SignerFactory } from 'rango-types';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './solana-signer.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const ethProvider = getNetworkInstance(provider, Networks.ETHEREUM);
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { CustomSolanaSigner } = await import('./solana-signer.js');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(solProvider));
   return signers;

wallets/provider-clover/src/signer.ts

@@ -3,14 +3,15 @@ import type { SignerFactory } from 'rango-types';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './solana-signer.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const ethProvider = getNetworkInstance(provider, Networks.ETHEREUM);
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { CustomSolanaSigner } = await import('./solana-signer.js');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(solProvider));
   return signers;

wallets/provider-coin98/package.json

@@ -14,7 +14,7 @@
     "src"
   ],
   "scripts": {
-    "build": "node ../../scripts/build/command.mjs --path wallets/provider-coin98 --splitting",
+    "build": "node ../../scripts/build/command.mjs --path wallets/provider-coin98",
     "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
@@ -31,4 +31,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

wallets/provider-coin98/src/signer.ts

@@ -3,14 +3,15 @@ import type { SignerFactory } from 'rango-types';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './solana-signer.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const ethProvider = getNetworkInstance(provider, Networks.ETHEREUM);
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { CustomSolanaSigner } = await import('./solana-signer.js');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(solProvider));
   return signers;

wallets/provider-coinbase/src/signer.ts

@@ -3,14 +3,15 @@ import type { SignerFactory } from 'rango-types';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './solana-signer.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const ethProvider = getNetworkInstance(provider, Networks.ETHEREUM);
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { CustomSolanaSigner } = await import('./solana-signer.js');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(solProvider));
   return signers;

wallets/provider-exodus/src/signer.ts

@@ -3,14 +3,15 @@ import type { SignerFactory } from 'rango-types';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './solana-signer.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const ethProvider = getNetworkInstance(provider, Networks.ETHEREUM);
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { CustomSolanaSigner } = await import('./solana-signer.js');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(solProvider));
   return signers;

wallets/provider-frontier/src/signer.ts

@@ -1,5 +1,6 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultSolanaSigner } from '@rango-dev/signer-solana';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
@@ -10,7 +11,6 @@ export default async function getSigners(
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { DefaultSolanaSigner } = await import('@rango-dev/signer-solana');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new DefaultSolanaSigner(solProvider));
   return signers;

wallets/provider-ledger/src/signers/ethereum.ts

@@ -2,6 +2,7 @@ import type { TransactionLike } from 'ethers';
 import type { GenericSigner } from 'rango-types';
 import type { EvmTransaction } from 'rango-types/mainApi';
 
+import Eth, { ledgerService } from '@ledgerhq/hw-app-eth';
 import { DEFAULT_ETHEREUM_RPC_URL } from '@rango-dev/wallets-shared';
 import { JsonRpcProvider, Transaction } from 'ethers';
 import { SignerError, SignerErrorCode } from 'rango-types';
@@ -18,7 +19,7 @@ export class EthereumSigner implements GenericSigner<EvmTransaction> {
     try {
       const transport = await transportConnect();
 
-      const eth = new (await import('@ledgerhq/hw-app-eth')).default(transport);
+      const eth = new Eth(transport);
       const result = await eth.signPersonalMessage(
         getDerivationPath(),
         Buffer.from(msg).toString('hex')
@@ -59,13 +60,15 @@ export class EthereumSigner implements GenericSigner<EvmTransaction> {
       const unsignedTx =
         Transaction.from(transaction).unsignedSerialized.substring(2); // Create unsigned transaction
 
-      const resolution = await (
-        await import('@ledgerhq/hw-app-eth')
-      ).ledgerService.resolveTransaction(unsignedTx, {}, {}); // metadata necessary to allow the device to clear sign information
+      const resolution = await ledgerService.resolveTransaction(
+        unsignedTx,
+        {},
+        {}
+      ); // metadata necessary to allow the device to clear sign information
 
       const transport = await transportConnect();
 
-      const eth = new (await import('@ledgerhq/hw-app-eth')).default(transport);
+      const eth = new Eth(transport);
 
       const signature = await eth.signTransaction(
         getDerivationPath(),

wallets/provider-ledger/src/signers/solana.ts

@@ -2,6 +2,7 @@ import type { SolanaWeb3Signer } from '@rango-dev/signer-solana';
 import type { Transaction, VersionedTransaction } from '@solana/web3.js';
 import type { GenericSigner, SolanaTransaction } from 'rango-types';
 
+import Solana from '@ledgerhq/hw-app-solana';
 import { generalSolanaTransactionExecutor } from '@rango-dev/signer-solana';
 import { PublicKey } from '@solana/web3.js';
 import { SignerError, SignerErrorCode } from 'rango-types';
@@ -24,9 +25,7 @@ export class SolanaSigner implements GenericSigner<SolanaTransaction> {
     try {
       const transport = await transportConnect();
 
-      const solana = new (await import('@ledgerhq/hw-app-solana')).default(
-        transport
-      );
+      const solana = new Solana(transport);
 
       const result = await solana.signOffchainMessage(
         getDerivationPath(),
@@ -44,9 +43,7 @@ export class SolanaSigner implements GenericSigner<SolanaTransaction> {
         solanaWeb3Transaction: Transaction | VersionedTransaction
       ) => {
         const transport = await transportConnect();
-        const solana = new (await import('@ledgerhq/hw-app-solana')).default(
-          transport
-        );
+        const solana = new Solana(transport);
 
         let signResult;
         if (isVersionedTransaction(solanaWeb3Transaction)) {

wallets/provider-math-wallet/src/signer.ts

@@ -1,5 +1,6 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultSolanaSigner } from '@rango-dev/signer-solana';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
@@ -12,7 +13,6 @@ export default async function getSigners(
 
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { DefaultSolanaSigner } = await import('@rango-dev/signer-solana');
   const { MathWalletCosmosSigner } = await import('./signers/cosmosSigner.js');
 
   if (!!ethProvider) {

wallets/provider-mytonwallet/src/signer.ts

@@ -1,13 +1,13 @@
 import type { TonProvider } from './types.js';
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultTonSigner } from '@rango-dev/signer-ton';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
 export default async function getSigners(
   provider: TonProvider
 ): Promise<SignerFactory> {
   const signers = new DefaultSignerFactory();
-  const { DefaultTonSigner } = await import('@rango-dev/signer-ton');
   signers.registerSigner(TxType.TON, new DefaultTonSigner(provider));
   return signers;
 }

wallets/provider-okx/src/signer.ts

@@ -3,14 +3,15 @@ import type { SignerFactory } from 'rango-types';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './solana-signer.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const ethProvider = getNetworkInstance(provider, Networks.ETHEREUM);
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { CustomSolanaSigner } = await import('./solana-signer.js');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(solProvider));
   return signers;

wallets/provider-phantom/src/signer.ts

@@ -1,5 +1,6 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultSolanaSigner } from '@rango-dev/signer-solana';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
@@ -8,7 +9,6 @@ export default async function getSigners(
 ): Promise<SignerFactory> {
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
-  const { DefaultSolanaSigner } = await import('@rango-dev/signer-solana');
   signers.registerSigner(TxType.SOLANA, new DefaultSolanaSigner(solProvider));
   return signers;
 }

wallets/provider-safepal/src/signer.ts

@@ -1,5 +1,6 @@
 import type { SignerFactory } from 'rango-types';
 
+import { DefaultSolanaSigner } from '@rango-dev/signer-solana';
 import { getNetworkInstance, Networks } from '@rango-dev/wallets-shared';
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
@@ -10,7 +11,6 @@ export default async function getSigners(
   const solProvider = getNetworkInstance(provider, Networks.SOLANA);
   const signers = new DefaultSignerFactory();
   const { DefaultEvmSigner } = await import('@rango-dev/signer-evm');
-  const { DefaultSolanaSigner } = await import('@rango-dev/signer-solana');
   signers.registerSigner(TxType.EVM, new DefaultEvmSigner(ethProvider));
   signers.registerSigner(TxType.SOLANA, new DefaultSolanaSigner(solProvider));
   return signers;

wallets/provider-solflare-snap/package.json

@@ -14,7 +14,7 @@
     "src"
   ],
   "scripts": {
-    "build": "node ../../scripts/build/command.mjs --path wallets/provider-solflare-snap --splitting",
+    "build": "node ../../scripts/build/command.mjs --path wallets/provider-solflare-snap",
     "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
@@ -31,4 +31,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

wallets/provider-solflare-snap/src/signer.ts

@@ -2,13 +2,12 @@ import type { SignerFactory } from 'rango-types';
 
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { SolflareSnapSolanaSigner } from './signers/solanaSigner.js';
+
 export default async function getSigners(
   provider: any
 ): Promise<SignerFactory> {
   const signers = new DefaultSignerFactory();
-  const { SolflareSnapSolanaSigner } = await import(
-    './signers/solanaSigner.js'
-  );
   signers.registerSigner(TxType.SOLANA, new SolflareSnapSolanaSigner(provider));
   return signers;
 }

wallets/provider-solflare/package.json

@@ -14,7 +14,7 @@
     "src"
   ],
   "scripts": {
-    "build": "node ../../scripts/build/command.mjs --path wallets/provider-solflare --splitting",
+    "build": "node ../../scripts/build/command.mjs --path wallets/provider-solflare",
     "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
@@ -30,4 +30,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

wallets/provider-solflare/src/signer.ts

@@ -3,11 +3,12 @@ import type { SignerFactory } from 'rango-types';
 
 import { DefaultSignerFactory, TransactionType as TxType } from 'rango-types';
 
+import { CustomSolanaSigner } from './signers/solanaSigner.js';
+
 export default async function getSigners(
   provider: Solflare
 ): Promise<SignerFactory> {
   const signers = new DefaultSignerFactory();
-  const { CustomSolanaSigner } = await import('./signers/solanaSigner.js');
   signers.registerSigner(TxType.SOLANA, new CustomSolanaSigner(provider));
   return signers;
 }