text: // @flow
  
  import React, { PureComponent } from 'react';
  import styled, { withTheme, keyframes } from 'styled-components';
  import { BigNumber } from 'bignumber.js';
  import { Transition, animated } from 'react-spring';
  import { type Match } from 'react-router-dom';
  
  import { FEES } from '../constants/fees';
  import { DARK } from '../constants/themes';
  import { NODE_SYNC_TYPES } from '../constants/node-sync-types';
  
  import { InputLabelComponent } from '../components/input-label';
  import { InputComponent } from '../components/input';
  import { TextComponent } from '../components/text';
  import { SelectComponent } from '../components/select';
  import { RowComponent } from '../components/row';
  import { ColumnComponent } from '../components/column';
  import { Divider } from '../components/divider';
  import { Button } from '../components/button';
  import { ConfirmDialogComponent } from '../components/confirm-dialog';
  
  import { formatNumber } from '../utils/format-number';
  import { ascii2hex } from '../utils/ascii-to-hexadecimal';
  import { isHex } from '../utils/is-hex';
  import { getCoinName } from '../utils/get-coin-name';
  
  import SentIcon from '../assets/images/transaction_sent_icon_dark.svg';
  import MenuIconDark from '../assets/images/menu_icon_dark.svg';
  import MenuIconLight from '../assets/images/menu_icon_light.svg';
  import ValidIcon from '../assets/images/green_check_dark.png';
  import InvalidIcon from '../assets/images/error_icon_dark.png';
  import LoadingIconDark from '../assets/images/sync_icon_dark.png';
  import LoadingIconLight from '../assets/images/sync_icon_light.png';
  import ArrowUpIconDark from '../assets/images/arrow_up_dark.png';
  import ArrowUpIconLight from '../assets/images/arrow_up_light.png';
  
  import type { MapDispatchToProps, MapStateToProps } from '../containers/send';
  
  const rotate = keyframes`
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  `;
  
  const FormWrapper = styled.div`
    width: 71%;
  `;
  
  const SendWrapper = styled(ColumnComponent)`
    width: 25%;
    margin-top: 42px;
  `;
  
  const Label = styled(InputLabelComponent)`
    text-transform: uppercase;
    color: ${props => props.theme.colors.transactionsDate};
    font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
    font-weight: ${props => String(props.theme.fontWeight.bold)};
  `;
  
  type AmountProps =
    | {
        isEmpty: boolean,
      }
    | Object;
  const AmountWrapper = styled.div`
    width: 100%;
    position: relative;
  
    &:before {
      content: '${getCoinName()}';
      font-family: ${props => props.theme.fontFamily};
      position: absolute;
      margin-top: 16px;
      margin-left: 15px;
      display: block;
      transition: all 0.05s ease-in-out;
      opacity: ${(props: AmountProps) => (props.isEmpty ? '0' : '1')};
      color: ${props => props.theme.colors.text};
      z-index: 10;
    }
  `;
  
  const AmountInput = styled(InputComponent)`
    padding-left: ${(props: AmountProps) => (props.isEmpty ? '15' : '50')}px;
  `;
  
  const ShowFeeButton = styled.button`
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    color: ${props => props.theme.colors.text};
    outline: none;
    display: flex;
    align-items: center;
    opacity: 0.7;
  
    &:hover {
      opacity: 1;
    }
  `;
  
  const SeeMoreIcon = styled.img`
    width: 25px;
    height: 25px;
    border: 1px solid ${props => props.theme.colors.text};
    border-radius: 100%;
    margin-right: 11.5px;
  `;
  
  const FeeWrapper = styled.div`
    background-color: ${props => props.theme.colors.sendAdditionalOptionsBg};
    border: 1px solid ${props => props.theme.colors.sendAdditionalOptionsBorder};
    border-radius: ${props => props.theme.boxBorderRadius};
    padding: 0 20px 15px;
    margin-bottom: 20px;
  `;
  
  const InfoCard = styled.div`
    width: 100%;
    background-color: ${props => props.theme.colors.sendCardBg};
    border: 1px solid ${props => props.theme.colors.sendCardBorder}
    border-radius: ${props => props.theme.boxBorderRadius};
    margin-bottom: 10px;
  `;
  
  const InfoContent = styled.div`
    padding: 15px;
  `;
  
  const InfoCardLabel = styled(TextComponent)`
    opacity: 0.5;
    margin-bottom: 10px;
  `;
  
  const InfoCardSubLabel = styled(TextComponent)`
    opacity: 0.5;
    margin-top: -7px;
    margin-bottom: 10px;
    font-size: 9px;
  `;
  
  const InfoCardUSD = styled(TextComponent)`
    opacity: 0.5;
    margin-top: 2.5px;
  `;
  
  const FormButton = styled(Button)`
    width: 100%;
    margin: 5px 0;
  
    &:first-child {
      margin-top: 0;
    }
  `;
  
  const ModalContent = styled(ColumnComponent)`
    min-height: 400px;
    align-items: center;
    justify-content: center;
  
    p {
      word-break: break-word;
    }
  `;
  
  const ConfirmItemWrapper = styled(RowComponent)`
    padding: 22.5px 40px;
    width: 100%;
  `;
  
  type ItemLabelProps = {
    color: string,
  };
  /* eslint-disable max-len */
  const ItemLabel = styled(TextComponent)`
    font-weight: ${(props: PropsWithTheme<ItemLabelProps>) => String(props.theme.fontWeight.bold)};
    font-size: ${(props: PropsWithTheme<ItemLabelProps>) => String(props.theme.fontSize.small)};
    color: ${(props: PropsWithTheme<ItemLabelProps>) => props.color || props.theme.colors.modalItemLabel};
    margin-bottom: 3.5px;
  `;
  
  const ValidateItemLabel = styled(ItemLabel)`
    margin-bottom: -1px;
  `;
  
  const SendZECValue = styled(TextComponent)`
    color: ${props => props.theme.colors.transactionSent};
    font-size: ${props => `${props.theme.fontSize.large}em`};
    font-weight: ${props => String(props.theme.fontWeight.bold)};
  `;
  
  const SendUSDValue = styled(TextComponent)`
    opacity: 0.5;
    font-weight: ${props => String(props.theme.fontWeight.light)};
    font-size: ${props => `${props.theme.fontSize.medium}em`};
  `;
  
  const Icon = styled.img`
    width: 35px;
    height: 35px;
    margin-left: 15px;
  `;
  
  const ValidateStatusIcon = styled.img`
    width: 13px;
    height: 13px;
    margin-right: 7px;
  `;
  
  const RevealsMain = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  
    & > div {
      top: 0;
      right: 0;
      left: 0;
    }
  `;
  
  // $FlowFixMe
  const Checkbox = styled.input.attrs({
    type: 'checkbox',
  })`
    margin-right: 10px;
  `;
  
  const MaxAvailableAmount = styled.button`
    margin-top: -15px;
    margin-right: -15px;
    width: 45px;
    height: 48px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    border-left: 1px solid ${props => props.theme.colors.inputBorder};
    opacity: 0.8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  
    &:hover {
      opacity: 1;
    }
  `;
  
  const MaxAvailableAmountImg = styled.img`
    width: 20px;
    height: 20px;
  `;
  
  const ValidateWrapper = styled(RowComponent)`
    margin-top: 3px;
  `;
  
  const ActionsWrapper = styled(RowComponent)`
    padding: 30px 0;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  `;
  
  const HexadecimalWrapper = styled.div`
    display: flex;
    opacity: 0.7;
    cursor: pointer;
  
    &:hover {
      opacity: 1;s
    }
  `;
  
  const HexadecimalText = styled(TextComponent)`
    white-space: nowrap;
  `;
  
  const MemoValidationText = styled(TextComponent)`
    padding: 10px 5px;
    margin: 0px 0 8.5px 0;
    text-transform: uppercase;
    color: ${props => props.theme.colors.transactionSent};
    font-size: 10px;
    font-weight: 700;
  `;
  
  const SimpleTooltip = styled.div`
    background: ${props => props.theme.colors.walletAddressTooltipBg};
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    padding: 6px 10px;
    border-radius: ${props => props.theme.boxBorderRadius};
  `;
  
  const TooltipText = styled(TextComponent)`
    color: ${props => props.theme.colors.walletAddressTooltip};
    font-size: 10px;
    font-weight: 700;
    text-align: center;
  `;
  
  const SendButtonWrapper = styled.div`
    position: relative;
    width: 100%;
    display: flex;
  `;
  
  const ErrorWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 20px 40px;
  `;
  
  const ErrorLabel = styled(TextComponent)`
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 16px;
  `;
  
  const ErrorMessage = styled(TextComponent)`
    font-size: 14px;
    font-weight: 700;
    color: ${props => props.theme.colors.error};
    text-align: center;
    margin-bottom: 20px;
  `;
  
  const LoaderWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  `;
  
  const Loader = styled.img`
    width: 45px;
    height: 45px;
    animation: 2s linear infinite;
    animation-name: ${rotate};
    margin-bottom: 30px;
  `;
  
  const ZSuccessWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
  `;
  
  const ZSuccessContentWrapper = styled.div`
    padding: 0 0 40px 0;
  `;
  
  const ZSuccessLabel = styled(TextComponent)`
    color: ${props => props.theme.colors.success};
    font-weight: 700;
    font-size: 30px;
  `;
  
  const ZSuccessMessage = styled(TextComponent)`
    text-align: center;
    margin-bottom: 40px;
    margin-top: 5px;
  `;
  
  const ZSuccessTransactionId = styled(TextComponent)`
    text-align: center;
    word-break: break-all !important;
  `;
  
  const CustomFeeWarning = styled(TextComponent)`
    padding: 15px 10px 0 0;
    letter-spacing: 0.5px;
    font-size: 12px;
    color: ${props => props.theme.colors.error};
  `;
  
  type Props = {
    match: Match,
    theme: AppTheme,
  } & MapStateToProps &
    MapDispatchToProps;
  
  type State = {
    showFee: boolean,
    from: string,
    amount: string,
    to: string,
    feeType: string | number,
    fee: number | null,
    memo: string,
    isHexMemo: boolean,
    showBalanceTooltip: boolean,
  };
  
  const initialState: State = {
    showFee: false,
    from: '',
    amount: '',
    to: '',
    feeType: FEES.LOW,
    fee: FEES.LOW,
    memo: '',
    isHexMemo: false,
    showBalanceTooltip: false,
  };
  
  class Component extends PureComponent<Props, State> {
    state = initialState;
  
    componentDidMount() {
      const {
        resetSendView, loadAddresses, loadZECPrice, match,
      } = this.props;
  
      resetSendView();
      loadAddresses();
      loadZECPrice();
  
      if (match.params.to) {
        this.handleChange('to')(match.params.to);
      }
    }
  
    componentDidUpdate(prevProps: Props) {
      const previousToAddress = prevProps.match.params.to;
      const toAddress = this.props.match.params.to; // eslint-disable-line
  
      if (toAddress && previousToAddress !== toAddress) this.handleChange('to')(toAddress);
    }
  
    updateTooltipVisibility = ({ balance, amount }: { balance: number, amount: number }) => {
      const { from, to, fee } = this.state;
      const feeValue = fee || 0;
  
      this.setState({
        showBalanceTooltip: !from || !to ? false : new BigNumber(amount).plus(feeValue).gt(balance),
      });
    };
  
    getAmountWithFee = () => {
      const { amount, fee } = this.state;
  
      const feeValue = fee || 0;
  
      if (!amount) return feeValue;
  
      return new BigNumber(amount).plus(feeValue).toNumber();
    };
  
    getMaxAmountWithoutFee = () => {
      const { balance } = this.props;
      const { fee } = this.state;
  
      const max = new BigNumber(balance).minus(fee || 0);
  
      return max.isNegative() ? 0 : max.toNumber();
    };
  
    handleChange = (field: string) => (value: string | number) => {
      const { validateAddress, getAddressBalance, balance } = this.props;
      const { amount } = this.state;
  
      if (field === 'to') {
        this.setState(
          () => ({ [field]: value }),
          () => {
            validateAddress({ address: String(value) });
            this.updateTooltipVisibility({
              balance,
              amount: new BigNumber(amount).toNumber(),
            });
          },
        );
      } else {
        if (field === 'from') getAddressBalance({ address: String(value) });
  
        this.setState(
          () => ({ [field]: value }),
          () => {
            if (field === 'fee') this.handleChange('amount')(amount);
            this.updateTooltipVisibility({
              balance,
              amount: new BigNumber(field === 'amount' ? value : amount).toNumber(),
            });
          },
        );
      }
    };
  
    handleChangeFeeType = (value: string) => {
      const { amount } = this.state;
  
      if (value === FEES.CUSTOM) {
        this.setState(() => ({
          feeType: FEES.CUSTOM,
          fee: null,
        }));
      } else {
        const fee = new BigNumber(value);
  
        this.setState(
          () => ({
            feeType: fee.toString(),
            fee: fee.toNumber(),
          }),
          () => this.handleChange('amount')(amount),
        );
      }
    };
  
    handleSubmit = () => {
      const {
        from, amount, to, memo, fee, isHexMemo,
      } = this.state;
      const { sendTransaction } = this.props;
  
      if (!from || !amount || !to || !fee) return;
  
      sendTransaction({
        from,
        to,
        amount,
        fee,
        memo: isHexMemo ? memo : ascii2hex(memo),
      });
    };
  
    showModal = (toggle: void => void) => {
      const {
        from, amount, to, fee,
      } = this.state;
      // eslint-disable-next-line react/prop-types
      const { isToAddressValid } = this.props;
  
      if (!from || !amount || !to || !fee || !isToAddressValid) return;
  
      toggle();
    };
  
    reset = () => {
      const { resetSendView } = this.props;
  
      this.setState(initialState, () => resetSendView());
    };
  
    getFeeText = () => {
      const { fee } = this.state;
  
      if (!fee) return '0.0';
  
      const feeValue = new BigNumber(fee);
      const coinName = getCoinName();
  
      if (feeValue.isEqualTo(FEES.LOW)) return `Low ${coinName} ${feeValue.toString()}`;
      if (feeValue.isEqualTo(FEES.MEDIUM)) return `Medium ${coinName} ${feeValue.toString()}`;
      if (feeValue.isEqualTo(FEES.HIGH)) return `High ${coinName} ${feeValue.toString()}`;
  
      return `Custom ${coinName} ${feeValue.toString()}`;
    };
  
    renderValidationStatus = () => {
      const { isToAddressValid, theme } = this.props;
  
      return isToAddressValid ? (
        <ValidateWrapper alignItems='center'>
          <ValidateStatusIcon src={ValidIcon} />
          <ValidateItemLabel value='VALID' color={theme.colors.transactionReceived(this.props)} />
        </ValidateWrapper>
      ) : (
        <ValidateWrapper alignItems='center'>
          <ValidateStatusIcon src={InvalidIcon} />
          <ValidateItemLabel value='INVALID' color={theme.colors.transactionSent(this.props)} />
        </ValidateWrapper>
      );
    };
  
    renderModalContent = ({
      valueSent,
      valueSentInUsd,
      toggle,
    }: {
      /* eslint-disable react/no-unused-prop-types */
      valueSent: string,
      valueSentInUsd: string,
      toggle: () => void,
      /* eslint-enable react/no-unused-prop-types */
    }) => {
      // eslint-disable-next-line react/prop-types
      const {
        operationId, isSending, error, theme,
      } = this.props;
      const { from, to } = this.state;
  
      const loadingIcon = theme.mode === DARK ? LoadingIconDark : LoadingIconLight;
  
      if (isSending) {
        return (
          <LoaderWrapper>
            <Loader src={loadingIcon} />
            <TextComponent value='Processing transaction...' />
          </LoaderWrapper>
        );
      }
  
      if (operationId) {
        return (
          <ZSuccessWrapper id='send-success-wrapper'>
            <ZSuccessLabel value='Success!' />
            <ZSuccessContentWrapper>
              <ZSuccessMessage value='Your transaction was sent successfully.' />
              <ZSuccessTransactionId value={`Transaction ID: ${operationId}`} />
            </ZSuccessContentWrapper>
            <FormButton
              label='Done'
              variant='primary'
              onClick={() => {
                this.reset();
                toggle();
              }}
            />
          </ZSuccessWrapper>
        );
      }
  
      if (error) {
        return (
          <ErrorWrapper>
            <ErrorLabel value='Error' />
            <ErrorMessage id='send-error-message' value={error} />
            <FormButton
              label='Try Again'
              variant='primary'
              onClick={() => {
                this.reset();
                toggle();
              }}
            />
          </ErrorWrapper>
        );
      }
  
      return (
        <>
          <ConfirmItemWrapper alignItems='center'>
            <ColumnComponent>
              <ItemLabel value='AMOUNT' />
              <SendZECValue value={`-${valueSent}`} />
              <SendUSDValue value={`-${valueSentInUsd}`} />
            </ColumnComponent>
            <ColumnComponent>
              <Icon src={SentIcon} alt='Transaction Type Icon' />
            </ColumnComponent>
          </ConfirmItemWrapper>
          <Divider opacity={0.3} />
          <ConfirmItemWrapper alignItems='center'>
            <ColumnComponent>
              <ItemLabel value='FEE' />
              <TextComponent value={this.getFeeText()} />
            </ColumnComponent>
          </ConfirmItemWrapper>
          <Divider opacity={0.3} />
          <ConfirmItemWrapper alignItems='center'>
            <ColumnComponent>
              <ItemLabel value='FROM' />
              <TextComponent value={from} />
            </ColumnComponent>
          </ConfirmItemWrapper>
          <Divider opacity={0.3} />
          <ConfirmItemWrapper alignItems='center'>
            <ColumnComponent>
              <ItemLabel value='TO' />
              <TextComponent value={to} />
            </ColumnComponent>
          </ConfirmItemWrapper>
          <Divider opacity={0.3} marginBottom='27.5px' />
        </>
      );
    };
  
    shouldDisableSendButton = () => {
      const { balance, isToAddressValid, nodeSyncType } = this.props;
      const {
        from, amount, to, fee,
      } = this.state;
  
      return (
        !from
        || !amount
        || !to
        || !fee
        || !isToAddressValid
        || new BigNumber(amount).gt(balance)
        || !this.isMemoContentValid()
        || nodeSyncType !== NODE_SYNC_TYPES.READY
      );
    };
  
    isMemoContentValid = () => {
      const { isHexMemo, memo } = this.state;
  
      if (!memo || !isHexMemo) return true;
  
      return isHex(memo);
    };
  
    shouldShowMemoField = () => {
      const { to } = this.state;
  
      return to && to.startsWith('z');
    };
  
    render() {
      const {
        addresses,
        balance,
        zecPrice,
        isSending,
        error,
        operationId,
        theme,
        nodeSyncType,
      } = this.props;
      const {
        showFee,
        from,
        amount,
        to,
        memo,
        fee,
        feeType,
        isHexMemo,
        showBalanceTooltip,
      } = this.state;
  
      const isEmpty = amount === '';
  
      const fixedAmount = isEmpty || new BigNumber(amount).eq(0) ? 0 : this.getAmountWithFee();
      const coinName = getCoinName();
  
      const zecBalance = formatNumber({ value: balance, append: `${coinName} ` });
      const zecBalanceInUsd = formatNumber({
        value: new BigNumber(balance).times(zecPrice).toNumber(),
        append: 'USD $',
      });
      const valueSent = formatNumber({
        value: new BigNumber(fixedAmount).toFormat(4),
        append: `${coinName} `,
      });
      const valueSentInUsd = formatNumber({
        value: new BigNumber(fixedAmount).times(zecPrice).toNumber(),
        append: 'USD $',
      });
  
      const seeMoreIcon = theme.mode === DARK ? MenuIconDark : MenuIconLight;
  
      const arrowUpIcon = theme.mode === DARK ? ArrowUpIconDark : ArrowUpIconLight;
  
      const shouldShowMemoField = this.shouldShowMemoField();
      const isValidMemo = this.isMemoContentValid();
  
      return (
        <RowComponent id='send-wrapper' justifyContent='space-between'>
          <FormWrapper>
            <Label value='From an address' />
            <SelectComponent
              onChange={this.handleChange('from')}
              value={from}
              placeholder='Select a address'
              options={addresses.map(({ address, balance: addressBalance }) => ({
                label: `[ ${formatNumber({
                  append: `${coinName} `,
                  value: addressBalance,
                })} ]  ${address}`,
                value: address,
              }))}
              capitalize={false}
            />
            <Label value='Amount' />
            <AmountWrapper isEmpty={isEmpty}>
              <AmountInput
                renderRight={() => (
                  <MaxAvailableAmount
                    onClick={() => this.handleChange('amount')(this.getMaxAmountWithoutFee())}
                    disabled={!from}
                  >
                    <MaxAvailableAmountImg src={arrowUpIcon} />
                  </MaxAvailableAmount>
                )}
                isEmpty={isEmpty}
                type='number'
                onChange={this.handleChange('amount')}
                value={String(amount)}
                placeholder={`${coinName} 0.0`}
                min={0.01}
                name='amount'
              />
            </AmountWrapper>
            <Label value='To' />
            <InputComponent
              onChange={this.handleChange('to')}
              value={to}
              placeholder='Enter Address'
              renderRight={to ? this.renderValidationStatus : () => null}
              name='to'
            />
            {shouldShowMemoField && (
              <>
                <Label value='Memo' />
                <InputComponent
                  onChange={this.handleChange('memo')}
                  value={memo}
                  inputType='textarea'
                  placeholder='Enter a text here'
                  name='memo'
                />
              </>
            )}
            {!isValidMemo && <MemoValidationText value='Please enter a valid hexadecimal memo' />}
            <ActionsWrapper>
              <ShowFeeButton
                id='send-show-additional-options-button'
                onClick={() => this.setState(state => ({
                  showFee: !state.showFee,
                }))
                }
              >
                <SeeMoreIcon src={seeMoreIcon} alt='Show more icon' />
                <TextComponent value={`${showFee ? 'Hide' : 'Show'} Additional Options`} />
              </ShowFeeButton>
              {shouldShowMemoField && (
                <HexadecimalWrapper>
                  <Checkbox
                    onChange={event => this.setState({ isHexMemo: event.target.checked })}
                    checked={isHexMemo}
                  />
                  <HexadecimalText
                    onClick={() => this.setState(prevState => ({ isHexMemo: !prevState.isHexMemo }))}
                    value='Hexadecimal Memo'
                  />
                </HexadecimalWrapper>
              )}
            </ActionsWrapper>
            <RevealsMain>
              <Transition
                native
                items={showFee}
                enter={[
                  {
                    height: 'auto',
                    opacity: 1,
                    overflow: 'visible',
                  },
                ]}
                leave={{ height: 0, opacity: 0 }}
                from={{
                  position: 'absolute',
                  overflow: 'hidden',
                  opacity: 0,
                  height: 0,
                }}
              >
                {(show: boolean) => show
                  && ((props: Object) => (
                    <animated.div style={props}>
                      <FeeWrapper id='send-fee-wrapper'>
                        <RowComponent alignItems='flex-end' justifyContent='space-between'>
                          <ColumnComponent width='64%'>
                            <Label value={`Fee (${getCoinName()})`} />
                            <InputComponent
                              type='number'
                              onChange={this.handleChange('fee')}
                              value={String(fee)}
                              disabled={feeType !== FEES.CUSTOM}
                              bgColor={theme.colors.sendAdditionalInputBg(this.props)}
                              color={theme.colors.sendAdditionalInputText(this.props)}
                              name='fee'
                            />
                          </ColumnComponent>
                          <ColumnComponent width='35%'>
                            <SelectComponent
                              placement='top'
                              value={String(feeType)}
                              bgColor={theme.colors.sendAdditionalInputBg(this.props)}
                              onChange={this.handleChangeFeeType}
                              options={Object.keys(FEES).map(cur => ({
                                label: cur.toLowerCase(),
                                value: String(FEES[cur]),
                              }))}
                            />
                          </ColumnComponent>
                        </RowComponent>
                        <RowComponent>
                          {feeType === FEES.CUSTOM && (
                            <CustomFeeWarning value='Custom fees may compromise your privacy since fees are transparent.' />
                          )}
                        </RowComponent>
                      </FeeWrapper>
                    </animated.div>
                  ))
                }
              </Transition>
            </RevealsMain>
          </FormWrapper>
          <SendWrapper>
            <InfoCard>
              <InfoContent>
                <InfoCardLabel value='Available Funds' />
                <TextComponent value={zecBalance} size={1.25} isBold />
                <InfoCardUSD value={zecBalanceInUsd} size={0.84375} />
              </InfoContent>
              <Divider opacity={0.3} />
              <InfoContent>
                <InfoCardLabel value='Sending' />
                <InfoCardSubLabel value='Includes transaction fees' />
                <TextComponent value={valueSent} size={1.25} isBold />
                <InfoCardUSD value={valueSentInUsd} size={0.84375} />
              </InfoContent>
            </InfoCard>
            <ConfirmDialogComponent
              title='Transaction Status'
              onConfirm={this.handleSubmit}
              showButtons={!isSending && !error && !operationId}
              onClose={this.reset}
              renderTrigger={toggle => (
                <SendButtonWrapper>
                  {nodeSyncType !== NODE_SYNC_TYPES.READY && (
                    <SimpleTooltip>
                      <TooltipText value='Cannot send until data is synced.' />
                    </SimpleTooltip>
                  )}
                  {!showBalanceTooltip ? null : (
                    <SimpleTooltip>
                      <TooltipText value='Not enough funds!' />
                    </SimpleTooltip>
                  )}
                  <FormButton
                    onClick={() => this.showModal(toggle)}
                    id='send-submit-button'
                    label='Send'
                    variant='primary'
                    focused
                    isFluid
                    disabled={this.shouldDisableSendButton()}
                  />
                </SendButtonWrapper>
              )}
            >
              {toggle => (
                <ModalContent id='send-confirm-transaction-modal' width='100%'>
                  {this.renderModalContent({
                    valueSent,
                    valueSentInUsd,
                    toggle,
                  })}
                </ModalContent>
              )}
            </ConfirmDialogComponent>
            <FormButton label='Clear Form' variant='secondary' onClick={this.reset} />
          </SendWrapper>
        </RowComponent>
      );
    }
  }
  
  export const SendView = withTheme(Component);
  