Skip to content

MIGRATION_GUIDE.md

Latest commit

 

History

History
173 lines (126 loc) · 9.71 KB

MIGRATION_GUIDE.md

File metadata and controls

173 lines (126 loc) · 9.71 KB

@multiversx/template-dapp

Migrating your application to sdk-dapp@5.x will probably require more code removal than insertion. Of course, each application is different, so this guide will have a generic character, pointing out the main areas where you might need to change your code. The main areas that might need code restructuring are:

  • package.json library dependencies
  • index.tsx file where the app bootstraps
  • App.tsx, the main file of your application
  • logging in and out
  • sending and signing transactions
  • component imports related to displaying data
  • types

A typical migration can be seen in this pull request.

Next, we will make a brief overview of the main changes required.

1. Changes in package.json

Dependencies

  • Updated:
    • @multiversx/sdk-dapp (version ^5.x)
    • @multiversx/sdk-dapp-utils (version 2.0.0)
  • Added:
    • @multiversx/sdk-dapp-ui (version ^0.x)

2. Changes in index.tsx

You will need to wrap your application in a call to initApp:

initApp(config).then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});

3. Summary of Changes in App.tsx

  • AxiosInterceptorContext is now created as a local component
  • DappProvider was removed ❌ and initialization is now made in initApp
  • NotificationModal, SignTransactionsModals and TransactionsToastList are removed ❌ and functionality is handled under the hood
  • Unlock page is a child route since it only displays a side panel over an existing route (in our case Home /)

4. Logging in and out

4.1 Logging in

Login buttons have been removed ❌ and there is a universal Unlock side panel, which can be inserted in the DOM at a desired location.

NOTE: Web-wallet URL login is no longer supported

Example of how to use the UnlockPanelManager in the unlock route is shown below. Of course the openUnlockPanel() method can also be linked to a button.

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { UnlockPanelManager, useGetLoginInfo } from 'lib';
import { RouteNamesEnum } from 'localConstants';

export const Unlock = () => {
  const navigate = useNavigate();
  const { isLoggedIn } = useGetLoginInfo();

  const unlockPanelManager = UnlockPanelManager.init({
    loginHandler: () => {
      navigate(RouteNamesEnum.dashboard);
    },
    onClose: () => {
      navigate(RouteNamesEnum.home);
    }
  });

  const handleOpenUnlockPanel = () => {
    unlockPanelManager.openUnlockPanel();
  };

  useEffect(() => {
    if (isLoggedIn) {
      navigate(RouteNamesEnum.dashboard);
      return;
    }

    handleOpenUnlockPanel();
  }, [isLoggedIn]);

  return null;
};
  • isAccountLoading has been deprecated
  • import { getIsProviderEqualTo } from “@multiversx/sdk-dapp/utils/account/getIsProviderEqualTo” --> removed ❌

4.2 Logging out

In order to perform a logout action you simply need to get the current signing provider and call the logout() method:

import { getAccountProvider } from '@multiversx/sdk-dapp/out/providers/helpers/accountProvider';
const provider = getAccountProvider();
await provider.logout();

5. Sending transactions

  • sendTransactions and useSendBatchTransactions have been replaced by provider.signTransactions, txManager.send and txManager.track
  • newTransaction function has been removed ❌ and you need to create Transaction objects directly

6. Tracking transactions

Tracking transactions is now handled using the txManager.track method. You should use this method to monitor the status and outcome of your transactions after sending them. Refer to the linked file for implementation details and examples.

  const txManager = TransactionManager.getInstance();

  const sentTransactions = await txManager.send(signedTransactions);
  const sessionId = await txManager.track(sentTransactions, {
    transactionsDisplayInfo
  });

7. UI components are now imported from sdk-dapp-core-ui

Some UI components were removed:

Some new UI elements have been added:

8. Methods

  • import { deleteCustomToast } from “@multiversx/sdk-dapp/utils/toasts/customToastsActions” --> import { removeCustomToast } from “@multiversx/sdk-dapp/out/store/actions/toasts/toastsActions”
  • export { setNonce } from “@multiversx/sdk-dapp/out/utils/account”; --> export { setAccountNonce as setNonce } from “@multiversx/sdk-dapp/out/store/actions”
  • export { getAccount } from “@multiversx/sdk-dapp/out/utils/account”; --> export { getAccountFromApi as getAccount } from “@multiversx/sdk-dapp/out/apiCalls/account/getAccountFromApi”;
  • export { setTransactionsToSignedState, setTransactionsDisplayInfoState, } from “@multiversx/sdk-dapp/services/transactions/updateSignedTransactions”; have been removed ❌
  • export { deleteTransactionToast } from “@multiversx/sdk-dapp/services/transactions/clearTransactions”; --> export { removeTransactionToast as deleteTransactionToast } from “@multiversx/sdk-dapp/out/store/actions/toasts/toastsActions”;
  • export { addressIsValid, } from “@multiversx/sdk-dapp/out/utils/account”; --> export { addressIsValid } from “@multiversx/sdk-dapp/out/utils/validation/addressIsValid”;
  • export { getShardOfAddress } from “@multiversx/sdk-dapp/out/utils/account”; --> import { AddressComputer } from “@multiversx/sdk-core/out”; const addressComputer = new AddressComputer(); const getShardOfAddress = addressComputer.getShardOfAddress; export { getShardOfAddress };
  • walletConnectDeepLink is now set in initApp

9. Types

  • LoginMethodsEnum is replaced by ProviderTypeEnum
  • RawTransactionType was removed ❌
  • some new types were added, related to UI elements, like MvxCopyButtonPropsType