History Comonent

Introduction

If you want to quickly access the querying history function, please use this UI component. You will get the same UI display and querying historical records function as the ETransfer app.

Feature

History functions and UIs are as follows:

• You can view transaction history.

• You can filter transaction records by transaction type, status, and date.

• You can view more transaction details by entering your address and transaction hash.

ComponentStyle.Mobile

ComponentStyle.Web

How to use

Installation

See More: Installation | ETransfer

npm install @etransfer/ui-react
# OR
yarn add @etransfer/ui-react

Config

For the ETransferConfig, ETransferStyleProvider, ETransferLayoutProvider configuration used in the following examples, please refer to the ETransfer UI SDK Config

Example

import React from 'react';
import {
  ComponentStyle,
  History,
  ETransferConfig,
  ETransferLayoutProvider
  ETransferStyleProvider,
} from '@etransfer/ui-react';
import '@etransfer/ui-react/dist/assets/index.css';

export default function ETransferLayout({ children }: { children: React.ReactNode }) {
  ETransferConfig.setConfig({
    networkType: 'MAINNET', // 'MAINNET' | 'TESTNET'
    etransferUrl: 'etransfer service url',
    etransferAuthUrl: 'etransfer authorization service url',
    authorization: {
      jwt: 'Bearer xxx', // ETransfer authorization token
    },
  });

  return (
    <ETransferStyleProvider>
     <ETransferLayoutProvider>
        <History
          className={'xxx-history'}
          componentStyle={ComponentStyle.Mobile}
          isUnreadHistory={false}
          isShowMobilePoweredBy={true}
          onClickHistoryItem={(id:string) => {
            // your logic
          }}
          onActionChange={(data:THistoryActionData) => {
            // view data
          }}
        />
      </ETransferLayoutProvider>
    </ETransferStyleProvider>
  );
}

Component properties

Field	Type	Required	Remarks
className	string	false	The additional class to History.
componentStyle	ComponentStyle	false	Component style configuration items. ComponentStyle.Mobile is a UI that is better adapted to mobile size. ComponentStyle.Web is a UI that is better adapted to web size. If you want to configure responsiveness, please switch the UI style at the appropriate time. Default is ComponentStyle.Web
isUnreadHistory	boolean	false	Does the user have unread messages
isShowMobilePoweredBy	boolean	false	Whether to display the mobile Powered By ETransfer logo.
onClickHistoryItem	(id:string)=void	false	The click event for the history item. id: transaction order ID. You can use this id and eTransferCore.services.getRecordDetail('orderId') to get more infomations.
onActionChange	(data:THistoryActionData)=>void	false	You can retrieve the current user's operation data within this method.

Notes

• Ensure that the network configuration (networkType) , service URL (etransferUrl) , authorization URL (etransferAuthUrl) and authorization (jwt) are accurate.

• Use a valid JWT token to ensure proper functionality.

• To get ETransferConfig authorization.jwt, you can read ETransfer SDK Auth

More Example

If you want to use the History and TransferDetail components together, please refer to the ETransfer UI SDK Transfer Detail Comonent and github example code.

Contact Us

For any questions, please reach out to [e-mail].