Add gas estimate and add more explanation (#1063)

makoto · web-flow · commit 20c5eb9328ef · 2021-01-28T08:31:46.000Z
* 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
+    <PriceContainer>
+      <TotalValue>
+        {ethVal.toFixed(3)} ETH + {registerGasSlow.toFixed(3)}-
+        {registerGasFast.toFixed(3)} ETH = {totalSlow.toFixed(3)}-
+        {totalFast.toFixed(3)} ETH
+        {ethVal && ethUsdPrice && (
+          <USD>
+            {' '}
+            ${totalInUsdSlow.toFixed(2)}-${totalInUsdFast.toFixed(2)}
+            USD
+          </USD>
+        )}
+      </TotalValue>
+      <Description>
+        {t('pricer.totalDescription', {
+          gasPriceToGweiSlow: gasPriceToGweiSlow.toFixed(0),
+          gasPriceToGweiFast: gasPriceToGweiFast.toFixed(0)
+        })}
+      </Description>
+    </PriceContainer>
+  )
+}
+
+export default EthRegistrationGasPrice
diff --git 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')}
         />
         <Step
           number={2}
diff --git a/src/components/SingleName/NameRegister/NameRegister.js b/src/components/SingleName/NameRegister/NameRegister.js
@@ -11,7 +11,12 @@ import {
   WAIT_BLOCK_TIMESTAMP,
   GET_BALANCE
 } from 'graphql/queries'
-import { useInterval, useEthPrice, useBlock } from 'components/hooks'
+import {
+  useInterval,
+  useEthPrice,
+  useGasPrice,
+  useBlock
+} from 'components/hooks'
 import { useAccount } from '../../QueryAccount'
 import { registerMachine, registerReducer } from './registerReducer'
 import { sendNotification } from './notification'
@@ -69,6 +74,7 @@ const NameRegister = ({
     false
   )
   const { loading: ethUsdPriceLoading, price: ethUsdPrice } = useEthPrice()
+  const { loading: gasPriceLoading, price: gasPrice } = useGasPrice()
   const { block } = useBlock()
   const [invalid, setInvalid] = useState(false)
   const { data: { waitBlockTimestamp } = {} } = useQuery(WAIT_BLOCK_TIMESTAMP, {
@@ -189,7 +195,7 @@ const NameRegister = ({
   const diff = zeroPremiumDate.diff(releasedDate)
   const rate = 2000 / diff
   if (!registrationOpen) return <NotAvailable domain={domain} />
-  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
@@ -46,9 +46,11 @@ const Price = ({
   ethUsdPrice,
   ethUsdPremiumPrice,
   ethUsdPriceLoading,
+  initialGasPrice,
   underPremium
 }) => {
   const { t } = useTranslation()
+
   let ethPrice = <InlineLoader />
   let ethVal, basePrice, withPremium, usdPremium
   if (!loading && price) {
@@ -65,7 +67,6 @@ const Price = ({
       usdPremium = ethVal.mul(ethUsdPrice).toFixed(2)
     }
   }
-
   return (
     <PriceContainer>
       <Value>
@@ -80,7 +81,7 @@ const Price = ({
       <Description>
         {ethUsdPremiumPrice
           ? t('pricer.pricePerAmount')
-          : t('pricer.totalPriceLabel')}
+          : t('pricer.registrationPriceLabel')}
       </Description>
     </PriceContainer>
   )
diff --git a/src/components/SingleName/Pricer.js b/src/components/SingleName/Pricer.js
diff --git a/src/components/hooks.js b/src/components/hooks.js
