send form clear button for ripple and eth

src/actions/SendFormActions.js

@@ -29,6 +29,8 @@ export type SendFormAction = {
     type: typeof SEND.TOGGLE_ADVANCED | typeof SEND.TX_SENDING | typeof SEND.TX_ERROR,
 } | {
     type: typeof SEND.TX_COMPLETE,
+} | {
+    type: typeof SEND.CLEAR,
 };
 
 

src/actions/constants/send.js

@@ -7,3 +7,4 @@ export const TX_SENDING: 'send__tx_sending' = 'send__tx_sending';
 export const TX_COMPLETE: 'send__tx_complete' = 'send__tx_complete';
 export const TX_ERROR: 'send__tx_error' = 'send__tx_error';
 export const TOGGLE_ADVANCED: 'send__toggle_advanced' = 'send__toggle_advanced';
+export const CLEAR: 'send__clear' = 'send__clear';

src/actions/ethereum/SendFormActions.js

@@ -53,6 +53,13 @@ export const observe = (prevState: ReducersState, action: Action): ThunkAction =
         return;
     }
 
+    // clear transaction draft from session storage and reinitialize send form
+    if (action.type === SEND.CLEAR) {
+        dispatch(SessionStorageActions.clear());
+        dispatch(init());
+        return;
+    }
+
     // if send form was not initialized
     if (currentState.sendFormEthereum.currency === '') {
         dispatch(init());
@@ -109,6 +116,8 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
         network,
     } = getState().selectedAccount;
 
+    const { advanced } = getState().sendFormEthereum;
+
     if (!account || !network) return;
 
     const stateFromStorage = dispatch(SessionStorageActions.loadEthereumDraftTransaction());
@@ -140,6 +149,7 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
             recommendedGasPrice: gasPrice.toString(),
             gasLimit,
             gasPrice: gasPrice.toString(),
+            advanced,
         },
     });
 };
@@ -152,6 +162,14 @@ export const toggleAdvanced = (): Action => ({
     networkType: 'ethereum',
 });
 
+/*
+* Called from UI from "clear" button
+*/
+export const onClear = (): Action => ({
+    type: SEND.CLEAR,
+    networkType: 'ethereum',
+});
+
 /*
 * Called from UI on "address" field change
 */
@@ -613,4 +631,5 @@ export default {
     onNonceChange,
     onDataChange,
     onSend,
+    onClear,
 };

src/actions/ripple/SendFormActions.js

@@ -35,6 +35,13 @@ export const observe = (prevState: ReducersState, action: Action): ThunkAction =
         return;
     }
 
+    // clear transaction draft from session storage and reinitialize send form
+    if (action.type === SEND.CLEAR) {
+        dispatch(SessionStorageActions.clear());
+        dispatch(init());
+        return;
+    }
+
     // if send form was not initialized
     if (currentState.sendFormRipple.networkSymbol === '') {
         dispatch(init());
@@ -80,6 +87,8 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
         network,
     } = getState().selectedAccount;
 
+    const { advanced } = getState().sendFormEthereum;
+
     if (!account || account.networkType !== 'ripple' || !network) return;
 
     const stateFromStorage = dispatch(SessionStorageActions.loadRippleDraftTransaction());
@@ -107,6 +116,7 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
             selectedFeeLevel,
             fee: network.fee.defaultFee,
             sequence: '1',
+            advanced,
         },
     });
 };
@@ -119,6 +129,15 @@ export const toggleAdvanced = (): Action => ({
     networkType: 'ripple',
 });
 
+/*
+* Called from UI from "clear" button
+*/
+export const onClear = (): Action => ({
+    type: SEND.CLEAR,
+    networkType: 'ripple',
+});
+
+
 /*
 * Called from UI on "address" field change
 */
@@ -368,4 +387,5 @@ export default {
     onFeeChange,
     onDestinationTagChange,
     onSend,
+    onClear,
 };

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

@@ -142,17 +142,33 @@ const ToggleAdvancedSettingsButton = styled(Button)`
     min-height: 40px;
     padding: 0;
     display: flex;
+    flex: 1 1 0;
     align-items: center;
     font-weight: ${FONT_WEIGHT.SEMIBOLD};
 `;
 
-const SendButton = styled(Button)`
+const FormButtons = styled.div`
-    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    display: flex;
-    word-break: break-all;
+    flex: 1 1;
 
+    
     @media screen and (max-width: ${SmallScreenWidth}) {
         margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
     }
+
+    Button + Button {
+        margin-left: 5px;
+    }
+`;
+
+const SendButton = styled(Button)`
+    word-break: break-all;
+    flex: 1;
+
+`;
+
+const ClearButton = styled(Button)`
+
 `;
 
 const AdvancedSettingsIcon = styled(Icon)`
@@ -228,6 +244,7 @@ const AccountSend = (props: Props) => {
         onFeeLevelChange,
         updateFeeLevels,
         onSend,
+        onClear,
     } = props.sendFormActions;
 
     if (!device || !account || !discovery || !network || !shouldRender) {
@@ -387,24 +404,40 @@ const AccountSend = (props: Props) => {
                 </ToggleAdvancedSettingsButton>
 
                 {isAdvancedSettingsHidden && (
-                    <SendButton
+                    <FormButtons>
-                        isDisabled={isSendButtonDisabled}
+                        <ClearButton
-                        isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            isWhite
-                        onClick={() => onSend()}
+                            onClick={() => onClear()}
-                    >
+                        >
-                        {sendButtonText}
+                            Clear
-                    </SendButton>
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 )}
             </ToggleAdvancedSettingsWrapper>
 
             {advanced && (
                 <AdvancedForm {...props}>
-                    <SendButton
+                    <FormButtons>
-                        isDisabled={isSendButtonDisabled}
+                        <ClearButton
-                        onClick={() => onSend()}
+                            isWhite
-                    >
+                            onClick={() => onClear()}
-                        {sendButtonText}
+                        >
-                    </SendButton>
+                            Clear
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 </AdvancedForm>
             )}
 

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

@@ -129,17 +129,33 @@ const ToggleAdvancedSettingsButton = styled(Button)`
     min-height: 40px;
     padding: 0;
     display: flex;
+    flex: 1 1 0;
     align-items: center;
     font-weight: ${FONT_WEIGHT.SEMIBOLD};
 `;
 
-const SendButton = styled(Button)`
+const FormButtons = styled.div`
-    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    display: flex;
-    word-break: break-all;
+    flex: 1 1;
 
+    
     @media screen and (max-width: ${SmallScreenWidth}) {
         margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
     }
+
+    Button + Button {
+        margin-left: 5px;
+    }
+`;
+
+const SendButton = styled(Button)`
+    word-break: break-all;
+    flex: 1;
+
+`;
+
+const ClearButton = styled(Button)`
+
 `;
 
 const AdvancedSettingsIcon = styled(Icon)`
@@ -204,6 +220,7 @@ const AccountSend = (props: Props) => {
         onFeeLevelChange,
         updateFeeLevels,
         onSend,
+        onClear,
     } = props.sendFormActions;
 
     if (!device || !account || !discovery || !network || !shouldRender) {
@@ -341,24 +358,40 @@ const AccountSend = (props: Props) => {
                 </ToggleAdvancedSettingsButton>
 
                 {isAdvancedSettingsHidden && (
-                    <SendButton
+                    <FormButtons>
-                        isDisabled={isSendButtonDisabled}
+                        <ClearButton
-                        isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            isWhite
-                        onClick={() => onSend()}
+                            onClick={() => onClear()}
-                    >
+                        >
-                        {sendButtonText}
+                            Clear
-                    </SendButton>
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            isAdvancedSettingsHidden={isAdvancedSettingsHidden}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 )}
             </ToggleAdvancedSettingsWrapper>
 
             {advanced && (
                 <AdvancedForm {...props}>
-                    <SendButton
+                    <FormButtons>
-                        isDisabled={isSendButtonDisabled}
+                        <ClearButton
-                        onClick={() => onSend()}
+                            isWhite
-                    >
+                            onClick={() => onClear()}
-                        {sendButtonText}
+                        >
-                    </SendButton>
+                            Clear
+                        </ClearButton>
+                        <SendButton
+                            isDisabled={isSendButtonDisabled}
+                            onClick={() => onSend()}
+                        >
+                            {sendButtonText}
+                        </SendButton>
+                    </FormButtons>
                 </AdvancedForm>
             )}