From f6d23614656dc0f051523c335d11b2943a34c146 Mon Sep 17 00:00:00 2001
From: Makoto Inoue <2630+makoto@users.noreply.github.com>
Date: Tue, 26 Jan 2021 09:22:42 +0000
Subject: [PATCH 1/3] Update ui and address-encoder (#1061)
---
package.json | 4 ++--
yarn.lock | 23 +++++++++++++++++++----
2 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/package.json b/package.json
index 48b56c526..792bbe049 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
"@portis/web3": "^2.0.0-beta.59",
"@toruslabs/torus-embed": "^1.8.6",
"@walletconnect/web3-provider": "^1.3.1",
- "@ensdomains/address-encoder": "^0.2.5",
+ "@ensdomains/address-encoder": "^0.2.6",
"@ensdomains/mock": "^2.0.34",
"@ensdomains/react-ens-address": "^0.0.27",
- "@ensdomains/ui": "^3.0.57",
+ "@ensdomains/ui": "^3.0.58",
"apollo-cache-inmemory": "^1.2.9",
"apollo-client": "^2.4.5",
"apollo-link": "^1.2.2",
diff --git a/yarn.lock b/yarn.lock
index 3afc05706..9d7525180 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1361,6 +1361,21 @@
ripemd160 "^2.0.2"
sha3 "^2.1.3"
+"@ensdomains/address-encoder@^0.2.6":
+ version "0.2.6"
+ resolved "https://registry.yarnpkg.com/@ensdomains/address-encoder/-/address-encoder-0.2.6.tgz#1ea4aefea8c9617ada0a80519bec00589920ffac"
+ integrity sha512-b0jtq3vx1xxUJRwS9zJMy5SVtH1ixIS18gHm3tFyBR1ehsk/lK80nCoV1lJi0KXgQ/2RD+/KYoWlW5CNZG7AAw==
+ dependencies:
+ bech32 "^1.1.3"
+ blakejs "^1.1.0"
+ bn.js "^4.11.8"
+ bs58 "^4.0.1"
+ crypto-addr-codec "^0.1.7"
+ js-sha512 "^0.8.0"
+ nano-base32 "^1.0.1"
+ ripemd160 "^2.0.2"
+ sha3 "^2.1.3"
+
"@ensdomains/content-hash@^2.5.3":
version "2.5.3"
resolved "https://registry.yarnpkg.com/@ensdomains/content-hash/-/content-hash-2.5.3.tgz#017ff30d36d6b4f7917afe5718b313e4dcd7ca79"
@@ -1450,10 +1465,10 @@
lodash "^4.17.11"
web3 "^1.3.0"
-"@ensdomains/ui@^3.0.57":
- version "3.0.57"
- resolved "https://registry.yarnpkg.com/@ensdomains/ui/-/ui-3.0.57.tgz#0e55f5ff1c1f9eac8ced35de2e7fdc4fe21e8298"
- integrity sha512-YWnh4XhvOR2rqDVtt9zpXbJJZClDiuH7BDEBstcwcuH7KHIntDQfXB4SY8FZwiD1rHyVX+qh7PXpvsXfHsRQiA==
+"@ensdomains/ui@^3.0.58":
+ version "3.0.58"
+ resolved "https://registry.yarnpkg.com/@ensdomains/ui/-/ui-3.0.58.tgz#b028b190f036c4151e771e2c74e91b8e279af006"
+ integrity sha512-EUWB2QtZQ/q8WFvk/MaxPiVB7EWaQktqTICmLYAI7MtTPSgOoxxAV/v0j2b5J+yeXzylYLavJSv9c6eHaw+JSw==
dependencies:
"@0xproject/utils" "^2.0.2"
"@babel/plugin-proposal-class-properties" "^7.8.3"
From 20c5eb9328ef78edaf8fe86aca7258b7baf5141b Mon Sep 17 00:00:00 2001
From: Makoto Inoue <2630+makoto@users.noreply.github.com>
Date: Thu, 28 Jan 2021 08:31:46 +0000
Subject: [PATCH 2/3] Add gas estimate and add more explanation (#1063)
* fix-faq-background
* Add second text on step1
* Add gas estimate
* Add translation
* Separete into Price and GasPrice
* Do not show gas price estimate for renewal
* Get rid of gas detail
* Change to show gas price range and simpify the UI
* Remove gasDescription
* Remove the mention of the buffer
---
public/locales/cn.json | 4 +
public/locales/de.json | 4 +
public/locales/en.json | 4 +
public/locales/es.json | 4 +
public/locales/fr.json | 4 +
public/locales/ja.json | 4 +
public/locales/ko.json | 4 +
public/locales/pl.json | 4 +
public/locales/ru.json | 4 +
public/locales/vi.json | 4 +
.../NameRegister/EthRegistrationGasPrice.js | 94 +++++++++++++++++++
.../SingleName/NameRegister/Explainer.js | 2 +-
.../SingleName/NameRegister/NameRegister.js | 12 ++-
.../SingleName/NameRegister/Price.js | 5 +-
src/components/SingleName/Pricer.js | 45 ++++++---
src/components/hooks.js | 22 +++++
16 files changed, 202 insertions(+), 18 deletions(-)
create mode 100644 src/components/SingleName/NameRegister/EthRegistrationGasPrice.js
diff --git a/public/locales/cn.json b/public/locales/cn.json
index 19307790d..9b15b55cb 100644
--- a/public/locales/cn.json
+++ b/public/locales/cn.json
@@ -159,8 +159,11 @@
"text": "等待交易被打包"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "当前选定时长的注册价格",
"registrationPeriodLabel": "注册期",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "支付总额",
"yearUnit": "年份"
},
@@ -189,6 +192,7 @@
"step1": {
"label": "第 1 步",
"text": "需要在钱包中确认一笔交易，这是完成域名注册所需的两笔交易中的第一笔。",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "请求注册"
},
"step2": {
diff --git a/public/locales/de.json b/public/locales/de.json
index b05ce5f38..1756fd311 100644
--- a/public/locales/de.json
+++ b/public/locales/de.json
@@ -163,8 +163,11 @@
"text": "Tx ausstehend"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Registration Period",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Gesamtpreis",
"yearUnit": "Jahr"
},
@@ -193,6 +196,7 @@
"step1": {
"label": "Schritt 1",
"text": "Ihr Wallet wird sich öffnen und Sie werden gebeten, die erste von zwei für die Registrierung erforderlichen Transaktionen zu bestätigen.",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Anfrage zur Registrierung"
},
"step2": {
diff --git a/public/locales/en.json b/public/locales/en.json
index 3976197f4..ec21b260c 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -163,8 +163,11 @@
"text": "Tx Pending"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Registration Period",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Total price to pay",
"yearUnit": "year"
},
@@ -193,6 +196,7 @@
"step1": {
"label": "Step 1",
"text": "Your wallet will open and you will be asked to confirm the first of two transactions required for registration.",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Request to register"
},
"step2": {
diff --git a/public/locales/es.json b/public/locales/es.json
index b5aa1c735..cb7f444f7 100644
--- a/public/locales/es.json
+++ b/public/locales/es.json
@@ -163,8 +163,11 @@
"text": "Tx Pendiente"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Periodo de registración",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Precio total a pagar",
"yearUnit": "año"
},
@@ -193,6 +196,7 @@
"step1": {
"label": "Paso 1",
"text": "Tu cartera se abrirá y se te pedirá que confirmes la primera de las dos transacciones necesarias para el registro",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Solicitud de registro"
},
"step2": {
diff --git a/public/locales/fr.json b/public/locales/fr.json
index 5fbe6707a..51a22d68c 100644
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@@ -163,8 +163,11 @@
"text": "Transaction en attente"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Période d'enregistrement",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Prix total à payer",
"yearUnit": "année"
},
@@ -193,6 +196,7 @@
"step1": {
"label": "Étape 1",
"text": "Votre portefeuille s'ouvrira et il vous sera demandé de confirmer la première des deux transactions requises pour l'inscription.",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Demande d'enregistrement"
},
"step2": {
diff --git a/public/locales/ja.json b/public/locales/ja.json
index 70ac41c25..8993c74ee 100644
--- a/public/locales/ja.json
+++ b/public/locales/ja.json
@@ -161,8 +161,11 @@
"text": "保留中のTx"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "登録期間",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "お支払合計額",
"yearUnit": "年"
},
@@ -191,6 +194,7 @@
"step1": {
"label": "ステップ１",
"text": "ウォレットが開き、登録に必要な2つのトランザクションのうち最初のトランザクションの確認を求められます。",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "登録のリクエスト"
},
"step2": {
diff --git a/public/locales/ko.json b/public/locales/ko.json
index 73075bfc6..3c05e3f9f 100644
--- a/public/locales/ko.json
+++ b/public/locales/ko.json
@@ -161,8 +161,11 @@
"text": "트랜잭션 보류"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "등록 기간",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "결제할 총 금액",
"yearUnit": "년"
},
@@ -191,6 +194,7 @@
"step1": {
"label": "단계 1",
"text": "지갑 화면이 열리고 등록에 필요한 두 개의 트랜잭션 중 첫번째 트랜잭션에 대한 컨펌 요청이 있을 것입니다.",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "등록 요청"
},
"step2": {
diff --git a/public/locales/pl.json b/public/locales/pl.json
index a3c0e91a6..8384df2ff 100644
--- a/public/locales/pl.json
+++ b/public/locales/pl.json
@@ -165,8 +165,11 @@
"text": "Oczekujący Tx"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Czas rejestracji",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Łączna kwota do zapłaty",
"yearUnit": "rok"
},
@@ -195,6 +198,7 @@
"step1": {
"label": "Krok 1",
"text": "Twój portfel zostanie otwarty i będziesz poproszony o potwierdzenie dwóch transakcji wymaganych do rejestracji",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Wniosek o rejestrację"
},
"step2": {
diff --git a/public/locales/ru.json b/public/locales/ru.json
index edb40fda9..b94bf39be 100644
--- a/public/locales/ru.json
+++ b/public/locales/ru.json
@@ -165,8 +165,11 @@
"text": "TX в ожидании"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Срок регистрации",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Общие сумма к оплате",
"yearUnit": "год"
},
@@ -195,6 +198,7 @@
"step1": {
"label": "Шаг 1",
"text": "Ваш кошелёк откроется и вас попросят подтвердить первые две транзакции, необходимые для регистрации.",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Запрос на регистрацию"
},
"step2": {
diff --git a/public/locales/vi.json b/public/locales/vi.json
index 50e3bc83a..9e9b9afeb 100644
--- a/public/locales/vi.json
+++ b/public/locales/vi.json
@@ -161,8 +161,11 @@
"text": "Đang xử lý giao dịch"
},
"pricer": {
+ "gasDescription": "Estimated Gas Price (Step 1 + Step 3). The gas price will flucuate.",
"pricePerAmount": "Price per amount of time selected",
"registrationPeriodLabel": "Thời gian đăng ký",
+ "registrationPriceLabel": "Registration price to pay",
+ "totalDescription": "Estimated Total (Price + Gas). The gas price is based at {{gasPriceToGweiSlow}}-{{gasPriceToGweiFast}} Gwei.",
"totalPriceLabel": "Tổng giá thanh toán",
"yearUnit": "Năm"
},
@@ -191,6 +194,7 @@
"step1": {
"label": "Bước 1",
"text": "Ví của bạn sẽ mở và bạn sẽ được yêu cầu xác nhận 2 giao dịch bắt buộc để đăng ký",
+ "text2": "If the second transaction is not processed within 24 hours of the first, you will need to start again from step 1.",
"title": "Yêu cầu đăng ký"
},
"step2": {
diff --git a/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js b/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js
new file mode 100644
index 000000000..9ef6ad02e
--- /dev/null
+++ b/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js
@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import styled from '@emotion/styled/macro'
+import { useTranslation, Trans } from 'react-i18next'
+import mq from 'mediaQuery'
+import EthVal from 'ethval'
+import DefaultInput from '../../Forms/Input'
+const GWEI = 1000000000
+const COMMIT_GAS_WEI = 42000
+const REGISTER_GAS_WEI = 240000
+const TOGAL_GAS_WEI = COMMIT_GAS_WEI + REGISTER_GAS_WEI
+
+const PriceContainer = styled('div')`
+ width: 100%;
+ ${mq.medium`
+ width: auto
+ `}
+ margin:5px 0;
+`
+
+const Value = styled('div')`
+ font-family: Overpass;
+ font-weight: 100;
+ font-size: 22px;
+ color: #2b2b2b;
+ border-bottom: 1px solid #dbdbdb;
+ ${mq.small`
+ font-size: 28px;
+ `}
+`
+
+const TotalValue = styled(Value)`
+ font-weight: 300;
+`
+
+const Description = styled('div')`
+ font-family: Overpass;
+ font-weight: 300;
+ font-size: 14px;
+ color: #adbbcd;
+ margin-top: 10px;
+`
+
+const USD = styled('span')`
+ font-size: 22px;
+ color: #adbbcd;
+ margin-left: 20px;
+ ${mq.small`
+ font-size: 28px;
+ `}
+`
+
+const Input = styled(DefaultInput)`
+ display: inline-block;
+ width: 4em;
+ margin: 5px 0;
+`
+
+const EthRegistrationGasPrice = ({ price, ethUsdPrice, gasPrice }) => {
+ const { t } = useTranslation()
+ console.log('***gasPrice', gasPrice)
+ const ethVal = new EthVal(`${price}`).toEth()
+ const registerGasSlow = new EthVal(`${TOGAL_GAS_WEI * gasPrice.slow}`).toEth()
+ const registerGasFast = new EthVal(`${TOGAL_GAS_WEI * gasPrice.fast}`).toEth()
+ const gasPriceToGweiSlow = new EthVal(`${gasPrice.slow}`).toGwei()
+ const gasPriceToGweiFast = new EthVal(`${gasPrice.fast}`).toGwei()
+ const totalSlow = ethVal.add(registerGasSlow)
+ const totalFast = ethVal.add(registerGasFast)
+ const totalInUsdSlow = totalSlow.mul(ethUsdPrice)
+ const totalInUsdFast = totalFast.mul(ethUsdPrice)
+ return (
+
+
+ {ethVal.toFixed(3)} ETH + {registerGasSlow.toFixed(3)}-
+ {registerGasFast.toFixed(3)} ETH = {totalSlow.toFixed(3)}-
+ {totalFast.toFixed(3)} ETH
+ {ethVal && ethUsdPrice && (
+
+ {' '}
+ ${totalInUsdSlow.toFixed(2)}-${totalInUsdFast.toFixed(2)}
+ USD
+
+ )}
+
+
+ {t('pricer.totalDescription', {
+ gasPriceToGweiSlow: gasPriceToGweiSlow.toFixed(0),
+ gasPriceToGweiFast: gasPriceToGweiFast.toFixed(0)
+ })}
+
+
+ )
+}
+
+export default EthRegistrationGasPrice
diff --git a/src/components/SingleName/NameRegister/Explainer.js b/src/components/SingleName/NameRegister/Explainer.js
index 9f2f0053f..c0ed39aff 100644
--- a/src/components/SingleName/NameRegister/Explainer.js
+++ b/src/components/SingleName/NameRegister/Explainer.js
@@ -99,7 +99,7 @@ const Explainer = ({ step, waitPercentComplete, waitTime }) => {
step === 'PRICE_DECISION' ? 0 : step === 'COMMIT_SENT' ? 50 : 100
}
title={t('register.step1.title')}
- text={t('register.step1.text')}
+ text={t('register.step1.text') + ' ' + t('register.step1.text2')}
/>
- if (ethUsdPriceLoading) return <>
+ if (ethUsdPriceLoading || gasPriceLoading) return <>
const getTargetAmountByDate = date => {
return zeroPremiumDate.diff(date) * rate
@@ -245,9 +251,11 @@ const NameRegister = ({
ethUsdPriceLoading={ethUsdPriceLoading}
ethUsdPremiumPrice={currentPremium}
ethUsdPrice={ethUsdPrice}
+ gasPrice={gasPrice}
loading={rentPriceLoading}
price={getRentPrice}
underPremium={underPremium}
+ displayGas={true}
/>
)}
{showPremiumWarning ? (
diff --git a/src/components/SingleName/NameRegister/Price.js b/src/components/SingleName/NameRegister/Price.js
index 314db2f7a..e596c77d5 100644
--- a/src/components/SingleName/NameRegister/Price.js
+++ b/src/components/SingleName/NameRegister/Price.js
@@ -46,9 +46,11 @@ const Price = ({
ethUsdPrice,
ethUsdPremiumPrice,
ethUsdPriceLoading,
+ initialGasPrice,
underPremium
}) => {
const { t } = useTranslation()
+
let ethPrice =
let ethVal, basePrice, withPremium, usdPremium
if (!loading && price) {
@@ -65,7 +67,6 @@ const Price = ({
usdPremium = ethVal.mul(ethUsdPrice).toFixed(2)
}
}
-
return (
@@ -80,7 +81,7 @@ const Price = ({
{ethUsdPremiumPrice
? t('pricer.pricePerAmount')
- : t('pricer.totalPriceLabel')}
+ : t('pricer.registrationPriceLabel')}
)
diff --git a/src/components/SingleName/Pricer.js b/src/components/SingleName/Pricer.js
index 1046f4067..62ee05d62 100644
--- a/src/components/SingleName/Pricer.js
+++ b/src/components/SingleName/Pricer.js
@@ -3,6 +3,7 @@ import styled from '@emotion/styled/macro'
import Years from './NameRegister/Years'
import Price from './NameRegister/Price'
+import EthRegistrationGasPrice from './NameRegister/EthRegistrationGasPrice'
import mq from 'mediaQuery'
@@ -39,22 +40,40 @@ function PricerInner({
className,
loading,
price,
+ gasPrice,
reference,
- underPremium
+ underPremium,
+ displayGas = false
}) {
return (
-
-
-
-
-
+ <>
+
+
+
+
+
+ {displayGas && gasPrice && (
+