feat(sardine): improved sardine flow to use risk api end point and ch…

…eck are flows on list (#5525)

* feat(sardine): improved sardine flow to use risk api ednpoint and check are flows on list

* feat(sardine): improved selector not to have direct type casting

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/actionTypes.ts

@@ -48,3 +48,8 @@ export const SHARE_WALLET_ADDRESSES_WITH_EXCHANGE_FAILURE =
 
 export const CREATE_USER = '@DATA.PROFILE.CREATE_USER'
 export const AUTH_AND_ROUTE_TO_EXCHANGE = '@DATA.AUTH_AND_ROUTE_TO_EXCHANGE'
+
+export const FETCH_USER_RISK_SETTINGS_SUCCESS = '@DATA.FETCH_USER_RISK_SETTINGS_SUCCESS'
+export const FETCH_USER_RISK_SETTINGS_LOADING = '@DATA.FETCH_USER_RISK_SETTINGS_LOADING'
+export const FETCH_USER_RISK_SETTINGS_FAILURE = '@DATA.FETCH_USER_RISK_SETTINGS_FAILURE'
+export const FETCH_USER_RISK_SETTINGS = '@EVENT.PROFILE.FETCH_USER_RISK_SETTINGS'

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/actions.ts

@@ -142,3 +142,18 @@ export const shareWalletAddressesWithExchangeFailure = (error): ProfileActionTyp
   payload: { error },
   type: AT.SHARE_WALLET_ADDRESSES_WITH_EXCHANGE_FAILURE
 })
+
+export const fetchUserRiskSettings = () => ({
+  type: AT.FETCH_USER_RISK_SETTINGS
+})
+export const fetchUserRiskSettingsFailure = (error: NabuApiErrorType): ProfileActionTypes => ({
+  payload: { error },
+  type: AT.FETCH_USER_RISK_SETTINGS_FAILURE
+})
+export const fetchUserRiskSettingsLoading = (): ProfileActionTypes => ({
+  type: AT.FETCH_USER_RISK_SETTINGS_LOADING
+})
+export const fetchUserRiskSettingsSuccess = (userRiskSettings): ProfileActionTypes => ({
+  payload: { userRiskSettings },
+  type: AT.FETCH_USER_RISK_SETTINGS_SUCCESS
+})

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/reducers.ts

@@ -17,6 +17,7 @@ const INITIAL_STATE: ProfileState = {
   },
   userCampaigns: Remote.NotAsked,
   userData: Remote.NotAsked,
+  userRiskSettings: Remote.NotAsked,
   userTiers: Remote.Success(INITIAL_TIERS)
 }
 
@@ -42,6 +43,21 @@ export function profileReducer(state = INITIAL_STATE, action: ProfileActionTypes
         ...state,
         userCampaigns: Remote.Success(action.payload.userCampaigns)
       }
+    case AT.FETCH_USER_RISK_SETTINGS_FAILURE:
+      return {
+        ...state,
+        userRiskSettings: Remote.Failure(action.payload.error)
+      }
+    case AT.FETCH_USER_RISK_SETTINGS_LOADING:
+      return {
+        ...state,
+        userRiskSettings: Remote.Loading
+      }
+    case AT.FETCH_USER_RISK_SETTINGS_SUCCESS:
+      return {
+        ...state,
+        userRiskSettings: Remote.Success(action.payload.userRiskSettings)
+      }
     case AT.FETCH_USER_DATA_FAILURE:
       return {
         ...state,

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/sagaRegister.ts

@@ -11,6 +11,7 @@ export default ({ api, coreSagas, networks }) => {
     fetchTiers,
     fetchUser,
     fetchUserCampaigns,
+    fetchUserRiskSettings,
     linkFromExchangeAccount,
     linkToExchangeAccount,
     shareWalletAddressesWithExchange,
@@ -27,6 +28,7 @@ export default ({ api, coreSagas, networks }) => {
     yield takeLatest(AT.CREATE_USER, createUser)
     yield takeLatest(AT.FETCH_USER, fetchUser)
     yield takeLatest(AT.FETCH_TIERS, fetchTiers)
+    yield takeLatest(AT.FETCH_USER_RISK_SETTINGS, fetchUserRiskSettings)
     yield takeLatest(AT.FETCH_USER_CAMPAIGNS, fetchUserCampaigns)
     yield takeLatest(AT.AUTH_AND_ROUTE_TO_EXCHANGE, authAndRouteToExchangeAction)
     // @ts-ignore

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/sagas.ts

@@ -232,6 +232,17 @@ export default ({ api, coreSagas, networks }) => {
     }
   }
 
+  const fetchUserRiskSettings = function* () {
+    try {
+      yield put(A.fetchUserRiskSettingsLoading())
+      yield call(waitForUserData)
+      const userRiskSettings = yield call(api.getUserRiskSettings)
+      yield put(A.fetchUserRiskSettingsSuccess(userRiskSettings))
+    } catch (e) {
+      yield put(A.fetchUserRiskSettingsFailure(e))
+    }
+  }
+
   const clearSession = function* () {
     if (renewSessionTask) {
       // @ts-ignore
@@ -591,7 +602,14 @@ export default ({ api, coreSagas, networks }) => {
       }
       yield put(A.setApiTokenLoading())
 
-      if (window?._SardineContext) {
+      yield put(actions.modules.profile.fetchUserRiskSettings())
+
+      const isFlowInRiskSettings = selectors.modules.profile.isFlowInRiskSettings(
+        yield select(),
+        'ONBOARDING'
+      )
+
+      if (window?._SardineContext && isFlowInRiskSettings) {
         window._SardineContext.updateConfig({
           flow: 'ONBOARDING',
           userIdHash: sha256(unifiedNabuCredentials.nabuUserId).toString()
@@ -672,6 +690,7 @@ export default ({ api, coreSagas, networks }) => {
     fetchTiers,
     fetchUser,
     fetchUserCampaigns,
+    fetchUserRiskSettings,
     generateAuthCredentials,
     generateExchangeAuthCredentials,
     generateRetailToken,

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.ts

@@ -21,15 +21,16 @@ import {
   propEq
 } from 'ramda'
 
-import { ExtractSuccess, RemoteDataType } from '@core/types'
+import { ExtractSuccess, RemoteDataType, UserRiskSettings } from '@core/types'
 import { selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 
 import { KYC_STATES, TIERS_STATES, USER_ACTIVATION_STATES } from './model'
-import { UserDataType, UserTradingCurrencies } from './types'
+import { UserDataType } from './types'
 
 export const getUserData = (state: RootState) => state.profile.userData
 export const getUserCampaigns = (state: RootState) => state.profile.userCampaigns
+export const getUserRiskSettings = (state: RootState) => state.profile.userRiskSettings
 
 export const getUserId = compose(lift(prop('id')), getUserData)
 export const getWalletAddresses = compose(lift(prop('walletAddresses')), getUserData)
@@ -166,3 +167,9 @@ export const isExchangeRelinkRequired = (state): RemoteDataType<string, boolean
   lift((user: UserDataType) => {
     return not(isNil(prop('settings', user))) && length(getRemainingCoins(state))
   })(getUserData(state))
+
+export const isFlowInRiskSettings = (state: RootState, flowName: string): boolean => {
+  const userRiskSettings: UserRiskSettings = getUserRiskSettings(state).getOrElse({ flows: [] })
+
+  return userRiskSettings.flows.some((ur) => ur.name === flowName)
+}

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/types.ts

@@ -1,6 +1,12 @@
 import { AxiosError } from 'axios'
 
-import type { NabuAddressType, NabuApiErrorType, RemoteDataType, WalletFiatType } from '@core/types'
+import type {
+  NabuAddressType,
+  NabuApiErrorType,
+  RemoteDataType,
+  UserRiskSettings,
+  WalletFiatType
+} from '@core/types'
 import type { CampaignsType } from 'data/components/identityVerification/types'
 
 import * as AT from './actionTypes'
@@ -147,6 +153,7 @@ export interface ProfileState {
   }
   userCampaigns: RemoteDataType<NabuApiErrorType, UserCampaignsType>
   userData: RemoteDataType<NabuApiErrorType, UserDataType>
+  userRiskSettings: RemoteDataType<string, UserRiskSettings>
   userTiers: RemoteDataType<string, UserTiersType>
 }
 
@@ -321,6 +328,22 @@ interface SigninActionType {
   type: typeof AT.SIGN_IN
 }
 
+interface FetchUserRiskSettingsFailureAction {
+  payload: {
+    error: NabuApiErrorType
+  }
+  type: typeof AT.FETCH_USER_RISK_SETTINGS_FAILURE
+}
+interface FetchUserRiskSettingsLoadingAction {
+  type: typeof AT.FETCH_USER_RISK_SETTINGS_LOADING
+}
+interface FetchUserRiskSettingsSuccessAction {
+  payload: {
+    userRiskSettings: UserRiskSettings
+  }
+  type: typeof AT.FETCH_USER_RISK_SETTINGS_SUCCESS
+}
+
 export type ProfileActionTypes =
   | AuthAndRouteToExchangeAction
   | ClearProfileStateAction
@@ -335,6 +358,9 @@ export type ProfileActionTypes =
   | FetchUserDataFailureAction
   | FetchUserDataLoadingAction
   | FetchUserDataSuccessAction
+  | FetchUserRiskSettingsSuccessAction
+  | FetchUserRiskSettingsLoadingAction
+  | FetchUserRiskSettingsFailureAction
   | LinkFromExchangeAccountAction
   | LinkFromExchangeAccountFailureAction
   | LinkFromExchangeAccountLoadingAction

packages/blockchain-wallet-v4-frontend/src/hooks/useSardine/index.ts

@@ -1 +1,2 @@
 export { useSardine } from './useSardine'
+export { useSardineContext } from './useSardineContext'

packages/blockchain-wallet-v4-frontend/src/hooks/useSardine/useSardineContext.ts

@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux'
+
+import { selectors } from 'data'
+import { RootState } from 'data/rootReducer'
+
+export const useSardineContext = (flowName: string) => {
+  const isFlowInRiskSettings = useSelector((state: RootState) =>
+    selectors.modules.profile.isFlowInRiskSettings(state, flowName)
+  )
+
+  const sardineContext = window?._SardineContext || {}
+  const sardineContextIsReady = !!window?._SardineContext && isFlowInRiskSettings
+
+  return [sardineContextIsReady, sardineContext]
+}
+
+export default useSardineContext

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

@@ -11,6 +11,7 @@ import CoinDisplay from 'components/Display/CoinDisplay'
 import { FlyoutWrapper, Row, Value } from 'components/Flyout'
 import Form from 'components/Form/Form'
 import { WithdrawCheckoutFormValuesType, WithdrawStepEnum } from 'data/types'
+import { useSardineContext } from 'hooks'
 
 import { Props as OwnProps, SuccessStateType } from '.'
 
@@ -47,6 +48,7 @@ const Success: React.FC<InjectedFormProps<WithdrawCheckoutFormValuesType, Props>
   props
 ) => {
   const userCountryCode = props.userData?.address?.country || 'default'
+  const [sardineContextIsReady, sardineContext] = useSardineContext('WITHDRAWAL')
 
   return (
     <Form
@@ -57,8 +59,8 @@ const Success: React.FC<InjectedFormProps<WithdrawCheckoutFormValuesType, Props>
           beneficiary: props.beneficiary || props.defaultMethod || null,
           fiatCurrency: props.fiatCurrency
         })
-        if (window?._SardineContext) {
-          window._SardineContext.updateConfig({
+        if (sardineContextIsReady) {
+          sardineContext.updateConfig({
             flow: 'WITHDRAWAL'
           })
         }

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/AddCardCheckoutDotCom/template.success.tsx

@@ -8,6 +8,7 @@ import { Expanded, Flex } from 'components/Flex'
 import { FlyoutWrapper } from 'components/Flyout'
 import { Padding } from 'components/Padding'
 import { ModalOriginType } from 'data/types'
+import { useSardineContext } from 'hooks'
 
 import { Props as OwnProps, SuccessStateType } from '.'
 
@@ -52,8 +53,9 @@ const Success = ({
   origin,
   pair
 }: Props) => {
-  if (window?._SardineContext) {
-    window._SardineContext.updateConfig({
+  const [sardineContextIsReady, sardineContext] = useSardineContext('CARD_LINK')
+  if (sardineContextIsReady) {
+    sardineContext.updateConfig({
       flow: 'CARD_LINK'
     })
   }

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/CheckoutConfirm/template.success.tsx

@@ -43,7 +43,7 @@ import {
   RecurringBuyPeriods,
   UserDataType
 } from 'data/types'
-import { useDefer3rdPartyScript } from 'hooks'
+import { useDefer3rdPartyScript, useSardineContext } from 'hooks'
 import { isNabuError } from 'services/errors'
 
 import {
@@ -179,6 +179,8 @@ const Success: React.FC<InjectedFormProps<{ form: string }, Props> & Props> = (p
   const [isActiveCoinTooltip, setCoinToolTip] = useState(false)
   const [isActiveFeeTooltip, setFeeToolTip] = useState(true)
   const dispatch = useDispatch()
+  const [sardineContextIsReady, sardineContext] = useSardineContext('ACH_LINK')
+  const [sardineContextIsReadyOB, sardineContextOB] = useSardineContext('OB_LINK')
 
   const [isGooglePayReady] = useDefer3rdPartyScript('https://pay.google.com/gp/p/js/pay.js', {
     attributes: {
@@ -325,15 +327,15 @@ const Success: React.FC<InjectedFormProps<{ form: string }, Props> & Props> = (p
           defaultTo([])(bankAccounts)
         )
         const paymentPartner = prop('partner', bankAccount)
-        if (window?._SardineContext) {
-          window._SardineContext.updateConfig({
+        if (sardineContextIsReady) {
+          sardineContext.updateConfig({
             flow: 'ACH_LINK'
           })
         }
         // if yapily we need the auth screen before creating the order
         if (paymentPartner === BankPartners.YAPILY) {
-          if (window?._SardineContext) {
-            window._SardineContext.updateConfig({
+          if (sardineContextIsReadyOB) {
+            sardineContextOB.updateConfig({
               flow: 'OB_LINK'
             })
           }

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/Methods/index.tsx

@@ -15,6 +15,7 @@ import { Image, Text } from 'blockchain-info-components'
 import { FlyoutContainer, FlyoutContent, FlyoutHeader } from 'components/Flyout/Layout'
 import { Padding } from 'components/Padding'
 import { getCoinFromPair, getFiatFromPair } from 'data/components/buySell/model'
+import { useSardineContext } from 'hooks'
 
 import { Props as OwnProps, SuccessStateType } from '../index'
 import ApplePay from './ApplePay'
@@ -29,6 +30,7 @@ export type Props = OwnProps & SuccessStateType
 const Methods: React.FC<Props> = (props: Props) => {
   const [isApplePayAvailable, setApplePayAvailable] = useState(false)
   const [isGooglePayAvailable, setGooglePayAvailable] = useState(false)
+  const [sardineContextIsReady, sardineContext] = useSardineContext('MOBILE_WALLET_DEPOSIT')
 
   const getType = (value: BSPaymentMethodType) => {
     switch (value.type) {
@@ -260,8 +262,8 @@ const Methods: React.FC<Props> = (props: Props) => {
                   method: applePay.value,
                   mobilePaymentMethod: MobilePaymentType.APPLE_PAY
                 })
-                if (window?._SardineContext) {
-                  window._SardineContext.updateConfig({
+                if (sardineContextIsReady) {
+                  sardineContext.updateConfig({
                     flow: 'MOBILE_WALLET_DEPOSIT'
                   })
                 }
@@ -275,8 +277,8 @@ const Methods: React.FC<Props> = (props: Props) => {
                   method: googlePay.value,
                   mobilePaymentMethod: MobilePaymentType.GOOGLE_PAY
                 })
-                if (window?._SardineContext) {
-                  window._SardineContext.updateConfig({
+                if (sardineContextIsReady) {
+                  sardineContext.updateConfig({
                     flow: 'MOBILE_WALLET_DEPOSIT'
                   })
                 }

packages/blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/template.success.tsx

@@ -24,6 +24,7 @@ import { actions, selectors } from 'data'
 import { RewardsDepositFormType } from 'data/components/interest/types'
 import { RootState } from 'data/rootReducer'
 import { Analytics } from 'data/types'
+import { useSardineContext } from 'hooks'
 import { required } from 'services/forms'
 import { debounce } from 'utils/helpers'
 
@@ -78,6 +79,7 @@ const checkIsAmountUnderDepositLimit = (
 }
 
 const DepositForm: React.FC<InjectedFormProps<{ form: string }, Props> & Props> = (props) => {
+  const [sardineContextIsReady, sardineContext] = useSardineContext('ACH_DEPOSIT')
   const {
     analyticsActions,
     coin,
@@ -154,8 +156,8 @@ const DepositForm: React.FC<InjectedFormProps<{ form: string }, Props> & Props>
       }
     })
 
-    if (window?._SardineContext) {
-      window._SardineContext.updateConfig({
+    if (sardineContextIsReady) {
+      sardineContext.updateConfig({
         flow: isCustodial ? 'ACH_DEPOSIT' : 'OB_DEPOSIT'
       })
     }

packages/blockchain-wallet-v4-frontend/src/modals/Interest/WithdrawalForm/template.success.tsx

@@ -17,6 +17,7 @@ import { selectors } from 'data'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { InterestWithdrawalFormType } from 'data/components/interest/types'
 import { Analytics } from 'data/types'
+import { useSardineContext } from 'hooks'
 import { required } from 'services/forms'
 
 import { amountToCrypto, amountToFiat } from '../conversions'
@@ -51,6 +52,7 @@ const FORM_NAME = 'interestWithdrawalForm'
 
 // eslint-disable-next-line
 const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
+  const [sardineContextIsReady, sardineContext] = useSardineContext('WITHDRAWAL')
   const {
     accountBalances,
     analyticsActions,
@@ -151,8 +153,8 @@ const WithdrawalForm: React.FC<InjectedFormProps<{}, Props> & Props> = (props) =
       withdrawalAmountFiat
     })
     props.setShowSupply(showEDDWithdrawLimit)
-    if (window?._SardineContext) {
-      window._SardineContext.updateConfig({
+    if (sardineContextIsReady) {
+      sardineContext.updateConfig({
         flow: 'WITHDRAWAL'
       })
     }