Fiat On-ramp Modal

If you want to have the FiatOnRamp component inside a modal on your dApp, we recommend you to use the FiatOnRampModal component. We handle all the states and edge-cases, so you can focus on your dApp!

Usage

import {
  FiatOnRampModal,
  type FiatOnRampModalProps,
  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 Buy Modal
      </button>
      <WalletClientContextProvider value={walletClientConfig}>
        <FiatOnRampModal
          isOpen={isOpen}
          setIsOpen={setIsOpen}
        />
      </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 theFiatOnRamp component are supported in FiatOnRampModal