Differential D9091 Diff 27460 web/cashtab-components/src/components/CashtabBadge/CashtabBadge.tsx

Changeset View

Standalone View

web/cashtab-components/src/components/CashtabBadge/CashtabBadge.tsx

This file was added.

				import * as React from 'react';
				import styled, { css } from 'styled-components';

				import {
				getCurrencyPreSymbol,
				formatPriceDisplay,
				formatAmount,
				} from '../../utils/cashtab-helpers';

				import CashtabBase from '../../hoc/CashtabBase';

				import type { ButtonStates, CashtabBaseProps } from '../../hoc/CashtabBase';

				import colors from '../../styles/colors';

				import PriceDisplay from '../PriceDisplay';

				import Button from '../../atoms/Button';
				import ButtonQR from '../../atoms/ButtonQR';
				import Small from '../../atoms/Small';
				import Text from '../../atoms/Text';
				import H3 from '../../atoms/H3';

				const Outer = styled.div`
				display: grid;
				grid-template-columns: max-content;
				`;

				const Main = styled('div')<{ showBorder?: boolean }>`
				font-family: sans-serif;
				display: grid;
				grid-gap: 12px;
				padding: 12px 12px 6px;

				${props =>
				props.showBorder &&
				css`
				border: 1px dashed ${colors.brand500};
				border-radius: 4px;
				`}
				`;

				const Prices = styled.div`
				display: grid;
				/* grid-template-columns: max-content max-content; */
				grid-gap: 5px;
				align-items: end;
				justify-content: end;
				`;

				const ButtonContainer = styled.div`
				min-height: 40px;
				display: grid;
				grid-gap: 7px;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				`;

				const BrandBottom = styled.div`
				display: flex;
				justify-content: flex-end;
				`;

				const A = styled.a`
				color: ${colors.fg500};
				text-decoration: none;
				&:hover {
				color: ${colors.brand500};
				}
				`;

				// Cashtab Badge Props
				type CashtabBadgeProps = CashtabBaseProps & {
				text?: string;
				tag?: string;
				step: ButtonStates;

				showAmount?: boolean;
				coinSymbol: string;
				coinName: string;
				coinAmount: number;
				coinDecimals?: number;

				showBrand?: boolean;
				showQR?: boolean;
				showBorder?: boolean;

				handleClick: Function;
				};

				class CashtabBadge extends React.PureComponent<CashtabBadgeProps> {
				static defaultProps = {
				currency: 'USD',
				tag: 'CashTab Pay',
				text: 'Payment Total',
				showAmount: true,
				showBrand: false,
				showQR: true,
				showBorder: false,
				};

				render() {
				const {
				to,
				step,
				handleClick,

				currency,
				price,

				coinType,
				coinSymbol,
				coinName,
				coinDecimals,
				amount,

				text,
				tag,

				showAmount,
				showQR,

				showBorder,
				showBrand,
				} = this.props;

				// Case 1: no bip70 invoice
				let displayedPriceInfo = (
				<Prices>
				{price !== undefined && (
				<PriceDisplay
				preSymbol={getCurrencyPreSymbol(currency)}
				price={formatPriceDisplay(price)}
				symbol={currency}
				/>
				)}
				{showAmount && (
				<PriceDisplay
				coinType={coinType}
				price={formatAmount(amount, coinDecimals)}
				symbol={coinSymbol}
				name={coinName}
				/>
				)}
				</Prices>
				);

				return (
				<Outer>
				<Main showBorder={showBorder}>
				<H3>{text}</H3>
				{displayedPriceInfo}

				<ButtonContainer>
				{showQR ? (
				<ButtonQR
				onClick={handleClick}
				step={step}
				amountSatoshis={amount}
				toAddress={to}
				>
				<Text>{tag}</Text>
				</ButtonQR>
				) : (
				<Button onClick={handleClick} step={step}>
				<Text>{tag}</Text>
				</Button>
				)}

				{(step === 'install' \|\| showBrand) && (
				<BrandBottom>
				<Small>
				<A
				href="https://bitcoinabc.org/"
				target="_blank"
				>
				What is Cashtab
				</A>
				</Small>
				</BrandBottom>
				)}
				</ButtonContainer>
				</Main>
				</Outer>
				);
				}
				}
				export type { CashtabBadgeProps };
				export default CashtabBase(CashtabBadge);