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 Tab

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>
)
}

Props

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
(summary: SkipTransactionSummary) => void)
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 Tab

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>
)
}

Props

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
(summary: SkipTransactionSummary) => void)
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.

Fiat On-Ramp

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>
)
}

Props

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
(summary: SkipTransactionSummary) => void)
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.

Cross Chain Swaps

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>
)
}

Props

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
(summary: SquidTransactionSummary) => void)
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 USDC Tab

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
(summary: SquidTransactionSummary) => void)
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.
The walletClientConfig is the same object as the one used in the Liquidity component. View this section for more details.
Please check the Customise the UI page for more information on theming and ThemeContextProvider.