diff --git a/web/cashtab/src/components/Common/Notifications.js b/web/cashtab/src/components/Common/Notifications.js new file mode 100644 --- /dev/null +++ b/web/cashtab/src/components/Common/Notifications.js @@ -0,0 +1,172 @@ +import * as React from 'react'; +import { notification } from 'antd'; +import { + CashReceivedNotificationIcon, + TokenReceivedNotificationIcon, +} from '@components/Common/CustomIcons'; +import Paragraph from 'antd/lib/typography/Paragraph'; +import { currency } from '@components/Common/Ticker'; + +// Success Notifications: +const sendXecNotification = link => { + notification.success({ + message: 'Success', + description: ( + + + Transaction successful. Click to view in block explorer. + + + ), + duration: 3, + icon: , + style: { width: '100%' }, + }); +}; + +const createTokenNotification = link => { + notification.success({ + message: 'Success', + description: ( + + + Token created! Click to view in block explorer. + + + ), + icon: , + style: { width: '100%' }, + }); +}; + +const sendTokenNotification = link => { + notification.success({ + message: 'Success', + description: ( + + + Transaction successful. Click to view in block explorer. + + + ), + duration: 3, + icon: , + style: { width: '100%' }, + }); +}; + +const transactionReceivedNotification = ( + balances, + previousBalances, + cashtabSettings, + fiatPrice, +) => { + notification.success({ + message: 'Transaction received', + description: ( + + +{' '} + {parseFloat( + Number( + balances.totalBalance - previousBalances.totalBalance, + ).toFixed(currency.cashDecimals), + ).toLocaleString()}{' '} + {currency.ticker}{' '} + {cashtabSettings && + cashtabSettings.fiatCurrency && + `(${ + currency.fiatCurrencies[cashtabSettings.fiatCurrency] + .symbol + }${( + Number( + balances.totalBalance - + previousBalances.totalBalance, + ) * fiatPrice + ).toFixed( + currency.cashDecimals, + )} ${cashtabSettings.fiatCurrency.toUpperCase()})`} + + ), + duration: 3, + icon: , + style: { width: '100%' }, + }); +}; + +const eTokenReceivedNotification = ( + currency, + receivedSlpTicker, + receivedSlpQty, + receivedSlpName, +) => { + console.log('new money!'); + notification.success({ + message: `${currency.tokenTicker} transaction received: ${receivedSlpTicker}`, + description: ( + + You received {receivedSlpQty} {receivedSlpName} + + ), + duration: 3, + icon: , + style: { width: '100%' }, + }); +}; + +const newETokenReceivedNotification = ( + currency, + receivedSlpTicker, + receivedSlpQty, + receivedSlpName, +) => { + console.log(receivedSlpQty); + notification.success({ + message: `${currency.tokenTicker} transaction received: ${receivedSlpTicker}`, + description: ( + + You received {receivedSlpQty.toString()} {receivedSlpName} + + ), + duration: 3, + icon: , + style: { width: '100%' }, + }); +}; + +// Error Notifications: + +const sendXecErrorNotification = message => { + notification.error({ + message: 'Error', + description: message, + duration: 5, + }); +}; + +const sendETokenErrorNotification = (message, e) => { + console.log(e); + notification.error({ + message: 'Error', + description: message, + duration: 3, + }); +}; + +const createETokenErrorNotification = message => { + notification.error({ + message: 'Error', + description: message, + duration: 5, + }); +}; +export { + sendXecNotification, + createTokenNotification, + sendTokenNotification, + transactionReceivedNotification, + eTokenReceivedNotification, + newETokenReceivedNotification, + sendXecErrorNotification, + sendETokenErrorNotification, + createETokenErrorNotification, +}; 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 @@ -3,7 +3,6 @@ import { WalletContext } from '@utils/context'; import { Form, notification, message, Modal, Alert } from 'antd'; import { Row, Col } from 'antd'; -import Paragraph from 'antd/lib/typography/Paragraph'; import PrimaryButton, { SecondaryButton, } from '@components/Common/PrimaryButton'; @@ -13,6 +12,10 @@ } from '@components/Common/EnhancedInputs'; import useBCH from '@hooks/useBCH'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import { + sendXecNotification, + sendXecErrorNotification, +} from '@components/Common/Notifications'; import { isMobile, isIOS, isSafari } from 'react-device-detect'; import { currency, @@ -30,7 +33,6 @@ AlertMsg, } from '@components/Common/Atoms'; import { getWalletState } from '@utils/cashMethods'; -import { CashReceivedNotificationIcon } from '@components/Common/CustomIcons'; import ApiError from '@components/Common/ApiError'; // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest @@ -192,21 +194,7 @@ bchValue, currency.defaultFee, ); - - notification.success({ - message: 'Success', - description: ( - - - Transaction successful. Click to view in block - explorer. - - - ), - duration: 3, - icon: , - style: { width: '100%' }, - }); + sendXecNotification(link); } catch (e) { // Set loading to false here as well, as balance may not change depending on where error occured in try loop passLoadingStatus(false); @@ -231,11 +219,8 @@ message = e.message || e.error || JSON.stringify(e); } - notification.error({ - message: 'Error', - description: message, - duration: 5, - }); + sendXecErrorNotification(message); + console.error(e); } } diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js --- a/web/cashtab/src/components/Send/SendToken.js +++ b/web/cashtab/src/components/Send/SendToken.js @@ -10,7 +10,6 @@ Alert, Descriptions, } from 'antd'; -import Paragraph from 'antd/lib/typography/Paragraph'; import PrimaryButton, { SecondaryButton, } from '@components/Common/PrimaryButton'; @@ -36,8 +35,11 @@ getWalletState, convertEtokenToSimpleledger, } from '@utils/cashMethods'; -import { TokenReceivedNotificationIcon } from '@components/Common/CustomIcons'; import ApiError from '@components/Common/ApiError'; +import { + sendTokenNotification, + sendETokenErrorNotification, +} from '@components/Common/Notifications'; const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => { const { wallet, apiError } = React.useContext(WalletContext); @@ -114,20 +116,7 @@ amount: value, }); - notification.success({ - message: 'Success', - description: ( - - - Transaction successful. Click to view in block - explorer. - - - ), - duration: 3, - icon: , - style: { width: '100%' }, - }); + sendTokenNotification(link); } catch (e) { passLoadingStatus(false); let message; @@ -144,11 +133,7 @@ message = e.message || e.error || JSON.stringify(e); } console.log(e); - notification.error({ - message: 'Error', - description: message, - duration: 3, - }); + sendETokenErrorNotification(message, e); console.error(e); } } diff --git a/web/cashtab/src/components/Tokens/CreateTokenForm.js b/web/cashtab/src/components/Tokens/CreateTokenForm.js --- a/web/cashtab/src/components/Tokens/CreateTokenForm.js +++ b/web/cashtab/src/components/Tokens/CreateTokenForm.js @@ -15,9 +15,11 @@ import { SmartButton } from '@components/Common/PrimaryButton'; import { Collapse, Form, Input, Modal, notification } from 'antd'; const { Panel } = Collapse; -import Paragraph from 'antd/lib/typography/Paragraph'; import { TokenParamLabel } from '@components/Common/Atoms'; -import { TokenReceivedNotificationIcon } from '@components/Common/CustomIcons'; +import { + createTokenNotification, + createETokenErrorNotification, +} from '@components/Common/Notifications'; const CreateTokenForm = ({ BCH, @@ -50,9 +52,8 @@ // New Token Decimals const [newTokenDecimals, setNewTokenDecimals] = useState(0); - const [newTokenDecimalsIsValid, setNewTokenDecimalsIsValid] = useState( - true, - ); + const [newTokenDecimalsIsValid, setNewTokenDecimalsIsValid] = + useState(true); const handleNewTokenDecimalsInput = e => { const { value } = e.target; // validation @@ -69,9 +70,8 @@ // New Token Initial Quantity const [newTokenInitialQty, setNewTokenInitialQty] = useState(''); - const [newTokenInitialQtyIsValid, setNewTokenInitialQtyIsValid] = useState( - null, - ); + const [newTokenInitialQtyIsValid, setNewTokenInitialQtyIsValid] = + useState(null); const handleNewTokenInitialQtyInput = e => { const { value } = e.target; // validation @@ -83,10 +83,8 @@ // New Token document URL const [newTokenDocumentUrl, setNewTokenDocumentUrl] = useState(''); // Start with this as true, field is not required - const [ - newTokenDocumentUrlIsValid, - setNewTokenDocumentUrlIsValid, - ] = useState(true); + const [newTokenDocumentUrlIsValid, setNewTokenDocumentUrlIsValid] = + useState(true); const handleNewTokenDocumentUrlInput = e => { const { value } = e.target; @@ -140,19 +138,8 @@ currency.defaultFee, configObj, ); - - notification.success({ - message: 'Success', - description: ( - - - Token created! Click to view in block explorer. - - - ), - icon: , - style: { width: '100%' }, - }); + // createTokenNotification(link); + createETokenErrorNotification(message); } catch (e) { // Set loading to false here as well, as balance may not change depending on where error occured in try loop passLoadingStatus(false); @@ -176,12 +163,8 @@ } else { message = e.message || e.error || JSON.stringify(e); } + // createETokenErrorNotification(message) - notification.error({ - message: 'Error', - description: message, - duration: 5, - }); console.error(e); } // Hide the modal diff --git a/web/cashtab/src/hooks/useWallet.js b/web/cashtab/src/hooks/useWallet.js --- a/web/cashtab/src/hooks/useWallet.js +++ b/web/cashtab/src/hooks/useWallet.js @@ -17,11 +17,15 @@ import { currency } from '@components/Common/Ticker'; import isEmpty from 'lodash.isempty'; import isEqual from 'lodash.isequal'; +import { + transactionReceivedNotification, + eTokenReceivedNotification, + newETokenReceivedNotification, +} from '@components/Common/Notifications'; import { CashReceivedNotificationIcon, TokenReceivedNotificationIcon, } from '@components/Common/CustomIcons'; - const useWallet = () => { const [wallet, setWallet] = useState(false); const [cashtabSettings, setCashtabSettings] = useState(false); @@ -900,38 +904,12 @@ .minus(previousBalances.totalBalance) .gt(0) ) { - notification.success({ - message: 'Transaction received', - description: ( - - +{' '} - {parseFloat( - Number( - balances.totalBalance - - previousBalances.totalBalance, - ).toFixed(currency.cashDecimals), - ).toLocaleString()}{' '} - {currency.ticker}{' '} - {cashtabSettings && - cashtabSettings.fiatCurrency && - `(${ - currency.fiatCurrencies[ - cashtabSettings.fiatCurrency - ].symbol - }${( - Number( - balances.totalBalance - - previousBalances.totalBalance, - ) * fiatPrice - ).toFixed( - currency.cashDecimals, - )} ${cashtabSettings.fiatCurrency.toUpperCase()})`} - - ), - duration: 3, - icon: , - style: { width: '100%' }, - }); + transactionReceivedNotification( + balances, + previousBalances, + cashtabSettings, + fiatPrice, + ); } // Parse for incoming eToken transactions @@ -977,9 +955,8 @@ // Calculate amount received //console.log(`receivedTokenObject:`, tokens[receivedTokenObjectIndex]); - const receivedSlpQty = tokens[ - receivedTokenObjectIndex - ].balance.toString(); + const receivedSlpQty = + tokens[receivedTokenObjectIndex].balance.toString(); const receivedSlpTicker = tokens[receivedTokenObjectIndex].info.tokenTicker; const receivedSlpName = @@ -988,19 +965,13 @@ // Notification if you received SLP if (receivedSlpQty > 0) { - notification.success({ - message: `${currency.tokenTicker} transaction received: ${receivedSlpTicker}`, - description: ( - - You received {receivedSlpQty} {receivedSlpName} - - ), - duration: 3, - icon: , - style: { width: '100%' }, - }); + eTokenReceivedNotification( + currency, + receivedSlpTicker, + receivedSlpQty, + receivedSlpName, + ); } - // } else { // If tokens[i].balance > previousTokens[i].balance, a new SLP tx of an existing token has been received @@ -1026,18 +997,12 @@ const receivedSlpTicker = tokens[i].info.tokenTicker; const receivedSlpName = tokens[i].info.tokenName; - notification.success({ - message: `${currency.tokenTicker} transaction received: ${receivedSlpTicker}`, - description: ( - - You received {receivedSlpQty.toString()}{' '} - {receivedSlpName} - - ), - duration: 3, - icon: , - style: { width: '100%' }, - }); + newETokenReceivedNotification( + currency, + receivedSlpTicker, + receivedSlpQty, + receivedSlpName, + ); } } }