Merge pull request #483 from trezor/fix/initial-arrow-animation

Fix/selecting send form tab activates arrow animation

src/views/Wallet/views/Account/Send/ethereum/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import React, { useState } from 'react';
 import BigNumber from 'bignumber.js';
 import styled, { css } from 'styled-components';
 import { Select, Button, Input, Link, Icon, P, colors, icons as ICONS } from 'trezor-ui-components';
@@ -285,6 +285,8 @@ const AccountSend = (props: Props) => {
         onClear,
     } = props.sendFormActions;
 
+    const [touched, setTouched] = useState(false);
+
     if (!device || !account || !discovery || !network || !shouldRender) {
         const { loader, exceptionPage } = props.selectedAccount;
         return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
@@ -472,14 +474,20 @@ const AccountSend = (props: Props) => {
             </InputRow>
 
             <ToggleAdvancedSettingsWrapper isAdvancedSettingsHidden={isAdvancedSettingsHidden}>
-                <ToggleAdvancedSettingsButton isTransparent onClick={toggleAdvanced}>
+                <ToggleAdvancedSettingsButton
+                    isTransparent
+                    onClick={() => {
+                        toggleAdvanced();
+                        setTouched(true);
+                    }}
+                >
                     <FormattedMessage {...l10nSendMessages.TR_ADVANCED_SETTINGS} />
                     <AdvancedSettingsIcon
                         icon={ICONS.ARROW_DOWN}
                         color={colors.TEXT_SECONDARY}
                         size={12}
                         isActive={advanced}
-                        canAnimate
+                        canAnimate={touched || advanced}
                     />
                 </ToggleAdvancedSettingsButton>
 

src/views/Wallet/views/Account/Send/ripple/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { FormattedMessage } from 'react-intl';
 
@@ -267,6 +267,8 @@ const AccountSend = (props: Props) => {
         onClear,
     } = props.sendFormActions;
 
+    const [touched, setTouched] = useState(false);
+
     if (!device || !account || !discovery || !network || !shouldRender) {
         const { loader, exceptionPage } = props.selectedAccount;
         return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
@@ -437,14 +439,20 @@ const AccountSend = (props: Props) => {
             </InputRow>
 
             <ToggleAdvancedSettingsWrapper isAdvancedSettingsHidden={isAdvancedSettingsHidden}>
-                <ToggleAdvancedSettingsButton isTransparent onClick={toggleAdvanced}>
+                <ToggleAdvancedSettingsButton
+                    isTransparent
+                    onClick={() => {
+                        toggleAdvanced();
+                        setTouched(true);
+                    }}
+                >
                     <FormattedMessage {...l10nSendMessages.TR_ADVANCED_SETTINGS} />
                     <AdvancedSettingsIcon
                         icon={ICONS.ARROW_DOWN}
                         color={colors.TEXT_SECONDARY}
                         size={12}
                         isActive={advanced}
-                        canAnimate
+                        canAnimate={touched || advanced}
                     />
                 </ToggleAdvancedSettingsButton>