Using Individual Tab

We have released v1.0.0 of Elements with an improved UX and developer API. We recommend you to use v1.x. Here's the migration guide for v0.x users.

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
defaultSettings	{ slippage: number }	Specify default settings for swaps
allowedDestinationChains	AllowedDestinationChainProp	Choose which chains are allowed
allowedSourceChains	{ chainId: string }[]	List of chains allowed as source chains
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.
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	TransferTabConfig['defaults']	Specify defaults for source/dest chains and assets
allowedDestinationChains	AllowedDestinationChainProp	Choose which chains are allowed
allowedSourceChains	{ chainId: string }[]	List of chains allowed as source chains
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.
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	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.
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	CrossChainSwapsTabConfig['defaults']	Specify defaults for source/dest chains and assets
defaultSettigns	{ boost: boolean, arrivalGas: boolean, slippage: number }	Settings for squid swaps
allowedDestinationChains	AllowedDestinationChainProp	Choose which chains are allowed
allowedEvmSourceChains	{ chainId: number assetAddresses?: string[] }	List of allowed source chains and assets
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
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	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
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.