Deposit Component

Introduction

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

Feature

Deposit functions and UIs are as follows:

• Select tokens: Select the deposit token and the received token.

• Select networks: Select the from network and the to network.

• Calculator: If the deposit token is different from the received token, the calculator function will be displayed. You can use the calculator to calculate the exchange rate and estimate how many tokens you will receive.

• Minimum deposit limit: You will see the minimum deposit limit. The amount you deposit needs to be greater than the minimum value.

• From network contract address: You can see the from network contract address.

• Deposit tips: You will see the deposit tips and you can read these tips to answer your operational questions.

• Automatically obtain the deposit address: After you select the tokens and networks, you will receive the deposit QR code and deposit address.

• Deposit assets: You can scan the QR code or copy the deposit address to complete the deposit.

• Notification: You can see the processing transaction tip and the transaction completion notification.

ComponentStyle.Mobile

ComponentStyle.Web

Processing Transaction tip

Chrome notification

Transaction completion notifications

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 and ETransferDepositProvider configuration used in the following examples, please refer to the ETransfer UI SDK Config

Example

import React from 'react';
import {
  ComponentStyle,
  Deposit,
  ETransferConfig,
  ETransferDepositProvider,
  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>
        <ETransferDepositProvider>
          <Deposit
            containerClassName={'xxx-deposit'}
            className={'xxx-deposit-body'}
            componentStyle={ComponentStyle.Mobile}
            isShowErrorTip={true}
            isShowMobilePoweredBy={false}
            isListenNoticeAuto={true}
            isShowProcessingTip={true}
            onClickProcessingTip={() => {
              // your logic
            }}
            onActionChange={(data:TDepositActionData) => {
              // view data
            }}
            onConnect={() => {
              // your logic
            }}
          />
        </ETransferDepositProvider>
      </ETransferLayoutProvider>
    </ETransferStyleProvider>
  );
}

Component properties

Field	Type	Required	Remarks
containerClassName	string	false	The additional class to Deposit.
className	string	false	The additional class to Deposit body.
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
isShowErrorTip	boolean	false	Whether to automatically pop up error prompt.
isShowMobilePoweredBy	boolean	false	Whether to display the mobile Powered By ETransfer logo.
isListenNoticeAuto	boolean	false	Whether to establish a socket connection to listen for deposit transaction notifications. The default value is true.
isShowProcessingTip	boolean	false	Whether to display a prompt for ongoing deposit transactions. The default value is true.
onClickProcessingTip	()=>void	false	The click event for the processing transaction tip.
onActionChange	(data:TDepositActionData)=>void	false	You can retrieve the current user's operation data within this method.
onConnect	()=>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].