Changeset View
Changeset View
Standalone 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); |