diff --git a/web/cashtab/src/components/App.js b/web/cashtab/src/components/App.js
index 304245118..6bf7349f1 100644
--- a/web/cashtab/src/components/App.js
+++ b/web/cashtab/src/components/App.js
@@ -1,315 +1,320 @@
import React, { useState } from 'react';
import 'antd/dist/antd.less';
import { Spin } from 'antd';
import { CashLoadingIcon } from '@components/Common/CustomIcons';
import '../index.css';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
import { theme } from '@assets/styles/theme';
import {
FolderOpenFilled,
CaretRightOutlined,
SettingFilled,
AppstoreAddOutlined,
} from '@ant-design/icons';
import Wallet from '@components/Wallet/Wallet';
import Tokens from '@components/Tokens/Tokens';
import Send from '@components/Send/Send';
import SendToken from '@components/Send/SendToken';
import Configure from '@components/Configure/Configure';
import NotFound from '@components/NotFound';
import CashTab from '@assets/cashtab_xec.png';
import TabCash from '@assets/tabcash.png';
import ABC from '@assets/logo_topright.png';
import './App.css';
import { WalletContext } from '@utils/context';
import { checkForTokenById } from '@utils/tokenMethods.js';
+import { isValidStoredWallet } from '@utils/cashMethods';
import WalletLabel from '@components/Common/WalletLabel.js';
import {
Route,
Redirect,
Switch,
useLocation,
useHistory,
} from 'react-router-dom';
const GlobalStyle = createGlobalStyle`
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button {
border-radius: 8px;
background-color: ${props => props.theme.modals.buttons.background};
color: ${props => props.theme.wallet.text.secondary};
font-weight: bold;
}
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover {
color: ${props => props.theme.primary};
transition: color 0.3s;
background-color: ${props => props.theme.modals.buttons.background};
}
.selectedCurrencyOption {
text-align: left;
color: ${props => props.theme.wallet.text.secondary} !important;
background-color: ${props => props.theme.contrast} !important;
}
.cashLoadingIcon {
color: ${props => props.theme.primary} !important
font-size: 48px !important;
}
.selectedCurrencyOption:hover {
color: ${props => props.theme.contrast} !important;
background-color: ${props => props.theme.primary} !important;
}
#addrSwitch {
.ant-switch-checked {
background-color: white !important;
}
}
#addrSwitch.ant-switch-checked {
background-image: ${props =>
props.theme.buttons.primary.backgroundImage} !important;
}
`;
const CustomApp = styled.div`
text-align: center;
font-family: 'Gilroy', sans-serif;
background-color: ${props => props.theme.app.background};
`;
const Footer = styled.div`
z-index: 2;
background-color: ${props => props.theme.footer.background};
border-radius: 20px;
position: fixed;
bottom: 0;
width: 500px;
@media (max-width: 768px) {
width: 100%;
}
border-top: 1px solid ${props => props.theme.wallet.borders.color};
`;
export const NavButton = styled.button`
:focus,
:active {
outline: none;
}
cursor: pointer;
padding: 24px 12px 12px 12px;
margin: 0 28px;
@media (max-width: 475px) {
margin: 0 20px;
}
@media (max-width: 420px) {
margin: 0 12px;
}
@media (max-width: 350px) {
margin: 0 8px;
}
background-color: ${props => props.theme.footer.background};
border: none;
font-size: 12px;
font-weight: bold;
.anticon {
display: block;
color: ${props => props.theme.footer.navIconInactive};
font-size: 24px;
margin-bottom: 6px;
}
${({ active, ...props }) =>
active &&
`
color: ${props.theme.primary};
.anticon {
color: ${props.theme.primary};
}
`}
`;
export const WalletBody = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
background-image: ${props => props.theme.app.sidebars};
background-attachment: fixed;
`;
export const WalletCtn = styled.div`
position: relative;
width: 500px;
background-color: ${props => props.theme.footerBackground};
min-height: 100vh;
padding: 10px 30px 120px 30px;
background: ${props => props.theme.wallet.background};
-webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
-moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
@media (max-width: 768px) {
width: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
`;
export const HeaderCtn = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px 0 30px;
margin-bottom: 20px;
justify-content: space-between;
border-bottom: 1px solid ${props => props.theme.wallet.borders.color};
@media (max-width: 768px) {
a {
font-size: 12px;
}
padding: 10px 0 20px;
}
`;
export const EasterEgg = styled.img`
position: fixed;
bottom: -195px;
margin: 0;
right: 10%;
transition-property: bottom;
transition-duration: 1.5s;
transition-timing-function: ease-out;
:hover {
bottom: 0;
}
@media screen and (max-width: 1250px) {
display: none;
}
`;
export const CashTabLogo = styled.img`
width: 120px;
@media (max-width: 768px) {
width: 110px;
}
`;
export const AbcLogo = styled.img`
width: 150px;
@media (max-width: 768px) {
width: 120px;
}
`;
const App = () => {
const ContextValue = React.useContext(WalletContext);
- const { wallet, loading, tokens } = ContextValue;
+ const { wallet, loading } = ContextValue;
const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
-
- const hasTab = checkForTokenById(
- tokens,
- '50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',
- );
+ // If wallet is unmigrated, do not show page until it has migrated
+ // An invalid wallet will be validated/populated after the next API call, ETA 10s
+ const validWallet = isValidStoredWallet(wallet);
+ const hasTab = validWallet
+ ? checkForTokenById(
+ wallet.state.tokens,
+ '50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',
+ )
+ : false;
const location = useLocation();
const history = useHistory();
const selectedKey =
location && location.pathname ? location.pathname.substr(1) : '';
return (
{hasTab && (
)}
(
)}
/>
{wallet ? (
) : null}
);
};
export default App;
diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
index 5472a2b2d..3c368826d 100644
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -1,559 +1,545 @@
import React, { useState, useEffect } from 'react';
import { WalletContext } from '@utils/context';
import { Form, notification, message, Modal, Alert } from 'antd';
import { CashLoader } from '@components/Common/CustomIcons';
import { Row, Col } from 'antd';
import Paragraph from 'antd/lib/typography/Paragraph';
import PrimaryButton, {
SecondaryButton,
} from '@components/Common/PrimaryButton';
import {
SendBchInput,
FormItemWithQRCodeAddon,
} from '@components/Common/EnhancedInputs';
import useBCH from '@hooks/useBCH';
import useWindowDimensions from '@hooks/useWindowDimensions';
import { isMobile, isIOS, isSafari } from 'react-device-detect';
import {
currency,
isValidTokenPrefix,
parseAddress,
toLegacy,
} from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';
import { fiatToCrypto, shouldRejectAmountInput } from '@utils/validation';
import { BalanceHeader } from '@components/Common/BalanceHeader';
import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
import {
ZeroBalanceHeader,
ConvertAmount,
AlertMsg,
} from '@components/Common/Atoms';
+import { getWalletState } from '@utils/cashMethods';
// 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
// this handles edge case of user with old wallet who has not opened latest Cashtab version yet
// If the wallet object from ContextValue has a `state key`, then check which keys are in the wallet object
// Else set it as blank
const ContextValue = React.useContext(WalletContext);
- const {
- wallet,
- fiatPrice,
- slpBalancesAndUtxos,
- apiError,
- cashtabSettings,
- } = ContextValue;
- let balances;
- const paramsInWalletState = wallet.state ? Object.keys(wallet.state) : [];
- // If wallet.state includes balances and parsedTxHistory params, use these
- // These are saved in indexedDb in the latest version of the app, hence accessible more quickly
- if (paramsInWalletState.includes('balances')) {
- balances = wallet.state.balances;
- } else {
- // If balances and parsedTxHistory are not in the wallet.state object, load them from Context
- // This is how the app used to work
- balances = ContextValue.balances;
- }
+ const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue;
+ const walletState = getWalletState(wallet);
+ const { balances, slpBalancesAndUtxos } = walletState;
// Get device window width
// If this is less than 769, the page will open with QR scanner open
const { width } = useWindowDimensions();
// Load with QR code open if device is mobile and NOT iOS + anything but safari
const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
const [formData, setFormData] = useState({
dirty: true,
value: '',
address: '',
});
const [queryStringText, setQueryStringText] = useState(null);
const [sendBchAddressError, setSendBchAddressError] = useState(false);
const [sendBchAmountError, setSendBchAmountError] = useState(false);
const [selectedCurrency, setSelectedCurrency] = useState(currency.ticker);
// Support cashtab button from web pages
const [txInfoFromUrl, setTxInfoFromUrl] = useState(false);
// Show a confirmation modal on transactions created by populating form from web page button
const [isModalVisible, setIsModalVisible] = useState(false);
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
setIsModalVisible(false);
submit();
};
const handleCancel = () => {
setIsModalVisible(false);
};
const { getBCH, getRestUrl, sendBch, calcFee } = useBCH();
// jestBCH is only ever specified for unit tests, otherwise app will use getBCH();
const BCH = jestBCH ? jestBCH : getBCH();
// If the balance has changed, unlock the UI
// This is redundant, if backend has refreshed in 1.75s timeout below, UI will already be unlocked
useEffect(() => {
passLoadingStatus(false);
}, [balances.totalBalance]);
useEffect(() => {
// Manually parse for txInfo object on page load when Send.js is loaded with a query string
// Do not set txInfo in state if query strings are not present
if (
!window.location ||
!window.location.hash ||
window.location.hash === '#/send'
) {
return;
}
const txInfoArr = window.location.hash.split('?')[1].split('&');
// Iterate over this to create object
const txInfo = {};
for (let i = 0; i < txInfoArr.length; i += 1) {
let txInfoKeyValue = txInfoArr[i].split('=');
let key = txInfoKeyValue[0];
let value = txInfoKeyValue[1];
txInfo[key] = value;
}
console.log(`txInfo from page params`, txInfo);
setTxInfoFromUrl(txInfo);
populateFormsFromUrl(txInfo);
}, []);
function populateFormsFromUrl(txInfo) {
if (txInfo && txInfo.address && txInfo.value) {
setFormData({
address: txInfo.address,
value: txInfo.value,
});
}
}
async function submit() {
setFormData({
...formData,
dirty: false,
});
if (
!formData.address ||
!formData.value ||
Number(formData.value) <= 0
) {
return;
}
// Event("Category", "Action", "Label")
// Track number of BCHA send transactions and whether users
// are sending BCHA or USD
Event('Send.js', 'Send', selectedCurrency);
passLoadingStatus(true);
const { address, value } = formData;
// Get the param-free address
let cleanAddress = address.split('?')[0];
// Ensure address has bitcoincash: prefix and checksum
cleanAddress = toLegacy(cleanAddress);
let hasValidCashPrefix;
try {
hasValidCashPrefix = cleanAddress.startsWith(
currency.legacyPrefix + ':',
);
} catch (err) {
hasValidCashPrefix = false;
console.log(`toLegacy() returned an error:`, cleanAddress);
}
if (!hasValidCashPrefix) {
// set loading to false and set address validation to false
// Now that the no-prefix case is handled, this happens when user tries to send
// BCHA to an SLPA address
passLoadingStatus(false);
setSendBchAddressError(
`Destination is not a valid ${currency.ticker} address`,
);
return;
}
// Calculate the amount in BCH
let bchValue = value;
if (selectedCurrency !== 'XEC') {
bchValue = fiatToCrypto(value, fiatPrice);
}
try {
const link = await sendBch(
BCH,
wallet,
slpBalancesAndUtxos.nonSlpUtxos,
cleanAddress,
bchValue,
currency.defaultFee,
);
notification.success({
message: 'Success',
description: (
Transaction successful. Click or tap here for more
details
),
duration: 5,
});
} catch (e) {
// Set loading to false here as well, as balance may not change depending on where error occured in try loop
passLoadingStatus(false);
let message;
if (!e.error && !e.message) {
message = `Transaction failed: no response from ${getRestUrl()}.`;
} else if (
/Could not communicate with full node or other external service/.test(
e.error,
)
) {
message = 'Could not communicate with API. Please try again.';
} else if (
e.error &&
e.error.includes(
'too-long-mempool-chain, too many unconfirmed ancestors [limit: 50] (code 64)',
)
) {
message = `The ${currency.ticker} you are trying to send has too many unconfirmed ancestors to send (limit 50). Sending will be possible after a block confirmation. Try again in about 10 minutes.`;
} else {
message = e.message || e.error || JSON.stringify(e);
}
notification.error({
message: 'Error',
description: message,
duration: 5,
});
console.error(e);
}
}
const handleAddressChange = e => {
const { value, name } = e.target;
let error = false;
let addressString = value;
// parse address
const addressInfo = parseAddress(BCH, addressString);
/*
Model
addressInfo =
{
address: '',
isValid: false,
queryString: '',
amount: null,
};
*/
const { address, isValid, queryString, amount } = addressInfo;
// If query string,
// Show an alert that only amount and currency.ticker are supported
setQueryStringText(queryString);
// Is this valid address?
if (!isValid) {
error = `Invalid ${currency.ticker} address`;
// If valid address but token format
if (isValidTokenPrefix(address)) {
error = `Token addresses are not supported for ${currency.ticker} sends`;
}
}
setSendBchAddressError(error);
// Set amount if it's in the query string
if (amount !== null) {
// Set currency to BCHA
setSelectedCurrency(currency.ticker);
// Use this object to mimic user input and get validation for the value
let amountObj = {
target: {
name: 'value',
value: amount,
},
};
handleBchAmountChange(amountObj);
setFormData({
...formData,
value: amount,
});
}
// Set address field to user input
setFormData(p => ({
...p,
[name]: value,
}));
};
const handleSelectedCurrencyChange = e => {
setSelectedCurrency(e);
// Clear input field to prevent accidentally sending 1 BCH instead of 1 USD
setFormData(p => ({
...p,
value: '',
}));
};
const handleBchAmountChange = e => {
const { value, name } = e.target;
let bchValue = value;
const error = shouldRejectAmountInput(
bchValue,
selectedCurrency,
fiatPrice,
balances.totalBalance,
);
setSendBchAmountError(error);
setFormData(p => ({
...p,
[name]: value,
}));
};
const onMax = async () => {
// Clear amt error
setSendBchAmountError(false);
// Set currency to BCH
setSelectedCurrency(currency.ticker);
try {
const txFeeSats = calcFee(BCH, slpBalancesAndUtxos.nonSlpUtxos);
const txFeeBch = txFeeSats / 10 ** currency.cashDecimals;
let value =
balances.totalBalance - txFeeBch >= 0
? (balances.totalBalance - txFeeBch).toFixed(
currency.cashDecimals,
)
: 0;
setFormData({
...formData,
value,
});
} catch (err) {
console.log(`Error in onMax:`);
console.log(err);
message.error(
'Unable to calculate the max value due to network errors',
);
}
};
// Display price in USD below input field for send amount, if it can be calculated
let fiatPriceString = '';
if (fiatPrice !== null && !isNaN(formData.value)) {
if (selectedCurrency === currency.ticker) {
fiatPriceString = `${
cashtabSettings
? `${
currency.fiatCurrencies[cashtabSettings.fiatCurrency]
.symbol
} `
: '$ '
} ${(fiatPrice * Number(formData.value)).toFixed(2)} ${
cashtabSettings && cashtabSettings.fiatCurrency
? cashtabSettings.fiatCurrency.toUpperCase()
: 'USD'
}`;
} else {
fiatPriceString = `${
formData.value ? fiatToCrypto(formData.value, fiatPrice) : '0'
} ${currency.ticker}`;
}
}
const priceApiError = fiatPrice === null && selectedCurrency !== 'XEC';
return (
<>
Are you sure you want to send {formData.value}{' '}
{currency.ticker} to {formData.address}?
{!balances.totalBalance ? (
You currently have 0 {currency.ticker}
Deposit some funds to use this feature
) : (
<>
{fiatPrice !== null && (
)}
)}
);
};
/*
passLoadingStatus must receive a default prop that is a function
in order to pass the rendering unit test in Send.test.js
status => {console.log(status)} is an arbitrary stub function
*/
SendBCH.defaultProps = {
passLoadingStatus: status => {
console.log(status);
},
};
export default SendBCH;
diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
index 3d97a8140..a3294af92 100644
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -1,464 +1,456 @@
import React, { useState, useEffect } from 'react';
import { WalletContext } from '@utils/context';
import {
Form,
notification,
message,
Row,
Col,
Alert,
Descriptions,
} from 'antd';
import Paragraph from 'antd/lib/typography/Paragraph';
import PrimaryButton, {
SecondaryButton,
} from '@components/Common/PrimaryButton';
import { CashLoader } from '@components/Common/CustomIcons';
import {
FormItemWithMaxAddon,
FormItemWithQRCodeAddon,
} from '@components/Common/EnhancedInputs';
import useBCH from '@hooks/useBCH';
import { BalanceHeader } from '@components/Common/BalanceHeader';
import { Redirect } from 'react-router-dom';
import useWindowDimensions from '@hooks/useWindowDimensions';
import { isMobile, isIOS, isSafari } from 'react-device-detect';
import { Img } from 'react-image';
import makeBlockie from 'ethereum-blockies-base64';
import BigNumber from 'bignumber.js';
import {
currency,
parseAddress,
isValidTokenPrefix,
} from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';
import {
- isValidStoredWallet,
+ getWalletState,
convertEtokenToSimpleledger,
} from '@utils/cashMethods';
const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => {
- const { wallet, tokens, slpBalancesAndUtxos, apiError } = React.useContext(
- WalletContext,
- );
- // If this wallet has migrated to latest storage structure, get token info from there
- // If not, use the tokens object (unless it's undefined, in which case use an empty array)
- const liveTokenState =
- isValidStoredWallet(wallet) && wallet.state.tokens
- ? wallet.state.tokens
- : tokens
- ? tokens
- : [];
- const token = liveTokenState.find(token => token.tokenId === tokenId);
+ const { wallet, apiError } = React.useContext(WalletContext);
+ const walletState = getWalletState(wallet);
+ const { tokens, slpBalancesAndUtxos } = walletState;
+ const token = tokens.find(token => token.tokenId === tokenId);
const [tokenStats, setTokenStats] = useState(null);
const [queryStringText, setQueryStringText] = useState(null);
const [sendTokenAddressError, setSendTokenAddressError] = useState(false);
const [sendTokenAmountError, setSendTokenAmountError] = useState(false);
// Get device window width
// If this is less than 769, the page will open with QR scanner open
const { width } = useWindowDimensions();
// Load with QR code open if device is mobile and NOT iOS + anything but safari
const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);
const [formData, setFormData] = useState({
dirty: true,
value: '',
address: '',
});
const { getBCH, getRestUrl, sendToken, getTokenStats } = useBCH();
// jestBCH is only ever specified for unit tests, otherwise app will use getBCH();
const BCH = jestBCH ? jestBCH : getBCH();
// Fetch token stats if you do not have them and API did not return an error
if (tokenStats === null) {
getTokenStats(BCH, tokenId).then(
result => {
setTokenStats(result);
},
err => {
console.log(`Error getting token stats: ${err}`);
},
);
}
async function submit() {
setFormData({
...formData,
dirty: false,
});
if (
!formData.address ||
!formData.value ||
Number(formData.value <= 0) ||
sendTokenAmountError
) {
return;
}
// Event("Category", "Action", "Label")
// Track number of SLPA send transactions and
// SLPA token IDs
Event('SendToken.js', 'Send', tokenId);
passLoadingStatus(true);
const { address, value } = formData;
// Clear params from address
let cleanAddress = address.split('?')[0];
// Convert to simpleledger prefix if etoken
cleanAddress = convertEtokenToSimpleledger(cleanAddress);
try {
const link = await sendToken(BCH, wallet, slpBalancesAndUtxos, {
tokenId: tokenId,
tokenReceiverAddress: cleanAddress,
amount: value,
});
notification.success({
message: 'Success',
description: (
Transaction successful. Click or tap here for more
details
),
duration: 5,
});
} catch (e) {
passLoadingStatus(false);
let message;
if (!e.error && !e.message) {
message = `Transaction failed: no response from ${getRestUrl()}.`;
} else if (
/Could not communicate with full node or other external service/.test(
e.error,
)
) {
message = 'Could not communicate with API. Please try again.';
} else {
message = e.message || e.error || JSON.stringify(e);
}
console.log(e);
notification.error({
message: 'Error',
description: message,
duration: 3,
});
console.error(e);
}
}
const handleSlpAmountChange = e => {
let error = false;
const { value, name } = e.target;
// test if exceeds balance using BigNumber
let isGreaterThanBalance = false;
if (!isNaN(value)) {
const bigValue = new BigNumber(value);
// Returns 1 if greater, -1 if less, 0 if the same, null if n/a
isGreaterThanBalance = bigValue.comparedTo(token.balance);
}
// Validate value for > 0
if (isNaN(value)) {
error = 'Amount must be a number';
} else if (value <= 0) {
error = 'Amount must be greater than 0';
} else if (token && token.balance && isGreaterThanBalance === 1) {
error = `Amount cannot exceed your ${token.info.tokenTicker} balance of ${token.balance}`;
} else if (!isNaN(value) && value.toString().includes('.')) {
if (value.toString().split('.')[1].length > token.info.decimals) {
error = `This token only supports ${token.info.decimals} decimal places`;
}
}
setSendTokenAmountError(error);
setFormData(p => ({
...p,
[name]: value,
}));
};
const handleTokenAddressChange = e => {
const { value, name } = e.target;
// validate for token address
// validate for parameters
// show warning that query strings are not supported
let error = false;
let addressString = value;
const addressInfo = parseAddress(BCH, addressString, true);
/*
Model
addressInfo =
{
address: '',
isValid: false,
queryString: '',
amount: null,
};
*/
const { address, isValid, queryString } = addressInfo;
// If query string,
// Show an alert that only amount and currency.ticker are supported
setQueryStringText(queryString);
// Is this valid address?
if (!isValid) {
error = 'Address is not a valid etoken: address';
// If valid address but token format
} else if (!isValidTokenPrefix(address)) {
error = `Cashtab only supports sending to ${currency.tokenPrefixes[0]} prefixed addresses`;
}
setSendTokenAddressError(error);
setFormData(p => ({
...p,
[name]: value,
}));
};
const onMax = async () => {
// Clear this error before updating field
setSendTokenAmountError(false);
try {
let value = token.balance;
setFormData({
...formData,
value,
});
} catch (err) {
console.log(`Error in onMax:`);
console.log(err);
message.error(
'Unable to calculate the max value due to network errors',
);
}
};
useEffect(() => {
// If the balance has changed, unlock the UI
// This is redundant, if backend has refreshed in 1.75s timeout below, UI will already be unlocked
passLoadingStatus(false);
}, [token]);
return (
<>
{!token && }
{token && (
<>
{tokenStats !== null && (
{token.info.decimals}
{token.tokenId}
{tokenStats && (
<>
{tokenStats.documentUri}
{new Date(
tokenStats.timestampUnix *
1000,
).toLocaleDateString()}
{tokenStats.containsBaton
? 'No'
: 'Yes'}
{tokenStats.initialTokenQty.toLocaleString()}
{tokenStats.totalBurned.toLocaleString()}
{tokenStats.totalMinted.toLocaleString()}
{tokenStats.circulatingSupply.toLocaleString()}
)}
)}
)}
);
};
/*
passLoadingStatus must receive a default prop that is a function
in order to pass the rendering unit test in SendToken.test.js
status => {console.log(status)} is an arbitrary stub function
*/
SendToken.defaultProps = {
passLoadingStatus: status => {
console.log(status);
},
};
export default SendToken;
diff --git a/web/cashtab/src/components/Send/__tests__/Send.test.js b/web/cashtab/src/components/Send/__tests__/Send.test.js
index 7c4afb5e0..b905392b2 100644
--- a/web/cashtab/src/components/Send/__tests__/Send.test.js
+++ b/web/cashtab/src/components/Send/__tests__/Send.test.js
@@ -1,130 +1,115 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { ThemeProvider } from 'styled-components';
import { theme } from '@assets/styles/theme';
import Send from '@components/Send/Send';
import BCHJS from '@psf/bch-js';
import {
walletWithBalancesAndTokens,
walletWithBalancesMock,
walletWithoutBalancesMock,
walletWithBalancesAndTokensWithCorrectState,
- walletWithBalancesAndTokensWithEmptyState,
} from '../../Wallet/__mocks__/walletAndBalancesMock';
import { BrowserRouter as Router } from 'react-router-dom';
let realUseContext;
let useContextMock;
beforeEach(() => {
realUseContext = React.useContext;
useContextMock = React.useContext = jest.fn();
// Mock method not implemented in JSDOM
// See reference at https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // Deprecated
removeListener: jest.fn(), // Deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
});
afterEach(() => {
React.useContext = realUseContext;
});
test('Wallet without BCH balance', () => {
useContextMock.mockReturnValue(walletWithoutBalancesMock);
const testBCH = new BCHJS();
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
test('Wallet with BCH balances', () => {
useContextMock.mockReturnValue(walletWithBalancesMock);
const testBCH = new BCHJS();
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
test('Wallet with BCH balances and tokens', () => {
useContextMock.mockReturnValue(walletWithBalancesAndTokens);
const testBCH = new BCHJS();
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
test('Wallet with BCH balances and tokens and state field', () => {
useContextMock.mockReturnValue(walletWithBalancesAndTokensWithCorrectState);
const testBCH = new BCHJS();
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
-test('Wallet with BCH balances and tokens and state field, but no params in state', () => {
- useContextMock.mockReturnValue(walletWithBalancesAndTokensWithEmptyState);
- const testBCH = new BCHJS();
- const component = renderer.create(
-
-
-
-
- ,
- );
- let tree = component.toJSON();
- expect(tree).toMatchSnapshot();
-});
-
test('Without wallet defined', () => {
useContextMock.mockReturnValue({
wallet: {},
balances: { totalBalance: 0 },
loading: false,
});
const testBCH = new BCHJS();
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
diff --git a/web/cashtab/src/components/Send/__tests__/SendToken.test.js b/web/cashtab/src/components/Send/__tests__/SendToken.test.js
index 5485bb5f9..f2464d81a 100644
--- a/web/cashtab/src/components/Send/__tests__/SendToken.test.js
+++ b/web/cashtab/src/components/Send/__tests__/SendToken.test.js
@@ -1,120 +1,100 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { ThemeProvider } from 'styled-components';
import { theme } from '@assets/styles/theme';
import SendToken from '@components/Send/SendToken';
import BCHJS from '@psf/bch-js';
import {
walletWithBalancesAndTokens,
walletWithBalancesAndTokensWithCorrectState,
- walletWithBalancesAndTokensWithEmptyState,
} from '../../Wallet/__mocks__/walletAndBalancesMock';
import { BrowserRouter as Router } from 'react-router-dom';
let realUseContext;
let useContextMock;
beforeEach(() => {
realUseContext = React.useContext;
useContextMock = React.useContext = jest.fn();
// Mock method not implemented in JSDOM
// See reference at https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // Deprecated
removeListener: jest.fn(), // Deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
});
afterEach(() => {
React.useContext = realUseContext;
});
test('Wallet with BCH balances and tokens', () => {
const testBCH = new BCHJS();
useContextMock.mockReturnValue(walletWithBalancesAndTokens);
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
test('Wallet with BCH balances and tokens and state field', () => {
const testBCH = new BCHJS();
useContextMock.mockReturnValue(walletWithBalancesAndTokensWithCorrectState);
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
-test('Wallet with BCH balances and tokens and state field, but no params in state', () => {
- const testBCH = new BCHJS();
- useContextMock.mockReturnValue(walletWithBalancesAndTokensWithEmptyState);
- const component = renderer.create(
-
-
-
-
- ,
- );
- let tree = component.toJSON();
- expect(tree).toMatchSnapshot();
-});
-
test('Without wallet defined', () => {
const testBCH = new BCHJS();
useContextMock.mockReturnValue({
wallet: {},
balances: { totalBalance: 0 },
loading: false,
});
const component = renderer.create(
,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap
index 026a2c7b2..5922095c1 100644
--- a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap
+++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap
@@ -1,2067 +1,1704 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
exports[`Wallet with BCH balances 1`] = `
Array [
- 0.06047469
-
+ You currently have 0
XEC
-
,
-
- $
- NaN
-
- USD
+
+ Deposit some funds to use this feature
,
,
]
`;
exports[`Wallet with BCH balances and tokens 1`] = `
Array [
- 0.06047469
-
+ You currently have 0
XEC
-
,
-
- $
- NaN
-
- USD
+
+ Deposit some funds to use this feature
,
,
]
`;
exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
0.06047469
XEC
,
$
NaN
USD
,
,
]
`;
-exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = `
-Array [
-
You currently have 0
XEC
Deposit some funds to use this feature
,
,
]
`;
diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
index cad5c3345..7a3df08c9 100644
--- a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
+++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
@@ -1,750 +1,254 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
-exports[`Wallet with BCH balances and tokens 1`] = `
-Array [
-
- 6.001
-
- TBS
-
,
-
-
-
-
-
,
-]
-`;
+exports[`Wallet with BCH balances and tokens 1`] = `null`;
exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
6.001
TBS
,
,
]
`;
-exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = `
-Array [
-
- 6.001
-
- TBS
-
,
-
-
-
-
-
,
-]
-`;
-
exports[`Without wallet defined 1`] = `null`;
diff --git a/web/cashtab/src/components/Tokens/Tokens.js b/web/cashtab/src/components/Tokens/Tokens.js
index 1b09557c7..2cc2eab65 100644
--- a/web/cashtab/src/components/Tokens/Tokens.js
+++ b/web/cashtab/src/components/Tokens/Tokens.js
@@ -1,160 +1,118 @@
import React from 'react';
-import { LoadingOutlined } from '@ant-design/icons';
import { CashLoader } from '@components/Common/CustomIcons';
import { WalletContext } from '@utils/context';
-import {
- isValidStoredWallet,
- fromSmallestDenomination,
-} from '@utils/cashMethods';
+import { fromSmallestDenomination, getWalletState } from '@utils/cashMethods';
import CreateTokenForm from '@components/Tokens/CreateTokenForm';
import { currency } from '@components/Common/Ticker.js';
import TokenList from '@components/Wallet/TokenList';
import useBCH from '@hooks/useBCH';
import { BalanceHeader } from '@components/Common/BalanceHeader';
import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
-import {
- LoadingCtn,
- ZeroBalanceHeader,
- AlertMsg,
-} from '@components/Common/Atoms';
+import { ZeroBalanceHeader, AlertMsg } from '@components/Common/Atoms';
const Tokens = ({ jestBCH }) => {
/*
Dev note
This is the first new page created after the wallet migration to include state in storage
As such, it will only load this type of wallet
If any user is still migrating at this point, this page will display a loading spinner until
their wallet has updated (ETA within 10 seconds)
Going forward, this approach will be the model for Wallet, Send, and SendToken, as the legacy
wallet state parameters not stored in the wallet object are deprecated
*/
- const {
- loading,
- wallet,
- apiError,
- fiatPrice,
- cashtabSettings,
- } = React.useContext(WalletContext);
-
- // If wallet is unmigrated, do not show page until it has migrated
- // An invalid wallet will be validated/populated after the next API call, ETA 10s
- let validWallet = isValidStoredWallet(wallet);
-
- // Get wallet state variables
- let balances, tokens;
- if (validWallet) {
- balances = wallet.state.balances;
- tokens = wallet.state.tokens;
- }
+ const { wallet, apiError, fiatPrice, cashtabSettings } = React.useContext(
+ WalletContext,
+ );
+ const walletState = getWalletState(wallet);
+ const { balances, tokens } = walletState;
const { getBCH, getRestUrl, createToken } = useBCH();
// Support using locally installed bchjs for unit tests
const BCH = jestBCH ? jestBCH : getBCH();
return (
<>
- {loading || !validWallet ? (
-
-
-
+ {!balances.totalBalance ? (
+ <>
+
+ You need some {currency.ticker} in your wallet to create
+ tokens.
+
+
+
) : (
<>
- {!balances.totalBalance ? (
- <>
-
- You need some {currency.ticker} in your wallet
- to create tokens.
-
-
-
- ) : (
- <>
-
- {fiatPrice !== null &&
- !isNaN(balances.totalBalance) && (
-
- )}
-
- )}
- {apiError && (
- <>
-
- An error occurred on our end.
- Re-establishing connection...
-
- 0.06047469
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
XEC
+ to send to others
,
]
`;
-exports[`Wallet with BCH balances and tokens and state field, but no params in state 1`] = `
+exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
,
,
,
]
`;
diff --git a/web/cashtab/src/hooks/useWallet.js b/web/cashtab/src/hooks/useWallet.js
index 0265fb1b0..0b2b3c069 100644
--- a/web/cashtab/src/hooks/useWallet.js
+++ b/web/cashtab/src/hooks/useWallet.js
@@ -1,1434 +1,1434 @@
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import Paragraph from 'antd/lib/typography/Paragraph';
import { notification } from 'antd';
import useAsyncTimeout from '@hooks/useAsyncTimeout';
import usePrevious from '@hooks/usePrevious';
import useBCH from '@hooks/useBCH';
import BigNumber from 'bignumber.js';
import {
fromSmallestDenomination,
loadStoredWallet,
isValidStoredWallet,
} from '@utils/cashMethods';
import { isValidCashtabSettings } from '@utils/validation';
import localforage from 'localforage';
import { currency } from '@components/Common/Ticker';
import isEmpty from 'lodash.isempty';
import isEqual from 'lodash.isequal';
const useWallet = () => {
const [wallet, setWallet] = useState(false);
const [cashtabSettings, setCashtabSettings] = useState(false);
const [fiatPrice, setFiatPrice] = useState(null);
const [ws, setWs] = useState(null);
const [apiError, setApiError] = useState(false);
const [checkFiatInterval, setCheckFiatInterval] = useState(null);
const [walletState, setWalletState] = useState({
balances: {},
hydratedUtxoDetails: {},
tokens: [],
slpBalancesAndUtxos: {},
parsedTxHistory: [],
utxos: [],
});
const {
getBCH,
getUtxos,
getHydratedUtxoDetails,
getSlpBalancesAndUtxos,
getTxHistory,
getTxData,
addTokenTxData,
} = useBCH();
const [loading, setLoading] = useState(true);
const [apiIndex, setApiIndex] = useState(0);
const [BCH, setBCH] = useState(getBCH(apiIndex));
const [utxos, setUtxos] = useState(null);
const {
balances,
tokens,
slpBalancesAndUtxos,
parsedTxHistory,
} = walletState;
const previousBalances = usePrevious(balances);
const previousTokens = usePrevious(tokens);
const previousWallet = usePrevious(wallet);
const previousUtxos = usePrevious(utxos);
// If you catch API errors, call this function
const tryNextAPI = () => {
let currentApiIndex = apiIndex;
// How many APIs do you have?
const apiString = process.env.REACT_APP_BCHA_APIS;
const apiArray = apiString.split(',');
console.log(`You have ${apiArray.length} APIs to choose from`);
console.log(`Current selection: ${apiIndex}`);
// If only one, exit
if (apiArray.length === 0) {
console.log(
`There are no backup APIs, you are stuck with this error`,
);
return;
} else if (currentApiIndex < apiArray.length - 1) {
currentApiIndex += 1;
console.log(
`Incrementing API index from ${apiIndex} to ${currentApiIndex}`,
);
} else {
// Otherwise use the first option again
console.log(`Retrying first API index`);
currentApiIndex = 0;
}
//return setApiIndex(currentApiIndex);
console.log(`Setting Api Index to ${currentApiIndex}`);
setApiIndex(currentApiIndex);
return setBCH(getBCH(currentApiIndex));
// If you have more than one, use the next one
// If you are at the "end" of the array, use the first one
};
const normalizeSlpBalancesAndUtxos = (slpBalancesAndUtxos, wallet) => {
const Accounts = [wallet.Path245, wallet.Path145, wallet.Path1899];
slpBalancesAndUtxos.nonSlpUtxos.forEach(utxo => {
const derivatedAccount = Accounts.find(
account => account.cashAddress === utxo.address,
);
utxo.wif = derivatedAccount.fundingWif;
});
return slpBalancesAndUtxos;
};
const normalizeBalance = slpBalancesAndUtxos => {
const totalBalanceInSatoshis = slpBalancesAndUtxos.nonSlpUtxos.reduce(
(previousBalance, utxo) => previousBalance + utxo.value,
0,
);
return {
totalBalanceInSatoshis,
totalBalance: fromSmallestDenomination(totalBalanceInSatoshis),
};
};
const deriveAccount = async (BCH, { masterHDNode, path }) => {
const node = BCH.HDNode.derivePath(masterHDNode, path);
const cashAddress = BCH.HDNode.toCashAddress(node);
const slpAddress = BCH.SLP.Address.toSLPAddress(cashAddress);
return {
cashAddress,
slpAddress,
fundingWif: BCH.HDNode.toWIF(node),
fundingAddress: BCH.SLP.Address.toSLPAddress(cashAddress),
legacyAddress: BCH.SLP.Address.toLegacyAddress(cashAddress),
};
};
const loadWalletFromStorageOnStartup = async setWallet => {
// get wallet object from localforage
const wallet = await getWallet();
// If wallet object in storage is valid, use it to set state on startup
if (isValidStoredWallet(wallet)) {
// Convert all the token balance figures to big numbers
const liveWalletState = loadStoredWallet(wallet.state);
wallet.state = liveWalletState;
setWallet(wallet);
return setLoading(false);
}
// Loading will remain true until API calls populate this legacy wallet
setWallet(wallet);
};
const haveUtxosChanged = (wallet, utxos, previousUtxos) => {
// Relevant points for this array comparing exercise
// https://stackoverflow.com/questions/13757109/triple-equal-signs-return-false-for-arrays-in-javascript-why
// https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript
// If this is initial state
if (utxos === null) {
// Then make sure to get slpBalancesAndUtxos
return true;
}
// If this is the first time the wallet received utxos
if (typeof utxos === 'undefined') {
// Then they have certainly changed
return true;
}
if (typeof previousUtxos === 'undefined') {
// Compare to what you have in localStorage on startup
// If previousUtxos are undefined, see if you have previousUtxos in wallet state
// If you do, and it has everything you need, set wallet state with that instead of calling hydrateUtxos on all utxos
if (isValidStoredWallet(wallet)) {
// Convert all the token balance figures to big numbers
const liveWalletState = loadStoredWallet(wallet.state);
return setWalletState(liveWalletState);
}
// If wallet in storage is a legacy wallet or otherwise does not have all state fields,
// then assume utxos have changed
return true;
}
// return true for empty array, since this means you definitely do not want to skip the next API call
if (utxos && utxos.length === 0) {
return true;
}
// If wallet is valid, compare what exists in written wallet state instead of former api call
let utxosToCompare = previousUtxos;
if (isValidStoredWallet(wallet)) {
try {
utxosToCompare = wallet.state.utxos;
} catch (err) {
console.log(`Error setting utxos to wallet.state.utxos`, err);
console.log(`Wallet at err`, wallet);
// If this happens, assume utxo set has changed
return true;
}
}
// Compare utxo sets
return !isEqual(utxos, utxosToCompare);
};
const update = async ({ wallet, setWalletState }) => {
//console.log(`tick()`);
//console.time("update");
try {
if (!wallet) {
return;
}
const cashAddresses = [
wallet.Path245.cashAddress,
wallet.Path145.cashAddress,
wallet.Path1899.cashAddress,
];
const utxos = await getUtxos(BCH, cashAddresses);
// If an error is returned or utxos from only 1 address are returned
if (!utxos || isEmpty(utxos) || utxos.error || utxos.length < 2) {
// Throw error here to prevent more attempted api calls
// as you are likely already at rate limits
throw new Error('Error fetching utxos');
}
setUtxos(utxos);
// Need to call with wallet as a parameter rather than trusting it is in state, otherwise can sometimes get wallet=false from haveUtxosChanged
const utxosHaveChanged = haveUtxosChanged(
wallet,
utxos,
previousUtxos,
);
// If the utxo set has not changed,
if (!utxosHaveChanged) {
// remove api error here; otherwise it will remain if recovering from a rate
// limit error with an unchanged utxo set
setApiError(false);
// then walletState has not changed and does not need to be updated
//console.timeEnd("update");
return;
}
const hydratedUtxoDetails = await getHydratedUtxoDetails(
BCH,
utxos,
);
const slpBalancesAndUtxos = await getSlpBalancesAndUtxos(
hydratedUtxoDetails,
);
const txHistory = await getTxHistory(BCH, cashAddresses);
const parsedTxHistory = await getTxData(BCH, txHistory);
const parsedWithTokens = await addTokenTxData(BCH, parsedTxHistory);
console.log(`slpBalancesAndUtxos`, slpBalancesAndUtxos);
if (typeof slpBalancesAndUtxos === 'undefined') {
console.log(`slpBalancesAndUtxos is undefined`);
throw new Error('slpBalancesAndUtxos is undefined');
}
const { tokens } = slpBalancesAndUtxos;
const newState = {
balances: {},
tokens: [],
slpBalancesAndUtxos: [],
};
newState.slpBalancesAndUtxos = normalizeSlpBalancesAndUtxos(
slpBalancesAndUtxos,
wallet,
);
newState.balances = normalizeBalance(slpBalancesAndUtxos);
newState.tokens = tokens;
newState.parsedTxHistory = parsedWithTokens;
newState.utxos = utxos;
newState.hydratedUtxoDetails = hydratedUtxoDetails;
setWalletState(newState);
// Set wallet with new state field
// Note: now that wallet carries state, maintaining a separate walletState object is redundant
// TODO clear up in future diff
- wallet.state = wallet.newState;
+ wallet.state = newState;
setWallet(wallet);
// Write this state to indexedDb using localForage
writeWalletState(wallet, newState);
// If everything executed correctly, remove apiError
setApiError(false);
} catch (error) {
console.log(`Error in update({wallet, setWalletState})`);
console.log(error);
// Set this in state so that transactions are disabled until the issue is resolved
setApiError(true);
//console.timeEnd("update");
// Try another endpoint
console.log(`Trying next API...`);
tryNextAPI();
}
//console.timeEnd("update");
};
const getActiveWalletFromLocalForage = async () => {
let wallet;
try {
wallet = await localforage.getItem('wallet');
} catch (err) {
console.log(`Error in getActiveWalletFromLocalForage`, err);
wallet = null;
}
return wallet;
};
/*
const getSavedWalletsFromLocalForage = async () => {
let savedWallets;
try {
savedWallets = await localforage.getItem('savedWallets');
} catch (err) {
console.log(`Error in getSavedWalletsFromLocalForage`, err);
savedWallets = null;
}
return savedWallets;
};
*/
const getWallet = async () => {
let wallet;
let existingWallet;
try {
existingWallet = await getActiveWalletFromLocalForage();
// existing wallet will be
// 1 - the 'wallet' value from localForage, if it exists
// 2 - false if it does not exist in localForage
// 3 - null if error
// If the wallet does not have Path1899, add it
if (existingWallet && !existingWallet.Path1899) {
console.log(`Wallet does not have Path1899`);
existingWallet = await migrateLegacyWallet(BCH, existingWallet);
}
// If not in localforage then existingWallet = false, check localstorage
if (!existingWallet) {
console.log(`no existing wallet, checking local storage`);
existingWallet = JSON.parse(
window.localStorage.getItem('wallet'),
);
console.log(`existingWallet from localStorage`, existingWallet);
// If you find it here, move it to indexedDb
if (existingWallet !== null) {
wallet = await getWalletDetails(existingWallet);
await localforage.setItem('wallet', wallet);
return wallet;
}
}
} catch (err) {
console.log(`Error in getWallet()`, err);
/*
Error here implies problem interacting with localForage or localStorage API
Have not seen this error in testing
In this case, you still want to return 'wallet' using the logic below based on
the determination of 'existingWallet' from the logic above
*/
}
if (existingWallet === null || !existingWallet) {
wallet = await getWalletDetails(existingWallet);
await localforage.setItem('wallet', wallet);
} else {
wallet = existingWallet;
}
return wallet;
};
const migrateLegacyWallet = async (BCH, wallet) => {
console.log(`migrateLegacyWallet`);
console.log(`legacyWallet`, wallet);
const NETWORK = process.env.REACT_APP_NETWORK;
const mnemonic = wallet.mnemonic;
const rootSeedBuffer = await BCH.Mnemonic.toSeed(mnemonic);
let masterHDNode;
if (NETWORK === `mainnet`) {
masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer);
} else {
masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer, 'testnet');
}
const Path1899 = await deriveAccount(BCH, {
masterHDNode,
path: "m/44'/1899'/0'/0/0",
});
wallet.Path1899 = Path1899;
try {
await localforage.setItem('wallet', wallet);
} catch (err) {
console.log(
`Error setting wallet to wallet indexedDb in migrateLegacyWallet()`,
);
console.log(err);
}
return wallet;
};
const writeWalletState = async (wallet, newState) => {
// Add new state as an object on the active wallet
wallet.state = newState;
try {
await localforage.setItem('wallet', wallet);
} catch (err) {
console.log(`Error in writeWalletState()`);
console.log(err);
}
};
const getWalletDetails = async wallet => {
if (!wallet) {
return false;
}
// Since this info is in localforage now, only get the var
const NETWORK = process.env.REACT_APP_NETWORK;
const mnemonic = wallet.mnemonic;
const rootSeedBuffer = await BCH.Mnemonic.toSeed(mnemonic);
let masterHDNode;
if (NETWORK === `mainnet`) {
masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer);
} else {
masterHDNode = BCH.HDNode.fromSeed(rootSeedBuffer, 'testnet');
}
const Path245 = await deriveAccount(BCH, {
masterHDNode,
path: "m/44'/245'/0'/0/0",
});
const Path145 = await deriveAccount(BCH, {
masterHDNode,
path: "m/44'/145'/0'/0/0",
});
const Path1899 = await deriveAccount(BCH, {
masterHDNode,
path: "m/44'/1899'/0'/0/0",
});
let name = Path1899.cashAddress.slice(12, 17);
// Only set the name if it does not currently exist
if (wallet && wallet.name) {
name = wallet.name;
}
return {
mnemonic: wallet.mnemonic,
name,
Path245,
Path145,
Path1899,
};
};
const getSavedWallets = async activeWallet => {
let savedWallets;
try {
savedWallets = await localforage.getItem('savedWallets');
if (savedWallets === null) {
savedWallets = [];
}
} catch (err) {
console.log(`Error in getSavedWallets`);
console.log(err);
savedWallets = [];
}
// Even though the active wallet is still stored in savedWallets, don't return it in this function
for (let i = 0; i < savedWallets.length; i += 1) {
if (
typeof activeWallet !== 'undefined' &&
activeWallet.name &&
savedWallets[i].name === activeWallet.name
) {
savedWallets.splice(i, 1);
}
}
return savedWallets;
};
const activateWallet = async walletToActivate => {
/*
If the user is migrating from old version to this version, make sure to save the activeWallet
1 - check savedWallets for the previously active wallet
2 - If not there, add it
*/
let currentlyActiveWallet;
try {
currentlyActiveWallet = await localforage.getItem('wallet');
} catch (err) {
console.log(
`Error in localforage.getItem("wallet") in activateWallet()`,
);
return false;
}
// Get savedwallets
let savedWallets;
try {
savedWallets = await localforage.getItem('savedWallets');
} catch (err) {
console.log(
`Error in localforage.getItem("savedWallets") in activateWallet()`,
);
return false;
}
/*
When a legacy user runs cashtabapp.com/, their active wallet will be migrated to Path1899 by
the getWallet function
Wallets in savedWallets are migrated when they are activated, in this function
Two cases to handle
1 - currentlyActiveWallet has Path1899, but its stored keyvalue pair in savedWallets does not
> Update savedWallets so that Path1899 is added to currentlyActiveWallet
2 - walletToActivate does not have Path1899
> Update walletToActivate with Path1899 before activation
*/
// Need to handle a similar situation with state
// If you find the activeWallet in savedWallets but without state, resave active wallet with state
// Note you do not have the Case 2 described above here, as wallet state is added in the update() function of useWallet.js
// Also note, since state can be expected to change frequently (unlike path deriv), you will likely save it every time you activate a new wallet
// Check savedWallets for currentlyActiveWallet
let walletInSavedWallets = false;
for (let i = 0; i < savedWallets.length; i += 1) {
if (savedWallets[i].name === currentlyActiveWallet.name) {
walletInSavedWallets = true;
// Check savedWallets for unmigrated currentlyActiveWallet
if (!savedWallets[i].Path1899) {
// Case 1, described above
savedWallets[i].Path1899 = currentlyActiveWallet.Path1899;
}
/*
Update wallet state
Note, this makes previous `walletUnmigrated` variable redundant
savedWallets[i] should always be updated, since wallet state can be expected to change most of the time
*/
savedWallets[i].state = currentlyActiveWallet.state;
}
}
// resave savedWallets
try {
// Set walletName as the active wallet
await localforage.setItem('savedWallets', savedWallets);
} catch (err) {
console.log(
`Error in localforage.setItem("savedWallets") in activateWallet() for unmigrated wallet`,
);
}
if (!walletInSavedWallets) {
console.log(`Wallet is not in saved Wallets, adding`);
savedWallets.push(currentlyActiveWallet);
// resave savedWallets
try {
// Set walletName as the active wallet
await localforage.setItem('savedWallets', savedWallets);
} catch (err) {
console.log(
`Error in localforage.setItem("savedWallets") in activateWallet()`,
);
}
}
// If wallet does not have Path1899, add it
if (!walletToActivate.Path1899) {
// Case 2, described above
console.log(`Case 2: Wallet to activate does not have Path1899`);
console.log(
`Wallet to activate from SavedWallets does not have Path1899`,
);
console.log(`walletToActivate`, walletToActivate);
walletToActivate = await migrateLegacyWallet(BCH, walletToActivate);
} else {
// Otherwise activate it as normal
// Now that we have verified the last wallet was saved, we can activate the new wallet
try {
await localforage.setItem('wallet', walletToActivate);
} catch (err) {
console.log(
`Error in localforage.setItem("wallet", walletToActivate) in activateWallet()`,
);
return false;
}
}
// Make sure stored wallet is in correct format to be used as live wallet
if (isValidStoredWallet(walletToActivate)) {
// Convert all the token balance figures to big numbers
const liveWalletState = loadStoredWallet(walletToActivate.state);
walletToActivate.state = liveWalletState;
}
return walletToActivate;
};
const renameWallet = async (oldName, newName) => {
// Load savedWallets
let savedWallets;
try {
savedWallets = await localforage.getItem('savedWallets');
} catch (err) {
console.log(
`Error in await localforage.getItem("savedWallets") in renameWallet`,
);
console.log(err);
return false;
}
// Verify that no existing wallet has this name
for (let i = 0; i < savedWallets.length; i += 1) {
if (savedWallets[i].name === newName) {
// return an error
return false;
}
}
// change name of desired wallet
for (let i = 0; i < savedWallets.length; i += 1) {
if (savedWallets[i].name === oldName) {
// Replace the name of this entry with the new name
savedWallets[i].name = newName;
}
}
// resave savedWallets
try {
// Set walletName as the active wallet
await localforage.setItem('savedWallets', savedWallets);
} catch (err) {
console.log(
`Error in localforage.setItem("savedWallets", savedWallets) in renameWallet()`,
);
return false;
}
return true;
};
const deleteWallet = async walletToBeDeleted => {
// delete a wallet
// returns true if wallet is successfully deleted
// otherwise returns false
// Load savedWallets
let savedWallets;
try {
savedWallets = await localforage.getItem('savedWallets');
} catch (err) {
console.log(
`Error in await localforage.getItem("savedWallets") in deleteWallet`,
);
console.log(err);
return false;
}
// Iterate over to find the wallet to be deleted
// Verify that no existing wallet has this name
let walletFoundAndRemoved = false;
for (let i = 0; i < savedWallets.length; i += 1) {
if (savedWallets[i].name === walletToBeDeleted.name) {
// Verify it has the same mnemonic too, that's a better UUID
if (savedWallets[i].mnemonic === walletToBeDeleted.mnemonic) {
// Delete it
savedWallets.splice(i, 1);
walletFoundAndRemoved = true;
}
}
}
// If you don't find the wallet, return false
if (!walletFoundAndRemoved) {
return false;
}
// Resave savedWallets less the deleted wallet
try {
// Set walletName as the active wallet
await localforage.setItem('savedWallets', savedWallets);
} catch (err) {
console.log(
`Error in localforage.setItem("savedWallets", savedWallets) in deleteWallet()`,
);
return false;
}
return true;
};
const addNewSavedWallet = async importMnemonic => {
// Add a new wallet to savedWallets from importMnemonic or just new wallet
const lang = 'english';
// create 128 bit BIP39 mnemonic
const Bip39128BitMnemonic = importMnemonic
? importMnemonic
: BCH.Mnemonic.generate(128, BCH.Mnemonic.wordLists()[lang]);
const newSavedWallet = await getWalletDetails({
mnemonic: Bip39128BitMnemonic.toString(),
});
// Get saved wallets
let savedWallets;
try {
savedWallets = await localforage.getItem('savedWallets');
// If this doesn't exist yet, savedWallets === null
if (savedWallets === null) {
savedWallets = [];
}
} catch (err) {
console.log(
`Error in savedWallets = await localforage.getItem("savedWallets") in addNewSavedWallet()`,
);
console.log(err);
console.log(`savedWallets in error state`, savedWallets);
}
// If this wallet is from an imported mnemonic, make sure it does not already exist in savedWallets
if (importMnemonic) {
for (let i = 0; i < savedWallets.length; i += 1) {
// Check for condition "importing new wallet that is already in savedWallets"
if (savedWallets[i].mnemonic === importMnemonic) {
// set this as the active wallet to keep name history
console.log(
`Error: this wallet already exists in savedWallets`,
);
console.log(`Wallet not being added.`);
return false;
}
}
}
// add newSavedWallet
savedWallets.push(newSavedWallet);
// update savedWallets
try {
await localforage.setItem('savedWallets', savedWallets);
} catch (err) {
console.log(
`Error in localforage.setItem("savedWallets", activeWallet) called in createWallet with ${importMnemonic}`,
);
console.log(`savedWallets`, savedWallets);
console.log(err);
}
return true;
};
const createWallet = async importMnemonic => {
const lang = 'english';
// create 128 bit BIP39 mnemonic
const Bip39128BitMnemonic = importMnemonic
? importMnemonic
: BCH.Mnemonic.generate(128, BCH.Mnemonic.wordLists()[lang]);
const wallet = await getWalletDetails({
mnemonic: Bip39128BitMnemonic.toString(),
});
try {
await localforage.setItem('wallet', wallet);
} catch (err) {
console.log(
`Error setting wallet to wallet indexedDb in createWallet()`,
);
console.log(err);
}
// Since this function is only called from OnBoarding.js, also add this to the saved wallet
try {
await localforage.setItem('savedWallets', [wallet]);
} catch (err) {
console.log(
`Error setting wallet to savedWallets indexedDb in createWallet()`,
);
console.log(err);
}
return wallet;
};
const validateMnemonic = (
mnemonic,
wordlist = BCH.Mnemonic.wordLists().english,
) => {
let mnemonicTestOutput;
try {
mnemonicTestOutput = BCH.Mnemonic.validate(mnemonic, wordlist);
if (mnemonicTestOutput === 'Valid mnemonic') {
return true;
} else {
return false;
}
} catch (err) {
console.log(err);
return false;
}
};
const handleUpdateWallet = async setWallet => {
await loadWalletFromStorageOnStartup(setWallet);
};
const loadCashtabSettings = async () => {
// get settings object from localforage
let localSettings;
try {
localSettings = await localforage.getItem('settings');
// If there is no keyvalue pair in localforage with key 'settings'
if (localSettings === null) {
// Create one with the default settings from Ticker.js
localforage.setItem('settings', currency.defaultSettings);
// Set state to default settings
setCashtabSettings(currency.defaultSettings);
return currency.defaultSettings;
}
} catch (err) {
console.log(`Error getting cashtabSettings`, err);
// TODO If they do not exist, write them
// TODO add function to change them
setCashtabSettings(currency.defaultSettings);
return currency.defaultSettings;
}
// If you found an object in localforage at the settings key, make sure it's valid
if (isValidCashtabSettings(localSettings)) {
setCashtabSettings(localSettings);
return localSettings;
}
// if not valid, also set cashtabSettings to default
setCashtabSettings(currency.defaultSettings);
return currency.defaultSettings;
};
// With different currency selections possible, need unique intervals for price checks
// Must be able to end them and set new ones with new currencies
const initializeFiatPriceApi = async selectedFiatCurrency => {
// Update fiat price and confirm it is set to make sure ap keeps loading state until this is updated
await fetchBchPrice(selectedFiatCurrency);
// Set interval for updating the price with given currency
const thisFiatInterval = setInterval(function () {
fetchBchPrice(selectedFiatCurrency);
}, 60000);
// set interval in state
setCheckFiatInterval(thisFiatInterval);
};
const clearFiatPriceApi = fiatPriceApi => {
// Clear fiat price check interval of previously selected currency
clearInterval(fiatPriceApi);
};
const changeCashtabSettings = async (key, newValue) => {
// Set loading to true as you do not want to display the fiat price of the last currency
// loading = true will lock the UI until the fiat price has updated
setLoading(true);
// Get settings from localforage
let currentSettings;
let newSettings;
try {
currentSettings = await localforage.getItem('settings');
} catch (err) {
console.log(`Error in changeCashtabSettings`, err);
// Set fiat price to null, which disables fiat sends throughout the app
setFiatPrice(null);
// Unlock the UI
setLoading(false);
return;
}
// Make sure function was called with valid params
if (
Object.keys(currentSettings).includes(key) &&
currency.settingsValidation[key].includes(newValue)
) {
// Update settings
newSettings = currentSettings;
newSettings[key] = newValue;
}
// Set new settings in state so they are available in context throughout the app
setCashtabSettings(newSettings);
// If this settings change adjusted the fiat currency, update fiat price
if (key === 'fiatCurrency') {
clearFiatPriceApi(checkFiatInterval);
initializeFiatPriceApi(newValue);
}
// Write new settings in localforage
try {
await localforage.setItem('settings', newSettings);
} catch (err) {
console.log(
`Error writing newSettings object to localforage in changeCashtabSettings`,
err,
);
console.log(`newSettings`, newSettings);
// do nothing. If this happens, the user will see default currency next time they load the app.
}
setLoading(false);
};
// Parse for incoming BCH transactions
// Only notify if websocket is not connected
if (
(ws === null || ws.readyState !== 1) &&
previousBalances &&
balances &&
'totalBalance' in previousBalances &&
'totalBalance' in balances &&
new BigNumber(balances.totalBalance)
.minus(previousBalances.totalBalance)
.gt(0)
) {
notification.success({
message: 'Transaction received',
description: (
You received{' '}
{Number(
balances.totalBalance - previousBalances.totalBalance,
).toFixed(currency.cashDecimals)}{' '}
{currency.ticker}!
),
duration: 3,
});
}
// Parse for incoming SLP transactions
if (
tokens &&
tokens[0] &&
tokens[0].balance &&
previousTokens &&
previousTokens[0] &&
previousTokens[0].balance
) {
// If tokens length is greater than previousTokens length, a new token has been received
// Note, a user could receive a new token, AND more of existing tokens in between app updates
// In this case, the app will only notify about the new token
// TODO better handling for all possible cases to cover this
// TODO handle with websockets for better response time, less complicated calc
if (tokens.length > previousTokens.length) {
// Find the new token
const tokenIds = tokens.map(({ tokenId }) => tokenId);
const previousTokenIds = previousTokens.map(
({ tokenId }) => tokenId,
);
//console.log(`tokenIds`, tokenIds);
//console.log(`previousTokenIds`, previousTokenIds);
// An array with the new token Id
const newTokenIdArr = tokenIds.filter(
tokenId => !previousTokenIds.includes(tokenId),
);
// It's possible that 2 new tokens were received
// To do, handle this case
const newTokenId = newTokenIdArr[0];
//console.log(newTokenId);
// How much of this tokenId did you get?
// would be at
// Find where the newTokenId is
const receivedTokenObjectIndex = tokens.findIndex(
x => x.tokenId === newTokenId,
);
//console.log(`receivedTokenObjectIndex`, receivedTokenObjectIndex);
// Calculate amount received
//console.log(`receivedTokenObject:`, tokens[receivedTokenObjectIndex]);
const receivedSlpQty = tokens[
receivedTokenObjectIndex
].balance.toString();
const receivedSlpTicker =
tokens[receivedTokenObjectIndex].info.tokenTicker;
const receivedSlpName =
tokens[receivedTokenObjectIndex].info.tokenName;
//console.log(`receivedSlpQty`, receivedSlpQty);
// Notification if you received SLP
if (receivedSlpQty > 0) {
notification.success({
message: `${currency.tokenTicker} Transaction received: ${receivedSlpTicker}`,
description: (
You received {receivedSlpQty} {receivedSlpName}
),
duration: 5,
});
}
//
} else {
// If tokens[i].balance > previousTokens[i].balance, a new SLP tx of an existing token has been received
// Note that tokens[i].balance is of type BigNumber
for (let i = 0; i < tokens.length; i += 1) {
if (tokens[i].balance.gt(previousTokens[i].balance)) {
// Received this token
// console.log(`previousTokenId`, previousTokens[i].tokenId);
// console.log(`currentTokenId`, tokens[i].tokenId);
if (previousTokens[i].tokenId !== tokens[i].tokenId) {
console.log(
`TokenIds do not match, breaking from SLP notifications`,
);
// Then don't send the notification
// Also don't 'continue' ; this means you have sent a token, just stop iterating through
break;
}
const receivedSlpQty = tokens[i].balance.minus(
previousTokens[i].balance,
);
const receivedSlpTicker = tokens[i].info.tokenTicker;
const receivedSlpName = tokens[i].info.tokenName;
notification.success({
message: `SLP Transaction received: ${receivedSlpTicker}`,
description: (
You received {receivedSlpQty.toString()}{' '}
{receivedSlpName}
),
duration: 5,
});
}
}
}
}
// Update wallet every 10s
useAsyncTimeout(async () => {
const wallet = await getWallet();
update({
wallet,
setWalletState,
}).finally(() => {
setLoading(false);
});
}, 10000);
const initializeWebsocket = (cashAddress, slpAddress) => {
// console.log(`initializeWebsocket(${cashAddress}, ${slpAddress})`);
// This function parses 3 cases
// 1: edge case, websocket is in state but not properly connected
// > Remove it from state and forget about it, fall back to normal notifications
// 2: edge-ish case, websocket is in state and connected but user has changed wallet
// > Unsubscribe from old addresses and subscribe to new ones
// 3: most common: app is opening, creating websocket with existing addresses
// If the websocket is already in state but is not properly connected
if (ws !== null && ws.readyState !== 1) {
// Forget about it and use conventional notifications
// Close
ws.close();
// Remove from state
setWs(null);
}
// If the websocket is in state and connected
else if (ws !== null) {
// console.log(`Websocket already in state`);
// console.log(`ws,`, ws);
// instead of initializing websocket, unsubscribe from old addresses and subscribe to new ones
const previousWsCashAddress = previousWallet.Path145.legacyAddress;
const previousWsSlpAddress = previousWallet.Path245.legacyAddress;
try {
// Unsubscribe from previous addresses
ws.send(
JSON.stringify({
op: 'addr_unsub',
addr: previousWsCashAddress,
}),
);
console.log(
`Unsubscribed from BCH address at ${previousWsCashAddress}`,
);
ws.send(
JSON.stringify({
op: 'addr_unsub',
addr: previousWsSlpAddress,
}),
);
console.log(
`Unsubscribed from SLP address at ${previousWsSlpAddress}`,
);
// Subscribe to new addresses
ws.send(
JSON.stringify({
op: 'addr_sub',
addr: cashAddress,
}),
);
console.log(`Subscribed to BCH address at ${cashAddress}`);
// Subscribe to SLP address
ws.send(
JSON.stringify({
op: 'addr_sub',
addr: slpAddress,
}),
);
console.log(`Subscribed to SLP address at ${slpAddress}`);
// Reset onmessage; it was previously set with the old addresses
// Note this code is exactly identical to lines 431-490
// TODO put in function
ws.onmessage = e => {
// TODO handle case where receive multiple messages on one incoming transaction
//console.log(`ws msg received`);
const incomingTx = JSON.parse(e.data);
console.log(incomingTx);
let bchSatsReceived = 0;
// First, check the inputs
// If cashAddress or slpAddress are in the inputs, then this is a sent tx and should be ignored for notifications
if (
incomingTx &&
incomingTx.x &&
incomingTx.x.inputs &&
incomingTx.x.out
) {
const inputs = incomingTx.x.inputs;
// Iterate over inputs and see if this transaction was sent by the active wallet
for (let i = 0; i < inputs.length; i += 1) {
if (
inputs[i].prev_out.addr === cashAddress ||
inputs[i].prev_out.addr === slpAddress
) {
// console.log(`Found a sending tx, not notifying`);
// This is a sent transaction and should be ignored by notification handlers
return;
}
}
// Iterate over outputs to determine receiving address
const outputs = incomingTx.x.out;
for (let i = 0; i < outputs.length; i += 1) {
if (outputs[i].addr === cashAddress) {
// console.log(`BCH transaction received`);
bchSatsReceived += outputs[i].value;
// handle
}
if (outputs[i].addr === slpAddress) {
console.log(`SLP transaction received`);
//handle
// you would want to get the slp info using this endpoint:
// https://rest.kingbch.com/v3/slp/txDetails/cb39dd04e07e172a37addfcb1d6e167dc52c01867ba21c9bf8b5acf4dd969a3f
// But it does not work for unconfirmed txs
// Hold off on slp tx notifications for now
}
}
}
// parse for receiving address
// if received at cashAddress, parse for BCH amount, notify BCH received
// if received at slpAddress, parse for token, notify SLP received
// if those checks fail, could be from a 'sent' tx, ignore
// Note, when you send an SLP tx, you get SLP change to SLP address and BCH change to BCH address
// Also note, when you send an SLP tx, you often have inputs from both BCH and SLP addresses
// This causes a sent SLP tx to register 4 times from the websocket
// Best way to ignore this is to ignore any incoming utx.x with BCH or SLP address in the inputs
// Notification for received BCHA
if (bchSatsReceived > 0) {
notification.success({
message: 'Transaction received',
description: (
You received {bchSatsReceived / 1e8}{' '}
{currency.ticker}!
),
duration: 3,
});
}
};
} catch (err) {
console.log(
`Error attempting to configure websocket for new wallet`,
);
console.log(err);
console.log(`Closing connection`);
ws.close();
setWs(null);
}
} else {
// If there is no websocket, create one, subscribe to addresses, and add notifications for incoming BCH transactions
let newWs = new WebSocket('wss://ws.blockchain.info/bch/inv');
newWs.onopen = () => {
console.log(`Connected to bchWs`);
// Subscribe to BCH address
newWs.send(
JSON.stringify({
op: 'addr_sub',
addr: cashAddress,
}),
);
console.log(`Subscribed to BCH address at ${cashAddress}`);
// Subscribe to SLP address
newWs.send(
JSON.stringify({
op: 'addr_sub',
addr: slpAddress,
}),
);
console.log(`Subscribed to SLP address at ${slpAddress}`);
};
newWs.onerror = e => {
// close and set to null
console.log(`Error in websocket connection for ${newWs}`);
console.log(e);
setWs(null);
};
newWs.onclose = () => {
console.log(`Websocket connection closed`);
// Unsubscribe on close to prevent double subscribing
//{"op":"addr_unsub", "addr":"$bitcoin_address"}
newWs.send(
JSON.stringify({
op: 'addr_unsub',
addr: cashAddress,
}),
);
console.log(`Unsubscribed from BCH address at ${cashAddress}`);
newWs.send(
JSON.stringify({
op: 'addr_sub',
addr: slpAddress,
}),
);
console.log(`Unsubscribed from SLP address at ${slpAddress}`);
};
newWs.onmessage = e => {
// TODO handle case where receive multiple messages on one incoming transaction
//console.log(`ws msg received`);
const incomingTx = JSON.parse(e.data);
console.log(incomingTx);
let bchSatsReceived = 0;
// First, check the inputs
// If cashAddress or slpAddress are in the inputs, then this is a sent tx and should be ignored for notifications
if (
incomingTx &&
incomingTx.x &&
incomingTx.x.inputs &&
incomingTx.x.out
) {
const inputs = incomingTx.x.inputs;
// Iterate over inputs and see if this transaction was sent by the active wallet
for (let i = 0; i < inputs.length; i += 1) {
if (
inputs[i].prev_out.addr === cashAddress ||
inputs[i].prev_out.addr === slpAddress
) {
// console.log(`Found a sending tx, not notifying`);
// This is a sent transaction and should be ignored by notification handlers
return;
}
}
// Iterate over outputs to determine receiving address
const outputs = incomingTx.x.out;
for (let i = 0; i < outputs.length; i += 1) {
if (outputs[i].addr === cashAddress) {
// console.log(`BCH transaction received`);
bchSatsReceived += outputs[i].value;
// handle
}
if (outputs[i].addr === slpAddress) {
console.log(`SLP transaction received`);
//handle
// you would want to get the slp info using this endpoint:
// https://rest.kingbch.com/v3/slp/txDetails/cb39dd04e07e172a37addfcb1d6e167dc52c01867ba21c9bf8b5acf4dd969a3f
// But it does not work for unconfirmed txs
// Hold off on slp tx notifications for now
}
}
}
// parse for receiving address
// if received at cashAddress, parse for BCH amount, notify BCH received
// if received at slpAddress, parse for token, notify SLP received
// if those checks fail, could be from a 'sent' tx, ignore
// Note, when you send an SLP tx, you get SLP change to SLP address and BCH change to BCH address
// Also note, when you send an SLP tx, you often have inputs from both BCH and SLP addresses
// This causes a sent SLP tx to register 4 times from the websocket
// Best way to ignore this is to ignore any incoming utx.x with BCH or SLP address in the inputs
// Notification for received BCHA
if (bchSatsReceived > 0) {
notification.success({
message: 'Transaction received',
description: (
You received {bchSatsReceived / 1e8}{' '}
{currency.ticker}!
),
duration: 3,
});
}
};
setWs(newWs);
}
};
const fetchBchPrice = async (
fiatCode = cashtabSettings ? cashtabSettings.fiatCurrency : 'usd',
) => {
// Split this variable out in case coingecko changes
const cryptoId = currency.coingeckoId;
// Keep this in the code, because different URLs will have different outputs require different parsing
const priceApiUrl = `https://api.coingecko.com/api/v3/simple/price?ids=${cryptoId}&vs_currencies=${fiatCode}&include_last_updated_at=true`;
let bchPrice;
let bchPriceJson;
try {
bchPrice = await fetch(priceApiUrl);
//console.log(`bchPrice`, bchPrice);
} catch (err) {
console.log(`Error fetching BCH Price`);
console.log(err);
}
try {
bchPriceJson = await bchPrice.json();
//console.log(`bchPriceJson`, bchPriceJson);
let bchPriceInFiat = bchPriceJson[cryptoId][fiatCode] / 1e6;
const validEcashPrice = typeof bchPriceInFiat === 'number';
if (validEcashPrice) {
setFiatPrice(bchPriceInFiat);
} else {
// If API price looks fishy, do not allow app to send using fiat settings
setFiatPrice(null);
}
} catch (err) {
console.log(`Error parsing price API response to JSON`);
console.log(err);
}
};
useEffect(async () => {
handleUpdateWallet(setWallet);
const initialSettings = await loadCashtabSettings();
initializeFiatPriceApi(initialSettings.fiatCurrency);
}, []);
useEffect(() => {
if (
wallet &&
wallet.Path145 &&
wallet.Path145.cashAddress &&
wallet.Path245 &&
wallet.Path245.cashAddress
) {
if (currency.useBlockchainWs) {
initializeWebsocket(
wallet.Path145.legacyAddress,
wallet.Path245.legacyAddress,
);
}
}
}, [wallet]);
return {
BCH,
wallet,
fiatPrice,
slpBalancesAndUtxos,
balances,
tokens,
parsedTxHistory,
loading,
apiError,
cashtabSettings,
changeCashtabSettings,
getActiveWalletFromLocalForage,
getWallet,
validateMnemonic,
getWalletDetails,
getSavedWallets,
migrateLegacyWallet,
update: async () =>
update({
wallet: await getWallet(),
setLoading,
setWalletState,
}),
createWallet: async importMnemonic => {
setLoading(true);
const newWallet = await createWallet(importMnemonic);
setWallet(newWallet);
update({
wallet: newWallet,
setWalletState,
}).finally(() => setLoading(false));
},
activateWallet: async walletToActivate => {
setLoading(true);
const newWallet = await activateWallet(walletToActivate);
setWallet(newWallet);
if (isValidStoredWallet(walletToActivate)) {
// If you have all state parameters needed in storage, immediately load the wallet
setLoading(false);
} else {
// If the wallet is missing state parameters in storage, wait for API info
// This handles case of unmigrated legacy wallet
update({
wallet: newWallet,
setWalletState,
}).finally(() => setLoading(false));
}
},
addNewSavedWallet,
renameWallet,
deleteWallet,
};
};
export default useWallet;
diff --git a/web/cashtab/src/utils/cashMethods.js b/web/cashtab/src/utils/cashMethods.js
index 43f863675..03d066c53 100644
--- a/web/cashtab/src/utils/cashMethods.js
+++ b/web/cashtab/src/utils/cashMethods.js
@@ -1,216 +1,231 @@
import { currency } from '@components/Common/Ticker';
import BigNumber from 'bignumber.js';
import cashaddr from 'ecashaddrjs';
export const fromLegacyDecimals = (
amount,
cashDecimals = currency.cashDecimals,
) => {
// Input 0.00000546 BCH
// Output 5.46 XEC or 0.00000546 BCH, depending on currency.cashDecimals
const amountBig = new BigNumber(amount);
const conversionFactor = new BigNumber(10 ** (8 - cashDecimals));
const amountSmallestDenomination = amountBig
.times(conversionFactor)
.toNumber();
return amountSmallestDenomination;
};
export const fromSmallestDenomination = (
amount,
cashDecimals = currency.cashDecimals,
) => {
const amountBig = new BigNumber(amount);
const multiplier = new BigNumber(10 ** (-1 * cashDecimals));
const amountInBaseUnits = amountBig.times(multiplier);
return amountInBaseUnits.toNumber();
};
export const toSmallestDenomination = (
sendAmount,
cashDecimals = currency.cashDecimals,
) => {
// Replace the BCH.toSatoshi method with an equivalent function that works for arbitrary decimal places
// Example, for an 8 decimal place currency like Bitcoin
// Input: a BigNumber of the amount of Bitcoin to be sent
// Output: a BigNumber of the amount of satoshis to be sent, or false if input is invalid
// Validate
// Input should be a BigNumber with no more decimal places than cashDecimals
const isValidSendAmount =
BigNumber.isBigNumber(sendAmount) && sendAmount.dp() <= cashDecimals;
if (!isValidSendAmount) {
return false;
}
const conversionFactor = new BigNumber(10 ** cashDecimals);
const sendAmountSmallestDenomination = sendAmount.times(conversionFactor);
return sendAmountSmallestDenomination;
};
export const formatBalance = x => {
try {
let balanceInParts = x.toString().split('.');
balanceInParts[0] = balanceInParts[0].replace(
/\B(?=(\d{3})+(?!\d))/g,
' ',
);
return balanceInParts.join('.');
} catch (err) {
console.log(`Error in formatBalance for ${x}`);
console.log(err);
return x;
}
};
export const batchArray = (inputArray, batchSize) => {
// take an array of n elements, return an array of arrays each of length batchSize
const batchedArray = [];
for (let i = 0; i < inputArray.length; i += batchSize) {
const tempArray = inputArray.slice(i, i + batchSize);
batchedArray.push(tempArray);
}
return batchedArray;
};
export const flattenBatchedHydratedUtxos = batchedHydratedUtxoDetails => {
// Return same result as if only the bulk API call were made
// to do this, just need to move all utxos under one slpUtxos
/*
given
[
{
slpUtxos: [
{
utxos: [],
address: '',
}
],
},
{
slpUtxos: [
{
utxos: [],
address: '',
}
],
}
]
return [
{
slpUtxos: [
{
utxos: [],
address: ''
},
{
utxos: [],
address: ''
},
]
}
*/
const flattenedBatchedHydratedUtxos = { slpUtxos: [] };
for (let i = 0; i < batchedHydratedUtxoDetails.length; i += 1) {
const theseSlpUtxos = batchedHydratedUtxoDetails[i].slpUtxos[0];
flattenedBatchedHydratedUtxos.slpUtxos.push(theseSlpUtxos);
}
return flattenedBatchedHydratedUtxos;
};
export const loadStoredWallet = walletStateFromStorage => {
// Accept cached tokens array that does not save BigNumber type of BigNumbers
// Return array with BigNumbers converted
// See BigNumber.js api for how to create a BigNumber object from an object
// https://mikemcl.github.io/bignumber.js/
const liveWalletState = walletStateFromStorage;
const { slpBalancesAndUtxos, tokens } = liveWalletState;
for (let i = 0; i < tokens.length; i += 1) {
const thisTokenBalance = tokens[i].balance;
thisTokenBalance._isBigNumber = true;
tokens[i].balance = new BigNumber(thisTokenBalance);
}
// Also confirm balance is correct
// Necessary step in case currency.decimals changed since last startup
const balancesRebased = normalizeBalance(slpBalancesAndUtxos);
liveWalletState.balances = balancesRebased;
return liveWalletState;
};
export const normalizeBalance = slpBalancesAndUtxos => {
const totalBalanceInSatoshis = slpBalancesAndUtxos.nonSlpUtxos.reduce(
(previousBalance, utxo) => previousBalance + utxo.value,
0,
);
return {
totalBalanceInSatoshis,
totalBalance: fromSmallestDenomination(totalBalanceInSatoshis),
};
};
export const isValidStoredWallet = walletStateFromStorage => {
return (
typeof walletStateFromStorage === 'object' &&
'state' in walletStateFromStorage &&
typeof walletStateFromStorage.state === 'object' &&
'balances' in walletStateFromStorage.state &&
'utxos' in walletStateFromStorage.state &&
'hydratedUtxoDetails' in walletStateFromStorage.state &&
'slpBalancesAndUtxos' in walletStateFromStorage.state &&
'tokens' in walletStateFromStorage.state
);
};
+export const getWalletState = wallet => {
+ if (!wallet || !wallet.state) {
+ return {
+ balances: { totalBalance: 0, totalBalanceInSatoshis: 0 },
+ hydratedUtxoDetails: {},
+ tokens: [],
+ slpBalancesAndUtxos: {},
+ parsedTxHistory: [],
+ utxos: [],
+ };
+ }
+
+ return wallet.state;
+};
+
export function convertToEcashPrefix(bitcoincashPrefixedAddress) {
// Prefix-less addresses may be valid, but the cashaddr.decode function used below
// will throw an error without a prefix. Hence, must ensure prefix to use that function.
const hasPrefix = bitcoincashPrefixedAddress.includes(':');
if (hasPrefix) {
// Is it bitcoincash: or simpleledger:
const { type, hash, prefix } = cashaddr.decode(
bitcoincashPrefixedAddress,
);
let newPrefix;
if (prefix === 'bitcoincash') {
newPrefix = 'ecash';
} else if (prefix === 'simpleledger') {
newPrefix = 'etoken';
} else {
return bitcoincashPrefixedAddress;
}
const convertedAddress = cashaddr.encode(newPrefix, type, hash);
return convertedAddress;
} else {
return bitcoincashPrefixedAddress;
}
}
export function convertEtokenToSimpleledger(etokenPrefixedAddress) {
// Prefix-less addresses may be valid, but the cashaddr.decode function used below
// will throw an error without a prefix. Hence, must ensure prefix to use that function.
const hasPrefix = etokenPrefixedAddress.includes(':');
if (hasPrefix) {
// Is it bitcoincash: or simpleledger:
const { type, hash, prefix } = cashaddr.decode(etokenPrefixedAddress);
let newPrefix;
if (prefix === 'etoken') {
newPrefix = 'simpleledger';
} else {
// return address with no change
return etokenPrefixedAddress;
}
const convertedAddress = cashaddr.encode(newPrefix, type, hash);
return convertedAddress;
} else {
// return address with no change
return etokenPrefixedAddress;
}
}
+