Using Without Modal

We have released v1.0.0 of Elements with an improved UX and developer API. We recommend you to use v1.x. Here's the migration guide for v0.x users.

If you want to use the Liquidity component, but without a modal, you can use the LiquidityView component.

For this, you will have to use ThemeContextProvider and WalletClientContextProvider. They accept props similar to what you pass in Liquidity Modal component. Let's have a look -

import {
  LiquidityView,
  ThemeContextProvider,
  WalletClientContextProvider,
  darkTheme,
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

const customElementsTheme: ThemeDefinition = {
  ...darkTheme,
  colors: {
    primary: '#AC4BFF',
    ...darkTheme.colors,
  },
  fontFamily: 'Inter',
}

const YourDapp = () => {
  const walletConfig = {
    walletClient,
    connectWallet,
    userAddress
  }

  return (
    <div>
      <ThemeContextProvider theme={customElementsTheme}>
        <WalletClientContextProvider value={walletClientConfig}>
          <LiquidityView />
        </WalletClientContextProvider>
      </ThemeContextProvider>
    </div>
  )
}

For more information on the props, checkout theming and walletClientConfig sections.

Props

className (optional)

The className prop

tabsConfig (optional)

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

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.

onTxnSignInit (optional)

Callback fired when a transaction signing request is made to the wallet.

onTxnSignApproved (optional)

Callback fired when a transaction signing request is approved from the wallet.

onTxnSignFailed (optional)

Callback fired when a transaction signing request is rejected from the wallet.

onTxnInProgress (optional)

Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes.

onTxnComplete (optional)

Callback fired when a transaction is completed

type txnCompleteCallback = (txnSummary: TxnSummary) => void

The TxnSummary always has a property called summaryType which will indicate what kind of a transaction occured. It will have one of the following 4 values - ['skip', 'squid', 'kado', 'transfer']. Depending on the summary type, the object will have different properties. Read more about transaction summary here.