Comment on page
Tab Config
Configure titles, default chains, assets, currencies for each tab. You can also specify allowed chains, allowed tokens for each tab.
All tabs are enabled by default and have the following titles:
Tabs.SWAP: 'Cosmos Swaps'Tabs.TRANSFER: 'Send / IBC Transfers'Tabs.FIAT_ON_RAMP: 'Fiat On-Ramp'Tabs.CROSS_CHAIN_SWAPS: 'Cross Chain Swaps'Tabs.BRIDGE_USDC: 'Bridge USDC'
import { Tabs, SELECT_NONE, SELECT_NATIVE } from '@leapwallet/elements'
const tabsConfig = {
[Tabs.SWAP]: {
title: 'Swaps',
defaults: {
sourceChainId: 'osmosis-1',
sourceAssetSelector: ['denom', 'uosmo'],
// don't select any chain
destinationChainId: SELECT_NONE
}
},
[Tabs.TRANSFER]: {
title: 'Transfers',
defaults: {
sourceChainId: 'cosmoshub-4',
sourceAssetSelector: ['denom', 'uatom'],
},
},
[Tabs.CROSS_CHAIN_SWAPS]: {
title: 'EVM Bridge',
defaults: {
// select the native token of the default chain
sourceAssetSelector: SELECT_NATIVE
}
},
[Tabs.FIAT_ON_RAMP]: {
defaults: {
currency: 'INR',
destinationChainId: 'stargaze-1',
destinationAssetSelector: ['symbol', 'USDC']
}
}
}
Here's the type definitions for TabsConfig. You don't need to go through this, if your code editor has TS/auto-completion support, it will do the job for you.
export type TabConfig<T, K = unknown> = Prettify<
{
enabled?: boolean
title?: string
} & {
defaults?: T
} & K
>
export type AllowedDestinationChainConfig = {
chainId: string
assetDenoms?: string[]
}
export type AllowedSourceChainConfig = {
chainId: string
}
export type AllowedEvmSourceChainConfig = {
chainId: number
assetAddresses?: string[]
}
export type AllowedChainsProp = {
allowedDestinationChains?: AllowedDestinationChainConfig[]
allowedSourceChains?: AllowedSourceChainConfig[]
}
export type AllowedDestinationChainsProp = {
allowedDestinationChains?: AllowedDestinationChainConfig[]
}
/**
* Selects the native asset of the chain
*/
export const SELECT_NATIVE = Symbol('SELECT_NATIVE')
/**
* Selects no asset/chain
*/
export const SELECT_NONE = Symbol('SELECT_NONE')
export type AssetSelectorKey = 'denom' | 'originDenom' | 'symbol'
export type AssetSelector =
| [AssetSelectorKey, string]
| typeof SELECT_NATIVE
| typeof SELECT_NONE
export type ChainSelector = string | number | typeof SELECT_NONE
export type DefaultsConfig = {
sourceChainId?: ChainSelector
destinationChainId?: ChainSelector
sourceAssetSelector?: AssetSelector
destinationAssetSelector?: AssetSelector
}
export type FiatOnRampDefaultsConfig = {
currency?: string | typeof SELECT_NONE
destinationChainId?: ChainSelector
destinationAssetSelector?: AssetSelector
}
export type FiatOnRampAllowedProps = Prettify<
AllowedDestinationChainsProp & {
allowedCurrencies?: string[]
}
>
export type SwapTabConfig = TabConfig<DefaultsConfig, AllowedChainsProp>
export type TransferTabConfig = TabConfig<
Prettify<Omit<DefaultsConfig, 'destinationAssetSelector'>>,
AllowedChainsProp
>
export type FiatOnRampTabConfig = TabConfig<
FiatOnRampDefaultsConfig,
FiatOnRampAllowedProps
>
export type CrossChainAllowedProps = Prettify<
AllowedDestinationChainsProp & {
allowedEvmSourceChains?: AllowedEvmSourceChainConfig[]
}
>
export type CrossChainSwapsConfig = TabConfig<
DefaultsConfig,
CrossChainAllowedProps
>
export type BridgeUSDCConfig = TabConfig<never>
export type TabsConfig = {
[Tabs.SWAP]?: SwapTabConfig
[Tabs.TRANSFER]?: TransferTabConfig
[Tabs.FIAT_ON_RAMP]?: FiatOnRampTabConfig
[Tabs.CROSS_CHAIN_SWAPS]?: CrossChainSwapsConfig
[Tabs.BRIDGE_USDC]?: BridgeUSDCConfig
}
Last modified 2d ago