Tab Config

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.

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']
    }
  }
}

Type Definition

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 = {
  sourceAmount?: string
  sourceChainId?: ChainSelector
  destinationChainId?: ChainSelector
  sourceAssetSelector?: AssetSelector
  destinationAssetSelector?: AssetSelector
}

export type FiatOnRampDefaultsConfig = {
  sourceAmount?: string
  currency?: string | typeof SELECT_NONE
  destinationChainId?: ChainSelector
  destinationAssetSelector?: AssetSelector
}

export type FiatOnRampAllowedProps = Prettify<
  AllowedDestinationChainsProp & {
    allowedCurrencies?: string[]
    showPoweredByBanner?: boolean
    onFiatAmountChange?: (amount: string) => void
    onFiatCurrencyChange?: (currency: Currency | undefined) => void
    onDestinationChainChange?: (chain: ChainBaseData | undefined) => void
    onCryptoCurrencyChange?: (asset: Asset | undefined) => void
  }
>

export type SwapTabPropOptions = AllowedChainsProp & {
  defaultSettings?: SkipSettings
  showPoweredByBanner?: boolean
  onSourceAmountChange?: (amount: string) => void
  onSourceAssetChange?: (asset: Asset | undefined) => void
  onSourceChainChange?: (chain: ChainBaseData | undefined) => void
  onDestinationAssetChange?: (asset: Asset | undefined) => void
  onDestinationChainChange?: (chain: ChainBaseData | undefined) => void
}

export type SwapTabConfig = TabConfig<DefaultsConfig, SwapTabPropOptions>

export type TransferTabPropOptions = AllowedChainsProp & {
  showPoweredByBanner?: boolean
  onSourceAmountChange?: (amount: string) => void
  onSourceAssetChange?: (asset: Asset | undefined) => void
  onSourceChainChange?: (chain: ChainBaseData | undefined) => void
  onDestinationAddressChange?: (address: string) => void
}

export type TransferTabConfig = TabConfig<
  Prettify<Omit<DefaultsConfig, 'destinationAssetSelector'>>,
  TransferTabPropOptions
>

export type FiatOnRampTabConfig = TabConfig<
  FiatOnRampDefaultsConfig,
  FiatOnRampAllowedProps
>

export type CrossChainBaseProps = {
  defaultSettings?: SquidSettingsOptions
  showPoweredByBanner?: boolean
  onSourceAmountChange?: (amount: string) => void
  onSourceAssetChange?: (asset: Asset | undefined) => void
  onSourceChainChange?: (chain: ChainBaseData | undefined) => void
  onDestinationAssetChange?: (asset: Asset | undefined) => void
  onDestinationChainChange?: (chain: ChainBaseData | undefined) => void
}

export type CrossChainAllowedProps = Prettify<
  AllowedDestinationChainsProp & {
    allowedEvmSourceChains?: AllowedEvmSourceChainConfig[]
  } & CrossChainBaseProps
>

export type CrossChainSwapsConfig = TabConfig<
  DefaultsConfig,
  CrossChainAllowedProps
>

export type BridgeUSDCConfig = TabConfig<
  {
    sourceAmount?: string
  },
  CrossChainBaseProps
>

export type TabsConfig = {
  [Tabs.SWAP]?: SwapTabConfig
  [Tabs.TRANSFER]?: TransferTabConfig
  [Tabs.FIAT_ON_RAMP]?: FiatOnRampTabConfig
  [Tabs.CROSS_CHAIN_SWAPS]?: CrossChainSwapsConfig
  [Tabs.BRIDGE_USDC]?: BridgeUSDCConfig
}