diff --git a/components/brave_new_tab_ui/actions/new_tab_actions.ts b/components/brave_new_tab_ui/actions/new_tab_actions.ts index f4bc489bdca6..6e5050921bc4 100644 --- a/components/brave_new_tab_ui/actions/new_tab_actions.ts +++ b/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 +}) diff --git a/components/brave_new_tab_ui/components/default/binance/index.tsx b/components/brave_new_tab_ui/components/default/binance/index.tsx index 3455c4cb26ec..3b2f20c9d5c4 100644 --- a/components/brave_new_tab_ui/components/default/binance/index.tsx +++ b/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 { @@ -170,7 +171,6 @@ class Binance extends React.PureComponent { this.state = { fiatShowing: false, currenciesShowing: false, - selectedView: 'summary', currentDepositSearch: '', currentDepositAsset: '', currentTradeSearch: '', @@ -334,8 +334,7 @@ class Binance extends React.PureComponent { } 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 { } setSelectedView (view: string) { - this.setState({ - selectedView: view - }) + this.props.onSetSelectedView(view) } setCurrentDepositAsset (asset: string) { @@ -460,7 +457,7 @@ class Binance extends React.PureComponent { finishConvert = () => { this.cancelConvert() - this.setState({ selectedView: 'summary' }) + this.props.onSetSelectedView('summary') } setCurrentDepositSearch = ({ target }: any) => { @@ -1110,7 +1107,7 @@ class Binance extends React.PureComponent { } renderSelectedView = () => { - const { selectedView } = this.state + const { selectedView } = this.props switch (selectedView) { case 'deposit': @@ -1118,12 +1115,14 @@ class Binance extends React.PureComponent { 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 ( @@ -1131,7 +1130,7 @@ class Binance extends React.PureComponent { {getLocale('binanceWidgetSummary')} diff --git a/components/brave_new_tab_ui/constants/new_tab_types.ts b/components/brave_new_tab_ui/constants/new_tab_types.ts index 306049305d21..3530b7dfd28c 100644 --- a/components/brave_new_tab_ui/constants/new_tab_types.ts +++ b/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 = { diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx index 34bd2f3d5150..fd5767d1c3bc 100644 --- a/components/brave_new_tab_ui/containers/newTab/index.tsx +++ b/components/brave_new_tab_ui/containers/newTab/index.tsx @@ -371,6 +371,10 @@ class NewTabPage extends React.Component { 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 { onSetUserTLDAutoSet={this.setUserTLDAutoSet} onUpdateActions={this.updateActions} onDismissAuthInvalid={this.dismissAuthInvalid} + onSetSelectedView={this.setSelectedView} /> ) } diff --git a/components/brave_new_tab_ui/reducers/new_tab_reducer.ts b/components/brave_new_tab_ui/reducers/new_tab_reducer.ts index 5ef2ca702b7a..d37eb2a578b5 100644 --- a/components/brave_new_tab_ui/reducers/new_tab_reducer.ts +++ b/components/brave_new_tab_ui/reducers/new_tab_reducer.ts @@ -590,6 +590,15 @@ export const newTabReducer: Reducer = (state: NewTab.S } break + case types.SET_SELECTED_VIEW: + const { view } = payload + state = { ...state } + state.binanceState = { + ...state.binanceState, + selectedView: view + } + break + default: break } diff --git a/components/brave_new_tab_ui/storage/new_tab_storage.ts b/components/brave_new_tab_ui/storage/new_tab_storage.ts index 80faac0cba90..ab52a4bfab43 100644 --- a/components/brave_new_tab_ui/storage/new_tab_storage.ts +++ b/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' } } diff --git a/components/definitions/newTab.d.ts b/components/definitions/newTab.d.ts index 37783272a6fe..7ed3fecc2a66 100644 --- a/components/definitions/newTab.d.ts +++ b/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'