Differential D8587 Diff 26165 web/cashtab/src/components/Wallet/Wallet.js

Changeset View

Standalone View

web/cashtab/src/components/Wallet/Wallet.js

import React from 'react';		import React from 'react';
import styled from 'styled-components';		import styled from 'styled-components';
import { Icon } from 'antd';		import { Icon } from 'antd';
import { WalletContext } from '../../utils/context';		import { WalletContext } from '../../utils/context';
import { OnBoarding } from '../OnBoarding/OnBoarding';		import { OnBoarding } from '../OnBoarding/OnBoarding';
import { QRCode } from '../Common/QRCode';		import { QRCode } from '../Common/QRCode';
import { currency } from '../Common/Ticker.js';		import { currency } from '../Common/Ticker.js';
import { Link } from 'react-router-dom';		import { Link } from 'react-router-dom';
import TokenList from './TokenList';		import TokenList from './TokenList';
import { CashLoader } from '../Common/CustomIcons';		import { CashLoader } from '../Common/CustomIcons';
		import fbt from 'fbt';

export const LoadingCtn = styled.div`		export const LoadingCtn = styled.div`
width: 100%;		width: 100%;
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: center;		justify-content: center;
height: 400px;		height: 400px;
flex-direction: column;		flex-direction: column;
▲ Show 20 Lines • Show All 146 Lines • ▼ Show 20 Lines	const WalletInfo = () => {
return (		return (
<>		<>
{!balances.totalBalance && !apiError && !hasHistory ? (		{!balances.totalBalance && !apiError && !hasHistory ? (
<>		<>
<ZeroBalanceHeader>		<ZeroBalanceHeader>
<span role="img" aria-label="party emoji">		<span role="img" aria-label="party emoji">
🎉		🎉
</span>		</span>
Congratulations on your new wallet!{' '}		<fbt desc="Congratulatory message on new wallet creation">
		Congratulations on your new wallet!
		</fbt>{' '}
<span role="img" aria-label="party emoji">		<span role="img" aria-label="party emoji">
🎉		🎉
</span>		</span>
		deadalnixUnsubmitted Not Done Inline Actions You are assuming that a specific layout is appropriate for all locales. deadalnix: You are assuming that a specific layout is appropriate for all locales.
<br /> Start using the wallet immediately to receive{' '}		<br />
{currency.ticker} payments, or load it up with{' '}		{fbt(
{currency.ticker} to send to others		`Start using the wallet immediately to receive${' '}
		${fbt.param(
		'currency.ticker',
		currency.ticker,
		)} payments, or load it up with${' '}
		${fbt.sameParam(
		'currency.ticker',
		currency.ticker,
		)} to send to others`,
		'Welcome message with instructions on how to start using the wallet',
		)}
		deadalnixUnsubmitted Not Done Inline Actions This mix of JSX and functional style usage is rathr poor style. deadalnix: This mix of JSX and functional style usage is rathr poor style.
		alcipirAuthorUnsubmitted Not Done Inline Actions Yep, you're right. The <fbt:params> tag doesn't work with the linter (doesn't allow JSX namespaces, and there is no rule to allow it AFAIK) and disabling linting is not a good idea. However, I think I've come up with a better solution, will update shortly. alcipir: Yep, you're right. The <fbt:params> tag doesn't work with the linter (doesn't allow JSX…
</ZeroBalanceHeader>		</ZeroBalanceHeader>
<BalanceHeader>0 {currency.ticker}</BalanceHeader>		<BalanceHeader>0 {currency.ticker}</BalanceHeader>
</>		</>
) : (		) : (
<>		<>
<BalanceHeader>		<BalanceHeader>
{balances.totalBalance} {currency.ticker}		{balances.totalBalance} {currency.ticker}
</BalanceHeader>		</BalanceHeader>
{fiatPrice !== null && !isNaN(balances.totalBalance) && (		{fiatPrice !== null && !isNaN(balances.totalBalance) && (
<BalanceHeaderFiat>		<BalanceHeaderFiat>
${(balances.totalBalance * fiatPrice).toFixed(2)}{' '}		${(balances.totalBalance * fiatPrice).toFixed(2)}{' '}
USD		USD
</BalanceHeaderFiat>		</BalanceHeaderFiat>
)}		)}
</>		</>
)}		)}
{apiError && (		{apiError && (
<>		<>
<p style={{ color: 'red' }}>		<p style={{ color: 'red' }}>
<b>An error occured on our end.</b>		<b>
<br></br> Re-establishing connection...		<fbt desc="Error message when failing to communicate with API">
		An error occured on our end.
		</fbt>
		</b>
		<br></br>
		<fbt desc="Message when re-establishing connection to API">
		Re-establishing connection...
		</fbt>
</p>		</p>
<CashLoader />		<CashLoader />
</>		</>
)}		)}

<QRCode		<QRCode
id="borderedQRCode"		id="borderedQRCode"
address={		address={
Show All 24 Lines	return (
{balances.totalBalance ? (		{balances.totalBalance ? (
<>		<>
<Links to="/send">Send</Links>		<Links to="/send">Send</Links>
<ExternalLink		<ExternalLink
href={`${currency.blockExplorerUrl}/address/${wallet.Path145.cashAddress}`}		href={`${currency.blockExplorerUrl}/address/${wallet.Path145.cashAddress}`}
target="_blank"		target="_blank"
rel="noopener noreferrer"		rel="noopener noreferrer"
>		>
<Icon type="link" theme="outlined" /> View Transactions		<Icon type="link" theme="outlined" />
		<fbt desc="External link to explorer to check transactions">
		View Transactions
		</fbt>
</ExternalLink>		</ExternalLink>
</>		</>
) : null}		) : null}
</>		</>
);		);
};		};

const Wallet = () => {		const Wallet = () => {
Show All 20 Lines