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
defaultSettings
{ slippage: number }
Specify default settings for swaps
allowedDestinationChains
Choose which chains are allowed
allowedSourceChains
{ chainId: string }[]
List of chains allowed as source chains
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.
onSourceAmountChange
(amount: string) => void
Callback fired when source amount is changed
onSourceAssetChange
(asset: Asset | undefined) => void
Callback fired when source asset is changed
onSourceChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when source chain is changed
onDestinationAssetChange
(asset: Asset | undefined) => void
Callback fired when destination asset is changed
onDestinationChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when destination chain is changed
showPoweredByBanner
boolean
If "Powered by Leap & Skip" should be displayed at the bottom of the component

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
allowedSourceChains
{ chainId: string }[]
List of chains allowed as source chains
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.
onSourceAmountChange
(amount: string) => void
Callback fired when source amount is changed
onSourceAssetChange
(asset: Asset | undefined) => void
Callback fired when source asset is changed
onSourceChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when source chain is changed
onDestinationAddressChange
(address: string) => void
Callback fired when destination address is changed
showPoweredByBanner
boolean
If "Powered by Leap & Skip" should be displayed at the bottom of the component

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.
onFiatAmountChange
(amount: string) => void
Callback fired when fiat amount is changed
onFiatCurrencyChange
(currency: Currency | undefined) => void
Callback fired when fiat currency is changed
onDestinationChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when destination chain is changed
onCryptoCurrencyChange
(asset: Asset | undefined) => void
Callback fired when destination token is changed
showPoweredByBanner
boolean
If "Powered by Leap & Kado" should be displayed at the bottom of the component

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
defaultSettigns
{ boost: boolean, arrivalGas: boolean, slippage: number }
Settings for squid swaps
allowedDestinationChains
Choose which chains are allowed
allowedEvmSourceChains
{ chainId: number assetAddresses?: string[] }
List of allowed source chains and assets
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.
Prop
Type
Description
onSourceAmountChange
(amount: string) => void
Callback fired when source amount is changed
onSourceAssetChange
(asset: Asset | undefined) => void
Callback fired when source asset is changed
onSourceChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when source chain is changed
onDestinationAssetChange
(asset: Asset | undefined) => void
Callback fired when destination asset is changed
onDestinationChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when destination chain is changed
showPoweredByBanner
boolean
If "Powered by Leap & Squid" should be displayed at the bottom of the component

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.
Prop
Type
Description
onSourceAmountChange
(amount: string) => void
Callback fired when source amount is changed
onSourceAssetChange
(asset: Asset | undefined) => void
Callback fired when source asset is changed
onSourceChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when source chain is changed
onDestinationAssetChange
(asset: Asset | undefined) => void
Callback fired when destination asset is changed
onDestinationChainChange
(chain: ChainBaseData | undefined) => void
Callback fired when destination chain is changed
showPoweredByBanner
boolean
If "Powered by Leap & Squid" should be displayed at the bottom of the component
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.