chore(withdraw): refactor main withdraw file (#6260)

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

@@ -608,7 +608,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
       { settlementRequest: { amount, product: ProductTypes.SIMPLEBUY } }
     )
 
-    const { reason, settlementType } = status.attributes?.settlementResponse
+    const { reason, settlementType } = status.attributes?.settlementResponse ?? {}
 
     if (settlementType === 'UNAVAILABLE' || reason === 'REQUIRES_UPDATE') {
       yield put(

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/ConfirmWithdraw/index.tsx

@@ -52,7 +52,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type OwnProps = {
-  amount: string
   beneficiary?: BeneficiaryType
   fiatCurrency: WalletFiatType
   handleClose: () => void

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/ConfirmWithdraw/template.loading.tsx

@@ -4,8 +4,6 @@ import styled from 'styled-components'
 
 import { SpinningLoader, Text } from 'blockchain-info-components'
 
-interface Props {}
-
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -15,7 +13,7 @@ const Wrapper = styled.div`
   flex-direction: column;
 `
 
-const Loading: React.FC<Props> = () => {
+const Loading = () => {
   return (
     <Wrapper>
       <SpinningLoader />

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useSelector } from 'react-redux'
 import { InjectedFormProps, reduxForm } from 'redux-form'
 import styled from 'styled-components'
 
@@ -10,6 +11,7 @@ import { ErrorCartridge } from 'components/Cartridge'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import { FlyoutWrapper, Row, Value } from 'components/Flyout'
 import Form from 'components/Form/Form'
+import { getAmount } from 'data/components/withdraw/selectors'
 import { WithdrawCheckoutFormValuesType, WithdrawStepEnum } from 'data/types'
 import { useSardineContext } from 'hooks'
 
@@ -50,6 +52,8 @@ const Success: React.FC<InjectedFormProps<WithdrawCheckoutFormValuesType, Props>
   const userCountryCode = props.userData?.address?.country || 'default'
   const [sardineContextIsReady, sardineContext] = useSardineContext('WITHDRAWAL')
 
+  const amount = useSelector(getAmount) ?? 0
+
   return (
     <Form
       onSubmit={(e) => {
@@ -87,7 +91,7 @@ const Success: React.FC<InjectedFormProps<WithdrawCheckoutFormValuesType, Props>
         </Top>
         <AmountContainer>
           <CoinDisplay color='grey800' size='32px' weight={600} coin={props.fiatCurrency}>
-            {props.amount}
+            {amount}
           </CoinDisplay>
         </AmountContainer>
       </FlyoutWrapper>
@@ -120,7 +124,7 @@ const Success: React.FC<InjectedFormProps<WithdrawCheckoutFormValuesType, Props>
           {fiatToString({
             digits: 0,
             unit: props.fiatCurrency || ('USD' as FiatType),
-            value: props.amount
+            value: amount
           })}
         </Value>
       </Row>

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/WithdrawalDetails/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import { fiatToString } from '@core/exchange/utils'
 import { WalletFiatType, WithdrawResponseType } from '@core/types'
 import { Button, Icon, Text } from 'blockchain-info-components'
-import { UserDataType } from 'data/types'
+import { getWithdrawal } from 'data/components/withdraw/selectors'
+import { getUserCountryCode } from 'data/modules/profile/selectors'
 
 const Wrapper = styled.div`
   height: 100%;
@@ -38,8 +40,9 @@ const SuccessIcon = styled(Icon)`
   right: -22px;
   background: ${(props) => props.theme.white};
 `
-const WithdrawalDetails = ({ fiatCurrency, handleClose, userData, withdrawal }: Props) => {
-  const userCountryCode = userData?.address?.country || 'default'
+const WithdrawalDetails = ({ fiatCurrency, handleClose }: Props) => {
+  const withdrawal = useSelector(getWithdrawal) as WithdrawResponseType
+  const userCountryCode = useSelector(getUserCountryCode).getOrElse('default')
 
   return (
     <Wrapper>
@@ -105,13 +108,9 @@ const WithdrawalDetails = ({ fiatCurrency, handleClose, userData, withdrawal }:
   )
 }
 
-type OwnProps = {
+type Props = {
   fiatCurrency: WalletFiatType
   handleClose: () => void
-  userData: UserDataType
-  withdrawal: WithdrawResponseType
 }
 
-export type Props = OwnProps
-
 export default WithdrawalDetails

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/index.tsx

@@ -1,13 +1,11 @@
-import React, { PureComponent } from 'react'
-import { connect, ConnectedProps } from 'react-redux'
-import { compose } from 'redux'
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
 
-import { BeneficiaryType, WalletFiatType, WithdrawResponseType } from '@core/types'
 import DataError from 'components/DataError'
 import Flyout, { duration, FlyoutChild } from 'components/Flyout'
 import { selectors } from 'data'
-import { RootState } from 'data/rootReducer'
-import { ModalName, UserDataType, WithdrawStepEnum } from 'data/types'
+import { getUserKYCState } from 'data/modules/profile/selectors'
+import { ModalName, WithdrawStepEnum } from 'data/types'
 import ModalEnhancer from 'providers/ModalEnhancer'
 
 import { BROKERAGE_INELIGIBLE } from '../../../components'
@@ -18,168 +16,88 @@ import ConfirmWithdraw from './ConfirmWithdraw'
 import Loading from './ConfirmWithdraw/template.loading'
 import EnterAmount from './EnterAmount'
 import OnHold from './OnHold'
-import getData from './selectors'
 import WithdrawalDetails from './WithdrawalDetails'
 import WithdrawalMethods from './WithdrawalMethods'
 
-class Withdraw extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props)
-    this.state = { show: false }
-  }
+const INELIGIBLE_ERROR = { message: BROKERAGE_INELIGIBLE }
 
-  componentDidMount() {
-    /* eslint-disable */
-    this.setState({ show: true })
-    /* eslint-enable */
-  }
+const Withdraw = ({ close, position, total, userClickedOutside }: ModalPropsType) => {
+  const beneficiary = useSelector(selectors.components.withdraw.getBeneficiary)
+  const fiatCurrency = useSelector(selectors.components.withdraw.getFiatCurrency)
+  const step = useSelector(selectors.components.withdraw.getStep)
+  const kycState = useSelector(getUserKYCState).getOrElse('NONE')
+
+  const [show, setShow] = useState(false)
 
-  handleClose = () => {
-    this.setState({ show: false })
+  useEffect(() => {
+    setShow(true)
+  }, [])
+
+  const handleClose = () => {
+    setShow(false)
     setTimeout(() => {
-      this.props.close()
+      close()
     }, duration)
   }
 
-  render() {
-    return this.props.data.cata({
-      Failure: () => null,
-      Loading: () => (
-        <Flyout
-          {...this.props}
-          onClose={this.handleClose}
-          isOpen={this.state.show}
-          data-e2e='custodyWithdrawModal'
-        >
-          <Loading {...this.props} />
-        </Flyout>
-      ),
-      NotAsked: () => (
-        <Flyout
-          {...this.props}
-          onClose={this.handleClose}
-          isOpen={this.state.show}
-          data-e2e='custodyWithdrawModal'
-        >
-          <Loading {...this.props} />
-        </Flyout>
-      ),
-      Success: ({ userData }) => {
-        const { kycState } = userData
-        const isUserRejectedOrExpired = kycState === 'REJECTED' || kycState === 'EXPIRED'
-        if (isUserRejectedOrExpired) {
-          return (
-            <Flyout
-              {...this.props}
-              onClose={this.handleClose}
-              isOpen={this.state.show}
-              data-e2e='custodyWithdrawModal'
-            >
-              <Rejected handleClose={this.handleClose} />
-            </Flyout>
-          )
-        }
-        return (
-          <Flyout
-            {...this.props}
-            onClose={this.handleClose}
-            isOpen={this.state.show}
-            data-e2e='custodyWithdrawModal'
-          >
-            {this.props.step === WithdrawStepEnum.LOADING && (
-              <FlyoutChild>
-                <Loading {...this.props} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.ENTER_AMOUNT && (
-              <FlyoutChild>
-                <EnterAmount {...this.props} handleClose={this.handleClose} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.WITHDRAWAL_METHODS && (
-              <FlyoutChild>
-                <WithdrawalMethods {...this.props} handleClose={this.handleClose} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.BANK_PICKER && (
-              <FlyoutChild>
-                <BankPicker {...this.props} handleClose={this.handleClose} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.CONFIRM_WITHDRAW && (
-              <FlyoutChild>
-                <ConfirmWithdraw {...this.props} handleClose={this.handleClose} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.WITHDRAWAL_DETAILS && (
-              <FlyoutChild>
-                <WithdrawalDetails {...this.props} handleClose={this.handleClose} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.INELIGIBLE && (
-              <FlyoutChild>
-                <DataError message={{ message: BROKERAGE_INELIGIBLE }} />
-              </FlyoutChild>
-            )}
-            {this.props.step === WithdrawStepEnum.ON_HOLD && (
-              <FlyoutChild>
-                <OnHold handleClose={this.handleClose} />
-              </FlyoutChild>
-            )}
-          </Flyout>
-        )
-      }
-    })
+  const isUserRejectedOrExpired = kycState === 'REJECTED' || kycState === 'EXPIRED'
+  if (isUserRejectedOrExpired) {
+    return (
+      <Flyout
+        position={position}
+        userClickedOutside={userClickedOutside}
+        total={total}
+        onClose={handleClose}
+        isOpen={show}
+        data-e2e='custodyWithdrawModal'
+      >
+        <Rejected handleClose={handleClose} />
+      </Flyout>
+    )
   }
+  return (
+    <Flyout
+      position={position}
+      userClickedOutside={userClickedOutside}
+      total={total}
+      onClose={handleClose}
+      isOpen={show}
+      data-e2e='custodyWithdrawModal'
+    >
+      <FlyoutChild>
+        {step === WithdrawStepEnum.LOADING && <Loading />}
+        {step === WithdrawStepEnum.ENTER_AMOUNT && (
+          <EnterAmount
+            fiatCurrency={fiatCurrency}
+            beneficiary={beneficiary}
+            handleClose={handleClose}
+          />
+        )}
+        {step === WithdrawStepEnum.WITHDRAWAL_METHODS && (
+          <WithdrawalMethods fiatCurrency={fiatCurrency} handleClose={handleClose} />
+        )}
+        {step === WithdrawStepEnum.BANK_PICKER && (
+          <BankPicker
+            fiatCurrency={fiatCurrency}
+            beneficiary={beneficiary}
+            handleClose={handleClose}
+          />
+        )}
+        {step === WithdrawStepEnum.CONFIRM_WITHDRAW && (
+          <ConfirmWithdraw
+            beneficiary={beneficiary}
+            fiatCurrency={fiatCurrency}
+            handleClose={handleClose}
+          />
+        )}
+        {step === WithdrawStepEnum.WITHDRAWAL_DETAILS && (
+          <WithdrawalDetails fiatCurrency={fiatCurrency} handleClose={handleClose} />
+        )}
+        {step === WithdrawStepEnum.INELIGIBLE && <DataError message={INELIGIBLE_ERROR} />}
+        {step === WithdrawStepEnum.ON_HOLD && <OnHold handleClose={handleClose} />}
+      </FlyoutChild>
+    </Flyout>
+  )
 }
 
-const mapStateToProps = (state: RootState) => ({
-  amount: selectors.components.withdraw.getAmount(state),
-  beneficiary: selectors.components.withdraw.getBeneficiary(state),
-  data: getData(state),
-  fiatCurrency: selectors.components.withdraw.getFiatCurrency(state),
-  step: selectors.components.withdraw.getStep(state),
-  userData: selectors.modules.profile.getUserData(state).getOrElse({} as UserDataType),
-  withdrawal: selectors.components.withdraw.getWithdrawal(state)
-})
-
-const connector = connect(mapStateToProps)
-
-const enhance = compose(
-  ModalEnhancer(ModalName.CUSTODY_WITHDRAW_MODAL, { transition: duration }),
-  connector
-)
-
-type OwnProps = ModalPropsType
-type LinkStatePropsType =
-  | {
-      step: WithdrawStepEnum.LOADING | WithdrawStepEnum.INELIGIBLE | WithdrawStepEnum.ON_HOLD
-    }
-  | {
-      beneficiary?: BeneficiaryType
-      fiatCurrency: WalletFiatType
-      step: WithdrawStepEnum.ENTER_AMOUNT
-    }
-  | {
-      fiatCurrency: WalletFiatType
-      step: WithdrawStepEnum.BANK_PICKER
-    }
-  | {
-      amount: string
-      beneficiary: BeneficiaryType
-      fiatCurrency: WalletFiatType
-      step: WithdrawStepEnum.CONFIRM_WITHDRAW
-    }
-  | {
-      step: WithdrawStepEnum.WITHDRAWAL_DETAILS
-      withdrawal: WithdrawResponseType
-    }
-  | {
-      fiatCurrency: WalletFiatType
-      step: WithdrawStepEnum.WITHDRAWAL_METHODS
-    }
-
-export type Props = OwnProps & LinkStatePropsType & ConnectedProps<typeof connector>
-type State = { show: boolean }
-
-export default enhance(Withdraw)
+export default ModalEnhancer(ModalName.CUSTODY_WITHDRAW_MODAL, { transition: duration })(Withdraw)