diff --git a/src/components/FormTip/FormTip.js b/src/components/FormTip/FormTip.js new file mode 100644 index 0000000..e812be8 --- /dev/null +++ b/src/components/FormTip/FormTip.js @@ -0,0 +1,26 @@ +import React, {Component} from 'react' +import {withTranslation} from "react-i18next"; +import styles from './style.module.scss' + +class FormTip extends Component { + constructor(props, context) { + super(props, context); + } + + render(){ + const {children, text, className} = this.props + return( + <> + { ((Array.isArray(text) && text.length > 0) || text || children) ?
+ {Array.isArray(text) && text.map((item) => { + return

{item}

+ })} + {!Array.isArray(text) &&

{text}

} + {children} +
: null } + + ) + } +} + +export default withTranslation()(FormTip); diff --git a/src/components/FormTip/index.js b/src/components/FormTip/index.js new file mode 100644 index 0000000..81b8df0 --- /dev/null +++ b/src/components/FormTip/index.js @@ -0,0 +1,3 @@ +import FormTip from './FormTip' + +export default FormTip; diff --git a/src/components/FormTip/style.module.scss b/src/components/FormTip/style.module.scss new file mode 100644 index 0000000..7f65cbc --- /dev/null +++ b/src/components/FormTip/style.module.scss @@ -0,0 +1,16 @@ +.box{ + text-align: left; + background: #F4F4F5; + padding: 20px; + p { + margin: 0; + font-size: 12px; + color: #302B3C; + } +} + +@media (max-width: 575px) { + .box{ + padding: 15px; + } +} diff --git a/src/locales/en-us.json b/src/locales/en-us.json index cb9691b..f7bc43c 100644 --- a/src/locales/en-us.json +++ b/src/locales/en-us.json @@ -118,7 +118,9 @@ "Token for cross-chain transfer": "Token for cross-chain transfer", "Amount is wrong": "Amount is wrong", "The amount exceeds the account available balance": "The amount exceeds the account available balance", - "The entered recipient account is incorrect": "The entered recipient account is incorrect" + "The entered recipient account is incorrect": "The entered recipient account is incorrect", + "d2e crosschain gas tip 1": "· Please initiate a claim transaction of the Ethereum network in the \"Cross-chain transfer history\".", + "d2e crosschain gas tip 2": "· Each claim transaction of Ethereum is estimated to use 600,000 Gas." }, "crosschain_ethtron": { "claim": "Cross-chain Transfer", diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json index 1809153..fca3e90 100644 --- a/src/locales/zh-cn.json +++ b/src/locales/zh-cn.json @@ -118,7 +118,9 @@ "Token for cross-chain transfer": "跨链转账通证", "Amount is wrong": "数量输入错误", "The amount exceeds the account available balance": "输入数量超过账户可用余额", - "The entered recipient account is incorrect": "输入的接收账号错误" + "The entered recipient account is incorrect": "输入的接收账号错误", + "d2e crosschain gas tip 1": "· 请在「跨链历史交易」中发起以太坊网络的「领取交易」。", + "d2e crosschain gas tip 2": "· 每笔以太坊网络的「领取交易」预计消耗 600000 Gas。" }, "crosschain_ethtron": { "claim": "跨链转账", diff --git a/src/page/CrossChain/index.js b/src/page/CrossChain/index.js index 61cb469..4acfa4d 100644 --- a/src/page/CrossChain/index.js +++ b/src/page/CrossChain/index.js @@ -16,6 +16,8 @@ import { } from './utils' import { InputRightWrap } from '../../components/InputRightWrap' import InputWrapWithCheck from '../../components/InputWrapWithCheck' +import FormTip from '../../components/FormTip' + import { parseChain } from '../../util'; import { withTranslation } from "react-i18next"; import i18n from '../../locales/i18n'; @@ -965,7 +967,7 @@ class CrossChain extends Component { return (
- + {t('crosschain:Please select Darwinia mainnet sender account')} @@ -1032,6 +1034,11 @@ class CrossChain extends Component { ring: formatBalance(this.state[`ringBalance`], 'gwei').toString() })} + +
diff --git a/src/page/CrossChain/style.module.scss b/src/page/CrossChain/style.module.scss index adfe56a..6f52735 100644 --- a/src/page/CrossChain/style.module.scss +++ b/src/page/CrossChain/style.module.scss @@ -165,6 +165,10 @@ padding-top: 30px; } + .formInputBox { + margin-bottom: 3rem; + } + .buttonBox { display: flex; justify-content: space-between; @@ -300,7 +304,7 @@ .feeTip { margin-top: 10px; - margin-bottom: 3rem; + margin-bottom: 10px; font-size: 14px; text-align: right; } diff --git a/src/page/Wrapper/index.js b/src/page/Wrapper/index.js index deef6f5..66f213e 100644 --- a/src/page/Wrapper/index.js +++ b/src/page/Wrapper/index.js @@ -33,7 +33,8 @@ import Claim from '../Claims'; const helpUrl = { eth_crosschain: 'https://mp.weixin.qq.com/s/c-aVPjDibyfUAHYZo1HW9w', tron_crosschain: 'https://mp.weixin.qq.com/s/c-aVPjDibyfUAHYZo1HW9w', - crab_crosschain: 'https://medium.com/@DarwiniaNetwork/must-read-darwinia-mainnet-progressive-launch-announcement-ff20a04a8bdd' + crab_crosschain: 'https://medium.com/@DarwiniaNetwork/must-read-darwinia-mainnet-progressive-launch-announcement-ff20a04a8bdd', + darwinia_crosschain: 'https://docs.darwinia.network/docs/en/wiki-tut-wormhole-d2e' } const THREE = window.THREE;