chore(merge): development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blockchain-wallet-v4",
-  "version": "4.50.3",
+  "version": "4.50.4",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "author": {

packages/blockchain-wallet-v4-frontend/src/data/components/send/sagas.ts

@@ -119,7 +119,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
     } catch (e) {
       const error = errorHandler(e)
       yield put(actions.logs.logErrorMessage(logLocation, 'getWithdrawalLockCheck', error))
-      yield put(A.fetchUnstoppableDomainResultsFailure(error))
+      yield put(A.fetchUnstoppableDomainResultsFailure(''))
     }
   }
 

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/BankPicker/selectors.ts

@@ -1,24 +1,19 @@
 import { lift } from 'ramda'
 
 import Remote from 'blockchain-wallet-v4/src/remote/remote'
-import { ExtractSuccess } from 'blockchain-wallet-v4/src/types'
-import { InvitationsType } from 'core/types'
+import { ExtractSuccess, InvitationsType } from 'blockchain-wallet-v4/src/types'
 import { selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 
 import { OwnProps } from '.'
 
-export const getData = (state: RootState, ownProps: OwnProps) => {
-  let bankTransferAccountsR = selectors.components.brokerage.getBankTransferAccounts(
-    state
-  )
+const getData = (state: RootState, ownProps: OwnProps) => {
+  let bankTransferAccountsR = selectors.components.brokerage.getBankTransferAccounts(state)
   let defaultMethodR = selectors.components.brokerage.getAccount(state)
   // TODO: Remove this when ach deposits withdrawals gets rolled out hundo P
-  const invitations: InvitationsType = selectors.core.settings
-    .getInvitations(state)
-    .getOrElse({
-      openBanking: false
-    } as InvitationsType)
+  const invitations: InvitationsType = selectors.core.settings.getInvitations(state).getOrElse({
+    openBanking: false
+  } as InvitationsType)
 
   if (!invitations.openBanking && ownProps.fiatCurrency !== 'USD') {
     defaultMethodR = undefined
@@ -35,12 +30,14 @@ export const getData = (state: RootState, ownProps: OwnProps) => {
       beneficiaries: ExtractSuccess<typeof beneficiariesR>,
       defaultBeneficiary: ExtractSuccess<typeof defaultBeneficiaryR>
     ) => ({
-      bankTransferAccounts,
-      beneficiaries: beneficiaries.filter(
-        value => value.currency === ownProps.fiatCurrency
+      bankTransferAccounts: bankTransferAccounts.filter(
+        (value) => value.currency === ownProps.fiatCurrency
       ),
+      beneficiaries: beneficiaries.filter((value) => value.currency === ownProps.fiatCurrency),
       defaultBeneficiary,
       defaultMethod: defaultMethodR
     })
   )(bankTransferAccountsR, beneficiariesR, defaultBeneficiaryR)
 }
+
+export default getData

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/EnterAmount/template.success.tsx

@@ -7,20 +7,13 @@ import styled from 'styled-components'
 import { Button, Icon, Text } from 'blockchain-info-components'
 import { displayFiatToFiat } from 'blockchain-wallet-v4/src/exchange'
 import Currencies from 'blockchain-wallet-v4/src/exchange/currencies'
-import {
-  BeneficiaryType,
-  NabuSymbolNumberType
-} from 'blockchain-wallet-v4/src/types'
+import { BeneficiaryType, NabuSymbolNumberType } from 'blockchain-wallet-v4/src/types'
 import { BlueCartridge, ErrorCartridge } from 'components/Cartridge'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import { AmountTextBox } from 'components/Exchange'
 import { FlyoutWrapper } from 'components/Flyout'
 import { Form } from 'components/Form'
-import {
-  BankTransferAccountType,
-  UserDataType,
-  WithdrawCheckoutFormValuesType
-} from 'data/types'
+import { BankTransferAccountType, UserDataType, WithdrawCheckoutFormValuesType } from 'data/types'
 
 import { Row } from '../../components'
 import { DepositOrWithdrawal, normalizeAmount } from '../../model'
@@ -58,7 +51,7 @@ const CoinContainer = styled.div`
 `
 const PendingText = styled(Text)`
   a {
-    color: ${props => props.theme.blue600};
+    color: ${(props) => props.theme.blue600};
     text-decoration: none;
   }
 `
@@ -72,8 +65,8 @@ const Limits = styled.div`
   display: flex;
   flex-direction: row;
   padding: 15px 40px;
-  border-top: 1px solid ${props => props.theme.grey000};
-  border-bottom: 1px solid ${props => props.theme.grey000};
+  border-top: 1px solid ${(props) => props.theme.grey000};
+  border-bottom: 1px solid ${(props) => props.theme.grey000};
 `
 
 const LimitWrapper = styled.div`
@@ -96,65 +89,47 @@ const AmountRow = styled(Row)`
 const SubIconWrapper = styled.div`
   align-items: center;
   justify-content: center;
-  background-color: ${props => props.theme['fiat-light']};
+  background-color: ${(props) => props.theme['fiat-light']};
   width: 24px;
   height: 24px;
   border-radius: 50%;
   position: absolute;
   right: -20px;
 `
 
-const BlueRedCartridge = ({
-  children,
-  error
-}: {
-  children: ReactChild
-  error: boolean
-}) => {
-  if (error)
-    return <CustomErrorCartridge role='button'>{children}</CustomErrorCartridge>
+const BlueRedCartridge = ({ children, error }: { children: ReactChild; error: boolean }) => {
+  if (error) return <CustomErrorCartridge role='button'>{children}</CustomErrorCartridge>
   return <CustomBlueCartridge role='button'>{children}</CustomBlueCartridge>
 }
 
-const Success: React.FC<InjectedFormProps<
-  WithdrawCheckoutFormValuesType,
-  Props
-> &
-  Props> = props => {
-  const beneficiary =
-    (!props.defaultMethod && props.beneficiary) || props.defaultBeneficiary
+const Success: React.FC<InjectedFormProps<WithdrawCheckoutFormValuesType, Props> & Props> = (
+  props
+) => {
+  const beneficiary = (!props.defaultMethod && props.beneficiary) || props.defaultBeneficiary
   const transferAccount = props.defaultMethod
 
-  const amtError =
-    typeof props.formErrors.amount === 'string' && props.formErrors.amount
+  const amtError = typeof props.formErrors.amount === 'string' && props.formErrors.amount
 
-  const userCanWithdraw =
-    Number(props.withdrawableBalance) > Number(props.fees.value)
+  const userCanWithdraw = Number(props.withdrawableBalance) > Number(props.fees.value)
   const showFee = Number(props.fees.value) > 0 && !transferAccount
 
   const maxAmount = userCanWithdraw
     ? Number(props.withdrawableBalance) - Number(props.fees.value)
     : Number(props.withdrawableBalance)
 
   const isEnteredAmountGreaterThanWithdrawable =
-    props.formValues &&
-    props.formValues.amount &&
-    Number(props.formValues.amount) > maxAmount
+    props.formValues && props.formValues.amount && Number(props.formValues.amount) > maxAmount
 
   const showPendingTransactions = !isEmpty(props.locks)
 
-  const showInfoTooltip =
-    Number(props.withdrawableBalance) < Number(props.availableBalance)
+  const showInfoTooltip = Number(props.withdrawableBalance) < Number(props.availableBalance)
 
   return (
     <CustomForm onSubmit={props.handleSubmit}>
       <FlyoutWrapper>
         <Top>
           <Text color='grey800' size='20px' weight={600}>
-            <DepositOrWithdrawal
-              fiatCurrency={props.fiatCurrency}
-              orderType={'WITHDRAWAL'}
-            />
+            <DepositOrWithdrawal fiatCurrency={props.fiatCurrency} orderType='WITHDRAWAL' />
           </Text>
           <Icon
             cursor
@@ -169,29 +144,21 @@ const Success: React.FC<InjectedFormProps<
       </FlyoutWrapper>
       <Limits>
         <LimitWrapper>
-          <Text color='grey600' size='14px' lineHeight={'25px'} weight={500}>
+          <Text color='grey600' size='14px' lineHeight='25px' weight={500}>
             <FormattedMessage
               id='modals.brokerage.fiat_account'
               defaultMessage='{currency} Account'
               values={{ currency: props.fiatCurrency }}
             />
           </Text>
-          <CoinDisplay
-            size='14px'
-            color='grey900'
-            weight={600}
-            coin={props.fiatCurrency}
-          >
+          <CoinDisplay size='14px' color='grey900' weight={600} coin={props.fiatCurrency}>
             {props.withdrawableBalance}
           </CoinDisplay>
           {showInfoTooltip && <LockTimeTooltip />}
           {showFee && (
-            <CoinContainer style={{ marginTop: '4px', height: '16px' }}>
+            <CoinContainer style={{ height: '16px', marginTop: '4px' }}>
               <Text size='14px' color='grey900' weight={500}>
-                <FormattedMessage
-                  id='modals.withdraw.fee'
-                  defaultMessage='Withdraw Fee'
-                />
+                <FormattedMessage id='modals.withdraw.fee' defaultMessage='Withdraw Fee' />
               </Text>{' '}
               <CoinDisplay
                 size='14px'
@@ -224,10 +191,16 @@ const Success: React.FC<InjectedFormProps<
             <PendingText size='14px' color='grey900' weight={500}>
               <FormattedMessage
                 id='modals.withdraw.lock_description'
-                defaultMessage="You have {locks} pending transactions. We’ll email you when these funds become available for withdrawal. <a>Learn more.</a>"
+                defaultMessage='You have {locks} pending transactions. We’ll email you when these funds become available for withdrawal. <a>Learn more.</a>'
                 values={{
-                  a: msg => (
-                    <a href='https://support.blockchain.com/hc/en-us/articles/360048200392-Why-can-t-I-withdraw-my-crypto-' rel='noopener noreferrer' target='_blank'>{msg}</a>
+                  a: (msg) => (
+                    <a
+                      href='https://support.blockchain.com/hc/en-us/articles/360048200392-Why-can-t-I-withdraw-my-crypto-'
+                      rel='noopener noreferrer'
+                      target='_blank'
+                    >
+                      {msg}
+                    </a>
                   ),
                   locks: props.locks.length
                 }}
@@ -254,6 +227,8 @@ const Success: React.FC<InjectedFormProps<
           />
         </AmountRow>
         <MinMaxContainer>
+          {/* The <div> element has a child <button> element that allows keyboard interaction */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
           <div
             style={{ marginRight: '4px' }}
             onClick={() =>
@@ -263,6 +238,8 @@ const Success: React.FC<InjectedFormProps<
                 displayFiatToFiat({ value: props.minAmount.value })
               )
             }
+            role='button'
+            tabIndex={0}
           >
             <BlueRedCartridge error={amtError && amtError === 'BELOW_MIN'}>
               <>
@@ -280,8 +257,9 @@ const Success: React.FC<InjectedFormProps<
               </>
             </BlueRedCartridge>
           </div>
-          {Number(props.minAmount.value) <
-            Number(props.withdrawableBalance) && (
+          {Number(props.minAmount.value) < Number(props.withdrawableBalance) && (
+            // The <div> element has a child <button> element that allows keyboard interaction
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
               onClick={() =>
                 props.formActions.change(
@@ -290,6 +268,8 @@ const Success: React.FC<InjectedFormProps<
                   displayFiatToFiat({ value: maxAmount })
                 )
               }
+              role='button'
+              tabIndex={0}
             >
               <BlueRedCartridge error={amtError && amtError === 'ABOVE_MAX'}>
                 <>
@@ -311,19 +291,14 @@ const Success: React.FC<InjectedFormProps<
         </MinMaxContainer>
 
         {showFee && isEnteredAmountGreaterThanWithdrawable && (
-          <Text
-            size='14px'
-            weight={500}
-            color='grey600'
-            style={{ marginBottom: '4px' }}
-          >
+          <Text size='14px' weight={500} color='grey600' style={{ marginBottom: '4px' }}>
             <FormattedMessage
               id='modals.withdraw.not_enought_founds'
               defaultMessage='Amount is greater than your max withdrawalable balance ({symbol} {balance}) minus the fee ({symbol} {fee}).'
               values={{
                 balance: props.withdrawableBalance,
-                symbol: props.fiatCurrency,
-                fee: props.fees.value
+                fee: props.fees.value,
+                symbol: props.fiatCurrency
               }}
             />
           </Text>
@@ -332,20 +307,22 @@ const Success: React.FC<InjectedFormProps<
         <ToContainer>
           <Beneficiary
             {...props}
-            transferAccount={transferAccount || undefined}
+            transferAccount={
+              transferAccount && transferAccount.currency === props.fiatCurrency
+                ? transferAccount
+                : undefined
+            }
             beneficiary={
-              !transferAccount && beneficiary ? beneficiary : undefined
+              !transferAccount && beneficiary && beneficiary.currency === props.fiatCurrency
+                ? beneficiary
+                : undefined
             }
           />
         </ToContainer>
 
         <ActionContainer>
           <Button
-            disabled={
-              props.invalid ||
-              !userCanWithdraw ||
-              (!beneficiary && !transferAccount)
-            }
+            disabled={props.invalid || !userCanWithdraw || (!beneficiary && !transferAccount)}
             data-e2e='withdrawNext'
             type='submit'
             nature='primary'
@@ -371,6 +348,6 @@ export type Props = OwnProps &
   }
 
 export default reduxForm<WithdrawCheckoutFormValuesType, Props>({
-  form: 'custodyWithdrawForm',
-  destroyOnUnmount: false
+  destroyOnUnmount: false,
+  form: 'custodyWithdrawForm'
 })(Success)