Liquidity Modal Component

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.

How to use it?

The liquidity component allows triggering a modal where the users can buy, transfer or swap their tokens.

import { LiquidityModal } from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

const renderLiquidityButton = ({ onClick }) => {
  return (
    <button onClick={onClick}>
      <span>💳</span>
      <span>Buy Now</span>
    </button>
  )
}

const YourDapp = () => {
  return (
    <div>
      <LiquidityModal
        renderLiquidityButton={renderLiquidityButton}
        theme='light'
        walletClientConfig={{
          userAddress: address,
          walletClient: walletClient,
          connectWallet: handleConnectWallet
        }}
        config={{
          icon: 'https://assets.leapwallet.io/stars.png',
          title: 'Buy Bad Kid #44',
          subtitle: 'Price: 42K STARS'
        }}
      />
    </div>
  )
}

Let's understand the props

renderLiquidityButton (required)

This is a function that returns a react component that will open the modal when clicked. The function receives an object with the following properties:

• onClick: function that opens the modal

theme (required)

This is a theme object that allows you to customise the look and feel of the modal. You can read more about ui customisations here.

walletClientConfig (required)

This is an object that contains the configuration for the wallet client. It has the following properties:

• userAddress: the user's address (can be undefined if the wallet is not connected)

• walletClient: the wallet client object

• connectWallet: function that triggers your wallet connect flow

config (required)

This is an object that contains the configuration for the modal. It has the following properties:

• icon: the icon that will be displayed in the modal header

• title: the title for the modal header

• subtitle: the subtitle for the modal header

• tabsConfig: configuration for the tabs (optional) - type definition

onOpen (optional)

Callback fired when the liquidity modal is opened

onClose (optional)

Callback fired when the liquidity modal is closed

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.

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.