Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Tokens/Tokens.js
import React from 'react'; | import React from 'react'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { WalletContext } from '@utils/context'; | import { WalletContext } from '@utils/context'; | ||||
import { fromSmallestDenomination, getWalletState } from '@utils/cashMethods'; | import { fromSmallestDenomination, getWalletState } from '@utils/cashMethods'; | ||||
import TokenIconAlert from '@components/Common/Alerts.js'; | |||||
import CreateTokenForm from '@components/Tokens/CreateTokenForm'; | import CreateTokenForm from '@components/Tokens/CreateTokenForm'; | ||||
import { currency } from '@components/Common/Ticker.js'; | import { currency } from '@components/Common/Ticker.js'; | ||||
import TokenList from '@components/Wallet/TokenList'; | |||||
import useBCH from '@hooks/useBCH'; | import useBCH from '@hooks/useBCH'; | ||||
import BalanceHeader from '@components/Common/BalanceHeader'; | import BalanceHeader from '@components/Common/BalanceHeader'; | ||||
import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat'; | import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat'; | ||||
import { ZeroBalanceHeader, AlertMsg } from '@components/Common/Atoms'; | import { | ||||
AlertMsg, | |||||
WalletInfoCtn, | |||||
SidePaddingCtn, | |||||
} from '@components/Common/Atoms'; | |||||
import ApiError from '@components/Common/ApiError'; | import ApiError from '@components/Common/ApiError'; | ||||
import WalletLabel from '@components/Common/WalletLabel.js'; | |||||
const Tokens = ({ jestBCH, passLoadingStatus }) => { | const Tokens = ({ jestBCH, passLoadingStatus }) => { | ||||
/* | /* | ||||
Dev note | Dev note | ||||
This is the first new page created after the wallet migration to include state in storage | 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 | 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 | 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) | their wallet has updated (ETA within 10 seconds) | ||||
Going forward, this approach will be the model for Wallet, Send, and SendToken, as the legacy | 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 | wallet state parameters not stored in the wallet object are deprecated | ||||
*/ | */ | ||||
const { wallet, apiError, fiatPrice, cashtabSettings } = | const { wallet, apiError, fiatPrice, cashtabSettings } = | ||||
React.useContext(WalletContext); | React.useContext(WalletContext); | ||||
const walletState = getWalletState(wallet); | const walletState = getWalletState(wallet); | ||||
const { balances, tokens } = walletState; | const { balances } = walletState; | ||||
const { getBCH, getRestUrl, createToken } = useBCH(); | const { getBCH, getRestUrl, createToken } = useBCH(); | ||||
// Support using locally installed bchjs for unit tests | // Support using locally installed bchjs for unit tests | ||||
const BCH = jestBCH ? jestBCH : getBCH(); | const BCH = jestBCH ? jestBCH : getBCH(); | ||||
return ( | return ( | ||||
<> | <> | ||||
{!balances.totalBalance ? ( | <WalletInfoCtn> | ||||
<> | <WalletLabel name={wallet.name}></WalletLabel> | ||||
<ZeroBalanceHeader> | |||||
You need some {currency.ticker} in your wallet to create | |||||
tokens. | |||||
</ZeroBalanceHeader> | |||||
<BalanceHeader balance={0} ticker={currency.ticker} /> | |||||
</> | |||||
) : ( | |||||
<> | |||||
<BalanceHeader | <BalanceHeader | ||||
balance={balances.totalBalance} | balance={balances.totalBalance} | ||||
ticker={currency.ticker} | ticker={currency.ticker} | ||||
/> | /> | ||||
{fiatPrice !== null && !isNaN(balances.totalBalance) && ( | |||||
<BalanceHeaderFiat | <BalanceHeaderFiat | ||||
balance={balances.totalBalance} | balance={balances.totalBalance} | ||||
settings={cashtabSettings} | settings={cashtabSettings} | ||||
fiatPrice={fiatPrice} | fiatPrice={fiatPrice} | ||||
/> | /> | ||||
)} | </WalletInfoCtn> | ||||
</> | <SidePaddingCtn> | ||||
)} | |||||
<TokenIconAlert /> | |||||
{apiError && <ApiError />} | {apiError && <ApiError />} | ||||
<CreateTokenForm | <CreateTokenForm | ||||
BCH={BCH} | BCH={BCH} | ||||
getRestUrl={getRestUrl} | getRestUrl={getRestUrl} | ||||
createToken={createToken} | createToken={createToken} | ||||
disabled={balances.totalBalanceInSatoshis < currency.dustSats} | disabled={ | ||||
balances.totalBalanceInSatoshis < currency.dustSats | |||||
} | |||||
passLoadingStatus={passLoadingStatus} | passLoadingStatus={passLoadingStatus} | ||||
/> | /> | ||||
{balances.totalBalanceInSatoshis < currency.dustSats && ( | {balances.totalBalanceInSatoshis < currency.dustSats && ( | ||||
<AlertMsg> | <AlertMsg> | ||||
You need at least{' '} | You need at least{' '} | ||||
{fromSmallestDenomination(currency.dustSats).toString()}{' '} | {fromSmallestDenomination(currency.dustSats).toString()}{' '} | ||||
{currency.ticker} ( | {currency.ticker} ( | ||||
{cashtabSettings | {cashtabSettings | ||||
? `${ | ? `${ | ||||
currency.fiatCurrencies[ | currency.fiatCurrencies[ | ||||
cashtabSettings.fiatCurrency | cashtabSettings.fiatCurrency | ||||
].symbol | ].symbol | ||||
}` | }` | ||||
: '$'} | : '$'} | ||||
{( | {( | ||||
fromSmallestDenomination(currency.dustSats).toString() * | fromSmallestDenomination( | ||||
fiatPrice | currency.dustSats, | ||||
).toString() * fiatPrice | |||||
).toFixed(4)}{' '} | ).toFixed(4)}{' '} | ||||
{cashtabSettings | {cashtabSettings | ||||
? `${currency.fiatCurrencies[ | ? `${currency.fiatCurrencies[ | ||||
cashtabSettings.fiatCurrency | cashtabSettings.fiatCurrency | ||||
].slug.toUpperCase()}` | ].slug.toUpperCase()}` | ||||
: 'USD'} | : 'USD'} | ||||
) to create a token | ) to create a token | ||||
</AlertMsg> | </AlertMsg> | ||||
)} | )} | ||||
</SidePaddingCtn> | |||||
{tokens && tokens.length > 0 ? ( | |||||
<> | |||||
<TokenList tokens={tokens} /> | |||||
</> | |||||
) : ( | |||||
<>No {currency.tokenTicker} tokens in this wallet</> | |||||
)} | |||||
</> | </> | ||||
); | ); | ||||
}; | }; | ||||
/* | /* | ||||
passLoadingStatus must receive a default prop that is a function | passLoadingStatus must receive a default prop that is a function | ||||
in order to pass the rendering unit test in Tokens.test.js | in order to pass the rendering unit test in Tokens.test.js | ||||
Show All 15 Lines |