Differential D15784 Diff 46588 cashtab/src/components/Etokens/Etokens.js

Changeset View

Standalone View

cashtab/src/components/Etokens/Etokens.js

// Copyright (c) 2024 The Bitcoin developers		// Copyright (c) 2024 The Bitcoin developers
// Distributed under the MIT software license, see the accompanying		// Distributed under the MIT software license, see the accompanying
// file COPYING or http://www.opensource.org/licenses/mit-license.php.		// file COPYING or http://www.opensource.org/licenses/mit-license.php.

import React from 'react';		import React from 'react';
import styled from 'styled-components';		import styled from 'styled-components';
import { WalletContext } from 'wallet/context';		import { WalletContext } from 'wallet/context';
import { LoadingCtn, SidePaddingCtn } from 'components/Common/Atoms';		import { LoadingCtn, SidePaddingCtn } from 'components/Common/Atoms';
import { Link } from 'react-router-dom';		import { Link } from 'react-router-dom';
import TokenList from './TokenList';		import TokenList from './TokenList';
import { getWalletState } from 'utils/cashMethods';		import { getWalletState } from 'utils/cashMethods';
import appConfig from 'config/app';		import appConfig from 'config/app';
		import { getUserLocale } from 'helpers';

const EtokensCtn = styled.div`		const EtokensCtn = styled.div`
color: ${props => props.theme.contrast};		color: ${props => props.theme.contrast};
width: 100%;		width: 100%;
h2 {		h2 {
margin: 0 0 20px;		margin: 0 0 20px;
margin-top: 10px;		margin-top: 10px;
}		}
Show All 13 Lines	:hover {
border-color: ${props => props.theme.eCashPurple};		border-color: ${props => props.theme.eCashPurple};
color: ${props => props.theme.contrast};		color: ${props => props.theme.contrast};
}		}
`;		`;

const Etokens = () => {		const Etokens = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { loading, cashtabState } = ContextValue;		const { loading, cashtabState } = ContextValue;
const { wallets } = cashtabState;		const { wallets, cashtabCache } = cashtabState;
const wallet = wallets.length > 0 ? wallets[0] : false;		const wallet = wallets.length > 0 ? wallets[0] : false;
const walletState = getWalletState(wallet);		const walletState = getWalletState(wallet);
const { tokens } = walletState;		const { tokens } = walletState;
		const userLocale = getUserLocale(navigator);
return (		return (
<>		<>
{loading ? (		{loading ? (
<LoadingCtn />		<LoadingCtn />
) : (		) : (
<EtokensCtn data-testid="etokens-ctn">		<EtokensCtn data-testid="etokens-ctn">
<br />		<br />
<SidePaddingCtn>		<SidePaddingCtn>
<CreateToken		<CreateToken
to={{		to={{
pathname: `/create-token`,		pathname: `/create-token`,
}}		}}
>		>
Create eToken		Create eToken
</CreateToken>		</CreateToken>
{tokens && tokens.length > 0 ? (		{tokens && tokens.size > 0 ? (
<TokenList wallet={wallet} tokens={tokens} />		<TokenList
		tokens={tokens}
		tokenCache={cashtabCache.tokens}
		userLocale={userLocale}
		/>
) : (		) : (
<p>		<p>
Tokens sent to your {appConfig.tokenTicker}{' '}		Tokens sent to your {appConfig.tokenTicker}{' '}
address will appear here		address will appear here
</p>		</p>
)}		)}
</SidePaddingCtn>		</SidePaddingCtn>
</EtokensCtn>		</EtokensCtn>
)}		)}
</>		</>
);		);
};		};

export default Etokens;		export default Etokens;