Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/Header/index.tsx

Changeset View

Standalone View

View Options

cashtab/src/components/Header/index.tsx

// 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, { useContext } from 'react'; import React, { useContext } from 'react';
import { WalletContext, isWalletContextLoaded } from 'wallet/context'; import { WalletContext, isWalletContextLoaded } from 'wallet/context';
import WalletHeaderActions from 'components/Common/WalletHeaderActions'; import WalletHeaderActions from 'components/Common/WalletHeaderActions';
import { supportedFiatCurrencies } from 'config/CashtabSettings'; import { supportedFiatCurrencies } from 'config/CashtabSettings';
import { getUserLocale } from 'helpers'; import { getUserLocale } from 'helpers';
import appConfig from 'config/app'; import appConfig from 'config/app';
import Cashtab from 'assets/cashtab_xec.png';
import PopOut from 'assets/popout.png'; import PopOut from 'assets/popout.png';
import { toXec } from 'wallet'; import { toXec } from 'wallet';
import { FIRMA } from 'constants/tokens'; import { FIRMA } from 'constants/tokens';
import Ecash from 'assets/ecash.png'; import { ReactComponent as EcashIcon } from 'assets/ecash-icon.svg';
import Staking from 'assets/staking.png'; import { ReactComponent as StakeIcon } from 'assets/stake.svg';
import Savings from 'assets/savings.png'; import { ReactComponent as SavingsIcon } from 'assets/dollar-sign.svg';
import { sortWalletsForDisplay } from 'wallet'; import { sortWalletsForDisplay } from 'wallet';
import { import {
HeaderCtn, HeaderCtn,
WalletDropdown, WalletDropdown,
WalletSelectCtn, WalletSelectCtn,
Price, Price,
LabelCtn, LabelCtn,
MobilePrice,
MobileHeader,
ExtenstionButton, ExtenstionButton,
WalletOption, WalletOption,
BalanceXec, BalanceXec,
BalanceCard, BalanceCard,
BalanceRow, BalanceRow,
BalanceTitle, BalanceTitle,
BackgroundImage,
BalanceFiat, BalanceFiat,
CardWrapper, CardWrapper,
} from './styled'; } from './styled';
interface HeaderProps { interface HeaderProps {
path: string; path: string;
} }
▲ Show 20 Lines • Show All 109 Lines • ▼ Show 20 Lines const formattedXECXBalanceFiat = renderFiatValues
? formatFiat(balanceXecx, fiatPrice) ? formatFiat(balanceXecx, fiatPrice)
: undefined; : undefined;
const formattedFIRMABalanceFiat = const formattedFIRMABalanceFiat =
firmaPrice !== null ? formatFiat(balanceFirma, firmaPrice) : undefined; firmaPrice !== null ? formatFiat(balanceFirma, firmaPrice) : undefined;
type AssetBalanceCardProps = { type AssetBalanceCardProps = {
title: string; title: string;
logo: string; logo: React.ReactNode;
logoAlt: string; logoAlt: string;
tokenLabel: string; tokenLabel: string;
balanceAmount: string; balanceAmount: string;
fiatAmount: string | undefined; fiatAmount: string | undefined;
balanceVisible: boolean; balanceVisible: boolean;
}; };
const AssetBalanceCard = ({ const AssetBalanceCard = ({
title, title,
logo, logo,
logoAlt,
tokenLabel, tokenLabel,
balanceAmount, balanceAmount,
fiatAmount, fiatAmount,
balanceVisible, balanceVisible,
}: AssetBalanceCardProps) => { }: AssetBalanceCardProps) => {
return ( return (
<BalanceCard tokenLabel={tokenLabel}> <BalanceCard tokenLabel={tokenLabel}>
<BackgroundImage src={logo} alt={logoAlt} /> <BalanceTitle tokenLabel={tokenLabel}>
<BalanceTitle tokenLabel={tokenLabel}>{title}</BalanceTitle> {logo}
{title}
</BalanceTitle>
<BalanceRow <BalanceRow
title={`Balance ${tokenLabel}`} title={`Balance ${tokenLabel}`}
hideBalance={balanceVisible} hideBalance={balanceVisible}
tokenLabel={tokenLabel} tokenLabel={tokenLabel}
> >
{balanceAmount}{' '} {balanceAmount}{' '}
{tokenLabel === 'FIRMA' ? ( {tokenLabel === 'FIRMA' ? (
Show All 19 Lines const AssetBalanceCard = ({
</BalanceFiat> </BalanceFiat>
)} )}
</BalanceCard> </BalanceCard>
); );
}; };
return ( return (
<HeaderCtn title="Wallet Info"> <HeaderCtn title="Wallet Info">
<MobileHeader>
<img src={Cashtab} alt="cashtab" />
{renderFiatValues && (
<MobilePrice title="Price in Local Currency mobile">
1 {appConfig.ticker} = {formattedExchangeRate}{' '}
{settings.fiatCurrency.toUpperCase()}
</MobilePrice>
)}
</MobileHeader>
<LabelCtn> <LabelCtn>
{renderFiatValues ? ( {renderFiatValues ? (
<Price title="Price in Local Currency"> <Price title="Price in Local Currency">
1 {appConfig.ticker} = {formattedExchangeRate}{' '} 1 {appConfig.ticker} = {formattedExchangeRate}{' '}
{settings.fiatCurrency.toUpperCase()} {settings.fiatCurrency.toUpperCase()}
</Price> </Price>
) : ( ) : (
<div> <div>
Show All 29 Lines return (
))} ))}
</WalletDropdown> </WalletDropdown>
</WalletSelectCtn> </WalletSelectCtn>
</LabelCtn> </LabelCtn>
<CardWrapper> <CardWrapper>
<BalanceXec> <BalanceXec>
<AssetBalanceCard <AssetBalanceCard
title="eCash" title="eCash"
logo={Ecash} logo={<EcashIcon />}
logoAlt="eCash" logoAlt="eCash"
tokenLabel={appConfig.ticker} tokenLabel={appConfig.ticker}
balanceAmount={formattedBalanceXec} balanceAmount={formattedBalanceXec}
fiatAmount={formattedXECBalanceFiat} fiatAmount={formattedXECBalanceFiat}
balanceVisible={settings.balanceVisible === false} balanceVisible={settings.balanceVisible === false}
/> />
<AssetBalanceCard <AssetBalanceCard
title="Staking" title="Staked"
logo={Staking} logo={<StakeIcon />}
logoAlt="eCash Staking" logoAlt="eCash Staking"
tokenLabel="XECX" tokenLabel="XECX"
balanceAmount={formattedBalanceXecx} balanceAmount={formattedBalanceXecx}
fiatAmount={formattedXECXBalanceFiat} fiatAmount={formattedXECXBalanceFiat}
balanceVisible={settings.balanceVisible === false} balanceVisible={settings.balanceVisible === false}
/> />
<AssetBalanceCard <AssetBalanceCard
title="Savings" title="USD"
logo={Savings} logo={<SavingsIcon />}
logoAlt="Savings" logoAlt="Savings"
tokenLabel="FIRMA" tokenLabel="FIRMA"
balanceAmount={formattedBalanceFirma} balanceAmount={formattedBalanceFirma}
fiatAmount={formattedFIRMABalanceFiat} fiatAmount={formattedFIRMABalanceFiat}
balanceVisible={settings.balanceVisible === false} balanceVisible={settings.balanceVisible === false}
/> />
</BalanceXec> </BalanceXec>
</CardWrapper> </CardWrapper>
</HeaderCtn> </HeaderCtn>
); );
}; };
export default Header; export default Header;