Fixes brave/brave-browser#9257 - Persists selected view in Binance Wi…

…dget

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -176,3 +176,7 @@ export const setDisconnectInProgress = (inProgress: boolean) => action(types.SET
 export const setAuthInvalid = (authInvalid: boolean) => action(types.SET_AUTH_INVALID, {
   authInvalid
 })
+
+export const setSelectedView = (view: string) => action(types.SET_SELECTED_VIEW, {
+  view
+})

components/brave_new_tab_ui/components/default/binance/index.tsx

@@ -90,7 +90,6 @@ import { getUSDPrice } from '../../../binance-utils'
 interface State {
   fiatShowing: boolean
   currenciesShowing: boolean
-  selectedView: string
   currentDepositSearch: string
   currentDepositAsset: string
   currentTradeSearch: string
@@ -138,6 +137,7 @@ interface Props {
   accountBTCUSDValue: string
   disconnectInProgress: boolean
   authInvalid: boolean
+  selectedView: string
   onShowContent: () => void
   onBuyCrypto: (coin: string, amount: string, fiat: string) => void
   onBinanceUserTLD: (userTLD: NewTab.BinanceTLD) => void
@@ -154,6 +154,7 @@ interface Props {
   onValidAuthCode: () => void
   onUpdateActions: () => void
   onDismissAuthInvalid: () => void
+  onSetSelectedView: (view: string) => void
 }
 
 class Binance extends React.PureComponent<Props, State> {
@@ -170,7 +171,6 @@ class Binance extends React.PureComponent<Props, State> {
     this.state = {
       fiatShowing: false,
       currenciesShowing: false,
-      selectedView: 'summary',
       currentDepositSearch: '',
       currentDepositAsset: '',
       currentTradeSearch: '',
@@ -334,8 +334,7 @@ class Binance extends React.PureComponent<Props, State> {
   }
 
   renderRoutes = () => {
-    const { selectedView } = this.state
-    const { userAuthed } = this.props
+    const { userAuthed, selectedView } = this.props
 
     if (userAuthed) {
       if (selectedView === 'buy') {
@@ -359,9 +358,7 @@ class Binance extends React.PureComponent<Props, State> {
   }
 
   setSelectedView (view: string) {
-    this.setState({
-      selectedView: view
-    })
+    this.props.onSetSelectedView(view)
   }
 
   setCurrentDepositAsset (asset: string) {
@@ -460,7 +457,7 @@ class Binance extends React.PureComponent<Props, State> {
 
   finishConvert = () => {
     this.cancelConvert()
-    this.setState({ selectedView: 'summary' })
+    this.props.onSetSelectedView('summary')
   }
 
   setCurrentDepositSearch = ({ target }: any) => {
@@ -1110,28 +1107,30 @@ class Binance extends React.PureComponent<Props, State> {
   }
 
   renderSelectedView = () => {
-    const { selectedView } = this.state
+    const { selectedView } = this.props
 
     switch (selectedView) {
       case 'deposit':
         return this.renderDepositView()
       case 'summary':
         return this.renderSummaryView()
       default:
-        return null
+        return this.renderSummaryView()
     }
   }
 
   renderAccountView = () => {
-    const { selectedView, currentDepositAsset } = this.state
+    const { selectedView } = this.props
+    const { currentDepositAsset } = this.state
+    const isSummaryView = !selectedView || selectedView === 'summary'
     const hideOverflow = currentDepositAsset && selectedView === 'deposit'
 
     return (
       <>
         <NavigationBar>
           <NavigationItem
             isLeading={true}
-            isActive={selectedView === 'summary'}
+            isActive={isSummaryView}
             onClick={this.setSelectedView.bind(this, 'summary')}
           >
             {getLocale('binanceWidgetSummary')}

components/brave_new_tab_ui/constants/new_tab_types.ts

@@ -48,7 +48,8 @@ export const enum types {
   ON_DEPOSIT_QR_FOR_ASSET = '@@newtab/ON_DEPOSIT_QR_FOR_ASSET',
   ON_CONVERTABLE_ASSETS = '@@newtab/ON_CONVERTABLE_ASSETS',
   SET_DISCONNECT_IN_PROGRESS = '@@newtab/SET_DISCONNECT_IN_PROGRESS',
-  SET_AUTH_INVALID = '@@newtab/SET_AUTH_INVALID'
+  SET_AUTH_INVALID = '@@newtab/SET_AUTH_INVALID',
+  SET_SELECTED_VIEW = '@@newtab/SET_SELECTED_VIEW'
 }
 
 export type DismissBrandedWallpaperNotificationPayload = {

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -371,6 +371,10 @@ class NewTabPage extends React.Component<Props, State> {
     this.props.actions.onConvertableAssets(asset, assets)
   }
 
+  setSelectedView = (view: string) => {
+    this.props.actions.setSelectedView(view)
+  }
+
   updateActions = () => {
     this.fetchBalance()
     this.getConvertAssets()
@@ -554,6 +558,7 @@ class NewTabPage extends React.Component<Props, State> {
         onSetUserTLDAutoSet={this.setUserTLDAutoSet}
         onUpdateActions={this.updateActions}
         onDismissAuthInvalid={this.dismissAuthInvalid}
+        onSetSelectedView={this.setSelectedView}
       />
     )
   }

components/brave_new_tab_ui/reducers/new_tab_reducer.ts

@@ -590,6 +590,15 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
       }
       break
 
+    case types.SET_SELECTED_VIEW:
+      const { view } = payload
+      state = { ...state }
+      state.binanceState = {
+        ...state.binanceState,
+        selectedView: view
+      }
+      break
+
     default:
       break
   }

components/brave_new_tab_ui/storage/new_tab_storage.ts

@@ -75,7 +75,8 @@ export const defaultState: NewTab.State = {
     accountBTCValue: '0.00',
     accountBTCUSDValue: '0.00',
     disconnectInProgress: false,
-    authInvalid: false
+    authInvalid: false,
+    selectedView: 'summary'
   }
 }
 

components/definitions/newTab.d.ts

@@ -166,6 +166,7 @@ declare namespace NewTab {
     accountBTCUSDValue: string
     disconnectInProgress: boolean
     authInvalid: boolean
+    selectedView: string
   }
 
   export type BinanceTLD = 'us' | 'com'