Adds initial WebUI for Brave Wallet

browser/resources/resource_ids

@@ -19,6 +19,10 @@
   "<(ROOT_GEN_DIR)/brave/web-ui-brave_welcome/brave_welcome.grd": {
     "includes": [33240],
   },
+  # This file is generated during the build.
+  "<(ROOT_GEN_DIR)/brave/web-ui-brave_wallet/brave_wallet.grd": {
+    "includes": [33340],
+  },
   "brave/browser/resources/settings/settings_resources.grd": {
     "structures": [34500],
     "includes": [34900],

browser/ui/BUILD.gn

@@ -199,4 +199,15 @@ source_set("ui") {
       "//brave/components/brave_rewards/resources:ui_generated_resources",
     ]
   }
+
+  if (!is_official_build) {
+    sources += [
+      "webui/brave_wallet_ui.cc",
+      "webui/brave_wallet_ui.h",
+    ]
+
+    deps += [
+      "//brave/components/brave_wallet_ui:generated_resources",
+    ]
+  }
 }

browser/ui/webui/brave_wallet_ui.cc

@@ -0,0 +1,73 @@
+/* Copyright (c) 2019 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/. */
+
+#include <utility>
+#include <memory>
+#include <string>
+
+#include "brave/browser/ui/webui/brave_wallet_ui.h"
+#include "brave/browser/brave_browser_process_impl.h"
+#include "brave/common/pref_names.h"
+#include "brave/common/webui_url_constants.h"
+#include "brave/components/brave_wallet/resources/grit/brave_wallet_generated_map.h"
+#include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/browser_finder.h"
+#include "chrome/browser/ui/chrome_pages.h"
+#include "chrome/common/pref_names.h"
+#include "chrome/common/webui_url_constants.h"
+#include "components/grit/brave_components_resources.h"
+#include "components/prefs/pref_change_registrar.h"
+#include "components/prefs/pref_service.h"
+#include "content/public/browser/web_ui_message_handler.h"
+
+using content::WebUIMessageHandler;
+
+namespace {
+
+class WalletDOMHandler : public WebUIMessageHandler {
+ public:
+  WalletDOMHandler() {
+  }
+  ~WalletDOMHandler() override {}
+
+  void Init();
+  void RegisterMessages() override;
+
+ private:
+  void HandleImportNowRequested(const base::ListValue* args);
+  Browser* GetBrowser();
+  DISALLOW_COPY_AND_ASSIGN(WalletDOMHandler);
+};
+
+void WalletDOMHandler::Init() {
+}
+
+void WalletDOMHandler::RegisterMessages() {
+}
+
+Browser* WalletDOMHandler::GetBrowser() {
+  return chrome::FindBrowserWithWebContents(web_ui()->GetWebContents());
+}
+
+void WalletDOMHandler::HandleImportNowRequested(
+  const base::ListValue* args) {
+  chrome::ShowSettingsSubPageInTabbedBrowser(
+    GetBrowser(),
+    chrome::kImportDataSubPage);
+}
+
+}  // namespace
+
+BraveWalletUI::BraveWalletUI(content::WebUI* web_ui, const std::string& name)
+    : BasicUI(web_ui, name, kBraveWalletGenerated,
+        kBraveWalletGeneratedSize, IDR_BRAVE_WALLET_HTML) {
+  auto handler_owner = std::make_unique<WalletDOMHandler>();
+  WalletDOMHandler* handler = handler_owner.get();
+  web_ui->AddMessageHandler(std::move(handler_owner));
+  handler->Init();
+}
+
+BraveWalletUI::~BraveWalletUI() {
+}

browser/ui/webui/brave_wallet_ui.h

@@ -0,0 +1,22 @@
+/* Copyright (c) 2019 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/. */
+
+#ifndef BRAVE_BROWSER_UI_WEBUI_BRAVE_WALLET_UI_H_
+#define BRAVE_BROWSER_UI_WEBUI_BRAVE_WALLET_UI_H_
+
+#include <string>
+
+#include "brave/browser/ui/webui/basic_ui.h"
+
+class BraveWalletUI : public BasicUI {
+ public:
+  BraveWalletUI(content::WebUI* web_ui, const std::string& host);
+  ~BraveWalletUI() override;
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(BraveWalletUI);
+};
+
+#endif  // BRAVE_BROWSER_UI_WEBUI_BRAVE_WALLET_UI_H_

browser/ui/webui/brave_web_ui_controller_factory.cc

@@ -13,6 +13,7 @@
 #include "brave/browser/ui/webui/sync/sync_ui.h"
 #include "brave/common/webui_url_constants.h"
 #include "brave/components/brave_rewards/browser/buildflags/buildflags.h"
+#include "brave/components/brave_wallet/browser/buildflags/buildflags.h"
 #include "brave/components/brave_sync/brave_sync_service.h"
 #include "chrome/common/url_constants.h"
 #include "url/gurl.h"
@@ -28,6 +29,10 @@
 #include "brave/browser/ui/webui/brave_rewards_ui.h"
 #endif
 
+#if BUILDFLAG(BRAVE_WALLET_ENABLED)
+#include "brave/browser/ui/webui/brave_wallet_ui.h"
+#endif
+
 using content::WebUI;
 using content::WebUIController;
 
@@ -59,6 +64,10 @@ WebUIController* NewWebUI<BasicUI>(WebUI* web_ui, const GURL& url) {
   } else if (host == kTipHost) {
     return new BraveTipUI(web_ui, url.host());
 #endif
+#if BUILDFLAG(BRAVE_WALLET_ENABLED)
+  } else if (host == kWalletHost) {
+    return new BraveWalletUI(web_ui, url.host());
+#endif
 #if !defined(OS_ANDROID)
   } else if (host == kWelcomeHost) {
     return new BraveWelcomeUI(web_ui, url.host());
@@ -83,6 +92,9 @@ WebUIFactoryFunction GetWebUIFactoryFunction(WebUI* web_ui,
       url.host_piece() == kRewardsHost ||
       url.host_piece() == kRewardsInternalsHost ||
       url.host_piece() == kTipHost ||
+#endif
+#if BUILDFLAG(BRAVE_WALLET_ENABLED)
+      url.host_piece() == kWalletHost ||
 #endif
       url.host_piece() == kWelcomeHost ||
       url.host_piece() == chrome::kChromeUIWelcomeURL ||

common/webui_url_constants.cc

@@ -10,6 +10,7 @@ const char kAdblockJS[] = "brave_adblock.js";
 const char kRewardsHost[] = "rewards";
 const char kRewardsInternalsHost[] = "rewards-internals";
 const char kRewardsJS[] = "brave_rewards.js";
+const char kWalletHost[] = "wallet";
 const char kWelcomeHost[] = "welcome";
 const char kWelcomeJS[] = "brave_welcome.js";
 const char kTipHost[] = "tip";

common/webui_url_constants.h

@@ -11,6 +11,7 @@ extern const char kAdblockJS[];
 extern const char kRewardsHost[];
 extern const char kRewardsInternalsHost[];
 extern const char kRewardsJS[];
+extern const char kWalletHost[];
 extern const char kWelcomeHost[];
 extern const char kWelcomeJS[];
 extern const char kTipHost[];

components/brave_wallet_ui/BUILD.gn

@@ -0,0 +1,17 @@
+import("//brave/components/common/typescript.gni")
+
+transpile_web_ui("brave_wallet_ui") {
+  entry_points = [
+    ["brave_wallet", rebase_path("brave_wallet.tsx")]
+  ]
+
+  resource_name = "brave_wallet"
+}
+
+pack_web_resources("generated_resources") {
+  resource_name = "brave_wallet"
+  output_dir = "$root_gen_dir/brave/components/brave_wallet/resources"
+  deps = [
+    ":brave_wallet_ui"
+  ]
+}

components/brave_wallet_ui/brave_wallet.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Brave Wallet</title>
+<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://resources/js/load_time_data.js"></script>
+<script src="chrome://resources/js/util.js"></script>
+<script src="chrome://resources/js/i18n_template_no_process.js"></script>
+<script src="/brave_wallet.bundle.js"></script>
+<script src="/strings.js"></script>
+<style>
+  #root {
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+  }
+</style>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

components/brave_wallet_ui/brave_wallet.tsx

@@ -0,0 +1,37 @@
+/* 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 { render } from 'react-dom'
+import { Provider } from 'react-redux'
+
+import Theme from 'brave-ui/theme/brave-default'
+import { ThemeProvider } from 'brave-ui/theme'
+
+// Components
+import WalletPage from './components/app'
+
+// Utils
+import store from './store'
+
+window.cr.define('brave_wallet', function () {
+  'use strict'
+
+  function initialize () {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={Theme}>
+          <WalletPage />
+        </ThemeProvider>
+      </Provider>,
+      document.getElementById('root'))
+    window.i18nTemplate.process(window.document, window.loadTimeData)
+  }
+
+  return {
+    initialize
+  }
+})
+
+document.addEventListener('DOMContentLoaded', window.brave_wallet.initialize)

components/brave_wallet_ui/components/app.tsx

@@ -0,0 +1,46 @@
+/* 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'
+
+// Components
+import {
+  WalletContainer,
+  WalletInner,
+  WalletTitle
+} from './style'
+import { WalletInfoIcon } from 'brave-ui/components/icons'
+
+interface Props {
+  walletData: Wallet.State
+}
+
+export interface State {
+}
+
+export class WalletPage extends React.Component<Props, State> {
+  componentDidMount () {
+    console.log('Wallet mounted')
+  }
+
+  render () {
+    return(
+      <WalletContainer>
+        <WalletInner>
+          <WalletInfoIcon />
+          <WalletTitle>{'Brave Wallet'}</WalletTitle>
+        </WalletInner>
+      </WalletContainer>
+    )
+  }
+}
+
+export const mapStateToProps = (state: Wallet.ApplicationState) => ({
+  walletData: state.walletData
+})
+
+export default connect(
+  mapStateToProps
+)(WalletPage)

components/brave_wallet_ui/components/style.ts

@@ -0,0 +1,19 @@
+/* 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 styled from 'styled-components'
+
+export const WalletContainer = styled<{}, 'div'>('div')`
+  padding: 50px 20px;
+  text-align: center;
+`
+
+export const WalletInner = styled<{}, 'div'>('div')`
+  margin: 0 auto;
+  max-width: 150px;
+`
+
+export const WalletTitle = styled<{}, 'h1'>('h1')`
+  font-weight: 300;
+`

components/brave_wallet_ui/reducers/index.ts

@@ -0,0 +1,12 @@
+/* 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 walletReducer from './wallet_reducer'
+
+export default combineReducers({
+  walletData: walletReducer
+})

components/brave_wallet_ui/reducers/wallet_reducer.ts

@@ -0,0 +1,19 @@
+/* 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 { Reducer } from 'redux'
+
+// Utils
+import * as storage from '../storage'
+
+const walletReducer: Reducer<Wallet.State | undefined> = (state: Wallet.State | undefined, action: any) => {
+  if (state === undefined) {
+    state = storage.load()
+  }
+
+  return state
+}
+
+export default walletReducer

components/brave_wallet_ui/storage.ts

@@ -0,0 +1,33 @@
+/* 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/. */
+
+// Utils
+import { debounce } from '../common/debounce'
+
+export const defaultState = {}
+
+const keyName = 'wallet-data'
+const cleanData = (state: Wallet.State) => {
+  state = { ...state }
+  return state
+}
+
+export const load = (): Wallet.State => {
+  const data = window.localStorage.getItem(keyName)
+  let state = defaultState
+  if (data) {
+    try {
+      state = JSON.parse(data)
+    } catch (e) {
+      console.error('Could not parse local storage data for Brave Wallet: ', e)
+    }
+  }
+  return cleanData(state)
+}
+
+export const debouncedSave = debounce((data: Wallet.State) => {
+  if (data) {
+    window.localStorage.setItem(keyName, JSON.stringify(cleanData(data)))
+  }
+}, 50)