ETransferContent Comonent

Introduction

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

Feature

ETransferContent's functions and UIs are as follows:

• Deposit assets: The functionality is the same as ETransfer UI SDK Deposit Component.

• Withdrawal assets: The functionality is the same as ETransfer UI SDK Withdraw Comonent.

• Querying historical records: The functionality is the same as ETransfer UI SDK History Comonent.

• Viewing transaction details: The functionality is the same as ETransfer UI SDK Transfer Detail Comonent.

• Unread message reminder: If you have unread transaction records, an unread record reminder will be displayed on the sidebar or navigation menu.

• Display User account address: Display the user's account address in the navigation header. You can also choose to hide it.

• Jump to the ETransfer official website: Click the logo in the navigation header to jump to the ETransfer official website.

Deposit - ComponentStyle.Mobile

Withdraw - ComponentStyle.Mobile

History - ComponentStyle.Mobile

Deposit - ComponentStyle.Web

Withdraw - ComponentStyle.Web

History - 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,
  ETransferContent,
  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',
    etransferSocketUrl: 'etransfer socket service url',
    authorization: {
      jwt: 'Bearer xxx', // ETransfer authorization token
    },
  });

  return (
    <ETransferStyleProvider>
     <ETransferLayoutProvider>
        <ETransferContent
          className={'xxx-etransfer'}
          componentStyle={ComponentStyle.Mobile}
          isCanClickHeaderLogo={true}
          isShowHeaderUserProfile={true}
          isShowMobileFooter={false}
          isShowErrorTip={true}
          onClickHeaderLogo={() => {
            console.log('your function');
          }}
          onLifeCycleChange={() => {
            console.log('view data');
          }}
          onLogin={() => {
            console.log('login event');
          }}
        />
      </ETransferLayoutProvider>
    </ETransferStyleProvider>
  );
}

Component properties

Field	Type	Required	Remarks
className	string	false	The additional class to ETransferContent.
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.
isCanClickHeaderLogo	boolean	false	Is the logo in the header clickable? Default is true.
isShowHeaderUserProfile	boolean	false	Whether to display user addresses in the mobile footer. Default is true.
isShowMobileFooter	boolean	false	Whether to display social media links in the mobile footer. Default is false.
isShowErrorTip	boolean	false	Whether to automatically pop up error prompt. Default is true.
onClickHeaderLogo	function	false	Click event of the page header logo. The default method is to open ETransfer Official Website in a new browser tab.
onLifeCycleChange	function	false	You can retrieve the current user's operation data within this method.
onLogin	()=>void	false	The wallet connection event.

Notes

• Ensure that the network configuration (networkType) , service URL (etransferUrl) , authorization URL (etransferAuthUrl) , socket URL (etransferSocketUrl) 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

• If you are using the message notification feature, please actively call @etransfer/ui-react unsubscribeUserOrderRecord method to cancel the WebSocket listener when logging out.

More Example

For more details and use cases, check out the github example code.

Contact Us

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