import { TBityOrderCreateRequestedSwap, TChangeStepSwap, TDestinationAddressSwap, TShapeshiftOrderCreateRequestedSwap, TStopLoadBityRatesSwap } from 'actions/swap'; import { SwapInput } from 'reducers/swap/types'; import SimpleButton from 'components/ui/SimpleButton'; import { donationAddressMap } from 'config'; import { isValidBTCAddress, isValidETHAddress } from 'libs/validators'; import React, { PureComponent } from 'react'; import translate from 'translations'; import { combineAndUpper } from 'utils/formatters'; import './ReceivingAddress.scss'; import { Input } from 'components/ui'; export interface StateProps { origin: SwapInput; destinationId: keyof typeof donationAddressMap; isPostingOrder: boolean; destinationAddress: string; destinationKind: number; provider: string; } export interface ActionProps { destinationAddressSwap: TDestinationAddressSwap; changeStepSwap: TChangeStepSwap; stopLoadBityRatesSwap: TStopLoadBityRatesSwap; bityOrderCreateRequestedSwap: TBityOrderCreateRequestedSwap; shapeshiftOrderCreateRequestedSwap: TShapeshiftOrderCreateRequestedSwap; } export default class ReceivingAddress extends PureComponent<StateProps & ActionProps, {}> { public onChangeDestinationAddress = (event: React.FormEvent<HTMLInputElement>) => { const value = event.currentTarget.value; this.props.destinationAddressSwap(value); }; public onClickPartTwoComplete = () => { const { origin, destinationId, destinationAddress, destinationKind, provider } = this.props; if (!origin) { return; } if (provider === 'shapeshift') { this.props.shapeshiftOrderCreateRequestedSwap( destinationAddress, origin.label, destinationId, destinationKind ); } else { this.props.bityOrderCreateRequestedSwap( origin.amount as number, this.props.destinationAddress, combineAndUpper(origin.label, destinationId) ); } }; public render() { const { destinationId, destinationAddress, isPostingOrder } = this.props; let validAddress; // TODO - find better pattern here once currencies move beyond BTC, ETH, REP if (destinationId === 'BTC') { validAddress = isValidBTCAddress(destinationAddress); } else { validAddress = isValidETHAddress(destinationAddress); } return ( <section className="SwapAddress block"> <section className="row"> <div className="col-sm-8 col-sm-offset-2 col-xs-12"> <label className="SwapAddress-address"> <h4 className="SwapAddress-address-label"> {translate('SWAP_rec_add')} ({destinationId}) </h4> <Input className={`SwapAddress-address-input ${!validAddress ? 'invalid' : ''}`} type="text" value={destinationAddress} onChange={this.onChangeDestinationAddress} placeholder={ destinationId === 'BTC' ? donationAddressMap[destinationId] : donationAddressMap.ETH } /> </label> </div> </section> <section className="SwapAddress-submit row"> <SimpleButton text={translate('SWAP_start_CTA')} onClick={this.onClickPartTwoComplete} disabled={!validAddress} loading={isPostingOrder} /> </section> </section> ); } }