diff --git a/web/cashtab/src/components/Tokens/Tokens.js b/web/cashtab/src/components/Tokens/Tokens.js index 4d224aa11..309c02eca 100644 --- a/web/cashtab/src/components/Tokens/Tokens.js +++ b/web/cashtab/src/components/Tokens/Tokens.js @@ -1,159 +1,171 @@ import React from 'react'; import { LoadingOutlined } from '@ant-design/icons'; import { CashLoader } from '@components/Common/CustomIcons'; import { WalletContext } from '@utils/context'; import { formatBalance, isValidStoredWallet, fromSmallestDenomination, } 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 { LoadingCtn, BalanceHeader, BalanceHeaderFiat, 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 { 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. 0 {currency.ticker} ) : ( <> {formatBalance(balances.totalBalance)}{' '} {currency.ticker} {fiatPrice !== null && !isNaN(balances.totalBalance) && ( {cashtabSettings ? `${ currency.fiatCurrencies[ cashtabSettings .fiatCurrency ].symbol } ` : '$ '} {( balances.totalBalance * fiatPrice ).toFixed(2)}{' '} {cashtabSettings ? `${currency.fiatCurrencies[ cashtabSettings.fiatCurrency ].slug.toUpperCase()} ` : 'USD'} )} )} {apiError && ( <>

An error occurred on our end.

Re-establishing connection...

)} {balances.totalBalanceInSatoshis < currency.dustSats && ( You need at least{' '} {fromSmallestDenomination( currency.dustSats, ).toString()}{' '} - {currency.ticker} ($ + {currency.ticker} ( + {cashtabSettings + ? `${ + currency.fiatCurrencies[ + cashtabSettings.fiatCurrency + ].symbol + } ` + : '$ '} {( fromSmallestDenomination( currency.dustSats, ).toString() * fiatPrice ).toFixed(4)}{' '} - USD) to create a token + {cashtabSettings + ? `${currency.fiatCurrencies[ + cashtabSettings.fiatCurrency + ].slug.toUpperCase()} ` + : 'USD'} + ) to create a token )} {tokens && tokens.length > 0 ? ( <> ) : ( <>No {currency.tokenTicker} tokens in this wallet )} )} ); }; export default Tokens;