@multiversx/sdk-dapp-liquidity

Overview

A complete toolkit for bridging assets between MultiversX, Ethereum, and BNB Chain.

Installation

npm install @multiversx/mx-sdk-dapp-liquidity

Commands

Install dependencies

yarn

Start

yarn start

Build

yarn build

Build and watch

yarn build:watch

Test

yarn test

Lint

yarn lint

Release (publish)

yarn publish-package

Release next version (publish)

yarn publish-package-next

Usage

@import 'node_modules/@multiversx/sdk-dapp-liquidity/style.css';

import { init, Web3AppProvider, AppKitNetwork, BridgeForm, TransactionToastContainer } from '@multiversx/sdk-dapp-liquidity';

const metadata = {
  name: 'AppName',
  description: 'AppName Example',
  url: 'https://example.com', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/179229932']
};
const projectId = "@reown project id";
const provider = init({
  /**
   * @reown AppKit options
   */
  appKitOptions: {
    allowUnsupportedChain: true,
    projectId,
    metadata,
    connectorImages: {
      injected: 'https://avatars.githubusercontent.com/u/179229932',
      walletConnect: 'https://avatars.githubusercontent.com/u/37784886?s=200&v=4',
      "io.metamask": 'https://avatars.githubusercontent.com/u/11744586?s=200&v=4',
      "com.trustwallet.app": 'https://avatars.githubusercontent.com/u/32179889?s=200&v=4',
    },
    themeMode: "dark",
    themeVariables: {
      "--w3m-font-family": "Roobert,system-ui,sans-serif",
    },
    features: {
      email: false,
      socials: false,
    }
  },
  /**
   * WagmiAdapter config
   */
  adapterConfig: {
    ssr: true,
  },
  /**
   * Accepted chain IDs. The chains with ids [31, 44, 54] will be ignored as these are mapped to the mvx networks as [1, D, T]
   */
  acceptedChainIDs: ["97", "4002"],
  /**
   * Accepted connectors IDs
   */
  acceptedConnectorsIDs: [
    'io.metamask',
    'com.trustwallet.app',
    'walletconnect'
  ],
  /**
   * Liquidity API URL
   */
  apiURL: "https://devnet-tools.multiversx.com/liquidity-sdk",
  /**
   * Bridge URL. This is used to redirect the user to the bridge status page for tracking transactions (history). Will be removed in the next major release.
   */
  bridgeURL: "https://devnet-bridge.multiversx.com",
  /**
   * MultiversX API URL
   */
  mvxApiURL: "https://devnet-api.multiversx.com",
  /**
   * MultiversX Explorer URL
   */
  mvxExplorerAddress: "https://devnet-explorer.multiversx.com",
  /**
   * MultiversX Chain ID
   * Possible options 31 | 44 | 54 which are mapped to 1 | D | T
   */
  mvxChainId: "44",
});

const App = () => {
  const [showHistory, setShowHistory] = useState(false);
  
  const mvxAccount = useGetAccount();
  const evmAccount = useAccount();
  const nativeAuthToken = useGetNativeAuthToken();

  const onConnectToMvx = async () => {
    // Login to MultiversX
  }
    
  const onDisconnectFromMvx = async () => {
    // Logout from MultiversX
  }
  
  const onHistoryClose = () => {
    setShowHistory(false);
  }
  
  return (
    // Wrap your app with Web3AppProvider to enable multi-chain connections
    <Web3AppProvider appKit={provider.appKit} config={provider.config} options={provider.options} nativeAuthToken={nativeAuthToken}>
      <BridgeForm
        mvxChainId={"44"}
        mvxAddress={mvxAccount?.address}
        username={mvxAccount?.username}
        callbackRoute={"/deposit"}
        showHistory={showHistory}
        onSuccessfullySentTransaction={(txHashes) => {
          // DO SOMETHING
        }}
        onFailedSentTransaction={() => {
          // DO SOMETHING
        }}
        onHistoryClose={onHistoryClose}
        onMvxConnect={onConnectToMvx}
        onMvxDisconnect={onDisconnectFromMvx}
      />
      <TransactionToastContainer theme="colored" />
    </Web3AppProvider>
  )
}

Disclaimer

1. This package is in active development and is subject to change. We recommend to check the latest version and update your code accordingly.
2. This package is not fully supported on the Next.js framework. We are working on a solution to make it compatible with Next.js.