Liquidity Modal

Usage

import {
  LiquidityModal,
  type LiquidityModalProps,
  type Tabs
  WalletClientContextProvider
} from '@leapwallet/elements'
import { useState } from 'react'
import { useElementsWalletConfig } from './use-elements-wallet-config'

import '@leapwallet/elements/styles.css'

const YourDapp = () => {
  const [isOpen, setIsOpen] = useState(false)
  const walletClientConfig = useElementsWalletConfig()

  return (
    <div className="leap-ui">
      <button onClick={() => setIsOpen(true)}>
        Open Modal
      </button>
      <WalletClientContextProvider value={walletClientConfig}>
        <LiquidityModal
          isOpen={isOpen}
          setIsOpen={setIsOpen}
          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

isOpen (required)

A state variable for the open state of the modal

setIsOpen (required)

A function to change the open state of the modal.

All props of the LiquidityView component are supported in LiquidityModal