changeCashtabSettings('fiatCurrency', fiatCode)
}
/>
[
Documentation
]
);
};
export default Configure;
diff --git a/web/cashtab/src/components/OnBoarding/OnBoarding.js b/web/cashtab/src/components/OnBoarding/OnBoarding.js
index 5b28e7390..09b0df2c6 100644
--- a/web/cashtab/src/components/OnBoarding/OnBoarding.js
+++ b/web/cashtab/src/components/OnBoarding/OnBoarding.js
@@ -1,153 +1,155 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { WalletContext } from '@utils/context';
import { Input, Form, Modal } from 'antd';
import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
import {
ExclamationCircleOutlined,
PlusSquareOutlined,
ImportOutlined,
LockOutlined,
} from '@ant-design/icons';
import PrimaryButton, {
SecondaryButton,
SmartButton,
} from '@components/Common/PrimaryButton';
import { currency } from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';
export const WelcomeText = styled.p`
color: ${props => props.theme.wallet.text.secondary};
width: 100%;
font-size: 16px;
margin-bottom: 60px;
text-align: left;
`;
export const WelcomeLink = styled.a`
text-decoration: underline;
color: ${props => props.theme.primary};
`;
-export const OnBoarding = ({ history }) => {
+const OnBoarding = () => {
const ContextValue = React.useContext(WalletContext);
const { createWallet, validateMnemonic } = ContextValue;
const [formData, setFormData] = useState({
dirty: true,
mnemonic: '',
});
const [seedInput, openSeedInput] = useState(false);
const [isValidMnemonic, setIsValidMnemonic] = useState(false);
const { confirm } = Modal;
async function submit() {
setFormData({
...formData,
dirty: false,
});
if (!formData.mnemonic) {
return;
}
// Event("Category", "Action", "Label")
// Track number of created wallets from onboarding
Event('Onboarding.js', 'Create Wallet', 'Imported');
createWallet(formData.mnemonic);
}
const handleChange = e => {
const { value, name } = e.target;
// Validate mnemonic on change
// Import button should be disabled unless mnemonic is valid
setIsValidMnemonic(validateMnemonic(value));
setFormData(p => ({ ...p, [name]: value }));
};
function showBackupConfirmModal() {
confirm({
title: "Don't forget to back up your wallet",
icon: ,
content: `Once your wallet is created you can back it up by writing down your 12-word seed. You can find your seed on the Settings page. If you are browsing in Incognito mode or if you clear your browser history, you will lose any funds that are not backed up!`,
okText: 'Okay, make me a wallet!',
onOk() {
// Event("Category", "Action", "Label")
// Track number of created wallets from onboarding
Event('Onboarding.js', 'Create Wallet', 'New');
createWallet();
},
});
}
return (
<>
Welcome to Cashtab!
Cashtab is an{' '}
open source,
{' '}
non-custodial web wallet for {currency.name}.
Want to learn more?{' '}
Check out the Cashtab documentation.
showBackupConfirmModal()}>
New Wallet
openSeedInput(!seedInput)}>
Import Wallet
{seedInput && (
)}
);
};
+
+export default OnBoarding;
diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
index 351dc090f..1fca6c387 100644
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -1,534 +1,540 @@
import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
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';
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 BalanceHeader from '@components/Common/BalanceHeader';
+import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat';
import {
ZeroBalanceHeader,
ConvertAmount,
AlertMsg,
} from '@components/Common/Atoms';
import { getWalletState } from '@utils/cashMethods';
import { CashReceivedNotificationIcon } from '@components/Common/CustomIcons';
-import { ApiError } from '@components/Common/ApiError';
+import ApiError from '@components/Common/ApiError';
// 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, 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 to view in block
explorer.
),
duration: 3,
icon: ,
style: { width: '100%' },
});
} 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);
},
};
+SendBCH.propTypes = {
+ jestBCH: PropTypes.object,
+ passLoadingStatus: PropTypes.func,
+};
+
export default SendBCH;
diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
index 65434bd19..0de5723e8 100644
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -1,450 +1,457 @@
import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
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 {
FormItemWithMaxAddon,
FormItemWithQRCodeAddon,
} from '@components/Common/EnhancedInputs';
import useBCH from '@hooks/useBCH';
-import { BalanceHeader } from '@components/Common/BalanceHeader';
+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 {
getWalletState,
convertEtokenToSimpleledger,
} from '@utils/cashMethods';
import { TokenReceivedNotificationIcon } from '@components/Common/CustomIcons';
-import { ApiError } from '@components/Common/ApiError';
+import ApiError from '@components/Common/ApiError';
const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => {
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 to view in block
explorer.
),
duration: 3,
icon: ,
style: { width: '100%' },
});
} 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}
{tokenStats.timestampUnix !==
null
? new Date(
tokenStats.timestampUnix *
1000,
).toLocaleDateString()
: 'Just now (Genesis tx confirming)'}
{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);
},
};
+SendToken.propTypes = {
+ tokenId: PropTypes.string,
+ jestBCH: PropTypes.object,
+ passLoadingStatus: PropTypes.func,
+};
+
export default SendToken;
diff --git a/web/cashtab/src/components/Tokens/CreateTokenForm.js b/web/cashtab/src/components/Tokens/CreateTokenForm.js
index 43beaac58..1dcb72bac 100644
--- a/web/cashtab/src/components/Tokens/CreateTokenForm.js
+++ b/web/cashtab/src/components/Tokens/CreateTokenForm.js
@@ -1,380 +1,389 @@
import React, { useState } from 'react';
+import PropTypes from 'prop-types';
import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
import { TokenCollapse } from '@components/Common/StyledCollapse';
import { currency } from '@components/Common/Ticker.js';
import { WalletContext } from '@utils/context';
import {
isValidTokenName,
isValidTokenTicker,
isValidTokenDecimals,
isValidTokenInitialQty,
isValidTokenDocumentUrl,
} from '@utils/validation';
import { PlusSquareOutlined } from '@ant-design/icons';
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';
const CreateTokenForm = ({
BCH,
getRestUrl,
createToken,
disabled,
passLoadingStatus,
}) => {
const { wallet } = React.useContext(WalletContext);
// New Token Name
const [newTokenName, setNewTokenName] = useState('');
const [newTokenNameIsValid, setNewTokenNameIsValid] = useState(null);
const handleNewTokenNameInput = e => {
const { value } = e.target;
// validation
setNewTokenNameIsValid(isValidTokenName(value));
setNewTokenName(value);
};
// New Token Ticker
const [newTokenTicker, setNewTokenTicker] = useState('');
const [newTokenTickerIsValid, setNewTokenTickerIsValid] = useState(null);
const handleNewTokenTickerInput = e => {
const { value } = e.target;
// validation
setNewTokenTickerIsValid(isValidTokenTicker(value));
setNewTokenTicker(value);
};
// New Token Decimals
const [newTokenDecimals, setNewTokenDecimals] = useState(0);
const [newTokenDecimalsIsValid, setNewTokenDecimalsIsValid] = useState(
true,
);
const handleNewTokenDecimalsInput = e => {
const { value } = e.target;
// validation
setNewTokenDecimalsIsValid(isValidTokenDecimals(value));
// Also validate the supply here if it has not yet been set
if (newTokenInitialQtyIsValid !== null) {
setNewTokenInitialQtyIsValid(
isValidTokenInitialQty(value, newTokenDecimals),
);
}
setNewTokenDecimals(value);
};
// New Token Initial Quantity
const [newTokenInitialQty, setNewTokenInitialQty] = useState('');
const [newTokenInitialQtyIsValid, setNewTokenInitialQtyIsValid] = useState(
null,
);
const handleNewTokenInitialQtyInput = e => {
const { value } = e.target;
// validation
setNewTokenInitialQtyIsValid(
isValidTokenInitialQty(value, newTokenDecimals),
);
setNewTokenInitialQty(value);
};
// New Token document URL
const [newTokenDocumentUrl, setNewTokenDocumentUrl] = useState('');
// Start with this as true, field is not required
const [
newTokenDocumentUrlIsValid,
setNewTokenDocumentUrlIsValid,
] = useState(true);
const handleNewTokenDocumentUrlInput = e => {
const { value } = e.target;
// validation
setNewTokenDocumentUrlIsValid(isValidTokenDocumentUrl(value));
setNewTokenDocumentUrl(value);
};
// New Token fixed supply
// Only allow creation of fixed supply tokens until Minting support is added
// New Token document hash
// Do not include this; questionable value to casual users and requires significant complication
// Only enable CreateToken button if all form entries are valid
let tokenGenesisDataIsValid =
newTokenNameIsValid &&
newTokenTickerIsValid &&
newTokenDecimalsIsValid &&
newTokenInitialQtyIsValid &&
newTokenDocumentUrlIsValid;
// Modal settings
const [showConfirmCreateToken, setShowConfirmCreateToken] = useState(false);
const createPreviewedToken = async () => {
passLoadingStatus(true);
// If data is for some reason not valid here, bail out
if (!tokenGenesisDataIsValid) {
return;
}
// data must be valid and user reviewed to get here
const configObj = {
name: newTokenName,
ticker: newTokenTicker,
documentUrl:
newTokenDocumentUrl === ''
? 'https://cashtabapp.com/'
: newTokenDocumentUrl,
decimals: newTokenDecimals,
initialQty: newTokenInitialQty,
documentHash: '',
};
// create token with data in state fields
try {
const link = await createToken(
BCH,
wallet,
currency.defaultFee,
configObj,
);
notification.success({
message: 'Success',
description: (
Token created! Click to view in block explorer.
),
icon: ,
style: { width: '100%' },
});
} 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);
}
// Hide the modal
setShowConfirmCreateToken(false);
// Stop spinner
passLoadingStatus(false);
};
return (
<>
setShowConfirmCreateToken(false)}
>
Name: {newTokenName}
Ticker: {newTokenTicker}
Decimals: {newTokenDecimals}
Supply: {newTokenInitialQty}
Document URL:{' '}
{newTokenDocumentUrl === ''
? 'https://cashtabapp.com/'
: newTokenDocumentUrl}
<>
setShowConfirmCreateToken(true)}
disabled={!tokenGenesisDataIsValid}
>
Create Token
);
};
/*
passLoadingStatus must receive a default prop that is a function
in order to pass the rendering unit test in CreateTokenForm.test.js
status => {console.log(status)} is an arbitrary stub function
*/
CreateTokenForm.defaultProps = {
passLoadingStatus: status => {
console.log(status);
},
};
+CreateTokenForm.propTypes = {
+ BCH: PropTypes.object,
+ getRestUrl: PropTypes.func,
+ createToken: PropTypes.func,
+ disabled: PropTypes.bool,
+ passLoadingStatus: PropTypes.func,
+};
+
export default CreateTokenForm;
diff --git a/web/cashtab/src/components/Tokens/Tokens.js b/web/cashtab/src/components/Tokens/Tokens.js
index da475e8a1..a8ba9a6b2 100644
--- a/web/cashtab/src/components/Tokens/Tokens.js
+++ b/web/cashtab/src/components/Tokens/Tokens.js
@@ -1,120 +1,126 @@
import React from 'react';
+import PropTypes from 'prop-types';
import { WalletContext } from '@utils/context';
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 BalanceHeader from '@components/Common/BalanceHeader';
+import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat';
import { ZeroBalanceHeader, AlertMsg } from '@components/Common/Atoms';
-import { ApiError } from '@components/Common/ApiError';
+import ApiError from '@components/Common/ApiError';
const Tokens = ({ jestBCH, passLoadingStatus }) => {
/*
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 { 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 (
<>
{!balances.totalBalance ? (
<>
You need some {currency.ticker} in your wallet to create
tokens.
) : (
<>
{fiatPrice !== null && !isNaN(balances.totalBalance) && (
)}
)}
{apiError && }
{balances.totalBalanceInSatoshis < currency.dustSats && (
You need at least{' '}
{fromSmallestDenomination(currency.dustSats).toString()}{' '}
{currency.ticker} (
{cashtabSettings
? `${
currency.fiatCurrencies[
cashtabSettings.fiatCurrency
].symbol
} `
: '$ '}
{(
fromSmallestDenomination(currency.dustSats).toString() *
fiatPrice
).toFixed(4)}{' '}
{cashtabSettings
? `${currency.fiatCurrencies[
cashtabSettings.fiatCurrency
].slug.toUpperCase()} `
: 'USD'}
) to create a token
)}
{tokens && tokens.length > 0 ? (
<>
) : (
<>No {currency.tokenTicker} tokens in this wallet
)}
);
};
/*
passLoadingStatus must receive a default prop that is a function
in order to pass the rendering unit test in Tokens.test.js
status => {console.log(status)} is an arbitrary stub function
*/
Tokens.defaultProps = {
passLoadingStatus: status => {
console.log(status);
},
};
+Tokens.propTypes = {
+ jestBCH: PropTypes.object,
+ passLoadingStatus: PropTypes.func,
+};
+
export default Tokens;
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js
index 3c1388ef6..d26672f66 100644
--- a/web/cashtab/src/components/Wallet/TokenList.js
+++ b/web/cashtab/src/components/Wallet/TokenList.js
@@ -1,22 +1,27 @@
import React from 'react';
+import PropTypes from 'prop-types';
import TokenListItem from './TokenListItem';
import { Link } from 'react-router-dom';
import { formatBalance } from '@utils/cashMethods';
const TokenList = ({ tokens }) => {
return (
}
/>
) : (
}
/>
) : (