Adds transition overlay

Resolves #11389
Resolves #11340
Resolves #11333
Resolves #11338

Auditors: @bsclifton

Test Plan:

app/browser/api/ledger.js

@@ -155,20 +155,22 @@ const notifications = {
   },
   onLaunch: (state) => {
     if (!getSetting(settings.PAYMENTS_ENABLED)) {
-      return
+      return state
     }
 
     // One time conversion of wallet
     const isNewInstall = state.get('firstRunTimestamp') === state.getIn(['migrations', 'batMercuryTimestamp'])
     const hasUpgradedWallet = state.getIn(['migrations', 'batMercuryTimestamp']) !== state.getIn(['migrations', 'btc2BatTimestamp'])
     if (!isNewInstall && !hasUpgradedWallet) {
       module.exports.transitionWalletToBat(state)
+    } else {
+      state = state.setIn(['migrations', 'btc2BatTransitionDone'], true)
     }
 
     if (hasFunds(state)) {
       // Don't bother processing the rest, which are only notifications.
       if (!getSetting(settings.PAYMENTS_NOTIFICATIONS)) {
-        return
+        return state
       }
 
       // Show one-time BAT conversion message:
@@ -183,6 +185,8 @@ const notifications = {
         notifications.showBraveWalletUpdated()
       }
     }
+
+    return state
   },
   onInterval: (state) => {
     if (getSetting(settings.PAYMENTS_ENABLED)) {
@@ -2002,7 +2006,7 @@ const onInitRead = (state, parsedData) => {
   getBalance(state)
 
   // Show relevant browser notifications on launch
-  notifications.onLaunch(state)
+  state = notifications.onLaunch(state)
 
   return state
 }
@@ -2270,6 +2274,7 @@ const transitionWalletToBat = (state) => {
         newClient = true
         appActions.onLedgerCallback(result, random.randomInt({ min: miliseconds.minute, max: 10 * miliseconds.minute }))
         appActions.onBitcoinToBatTransitioned()
+        notifications.showBraveWalletUpdated()
       }
     })
   } catch (ex) {

app/browser/reducers/ledgerReducer.js

@@ -320,6 +320,7 @@ const ledgerReducer = (state, action, immutableAction) => {
     case appConstants.APP_ON_BTC_TO_BAT_TRANSITIONED:
       {
         state = state.setIn(['migrations', 'btc2BatTimestamp'], new Date().getTime())
+        state = state.setIn(['migrations', 'btc2BatTransitionDone'], true)
         break
       }
     case appConstants.APP_ON_LEDGER_QR_GENERATED:

app/browser/tabs.js

@@ -158,6 +158,7 @@ const updateAboutDetails = (tab, tabValue) => {
   const ledgerInfo = ledgerState.getInfoProps(appState)
   const synopsis = ledgerState.getAboutData(appState)
   const wizardData = ledgerState.geWizardData(appState)
+  const migration = appState.get('migrations')
   const preferencesData = appState.getIn(['about', 'preferences'])
   const appSettings = appState.get('settings')
   let allSiteSettings = appState.get('siteSettings')
@@ -198,6 +199,7 @@ const updateAboutDetails = (tab, tabValue) => {
       .merge(synopsis)
       .merge(preferencesData)
       .set('wizardData', wizardData)
+      .set('migration', migration)
     tab.send(messages.LEDGER_UPDATED, ledgerData.toJS())
     tab.send(messages.SETTINGS_UPDATED, appSettings.toJS())
     tab.send(messages.SITE_SETTINGS_UPDATED, allSiteSettings.toJS())

app/extensions/brave/locales/en-US/preferences.properties

@@ -166,6 +166,8 @@ lastContribution=Last contribution:
 lastPass=LastPass®
 ledgerBackupContent=Below, you will find the anonymized recovery key that is required if you ever lose access to this computer.<br><strong>Make sure you keep this key private, or else your wallet will be compromised.</strong>
 ledgerBackupTitle=Backup your Brave wallet
+leaderLoaderText1=We are now converting your Brave Wallet from Bitcoin to BAT (Basic Attention Token).
+leaderLoaderText2=This can take a few minutes
 ledgerPaymentsShown=Brave Payments
 ledgerRecoveryContent=Your previous wallet will now be used. Your new wallet will be discarded.
 ledgerRecoveryFailedMessage=Please re-enter keys or try different keys.

app/renderer/components/preferences/payment/enabledContent.js

@@ -10,6 +10,8 @@ const moment = require('moment')
 const {batToCurrencyString, formatCurrentBalance, formattedDateFromTimestamp, walletStatus} = require('../../../../common/lib/ledgerUtil')
 const {l10nErrorText} = require('../../../../common/lib/httpUtil')
 const {changeSetting} = require('../../../lib/settingsUtil')
+const getSetting = require('../../../../../js/settings').getSetting
+const settings = require('../../../../../js/constants/settings')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
@@ -21,15 +23,12 @@ const LedgerTable = require('./ledgerTable')
 // style
 const globalStyles = require('../../styles/global')
 const {paymentStylesVariables} = require('../../styles/payment')
+const {loaderAnimation} = require('../../styles/animations')
 const cx = require('../../../../../js/lib/classSet')
 
 // Actions
 const appActions = require('../../../../../js/actions/appActions')
 
-// other
-const getSetting = require('../../../../../js/settings').getSetting
-const settings = require('../../../../../js/constants/settings')
-
 // TODO: report when funds are too low
 // TODO: support non-USD currency
 class EnabledContent extends ImmutableComponent {
@@ -171,11 +170,25 @@ class EnabledContent extends ImmutableComponent {
   render () {
     const ledgerData = this.props.ledgerData
     const walletStatusText = walletStatus(ledgerData)
-
-    return <section>
-      <div className={css(styles.walletBar)} data-test-id='walletBar'>
-        <div className={css(gridStyles.row1col1, styles.walletBar__title)} data-l10n-id='monthlyBudget' />
-        <div className={css(gridStyles.row1col2, styles.walletBar__title)} data-l10n-id='accountBalance' />
+    const inTransition = !(ledgerData.getIn(['migration', 'btc2BatTransitionDone']))
+
+    return <section className={css(styles.enabledContent)}>
+      <div className={css(styles.enabledContent__loader, inTransition && styles.enabledContent__loader_show)}>
+        <p className={css(styles.loader__text)}>
+          <p data-l10n-id='leaderLoaderText1' />
+          <p data-l10n-id='leaderLoaderText2' />
+        </p>
+        <div className={css(styles.leader__wrap)}>
+          <div>
+            <div className={css(styles.loader__line, styles.loader__line_1, !inTransition && styles.loader__line_off)} />
+            <div className={css(styles.loader__line, styles.loader__line_2, !inTransition && styles.loader__line_off)} />
+            <div className={css(styles.loader__line, styles.loader__line_3, !inTransition && styles.loader__line_off)} />
+          </div>
+        </div>
+      </div>
+      <div className={css(styles.enabledContent__walletBar)} data-test-id='walletBar'>
+        <div className={css(gridStyles.row1col1, styles.enabledContent__walletBar__title)} data-l10n-id='monthlyBudget' />
+        <div className={css(gridStyles.row1col2, styles.enabledContent__walletBar__title)} data-l10n-id='accountBalance' />
         <div className={css(gridStyles.row1col3)} />
         <div className={css(gridStyles.row2col1)}>
           <PanelDropdown
@@ -203,17 +216,17 @@ class EnabledContent extends ImmutableComponent {
         <div className={css(gridStyles.row2col3)}>
           {this.walletButton()}
         </div>
-        <div className={css(gridStyles.row3col1, styles.walletBar__message)}>
+        <div className={css(gridStyles.row3col1, styles.enabledContent__walletBar__message)}>
           {this.lastReconcileMessage()}
         </div>
-        <div className={css(gridStyles.row3col2, styles.walletBar__message)}>
+        <div className={css(gridStyles.row3col2, styles.enabledContent__walletBar__message)}>
           {
             ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
               ? <div data-l10n-id={this.ledgerDataErrorText()} />
               : <div>{this.nextReconcileMessage()}</div>
           }
         </div>
-        <div className={css(gridStyles.row3col3, styles.walletBar__message)}
+        <div className={css(gridStyles.row3col3, styles.enabledContent__walletBar__message)}
           data-test-id='walletStatus'
           data-l10n-id={walletStatusText.id}
           data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
@@ -275,7 +288,7 @@ const gridStyles = StyleSheet.create({
 })
 
 const styles = StyleSheet.create({
-  walletBar: {
+  enabledContent__walletBar: {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr 1fr',
     background: globalStyles.color.lightGray,
@@ -284,13 +297,13 @@ const styles = StyleSheet.create({
     margin: `${globalStyles.spacing.panelMargin} 0`
   },
 
-  walletBar__title: {
+  enabledContent__walletBar__title: {
     color: paymentStylesVariables.tableHeader.fontColor,
     fontWeight: paymentStylesVariables.tableHeader.fontWeight,
     marginBottom: `calc(${globalStyles.spacing.panelPadding} / 1.5)`
   },
 
-  walletBar__message: {
+  enabledContent__walletBar__message: {
     fontSize: globalStyles.payments.fontSize.regular,
     lineHeight: 1.5,
     marginTop: globalStyles.spacing.panelPadding
@@ -310,6 +323,74 @@ const styles = StyleSheet.create({
     ':hover': {
       textDecoration: 'none !important'
     }
+  },
+
+  enabledContent: {
+    position: 'relative',
+    zIndex: 2
+  },
+
+  enabledContent__loader: {
+    background: '#fafafa',
+    zIndex: 3,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    opacity: 0,
+    transform: 'translateX(-1000%)',
+    transition: 'opacity .4s ease-out, transform .1s .4s ease'
+  },
+
+  enabledContent__loader_show: {
+    opacity: 1,
+    transform: 'translateX(0)',
+    transition: 'opacity .4s ease-out'
+  },
+
+  loader__text: {
+    textAlign: 'center',
+    padding: '50px 0 20px',
+    display: 'block',
+    color: '#444'
+  },
+
+  leader__wrap: {
+    width: '45px',
+    left: 0,
+    right: 0,
+    margin: '50px auto 0'
+  },
+
+  loader__line: {
+    display: 'inline-block',
+    width: '15px',
+    height: '15px',
+    borderRadius: '15px',
+    animationName: [loaderAnimation],
+    animationDuration: '.6s',
+    animationIterationCount: 'infinite'
+  },
+
+  loader__line_1: {
+    backgroundColor: '#FF5000',
+    animationDelay: '.1s'
+  },
+
+  loader__line_2: {
+    backgroundColor: '#9E1F63',
+    animationDelay: '.2s'
+  },
+
+  loader__line_3: {
+    backgroundColor: '#662D91',
+    animationDelay: '.3s'
+  },
+
+  loader__line_off: {
+    animationName: 'none'
   }
 })
 

app/renderer/components/preferences/paymentsTab.js

@@ -107,6 +107,9 @@ class PaymentsTab extends ImmutableComponent {
 
   render () {
     const enabled = this.props.ledgerData.get('created')
+    const inTransition = !(this.props.ledgerData.getIn(['migration', 'btc2BatTransitionDone']))
+    const enableSettings = enabled && !inTransition
+
     return <div className={cx({
       paymentsContainer: true,
       [css(styles.paymentsContainer)]: true
@@ -260,11 +263,11 @@ class PaymentsTab extends ImmutableComponent {
                   <a className={css(
                     styles.switchWrap__mainIcons,
                     styles.mainIcons__settingsIcon,
-                    !enabled && styles.mainIcons__settingsIconDisabled
+                    !enableSettings && styles.mainIcons__settingsIconDisabled
                   )}
-                    data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
+                    data-test-id={!enableSettings ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
                     data-l10n-id='advancedSettingsIcon'
-                    onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
+                    onClick={enableSettings ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
                   />
                 </div>
               </div>

app/renderer/components/styles/animations.js

@@ -31,8 +31,21 @@ const widthIncreaseKeyframes = (start, end) => ({
   }
 })
 
+const loaderAnimation = {
+  '0': {
+    transform: 'translate(0,0)'
+  },
+  '50%': {
+    transform: 'translate(0,15px)'
+  },
+  '100%': {
+    transform: 'translate(0,0)'
+  }
+}
+
 module.exports = {
   spinKeyframes,
   opacityIncreaseKeyframes,
-  widthIncreaseKeyframes
+  widthIncreaseKeyframes,
+  loaderAnimation
 }