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>
)
}
Configure titles, default chains, assets, currencies for each tab. You can also specify allowed chains, allowed tokens for each tab; read more.
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 2d ago