Comment on page

Using Without Modal

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.