⚛️
Leap Cosmos
  • Introduction
  • for dapps: Connect to Leap
    • Introduction
    • Optimizing Wallet Connectivity for Cosmos Dapps
    • Add Leap to existing Keplr integration
    • Add Leap to a new dapp
    • Suggest chain : Add Leap to a non-native chain
    • Add Leap to a Secret dapp
    • Wallet Connect
    • Wallet Adapters
      • Cosmos Kit
      • Shuttle
    • API Reference
  • for chains: integrate into Leap
    • Introduction
  • for SEI dapps: Connect to Compass
    • Connect to Compass
  • FOR SEI EVM DAPPS: CONNECT TO COMPASS
    • Connect to Compass
    • Supported RPC methods
  • Leap Metamask Snap
    • Introduction
    • Integrating Snaps
      • Metamask Cosmos Snap
      • Cosmos Snap Provider
      • Cosmos Kit
  • Embedded Wallet SDK
    • Embedded Wallet SDK React
    • Embedded Wallet Provider
    • Migration
    • Usage without UI
  • Elements
    • Introduction
    • Get Started
    • Integrate via CDN / Script Tag
    • Integrate as an Embed
    • Components
      • Aggregated Swaps
      • IBC Only Swaps
      • Fiat On-ramp
      • IBC Transfer
      • Multi View
    • Theming
      • Using CSS Variables
      • Advanced Customisations
    • Use Elements Without the UI
    • Tab Config
    • Using Skip API Key
  • Cosmos Nodes
    • Fallback Falooda : Node Fallback System
    • (Coming Soon) Blockchain Node Setup Guide
    • (Coming Soon) Monitoring Blockchain Node Performance
  • RESOURCES
    • Leap Assets
Powered by GitBook
On this page
  1. Elements

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.IBC_SWAPS: 'IBC Swaps'

  • Tabs.TRANSFER: 'Send'

  • Tabs.FIAT_ON_RAMP: 'Fiat On-Ramp'

  • Tabs.SWAPS: 'Swaps'

import { Tabs, SELECT_NONE, SELECT_NATIVE } from '@leapwallet/elements'

const tabsConfig = {
  [Tabs.SWAP]: {
    className: 'border',
    showPoweredByBanner: true,
    enabled: true
  },
  [Tabs.FIAT_ON_RAMP]: {
    className: 'border',
    enabled: true,
    showPoweredByBanner: true,
    defaultValues: {
      currency: 'USD',
      destinationChainId: 'cosmoshub-4',
      destinationAsset: {
        originChainId: 'cosmoshub-4',
        originDenom: 'uatom'
      }
    }
  },
  [Tabs.AGGREGATED]: {
    className: 'border',
    enabled: true,
    showPoweredByBanner: false,
    defaultValues: {
      sourceChainId: '1',
      sourceAsset: {
        originChainId: '1',
        originDenom: '0x4Fabb145d64652a948d72533023f6E7A623C7C53'
      },
    }
  },
  [Tabs.TRANSFER]: {
    className: 'border',
    enabled: true,
    showPoweredByBanner: false,
    defaultValues: {
      sourceChainId: 'osmosis-1',
      sourceAsset: {
        originChainId: 'osmosis-1',
        originDenom: 'uosmo'
      },
    }
  }
}

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<K = unknown> = Prettify<
  {
    enabled?: boolean
    orderIndex?: number
  } & K
>


export type IBCSwapTabConfig = TabConfig<
 IBCSwapsProps
>

export type FiatOnRampTabConfig = TabConfig<
  FiatOnRampProps
>

export type AggregatedSwapTabConfig = TabConfig<
  SwapsProps
>

export type TransferTabConfig = TabConfig<
  IBCTransferProps
>


export type TabsConfig = {
  [Tabs.SWAP]?: IBCSwapTabConfig
  [Tabs.TRANSFER]?: TransferTabConfig
  [Tabs.FIAT_ON_RAMP]?: FiatOnRampTabConfig
  [Tabs.AGGREGATED]?: AggregatedSwapTabConfig
}
PreviousUse Elements Without the UINextUsing Skip API Key

Last updated 11 months ago