From 008d69e47ea265ddab62ecdb984f7284a70a7dae Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Fri, 30 Apr 2021 10:27:33 -0400
Subject: [PATCH 1/5] Wallet Page UI

---
 .../components/{app.tsx => legacy_app.tsx}    |   2 +-
 components/brave_wallet_ui/constants/types.ts |   5 +
 .../page/actions/wallet_page_actions.ts       |  10 ++
 .../page/async/wallet_page_async_handler.ts   |  29 +++++
 .../page/constants/action_types.ts            |   8 ++
 .../brave_wallet_ui/page/reducers/index.ts    |  13 ++
 .../page/reducers/wallet_page_reducer.ts      |  26 ++++
 components/brave_wallet_ui/page/store.ts      |  15 +++
 .../brave_wallet_ui/page/wallet_page.tsx      | 120 ++++++++++++++++--
 .../brave_wallet_ui/panel/wallet_panel.tsx    |   8 +-
 .../wallet-dark.ts}                           |   8 +-
 .../wallet-light.ts}                          |   8 +-
 .../wallet-theme.ts}                          |   2 +-
 components/webpack/webpack.config.js          |   2 +-
 14 files changed, 233 insertions(+), 23 deletions(-)
 rename components/brave_wallet_ui/components/{app.tsx => legacy_app.tsx} (88%)
 create mode 100644 components/brave_wallet_ui/page/actions/wallet_page_actions.ts
 create mode 100644 components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
 create mode 100644 components/brave_wallet_ui/page/constants/action_types.ts
 create mode 100644 components/brave_wallet_ui/page/reducers/index.ts
 create mode 100644 components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
 create mode 100644 components/brave_wallet_ui/page/store.ts
 rename components/brave_wallet_ui/{panel/theme/wallet-panel-dark.ts => theme/wallet-dark.ts} (76%)
 rename components/brave_wallet_ui/{panel/theme/wallet-panel-light.ts => theme/wallet-light.ts} (77%)
 rename components/brave_wallet_ui/{panel/theme/wallet-panel-theme.ts => theme/wallet-theme.ts} (87%)

diff --git a/components/brave_wallet_ui/components/app.tsx b/components/brave_wallet_ui/components/legacy_app.tsx
similarity index 88%
rename from components/brave_wallet_ui/components/app.tsx
rename to components/brave_wallet_ui/components/legacy_app.tsx
index 0f0f4a5a31b4..6daa4139fca7 100644
--- a/components/brave_wallet_ui/components/app.tsx
+++ b/components/brave_wallet_ui/components/legacy_app.tsx
@@ -6,7 +6,7 @@
 import * as React from 'react'
 import OptIn from './opt-in'
 
-export default class App extends React.PureComponent<{}, {}> {
+export default class LegacyApp extends React.PureComponent<{}, {}> {
 
   onWalletOptin = () => {
     chrome.braveWallet.loadUI(() => {
diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
index c5a6f95d06ef..716e7cacbca5 100644
--- a/components/brave_wallet_ui/constants/types.ts
+++ b/components/brave_wallet_ui/constants/types.ts
@@ -123,6 +123,7 @@ export interface PriceDataObjectType {
 
 export interface State {
   walletPanelReducer: WalletPanelReducerState
+  walletPageReducer: WalletPageReducerState
 }
 
 export interface WalletPanelReducerState {
@@ -131,3 +132,7 @@ export interface WalletPanelReducerState {
   connectedSiteOrigin: string
   accounts: WalletAccountType[]
 }
+
+export interface WalletPageReducerState {
+  hasInitialized: boolean
+}
diff --git a/components/brave_wallet_ui/page/actions/wallet_page_actions.ts b/components/brave_wallet_ui/page/actions/wallet_page_actions.ts
new file mode 100644
index 000000000000..fb4e1e3ccbaf
--- /dev/null
+++ b/components/brave_wallet_ui/page/actions/wallet_page_actions.ts
@@ -0,0 +1,10 @@
+/* Copyright (c) 2021 The Brave Authors. All rights reserved.
+ * 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 { createAction } from 'redux-act'
+import { InitializedPayloadType } from '../constants/action_types'
+
+export const initialize = createAction('initialize')
+export const initialized = createAction<InitializedPayloadType>('initialized')
diff --git a/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
new file mode 100644
index 000000000000..e219ff07050e
--- /dev/null
+++ b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
@@ -0,0 +1,29 @@
+// Copyright (c) 2021 The Brave Authors. All rights reserved.
+// 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 { MiddlewareAPI, Dispatch, AnyAction } from 'redux'
+import AsyncActionHandler from '../../../common/AsyncActionHandler'
+import * as Actions from '../actions/wallet_page_actions'
+import { State, WalletPageReducerState } from '../../constants/types'
+
+const handler = new AsyncActionHandler()
+
+function getState (store: MiddlewareAPI<Dispatch<AnyAction>, any>): WalletPageReducerState {
+  return (store.getState() as State).walletPageReducer
+}
+
+handler.on(Actions.initialize.getType(), async (store) => {
+  const state = getState(store)
+  // Sanity check we only initialize once
+  if (state.hasInitialized) {
+    return
+  }
+  // TODO: Fetch any data we need for initial display, instead of fake wait.
+  await new Promise(resolve => setTimeout(resolve, 400))
+  store.dispatch(Actions.initialized({isConnected: true}))
+  return
+})
+
+export default handler.middleware
diff --git a/components/brave_wallet_ui/page/constants/action_types.ts b/components/brave_wallet_ui/page/constants/action_types.ts
new file mode 100644
index 000000000000..9a965120a892
--- /dev/null
+++ b/components/brave_wallet_ui/page/constants/action_types.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2021 The Brave Authors. All rights reserved.
+// 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/.
+
+export type InitializedPayloadType = {
+  isConnected: boolean
+}
diff --git a/components/brave_wallet_ui/page/reducers/index.ts b/components/brave_wallet_ui/page/reducers/index.ts
new file mode 100644
index 000000000000..2242aa632c80
--- /dev/null
+++ b/components/brave_wallet_ui/page/reducers/index.ts
@@ -0,0 +1,13 @@
+/* Copyright (c) 2021 The Brave Authors. All rights reserved.
+ * 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 { combineReducers } from 'redux'
+
+// Utils
+import walletPageReducer from './wallet_page_reducer'
+
+export default combineReducers({
+  walletPageReducer
+})
diff --git a/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts b/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
new file mode 100644
index 000000000000..696d77242f26
--- /dev/null
+++ b/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
@@ -0,0 +1,26 @@
+/* Copyright (c) 2021 The Brave Authors. All rights reserved.
+ * 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/. */
+/* global window */
+
+import { createReducer } from 'redux-act'
+import * as Actions from '../actions/wallet_page_actions'
+import { WalletPageReducerState } from '../../constants/types'
+import { InitializedPayloadType } from '../constants/action_types'
+
+const defaultState: WalletPageReducerState = {
+  hasInitialized: false,
+}
+
+const reducer = createReducer<WalletPageReducerState>({}, defaultState)
+
+reducer.on(Actions.initialized, (state: WalletPageReducerState, payload: InitializedPayloadType) => {
+  return {
+    ...state,
+    hasInitialized: true,
+    isConnected: payload.isConnected
+  }
+})
+
+export default reducer
diff --git a/components/brave_wallet_ui/page/store.ts b/components/brave_wallet_ui/page/store.ts
new file mode 100644
index 000000000000..e5aaa1e9657f
--- /dev/null
+++ b/components/brave_wallet_ui/page/store.ts
@@ -0,0 +1,15 @@
+/* Copyright (c) 2021 The Brave Authors. All rights reserved.
+ * 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 { createStore, applyMiddleware } from 'redux'
+
+// Utils
+import reducers from './reducers'
+import walletPageAsyncHandler from './async/wallet_page_async_handler'
+
+export default createStore(
+    reducers,
+    applyMiddleware(walletPageAsyncHandler)
+)
diff --git a/components/brave_wallet_ui/page/wallet_page.tsx b/components/brave_wallet_ui/page/wallet_page.tsx
index 1298142eb8b3..c41ae4133a39 100644
--- a/components/brave_wallet_ui/page/wallet_page.tsx
+++ b/components/brave_wallet_ui/page/wallet_page.tsx
@@ -5,21 +5,126 @@
 
 import * as React from 'react'
 import { render } from 'react-dom'
+import { connect, Provider } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
 import { initLocale } from 'brave-ui'
 
-import 'emptykit.css'
+import * as WalletPageActions from './actions/wallet_page_actions'
+import { State, WalletPageReducerState } from '../constants/types'
+import store from './store'
 
-// Fonts
+import 'emptykit.css'
 import '../../../ui/webui/resources/fonts/poppins.css'
 import '../../../ui/webui/resources/fonts/muli.css'
 
-// Components
-import App from '../components/app'
+import { WalletWidgetStandIn } from '../stories/style'
+import {
+  SideNav,
+  WalletPageLayout,
+  WalletSubViewLayout,
+  CryptoView
+} from '../components/desktop'
+import LegacyApp from '../components/legacy_app'
+import {
+  NavTypes,
+  NavObjectType
+} from '../constants/types'
+import { LinkedAccountsOptions, NavOptions, StaticOptions } from '../options/side-nav-options'
+import BuySendSwap from '../components/buy-send-swap'
 import Theme from 'brave-ui/theme/brave-default'
 import DarkTheme from 'brave-ui/theme/brave-dark'
 import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
+import walletDarkTheme from '../theme/wallet-dark'
+import walletLightTheme from '../theme/wallet-light'
+
+type Props = {
+  page: WalletPageReducerState
+  actions: typeof WalletPageActions
+}
+
+function App () {
+  const [initialThemeType, setInitialThemeType] = React.useState<chrome.braveTheme.ThemeType>()
+  React.useEffect(() => {
+    chrome.braveTheme.getBraveThemeType(setInitialThemeType)
+  }, [])
+  return (
+    <Provider store={store}>
+      {initialThemeType &&
+      <BraveCoreThemeProvider
+        initialThemeType={initialThemeType}
+        dark={walletDarkTheme}
+        light={walletLightTheme}
+      >
+        <PageWithState
+        />
+      </BraveCoreThemeProvider>
+      }
+    </Provider>
+  )
+}
+
+function Page (props: Props) {
+  const [view, setView] = React.useState<NavTypes>('crypto')
+  const [linkedAccounts] = React.useState<NavObjectType[]>(LinkedAccountsOptions)
+
+  // In the future these will be actual paths
+  // for example wallet/rewards
+  const navigateTo = (path: NavTypes) => {
+    setView(path)
+  }
+
+  return (
+    <WalletPageLayout>
+        <SideNav
+          navList={NavOptions}
+          staticList={StaticOptions}
+          selectedButton={view}
+          onSubmit={navigateTo}
+          linkedAccountsList={linkedAccounts}
+        />
+        <WalletSubViewLayout>
+          {view === 'crypto' ? (
+            <CryptoView />
+          ) : (
+            <div style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+              <h2>{view} view</h2>
+            </div>
+          )}
+
+        </WalletSubViewLayout>
+        <WalletWidgetStandIn>
+          <BuySendSwap />
+        </WalletWidgetStandIn>
+      </WalletPageLayout>
+  )
+}
+
+function mapStateToProps (state: State): Partial<Props> {
+  return {
+    page: state.walletPageReducer
+  }
+}
+
+function mapDispatchToProps (dispatch: Dispatch): Partial<Props> {
+  return {
+    actions: bindActionCreators(WalletPageActions, store.dispatch.bind(store))
+  }
+}
+
+const PageWithState = connect(mapStateToProps, mapDispatchToProps)(Page)
 
 function initialize () {
+  chrome.braveWallet.isNativeWalletEnabled((new_wallet_enabled) => {
+    if (new_wallet_enabled) {
+      store.dispatch(WalletPageActions.initialize())
+      render(<App />, document.getElementById('root'))
+    } else {
+      initializeOldWallet ();
+    }
+  })
+}
+
+function initializeOldWallet () {
   chrome.braveWallet.shouldPromptForSetup((prompt: boolean) => {
     if (!prompt) {
       chrome.braveWallet.loadUI(() => {
@@ -27,12 +132,11 @@ function initialize () {
       })
       return
     }
-
-    renderWebUIView()
+    renderOldWebUIView()
   })
 }
 
-function renderWebUIView () {
+function renderOldWebUIView () {
   new Promise(resolve => chrome.braveTheme.getBraveThemeType(resolve))
   .then((themeType: chrome.braveTheme.ThemeType) => {
     window.i18nTemplate.process(window.document, window.loadTimeData)
@@ -46,7 +150,7 @@ function renderWebUIView () {
         dark={DarkTheme}
         light={Theme}
       >
-        <App />
+        <LegacyApp />
       </BraveCoreThemeProvider>,
       document.getElementById('root')
     )
diff --git a/components/brave_wallet_ui/panel/wallet_panel.tsx b/components/brave_wallet_ui/panel/wallet_panel.tsx
index 5889eb661f9d..d95c1d2182f4 100644
--- a/components/brave_wallet_ui/panel/wallet_panel.tsx
+++ b/components/brave_wallet_ui/panel/wallet_panel.tsx
@@ -8,8 +8,8 @@ import { render } from 'react-dom'
 import { connect, Provider } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 
-import walletPanelDarkTheme from './theme/wallet-panel-dark'
-import walletPanelLightTheme from './theme/wallet-panel-light'
+import walletDarkTheme from '../theme/wallet-dark'
+import walletLightTheme from '../theme/wallet-light'
 import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
 import { ConnectWithSite } from '../components/extension'
 import { StyledExtensionWrapper } from '../stories/style'
@@ -46,8 +46,8 @@ function App () {
       {initialThemeType &&
       <BraveCoreThemeProvider
         initialThemeType={initialThemeType}
-        dark={walletPanelDarkTheme}
-        light={walletPanelLightTheme}
+        dark={walletDarkTheme}
+        light={walletLightTheme}
       >
         <PanelWithState />
       </BraveCoreThemeProvider>
diff --git a/components/brave_wallet_ui/panel/theme/wallet-panel-dark.ts b/components/brave_wallet_ui/theme/wallet-dark.ts
similarity index 76%
rename from components/brave_wallet_ui/panel/theme/wallet-panel-dark.ts
rename to components/brave_wallet_ui/theme/wallet-dark.ts
index bcad8d19dd40..25c94899f3c5 100644
--- a/components/brave_wallet_ui/panel/theme/wallet-panel-dark.ts
+++ b/components/brave_wallet_ui/theme/wallet-dark.ts
@@ -4,13 +4,13 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import ITheme from 'brave-ui/theme/theme-interface'
-import IThemeWalletPanel from './wallet-panel-theme'
+import IThemeWallet from './wallet-theme'
 import defaultTheme from 'brave-ui/theme/brave-default'
 import colors from 'brave-ui/theme/colors'
 
-const walletPanelDarkTheme: ITheme & IThemeWalletPanel = {
+const walletDarkTheme: ITheme & IThemeWallet = {
   ...defaultTheme,
-  name: 'Wallet Panel Dark',
+  name: 'Wallet  Dark',
   color: {
     ...defaultTheme.color,
     text: colors.white,
@@ -19,4 +19,4 @@ const walletPanelDarkTheme: ITheme & IThemeWalletPanel = {
   }
 }
 
-export default walletPanelDarkTheme
+export default walletDarkTheme
diff --git a/components/brave_wallet_ui/panel/theme/wallet-panel-light.ts b/components/brave_wallet_ui/theme/wallet-light.ts
similarity index 77%
rename from components/brave_wallet_ui/panel/theme/wallet-panel-light.ts
rename to components/brave_wallet_ui/theme/wallet-light.ts
index f778d5a4a569..a8658befe927 100644
--- a/components/brave_wallet_ui/panel/theme/wallet-panel-light.ts
+++ b/components/brave_wallet_ui/theme/wallet-light.ts
@@ -4,13 +4,13 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import ITheme from 'brave-ui/theme/theme-interface'
-import IThemeWalletPanel from './wallet-panel-theme'
+import IThemeWallet from './wallet-theme'
 import defaultTheme from 'brave-ui/theme/brave-default'
 import colors from 'brave-ui/theme/colors'
 
-const walletPanelLightTheme: ITheme & IThemeWalletPanel = {
+const walletLightTheme: ITheme & IThemeWallet = {
   ...defaultTheme,
-  name: 'Wallet Panel Light',
+  name: 'Wallet Light',
   color: {
     ...defaultTheme.color,
     text: colors.neutral900,
@@ -20,4 +20,4 @@ const walletPanelLightTheme: ITheme & IThemeWalletPanel = {
   }
 }
 
-export default walletPanelLightTheme
+export default walletLightTheme
diff --git a/components/brave_wallet_ui/panel/theme/wallet-panel-theme.ts b/components/brave_wallet_ui/theme/wallet-theme.ts
similarity index 87%
rename from components/brave_wallet_ui/panel/theme/wallet-panel-theme.ts
rename to components/brave_wallet_ui/theme/wallet-theme.ts
index c7ee192fa9a8..3cdf3ae38963 100644
--- a/components/brave_wallet_ui/panel/theme/wallet-panel-theme.ts
+++ b/components/brave_wallet_ui/theme/wallet-theme.ts
@@ -3,7 +3,7 @@
  * 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/. */
 
-export default interface IThemeWalletPanel {
+export default interface IThemeWallet {
   color: {
     outlineColor: string
   }
diff --git a/components/webpack/webpack.config.js b/components/webpack/webpack.config.js
index 1b7e7b6023d3..11f07d8774c4 100644
--- a/components/webpack/webpack.config.js
+++ b/components/webpack/webpack.config.js
@@ -60,7 +60,7 @@ module.exports = (env, argv) => ({
         loader: 'url-loader?limit=13000&minetype=application/font-woff'
       },
       {
-        test: /\.(ttf|eot|ico|svg|png|jpg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        test: /\.(ttf|eot|ico|svg|png|jpg|jpeg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'file-loader'
       }]
   },

From ad0d05281f4a0958c975b9958be7120fc51e9aa4 Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Tue, 11 May 2021 10:47:40 -0400
Subject: [PATCH 2/5] Fix tslint

---
 .../page/async/wallet_page_async_handler.ts   |  2 +-
 .../page/reducers/wallet_page_reducer.ts      |  2 +-
 .../brave_wallet_ui/page/wallet_page.tsx      | 53 ++++++++++---------
 components/definitions/chromel.d.ts           |  1 +
 4 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
index e219ff07050e..241376487a58 100644
--- a/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
+++ b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
@@ -22,7 +22,7 @@ handler.on(Actions.initialize.getType(), async (store) => {
   }
   // TODO: Fetch any data we need for initial display, instead of fake wait.
   await new Promise(resolve => setTimeout(resolve, 400))
-  store.dispatch(Actions.initialized({isConnected: true}))
+  store.dispatch(Actions.initialized({ isConnected: true }))
   return
 })
 
diff --git a/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts b/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
index 696d77242f26..2db3dba8440e 100644
--- a/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
+++ b/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
@@ -10,7 +10,7 @@ import { WalletPageReducerState } from '../../constants/types'
 import { InitializedPayloadType } from '../constants/action_types'
 
 const defaultState: WalletPageReducerState = {
-  hasInitialized: false,
+  hasInitialized: false
 }
 
 const reducer = createReducer<WalletPageReducerState>({}, defaultState)
diff --git a/components/brave_wallet_ui/page/wallet_page.tsx b/components/brave_wallet_ui/page/wallet_page.tsx
index c41ae4133a39..7b603d41688e 100644
--- a/components/brave_wallet_ui/page/wallet_page.tsx
+++ b/components/brave_wallet_ui/page/wallet_page.tsx
@@ -10,7 +10,6 @@ import { bindActionCreators, Dispatch } from 'redux'
 import { initLocale } from 'brave-ui'
 
 import * as WalletPageActions from './actions/wallet_page_actions'
-import { State, WalletPageReducerState } from '../constants/types'
 import store from './store'
 
 import 'emptykit.css'
@@ -27,7 +26,9 @@ import {
 import LegacyApp from '../components/legacy_app'
 import {
   NavTypes,
-  NavObjectType
+  NavObjectType,
+  State,
+  WalletPageReducerState
 } from '../constants/types'
 import { LinkedAccountsOptions, NavOptions, StaticOptions } from '../options/side-nav-options'
 import BuySendSwap from '../components/buy-send-swap'
@@ -42,27 +43,6 @@ type Props = {
   actions: typeof WalletPageActions
 }
 
-function App () {
-  const [initialThemeType, setInitialThemeType] = React.useState<chrome.braveTheme.ThemeType>()
-  React.useEffect(() => {
-    chrome.braveTheme.getBraveThemeType(setInitialThemeType)
-  }, [])
-  return (
-    <Provider store={store}>
-      {initialThemeType &&
-      <BraveCoreThemeProvider
-        initialThemeType={initialThemeType}
-        dark={walletDarkTheme}
-        light={walletLightTheme}
-      >
-        <PageWithState
-        />
-      </BraveCoreThemeProvider>
-      }
-    </Provider>
-  )
-}
-
 function Page (props: Props) {
   const [view, setView] = React.useState<NavTypes>('crypto')
   const [linkedAccounts] = React.useState<NavObjectType[]>(LinkedAccountsOptions)
@@ -113,13 +93,34 @@ function mapDispatchToProps (dispatch: Dispatch): Partial<Props> {
 
 const PageWithState = connect(mapStateToProps, mapDispatchToProps)(Page)
 
+function App () {
+  const [initialThemeType, setInitialThemeType] = React.useState<chrome.braveTheme.ThemeType>()
+  React.useEffect(() => {
+    chrome.braveTheme.getBraveThemeType(setInitialThemeType)
+  }, [])
+  return (
+    <Provider store={store}>
+      {initialThemeType &&
+      <BraveCoreThemeProvider
+        initialThemeType={initialThemeType}
+        dark={walletDarkTheme}
+        light={walletLightTheme}
+      >
+        <PageWithState
+        />
+      </BraveCoreThemeProvider>
+      }
+    </Provider>
+  )
+}
+
 function initialize () {
-  chrome.braveWallet.isNativeWalletEnabled((new_wallet_enabled) => {
-    if (new_wallet_enabled) {
+  chrome.braveWallet.isNativeWalletEnabled((enabled: boolean) => {
+    if (enabled) {
       store.dispatch(WalletPageActions.initialize())
       render(<App />, document.getElementById('root'))
     } else {
-      initializeOldWallet ();
+      initializeOldWallet()
     }
   })
 }
diff --git a/components/definitions/chromel.d.ts b/components/definitions/chromel.d.ts
index 02d7413f3d42..af84b11ae08b 100644
--- a/components/definitions/chromel.d.ts
+++ b/components/definitions/chromel.d.ts
@@ -316,6 +316,7 @@ declare namespace chrome.braveWallet {
   const shouldCheckForDapps: (callback: (dappDetection: boolean) => void) => void
   const shouldPromptForSetup: (callback: (dappDetection: boolean) => void) => void
   const loadUI: (callback: () => void) => void
+  const isNativeWalletEnabled: (callback: (enabled: boolean) => void) => void
 }
 
 declare namespace chrome.ipfs {

From 5bb7a5f66b5c538c97206dc36c1bd6aed2ab4717 Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Tue, 11 May 2021 10:48:04 -0400
Subject: [PATCH 3/5] Cleanup page, panel and common state handling

---
 .../common/reducers/wallet_reducer.ts          | 15 +++++++++++++++
 components/brave_wallet_ui/constants/types.ts  | 18 +++++++++++++-----
 .../page/async/wallet_page_async_handler.ts    |  8 ++++----
 .../brave_wallet_ui/page/reducers/index.ts     |  7 ++++---
 ...{wallet_page_reducer.ts => page_reducer.ts} |  8 ++++----
 .../brave_wallet_ui/page/wallet_page.tsx       | 13 ++++++++-----
 .../panel/async/wallet_panel_async_handler.ts  |  8 ++++----
 .../brave_wallet_ui/panel/reducers/index.ts    |  7 ++++---
 ...allet_panel_reducer.ts => panel_reducer.ts} |  8 ++++----
 .../brave_wallet_ui/panel/wallet_panel.tsx     | 10 ++++++----
 .../brave_wallet_ui/theme/wallet-dark.ts       |  2 +-
 11 files changed, 67 insertions(+), 37 deletions(-)
 create mode 100644 components/brave_wallet_ui/common/reducers/wallet_reducer.ts
 rename components/brave_wallet_ui/page/reducers/{wallet_page_reducer.ts => page_reducer.ts} (67%)
 rename components/brave_wallet_ui/panel/reducers/{wallet_panel_reducer.ts => panel_reducer.ts} (81%)

diff --git a/components/brave_wallet_ui/common/reducers/wallet_reducer.ts b/components/brave_wallet_ui/common/reducers/wallet_reducer.ts
new file mode 100644
index 000000000000..69c9cadbcaf1
--- /dev/null
+++ b/components/brave_wallet_ui/common/reducers/wallet_reducer.ts
@@ -0,0 +1,15 @@
+/* Copyright (c) 2021 The Brave Authors. All rights reserved.
+ * 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/. */
+/* global window */
+
+import { createReducer } from 'redux-act'
+import { WalletState } from '../../constants/types'
+
+const defaultState: WalletState = {
+}
+
+const reducer = createReducer<WalletState>({}, defaultState)
+
+export default reducer
diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
index 716e7cacbca5..855dd3a6aa4f 100644
--- a/components/brave_wallet_ui/constants/types.ts
+++ b/components/brave_wallet_ui/constants/types.ts
@@ -121,18 +121,26 @@ export interface PriceDataObjectType {
   close: number
 }
 
-export interface State {
-  walletPanelReducer: WalletPanelReducerState
-  walletPageReducer: WalletPageReducerState
+export interface WalletState {
 }
 
-export interface WalletPanelReducerState {
+export interface PanelState {
   hasInitialized: boolean
   isConnected: boolean
   connectedSiteOrigin: string
   accounts: WalletAccountType[]
 }
 
-export interface WalletPageReducerState {
+export interface PageState {
   hasInitialized: boolean
 }
+
+export interface WalletPageState {
+  wallet: WalletState
+  page: PageState
+}
+
+export interface WalletPanelState {
+  wallet: WalletState
+  panel: PanelState
+}
diff --git a/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
index 241376487a58..17bb270437a4 100644
--- a/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
+++ b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
@@ -6,16 +6,16 @@
 import { MiddlewareAPI, Dispatch, AnyAction } from 'redux'
 import AsyncActionHandler from '../../../common/AsyncActionHandler'
 import * as Actions from '../actions/wallet_page_actions'
-import { State, WalletPageReducerState } from '../../constants/types'
+import { PageState, WalletPageState } from '../../constants/types'
 
 const handler = new AsyncActionHandler()
 
-function getState (store: MiddlewareAPI<Dispatch<AnyAction>, any>): WalletPageReducerState {
-  return (store.getState() as State).walletPageReducer
+function getPageState (store: MiddlewareAPI<Dispatch<AnyAction>, any>): PageState {
+  return (store.getState() as WalletPageState).page
 }
 
 handler.on(Actions.initialize.getType(), async (store) => {
-  const state = getState(store)
+  const state = getPageState(store)
   // Sanity check we only initialize once
   if (state.hasInitialized) {
     return
diff --git a/components/brave_wallet_ui/page/reducers/index.ts b/components/brave_wallet_ui/page/reducers/index.ts
index 2242aa632c80..719aadcd5cff 100644
--- a/components/brave_wallet_ui/page/reducers/index.ts
+++ b/components/brave_wallet_ui/page/reducers/index.ts
@@ -5,9 +5,10 @@
 
 import { combineReducers } from 'redux'
 
-// Utils
-import walletPageReducer from './wallet_page_reducer'
+import pageReducer from './page_reducer'
+import walletReducer from '../../common/reducers/wallet_reducer'
 
 export default combineReducers({
-  walletPageReducer
+  page: pageReducer,
+  wallet: walletReducer
 })
diff --git a/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts b/components/brave_wallet_ui/page/reducers/page_reducer.ts
similarity index 67%
rename from components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
rename to components/brave_wallet_ui/page/reducers/page_reducer.ts
index 2db3dba8440e..86fea45bde48 100644
--- a/components/brave_wallet_ui/page/reducers/wallet_page_reducer.ts
+++ b/components/brave_wallet_ui/page/reducers/page_reducer.ts
@@ -6,16 +6,16 @@
 
 import { createReducer } from 'redux-act'
 import * as Actions from '../actions/wallet_page_actions'
-import { WalletPageReducerState } from '../../constants/types'
+import { PageState } from '../../constants/types'
 import { InitializedPayloadType } from '../constants/action_types'
 
-const defaultState: WalletPageReducerState = {
+const defaultState: PageState = {
   hasInitialized: false
 }
 
-const reducer = createReducer<WalletPageReducerState>({}, defaultState)
+const reducer = createReducer<PageState>({}, defaultState)
 
-reducer.on(Actions.initialized, (state: WalletPageReducerState, payload: InitializedPayloadType) => {
+reducer.on(Actions.initialized, (state: PageState, payload: InitializedPayloadType) => {
   return {
     ...state,
     hasInitialized: true,
diff --git a/components/brave_wallet_ui/page/wallet_page.tsx b/components/brave_wallet_ui/page/wallet_page.tsx
index 7b603d41688e..7420764b5d86 100644
--- a/components/brave_wallet_ui/page/wallet_page.tsx
+++ b/components/brave_wallet_ui/page/wallet_page.tsx
@@ -27,8 +27,9 @@ import LegacyApp from '../components/legacy_app'
 import {
   NavTypes,
   NavObjectType,
-  State,
-  WalletPageReducerState
+  WalletState,
+  PageState,
+  WalletPageState
 } from '../constants/types'
 import { LinkedAccountsOptions, NavOptions, StaticOptions } from '../options/side-nav-options'
 import BuySendSwap from '../components/buy-send-swap'
@@ -39,7 +40,8 @@ import walletDarkTheme from '../theme/wallet-dark'
 import walletLightTheme from '../theme/wallet-light'
 
 type Props = {
-  page: WalletPageReducerState
+  wallet: WalletState
+  page: PageState
   actions: typeof WalletPageActions
 }
 
@@ -79,9 +81,10 @@ function Page (props: Props) {
   )
 }
 
-function mapStateToProps (state: State): Partial<Props> {
+function mapStateToProps (state: WalletPageState): Partial<Props> {
   return {
-    page: state.walletPageReducer
+    page: state.page,
+    wallet: state.wallet
   }
 }
 
diff --git a/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts b/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts
index 26b6a7a23876..e42f4b0beee1 100644
--- a/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts
+++ b/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts
@@ -6,7 +6,7 @@
 import { MiddlewareAPI, Dispatch, AnyAction } from 'redux'
 import AsyncActionHandler from '../../../common/AsyncActionHandler'
 import * as Actions from '../actions/wallet_panel_actions'
-import { State, WalletPanelReducerState } from '../../constants/types'
+import { WalletPanelState, PanelState } from '../../constants/types'
 import { AccountPayloadType } from '../constants/action_types'
 
 const handler = new AsyncActionHandler()
@@ -17,12 +17,12 @@ async function getAPIProxy () {
   return api.default.getInstance()
 }
 
-function getState (store: MiddlewareAPI<Dispatch<AnyAction>, any>): WalletPanelReducerState {
-  return (store.getState() as State).walletPanelReducer
+function getPanelState (store: MiddlewareAPI<Dispatch<AnyAction>, any>): PanelState {
+  return (store.getState() as WalletPanelState).panel
 }
 
 handler.on(Actions.initialize.getType(), async (store) => {
-  const state = getState(store)
+  const state = getPanelState(store)
   // Sanity check we only initialize once
   if (state.hasInitialized) {
     return
diff --git a/components/brave_wallet_ui/panel/reducers/index.ts b/components/brave_wallet_ui/panel/reducers/index.ts
index 6f1c54406bee..6419374a291d 100644
--- a/components/brave_wallet_ui/panel/reducers/index.ts
+++ b/components/brave_wallet_ui/panel/reducers/index.ts
@@ -5,9 +5,10 @@
 
 import { combineReducers } from 'redux'
 
-// Utils
-import walletPanelReducer from './wallet_panel_reducer'
+import panelReducer from './panel_reducer'
+import walletReducer from '../../common/reducers/wallet_reducer'
 
 export default combineReducers({
-  walletPanelReducer
+  panel: panelReducer,
+  wallet: walletReducer
 })
diff --git a/components/brave_wallet_ui/panel/reducers/wallet_panel_reducer.ts b/components/brave_wallet_ui/panel/reducers/panel_reducer.ts
similarity index 81%
rename from components/brave_wallet_ui/panel/reducers/wallet_panel_reducer.ts
rename to components/brave_wallet_ui/panel/reducers/panel_reducer.ts
index 8ac8dff504b3..868e08266875 100644
--- a/components/brave_wallet_ui/panel/reducers/wallet_panel_reducer.ts
+++ b/components/brave_wallet_ui/panel/reducers/panel_reducer.ts
@@ -6,10 +6,10 @@
 
 import { createReducer } from 'redux-act'
 import * as Actions from '../actions/wallet_panel_actions'
-import { WalletPanelReducerState } from '../../constants/types'
+import { PanelState } from '../../constants/types'
 import { InitializedPayloadType } from '../constants/action_types'
 
-const defaultState: WalletPanelReducerState = {
+const defaultState: PanelState = {
   hasInitialized: false,
   // TODO(bbondy): isConnected, connectedSiteOrigin, and accounts is just test
   // data to start with until the keyring controller is ready.
@@ -36,9 +36,9 @@ const defaultState: WalletPanelReducerState = {
   }]
 }
 
-const reducer = createReducer<WalletPanelReducerState>({}, defaultState)
+const reducer = createReducer<PanelState>({}, defaultState)
 
-reducer.on(Actions.initialized, (state: WalletPanelReducerState, payload: InitializedPayloadType) => {
+reducer.on(Actions.initialized, (state: PanelState, payload: InitializedPayloadType) => {
   return {
     ...state,
     hasInitialized: true,
diff --git a/components/brave_wallet_ui/panel/wallet_panel.tsx b/components/brave_wallet_ui/panel/wallet_panel.tsx
index d95c1d2182f4..94d005d61352 100644
--- a/components/brave_wallet_ui/panel/wallet_panel.tsx
+++ b/components/brave_wallet_ui/panel/wallet_panel.tsx
@@ -15,16 +15,18 @@ import { ConnectWithSite } from '../components/extension'
 import { StyledExtensionWrapper } from '../stories/style'
 import store from './store'
 import * as WalletPanelActions from './actions/wallet_panel_actions'
-import { State, WalletPanelReducerState, WalletAccountType } from '../constants/types'
+import { WalletState, PanelState, WalletPanelState, WalletAccountType } from '../constants/types'
 
 type Props = {
-  panel: WalletPanelReducerState
+  panel: PanelState
+  wallet: WalletState
   actions: typeof WalletPanelActions
 }
 
-function mapStateToProps (state: State): Partial<Props> {
+function mapStateToProps (state: WalletPanelState): Partial<Props> {
   return {
-    panel: state.walletPanelReducer
+    panel: state.panel,
+    wallet: state.wallet
   }
 }
 
diff --git a/components/brave_wallet_ui/theme/wallet-dark.ts b/components/brave_wallet_ui/theme/wallet-dark.ts
index 25c94899f3c5..33eb5d61b647 100644
--- a/components/brave_wallet_ui/theme/wallet-dark.ts
+++ b/components/brave_wallet_ui/theme/wallet-dark.ts
@@ -10,7 +10,7 @@ import colors from 'brave-ui/theme/colors'
 
 const walletDarkTheme: ITheme & IThemeWallet = {
   ...defaultTheme,
-  name: 'Wallet  Dark',
+  name: 'Wallet Dark',
   color: {
     ...defaultTheme.color,
     text: colors.white,

From 67717557b9e5c2f6de9a6cfa7e3a6f503d5902ec Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Tue, 11 May 2021 11:48:53 -0400
Subject: [PATCH 4/5] Split out Page Container into its own file

---
 components/brave_wallet_ui/page/container.tsx | 89 +++++++++++++++++++
 .../brave_wallet_ui/page/wallet_page.tsx      | 80 +----------------
 2 files changed, 92 insertions(+), 77 deletions(-)
 create mode 100644 components/brave_wallet_ui/page/container.tsx

diff --git a/components/brave_wallet_ui/page/container.tsx b/components/brave_wallet_ui/page/container.tsx
new file mode 100644
index 000000000000..f5da1cbfa0ab
--- /dev/null
+++ b/components/brave_wallet_ui/page/container.tsx
@@ -0,0 +1,89 @@
+// Copyright (c) 2020 The Brave Authors. All rights reserved.
+// 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'
+import { connect } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+
+import * as WalletPageActions from './actions/wallet_page_actions'
+import store from './store'
+
+import 'emptykit.css'
+import '../../../ui/webui/resources/fonts/poppins.css'
+import '../../../ui/webui/resources/fonts/muli.css'
+
+import { WalletWidgetStandIn } from '../stories/style'
+import {
+  SideNav,
+  WalletPageLayout,
+  WalletSubViewLayout,
+  CryptoView
+} from '../components/desktop'
+import {
+  NavTypes,
+  NavObjectType,
+  WalletState,
+  PageState,
+  WalletPageState
+} from '../constants/types'
+import { LinkedAccountsOptions, NavOptions, StaticOptions } from '../options/side-nav-options'
+import BuySendSwap from '../components/buy-send-swap'
+
+type Props = {
+  wallet: WalletState
+  page: PageState
+  actions: typeof WalletPageActions
+}
+
+function Container (props: Props) {
+  const [view, setView] = React.useState<NavTypes>('crypto')
+  const [linkedAccounts] = React.useState<NavObjectType[]>(LinkedAccountsOptions)
+
+  // In the future these will be actual paths
+  // for example wallet/rewards
+  const navigateTo = (path: NavTypes) => {
+    setView(path)
+  }
+
+  return (
+    <WalletPageLayout>
+        <SideNav
+          navList={NavOptions}
+          staticList={StaticOptions}
+          selectedButton={view}
+          onSubmit={navigateTo}
+          linkedAccountsList={linkedAccounts}
+        />
+        <WalletSubViewLayout>
+          {view === 'crypto' ? (
+            <CryptoView />
+          ) : (
+            <div style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+              <h2>{view} view</h2>
+            </div>
+          )}
+
+        </WalletSubViewLayout>
+        <WalletWidgetStandIn>
+          <BuySendSwap />
+        </WalletWidgetStandIn>
+      </WalletPageLayout>
+  )
+}
+
+function mapStateToProps (state: WalletPageState): Partial<Props> {
+  return {
+    page: state.page,
+    wallet: state.wallet
+  }
+}
+
+function mapDispatchToProps (dispatch: Dispatch): Partial<Props> {
+  return {
+    actions: bindActionCreators(WalletPageActions, store.dispatch.bind(store))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Container)
diff --git a/components/brave_wallet_ui/page/wallet_page.tsx b/components/brave_wallet_ui/page/wallet_page.tsx
index 7420764b5d86..9866e73faa86 100644
--- a/components/brave_wallet_ui/page/wallet_page.tsx
+++ b/components/brave_wallet_ui/page/wallet_page.tsx
@@ -5,10 +5,10 @@
 
 import * as React from 'react'
 import { render } from 'react-dom'
-import { connect, Provider } from 'react-redux'
-import { bindActionCreators, Dispatch } from 'redux'
+import { Provider } from 'react-redux'
 import { initLocale } from 'brave-ui'
 
+import Container from './container'
 import * as WalletPageActions from './actions/wallet_page_actions'
 import store from './store'
 
@@ -16,86 +16,13 @@ import 'emptykit.css'
 import '../../../ui/webui/resources/fonts/poppins.css'
 import '../../../ui/webui/resources/fonts/muli.css'
 
-import { WalletWidgetStandIn } from '../stories/style'
-import {
-  SideNav,
-  WalletPageLayout,
-  WalletSubViewLayout,
-  CryptoView
-} from '../components/desktop'
 import LegacyApp from '../components/legacy_app'
-import {
-  NavTypes,
-  NavObjectType,
-  WalletState,
-  PageState,
-  WalletPageState
-} from '../constants/types'
-import { LinkedAccountsOptions, NavOptions, StaticOptions } from '../options/side-nav-options'
-import BuySendSwap from '../components/buy-send-swap'
 import Theme from 'brave-ui/theme/brave-default'
 import DarkTheme from 'brave-ui/theme/brave-dark'
 import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
 import walletDarkTheme from '../theme/wallet-dark'
 import walletLightTheme from '../theme/wallet-light'
 
-type Props = {
-  wallet: WalletState
-  page: PageState
-  actions: typeof WalletPageActions
-}
-
-function Page (props: Props) {
-  const [view, setView] = React.useState<NavTypes>('crypto')
-  const [linkedAccounts] = React.useState<NavObjectType[]>(LinkedAccountsOptions)
-
-  // In the future these will be actual paths
-  // for example wallet/rewards
-  const navigateTo = (path: NavTypes) => {
-    setView(path)
-  }
-
-  return (
-    <WalletPageLayout>
-        <SideNav
-          navList={NavOptions}
-          staticList={StaticOptions}
-          selectedButton={view}
-          onSubmit={navigateTo}
-          linkedAccountsList={linkedAccounts}
-        />
-        <WalletSubViewLayout>
-          {view === 'crypto' ? (
-            <CryptoView />
-          ) : (
-            <div style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-              <h2>{view} view</h2>
-            </div>
-          )}
-
-        </WalletSubViewLayout>
-        <WalletWidgetStandIn>
-          <BuySendSwap />
-        </WalletWidgetStandIn>
-      </WalletPageLayout>
-  )
-}
-
-function mapStateToProps (state: WalletPageState): Partial<Props> {
-  return {
-    page: state.page,
-    wallet: state.wallet
-  }
-}
-
-function mapDispatchToProps (dispatch: Dispatch): Partial<Props> {
-  return {
-    actions: bindActionCreators(WalletPageActions, store.dispatch.bind(store))
-  }
-}
-
-const PageWithState = connect(mapStateToProps, mapDispatchToProps)(Page)
-
 function App () {
   const [initialThemeType, setInitialThemeType] = React.useState<chrome.braveTheme.ThemeType>()
   React.useEffect(() => {
@@ -109,8 +36,7 @@ function App () {
         dark={walletDarkTheme}
         light={walletLightTheme}
       >
-        <PageWithState
-        />
+        <Container />
       </BraveCoreThemeProvider>
       }
     </Provider>

From e494462c1a5926144117f6c761829a14c90a6e4b Mon Sep 17 00:00:00 2001
From: "Brian R. Bondy" <netzen@gmail.com>
Date: Tue, 11 May 2021 11:57:56 -0400
Subject: [PATCH 5/5] Split out Panel Container into its own file

---
 .../brave_wallet_ui/panel/container.tsx       | 89 +++++++++++++++++++
 .../brave_wallet_ui/panel/wallet_panel.tsx    | 85 +-----------------
 2 files changed, 92 insertions(+), 82 deletions(-)
 create mode 100644 components/brave_wallet_ui/panel/container.tsx

diff --git a/components/brave_wallet_ui/panel/container.tsx b/components/brave_wallet_ui/panel/container.tsx
new file mode 100644
index 000000000000..8fc54fa6d584
--- /dev/null
+++ b/components/brave_wallet_ui/panel/container.tsx
@@ -0,0 +1,89 @@
+// Copyright (c) 2021 The Brave Authors. All rights reserved.
+// 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'
+import { connect } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+import { ConnectWithSite } from '../components/extension'
+import { StyledExtensionWrapper } from '../stories/style'
+import store from './store'
+import * as WalletPanelActions from './actions/wallet_panel_actions'
+import { WalletState, PanelState, WalletPanelState, WalletAccountType } from '../constants/types'
+
+type Props = {
+  panel: PanelState
+  wallet: WalletState
+  actions: typeof WalletPanelActions
+}
+
+function mapStateToProps (state: WalletPanelState): Partial<Props> {
+  return {
+    panel: state.panel,
+    wallet: state.wallet
+  }
+}
+
+function mapDispatchToProps (dispatch: Dispatch): Partial<Props> {
+  return {
+    actions: bindActionCreators(WalletPanelActions, store.dispatch.bind(store))
+  }
+}
+
+function Panel (props: Props) {
+  // TODO(petemill): If initial data or UI takes a noticeable amount of time to arrive
+  // consider rendering a "loading" indicator when `hasInitialized === false`, and
+  // also using `React.lazy` to put all the main UI in a separate JS bundle and display
+  // that loading indicator ASAP.
+  const [selectedAccounts, setSelectedAccounts] = React.useState<WalletAccountType[]>([
+    props.panel.accounts[0]
+  ])
+  const [readyToConnect, setReadyToConnect] = React.useState<boolean>(false)
+  const selectAccount = (account: WalletAccountType) => {
+    const newList = [...selectedAccounts, account]
+    setSelectedAccounts(newList)
+  }
+  const removeAccount = (account: WalletAccountType) => {
+    const newList = selectedAccounts.filter(
+      (accounts) => accounts.id !== account.id
+    )
+    setSelectedAccounts(newList)
+  }
+  const onSubmit = () => {
+    props.actions.connectToSite({
+      selectedAccounts,
+      siteToConnectTo: props.panel.connectedSiteOrigin
+    })
+  }
+  const primaryAction = () => {
+    if (!readyToConnect) {
+      setReadyToConnect(true)
+    } else {
+      onSubmit()
+    }
+  }
+  const secondaryAction = () => {
+    if (readyToConnect) {
+      setReadyToConnect(false)
+    } else {
+      props.actions.cancelConnectToSite()
+    }
+  }
+  return (
+    <StyledExtensionWrapper>
+      <ConnectWithSite
+        siteURL={props.panel.connectedSiteOrigin}
+        isReady={readyToConnect}
+        accounts={props.panel.accounts}
+        primaryAction={primaryAction}
+        secondaryAction={secondaryAction}
+        selectAccount={selectAccount}
+        removeAccount={removeAccount}
+        selectedAccounts={selectedAccounts}
+      />
+    </StyledExtensionWrapper>
+  )
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Panel)
diff --git a/components/brave_wallet_ui/panel/wallet_panel.tsx b/components/brave_wallet_ui/panel/wallet_panel.tsx
index 94d005d61352..fc582adab4aa 100644
--- a/components/brave_wallet_ui/panel/wallet_panel.tsx
+++ b/components/brave_wallet_ui/panel/wallet_panel.tsx
@@ -5,38 +5,14 @@
 
 import * as React from 'react'
 import { render } from 'react-dom'
-import { connect, Provider } from 'react-redux'
-import { bindActionCreators, Dispatch } from 'redux'
+import { Provider } from 'react-redux'
 
 import walletDarkTheme from '../theme/wallet-dark'
 import walletLightTheme from '../theme/wallet-light'
 import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
-import { ConnectWithSite } from '../components/extension'
-import { StyledExtensionWrapper } from '../stories/style'
 import store from './store'
 import * as WalletPanelActions from './actions/wallet_panel_actions'
-import { WalletState, PanelState, WalletPanelState, WalletAccountType } from '../constants/types'
-
-type Props = {
-  panel: PanelState
-  wallet: WalletState
-  actions: typeof WalletPanelActions
-}
-
-function mapStateToProps (state: WalletPanelState): Partial<Props> {
-  return {
-    panel: state.panel,
-    wallet: state.wallet
-  }
-}
-
-function mapDispatchToProps (dispatch: Dispatch): Partial<Props> {
-  return {
-    actions: bindActionCreators(WalletPanelActions, store.dispatch.bind(store))
-  }
-}
-
-const PanelWithState = connect(mapStateToProps, mapDispatchToProps)(Panel)
+import Container from './container'
 
 function App () {
   const [initialThemeType, setInitialThemeType] = React.useState<chrome.braveTheme.ThemeType>()
@@ -51,68 +27,13 @@ function App () {
         dark={walletDarkTheme}
         light={walletLightTheme}
       >
-        <PanelWithState />
+        <Container />
       </BraveCoreThemeProvider>
       }
     </Provider>
   )
 }
 
-function Panel (props: Props) {
-  // TODO(petemill): If initial data or UI takes a noticeable amount of time to arrive
-  // consider rendering a "loading" indicator when `hasInitialized === false`, and
-  // also using `React.lazy` to put all the main UI in a separate JS bundle and display
-  // that loading indicator ASAP.
-  const [selectedAccounts, setSelectedAccounts] = React.useState<WalletAccountType[]>([
-    props.panel.accounts[0]
-  ])
-  const [readyToConnect, setReadyToConnect] = React.useState<boolean>(false)
-  const selectAccount = (account: WalletAccountType) => {
-    const newList = [...selectedAccounts, account]
-    setSelectedAccounts(newList)
-  }
-  const removeAccount = (account: WalletAccountType) => {
-    const newList = selectedAccounts.filter(
-      (accounts) => accounts.id !== account.id
-    )
-    setSelectedAccounts(newList)
-  }
-  const onSubmit = () => {
-    props.actions.connectToSite({
-      selectedAccounts,
-      siteToConnectTo: props.panel.connectedSiteOrigin
-    })
-  }
-  const primaryAction = () => {
-    if (!readyToConnect) {
-      setReadyToConnect(true)
-    } else {
-      onSubmit()
-    }
-  }
-  const secondaryAction = () => {
-    if (readyToConnect) {
-      setReadyToConnect(false)
-    } else {
-      props.actions.cancelConnectToSite()
-    }
-  }
-  return (
-    <StyledExtensionWrapper>
-      <ConnectWithSite
-        siteURL={props.panel.connectedSiteOrigin}
-        isReady={readyToConnect}
-        accounts={props.panel.accounts}
-        primaryAction={primaryAction}
-        secondaryAction={secondaryAction}
-        selectAccount={selectAccount}
-        removeAccount={removeAccount}
-        selectedAccounts={selectedAccounts}
-      />
-    </StyledExtensionWrapper>
-  )
-}
-
 function initialize () {
   store.dispatch(WalletPanelActions.initialize())
   render(<App />, document.getElementById('mountPoint'))