Merge pull request #651 from forbole/staging

v0.19.4 prod

components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx

@@ -5,12 +5,18 @@ import {
   DialogActions,
   DialogContent,
   Divider,
+  IconButton,
+  Slider,
+  TextField,
   Typography,
   useTheme,
 } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
 import dynamic from 'next/dynamic'
+import get from 'lodash/get'
+import EditGasIcon from '../../../assets/images/icons/edit_gas.svg'
+import CloseIcon from '../../../assets/images/icons/icon_cross.svg'
 import { formatTokenAmount, getTokenAmountFromDenoms } from '../../../misc/utils'
 import useStyles from '../styles'
 import SendContent from './SendContent'
@@ -29,6 +35,9 @@ import SetWithdrawAddressContent from './SetWithdrawAddressContent'
 import MultiSendContent from './MultiSendContent'
 import ChainLinkContent from './ChainLinkContent'
 import ChainUnlinkContent from './ChainUnlinkContent'
+import useIconProps from '../../../misc/useIconProps'
+import cryptocurrencies from '../../../misc/cryptocurrencies'
+import { transformFee } from '../../../misc/tx/estimateGasFee'
 
 const ReactJson = dynamic(() => import('react-json-view'), { ssr: false })
 
@@ -37,7 +46,7 @@ interface ConfirmStageContentProps {
   denoms: TokenPrice[]
   validators: { [address: string]: Validator }
   transactionData: Transaction
-  onConfirm(): void
+  onConfirm(fee: { amount: { amount: string; denom: string }[]; gas: string }): void
   totalAmount: TokenAmount
 }
 
@@ -53,8 +62,16 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
   const classes = useStyles()
   const { theme } = useGeneralContext()
   const themeStyle: CustomTheme = useTheme()
+  const iconProps = useIconProps()
 
   const [viewingData, setViewingData] = React.useState(false)
+  const [gas, setGas] = React.useState(transactionData.fee.gas)
+  const fee = transformFee(cryptocurrencies[account.crypto], Number(gas))
+  const [isEdittingGas, setIsEdittingGas] = React.useState(false)
+
+  React.useEffect(() => {
+    setGas(transactionData.fee.gas)
+  }, [transactionData.fee.gas])
 
   const { typeUrl } = transactionData.msgs[0]
 
@@ -185,18 +202,51 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
           <Typography color="textSecondary">{transactionData.memo || t('NA')}</Typography>
         </Box>
         <Divider />
-        <Box my={1}>
-          <Typography gutterBottom>{t('fee')}</Typography>
-          <Typography color="textSecondary">
-            {!transactionData.fee.gas
-              ? t('estimating gas')
-              : formatTokenAmount(
-                  getTokenAmountFromDenoms(transactionData.fee.amount, denoms || []),
-                  account.crypto,
-                  lang
-                )}
-          </Typography>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography>{t('fee')}</Typography>
+          <Box display="flex" alignItems="center">
+            <Typography color="textSecondary">
+              {!transactionData.fee.gas
+                ? t('estimating gas')
+                : formatTokenAmount(
+                    getTokenAmountFromDenoms(fee.amount, denoms || []),
+                    account.crypto,
+                    lang
+                  )}
+            </Typography>
+            <IconButton onClick={() => setIsEdittingGas((g) => !g)}>
+              {isEdittingGas ? <CloseIcon {...iconProps} /> : <EditGasIcon {...iconProps} />}
+            </IconButton>
+          </Box>
         </Box>
+        {isEdittingGas ? (
+          <>
+            <Typography color="textSecondary">{t('set gas')}</Typography>
+            <TextField
+              fullWidth
+              autoFocus
+              variant="filled"
+              InputProps={{
+                disableUnderline: true,
+              }}
+              placeholder={get(transactionData, 'fee.gas', '0')}
+              value={gas}
+              onChange={(e) => setGas(e.target.value)}
+            />
+            <Box px={1}>
+              <Slider
+                value={Number(gas) / Number(get(transactionData, 'fee.gas', '0'))}
+                onChange={(e, v: number) =>
+                  setGas((Number(get(transactionData, 'fee.gas', '0')) * v).toFixed(0))
+                }
+                min={1}
+                max={2}
+                step={0.01}
+              />
+            </Box>
+          </>
+        ) : null}
+
         <Divider />
         <Box my={1} display="flex" justifyContent="flex-end">
           <Button onClick={() => setViewingData((v) => !v)} variant="text" color="primary">
@@ -206,7 +256,7 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
         {viewingData ? (
           <Box flex={1} overflow="auto">
             <ReactJson
-              src={transactionData}
+              src={{ ...transactionData, fee }}
               style={{
                 backgroundColor: themeStyle.palette.reactJsonBackground,
                 borderRadius: themeStyle.spacing(1),
@@ -228,8 +278,8 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
           variant="contained"
           className={classes.fullWidthButton}
           color="primary"
-          disabled={!transactionData.fee.gas}
-          onClick={onConfirm}
+          disabled={!Number(fee.gas)}
+          onClick={() => onConfirm(fee)}
         >
           {!transactionData.fee.gas ? (
             <CircularProgress size={themeStyle.spacing(3.5)} />

components/ConfirmTransactionDialog/index.tsx

@@ -48,6 +48,8 @@ interface ConfirmTransactionDialogProps {
   onClose(): void
 }
 
+const emptyGas = { amount: [{ amount: '0', denom: '' }], gas: '' }
+
 const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
   address,
   transactionData: defaultTransactionData,
@@ -66,7 +68,7 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
   const crypto = account ? account.crypto : Object.keys(cryptocurrencies)[0]
 
   const [errMsg, setErrMsg] = React.useState('')
-  const [fee, setFee] = React.useState<any>({ amount: [{ amount: '0', denom: '' }], gas: '' })
+  const [fee, setFee] = React.useState<any>(emptyGas)
 
   const { data: denomsData } = useQuery(
     gql`
@@ -93,12 +95,6 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
     }
   }, [account, signerInfo, defaultTransactionData, fee])
 
-  React.useEffect(() => {
-    if (defaultTransactionData && account) {
-      estimateGasFee(defaultTransactionData, account).then(setFee)
-    }
-  }, [defaultTransactionData, account])
-
   const validatorsAddresses = flatten(
     transactionData.msgs.map((m) => {
       switch (m.typeUrl) {
@@ -172,6 +168,12 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
   const [stage, setStage, toPrevStage, isPrevStageAvailable] =
     useStateHistory<ConfirmTransactionStage>(ConfirmTransactionStage.ConfirmStage)
 
+  React.useEffect(() => {
+    if (defaultTransactionData && account && stage === ConfirmTransactionStage.ConfirmStage) {
+      setFee(emptyGas)
+      estimateGasFee(defaultTransactionData, account).then(setFee)
+    }
+  }, [defaultTransactionData, account, stage])
   // For ledger
   const [isTxSigned, setIsTxSigned] = React.useState(false)
 
@@ -221,13 +223,14 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
               transactionData={transactionData}
               account={account}
               validators={validators}
-              onConfirm={() =>
+              onConfirm={(f) => {
+                setFee(f)
                 setStage(
                   get(wallet, 'type', '') === 'ledger'
                     ? ConfirmTransactionStage.ConnectLedgerStage
                     : ConfirmTransactionStage.SecurityPasswordStage
                 )
-              }
+              }}
             />
           ),
         }

components/ConnectChainDialog/RequestPhrase.tsx

@@ -0,0 +1,101 @@
+import {
+  Button,
+  Checkbox,
+  DialogContent,
+  FormControlLabel,
+  Typography,
+  Box,
+  Link,
+  useTheme,
+} from '@material-ui/core'
+import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked'
+import CircleCheckedFilled from '@material-ui/icons/CheckCircle'
+import useTranslation from 'next-translate/useTranslation'
+import Trans from 'next-translate/Trans'
+import React from 'react'
+import useStyles from './styles'
+import { CustomTheme } from '../../misc/theme'
+
+interface RequestPhraseDialogContentProps {
+  onConfirm(): void
+  consent: boolean
+  setConsent: (value: boolean) => void
+  title: string
+}
+
+const RequestPhraseDialogContent: React.FC<RequestPhraseDialogContentProps> = ({
+  onConfirm,
+  consent,
+  setConsent,
+  title,
+}) => {
+  const { t } = useTranslation('common')
+  const classes = useStyles()
+  const themeStyle: CustomTheme = useTheme()
+
+  return (
+    <Box className={classes.requestBox}>
+      <form
+        noValidate
+        onSubmit={(e) => {
+          e.preventDefault()
+          onConfirm()
+        }}
+      >
+        <DialogContent className={classes.dialogContent}>
+          <Typography>{title}</Typography>
+          <Box className={classes.checkboxContent}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  icon={<CircleUnchecked />}
+                  checkedIcon={<CircleCheckedFilled />}
+                  style={{
+                    color: themeStyle.palette.text.secondary,
+                  }}
+                  checked={consent}
+                  onChange={(e) => setConsent(e.target.checked)}
+                />
+              }
+              label={
+                <Trans
+                  i18nKey={t('private key consent')}
+                  components={[
+                    <Typography
+                      variant="body2"
+                      style={{
+                        fontSize: themeStyle.spacing(1.8),
+                        color: themeStyle.palette.text.secondary,
+                      }}
+                    />,
+                    <Link
+                      href="https://medium.com/desmosnetwork/desmos-airdrop-faqs-d5107dd34f17#P6"
+                      target="_blank"
+                      style={{
+                        fontSize: themeStyle.spacing(1.8),
+                        color: themeStyle.palette.text.secondary,
+                        textDecoration: 'underline',
+                      }}
+                    />,
+                  ]}
+                />
+              }
+            />
+            <Button
+              fullWidth
+              variant="contained"
+              classes={{ root: classes.requestButton }}
+              color="primary"
+              disabled={!consent}
+              type="submit"
+            >
+              {t('consent button')}
+            </Button>
+          </Box>
+        </DialogContent>
+      </form>
+    </Box>
+  )
+}
+
+export default RequestPhraseDialogContent

components/ConnectChainDialog/index.tsx

@@ -22,6 +22,7 @@ import generateProof from '../../misc/tx/generateProof'
 import SelectLedgerApp from './SelectLedgerApp'
 import useSendTransaction from '../../misc/tx/useSendTransaction'
 import TextInputDialogContent from './TextInputDialogContent'
+import RequestPhrase from './RequestPhrase'
 
 let ledgerTransport
 
@@ -33,6 +34,7 @@ enum Stage {
   SelectLedgerAppStage = 'select ledger app',
   SelectAddressStage = 'select address',
   ConnectLedgerStage = 'connect ledger',
+  RequestPhraseStage = 'recovery phrase request',
   EnterPrivateKeyStage = 'enter private key',
   EnterChainLinkProofStage = 'enter chain link proof',
   SignInLedgerStage = 'sign in ledger',
@@ -69,6 +71,7 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
     shouldConnect ? Stage.SelectChainStage : Stage.StartStage
   )
 
+  const [consent, setConsent] = React.useState(false)
   const [mnemonic, setMnemonic] = React.useState('')
   const [chain, setChain] = React.useState('')
   const [ledgerApp, setLedgerApp] = React.useState('')
@@ -191,7 +194,7 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
                 } else if (type === 'upload proof') {
                   setStage(Stage.EnterChainLinkProofStage)
                 } else if (type === 'mnemonic') {
-                  setStage(Stage.ImportMnemonicPhraseStage)
+                  setStage(Stage.RequestPhraseStage)
                 } else {
                   setStage(Stage.SelectLedgerAppStage)
                 }
@@ -248,6 +251,21 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
             />
           ),
         }
+      case Stage.RequestPhraseStage:
+        return {
+          title: t('recovery phrase request'),
+          dialogSize: 'sm',
+          content: (
+            <RequestPhrase
+              consent={consent}
+              setConsent={setConsent}
+              title={t('request description')}
+              onConfirm={() => {
+                setStage(Stage.ImportMnemonicPhraseStage)
+              }}
+            />
+          ),
+        }
       case Stage.EnterChainLinkProofStage:
       case Stage.EnterPrivateKeyStage:
         return {

components/ConnectChainDialog/styles.ts

@@ -57,6 +57,18 @@ const useStyles = makeStyles(
       padding: 0,
       marginLeft: theme.spacing(-1.5),
     },
+    requestBox: {
+      display: 'flex',
+      justifyContent: 'center',
+      textAlign: 'center',
+    },
+    checkboxContent: {
+      paddingTop: theme.spacing(8),
+      textAlign: 'initial',
+    },
+    requestButton: {
+      margin: theme.spacing(4, 2, 2, 0),
+    },
   }),
   {
     name: 'HookGlobalStyles',