Liquidity View

Usage

import {
  LiquidityView,
  ElementsProvider,
  WalletType,
  Tabs,
  TabsConfig
} from '@leapwallet/elements'

import '@leapwallet/elements/styles.css'

const YourDapp = () => {
  // trigger the dApp's connect wallet flow
  const connectWallet = () => {}
  
  // set this to the currently connected wallet
  const connectedWalletType = WalletType.LEAP
  
  return (
    <div className="leap-ui">
      <ElementsProvider
        connectWallet={connectWallet}
        connectedWalletType={connectedWalletType}
      >
        <LiquidityView />
      </WalletClientContextProvider>
    </div>
  )
}

Props

className (optional)

Add classes to customise the styling

tabsConfig (optional)

Configure titles, default chains, assets, currencies for each tab. You can also specify allowed chains, allowed tokens for each tab.

defaultActiveTab (optional)

Which tab is initially active - default is Tabs.SWAP. If you have disabled the defaultActiveTab, elements will automatically set the next tab (which is not disabled) as default. If none of the tabs is enabled, a message saying the same will be shown.