Migration guide 2.0

Migrating from dapp-core 1.x to dapp-core 2.x

Dapp-code 2.0 underwent a lot of changes to its build process, how the files are being bundled together and how they are exported.

This was the result of a great effort to dramatically reduce the library's size and footprint in an app (3x lighter, from 1MB to ~300KB), remove the style pollution caused by bootstrap and radically improve the build time.

Version 2.0 comes with the following changes:

Complete removal of bootstrap from the library

This means no more style pollution, having to match the bootstrap version and variable override.

Code splitting out of the box

We have removed the single point of entry that would load all the library's code, even if you were using a single utility function. Now you can import only what you use, no more dead code in your app's bundle.

New bundling engine

We replaced rollup and dts-cli with esbuild, a new, blazingly fast bundler that reduced the bundling time a lot and allows splitting the code into chunks and automatic treeshaking.

However, these radical changes, by their very nature, require that the apps have to consume dapp-core in slightly a different manner from now on. One of the biggest improvements in both the footprint of dapp-core and the experience of working with it (no more browser-specific code for using only the functions that are agnostic) was the splitting of a single bundle into multiple bundles that work as isolated modules.

This requires that all imports from dapp-core have to be changed to import from specific folders, instead of the default index.js.

If, until now, you could do

import {DappUI, DappProvider, useGetAccountInfo, formatAmount} from '@elrondnetwork/dapp-core'

Now you have to import these from their specific folders:

import {
  SignTransactionsModals
} from '@elrondnetwork/dapp-core/dist/UI'

import { DappProvider } from '@elrondnetwork/dapp-core/wrappers'
import { useGetAccountInfo } from '@elrondnetwork/dapp-core/hooks'
import { formatAmount } from '@elrondnetwork/dapp-core/utils'

We're working on removing the dist from the imports, so these could be cleaner. This style of imports allows us to apply a tree-shaking strategy and reduces the bundle size of your app dramatically, as you're no longer importing dead code.

A full list of exports can be found in the README

Constants renaming

All constants were renamed with CAPS.

• denomination was changed to DECIMALS
• decimals was changed to DIGITS
• gasPriceModifier: string changed to GAS_PRICE_MODIFIER: number
• gasPerDataByte: string changed to GAS_PER_DATA_BYTE: number
• gasLimit: string changed to GAS_LIMIT: number
• fallbackNetworkConfigurations have changed propreties egldDenomination to decimals and decimals to digits

List of important constants renamed:

Before	After
gasPriceModifier	GAS_PRICE_MODIFIER
gasPerDataByte	GAS_PER_DATA_BYTE
gasLimit	GAS_LIMIT
gasPrice	GAS_PRICE
version	VERSION
dappInitRoute	DAPP_INIT_ROUTE
denomination	DECIMALS
decimals	DIGITS
DEFAULT_MIN_GAS_LIMIT	GAS_LIMIT

Files renaming

Files containing type definitions were suffixed with .types.

Scss files appended with Styles and changed to pascalCase. Example: transactions-table.scss renamed to transactionsTableStyles.scss

List of important files renamed:

Before	After
dapp-provider.ts	dappProvider.types.ts
sign-transactions-modals.ts	signTransactionsModals.types.ts

Types and component names renaming

The shorthand keyword Tx was replaced by Transaction.

List of important types and constants renamed:

Before	After
TxDataTokenType	TransactionDataTokenType
MultiSignTxType	MultiSignTransactionType
TxStatusToast	TransactionStatusToast
TxStatusToastProps	TransactionStatusToastType
TxDetailsProps	TransactionDetailsType
TxDetails	TransactionDetails
UITransactionType	ServerTransactionType
TransactionDirection	TransactionDirectionEnum
TransactionToast/types.ts	TransactionToast/transactionToast.types.ts
WithClassname	WithClassnameType
TxActionCategoryEnum	TransactionActionCategoryEnum
TxActionsEnum	TransactionActionsEnum
PendingTxType	PendingTransactionType
TxDataTokenType	TransactionDataTokenType
TxsDataTokensType	TransactionsDataTokensType
MultiEsdtTxType	MultiEsdtTransactionType
TxDataTokenType	TransactionDataTokenType
TxsDataTokensType	TransactionsDataTokensType

Deprecation of denominate and nominate helpers

The main helpers for working with balances were replaced by two new functions having almost^[1] the same signature.

Before	After
denominate()	formatAmount()
nominate()	parseAmount()
<Denominate />	<FormatAmount />

While they will still be available for usage, a console warning will appear indicating to their new alias.

---

[1] A slight change in parameters of formatAmount() is the replacement of denominate prop with decimals, and decimals prop with digits.