AssetCard

View some asset information and provide shortcuts for ramp, transfers, and faucet.

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

Functions enabled in the Mainnet environment

• Wallet name (e.g., Wallet 01)
• Asset quantity (e.g. $215.08)
• Ramp entry (i.e., Buy)
• Transfer entry (i.e., Send)
• View personal wallet address and QR code entry (i.e., Receive)

Functions enabled in the Testnet environment

• Wallet name (e.g., Wallet 01)
• Environment information (Dev Mode)
• Transfer entry (i.e., Send)
• View personal wallet address and QR code entry (i.e., Receive)
• Faucet entry to claim test tokens (i.e., Faucet)

Usage

import { AssetCard } from '@portkey/did-ui-react';

const App: React.FC = () => {
  return (
    <AssetCard
      isShowRamp={true}
      isShowFaucet={true}
      networkType="MAINNET"
      backIcon={<></>} // bind react node
      nickName={'Wallet Name'}
      accountBalanceUSD={'$100.00'}
      onBack={} // bind function
      onBuy={} // bind function
      onReceive={} // bind function
      onFaucet={} // bind function
    />;
  );
};

export default App;

TypeScript

Property	Description	Type	Required	Default	Version
backIcon	Back button that controls the display of page header	ReactNode	false	—
networkType	Control network type	NetworkType, 'MAINNET' | 'TESTNET'	false	—	V2.0.0
nickName	Display wallet name	string	false	—
accountBalanceUSD	Display asset quantity	string	false	—
isShowRamp	Is ramp shown	boolean	false	—
isShowFaucet	Is faucet shown	boolean	false	—
onBuy	The event of clicking the buy button	() => void	false	—
onBack	The event of clicking the back button on header	() => void	false	—
onFaucet	The event of clicking the faucet button	() => void	false	—
onReceive	The event of clicking the view address button	() => void	false	—