feat(nabu-auth): template for user conflict error

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -1177,6 +1177,8 @@ type MessagesType = {
   'modals.onboarding.linktoexchangeaccount.na.subtitle-1': "There's a new way to trade. Link your Wallet for instant access. "
   'modals.onboarding.linktoexchangeaccount.success.subtitle-1': 'Your Blockchain Wallet is now connected to Exchange!'
   'modals.onboarding.linktoexchangeaccount.success.title': 'Success!'
+  'modals.nabuuserconflict.title': 'Your Trading Account is linked to another wallet'
+  'modals.nabuuserconflict.body': 'Your Blockchain.com trading account is associated with another wallet. Please log into your wallet starting with {placeholder} for account access.'
   'modals.pairingcode.title': 'Pairing Code'
   'modals.prompt.button': 'Submit'
   'modals.qrcode.scan': 'Scan QR Code'

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

@@ -23,6 +23,7 @@ export enum ModalNamesEnum {
   KYC_TIER_UPGRADE_MODAL = 'KYC_TIER_UPGRADE_MODAL',
   LINK_FROM_EXCHANGE_ACCOUNT_MODAL = 'LINK_FROM_EXCHANGE_ACCOUNT_MODAL',
   LINK_TO_EXCHANGE_ACCOUNT_MODAL = 'LINK_TO_EXCHANGE_ACCOUNT_MODAL',
+  NABU_USER_CONFLICT_REDIRECT = 'NABU_USER_CONFLICT_REDIRECT',
   PAIRING_CODE_MODAL = 'PAIRING_CODE_MODAL',
   RECOVERY_PHRASE_MODAL = 'RECOVERY_PHRASE_MODAL',
   RECURRING_BUYS_MODAL = 'RECURRING_BUYS_MODAL',
@@ -67,6 +68,7 @@ export type ModalOriginType =
   | 'KycDocResubmitGoal'
   | 'KycRequiredStep'
   | 'LoginSaga'
+  | 'NabuUserAuth'
   | 'PaymentProtocolGoal'
   | 'PendingOrder'
   | 'PriceChart'

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

@@ -171,6 +171,11 @@ export default ({ api, coreSagas, networks }) => {
       if (prop('description', e) === userRequiresRestoreError) {
         return yield call(recoverUser)
       }
+      if (prop('status', e) === 409) {
+        yield put(
+          actions.modals.showModal('NABU_USER_CONFLICT_REDIRECT', { origin: 'NabuUserAuth' })
+        )
+      }
       throw e
     }
   }
@@ -293,15 +298,7 @@ export default ({ api, coreSagas, networks }) => {
       state: 'NONE'
     } as UserDataType)
     /* eslint-disable */
-    const {
-      id,
-      address,
-      mobile,
-      mobileVerified,
-      state,
-      kycState,
-      ...userData
-    } = user
+    const { id, address, mobile, mobileVerified, state, kycState, ...userData } = user
     /* eslint-enable */
     const updatedData = { ...userData, ...data }
 
@@ -397,59 +394,43 @@ export default ({ api, coreSagas, networks }) => {
       yield delay(10000)
       /* eslint-disable */
       attemptCount++
-        /* eslint-disable */
+      /* eslint-disable */
       // if 5 minutes has passed, cancel poll and mark as timeout
       if (equals(30, attemptCount)) {
-        yield put(
-          A.linkToExchangeAccountFailure(
-            'Timeout waiting for account connection status.'
-          )
-        )
+        yield put(A.linkToExchangeAccountFailure('Timeout waiting for account connection status.'))
         return
       }
       yield call(fetchUser)
-      const isExchangeAccountLinked = (yield select(
-        S.isExchangeAccountLinked
-      )).getOrElse(false)
+      const isExchangeAccountLinked = (yield select(S.isExchangeAccountLinked)).getOrElse(false)
       if (isExchangeAccountLinked) {
         yield put(A.linkToExchangeAccountSuccess())
       } else {
         yield call(pollForAccountLinkSuccess, attemptCount)
       }
     } catch (e) {
-      yield put(
-        A.linkToExchangeAccountFailure(
-          'Unable to check current account status.'
-        )
-      )
+      yield put(A.linkToExchangeAccountFailure('Unable to check current account status.'))
     }
   }
 
-  const linkToExchangeAccount = function * ({ payload }) {
+  const linkToExchangeAccount = function* ({ payload }) {
     try {
       const { utmCampaign } = payload
       yield put(A.linkToExchangeAccountLoading())
 
       // check if wallet is already linked
-      const isExchangeAccountLinked = (yield select(
-        S.isExchangeAccountLinked
-      )).getOrFail()
+      const isExchangeAccountLinked = (yield select(S.isExchangeAccountLinked)).getOrFail()
       if (isExchangeAccountLinked) {
         throw new Error('Account has already been linked.')
       }
 
       // ensure email address is verified
-      const isEmailVerified = (yield select(
-        selectors.core.settings.getEmailVerified
-      )).getOrFail()
+      const isEmailVerified = (yield select(selectors.core.settings.getEmailVerified)).getOrFail()
       if (!isEmailVerified) {
         throw new Error('Email address is not verified.')
       }
 
       // check if wallet relink should be attempted
-      const isRelinkAttempt = (yield select(
-        S.isExchangeRelinkRequired
-      )).getOrFail()
+      const isRelinkAttempt = (yield select(S.isExchangeRelinkRequired)).getOrFail()
 
       if (isRelinkAttempt) {
         yield put(A.shareWalletAddressesWithExchange())
@@ -459,19 +440,16 @@ export default ({ api, coreSagas, networks }) => {
         const isUserStateNone = (yield select(S.isUserStateNone)).getOrFail()
         if (isUserStateNone) yield call(createUser)
         // get exchange linkId, exchange domain and user email
-        const domains = (yield select(
-          selectors.core.walletOptions.getDomains
-        )).getOrFail()
+        const domains = (yield select(selectors.core.walletOptions.getDomains)).getOrFail()
         const exchangeDomain = prop('exchange', domains)
         const data = yield call(api.createLinkAccountId)
         const exchangeLinkId = prop('linkId', data)
-        const email = (yield select(
-          selectors.core.settings.getEmail
-        )).getOrFail()
+        const email = (yield select(selectors.core.settings.getEmail)).getOrFail()
         const accountDeeplinkUrl = `${exchangeDomain}/trade/link/${exchangeLinkId}?email=${encodeURIComponent(
           email
-        )}&utm_source=web_wallet&utm_medium=referral&utm_campaign=${utmCampaign ||
-          'wallet_exchange_page'}`
+        )}&utm_source=web_wallet&utm_medium=referral&utm_campaign=${
+          utmCampaign || 'wallet_exchange_page'
+        }`
         // share addresses
         yield put(A.shareWalletAddressesWithExchange())
         // simulate wait while allowing user to read modal
@@ -494,8 +472,6 @@ export default ({ api, coreSagas, networks }) => {
     }
   }
 
-
-
   return {
     clearSession,
     createUser,

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/NabuUserConflictRedirect/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { connect, ConnectedProps } from 'react-redux'
+import { compose } from 'redux'
+import styled from 'styled-components'
+
+import { Icon, Modal, Text } from 'blockchain-info-components'
+import { actions } from 'data'
+import modalEnhancer from 'providers/ModalEnhancer'
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+  margin: 30px 0 10px;
+  overflow: hidden;
+  text-align: center;
+`
+const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  text-align: center;
+  margin: 4px 0 14px;
+
+  & > :last-child {
+    margin: 15px 0;
+  }
+`
+
+class NabuUserConflictRedirect extends React.PureComponent<Props> {
+  render() {
+    return (
+      <Modal size='small'>
+        <Header>
+          <Icon
+            name='alert-filled'
+            size='48px'
+            color='orange600'
+            style={{ marginBottom: '16px' }}
+          />
+          <Text size='20px' weight={500}>
+            <FormattedMessage
+              defaultMessage='Your Trading Account is linked to another wallet'
+              id='modals.nabuuserconflict.title'
+            />
+          </Text>
+        </Header>
+        <Body>
+          <Text size='14px' weight={400}>
+            <FormattedMessage
+              defaultMessage='Your Blockchain.com trading account is associated with another wallet. Please log into your wallet starting with {placeholder} for account access.'
+              id='modals.nabuuserconflict.body'
+            />
+          </Text>
+        </Body>
+      </Modal>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  closeModal: () => dispatch(actions.modals.closeModal())
+})
+
+const connector = connect(null, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+const enhance = compose<any>(
+  connect(null, mapDispatchToProps),
+  modalEnhancer('NABU_USER_CONFLICT_REDIRECT'),
+  connector
+)
+
+export default enhance(NabuUserConflictRedirect)

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

@@ -45,6 +45,8 @@ const LinkToExchangeAccount = React.lazy(() => import('./Onboarding/LinkToExchan
 const IdentityVerification = React.lazy(() => import('./Onboarding/KycVerification'))
 const KycDocResubmit = React.lazy(() => import('./Onboarding/KycDocResubmit'))
 const KycTierUpgrade = React.lazy(() => import('./Onboarding/KycTierUpgrade'))
+// @ts-ignore
+const NabuUserConflictRedirect = React.lazy(() => import('./Onboarding/NabuUserConflictRedirect'))
 const SwapGetStarted = React.lazy(() => import('./Onboarding/SwapGetStarted'))
 const UpgradeForAirdrop = React.lazy(() => import('./Onboarding/UpgradeForAirdrop'))
 const Welcome = React.lazy(() => import('./Onboarding/Welcome'))
@@ -131,6 +133,7 @@ const Modals = () => (
       <LockboxShowXPubs />
       <MobileNumberChange />
       <MobileNumberVerify />
+      <NabuUserConflictRedirect />
       <PairingCode />
       <PromptInput />
       <QRCode />