Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab-components/src/components/CashtabButton/CashtabButton.tsx
- This file was added.
import * as React from 'react'; | |||||
import styled from 'styled-components'; | |||||
import { | |||||
getCurrencyPreSymbol, | |||||
formatPriceDisplay, | |||||
formatAmount, | |||||
} from '../../utils/cashtab-helpers'; | |||||
import colors from '../../styles/colors'; | |||||
import CashtabBase from '../../hoc/CashtabBase'; | |||||
import type { ButtonStates, CashtabBaseProps } from '../../hoc/CashtabBase'; | |||||
import PriceDisplay from '../PriceDisplay'; | |||||
import Button from '../../atoms/Button'; | |||||
import ButtonQR from '../../atoms/ButtonQR'; | |||||
import Small from '../../atoms/Small'; | |||||
import Text from '../../atoms/Text'; | |||||
const Outer = styled.div` | |||||
display: grid; | |||||
grid-template-columns: max-content; | |||||
`; | |||||
const Wrapper = styled('div')<{ hasBorder?: boolean }>` | |||||
display: grid; | |||||
grid-gap: 5px; | |||||
font-family: sans-serif; | |||||
grid-template-columns: max-content; | |||||
grid-template-rows: max-content max-content max-content; | |||||
color: ${colors.fg500}; | |||||
padding: 6px; | |||||
border: ${props => | |||||
props.hasBorder ? `1px dashed ${colors.brand700}` : 'none'}; | |||||
border-radius: 4px; | |||||
`; | |||||
// Cashtab Button Props | |||||
type CashtabButtonProps = CashtabBaseProps & { | |||||
text?: string; | |||||
showAmount?: boolean; | |||||
showBorder?: boolean; | |||||
showQR?: boolean; | |||||
coinSymbol: string; | |||||
coinDecimals?: number; | |||||
coinName?: string; | |||||
handleClick: Function; | |||||
step: ButtonStates; | |||||
}; | |||||
class CashtabButton extends React.PureComponent<CashtabButtonProps> { | |||||
static defaultProps = { | |||||
showAmount: true, | |||||
showBorder: false, | |||||
}; | |||||
render() { | |||||
const { | |||||
to, | |||||
step, | |||||
handleClick, | |||||
currency, | |||||
price, | |||||
coinType, | |||||
coinSymbol, | |||||
coinDecimals, | |||||
coinName, | |||||
amount, | |||||
showAmount, | |||||
text, | |||||
showBorder, | |||||
showQR, | |||||
} = this.props; | |||||
// buttonPriceDisplay if no price, or if a bip70 invoice is set from a server without supported websocket updates | |||||
let buttonPriceDisplay = <Text>Cashtab Pay</Text>; | |||||
// buttonPriceDisplay of price set in props and no invoice is set | |||||
if (price) { | |||||
buttonPriceDisplay = ( | |||||
<Text> | |||||
{getCurrencyPreSymbol(currency)} {formatPriceDisplay(price)} | |||||
<Small> {currency}</Small> | |||||
</Text> | |||||
); | |||||
} | |||||
let determinedShowAmount = ( | |||||
<PriceDisplay | |||||
coinType={coinType} | |||||
price={formatAmount(amount, coinDecimals)} | |||||
symbol={coinSymbol} | |||||
name={coinName} | |||||
/> | |||||
); | |||||
if (!showAmount) { | |||||
determinedShowAmount = <React.Fragment></React.Fragment>; | |||||
} | |||||
return ( | |||||
<Outer> | |||||
<Wrapper hasBorder={showBorder}> | |||||
<Text style={{ textAlign: 'center' }}>{text}</Text> | |||||
{showQR ? ( | |||||
<ButtonQR | |||||
amountSatoshis={amount} | |||||
toAddress={to} | |||||
onClick={handleClick} | |||||
step={step} | |||||
> | |||||
{buttonPriceDisplay} | |||||
</ButtonQR> | |||||
) : ( | |||||
<Button onClick={handleClick} step={step}> | |||||
{buttonPriceDisplay} | |||||
</Button> | |||||
)} | |||||
{determinedShowAmount} | |||||
</Wrapper> | |||||
</Outer> | |||||
); | |||||
} | |||||
} | |||||
export type { CashtabButtonProps }; | |||||
export default CashtabBase(CashtabButton); |