diff --git a/web/cashtab/src/components/Common/Ticker.js b/web/cashtab/src/components/Common/Ticker.js --- a/web/cashtab/src/components/Common/Ticker.js +++ b/web/cashtab/src/components/Common/Ticker.js @@ -24,7 +24,11 @@ tokenDbUrl: 'https://tokendb.kingbch.com', txHistoryCount: 10, xecApiBatchSize: 20, - defaultSettings: { fiatCurrency: 'usd', sendModal: false }, + defaultSettings: { + fiatCurrency: 'usd', + sendModal: false, + showMessages: false, + }, notificationDurationShort: 3, notificationDurationLong: 5, localStorageMaxCharacters: 24, @@ -71,6 +75,7 @@ 'chf', ], sendModal: [true, false], + showMessages: [true, false], }, fiatCurrencies: { usd: { name: 'US Dollar', symbol: '$', slug: 'usd' }, diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js --- a/web/cashtab/src/components/Configure/Configure.js +++ b/web/cashtab/src/components/Configure/Configure.js @@ -431,6 +431,9 @@ .SendConfirm { color: ${props => props.theme.lightWhite}; } + .ShowMessages { + color: ${props => props.theme.lightWhite}; + } `; const Configure = () => { @@ -909,6 +912,9 @@ changeCashtabSettings('sendModal', checkedState); }; + const handleUnknownSenderMsg = checkedState => { + changeCashtabSettings('showMessages', checkedState); + }; const getContactNameByAddress = contactAddress => { if (!contactAddress) { return; @@ -1797,6 +1803,22 @@ onChange={handleSendModalToggle} /> + +
+ Hide messages from unknown sender +
+ } + unCheckedChildren={} + checked={ + cashtabSettings + ? cashtabSettings.showMessages + : false + } + onChange={handleUnknownSenderMsg} + /> + [
+
+
+ + + + Hide messages from unknown sender +
+ +
@@ -835,7 +898,7 @@ General Settings
+
+
+ + + + Hide messages from unknown sender +
+ +
diff --git a/web/cashtab/src/components/Home/Tx.js b/web/cashtab/src/components/Home/Tx.js --- a/web/cashtab/src/components/Home/Tx.js +++ b/web/cashtab/src/components/Home/Tx.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -10,6 +10,7 @@ ThemedContactsOutlined, } from 'components/Common/CustomIcons'; import { currency } from 'components/Common/Ticker'; +import { WalletContext } from 'utils/context'; import { fromLegacyDecimals } from 'utils/cashMethods'; import { formatBalance, formatDate } from 'utils/formatting'; import TokenIcon from 'components/Tokens/TokenIcon'; @@ -124,6 +125,18 @@ border-radius: 5px; background: ${props => props.theme.sentMessage}; margin-top: 15px; + transition: max-height 500ms cubic-bezier(0, 1, 0, 1); + max-height: auto; + &[aria-expanded='true'] { + max-height: 5000px; + transition: max-height 500ms ease-in; + } + + &[aria-expanded='false'] { + transition: max-height 500ms ease-in + max-height: 4rem; +} + h4 { color: ${props => props.theme.lightWhite}; margin: 0; @@ -329,6 +342,14 @@ `; const Tx = ({ data, fiatPrice, fiatCurrency, addressesInContactList }) => { + const ContextValue = React.useContext(WalletContext); + const { cashtabSettings } = ContextValue; + const [displayedMessage, setDisplayedMessage] = useState(false); + + const handleShowMessage = () => { + setDisplayedMessage(!displayedMessage); + }; + const txDate = typeof data.blocktime === 'undefined' ? formatDate() @@ -594,11 +615,30 @@ <> {!data.outgoingTx && !addressesInContactList.includes( data.replyAddress, - ) && ( + ) && + displayedMessage && ( + + Warning: This + sender is not in + your contact + list. Beware of + scams. + + )} + {!data.outgoingTx && + !addressesInContactList.includes( + data.replyAddress, + ) && + !cashtabSettings.showMessages && ( Warning: This sender is not in @@ -624,43 +664,196 @@ '' )}
- {/*unencrypted OP_RETURN Message*/} - {data.opReturnMessage && - !data.isEncryptedMessage ? ( -

- { - data.opReturnMessage - } -

- ) : ( - '' - )} - {/*encrypted and wallet is authorized to view OP_RETURN Message*/} - {data.opReturnMessage && - data.isEncryptedMessage && - data.decryptionSuccess ? ( -

- { - data.opReturnMessage - } -

- ) : ( - '' + {!cashtabSettings.showMessages && ( + <> + {/*unencrypted OP_RETURN Message*/} + {data.opReturnMessage && + !data.isEncryptedMessage ? ( +

+ { + data.opReturnMessage + } +

+ ) : ( + '' + )} + {/*encrypted and wallet is authorized to view OP_RETURN Message*/} + {data.opReturnMessage && + data.isEncryptedMessage && + data.decryptionSuccess ? ( +

+ { + data.opReturnMessage + } +

+ ) : ( + '' + )} + {/*encrypted but wallet is not authorized to view OP_RETURN Message*/} + {data.opReturnMessage && + data.isEncryptedMessage && + !data.decryptionSuccess ? ( + + { + data.opReturnMessage + } + + ) : ( + '' + )} + )} - {/*encrypted but wallet is not authorized to view OP_RETURN Message*/} - {data.opReturnMessage && - data.isEncryptedMessage && - !data.decryptionSuccess ? ( - - { - data.opReturnMessage - } - - ) : ( - '' + {cashtabSettings.showMessages && ( + <> + {/*unencrypted OP_RETURN Message*/} + {data.opReturnMessage && + !data.isEncryptedMessage ? ( + <> + {!displayedMessage && + !data.outgoingTx && + !addressesInContactList.includes( + data.replyAddress, + ) ? ( + { + e.stopPropagation(); + handleShowMessage(); + }} + href="#" + > + Show + Message + + ) : ( + <> +

+ {' '} + { + data.opReturnMessage + } +

+ + {!addressesInContactList.includes( + data.replyAddress, + ) && ( + { + e.stopPropagation(); + handleShowMessage(); + }} + href="#" + > + Hide + Message + + )} + + )} + + ) : ( + '' + )} + {/*encrypted and wallet is authorized to view OP_RETURN Message*/} + {data.opReturnMessage && + data.isEncryptedMessage && + data.decryptionSuccess ? ( + <> + {!displayedMessage && + !data.outgoingTx && + !addressesInContactList.includes( + data.replyAddress, + ) ? ( + { + e.stopPropagation(); + handleShowMessage(); + }} + href="#" + > + Show + Message + + ) : ( + <> +

+ { + data.opReturnMessage + } +

+ {!addressesInContactList.includes( + data.replyAddress, + ) && ( + { + e.stopPropagation(); + handleShowMessage(); + }} + href="#" + > + Hide + Message + + )} + + )} + + ) : ( + '' + )} + {/*encrypted but wallet is not authorized to view OP_RETURN Message*/} + {data.opReturnMessage && + data.isEncryptedMessage && + !data.decryptionSuccess ? ( + <> + {!displayedMessage && + !data.outgoingTx && + !addressesInContactList.includes( + data.replyAddress, + ) ? ( + { + e.stopPropagation(); + handleShowMessage(); + }} + href="#" + > + Show + Message + + ) : ( + <> + + { + data.opReturnMessage + } + + {!addressesInContactList.includes( + data.replyAddress, + ) && + !data.outgoingTx && ( + { + e.stopPropagation(); + handleShowMessage(); + }} + href="#" + > + Hide + Message + + )} + + )} + + ) : ( + '' + )} + )} - {!data.outgoingTx && - data.replyAddress ? ( + {(!data.outgoingTx && + data.replyAddress && + !cashtabSettings.showMessages) || + displayedMessage ? ( { expect( - isValidCashtabSettings({ fiatCurrency: 'usd', sendModal: false }), + isValidCashtabSettings({ + fiatCurrency: 'usd', + sendModal: false, + showMessages: true, + }), ).toBe(true); }); it(`Rejects a cashtab settings object for an unsupported currency`, () => {