Differential D10430 Diff 30778 web/cashtab/src/components/Tokens/Tokens.js

Changeset 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 CreateTokenForm from '@components/Tokens/CreateTokenForm';		import CreateTokenForm from '@components/Tokens/CreateTokenForm';
		import CreateGroupNftForm from '@components/Tokens/CreateGroupNftForm';
		import CreateChildNftForm from '@components/Tokens/CreateChildNftForm';
import { currency } from '@components/Common/Ticker.js';		import { currency } from '@components/Common/Ticker.js';
import TokenList from '@components/Wallet/TokenList';		import TokenList from '@components/Wallet/TokenList';
		import GroupNFTList from '@components/Wallet/GroupNFTList';
		import ChildNFTList from '@components/Wallet/ChildNFTList';
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 { ZeroBalanceHeader, AlertMsg } from '@components/Common/Atoms';
import ApiError from '@components/Common/ApiError';		import ApiError from '@components/Common/ApiError';
		import styled from 'styled-components';

		const NftSpacer = styled.div`
		height: 1px;
		width: 100%;
		background-color: ${props => props.theme.wallet.borders.color};
		margin: 60px 0 50px;
		`;

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, tokens } = walletState;

const { getBCH, getRestUrl, createToken } = useBCH();		const { getBCH, getRestUrl, createToken, createGroupNFT, createChildNFT } =
		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 ? (		{!balances.totalBalance ? (
<>		<>
<ZeroBalanceHeader>		<ZeroBalanceHeader>
Show All 20 Lines	return (
{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}
/>		/>

		<CreateGroupNftForm
		BCH={BCH}
		getRestUrl={getRestUrl}
		createToken={createGroupNFT}
		disabled={balances.totalBalanceInSatoshis < currency.dustSats}
		passLoadingStatus={passLoadingStatus}
		/>

		<CreateChildNftForm
		BCH={BCH}
		getRestUrl={getRestUrl}
		createToken={createChildNFT}
		disabled={balances.totalBalanceInSatoshis < currency.dustSats}
		passLoadingStatus={passLoadingStatus}
		/>

		<NftSpacer>eTokens</NftSpacer>

{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[
Show All 16 Lines	return (

{tokens && tokens.length > 0 ? (		{tokens && tokens.length > 0 ? (
<>		<>
<TokenList tokens={tokens} />		<TokenList tokens={tokens} />
</>		</>
) : (		) : (
<>No {currency.tokenTicker} tokens in this wallet</>		<>No {currency.tokenTicker} tokens in this wallet</>
)}		)}

		<NftSpacer>Group NFTs</NftSpacer>

		{balances.totalBalanceInSatoshis < currency.dustSats && (
		<AlertMsg>
		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 Group NFT
		</AlertMsg>
		)}
		{tokens && tokens.length > 0 ? (
		<>
		<GroupNFTList tokens={tokens} />
		</>
		) : (
		<>No {currency.tokenTicker} tokens in this wallet</>
		)}

		<NftSpacer>Child NFTs</NftSpacer>
		{balances.totalBalanceInSatoshis < currency.dustSats && (
		<AlertMsg>
		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 Child NFT
		</AlertMsg>
		)}
		{tokens && tokens.length > 0 ? (
		<>
		<ChildNFTList 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