⚛
⚛
⚛
⚛
Leap Cosmos
Search
⌃K
Comment on page

Liquidity Modal Component

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.
Elements - Previous
Wallet Client Setup
Next - Elements
Using Without Modal
Last modified 21d ago