Merge pull request #27 from darwinia-network/darwinia-ethereum

D2e gas fee tip

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) ? <div className={styles.box}>
+                {Array.isArray(text) && text.map((item) => {
+                    return <p key={item.toString()}>{item}</p>
+                })}
+                {!Array.isArray(text) && <p>{text}</p>}
+                {children}
+            </div> : null }
+            </>
+        )
+    }
+}
+
+export default withTranslation()(FormTip);

src/components/FormTip/index.js

@@ -0,0 +1,3 @@
+import FormTip from './FormTip'
+
+export default FormTip;

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;
+    }
+}

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",

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": "跨链转账",

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 (
                         <div className={styles.formBox}>
                             <div className={`${styles.networkBox} claims-network-box`}>
-                                <Form.Group controlId="darwinaAddressGroup">
+                                <Form.Group controlId="darwinaAddressGroup" className={styles.formInputBox}>
                                     <Form.Label>{t('crosschain:Please select Darwinia mainnet sender account')} <a href={this.renderHelpUrl()} target="_blank"
                                         rel="noopener noreferrer"><img alt=""
                                             className={styles.labelIcon} src={helpLogo} /></a> </Form.Label>
@@ -1032,6 +1034,11 @@ class CrossChain extends Component {
                                             ring: formatBalance(this.state[`ringBalance`], 'gwei').toString()
                                         })}
                                     </Form.Text>
+
+                                    <FormTip text={[
+                                        t(`crosschain:d2e crosschain gas tip 1`),
+                                        t(`crosschain:d2e crosschain gas tip 2`)
+                                    ]}/>
                                 </Form.Group>
                                 <div className={styles.buttonBox}>
                                     <Button variant="color" onClick={this.crossChainFromDarwiniaToEthereum}>{t('crosschain:Submit')}</Button>

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;
 }

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;