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)
}