Do visibility migration during the initial data loading

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -46,9 +46,6 @@ export const clockWidgetUpdated = (showClockWidget: boolean,
 export const setInitialData = (initialData: InitialData) =>
   action(types.NEW_TAB_SET_INITIAL_DATA, initialData)
 
-export const setWidgetVisibilityMigrationData = (ftxAuthed: boolean) =>
-  action(types.NEW_TAB_SET_WIDGET_VISIBILITY_MIGRATION_DATA, ftxAuthed)
-
 export const setMostVisitedSettings = (showTopSites: boolean, customLinksEnabled: boolean) =>
   action(types.SET_MOST_VISITED_SITES, { showTopSites, customLinksEnabled })
 

components/brave_new_tab_ui/api/initialData.ts

@@ -8,6 +8,8 @@ import * as statsAPI from './stats'
 import * as privateTabDataAPI from './privateTabData'
 import * as torTabDataAPI from './torTabData'
 import * as wallpaper from './wallpaper'
+import * as storage from '../storage/new_tab_storage'
+import { saveShowBinance, saveShowCryptoDotCom, saveShowFTX, saveShowGemini, saveWidgetVisibilityMigrated } from '../api/preferences'
 
 export type InitialData = {
   preferences: NewTab.Preferences
@@ -37,6 +39,99 @@ export type InitialRewardsData = {
 
 const isIncognito: boolean = chrome.extension.inIncognitoContext
 
+async function migrateInitialDataForWidgetVisibility (initialData: InitialData) {
+  // Other widget's auth state can be fetched from local storage.
+  // But, need to fetch ftx auth state to migrate.
+  // Start migration when ftx auth state is ready.
+  const ftxUserAuthed = await new Promise(resolve => chrome.ftx.getAccountBalances((balances, authInvalid) => {
+    resolve(!authInvalid)
+  }))
+  const peristentState: NewTab.PersistentState = storage.load()
+  const widgetLookupTable = {
+    'braveTalk': {
+      display: initialData.braveTalkSupported && initialData.preferences.showBraveTalk,
+      isCrypto: false
+    },
+    'rewards': {
+      display: initialData.preferences.showRewards,
+      isCrypto: false
+    },
+    'binance': {
+      display: initialData.binanceSupported && initialData.preferences.showBinance,
+      isCrypto: true,
+      userAuthed: peristentState.binanceState.userAuthed
+    },
+    'cryptoDotCom': {
+      display: initialData.cryptoDotComSupported && initialData.preferences.showCryptoDotCom,
+      isCrypto: true,
+      userAuthed: false
+    },
+    'ftx': {
+      display: initialData.ftxSupported && initialData.preferences.showFTX,
+      isCrypto: true,
+      userAuthed: ftxUserAuthed
+    },
+    'gemini': {
+      display: initialData.geminiSupported && initialData.preferences.showGemini,
+      isCrypto: true,
+      userAuthed: peristentState.geminiState.userAuthed
+    }
+  }
+
+  // Find crypto widget that is foremost and visible.
+  let foremostVisibleCryptoWidget = ''
+  const lastIndex = peristentState.widgetStackOrder.length - 1
+  for (let i = lastIndex; i >= 0; --i) {
+    const widget = widgetLookupTable[peristentState.widgetStackOrder[i]]
+    if (!widget) {
+      console.error('Update above lookup table')
+      continue
+    }
+
+    if (!widget.display) {
+      continue
+    }
+
+    if (widget.isCrypto) {
+      foremostVisibleCryptoWidget = peristentState.widgetStackOrder[i]
+    }
+    // Found visible foremost widget in the widget stack. Go out.
+    break
+  }
+
+  const widgetsShowState = {
+    'binance': false,
+    'cryptoDotCom': false,
+    'ftx': false,
+    'gemini': false
+  }
+
+  for (const key in widgetsShowState) {
+    // Show foremost visible crypto widget regardless of auth state
+    // and show user authed crypto widget.
+    if (key === foremostVisibleCryptoWidget ||
+        widgetLookupTable[key].userAuthed) {
+      widgetsShowState[key] = true
+    }
+  }
+
+  // These don't return promise so we can't await and then fetch new preferences,
+  // instead make manual changes to initialData.preferences after.
+  saveShowBinance(widgetsShowState.binance)
+  saveShowCryptoDotCom(widgetsShowState.cryptoDotCom)
+  saveShowFTX(widgetsShowState.ftx)
+  saveShowGemini(widgetsShowState.gemini)
+  saveWidgetVisibilityMigrated()
+
+  initialData.preferences = {
+    ...initialData.preferences,
+    showBinance: widgetsShowState.binance,
+    showCryptoDotCom: widgetsShowState.cryptoDotCom,
+    showFTX: widgetsShowState.ftx,
+    showGemini: widgetsShowState.gemini
+  }
+}
+
 // Gets all data required for the first render of the page
 export async function getInitialData (): Promise<InitialData> {
   try {
@@ -90,7 +185,7 @@ export async function getInitialData (): Promise<InitialData> {
       })
     ])
     console.timeStamp('Got all initial data.')
-    return {
+    const initialData = {
       preferences,
       stats,
       privateTabData,
@@ -102,6 +197,12 @@ export async function getInitialData (): Promise<InitialData> {
       ftxSupported,
       binanceSupported
     } as InitialData
+
+    if (!initialData.preferences.widgetVisibilityMigrated) {
+      await migrateInitialDataForWidgetVisibility(initialData)
+    }
+
+    return initialData
   } catch (e) {
     console.error(e)
     throw Error('Error getting initial data')

components/brave_new_tab_ui/apiEventsToStore.ts

@@ -48,14 +48,6 @@ export function wireApiEventsToStore () {
       rewardsInitData()
     }
     getActions().setInitialData(initialData)
-    if (!initialData.preferences.widgetVisibilityMigrated) {
-      // Other widget's auth state can be fetched from local storage.
-      // But, need to fetch ftx auth state to migrate.
-      // Start migration when ftx auth state is ready.
-      chrome.ftx.getAccountBalances((balances, authInvalid) => {
-       getActions().setWidgetVisibilityMigrationData(!authInvalid)
-      })
-    }
     // Listen for API changes and dispatch to store
     topSitesAPI.addMostVistedInfoChangedListener(onMostVisitedInfoChanged)
     topSitesAPI.updateMostVisitedInfo()

components/brave_new_tab_ui/constants/new_tab_types.ts

@@ -19,7 +19,6 @@ export const enum types {
   NEW_TAB_PREFERENCES_UPDATED = '@@newtab/NEW_TAB_PREFERENCES_UPDATED',
   NEW_TAB_DISMISS_BRANDED_WALLPAPER_NOTIFICATION = '@@newtab/NEW_TAB_DISMISS_BRANDED_WALLPAPER_NOTIFICATION',
   NEW_TAB_SET_INITIAL_DATA = '@@newtab/NEW_TAB_SET_INITIAL_DATA',
-  NEW_TAB_SET_WIDGET_VISIBILITY_MIGRATION_DATA = '@@newtab/NEW_TAB_SET_WIDGET_VISIBILITY_MIGRATION_DATA',
   SET_MOST_VISITED_SITES = '@@newtab/SET_MOST_VISITED_SITES',
   TOP_SITES_STATE_UPDATED = '@@newtab/TOP_SITES_STATE_UPDATED',
   CUSTOMIZE_CLICKED = '@@newtab/CUSTOMIZE_CLICKED',

components/brave_new_tab_ui/reducers/new_tab_reducer.ts

@@ -92,10 +92,7 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
       }
       state = storage.addNewStackWidget(state)
       state = storage.replaceStackWidgets(state)
-      break
 
-    case types.NEW_TAB_SET_WIDGET_VISIBILITY_MIGRATION_DATA:
-      state = storage.updateWidgetVisibility(state, payload)
       break
 
     case types.NEW_TAB_STATS_UPDATED:

components/brave_new_tab_ui/storage/new_tab_storage.ts

@@ -4,7 +4,6 @@
 // you can obtain one at http://mozilla.org/MPL/2.0/.
 
 // Utils
-import { saveShowBinance, saveShowCryptoDotCom, saveShowFTX, saveShowGemini, saveWidgetVisibilityMigrated } from '../api/preferences'
 import { debounce } from '../../common/debounce'
 import { loadTimeData } from '../../common/loadTimeData'
 
@@ -242,108 +241,6 @@ export const replaceStackWidgets = (state: NewTab.State) => {
   return state
 }
 
-export const updateWidgetVisibility = (state: NewTab.State, ftxUserAuthed: boolean) => {
-  // Do visibility migration only once.
-  if (state.widgetVisibilityMigrated) {
-    return state
-  }
-
-  const {
-    showRewards,
-    showBraveTalk,
-    braveTalkSupported,
-    showBinance,
-    binanceSupported,
-    showCryptoDotCom,
-    cryptoDotComSupported,
-    showFTX,
-    ftxSupported,
-    showGemini,
-    geminiSupported,
-    binanceState,
-    geminiState
-  } = state
-
-  const widgetLookupTable = {
-    'braveTalk': {
-      display: braveTalkSupported && showBraveTalk,
-      isCrypto: false
-    },
-    'rewards': {
-      display: showRewards,
-      isCrypto: false
-    },
-    'binance': {
-      display: binanceSupported && showBinance,
-      isCrypto: true,
-      userAuthed: binanceState.userAuthed
-    },
-    'cryptoDotCom': {
-      display: cryptoDotComSupported && showCryptoDotCom,
-      isCrypto: true,
-      userAuthed: false
-    },
-    'ftx': {
-      display: ftxSupported && showFTX,
-      isCrypto: true,
-      userAuthed: ftxUserAuthed
-    },
-    'gemini': {
-      display: geminiSupported && showGemini,
-      isCrypto: true,
-      userAuthed: geminiState.userAuthed
-    }
-  }
-
-  // Find crypto widget that is foremost and visible.
-  let foremostVisibleCryptoWidget = ''
-  const lastIndex = state.widgetStackOrder.length - 1
-  for (let i = lastIndex; i >= 0; --i) {
-    const widget = widgetLookupTable[state.widgetStackOrder[i]]
-    if (!widget) {
-      console.error('Update above lookup table')
-      continue
-    }
-
-    if (!widget.display) {
-      continue
-    }
-
-    if (widget.isCrypto) {
-      foremostVisibleCryptoWidget = state.widgetStackOrder[i]
-    }
-    // Found visible foremost widget in the widget stack. Go out.
-    break
-  }
-
-  const widgetsShowKey = {
-    'binance': 'showBinance',
-    'cryptoDotCom': 'showCryptoDotCom',
-    'ftx': 'showFTX',
-    'gemini': 'showGemini'
-  }
-
-  for (let key in widgetsShowKey) {
-    // Show foremost visible crypto widget regardless of auth state
-    // and show user authed crypto widget.
-    if (key === foremostVisibleCryptoWidget ||
-        widgetLookupTable[key].userAuthed) {
-      state[widgetsShowKey[key]] = true
-      continue
-    }
-
-    state[widgetsShowKey[key]] = false
-  }
-
-  saveShowBinance(state.showBinance)
-  saveShowCryptoDotCom(state.showCryptoDotCom)
-  saveShowFTX(state.showFTX)
-  saveShowGemini(state.showGemini)
-  saveWidgetVisibilityMigrated()
-
-  return state
-}
-
 const cleanData = (state: NewTab.State) => {
   const { rewardsState } = state
 

components/definitions/newTab.d.ts

@@ -113,6 +113,7 @@ declare namespace NewTab {
     showBinance: boolean
     showGemini: boolean
     showCryptoDotCom: boolean
+    showFTX: boolean
     widgetVisibilityMigrated: boolean
     hideAllWidgets: boolean
     isBraveTodayOptedIn: boolean
@@ -137,7 +138,6 @@ declare namespace NewTab {
     customLinksEnabled: boolean
     customLinksNum: number
     showBitcoinDotCom: boolean
-    showFTX: boolean,
     stats: Stats,
     braveTalkPromptAllowed: boolean
     brandedWallpaper?: BrandedWallpaper