Merge pull request #649 from forbole/dev

v0.19.4

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/Layout/CurrencyMenuButton.tsx

@@ -8,7 +8,7 @@ import useIconProps from '../../misc/useIconProps'
 
 const CurrencyMenuButton: React.FC = () => {
   const { currency, setCurrency } = useGeneralContext()
-  const classes = useStyles()
+  const classes = useStyles({})
   const iconProps = useIconProps(3)
 
   const [currencyAnchor, setCurrencyAnchor] = React.useState<Element>()

components/Layout/LangMenuButton.tsx

@@ -11,7 +11,7 @@ const LangMenuButton: React.FC = () => {
   const { t, lang } = useTranslation('common')
   const { locales, pathname, query } = useRouter()
   const iconProps = useIconProps(3)
-  const classes = useStyles()
+  const classes = useStyles({})
   const [anchor, setAnchor] = React.useState<Element>()
 
   const onClose = React.useCallback(() => setAnchor(undefined), [setAnchor])

components/Layout/LeftMenu.tsx

@@ -8,6 +8,7 @@ import {
   ListItemIcon,
   ListItemText,
   Paper,
+  Tooltip,
   useTheme,
 } from '@material-ui/core'
 import Link from 'next/link'
@@ -39,8 +40,8 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ activeItem, isMenuExpanded, setIsMe
   const { t } = useTranslation('common')
   const themeStyle: CustomTheme = useTheme()
   const iconProps = useIconProps(3)
-  const classes = useStyles()
   const { theme } = useGeneralContext()
+  const classes = useStyles({ mode: theme })
   const { accounts } = useWalletsContext()
   const favAccount = accounts.some((acc) => !!acc.fav)
   const items = React.useMemo(
@@ -124,28 +125,40 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ activeItem, isMenuExpanded, setIsMe
             const selected = item.href === activeItem
             return (
               <Link key={item.title} href={item.href} as={`${item.href}`} passHref>
-                <ListItem
-                  selected={selected}
-                  className={classes.menuItem}
-                  button
-                  component="a"
-                  style={{ background: selected ? themeStyle.palette.menuBackground : 'inherits' }}
+                <Tooltip
+                  classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
+                  title={item.title}
+                  placement="right"
+                  arrow
+                  disableFocusListener={isMenuExpanded}
+                  disableHoverListener={isMenuExpanded}
+                  disableTouchListener={isMenuExpanded}
                 >
-                  <ListItemIcon>
-                    {React.cloneElement(item.icon, {
-                      fill: selected
-                        ? themeStyle.palette.primary.main
-                        : themeStyle.palette.grey[300],
-                    })}
-                  </ListItemIcon>
-                  <ListItemText
-                    primary={item.title}
-                    primaryTypographyProps={{
-                      variant: 'h6',
-                      color: selected ? 'primary' : 'textSecondary',
+                  <ListItem
+                    selected={selected}
+                    className={classes.menuItem}
+                    button
+                    component="a"
+                    style={{
+                      background: selected ? themeStyle.palette.menuBackground : 'inherits',
                     }}
-                  />
-                </ListItem>
+                  >
+                    <ListItemIcon>
+                      {React.cloneElement(item.icon, {
+                        fill: selected
+                          ? themeStyle.palette.primary.main
+                          : themeStyle.palette.grey[300],
+                      })}
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={item.title}
+                      primaryTypographyProps={{
+                        variant: 'h6',
+                        color: selected ? 'primary' : 'textSecondary',
+                      }}
+                    />
+                  </ListItem>
+                </Tooltip>
               </Link>
             )
           })}

components/Layout/NavBar.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   Divider,
   Drawer,
   IconButton,
@@ -20,10 +21,12 @@ import AddressBookIcon from '../../assets/images/icons/icon_address_book.svg'
 import MenuIcon from '../../assets/images/icons/icon_menu.svg'
 import BackIcon from '../../assets/images/icons/icon_back.svg'
 import WalletManageIcon from '../../assets/images/icons/icon_wallet_manage.svg'
+import LogOutIcon from '../../assets/images/icons/log-out.svg'
 import CurrencyMenuButton from './CurrencyMenuButton'
 // import LangMenuButton from './LangMenuButton'
 import ThemeModeButton from './ThemeModeButton'
 import useIconProps from '../../misc/useIconProps'
+import { useWalletsContext } from '../../contexts/WalletsContext'
 
 const NavBar: React.FC<{
   HeaderLeftComponent?: React.ReactNode
@@ -41,10 +44,11 @@ const NavBar: React.FC<{
   back,
 }) => {
   const iconProps = useIconProps(3)
-  const classes = useStyles()
+  const classes = useStyles({})
   const { t } = useTranslation('common')
   const theme = useTheme()
   const router = useRouter()
+  const { signOut } = useWalletsContext()
   const [isChromeExtMenuOpen, setIsChromeExtMenuOpen] = React.useState(false)
 
   const chromeExtMenuItems = React.useMemo(
@@ -127,6 +131,14 @@ const NavBar: React.FC<{
             )
           })}
         </List>
+        <Button
+          className={classes.mobileSignoutButton}
+          variant="outlined"
+          startIcon={<LogOutIcon {...iconProps} />}
+          onClick={signOut}
+        >
+          {t('sign out')}
+        </Button>
       </Drawer>
     </>
   ) : (
@@ -147,6 +159,13 @@ const NavBar: React.FC<{
           <SettingsIcon {...iconProps} />
         </IconButton>
       </Link>
+      <Button
+        className={classes.navBarButton}
+        startIcon={<LogOutIcon {...iconProps} />}
+        onClick={signOut}
+      >
+        {t('sign out')}
+      </Button>
     </Box>
   )
 }

components/Layout/StarredAccount.tsx

@@ -31,7 +31,7 @@ const StarredAccount: React.FC<StarredAccountProps> = ({ account }) => {
   const themeStyle: CustomTheme = useTheme()
   const { lang } = useTranslation('common')
   const { currency } = useGeneralContext()
-  const classes = useStyles()
+  const classes = useStyles({})
   const crypto = cryptocurrencies[account.crypto]
   // Latest data
   const { data: balanceData, loading } = useLatestAccountBalance(account.crypto, account.address)

components/Layout/ThemeModeButton.tsx

@@ -9,7 +9,7 @@ import useIconProps from '../../misc/useIconProps'
 const ThemeModeButton: React.FC = () => {
   const { theme, setTheme } = useGeneralContext()
   const iconProps = useIconProps(3)
-  const classes = useStyles()
+  const classes = useStyles({})
   const isDarkMode = theme === 'dark'
   return (
     <IconButton