Comment on page
Using Individual Tab
For this, you will have to use
WalletClientContextProvider
and ThemeContextProvider
from the library. These are used internally in the Liquidity component too.Swap the most popular cosmos tokens!
import {
SwapTab,
ThemeContextProvider,
WalletClientContextProvider
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'
const YourDapp = () => {
return (
<ThemeContextProvider theme="dark">
<WalletClientContextProvider value={walletClientConfig}>
<SwapTab />
</WalletClientContextProvider>
</ThemeContextProvider>
)
}
All the props are optional
Prop | Type | Description |
---|---|---|
title | string | Title for the tab |
defaults | Specify defaults for source/dest chains and assets | |
allowedDestinationChains | Choose which chains are allowed | |
onTxnSignInit | Callback fired when a transaction signing request is sent to the wallet | |
onTxnSignApproved | Callback fired when a transaction signing request is approved from the wallet | |
onTxnSignFailed | Callback fired when a transaction signing request is rejected from the wallet | |
onTxnComplete | Callback fired when a transaction completes (failure & success both) | |
onTxnInProgress | (tab: Tabs) => () => void | Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes. |
Transfer any cosmos token from one address to another with support for IBC transfers and IBC unwinding via Skip API.
import {
TransferTab,
ThemeContextProvider,
WalletClientContextProvider
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'
const YourDapp = () => {
return (
<ThemeContextProvider theme="dark">
<WalletClientContextProvider value={walletClientConfig}>
<TransferTab />
</WalletClientContextProvider>
</ThemeContextProvider>
)
}
All props are optional
Prop | Type | Description |
---|---|---|
title | string | Title for the tab |
defaults | Specify defaults for source/dest chains and assets | |
allowedDestinationChains | Choose which chains are allowed | |
onTxnSignInit | Callback fired when a transaction signing request is sent to the wallet | |
onTxnSignApproved | Callback fired when a transaction signing request is approved from the wallet | |
onTxnSignFailed | Callback fired when a transaction signing request is rejected from the wallet | |
onTxnComplete | Callback fired when a transaction completes (failure & success both) | |
onTxnInProgress | (tab: Tabs) => () => void | Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes. |
Convert FIAT currency into the most popular cosmos tokens!
import {
KadoTab,
ThemeContextProvider,
WalletClientContextProvider
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'
const YourDapp = () => {
return (
<ThemeContextProvider theme="dark">
<WalletClientContextProvider value={walletClientConfig}>
<KadoTab />
</WalletClientContextProvider>
</ThemeContextProvider>
)
}
All props are optional
Prop | Type | Description |
---|---|---|
title | string | Title for the tab |
defaults | Specify defaults for source/dest chains and assets | |
allowedDestinationChains | Choose which chains are allowed | |
allowedCurrencies | string[] | List of currency codes that are allowed |
onTxnComplete | Callback fired when a transaction completes (failure & success both) | |
onTxnInProgress | (tab: Tabs) => () => void | Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes. |
Convert tokens on EVM chains to the most popular tokens on any cosmos chain.
import {
CrossChainSwapsTab,
ThemeContextProvider,
WalletClientContextProvider
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'
const YourDapp = () => {
return (
<ThemeContextProvider theme="dark">
<WalletClientContextProvider value={walletClientConfig}>
<CrossChainSwapsTab />
</WalletClientContextProvider>
</ThemeContextProvider>
)
}
All props are optional
Prop | Type | Description |
---|---|---|
title | string | Title for the tab |
defaults | Specify defaults for source/dest chains and assets | |
allowedDestinationChains | Choose which chains are allowed | |
onTxnSignInit | Callback fired when a transaction signing request is sent to the wallet | |
onTxnSignApproved | Callback fired when a transaction signing request is approved from the wallet | |
onTxnSignFailed | Callback fired when a transaction signing request is rejected from the wallet | |
onTxnComplete | Callback fired when a transaction completes (failure & success both) | |
onTxnInProgress | (tab: Tabs) => () => void | Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes. |
Bridge over your USDC on Ethereum to USDC on Noble chain.
import {
BridgeUSDCTab,
ThemeContextProvider,
WalletClientContextProvider
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'
const YourDapp = () => {
return (
<ThemeContextProvider theme="dark">
<WalletClientContextProvider value={walletClientConfig}>
<BridgeUSDCTab />
</WalletClientContextProvider>
</ThemeContextProvider>
)
}
Prop | Type | Description |
---|---|---|
title | string | Title for the tab |
onTxnSignInit | Callback fired when a transaction signing request is sent to the wallet | |
onTxnSignApproved | Callback fired when a transaction signing request is approved from the wallet | |
onTxnSignFailed | Callback fired when a transaction signing request is rejected from the wallet | |
onTxnComplete | Callback fired when a transaction completes (failure & success both) | |
onTxnInProgress | (tab: Tabs) => () => void | Callback fired when a transaction is initiated on a tab. Returns a function that is called when the transaction completes. |
ThewalletClientConfig
is the same object as the one used in the Liquidity component. View this section for more details.
Last modified 2d ago