diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx index 00b7c48b753..3d19e4d5ae3 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Brokerage/EnterAmount.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import { FormattedMessage } from 'react-intl' import { useDispatch } from 'react-redux' import { FormErrors, InjectedFormProps, reduxForm, stopAsyncValidation } from 'redux-form' @@ -211,7 +211,7 @@ const ErrorMessage = ({ error, orderType }) => { return <>{error?.amount} } - return <> + return null } const Amount = memoizer((props: AmountProps) => { @@ -283,7 +283,6 @@ const PreviewButton = ({ invalid, orderType, paymentAccount, pristine, submittin type='submit' fullwidth disabled={invalid || pristine || submitting || !paymentAccount} - onClick={() => {}} > {submitting ? ( @@ -298,6 +297,7 @@ const PreviewButton = ({ invalid, orderType, paymentAccount, pristine, submittin ) const EnterAmount = ({ + change, crossBorderLimits, fee, fiatCurrency, @@ -326,6 +326,11 @@ const EnterAmount = ({ const showError = !!formErrors + // If fees changes, reset just in case previous amount would be now be over any limit + useEffect(() => { + change('amount', undefined) + }, [fee]) + return ( @@ -370,7 +375,7 @@ const EnterAmount = ({ formActions.change( 'brokerageTx', 'amount', - convertBaseToStandard('FIAT', withdrawableBalance || paymentMethod.limits.max) + convertBaseToStandard('FIAT', minMaxLimits.max) ) // record max click withdrawal onMaxButtonClicked?.() diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx index 90908d10cbd..c53f7908f85 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx @@ -971,7 +971,7 @@ const getBrokerageLimits = (props: DepositBrokerageLimits | WithdrawalBrokerageL props.withdrawableBalance && props.minWithdrawAmount ? { - max: (Number(props.withdrawableBalance) - Number(props.fee || '0')).toString(), + max: (Number(props.withdrawableBalance) - Number(props.fee ?? 0)).toString(), min: props.minWithdrawAmount } : { max: '0', min: '0' } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/index.tsx index 0079f1fec32..b1f3d168886 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/index.tsx @@ -35,14 +35,12 @@ const BankPicker = ({ fiatCurrency, handleClose }: Props) => { fiatCurrency={fiatCurrency} bankTransferAccounts={data.bankTransferAccounts} beneficiaries={data.beneficiaries} - defaultBeneficiary={data.defaultBeneficiary} defaultMethod={data.defaultMethod} /> ) } export type BankPickerProps = { - beneficiary?: BeneficiaryType fiatCurrency: WalletFiatType } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/selectors.ts index 34648d3c518..b71bb2d15b4 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/selectors.ts @@ -17,7 +17,6 @@ import { BankPickerProps } from '.' export type BankPickerSelectorProps = { bankTransferAccounts: BankTransferAccountType[] beneficiaries: BeneficiariesType - defaultBeneficiary?: BeneficiaryType defaultMethod?: BankTransferAccountType } @@ -37,24 +36,19 @@ const getData = ( bankTransferAccountsR = Remote.Success([]) } const beneficiariesR = selectors.custodial.getBeneficiaries(state) - const defaultBeneficiaryR = selectors.custodial.getDefaultBeneficiary( - ownProps.fiatCurrency, - state - ) + return lift( ( bankTransferAccounts: ExtractSuccess, - beneficiaries: ExtractSuccess, - defaultBeneficiary: ExtractSuccess + beneficiaries: ExtractSuccess ) => ({ bankTransferAccounts: bankTransferAccounts.filter( (value) => value.currency === ownProps.fiatCurrency ), beneficiaries: beneficiaries.filter((value) => value.currency === ownProps.fiatCurrency), - defaultBeneficiary, defaultMethod: defaultMethodR }) - )(bankTransferAccountsR, beneficiariesR, defaultBeneficiaryR) + )(bankTransferAccountsR, beneficiariesR) } export default getData diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/template.success.tsx index 3049417b7ad..0caa87c810c 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/template.success.tsx @@ -1,6 +1,6 @@ -import React, { ReactElement, useState } from 'react' +import React, { useState } from 'react' import { FormattedMessage } from 'react-intl' -import { useDispatch } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { AlertCard } from '@blockchain-com/constellation' import styled from 'styled-components' @@ -10,6 +10,7 @@ import { AddNewButton } from 'components/Brokerage' import { FlyoutWrapper } from 'components/Flyout' import { Bank, BankWire } from 'components/Flyout/model' import { brokerage, withdraw } from 'data/components/actions' +import { getBeneficiary } from 'data/components/withdraw/selectors' import { BankTransferAccountType, WithdrawStepEnum } from 'data/types' import { getBankLogoImageName } from 'services/images' @@ -32,13 +33,7 @@ const getLinkedBankIcon = (bankName: string) => ( ) -const Success = ({ - bankTransferAccounts, - beneficiaries, - beneficiary, - defaultMethod, - fiatCurrency -}: Props) => { +const Success = ({ bankTransferAccounts, beneficiaries, defaultMethod, fiatCurrency }: Props) => { const [showAlert, setShowAlert] = useState(true) const dispatch = useDispatch() @@ -46,6 +41,8 @@ const Success = ({ (account) => account.capabilities?.withdrawal?.enabled === false ) + const beneficiary = useSelector(getBeneficiary) + const changeStep = (account?: BankTransferAccountType, beneficiary?: BeneficiaryType) => { dispatch(brokerage.setBankDetails({ account })) dispatch( @@ -106,7 +103,7 @@ const Success = ({ key={account.id} bankDetails={account.details} text={account.details.bankName} - isActive={account.id === defaultMethod?.id} + isActive={!beneficiary && account.id === defaultMethod?.id} icon={getLinkedBankIcon(account.details.bankName)} isDisabled={account.capabilities?.withdrawal?.enabled === false} onClick={() => changeStep(account)} diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/index.tsx index 26cc98ce055..74847d57d34 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/index.tsx @@ -110,9 +110,7 @@ const EnterAmountContainer = (props: Props) => { step: WithdrawStepEnum.BANK_PICKER }) } else { - props.buySellActions.setStep({ - step: 'KYC_REQUIRED' - }) + props.buySellActions.setStep({ step: 'KYC_REQUIRED' }) } } @@ -171,23 +169,24 @@ const EnterAmountContainer = (props: Props) => { // Connecting the paymentAccount to the submit handler here because there's some nasty logic // above here to determine the account being used to withdraw to. This should all ideally be refactored const submitter = handleSubmit(paymentAccount) + return ( ) } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/validation.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/validation.tsx deleted file mode 100644 index 9112c05f0bd..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/validation.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { selectors } from 'data' - -import { SuccessStateType as Props } from '.' - -export const maximumAmount = (value: string, allValues, restProps: Props) => { - if (!value) return true - - const { fees, withdrawableBalance } = restProps - - if (!withdrawableBalance) return true - - const maxAmount = Number(withdrawableBalance) - Number(fees.value) - - return Number(value) > maxAmount ? 'ABOVE_MAX' : false -} - -export const minimumAmount = (value: string, allValues, restProps: Props) => { - if (!value) return true - - const minAmount = Number(restProps.minAmount.value) || selectors.components.withdraw.MIN_AMOUNT - - if (Number(value) === minAmount) return false - - return Number(value) < minAmount ? 'BELOW_MIN' : false -} diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/WithdrawalMethods/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/WithdrawalMethods/template.success.tsx index e7e25107e2a..9310a0524cf 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/WithdrawalMethods/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/WithdrawalMethods/template.success.tsx @@ -120,7 +120,7 @@ const Success = ({ size='20px' color='grey600' role='button' - onClick={handleClose} + onClick={() => handleClose()} /> diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/index.tsx index d73481ee8eb..b96f63bb498 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/index.tsx @@ -27,19 +27,6 @@ const Withdraw = ({ close, position, total, userClickedOutside }: ModalPropsType const step = useSelector(selectors.components.withdraw.getStep) const kycState = useSelector(getUserKYCState).getOrElse('NONE') - const [show, setShow] = useState(false) - - useEffect(() => { - setShow(true) - }, []) - - const handleClose = () => { - setShow(false) - setTimeout(() => { - close() - }, duration) - } - const isUserRejectedOrExpired = kycState === 'REJECTED' || kycState === 'EXPIRED' if (isUserRejectedOrExpired) { return ( @@ -47,11 +34,11 @@ const Withdraw = ({ close, position, total, userClickedOutside }: ModalPropsType position={position} userClickedOutside={userClickedOutside} total={total} - onClose={handleClose} - isOpen={show} + onClose={close} + isOpen data-e2e='custodyWithdrawModal' > - + ) } @@ -60,37 +47,29 @@ const Withdraw = ({ close, position, total, userClickedOutside }: ModalPropsType position={position} userClickedOutside={userClickedOutside} total={total} - onClose={handleClose} - isOpen={show} + onClose={close} + isOpen data-e2e='custodyWithdrawModal' > {step === WithdrawStepEnum.LOADING && } {step === WithdrawStepEnum.ENTER_AMOUNT && ( - + )} {step === WithdrawStepEnum.WITHDRAWAL_METHODS && ( - + )} {step === WithdrawStepEnum.BANK_PICKER && ( - + )} {step === WithdrawStepEnum.CONFIRM_WITHDRAW && ( )} {step === WithdrawStepEnum.WITHDRAWAL_DETAILS && ( - + )} {step === WithdrawStepEnum.INELIGIBLE && } - {step === WithdrawStepEnum.ON_HOLD && } + {step === WithdrawStepEnum.ON_HOLD && } ) diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/model.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/model.tsx index 6c3b20a158c..8860c8b75fa 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/model.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/model.tsx @@ -17,32 +17,29 @@ import { Col, Title, Value } from 'components/Flyout' import { BankDetails } from 'data/types' import { formatTextAmount } from 'services/forms' -export const ActiveToggle = ({ isActive }: { isActive: boolean }): ReactElement => { +export const ActiveToggle = ({ isActive }: { isActive: boolean }) => { + if (isActive) { + return ( + + ) + } return ( - <> - {isActive ? ( - - ) : ( - - )} - + ) } -const RightArrowIcon = styled(Icon)<{ - disabled?: boolean -}>` +const RightArrowIcon = styled(Icon)<{ disabled?: boolean }>` transform: rotate(180deg); ${(props) => props.disabled && @@ -191,8 +188,7 @@ const DepositOrWithdrawal = (props: { } const normalizeAmount = (value, prevValue) => { - // eslint-disable-next-line no-restricted-globals - if (isNaN(Number(value)) && value !== '.' && value !== '') return prevValue + if (Number.isNaN(Number(value)) && value !== '.' && value !== '') return prevValue return formatTextAmount(value, true) }