Withdraw Component

Introduction

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

Feature

Withdrawal functions and UIs are as follows:

• Select chain: Select the aelf chain from which you will withdraw tokens.

• Select token: Choose the token you wish to withdraw.

• Input address: Enter the address where you want the tokens to be delivered.

• Select network: Select the network where you want the tokens to be delivered.

• Input amount: Enter the amount of tokens you wish to withdraw.

• Estimated received: After entering the above information, detailed withdrawal information will be automatically retrieved. You will see the estimated amount received, fees, and gas costs.

• Complete the withdrawal: Click the Withdraw button and follow the prompts to authorize the withdrawal, and you can complete the withdrawal.

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

Example

import React from 'react';
import {
  ComponentStyle,
  Withdraw,
  ETransferConfig,
  ETransferWithdrawProvider,
  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
    },
    accountInfo: {
      tokenContractCallSendMethod: () => {
        // your logic
      }},
      getSignature: () = > {
        // your logic
      }},
      walletType: 'your walletType',
      accounts: {},
      managerAddress: walletType === WalletTypeEnum.elf ? ownerAddress : managerAddress,
      caHash: 'your caHash',
    }
  });

  return (
    <ETransferStyleProvider>
     <ETransferLayoutProvider>
        <ETransferWithdrawProvider>
          <Withdraw
            className={'xxx-withdraw'}
            chainClassName={'xxx-withdraw-chain'}
            fromClassName={'xxx-withdraw-from'}
            componentStyle={ComponentStyle.Mobile}
            isShowErrorTip={true}
            isShowMobilePoweredBy={false}
            isListenNoticeAuto={true}
            isShowProcessingTip={true}
            onClickProcessingTip={() => {
              // your logic
            }}
            onActionChange={(data:TWithdrawActionData) => {
              // view data
            }}
            onLogin={() => {
              // your logic
            }}
          />
        </ETransferWithdrawProvider>
      </ETransferLayoutProvider>
    </ETransferStyleProvider>
  );
}

Component properties

Field	Type	Required	Remarks
className	string	false	The additional class to Withdraw.
chainClassName	string	false	The additional class to SelectChain.
fromClassName	string	false	The additional class to WithdrawFrom.
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 withdrawal transaction notifications. The default value is true.
isShowProcessingTip	boolean	false	Whether to display a prompt for ongoing withdrawal transactions. The default value is true.
onClickProcessingTip	()=>void	false	The click event for the processing transaction tip.
onActionChange	(data:TWithdrawActionData)=>void	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].