Configuration

Config Provider

This provider supports you to configure the business environment and the scope of business support, which is one of the means for you to flexibly build ETransfer.

Example

import { ETransferConfig } from '@etransfer/ui-react';
import { IStorageSuite } from '@etransfer/types';

class Store implements IStorageSuite {
  async getItem(key: string) {
    return localStorage.getItem(key);
  }
  async setItem(key: string, value: string) {
    return localStorage.setItem(key, value);
  }
  async removeItem(key: string) {
    return localStorage.removeItem(key);
  }
}
  
ETransferConfig.setConfig({
  networkType: 'MAINNET', // 'MAINNET' | 'TESTNET'
  etransferUrl: 'etransfer service url',
  etransferAuthUrl: 'etransfer authorization service url',
  etransferSocketUrl: 'etransfer socket service url', 
  storage: new Store(),
  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',
  },
  depositConfig: {
    defaultDepositToken: 'ELF',
    supportDepositTokens: ['USDT', 'ELF'],
    defaultReceiveToken: 'ELF',
    supportReceiveTokens: ['USDT', 'ELF'],
    defaultChainId: 'tDVW',
    supportChainIds: ['tDVW'],
    defaultNetwork: 'ETH',
    supportNetworks: ['ETH'],
  },
  withdrawConfig: {
    defaultToken: 'ELF',
    supportTokens: ['ELF', 'USDT'],
    defaultChainId: 'AELF',
    supportChainIds: ['tDVW', 'AELF'],
    defaultNetwork: 'BSC',
    supportNetworks: ['ETH', 'BSC'],
  },
  reCaptchaConfig: {
    theme: 'light',
    size: 'normal',
    customReCaptchaHandler: async () => {
      // If you do not want to use the SDK's human-machine flow, please customize your logic here
      return { type: ReCaptchaType.success, message: 'recaptcha token' };
    },
  }
});

Method Parameters

Field	Type	Required	Remarks
networkType	'MAINNET' | 'TESTNET'	true	Portkey network type.
etransferUrl	string	true	ETransfer server URL. See more: ETransfer SDK Configuration
etransferAuthUrl	string	false	ETransfer auth server URL. See more: ETransfer SDK Configuration
etransferSocketUrl	string	false	ETransfer socket server URL. See more: ETransfer SDK Configuration
storage	IStorageSuite	false	See more: ETransfer SDK Configuration
authorization	{ jwt : string }	true	ETransfer auth token. See More: ETransfer SDK Auth
accountInfo		false	Configuration of the withdraw component
accountInfo.walletType	WalletTypeEnum	true	wallet type
accountInfo.accounts	TAelfAccount	true	account address
accountInfo.managerAddress	string	false	This is a required field if you use the withdraw function.
accountInfo.caHash	string	false	This is a required field if you use the withdraw function.
accountInfo.tokenContractCallSendmethod	<T, R>(props: ICallContractParamsV2) => Promise<R & { transactionId?: string; }>;	false	Token contract send method. This is a required field if you use the withdraw function.
accountInfo.getSignature	TGetSignatureFunc	false	The method of getting signature. This is a required field if you use the withdraw function.
depositConfig		false	Configuration of the deposit component.
depositConfig.defaultDepositToken	string	false	The deposit token is selected by default when the deposit component is initialized. Q: How to configure valid values? A: Get value from eTransferCore.services.getTokenOption
depositConfig.supportDepositTokens	string[]	false	Deposit function optional deposit tokens. Q: How to configure valid values? A: Get value from eTransferCore.services.getTokenOption
depositConfig.defaultReceiveToken	string	false	The receive token selected by default when the deposit component is initialized. Q: How to configure valid values? A: Get value from eTransferCore.services.getTokenOption
depositConfig.supportReceiveTokens	string[]	false	Deposit function optional receive tokens. Q: How to configure valid values? A: Get value from eTransferCore.services.getTokenOption
depositConfig.defaultChainId	ChainId	false	The aelf chain selected by default when the deposit component is initialized.
depositConfig.supportChainIds	ChainId[]	false	Deposit function optional chains.
depositConfig.defaultNetwork	string	false	The network selected by default when the deposit component is initialized. Q: How to configure valid values? A: Get value from eTransferCore.services.getNetworkList
depositConfig.supportNetworks	string[]	false	Deposit function optional networks. Q: How to configure valid values? A: Get value from eTransferCore.services.getNetworkList
withdrawConfig		false	Configuration of the withdraw component.
withdrawConfig.defaultToken	string	false	The withdrawal token selected by default when the withdraw component is initialized. Q: How to configure valid values? A: Get value from eTransferCore.services.getTokenList
withdrawConfig.supportTokens	string[]	false	Withdrawal function optional tokens. Q: How to configure valid values? A: Get value from eTransferCore.services.getTokenList
withdrawConfig.defaultChainId	ChainId	false	The aelf chain selected by default when the withdraw component is initialized.
withdrawConfig.supportChainIds	ChainId[]	false	Withdrawal function optional chains.
withdrawConfig.defaultNetwork	string	false	The network selected by default when the withdraw component is initialized. Q: How to configure valid values? A: Get value from eTransferCore.services.getNetworkList
withdrawConfig.supportNetworks	string[]	false	Withdrawal function optional networks. Q: How to configure valid values? A: Get value from eTransferCore.services.getNetworkList
reCaptchaConfig		false	Configuration of uman-machine verification.
reCaptchaConfig.color	'light' | 'dark'	false	Theme color of human-machine verification.
reCaptchaConfig.size	'normal' | 'compact'	false	The size of the human-machine verification.
reCaptchaConfig.customReCaptchaHandler	Function	false	Custom Logic. If you do not want to use the SDK's human-machine flow, please customize your logic here.

Style Provider

If you want to use the ETransfer style, please wrap the ETransferStyleProvider and css file.

import { ETransferStyleProvider } from '@etransfer/ui-react';
import '@etransfer/ui-react/dist/assets/index.css';

export default function ETransferLayout({ children }: { children: React.ReactNode }) {
  return (
    <ETransferStyleProvider>
      {children}
    </ETransferStyleProvider>
  );
}

Layout Provider

If you want to display global loading, please configure ETransferLayoutProvider.

import { ETransferLayoutProvider } from '@etransfer/ui-react';

export default function ETransferLayout({ children }: { children: React.ReactNode }) {
  return (
    <ETransferLayoutProvider>
      {children}
    </ETransferLayoutProvider>
  );
}

Deposit Provider

ETransferDepositProvider provides a way to pass data through the component tree without having to pass props down manually at every level.

import { ComponentStyle, Deposit, ETransferDepositProvider } from '@etransfer/ui-react';

export default function DepositPage() {
  return (
    <ETransferDepositProvider>
      <Deposit componentStyle={ComponentStyle.Mobile} />
    </ETransferDepositProvider>
  );
}

Method Parameters

Field	Type	Required	Remarks
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

Withdraw Provider

ETransferWithdrawProvider provides a way to pass data through the component tree without having to pass props down manually at every level.

import { ComponentStyle, Withdraw, ETransferWithdrawProvider } from '@etransfer/ui-react';

export default function WithdrawPage() {
  return (
    <ETransferWithdrawProvider>
      <Withdraw componentStyle={ComponentStyle.Mobile} />
    </ETransferWithdrawProvider>
  );
}

Method Parameters

Field	Type	Required	Remarks
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