diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js --- a/web/cashtab/src/components/Send/Send.js +++ b/web/cashtab/src/components/Send/Send.js @@ -56,6 +56,7 @@ text-align: left; color: ${props => props.theme.forms.text}; padding-left: 1px; + white-space: nowrap; `; const AmountPreviewCtn = styled.div` @@ -74,6 +75,25 @@ margin-bottom: 0; `; +const SendAddressHeader = styled.div` + display: flex; + align-items: center; +`; +const DestinationAddressSingleCtn = styled.div``; +const DestinationAddressMultiCtn = styled.div``; + +const ExpandingAddressInputCtn = styled.div` + min-height: 14rem; + ${DestinationAddressSingleCtn} { + overflow: hidden; + max-height: ${props => (props.open ? '0rem' : '17rem')}; + } + ${DestinationAddressMultiCtn} { + overflow: hidden; + max-height: ${props => (props.open ? '17rem' : '0rem')}; + } +`; + // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest const SendBCH = ({ jestBCH, passLoadingStatus }) => { // use balance parameters from wallet.state object and not legacy balances parameter from walletState, if user has migrated wallet @@ -674,80 +694,111 @@ marginTop: '40px', }} > - {!isOneToManyXECSend ? ( - - Send to - - handleAddressChange({ - target: { - name: 'address', - value: result, - }, - }) - } - inputProps={{ - placeholder: `${currency.ticker} Address`, - name: 'address', - onChange: e => - handleAddressChange(e), - required: true, - value: formData.address, + + {' '} + Send to + + Multiple Recipients:   + { + setIsOneToManyXECSend( + !isOneToManyXECSend, + ); + setIsEncryptedOptionalOpReturnMsg( + false, + ); }} - > - Amount - - handleBchAmountChange(e), - required: true, - value: formData.value, - disabled: priceApiError, - }} - selectProps={{ - value: selectedCurrency, - disabled: queryStringText !== null, - onChange: e => - handleSelectedCurrencyChange(e), + style={{ + marginBottom: '7px', }} - > + /> + + + + + + + handleAddressChange({ + target: { + name: 'address', + value: result, + }, + }) + } + inputProps={{ + placeholder: `${currency.ticker} Address`, + name: 'address', + onChange: e => + handleAddressChange(e), + required: true, + value: formData.address, + }} + > + Amount + + handleBchAmountChange(e), + required: true, + value: formData.value, + disabled: priceApiError, + }} + selectProps={{ + value: selectedCurrency, + disabled: + queryStringText !== null, + onChange: e => + handleSelectedCurrencyChange( + e, + ), + }} + > + + {priceApiError && ( Error fetching fiat price. Setting @@ -759,44 +810,49 @@ )} - ) : ( + <> - Send to - - handleMultiAddressChange(e), - required: true, - value: formData.address, - }} - > + + + handleMultiAddressChange(e), + required: true, + value: formData.address, + }} + > + - )} - {!priceApiError && !isOneToManyXECSend && ( - - {formatBalance( - formData.value, - userLocale, - )}{' '} - {selectedCurrency} - - - {fiatPriceString !== '' && '='}{' '} - {fiatPriceString} - + {!priceApiError && !isOneToManyXECSend && ( + <> + + {formatBalance( + formData.value, + userLocale, + )}{' '} + {selectedCurrency} + + + {fiatPriceString !== '' && '='}{' '} + {fiatPriceString} + + + )} - )} + {queryStringText && ( - - Multiple Recipients:   - { - setIsOneToManyXECSend( - !isOneToManyXECSend, - ); - setIsEncryptedOptionalOpReturnMsg( - false, - ); - }} - style={{ - marginBottom: '7px', - }} - /> - Message:  
+
-
+
+ + +
+
+
+
+
- - - - - - - + + + + - - +
+
-
-
- -
-
+
- - - - - - -
-
+ + + + +
+
+ + + + + XEC + +
+ - + > + + + + +
- XEC - -
- - - + max
- +
+
+
+
+
+
+
+
+
+
+
+
+
+