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
​SwapTabConfig['defaults']​
Specify defaults for source/dest chains and assets
allowedDestinationChains
​AllowedDestinationChainProp​
Choose which chains are allowed
onTxnSignInit
​OnTxnSignInit​
Callback fired when a transaction signing request is sent to the wallet
onTxnSignApproved
​OnTxnSignApproved​
Callback fired when a transaction signing request is approved from the wallet
onTxnSignFailed
​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
​TransferTabConfig['defaults']​
Specify defaults for source/dest chains and assets
allowedDestinationChains
​AllowedDestinationChainProp​
Choose which chains are allowed
onTxnSignInit
​OnTxnSignInit​
Callback fired when a transaction signing request is sent to the wallet
onTxnSignApproved
​OnTxnSignApproved​
Callback fired when a transaction signing request is approved from the wallet
onTxnSignFailed
​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
​FiatOnRampTabConfig['defaults']​
Specify defaults for source/dest chains and assets
allowedDestinationChains
​AllowedDestinationChainProp​
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
​CrossChainSwapsTabConfig['defaults']​
Specify defaults for source/dest chains and assets
allowedDestinationChains
​AllowedDestinationChainProp​
Choose which chains are allowed
onTxnSignInit
​OnTxnSignInit​
Callback fired when a transaction signing request is sent to the wallet
onTxnSignApproved
​OnTxnSignApproved​
Callback fired when a transaction signing request is approved from the wallet
onTxnSignFailed
​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
​OnTxnSignInit​
Callback fired when a transaction signing request is sent to the wallet
onTxnSignApproved
​OnTxnSignApproved​
Callback fired when a transaction signing request is approved from the wallet
onTxnSignFailed
​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.

Prop	Type	Description
`title`	`string`	Title for the tab
`defaults`	`SwapTabConfig['defaults']`	Specify defaults for source/dest chains and assets
`allowedDestinationChains`	`AllowedDestinationChainProp`	Choose which chains are allowed
`onTxnSignInit`	`OnTxnSignInit`	Callback fired when a transaction signing request is sent to the wallet
`onTxnSignApproved`	`OnTxnSignApproved`	Callback fired when a transaction signing request is approved from the wallet
`onTxnSignFailed`	`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.

Prop	Type	Description
`title`	`string`	Title for the tab
`defaults`	`TransferTabConfig['defaults']`	Specify defaults for source/dest chains and assets
`allowedDestinationChains`	`AllowedDestinationChainProp`	Choose which chains are allowed
`onTxnSignInit`	`OnTxnSignInit`	Callback fired when a transaction signing request is sent to the wallet
`onTxnSignApproved`	`OnTxnSignApproved`	Callback fired when a transaction signing request is approved from the wallet
`onTxnSignFailed`	`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.

Prop	Type	Description
`title`	`string`	Title for the tab
`defaults`	`FiatOnRampTabConfig['defaults']`	Specify defaults for source/dest chains and assets
`allowedDestinationChains`	`AllowedDestinationChainProp`	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.

Prop	Type	Description
`title`	`string`	Title for the tab
`defaults`	`CrossChainSwapsTabConfig['defaults']`	Specify defaults for source/dest chains and assets
`allowedDestinationChains`	`AllowedDestinationChainProp`	Choose which chains are allowed
`onTxnSignInit`	`OnTxnSignInit`	Callback fired when a transaction signing request is sent to the wallet
`onTxnSignApproved`	`OnTxnSignApproved`	Callback fired when a transaction signing request is approved from the wallet
`onTxnSignFailed`	`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
`title`	`string`	Title for the tab
`onTxnSignInit`	`OnTxnSignInit`	Callback fired when a transaction signing request is sent to the wallet
`onTxnSignApproved`	`OnTxnSignApproved`	Callback fired when a transaction signing request is approved from the wallet
`onTxnSignFailed`	`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.

Last modified 2d ago