RampPreview

Host Ramp transaction details for users to review inputted buying and selling information, as well as navigate to ACH payment.

Before using this component, please make sure you are logged-in.

Before using this component, we assume that you are already familiar with the basic configuration of Portkey.

Feature

RampPreview's functions and UIs are as follows:

• Display the basic information for buy, including fiat currency, types of tokens, quantity, and exchange rate
• Exchange rate is renewed every 15 seconds
• Provide a shortcut to navigate to Alchemy Pay to complete the transaction

buy-preview

sell-preview

Usage

import { RampPreview, RampTypeEnum } from '@portkey/did-ui-react';

const App: React.FC = () => (
  <RampPreview
    initState={{
      amount: '200',
      country: 'US',
      crypto: 'ELF',
      fiat: 'USD',
      network: 'ELF',
      side: RampTypeEnum.BUY,
    }}
    chainId={'AELF'}
    portkeyServiceUrl="https://localtest-applesign.portkey.finance"
    overrideAchConfig={{
      appId: 'f83Is2y7L425rxl8',
      baseUrl: 'https://ramptest.alchemypay.org',
      updateAchOrder: '/api/app/thirdPart/order/alchemy',
    }}
    onBack={function (): void {}}
  />
);
export default App;

API

Property	Description	Type	Required	Default
className	Class name of the top level container	string	false	—
initState	Data that controls the initial page display	IRampPreviewInitState	true	—
portkeyServiceUrl	Portkey server domain. Can be sent to ACH so ACH can interact with Portkey server domain	string	true	—
chainId	Chain ID where it happens	ChainId	false	'AELF'
overrideAchConfig	ACH configuration	IAchConfig	false	Default is the Mainnet configuration
isBuySectionShow	Control if on-ramp is enabled	boolean	false	true
isSellSectionShow	Control if off-ramp is enabled	boolean	false	true
onBack	Control the event to go back to the previous route	() => void	true	—

Interface	Property	Description	Type	Required
IRampPreviewInitState
	crypto	Crypto name, eg: ELF	string	true
	netwrok	Crypto network eg: AELF	string	true
	fiat	Fait code, eg: USD	string	true
	country	Country code, eg: US	string	true
	amount	Account number	string	false
	side	Business type	RampTypeEnum: "BUY" | "SELL"	true
IAchConfig
	appId	Merchant App Id eg: P0e0l39jipsNYT46	number | string	true
	baseUrl	Redirect to ACH url, eg: 'https://ramp.alchemypay.org'	string	true
	updateAchOrder	Redirect to ACH path, eg: '/api/app/thirdPart/order/alchemy'	string	true

Fixed configuration	Testnet	Mainnet
IAchConfig	appId: 'f83Is2y7L425rxl8', baseUrl: 'https://ramptest.alchemypay.org', updateAchOrder: '/api/app/thirdPart/order/alchemy',	appId: 'P0e0l39jipsNYT46', baseUrl: 'https://ramp.alchemypay.org', updateAchOrder: '/api/app/thirdPart/order/alchemy'