Comment on page
Liquidity Modal Component
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>
)
}
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
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.
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)connectWallet
: function that triggers your wallet connect flow
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 headertitle
: the title for the modal headersubtitle
: the subtitle for the modal header
Callback fired when the liquidity modal is opened
Callback fired when the liquidity modal is closed
Configure titles, default chains, assets, currencies for each tab. You can also specify allowed chains, allowed tokens for each tab.
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.Callback fired when a transaction signing request is made to the wallet.
Callback fired when a transaction signing request is approved from the wallet.
Callback fired when a transaction signing request is rejected from the wallet.
Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes.
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.Last modified 21d ago