From 76c32928fe9dd803933ce05c716d68f99eabeddb Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Mon, 31 Dec 2018 14:53:16 -0200
Subject: [PATCH] refactor modals to use store instead of state in Sync fix
 https://github.com/brave/brave-browser/issues/2677 fix
 https://github.com/brave/brave-browser/issues/2564 address
 https://github.com/brave/brave-browser/issues/2567

---
 .../donate/components/siteBanner.tsx          |  2 +-
 .../brave_sync/ui/actions/sync_actions.ts     |  9 ++
 components/brave_sync/ui/components/app.tsx   | 53 ++++++++++++
 .../ui/components/disabledContent.tsx         | 57 ++++++++-----
 .../ui/components/enabledContent.tsx          | 65 ++------------
 .../ui/components/errorDialogs/initFailed.tsx | 30 +++++++
 .../components/errorDialogs/missingWords.tsx  | 29 +++++++
 .../ui/components/errorDialogs/noInternet.tsx | 30 +++++++
 .../ui/components/errorDialogs/wrongWords.tsx | 30 +++++++
 .../ui/components/modals/deviceType.tsx       | 84 +++----------------
 .../ui/components/modals/enterSyncCode.tsx    | 77 ++++++++---------
 .../ui/components/modals/removeDevice.tsx     | 13 +--
 .../ui/components/modals/resetSync.tsx        | 17 ++--
 .../ui/components/modals/scanCode.tsx         | 49 +++++------
 .../ui/components/modals/viewSyncCode.tsx     | 48 +++++------
 .../brave_sync/ui/constants/sync_types.ts     |  3 +-
 .../brave_sync/ui/reducers/sync_reducer.ts    |  6 ++
 components/brave_sync/ui/storage.ts           | 12 ++-
 components/definitions/sync.d.ts              | 24 ++++--
 19 files changed, 365 insertions(+), 273 deletions(-)
 create mode 100644 components/brave_sync/ui/components/errorDialogs/initFailed.tsx
 create mode 100644 components/brave_sync/ui/components/errorDialogs/missingWords.tsx
 create mode 100644 components/brave_sync/ui/components/errorDialogs/noInternet.tsx
 create mode 100644 components/brave_sync/ui/components/errorDialogs/wrongWords.tsx

diff --git a/components/brave_rewards/resources/donate/components/siteBanner.tsx b/components/brave_rewards/resources/donate/components/siteBanner.tsx
index 402e0f9f059f..d416f3cba54f 100644
--- a/components/brave_rewards/resources/donate/components/siteBanner.tsx
+++ b/components/brave_rewards/resources/donate/components/siteBanner.tsx
@@ -159,7 +159,7 @@ class Banner extends React.Component<Props, State> {
         social={this.generateSocialLinks()}
         showUnVerifiedNotice={!verified}
         learnMoreNotice={'https://brave.com/faq-rewards/#unclaimed-funds'}
-        addFundsLink={this.addFundsLink}
+        // addFundsLink={this.addFundsLink}
       >
         {description}
       </SiteBanner>
diff --git a/components/brave_sync/ui/actions/sync_actions.ts b/components/brave_sync/ui/actions/sync_actions.ts
index d74a81a12bef..747ce685f242 100644
--- a/components/brave_sync/ui/actions/sync_actions.ts
+++ b/components/brave_sync/ui/actions/sync_actions.ts
@@ -119,6 +119,15 @@ export const resetSyncSetupError = () => {
   return action(types.SYNC_RESET_SETUP_ERROR)
 }
 
+/**
+ * Dispatches a message indicating which Sync modal should be open
+ * @param {Sync.ModalOptions} modalName - the modal that should be either open or closed
+ * @param {boolean} open - whether or not the modal should be visible to the user
+ */
+export const maybeOpenSyncModal = (modalName: Sync.ModalOptions, open: boolean) => {
+  return action(types.SYNC_MAYBE_OPEN_MODAL, { modalName, open })
+}
+
 /**
  * Dispatched by the back-end to inform useful log messages for debugging purposes
  * @param {string} message - the log message
diff --git a/components/brave_sync/ui/components/app.tsx b/components/brave_sync/ui/components/app.tsx
index fa1cccd8ed96..8b40a732bb2f 100644
--- a/components/brave_sync/ui/components/app.tsx
+++ b/components/brave_sync/ui/components/app.tsx
@@ -10,6 +10,19 @@ import { connect } from 'react-redux'
 import DisabledContent from './disabledContent'
 import EnabledContent from './enabledContent'
 
+// Modals
+import DeviceTypeModal from './modals/deviceType'
+import EnterSyncCodeModal from './modals/enterSyncCode'
+import ScanCodeModal from './modals/scanCode'
+import ViewSyncCodeModal from './modals/viewSyncCode'
+import ResetSyncModal from './modals/resetSync'
+
+// Error alerts
+import InitFailedDialog from './errorDialogs/initFailed'
+import MissingWordsDialog from './errorDialogs/missingWords'
+import NoInternetDialog from './errorDialogs/noInternet'
+import WrongWordsDialog from './errorDialogs/wrongWords'
+
 // Utils
 import * as syncActions from '../actions/sync_actions'
 
@@ -29,6 +42,10 @@ export class SyncPage extends React.PureComponent<Props, {}> {
     this.props.actions.onPageLoaded()
   }
 
+  onUserNoticedError = () => {
+    this.props.actions.resetSyncSetupError()
+  }
+
   render () {
     const { syncData, actions } = this.props
 
@@ -38,6 +55,42 @@ export class SyncPage extends React.PureComponent<Props, {}> {
 
     return (
       <div id='syncPage'>
+        {
+           syncData.error === 'ERR_SYNC_WRONG_WORDS' &&
+           <WrongWordsDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+           syncData.error === 'ERR_SYNC_MISSING_WORDS' &&
+           <MissingWordsDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+           syncData.error === 'ERR_SYNC_NO_INTERNET' &&
+           <NoInternetDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+          syncData.error === 'ERR_SYNC_INIT_FAILED' &&
+          <InitFailedDialog onUserNoticedError={this.onUserNoticedError} />
+        }
+        {
+          syncData.modalsOpen.deviceType &&
+          <DeviceTypeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.enterSyncCode &&
+          <EnterSyncCodeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.scanCode &&
+          <ScanCodeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.viewSyncCode &&
+          <ViewSyncCodeModal syncData={syncData} actions={actions} />
+        }
+        {
+          syncData.modalsOpen.resetSync &&
+          <ResetSyncModal syncData={syncData} actions={actions} />
+        }
         {
           syncData.isSyncConfigured && syncData.devices.length > 1
             ? <EnabledContent syncData={syncData} actions={actions} />
diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx
index 3faed65cde79..62fe9e6c48de 100644
--- a/components/brave_sync/ui/components/disabledContent.tsx
+++ b/components/brave_sync/ui/components/disabledContent.tsx
@@ -18,11 +18,10 @@ import {
   DisabledContent
 } from 'brave-ui/features/sync'
 
-import { SyncStartIcon } from 'brave-ui/features/sync/images'
+// Icons
+import { LoaderIcon } from 'brave-ui/components/icons'
 
-// Modals
-import DeviceTypeModal from './modals/deviceType'
-import EnterSyncCodeModal from './modals/enterSyncCode'
+import { SyncStartIcon } from 'brave-ui/features/sync/images'
 
 // Utils
 import { getLocale } from '../../../common/locale'
@@ -33,30 +32,47 @@ interface Props {
 }
 
 interface State {
-  newToSync: boolean
-  existingSyncCode: boolean
+  willCreateNewSyncChain: boolean
 }
 
 export default class SyncDisabledContent extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = {
-      newToSync: false,
-      existingSyncCode: false
+    this.state = { willCreateNewSyncChain: false }
+  }
+
+  componentDidUpdate (prevProps: Props) {
+    // creating the chain can take a while and the operation
+    // resets all sync states so in this case set a loading indicator
+    // until Sync is ready. once ready, open the proper modal
+    if (
+      this.state.willCreateNewSyncChain === true &&
+      prevProps.syncData.thisDeviceName !==
+      this.props.syncData.thisDeviceName
+    ) {
+      this.props.actions.maybeOpenSyncModal('deviceType', true)
+      // modal is open, reset loading state
+      this.setState({ willCreateNewSyncChain: false })
     }
   }
 
   onClickNewSyncChainButton = () => {
-    this.setState({ newToSync: !this.state.newToSync })
+    // once user clicks "start a new sync chain", create the chain
+    this.setState({ willCreateNewSyncChain: true })
+
+    const { thisDeviceName } = this.props.syncData
+    if (thisDeviceName === '') {
+      this.props.actions.onSetupNewToSync('')
+    }
   }
 
   onClickEnterSyncChainCodeButton = () => {
-    this.setState({ existingSyncCode: !this.state.existingSyncCode })
+    this.props.actions.maybeOpenSyncModal('enterSyncCode', true)
   }
 
   render () {
-    const { actions, syncData } = this.props
-    const { newToSync, existingSyncCode } = this.state
+    const { syncData } = this.props
+    const { willCreateNewSyncChain } = this.state
 
     if (!syncData) {
       return null
@@ -65,16 +81,6 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
     return (
       <DisabledContent>
         <Main>
-          {
-            newToSync
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
-              : null
-          }
-          {
-            existingSyncCode
-              ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
-              : null
-          }
           <SyncCard>
             <TableGrid>
               <SyncStartIcon />
@@ -87,6 +93,11 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
                     type='accent'
                     onClick={this.onClickNewSyncChainButton}
                     text={getLocale('startSyncChain')}
+                    disabled={willCreateNewSyncChain}
+                    icon={{
+                      position: 'after',
+                      image: willCreateNewSyncChain && <LoaderIcon />
+                    }}
                   />
                   <Button
                     level='secondary'
diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx
index 070ec5ddb3c4..f8eab5ddb9b4 100644
--- a/components/brave_sync/ui/components/enabledContent.tsx
+++ b/components/brave_sync/ui/components/enabledContent.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { Button, AlertBox } from 'brave-ui'
+import { Button } from 'brave-ui'
 import { CloseCircleIcon } from 'brave-ui/components/icons'
 import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
 import { Toggle } from 'brave-ui/features/shields'
@@ -16,7 +16,6 @@ import {
   Title,
   Paragraph,
   SectionBlock,
-  SubTitle,
   TableRowDevice,
   TableRowRemove,
   TableRowRemoveButton,
@@ -29,9 +28,6 @@ import {
 
 // Modals
 import RemoveDeviceModal from './modals/removeDevice'
-import ViewSyncCodeModal from './modals/viewSyncCode'
-import DeviceTypeModal from './modals/deviceType'
-import ResetSyncModal from './modals/resetSync'
 
 // Utils
 import { getLocale } from '../../../common/locale'
@@ -43,9 +39,6 @@ interface Props {
 
 interface State {
   removeDevice: boolean
-  viewSyncCode: boolean
-  addDevice: boolean
-  resetSync: boolean
   deviceToRemoveName: string | undefined
   deviceToRemoveId: string | undefined
 }
@@ -55,9 +48,6 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     super(props)
     this.state = {
       removeDevice: false,
-      viewSyncCode: false,
-      addDevice: false,
-      resetSync: false,
       deviceToRemoveName: '',
       deviceToRemoveId: ''
     }
@@ -141,20 +131,16 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
     })
   }
 
-  onUserNoticedError = () => {
-    this.props.actions.resetSyncSetupError()
-  }
-
   onClickViewSyncCodeButton = () => {
-    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+    this.props.actions.maybeOpenSyncModal('viewSyncCode', true)
   }
 
   onClickAddDeviceButton = () => {
-    this.setState({ addDevice: !this.state.addDevice })
+    this.props.actions.maybeOpenSyncModal('deviceType', true)
   }
 
   onClickResetSyncButton = () => {
-    this.setState({ resetSync: !this.state.resetSync })
+    this.props.actions.maybeOpenSyncModal('resetSync', true)
   }
 
   onSyncBookmarks = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -163,14 +149,7 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
 
   render () {
     const { actions, syncData } = this.props
-    const {
-      removeDevice,
-      viewSyncCode,
-      addDevice,
-      resetSync,
-      deviceToRemoveName,
-      deviceToRemoveId
-    } = this.state
+    const { deviceToRemoveName, deviceToRemoveId } = this.state
 
     if (!syncData) {
       return null
@@ -180,48 +159,16 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
       <EnabledContent>
         <Main>
           {
-            syncData.error === 'ERR_SYNC_NO_INTERNET'
-            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-                <Title>{getLocale('errorNoInternetTitle')}</Title>
-                <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
-              </AlertBox>
-            : null
-          }
-          {
-            syncData.error === 'ERR_SYNC_INIT_FAILED'
-            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-                <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
-                <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
-              </AlertBox>
-            : null
-          }
-          {
-            removeDevice
+            syncData.modalsOpen.removeDevice
               ? (
                 <RemoveDeviceModal
                   deviceName={deviceToRemoveName}
                   deviceId={Number(deviceToRemoveId)}
                   actions={actions}
-                  onClose={this.onClickRemoveDeviceButton}
                 />
               )
               : null
           }
-          {
-            viewSyncCode
-              ? <ViewSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickViewSyncCodeButton} />
-              : null
-          }
-          {
-            addDevice
-              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
-              : null
-          }
-          {
-            resetSync
-              ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
-              : null
-          }
           <SyncCard>
             <Title level={2}>{getLocale('braveSync')}</Title>
             <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
diff --git a/components/brave_sync/ui/components/errorDialogs/initFailed.tsx b/components/brave_sync/ui/components/errorDialogs/initFailed.tsx
new file mode 100644
index 000000000000..f9910b7061e4
--- /dev/null
+++ b/components/brave_sync/ui/components/errorDialogs/initFailed.tsx
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, SubTitle } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onUserNoticedError: () => void
+}
+
+export default class InitFailed extends React.PureComponent<Props, {}> {
+  render () {
+    const { onUserNoticedError } = this.props
+    return (
+      <AlertBox okString={getLocale('ok')} onClickOk={onUserNoticedError}>
+        <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
+        <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
+      </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/errorDialogs/missingWords.tsx b/components/brave_sync/ui/components/errorDialogs/missingWords.tsx
new file mode 100644
index 000000000000..42d10bf10049
--- /dev/null
+++ b/components/brave_sync/ui/components/errorDialogs/missingWords.tsx
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onUserNoticedError: () => void
+}
+
+export default class MissingWords extends React.PureComponent<Props, {}> {
+  render () {
+    const { onUserNoticedError } = this.props
+    return (
+      <AlertBox okString={getLocale('ok')} onClickOk={onUserNoticedError}>
+        <Title>{getLocale('errorMissingCodeTitle')}</Title>
+      </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/errorDialogs/noInternet.tsx b/components/brave_sync/ui/components/errorDialogs/noInternet.tsx
new file mode 100644
index 000000000000..4d122037ee42
--- /dev/null
+++ b/components/brave_sync/ui/components/errorDialogs/noInternet.tsx
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, SubTitle } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onUserNoticedError: () => void
+}
+
+export default class NoInternet extends React.PureComponent<Props, {}> {
+  render () {
+    const { onUserNoticedError } = this.props
+    return (
+      <AlertBox okString={getLocale('ok')} onClickOk={onUserNoticedError}>
+        <Title>{getLocale('errorNoInternetTitle')}</Title>
+        <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
+    </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/errorDialogs/wrongWords.tsx b/components/brave_sync/ui/components/errorDialogs/wrongWords.tsx
new file mode 100644
index 000000000000..e30e59651eff
--- /dev/null
+++ b/components/brave_sync/ui/components/errorDialogs/wrongWords.tsx
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, SubTitle } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onUserNoticedError: () => void
+}
+
+export default class WrongWords extends React.PureComponent<Props, {}> {
+  render () {
+    const { onUserNoticedError } = this.props
+    return (
+      <AlertBox okString={getLocale('ok')} onClickOk={onUserNoticedError}>
+        <Title>{getLocale('errorWrongCodeTitle')}</Title>
+        <SubTitle>{getLocale('errorWrongCodeDescription')}</SubTitle>
+      </AlertBox>
+    )
+  }
+}
diff --git a/components/brave_sync/ui/components/modals/deviceType.tsx b/components/brave_sync/ui/components/modals/deviceType.tsx
index d86dedfcbbb6..581ebc2e0cbe 100644
--- a/components/brave_sync/ui/components/modals/deviceType.tsx
+++ b/components/brave_sync/ui/components/modals/deviceType.tsx
@@ -5,12 +5,11 @@
 import * as React from 'react'
 
 // Components
-import { Modal, AlertBox } from 'brave-ui'
+import { Modal } from 'brave-ui'
 
 // Feature-specific components
 import {
   Title,
-  SubTitle,
   ModalHeader,
   ModalTitle,
   DeviceGrid,
@@ -18,10 +17,6 @@ import {
   ModalSubTitle
 } from 'brave-ui/features/sync'
 
-// Modals
-import ViewSyncCode from './viewSyncCode'
-import ScanCode from './scanCode'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -30,90 +25,31 @@ import { SyncDesktopIcon, SyncMobileIcon } from 'brave-ui/features/sync/images'
 
 interface Props {
   syncData: Sync.State
-  onClose: () => void
   actions: any
 }
 
-interface State {
-  viewSyncCode: boolean
-  scanCode: boolean
-}
-
-export default class DeviceTypeModal extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      viewSyncCode: false,
-      scanCode: false
-    }
-  }
-
-  componentWillMount () {
-    // once the screen is rendered, create a sync chain.
-    // this allow us to request the qr code and sync words immediately
-    const { thisDeviceName } = this.props.syncData
-    if (thisDeviceName === '') {
-      this.props.actions.onSetupNewToSync('')
-    }
-  }
-
+export default class DeviceTypeModal extends React.PureComponent<Props, {}> {
   onUserNoticedError = () => {
     this.props.actions.resetSyncSetupError()
-    this.props.onClose()
-  }
-
-  onClickClose = () => {
-    const { devices, isSyncConfigured } = this.props.syncData
-    // sync is enabled when at least 2 devices are in the chain.
-    // this modal works both with sync enabled and disabled states.
-    // in case user opens it in the enabled content screen,
-    // check there are 2 devices in chain before reset
-    if (isSyncConfigured && devices.length < 2) {
-      this.props.actions.onSyncReset()
-    }
-    this.props.onClose()
   }
 
   onClickPhoneTabletButton = () => {
-    this.setState({ scanCode: !this.state.scanCode })
+    this.props.actions.maybeOpenSyncModal('scanCode', true)
   }
 
   onClickComputerButton = () => {
-    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+    this.props.actions.maybeOpenSyncModal('viewSyncCode', true)
   }
 
   render () {
-    const { actions, syncData } = this.props
-    const { viewSyncCode, scanCode } = this.state
+    const { syncData } = this.props
+
+    if (!syncData.isSyncConfigured) {
+      return null
+    }
 
     return (
-      <Modal id='deviceTypeModal' onClose={this.onClickClose} size='small'>
-        {
-          syncData.error === 'ERR_SYNC_NO_INTERNET'
-          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-              <Title>{getLocale('errorNoInternetTitle')}</Title>
-              <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
-            </AlertBox>
-          : null
-        }
-        {
-          syncData.error === 'ERR_SYNC_INIT_FAILED'
-          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-              <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
-              <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
-            </AlertBox>
-          : null
-        }
-        {
-          scanCode
-          ? <ScanCode syncData={syncData} actions={actions} onClose={this.onClickPhoneTabletButton} />
-          : null
-        }
-        {
-          viewSyncCode
-            ? <ViewSyncCode syncData={syncData} actions={actions} onClose={this.onClickComputerButton} />
-            : null
-        }
+      <Modal id='deviceTypeModal' displayCloseButton={false} size='small'>
         <ModalHeader>
           <div>
             <ModalTitle level={1}>{getLocale('letsSync')}</ModalTitle>
diff --git a/components/brave_sync/ui/components/modals/enterSyncCode.tsx b/components/brave_sync/ui/components/modals/enterSyncCode.tsx
index 4e7e9f734e49..6ec5b4179fce 100644
--- a/components/brave_sync/ui/components/modals/enterSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/enterSyncCode.tsx
@@ -5,7 +5,8 @@
 import * as React from 'react'
 
 // Components
-import { AlertBox, Button, Modal, TextAreaClipboard } from 'brave-ui'
+import { Button, Modal, TextAreaClipboard } from 'brave-ui'
+import { LoaderIcon } from 'brave-ui/components/icons'
 
 // Feature-specific components
 import {
@@ -14,9 +15,7 @@ import {
   ModalSubTitle,
   ModalContent,
   TwoColumnButtonGrid,
-  OneColumnButtonGrid,
-  Title,
-  SubTitle
+  OneColumnButtonGrid
 } from 'brave-ui/features/sync'
 
 // Utils
@@ -25,72 +24,60 @@ import { getLocale } from '../../../../common/locale'
 interface Props {
   syncData: Sync.State
   actions: any
-  onClose: () => void
 }
 interface State {
   passphrase: string
+  willCreateNewSyncChainFromCode: boolean
 }
 
 export default class EnterSyncCodeModal extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      passphrase: ''
+      passphrase: '',
+      willCreateNewSyncChainFromCode: false
     }
   }
 
-  onUserNoticedError = () => {
-    this.props.actions.resetSyncSetupError()
+  componentDidUpdate (prevProps: Props) {
+    // when component updates with a different config,
+    // disable the loading state and unfreeze the modal.
+    // at this point the component auto refresh and lead
+    // the user to the enabledContent view
+    if (
+      this.props.syncData.error !== undefined ||
+      (
+        this.state.willCreateNewSyncChainFromCode &&
+        prevProps.syncData.isSyncConfigured !==
+        this.props.syncData.isSyncConfigured
+      )
+    ) {
+      this.setState({ willCreateNewSyncChainFromCode: false })
+    }
   }
 
   onEnterPassphrase = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({ passphrase: event.target.value })
   }
 
+  onDismissModal = () => {
+    this.props.actions.maybeOpenSyncModal('enterSyncCode', false)
+  }
+
   onClickConfirmSyncCode = () => {
     const { error, thisDeviceName } = this.props.syncData
     if (thisDeviceName !== '' || error) {
       return
     }
     const { passphrase } = this.state
+    this.setState({ willCreateNewSyncChainFromCode: true })
     this.props.actions.onSetupSyncHaveCode(passphrase, '')
   }
 
   render () {
-    const { onClose, syncData } = this.props
+    const { willCreateNewSyncChainFromCode } = this.state
     return (
-      <Modal id='enterSyncCodeModal' onClose={onClose} size='small'>
-        {
-           syncData.error === 'ERR_SYNC_WRONG_WORDS'
-           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-               <Title>{getLocale('errorWrongCodeTitle')}</Title>
-               <SubTitle>{getLocale('errorWrongCodeDescription')}</SubTitle>
-           </AlertBox>
-           : null
-        }
-        {
-           syncData.error === 'ERR_SYNC_MISSING_WORDS'
-           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-               <Title>{getLocale('errorMissingCodeTitle')}</Title>
-           </AlertBox>
-           : null
-        }
-        {
-           syncData.error === 'ERR_SYNC_NO_INTERNET'
-           ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-               <Title>{getLocale('errorNoInternetTitle')}</Title>
-               <SubTitle>{getLocale('errorNoInternetDescription')}</SubTitle>
-             </AlertBox>
-           : null
-        }
-        {
-          syncData.error === 'ERR_SYNC_INIT_FAILED'
-          ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
-              <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
-              <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
-            </AlertBox>
-          : null
-        }
+      <Modal id='enterSyncCodeModal' displayCloseButton={false} size='small'>
         <ModalHeader>
           <div>
             <ModalTitle level={1}>{getLocale('enterSyncCode')}</ModalTitle>
@@ -110,7 +97,8 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
               level='secondary'
               type='accent'
               size='medium'
-              onClick={onClose}
+              disabled={willCreateNewSyncChainFromCode}
+              onClick={this.onDismissModal}
               text={getLocale('cancel')}
             />
           </OneColumnButtonGrid>
@@ -120,6 +108,11 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
             size='medium'
             onClick={this.onClickConfirmSyncCode}
             text={getLocale('confirmCode')}
+            disabled={willCreateNewSyncChainFromCode}
+            icon={{
+              position: 'after',
+              image: willCreateNewSyncChainFromCode && <LoaderIcon />
+            }}
           />
         </TwoColumnButtonGrid>
       </Modal>
diff --git a/components/brave_sync/ui/components/modals/removeDevice.tsx b/components/brave_sync/ui/components/modals/removeDevice.tsx
index 2a445893a9da..332d4b8e8ba6 100644
--- a/components/brave_sync/ui/components/modals/removeDevice.tsx
+++ b/components/brave_sync/ui/components/modals/removeDevice.tsx
@@ -21,7 +21,6 @@ import {
 import { getLocale } from '../../../../common/locale'
 
 interface Props {
-  onClose: (event?: React.MouseEvent<HTMLButtonElement>) => void
   actions: any
   deviceName: string | undefined
   deviceId: number | undefined
@@ -31,14 +30,18 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
   onClickConfirmRemoveDeviceButton = () => {
     const { deviceName, deviceId } = this.props
     this.props.actions.onRemoveDevice(Number(deviceId), deviceName)
-    this.props.onClose()
+    this.props.actions.maybeOpenSyncModal('removeDevice', false)
+  }
+
+  onDismissModal = () => {
+    this.props.actions.maybeOpenSyncModal('removeDevice', false)
   }
 
   render () {
-    const { onClose, deviceName, deviceId } = this.props
+    const { deviceName, deviceId } = this.props
 
     return (
-      <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
+      <Modal id='removeMainDeviceModal' displayCloseButton={false} size='small'>
         <ModalHeader>
           <ModalTitle level={1}>{getLocale('remove')} “{deviceName}” {getLocale('thisSyncChain')}?</ModalTitle>
         </ModalHeader>
@@ -59,7 +62,7 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
                 level='secondary'
                 type='accent'
                 size='medium'
-                onClick={onClose}
+                onClick={this.onDismissModal}
                 text={getLocale('cancel')}
               />
             </OneColumnButtonGrid>
diff --git a/components/brave_sync/ui/components/modals/resetSync.tsx b/components/brave_sync/ui/components/modals/resetSync.tsx
index 56b32eb4691a..5d2914e6a73f 100644
--- a/components/brave_sync/ui/components/modals/resetSync.tsx
+++ b/components/brave_sync/ui/components/modals/resetSync.tsx
@@ -25,7 +25,6 @@ import { getLocale } from '../../../../common/locale'
 interface Props {
   syncData: Sync.State
   actions: any
-  onClose: () => void
 }
 
 interface State {
@@ -38,7 +37,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
     this.state = { showAlert: false }
   }
 
-  onResetSync = () => {
+  onClickResetSync = () => {
     this.setState({ showAlert: !this.state.showAlert })
   }
 
@@ -46,8 +45,12 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
     this.props.actions.onSyncReset()
   }
 
+  onDismissModal = () => {
+    this.props.actions.maybeOpenSyncModal('resetSync', false)
+  }
+
   render () {
-    const { onClose, syncData } = this.props
+    const { syncData } = this.props
     const { showAlert } = this.state
 
     if (!syncData) {
@@ -55,7 +58,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
     }
 
     return (
-      <Modal id='resetSyncModal' onClose={onClose} size='small'>
+      <Modal id='resetSyncModal' displayCloseButton={false} size='small'>
         {
           showAlert
           ? (
@@ -63,7 +66,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
                 okString={getLocale('ok')}
                 onClickOk={this.onConfirmResetSync}
                 cancelString={getLocale('cancel')}
-                onClickCancel={onClose}
+                onClickCancel={this.onClickResetSync}
               >
                 <Title level={1}>{getLocale('areYouSure')}</Title>
               </AlertBox>
@@ -86,7 +89,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
                 level='secondary'
                 type='accent'
                 size='medium'
-                onClick={onClose}
+                onClick={this.onDismissModal}
                 text={getLocale('cancel')}
               />
             </OneColumnButtonGrid>
@@ -94,7 +97,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
               level='primary'
               type='accent'
               size='medium'
-              onClick={this.onResetSync}
+              onClick={this.onClickResetSync}
               text={getLocale('remove')}
             />
           </TwoColumnButtonGrid>
diff --git a/components/brave_sync/ui/components/modals/scanCode.tsx b/components/brave_sync/ui/components/modals/scanCode.tsx
index ef4ff8355a70..a3e3c66c9bef 100644
--- a/components/brave_sync/ui/components/modals/scanCode.tsx
+++ b/components/brave_sync/ui/components/modals/scanCode.tsx
@@ -19,9 +19,6 @@ import {
   Link
 } from 'brave-ui/features/sync'
 
-// Modals
-import ViewSyncCode from './viewSyncCode'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
@@ -31,40 +28,40 @@ import { SyncMobilePicture, QRCode } from 'brave-ui/features/sync/images'
 interface Props {
   syncData: Sync.State
   actions: any
-  onClose: () => void
-}
-interface State {
-  viewSyncCode: boolean
 }
 
-export default class ScanCodeModal extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      viewSyncCode: false
+export default class ScanCodeModal extends React.PureComponent<Props, {}> {
+  componentDidMount () {
+    const { scanCode, deviceType } = this.props.syncData.modalsOpen
+    if (scanCode) {
+      this.props.actions.maybeOpenSyncModal('viewSyncCode', false)
+    }
+    if (deviceType) {
+      this.props.actions.maybeOpenSyncModal('deviceType', false)
     }
   }
 
   onClickEnterCodeWordsInstead = () => {
-    this.setState({ viewSyncCode: !this.state.viewSyncCode })
+    this.props.actions.maybeOpenSyncModal('viewSyncCode', true)
   }
 
-  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    this.props.onClose()
+  onDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // sync is enabled when at least 2 devices are in the chain.
+    // this modal works both with sync enabled and disabled states.
+    // in case user opens it in the enabled content screen,
+    // check there are 2 devices in chain before reset
+    if (isSyncConfigured && devices.length < 2) {
+      this.props.actions.onSyncReset()
+    }
+    this.props.actions.maybeOpenSyncModal('scanCode', false)
   }
 
   render () {
-    const { onClose, syncData, actions } = this.props
-    const { viewSyncCode } = this.state
+    const { syncData } = this.props
 
     return (
       <Modal id='scanCodeModal' displayCloseButton={false} size='small'>
-        {
-          viewSyncCode
-            ? <ViewSyncCode syncData={syncData} actions={actions} onClose={this.onClickEnterCodeWordsInstead} />
-            : null
-        }
         <ModalHeader>
           <div>
             <Title level={1}>{getLocale('scanThisCode')}</Title>
@@ -83,7 +80,7 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
         </ScanGrid>
         <ThreeColumnButtonGrid>
         <div>
-            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
           </div>
           <div>
             <Button
@@ -95,11 +92,11 @@ export default class ScanCodeModal extends React.PureComponent<Props, State> {
             />
           </div>
           <div>
-          <Button
+            <Button
               level='primary'
               type='accent'
               size='medium'
-              onClick={onClose}
+              onClick={this.onDismissModal}
               disabled={syncData.devices.length < 2}
               text={
                 syncData.devices.length < 2
diff --git a/components/brave_sync/ui/components/modals/viewSyncCode.tsx b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
index 1db60173bac9..5593a64d1dbe 100644
--- a/components/brave_sync/ui/components/modals/viewSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
@@ -18,50 +18,46 @@ import {
   Link
 } from 'brave-ui/features/sync'
 
-// Modals
-import ScanCode from './scanCode'
-
 // Utils
 import { getLocale } from '../../../../common/locale'
 
 interface Props {
   syncData: Sync.State
   actions: any
-  onClose: () => void
-}
-
-interface State {
-  useCameraInstead: boolean
 }
 
-export default class ViewSyncCodeModal extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      useCameraInstead: false
+export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
+  componentDidMount () {
+    const { scanCode, deviceType } = this.props.syncData.modalsOpen
+    if (scanCode) {
+      this.props.actions.maybeOpenSyncModal('scanCode', false)
+    }
+    if (deviceType) {
+      this.props.actions.maybeOpenSyncModal('deviceType', false)
     }
   }
 
   onClickUseCameraInsteadButton = () => {
-    this.setState({ useCameraInstead: !this.state.useCameraInstead })
+    this.props.actions.maybeOpenSyncModal('scanCode', true)
   }
 
-  onCancel = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault()
-    this.props.onClose()
+  onDismissModal = () => {
+    const { devices, isSyncConfigured } = this.props.syncData
+    // sync is enabled when at least 2 devices are in the chain.
+    // this modal works both with sync enabled and disabled states.
+    // in case user opens it in the enabled content screen,
+    // check there are 2 devices in chain before reset
+    if (isSyncConfigured && devices.length < 2) {
+      this.props.actions.onSyncReset()
+    }
+    this.props.actions.maybeOpenSyncModal('viewSyncCode', false)
   }
 
   render () {
-    const { onClose, actions, syncData } = this.props
-    const { useCameraInstead } = this.state
+    const { syncData } = this.props
 
     return (
       <Modal id='viewSyncCodeModal' displayCloseButton={false} size='small'>
-        {
-          useCameraInstead
-            ? <ScanCode syncData={syncData} actions={actions} onClose={this.onClickUseCameraInsteadButton} />
-            : null
-        }
         <ModalHeader>
           <div>
             <Title level={1}>{getLocale('chainCode')}</Title>
@@ -84,7 +80,7 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
           }
         <ThreeColumnButtonGrid>
           <div>
-            <Link onClick={this.onCancel}>{getLocale('cancel')}</Link>
+            <Link onClick={this.onDismissModal}>{getLocale('cancel')}</Link>
           </div>
           <div>
             <Button
@@ -99,7 +95,7 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, State>
             level='primary'
             type='accent'
             size='medium'
-            onClick={onClose}
+            onClick={this.onDismissModal}
             disabled={syncData.devices.length < 2}
             text={
               syncData.devices.length < 2
diff --git a/components/brave_sync/ui/constants/sync_types.ts b/components/brave_sync/ui/constants/sync_types.ts
index ac14364769ad..51e3ff067391 100644
--- a/components/brave_sync/ui/constants/sync_types.ts
+++ b/components/brave_sync/ui/constants/sync_types.ts
@@ -17,5 +17,6 @@ export const enum types {
   SYNC_SETUP_SYNC_HAVE_CODE = '@@sync/SYNC_SETUP_SYNC_HAVE_CODE',
   SYNC_SETUP_ERROR = '@@sync/SYNC_SETUP_ERROR',
   SYNC_RESET_SETUP_ERROR = '@@sync/SYNC_RESET_SETUP_ERROR',
-  SYNC_ON_LOG_MESSAGE = '@@sync/SYNC_ON_LOG_MESSAGE'
+  SYNC_ON_LOG_MESSAGE = '@@sync/SYNC_ON_LOG_MESSAGE',
+  SYNC_MAYBE_OPEN_MODAL = '@@sync/SYNC_MAYBE_OPEN_MODAL'
 }
diff --git a/components/brave_sync/ui/reducers/sync_reducer.ts b/components/brave_sync/ui/reducers/sync_reducer.ts
index 3c8b9de3e740..d02fcaceb4a7 100644
--- a/components/brave_sync/ui/reducers/sync_reducer.ts
+++ b/components/brave_sync/ui/reducers/sync_reducer.ts
@@ -129,6 +129,12 @@ const syncReducer: Reducer<Sync.State | undefined> = (state: Sync.State | undefi
       state = { ...state, error: undefined }
       break
 
+    case types.SYNC_MAYBE_OPEN_MODAL:
+      const modalsOpen: Sync.ModalOptions = { ...state.modalsOpen }
+      modalsOpen[payload.modalName] = payload.open
+      state = { ...state, modalsOpen }
+      break
+
     case types.SYNC_ON_LOG_MESSAGE:
       if (process.env.TARGET_GEN_DIR !== 'prod') {
         console.info('[SYNC] log message received from sync:', payload.message)
diff --git a/components/brave_sync/ui/storage.ts b/components/brave_sync/ui/storage.ts
index b2ce25ff15f2..4449bd5d71da 100644
--- a/components/brave_sync/ui/storage.ts
+++ b/components/brave_sync/ui/storage.ts
@@ -5,7 +5,7 @@
 // Utils
 import { debounce } from '../../common/debounce'
 
-const keyName = 'sync-data_t'
+const keyName = 'sync-data_test'
 
 export const defaultState = {
   thisDeviceName: '',
@@ -17,7 +17,15 @@ export const defaultState = {
   syncBookmarks: true,
   syncSavedSiteSettings: true,
   syncBrowsingHistory: true,
-  error: undefined
+  error: undefined,
+  modalsOpen: {
+    deviceType: false,
+    enterSyncCode: false,
+    removeDevice: false,
+    resetSync: false,
+    scanCode: false,
+    viewSyncCode: false
+  }
 }
 
 const cleanData = (state: Sync.State) => {
diff --git a/components/definitions/sync.d.ts b/components/definitions/sync.d.ts
index 4ee15a3e1f2d..edfbb22aaa21 100644
--- a/components/definitions/sync.d.ts
+++ b/components/definitions/sync.d.ts
@@ -23,12 +23,21 @@ declare namespace Sync {
     lastActive: number
   }
 
-export type SetupErrorType =
-  'ERR_SYNC_NO_INTERNET' |
-  'ERR_SYNC_MISSING_WORDS' |
-  'ERR_SYNC_WRONG_WORDS' |
-  'ERR_SYNC_INIT_FAILED' |
-  undefined
+  export type SetupErrorType =
+    'ERR_SYNC_NO_INTERNET' |
+    'ERR_SYNC_MISSING_WORDS' |
+    'ERR_SYNC_WRONG_WORDS' |
+    'ERR_SYNC_INIT_FAILED' |
+    undefined
+
+  export interface ModalOptions {
+    deviceType?: boolean
+    enterSyncCode?: boolean
+    removeDevice?: boolean
+    resetSync?: boolean
+    scanCode?: boolean
+    viewSyncCode?: boolean
+  }
 
   export interface State {
     thisDeviceName: string
@@ -40,6 +49,7 @@ export type SetupErrorType =
     syncBookmarks: boolean
     syncSavedSiteSettings: boolean
     syncBrowsingHistory: boolean
-    error: SetupErrorType
+    error: SetupErrorType,
+    modalsOpen: ModalOptions
   }
 }