Merge pull request #529 from meriadec/polishes/stuff

Polishes/stuff

src/components/TopBar/ActivityIndicator.js

@@ -53,12 +53,9 @@ class ActivityIndicatorInner extends Component<Props, State> {
       isGlobalSyncStatePending: nextProps.isGlobalSyncStatePending,
     }
 
-    if (prevState.hasClicked && !nextProps.isGlobalSyncStatePending) {
-      nextState.hasClicked = false
-    }
-
     if (prevState.isGlobalSyncStatePending && !nextProps.isGlobalSyncStatePending) {
       nextState.isFirstSync = false
+      nextState.hasClicked = false
     }
 
     return nextState
@@ -92,7 +89,7 @@ class ActivityIndicatorInner extends Component<Props, State> {
           )}
         </Rotating>
         <Box
-          ml={2}
+          ml={1}
           ff="Open Sans|SemiBold"
           color={isError ? 'alertRed' : undefined}
           fontSize={4}

src/components/WithFeesAPI.js

@@ -21,13 +21,17 @@ export default class WithFeesAPI extends Component<
   componentDidMount() {
     this.load()
   }
+  componentWillUnmount() {
+    this._unmounted = true
+  }
+  _unmounted = false
   async load() {
     const { currency } = this.props
     try {
       const fees = await getEstimatedFees(currency)
-      this.setState({ error: null, fees })
+      if (!this._unmounted) this.setState({ error: null, fees })
     } catch (error) {
-      this.setState({ error, fees: null })
+      if (!this._unmounted) this.setState({ error, fees: null })
     }
   }
   render() {

src/components/base/Modal/ModalBody.js

@@ -55,13 +55,13 @@ class ModalBody extends PureComponent<Props, State> {
 }
 
 const CloseContainer = styled(Box).attrs({
-  p: 2,
+  p: 4,
   color: 'fog',
 })`
   cursor: pointer;
   position: absolute;
-  top: 25px;
-  right: 10px;
+  top: 0;
+  right: 0;
   z-index: 1;
 
   &:hover {

src/components/modals/ImportAccounts/index.js

@@ -70,7 +70,6 @@ type Props = {
 }
 
 type StepId = 'chooseCurrency' | 'connectDevice' | 'import' | 'finish'
-
 type ScanStatus = 'idle' | 'scanning' | 'error' | 'finished'
 
 type State = {

src/components/modals/ImportAccounts/steps/01-step-choose-currency.js

@@ -12,6 +12,7 @@ import type { StepProps } from '../index'
 function StepChooseCurrency({ currency, setState }: StepProps) {
   return (
     <SelectCurrency
+      autoFocus
       onChange={currency => {
         setState({
           currency: isArray(currency) && currency.length === 0 ? null : currency,

src/components/modals/PrevButton.js

@@ -1,37 +0,0 @@
-// @flow
-
-import React from 'react'
-import { translate } from 'react-i18next'
-import styled from 'styled-components'
-
-import type { T } from 'types/common'
-
-import Button from 'components/base/Button'
-import Box from 'components/base/Box'
-
-import IconAngleLeft from 'icons/AngleLeft'
-
-const Wrapper = styled(Button).attrs({
-  fontSize: 4,
-  ml: 4,
-})`
-  left: 0;
-  margin-top: -18px;
-  position: absolute;
-  top: 50%;
-`
-
-type Props = {
-  t: T,
-}
-
-const PrevButton = ({ t, ...props }: Props) => (
-  <Wrapper {...props}>
-    <Box horizontal alignItems="center">
-      <IconAngleLeft size={16} />
-      {t('app:common.back')}
-    </Box>
-  </Wrapper>
-)
-
-export default translate()(PrevButton)

src/components/modals/Receive/01-step-account.js

@@ -18,6 +18,6 @@ type Props = {
 export default (props: Props) => (
   <Box flow={1}>
     <Label>{props.t('app:receive.steps.chooseAccount.label')}</Label>
-    <SelectAccount onChange={props.onChangeAccount} value={props.account} />
+    <SelectAccount autoFocus onChange={props.onChangeAccount} value={props.account} />
   </Box>
 )

src/components/modals/Receive/index.js

@@ -17,7 +17,6 @@ import Box from 'components/base/Box'
 import Breadcrumb from 'components/Breadcrumb'
 import Button from 'components/base/Button'
 import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
-import PrevButton from 'components/modals/PrevButton'
 import StepConnectDevice from 'components/modals/StepConnectDevice'
 
 import StepAccount from './01-step-account'
@@ -318,8 +317,7 @@ class ReceiveModal extends PureComponent<Props, State> {
           <ModalBody onClose={canClose ? onClose : undefined}>
             <SyncSkipUnderPriority priority={9} />
             {account && <SyncOneAccountOnMount priority={10} accountId={account.id} />}
-            <ModalTitle>
-              {canPrev && <PrevButton onClick={this.handlePrevStep} />}
+            <ModalTitle onBack={canPrev ? this.handlePrevStep : undefined}>
               {t('app:receive.title')}
             </ModalTitle>
             <ModalContent>

src/components/modals/Send/01-step-amount.js

@@ -63,6 +63,7 @@ function StepAmount({
       {account && bridge && transaction ? (
         <Fragment key={account.id}>
           <RecipientField
+            autoFocus
             account={account}
             bridge={bridge}
             transaction={transaction}

src/components/modals/Send/RecipientField.js

@@ -14,6 +14,7 @@ type Props<Transaction> = {
   bridge: WalletBridge<Transaction>,
   transaction: Transaction,
   onChangeTransaction: Transaction => void,
+  autoFocus?: boolean,
 }
 
 class RecipientField<Transaction> extends Component<Props<Transaction>, { isValid: boolean }> {
@@ -59,7 +60,7 @@ class RecipientField<Transaction> extends Component<Props<Transaction>, { isVali
   }
 
   render() {
-    const { bridge, account, transaction, t } = this.props
+    const { bridge, account, transaction, t, autoFocus } = this.props
     const { isValid } = this.state
     const value = bridge.getTransactionRecipient(account, transaction)
     return (
@@ -69,6 +70,7 @@ class RecipientField<Transaction> extends Component<Props<Transaction>, { isVali
           <LabelInfoTooltip ml={1} text={t('app:send.steps.amount.recipientAddress')} />
         </Label>
         <RecipientAddress
+          autoFocus={autoFocus}
           withQrCode
           error={!value || isValid ? null : `This is not a valid ${account.currency.name} address`}
           value={value}

src/components/modals/Send/SendModalBody.js

@@ -20,7 +20,6 @@ import PollCounterValuesOnMount from 'components/PollCounterValuesOnMount'
 
 import Breadcrumb from 'components/Breadcrumb'
 import { ModalBody, ModalTitle, ModalContent } from 'components/base/Modal'
-import PrevButton from 'components/modals/PrevButton'
 import StepConnectDevice from 'components/modals/StepConnectDevice'
 import ChildSwitch from 'components/base/ChildSwitch'
 import SyncSkipUnderPriority from 'components/SyncSkipUnderPriority'
@@ -279,8 +278,7 @@ class SendModalBody extends PureComponent<Props, State<*>> {
         <SyncSkipUnderPriority priority={80} />
         {account && <SyncOneAccountOnMount priority={81} accountId={account.id} />}
 
-        <ModalTitle>
-          {canPrev && <PrevButton onClick={this.onPrevStep} />}
+        <ModalTitle onBack={canPrev ? this.onPrevStep : undefined}>
           {t('app:send.title')}
         </ModalTitle>
 

src/components/modals/Send/index.js

@@ -1,10 +1,10 @@
 // @flow
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import { MODAL_SEND } from 'config/constants'
 import Modal from 'components/base/Modal'
 import SendModalBody from './SendModalBody'
 
-class SendModal extends PureComponent<{}> {
+class SendModal extends Component<void> {
   render() {
     return (
       <Modal

src/reducers/settings.js

@@ -177,12 +177,19 @@ export const getOrderAccounts = (state: State) => state.settings.orderAccounts
 
 export const areSettingsLoaded = (state: State) => state.settings.loaded
 
+// TODO: avoid this memoize hack (i thought reselect was doing it for us)
+const __memoizedCurrencySettingsLocaleValues = {}
 export const currencySettingsLocaleSelector = (
   settings: SettingsState,
   currency: Currency,
 ): CurrencySettings => {
+  if (__memoizedCurrencySettingsLocaleValues[currency.id]) {
+    return __memoizedCurrencySettingsLocaleValues[currency.id]
+  }
   const currencySettings = settings.currenciesSettings[currency.id]
-  return { ...defaultsForCurrency(currency), ...currencySettings }
+  const val = { ...defaultsForCurrency(currency), ...currencySettings }
+  __memoizedCurrencySettingsLocaleValues[currency.id] = val
+  return val
 }
 
 type CSS = Selector<*, { currency: CryptoCurrency }, CurrencySettings>