Reduce bundle size with Modular SDK

🚧

This is currently a PREVIEW feature in our Release Candidate

This will be generally available starting in v0.17.0

All the packages mentioned in this document require minimum version 0.17.0-RC.11

Currently, our main SDK package @dynamic-labs/sdk-react is a one-size-fits-all package that bundles all our features and wallet support.

This is generally great for those starting out and testing out all the various features and multi chain wallet support.

However, if you're looking to trim any unnecessary libraries used by our SDK to reduce your bundle size to the minimum, then you can now utilize a set of new packages of your choosing.

πŸ“˜

The following guide uses the @dynamic-labs/sdk-react-core package

@dynamic-labs/sdk-react and @dynamic-labs/sdk-react-core are almost identical except that the core package does not automatically include all the available supported wallets and their libraries.

Although it's possible to do everything with @dynamic-labs/sdk-react, you will not reduce bundle size unless you switch to the core SDK package.

Choosing the right package(s)

There are two main types of packages:

  • Libs Depends on a single 3rd party library to provide specific support for one or more wallets/networks
  • All Depends on all Libs packages of the same chain (i.e. ethereum-all includes all EVM packages with exception of Magic)
    • Additionally, any new Libs packages for any chain will be added to their respective All package.

In most cases, a All package(s) will suffice for your needs.

Packages (All)

Package NameDependenciesMinimum VersionChainExport
@dynamic-labs/ethereum-allethereum, coinbase, bloctov0.17.0-RC.11EVMEthereumWalletConnectors
@dynamic-labs/algorand-allmyalgov0.17.0-RC.11ALGOAlgorandWalletConnectors
@dynamic-labs/solana-allv0.17.0-RC.11SOLSolanaWalletConnectors
@dynamic-labs/flow-allflowv0.17.0-RC.11FLOWFlowWalletConnectors
@dynamic-labs/starknet-allstarknetv0.17.0-RC.11STARKStarknetWalletConnectors
@dynamic-labs/cosmos-allv0.17.0-RC.11COSMOSCosmosWalletConnectors

Packages (Libs)

Package NameMinimum VersionChainExport
@dynamic-labs/ethereumv0.17.0-RC.11EVMEthereumWalletConnectors
@dynamic-labs/magicv0.17.0-RC.11EVM*MagicWalletConnectors
@dynamic-labs/coinbasev0.17.0-RC.11EVMCoinbaseWalletConnectors
@dynamic-labs/bloctov0.17.0-RC.11EVMBloctoWalletConnectors
@dynamic-labs/flowv0.17.0-RC.11FLOWFlowWalletConnectors
@dynamic-labs/myalgov0.17.0-RC.11ALGOMyAlgoWalletConnectors
@dynamic-labs/starknetv0.17.0-RC.11STARKStarknetWalletConnectors

*Currently Magic only supports EVM, but it is not included in the All ethereum-all package

Implementation

  1. Required You must replace @dynamic-labs/sdk-react with @dynamic-labs/sdk-react-core
  2. Import 1 or more wallet connectors from the packages listed above
  3. Add to an array in your settings under walletConnectors
import { DynamicContextProvider, DynamicWidget} from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum-all';
import { SolanaWalletConnectors } from '@dynamic-labs/solana-all';

const App = () => (
  <DynamicContextProvider
     settings={{
       ...
       walletConnectors: [ EthereumWalletConnectors, SolanaWalletConnectors ],
         ...
    }}>
    <DynamicWidget /> 
  </DynamicContextProvider>
);

export default App;