TransferDetail Component

Introduction

If you want to quickly integrate the transaction details viewing feature, please use this UI component. You will get the same UI display and querying historical records function as the ETransfer app.

Feature

Transfer Detail functions and UIs are as follows:

• Display transaction steps and status.

• Show transaction hash, address, token and amount.

• Update the transaction progress in real-time while staying on the page.

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 configuration.

Example

import React from 'react';
import {
  ComponentStyle,
  TransferDetail,
  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',
    authorization: {
      jwt: 'Bearer xxx', // ETransfer authorization token
    },
  });

  return (
    <ETransferStyleProvider>
     <ETransferLayoutProvider>
        <TransferDetail
          className={'xxx-transfer-detail'}
          componentStyle={ComponentStyle.Mobile} // or ComponentStyle.Web
          orderId={'detailId'}
          isShowBackElement={true}
          isShowMobilePoweredBy={false}
          onBack={() => {
            // your logic
          }}
        />
      </ETransferLayoutProvider>
    </ETransferStyleProvider>
  );
}

Component properties

Field	Type	Required	Remarks
className	string	false	The additional class to TransferDetail.
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
orderId	string	true	Transaction order ID.
isShowBackElement	boolean	false	Whether to display the back element. Default is true.
isShowMobilePoweredBy	boolean	false	Whether to display the mobile Powered By ETransfer logo.
onBack	()=void	false	The click event for the back icon.

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 History Component and github example code .

Contact Us

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