chore(onHold): refactor code (#6290)

packages/blockchain-wallet-v4-frontend/src/components/Brokerage/WithdrawalLockHold.tsx

@@ -24,7 +24,7 @@ const InnerSpacedRow = styled(SpacedRow)`
   }
 `
 
-export const OnHold = (props: Props) => {
+const WithdrawalLockHold = (props: Props) => {
   return (
     <OuterSpacedRow reversed={props.mode === 'tooltip'}>
       <Text color='grey900' size='14px' weight={500}>
@@ -64,4 +64,4 @@ export const OnHold = (props: Props) => {
 export type Props = WithdrawalLockResponseType['totalLocked'] &
   ({ mode: 'tooltip' } | { handleClick: () => void; mode: 'flyout' })
 
-export default memo(OnHold)
+export default memo(WithdrawalLockHold)

packages/blockchain-wallet-v4-frontend/src/data/components/withdraw/selectors.ts

@@ -1,6 +1,6 @@
 import { lift } from 'ramda'
 
-import { ExtractSuccess } from '@core/types'
+import { ExtractSuccess, RemoteDataType, WithdrawalLockResponseType } from '@core/types'
 import { RootState } from 'data/rootReducer'
 
 // TODO - MOVE TO BE 1000 before release
@@ -46,7 +46,9 @@ export const getMinAmountForCurrency = (state: RootState, currency: string) => {
 
 export const getLocks = (state: RootState) => state.components.withdraw.withdrawLocks
 
-export const getWithdrawalLocks = (state: RootState) => {
+export const getWithdrawalLocks = (
+  state: RootState
+): RemoteDataType<string, WithdrawalLockResponseType> => {
   const locksR = getLocks(state)
 
   return lift((locksResponse: ExtractSuccess<typeof locksR>) => locksResponse)(locksR)

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/FundsOnHold/index.tsx

@@ -1,56 +1,44 @@
 import React, { useCallback, useEffect } from 'react'
-import { connect, ConnectedProps } from 'react-redux'
-import { bindActionCreators } from 'redux'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { FiatType } from '@core/types'
+import { getCurrency } from '@core/redux/settings/selectors'
 import WithdrawalLockHold from 'components/Brokerage/WithdrawalLockHold'
-import { actions, selectors } from 'data'
-import { RootState } from 'data/rootReducer'
+import { modals } from 'data/actions'
+import { withdraw } from 'data/components/actions'
+import { getWithdrawalLocks } from 'data/components/withdraw/selectors'
 import { ModalName, WithdrawStepEnum } from 'data/types'
+import { useRemote } from 'hooks'
 
-import getData from './selectors'
+export const FundsOnHoldContainer = () => {
+  const { data, hasError, isLoading, isNotAsked } = useRemote(getWithdrawalLocks)
+
+  const { data: walletCurrency } = useSelector(getCurrency)
+
+  const dispatch = useDispatch()
 
-export const FundsOnHoldContainer = (props: Props) => {
   useEffect(() => {
-    props.withdrawActions.fetchWithdrawalLock({ currency: props.walletCurrency })
-  }, [props.walletCurrency, props.withdrawActions])
+    dispatch(withdraw.fetchWithdrawalLock({ currency: walletCurrency }))
+  }, [walletCurrency])
 
   const handleClick = useCallback(() => {
-    props.modalActions.showModal(ModalName.CUSTODY_WITHDRAW_MODAL, {
-      origin: 'SideNav'
-    })
-    props.withdrawActions.setStep({
-      step: WithdrawStepEnum.ON_HOLD
-    })
-  }, [])
-
-  return props.data.cata({
-    Failure: () => null,
-    Loading: () => null,
-    NotAsked: () => null,
-    Success: (val) => (
-      <WithdrawalLockHold
-        {...val.withdrawalLocks.totalLocked}
-        handleClick={handleClick}
-        mode='flyout'
-      />
+    dispatch(
+      modals.showModal(ModalName.CUSTODY_WITHDRAW_MODAL, {
+        origin: 'SideNav'
+      })
     )
-  })
-}
-
-const mapStateToProps = (state: RootState) => ({
-  data: getData(state),
-  walletCurrency: selectors.core.settings.getCurrency(state).getOrElse('USD') as FiatType
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  modalActions: bindActionCreators(actions.modals, dispatch),
-  withdrawActions: bindActionCreators(actions.components.withdraw, dispatch)
-})
+    dispatch(withdraw.setStep({ step: WithdrawStepEnum.ON_HOLD }))
+  }, [])
 
-const connector = connect(mapStateToProps, mapDispatchToProps)
+  if (isLoading || isNotAsked || !data || hasError) return null
 
-export type SuccessStateType = ReturnType<typeof getData>
-export type Props = ConnectedProps<typeof connector>
+  return (
+    <WithdrawalLockHold
+      amount={data.totalLocked.amount}
+      currency={data.totalLocked.currency}
+      handleClick={handleClick}
+      mode='flyout'
+    />
+  )
+}
 
-export default connector(FundsOnHoldContainer)
+export default FundsOnHoldContainer