Fiat On-ramp

Understand how to use the FiatOnRamp component

FiatOnRamp

import {
  ElementsProvider,
  FiatOnRamp,
  WalletType
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

const YourDapp = () => {
  // trigger the dApp's connect wallet flow
  const connectWallet = () => {}
  
  // set this to the currently connected wallet
  const connectedWalletType = WalletType.LEAP

  return (
    <div className="leap-ui">
      <ElementsProvider
        connectWallet={connectWallet}
        connectedWalletType={connectedWalletType}
      >
        <FiatOnRamp />
      </ElementsProvider>
    </div>
  )
}

Props

className (optional)

Add classes to customise the styling

title (optional)

Use to set the title of tab.

Default Value - "Buy"

sourceHeader(optional)

Use to set custom text for source section header

Default Value - "You pay"

destinationHeader(optional)

Use to set custom text for destination section header

Default Value - "You get"

showPoweredByBanner (optional)

This is a boolean which toggles the visibility for the powered by text for the tab - Powered by Leap and Kado

Default Value - false

defaultValues (optional)

This is an object that contains the default values for the tab

• sourceAmount: input amount

• currency: currency using which you want buy tokens

• destinationChainId: chainId of the destination chain

• destinationAsset: denom of destination asset

allowedCurrencies (optional)

Pass in an array of string where each string is a code representing the currency e.g USD, EUR INR

const allowedCurrencies = ['USD', 'EUR', 'INR']

allowedDestinationChains (optional)

Pass in an array of objects with a chainId property set to the chains you want to display on the source side. You can also restrict the denominations for each chain.

const allowedDestinationChains = [
    {
        chainId: 'cosmoshub-4',  // cosmos hub mainnet
        assetDenoms: [           // optional
            'uatom',
            'ibc/9A234CF0...',
            // and so on...
        ]
    },
]

onTxnComplete (optional)

This a callback which is fired when transaction completes

onTxnInProgress (optional)

This a callback which is fired when transaction is initiated

onFiatAmountChange (optional)

This a callback which is fired when input amount is changed

onFiatCurrencyChange (optional)

This a callback which is fired when currency is changed

onDestinationChainChange (optional)

This a callback which is fired when destination chain is changed

onCryptoCurrencyChange (optional)

This a callback which is fired when destination asset is changed