Liquidity View

Usage

import {
  LiquidityView,
  type LiquidityViewProps,
  type Tabs
} from '@leapwallet/elements'
import { useElementsWalletConfig } from './use-elements-wallet-config'

const YourDapp = () => {
  const walletClientConfig = useElementsWalletConfig()
  
  return (
    <div className="leap-ui">
      <WalletClientContextProvider value={walletClientConfig}>
        <LiquidityView 
          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'
                  },
                }
              }
            }}
        />
      </WalletClientContextProvider>
    </div>
  )
}

Props

className (optional)

Add classes to customise the styling

tabsConfig (optional)

Configure titles, default chains, assets, currencies for each tab. You can also specify allowed chains, allowed tokens for each tab.

defaultActiveTab (optional)

Which tab is initially active - default is Tabs.SWAP. If you have disabled the defaultActiveTab, elements will automatically set the next tab (which is not disabled) as default. If none of the tabs is enabled, a message saying the same will be shown.