Adds react/redux/brave-ui to rewards panel

.gitignore

@@ -3,6 +3,7 @@
 /.idea/
 /browser/resources/brave_extension/
 /components/brave_webtorrent/extension/out/
+/components/brave_rewards/extension/out/
 /dist/
 /out/
 /vendor

browser/extensions/brave_component_loader.cc

@@ -37,9 +37,7 @@ void BraveComponentLoader::AddDefaultComponentExtensions(
     Add(IDR_BRAVE_EXTENSON, brave_extension_path);
   }
 
-// !defined(OFFICIAL_BUILD) should be removed once brave/brave-browser#920
-// (the proper extension UI) is implemented.
-#if BUILDFLAG(BRAVE_REWARDS_ENABLED) && !defined(OFFICIAL_BUILD)
+#if BUILDFLAG(BRAVE_REWARDS_ENABLED)
   if (!command_line.HasSwitch(switches::kDisableBraveRewardsExtension)) {
     base::FilePath brave_rewards_path(FILE_PATH_LITERAL(""));
     brave_rewards_path =

components/brave_rewards/BUILD.gn

@@ -10,7 +10,9 @@ grit("resources") {
     "brave_rewards_resources.pak",
   ]
 
-  deps = []
+  deps = [
+    "//brave/components/brave_rewards/extension:brave_rewards_panel"
+  ]
 
   resource_ids = ""
 }

components/brave_rewards/extension/BUILD.gn

@@ -0,0 +1,28 @@
+import("//brave/components/common/typescript.gni")
+
+transpile_web_ui("brave_rewards_panel") {
+  inputs = [
+    "actions/rewards_panel_actions.ts",
+    "background.ts",
+    "background/actions/rewardsPanelActions.ts",
+    "background/api/locale_api.ts",
+    "background/api/tabs_api.ts",
+    "background/events/rewardsEvents.ts",
+    "background/reducers/index.ts",
+    "background/reducers/rewards_panel_reducer.ts",
+    "background/store.ts",
+    "brave_rewards_panel.html",
+    "brave_rewards_panel.tsx",
+    "components/app.tsx",
+    "constants/rewards_panel_types.ts",
+    "constants/rewardsPanelState.ts",
+  ]
+
+  bundle_names = [
+    "brave_rewards_panel.bundle.js",
+    "brave_rewards_panel_background.bundle.js"
+  ]
+
+  output_dir =
+    "$root_gen_dir/../../../brave/components/brave_rewards/extension/out"
+}

components/brave_rewards/extension/_locales/en/messages.json

@@ -0,0 +1,38 @@
+{
+  "braveRewards": {
+    "message": "Brave Rewards",
+    "description": "Description"
+  },
+  "welcomeButtonTextOne": {
+    "message": "Start Earning Now!",
+    "description": "Description"
+  },
+  "welcomeButtonTextTwo": {
+    "message": "Join Rewards",
+    "description": "Description"
+  },
+  "welcomeDescOne": {
+    "message": "You can now earn tokens for watching privacy focused Brave Ads. Your contribution stays the same.",
+    "description": "Description"
+  },
+  "welcomeDescTwo": {
+    "message": "Earn tokens for watching Ads and pay it forward to your favorite content creators.",
+    "description": "Description"
+  },
+  "welcomeFooterTextOne": {
+    "message": "Check out what’s improved",
+    "description": "Description"
+  },
+  "welcomeFooterTextTwo": {
+    "message": "Learn More",
+    "description": "Description"
+  },
+  "welcomeHeaderOne": {
+    "message": "Brave Payments is now Brave Rewards with many upgrades.",
+    "description": "Description"
+  },
+  "welcomeHeaderTwo": {
+    "message": "You are about to start a very Brave way to browse the web.",
+    "description": "Description"
+  }
+}

components/brave_rewards/extension/_locales/en_GB/messages.json

@@ -0,0 +1,38 @@
+{
+  "braveRewards": {
+    "message": "Brave Rewards",
+    "description": "Description"
+  },
+  "welcomeButtonTextOne": {
+    "message": "Start Earning Now!",
+    "description": "Description"
+  },
+  "welcomeButtonTextTwo": {
+    "message": "Join Rewards",
+    "description": "Description"
+  },
+  "welcomeDescOne": {
+    "message": "You can now earn tokens for watching privacy focused Brave Ads. Your contribution stays the same.",
+    "description": "Description"
+  },
+  "welcomeDescTwo": {
+    "message": "Earn tokens for watching Ads and pay it forward to your favorite content creators.",
+    "description": "Description"
+  },
+  "welcomeFooterTextOne": {
+    "message": "Check out what’s improved",
+    "description": "Description"
+  },
+  "welcomeFooterTextTwo": {
+    "message": "Learn More",
+    "description": "Description"
+  },
+  "welcomeHeaderOne": {
+    "message": "Brave Payments is now Brave Rewards with many upgrades.",
+    "description": "Description"
+  },
+  "welcomeHeaderTwo": {
+    "message": "You are about to start a very Brave way to browse the web.",
+    "description": "Description"
+  }
+}

components/brave_rewards/extension/actions/rewards_panel_actions.ts

@@ -0,0 +1,22 @@
+/* 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 { action } from 'typesafe-actions'
+
+// Constants
+import { types } from '../constants/rewards_panel_types'
+
+export const createWallet = () => action(types.CREATE_WALLET, {})
+
+export const onWalletCreated = () => action(types.ON_WALLET_CREATED, {})
+
+export const onWalletCreateFailed = () => action(types.ON_WALLET_CREATE_FAILED, {})
+
+export const onTabId = (tabId: number | undefined) => action(types.ON_TAB_ID, {
+  tabId
+})
+
+export const onTabRetrieved = (tab: chrome.tabs.Tab) => action(types.ON_TAB_RETRIEVED, {
+  tab
+})

components/brave_rewards/extension/background.ts

@@ -0,0 +1,7 @@
+/* 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 './background/store'
+import './background/events/rewardsEvents'
+import './background/events/tabEvents'

components/brave_rewards/extension/background/actions/rewardsPanelActions.ts

@@ -0,0 +1,8 @@
+/* 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 { bindActionCreators } from 'redux'
+import store from '../store'
+import * as rewardsPanelActions from '../../actions/rewards_panel_actions'
+export default bindActionCreators(rewardsPanelActions, store.dispatch)

components/brave_rewards/extension/background/api/locale_api.ts

@@ -0,0 +1,43 @@
+/* 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/. */
+
+/**
+ * Gets the locale message specified in messages.json
+ * @param {string} message - The locale string
+ */
+export const getMessage = (message: string): string => {
+  if (chrome.i18n) {
+    let translated = chrome.i18n.getMessage(message)
+
+    if (translated) {
+      return translated
+    } else {
+      return `i18n: ${message}`
+    }
+  }
+
+  return `i18n missing: ${message}`
+}
+
+export const getUIMessages = (): Record<string, string> => {
+  const strings = [
+    'braveRewards',
+    'welcomeButtonTextOne',
+    'welcomeButtonTextTwo',
+    'welcomeDescOne',
+    'welcomeDescTwo',
+    'welcomeFooterTextOne',
+    'welcomeFooterTextTwo',
+    'welcomeHeaderOne',
+    'welcomeHeaderTwo'
+  ]
+
+  let translations = {}
+
+  strings.forEach((key: string) => {
+    translations[key] = getMessage(key)
+  })
+
+  return translations
+}

components/brave_rewards/extension/background/api/tabs_api.ts

@@ -0,0 +1,9 @@
+/* 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 const getTabData = (tabId: number) =>
+  chrome.tabs.get(tabId, (tab: chrome.tabs.Tab) => {
+    const rewardsPanelActions = require('../actions/rewardsPanelActions').default
+    rewardsPanelActions.onTabRetrieved(tab)
+  })

components/brave_rewards/extension/background/events/rewardsEvents.ts

@@ -0,0 +1,14 @@
+/* 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 panelActions from '../actions/rewardsPanelActions'
+
+// TODO enable when rewards extension API is done
+// window.brave_rewards.walletCreated.addListener(() => {
+//   panelActions.onWalletCreated()
+// })
+//
+// window.brave_rewards.walletCreateFailed.addListener(() => {
+//   panelActions.onWalletCreateFailed()
+// })

components/brave_rewards/extension/background/events/tabEvents.ts

@@ -0,0 +1,17 @@
+/* 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 rewardsPanelActions from '../actions/rewardsPanelActions'
+
+chrome.tabs.onCreated.addListener((tab: chrome.tabs.Tab) => {
+  rewardsPanelActions.onTabRetrieved(tab)
+})
+
+chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
+  rewardsPanelActions.onTabRetrieved(tab)
+})
+
+chrome.tabs.onActivated.addListener((activeInfo: chrome.tabs.TabActiveInfo) => {
+  rewardsPanelActions.onTabId(activeInfo.tabId)
+})

components/brave_rewards/extension/background/reducers/index.ts

@@ -0,0 +1,13 @@
+/* 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 { rewardsPanelReducer } from './rewards_panel_reducer'
+import { ApplicationState } from '../../constants/rewardsPanelState'
+
+export default combineReducers<ApplicationState>({
+  rewardsPanelData: rewardsPanelReducer
+})

components/brave_rewards/extension/background/reducers/rewards_panel_reducer.ts

@@ -0,0 +1,43 @@
+import { RewardsPanelState } from '../../constants/rewardsPanelState'
+
+import { types } from '../../constants/rewards_panel_types'
+import { getTabData } from '../api/tabs_api'
+
+const defaultState: RewardsPanelState = {
+  walletCreated: false,
+  walletCreateFailed: false,
+  publisher: {}
+}
+
+export const rewardsPanelReducer = (state: RewardsPanelState = defaultState, action: any) => {
+  const payload = action.payload
+  switch (action.type) {
+    case types.CREATE_WALLET:
+      // TODO create wallet
+      // chrome.send('createWalletRequested', [])
+      break
+    case types.ON_WALLET_CREATED:
+      state = { ...state }
+      state.walletCreated = true
+      break
+    case types.ON_WALLET_CREATE_FAILED:
+      state = { ...state }
+      state.walletCreateFailed = true
+      break
+    case types.ON_TAB_ID:
+      if (payload.tabId) {
+        getTabData(payload.tabId)
+      }
+      break
+    case types.ON_TAB_RETRIEVED:
+      // TODO add caching for url's, so that we know
+      // which url in connected to which publisher key
+      if (!payload.tab) {
+        break
+      }
+      // call get publisher info for specific url
+      break
+  }
+
+  return state
+}

components/brave_rewards/extension/background/store.ts

@@ -0,0 +1,16 @@
+/* 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 } from 'redux'
+import { wrapStore } from 'react-chrome-redux'
+
+import reducers from './reducers'
+
+const store = createStore(reducers)
+
+wrapStore(store, {
+  portName: 'REWARDSPANEL'
+})
+
+export default store

components/brave_rewards/extension/brave_rewards_panel.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Rewards Panel</title>
+        <script src="out/brave_rewards_panel.bundle.js"></script>
+        <style>
+            #root { height: 100%; }
+            body { margin: 0; }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

components/brave_rewards/extension/brave_rewards_panel.tsx

@@ -0,0 +1,41 @@
+/* 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 { Store } from 'react-chrome-redux'
+
+import Theme from 'brave-ui/theme/brave-default'
+import { ThemeProvider } from 'brave-ui/theme'
+import { initLocale } from 'brave-ui/helpers'
+
+// Components
+import App from './components/app'
+
+// Constants
+import { RewardsPanelState } from './constants/rewardsPanelState'
+
+// Utils
+import { getUIMessages } from './background/api/locale_api'
+
+const store: Store<RewardsPanelState> = new Store({
+  portName: 'REWARDSPANEL'
+})
+
+initLocale(getUIMessages())
+
+store.ready().then(
+  () => {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={Theme}>
+          <App />
+        </ThemeProvider>
+      </Provider>,
+      document.getElementById('root'))
+  })
+  .catch(() => {
+    console.error('Problem mounting rewards panel')
+  })

components/brave_rewards/extension/components/app.tsx

@@ -0,0 +1,55 @@
+/* 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 { bindActionCreators, Dispatch } from 'redux'
+import { connect } from 'react-redux'
+import { PanelWelcome } from 'brave-ui/features/rewards'
+
+// Components
+import WalletPanel from './walletPanel'
+
+// Constants
+import { ApplicationState, ComponentProps } from '../constants/rewardsPanelState'
+
+// Utils
+import * as rewardsPanelActions from '../actions/rewards_panel_actions'
+
+import { getUIMessages } from '../background/api/locale_api'
+
+interface Props extends ComponentProps {
+}
+
+export class RewardsPanel extends React.Component<Props, {}> {
+
+  render () {
+    const { rewardsPanelData } = this.props
+
+    return (
+      <>
+        {
+          !rewardsPanelData.walletCreated
+          ? <PanelWelcome
+            variant={'one'}
+            optInAction={getUIMessages}
+          />
+          : <WalletPanel />
+        }
+      </>
+    )
+  }
+}
+
+export const mapStateToProps = (state: ApplicationState) => ({
+  rewardsPanelData: state.rewardsPanelData
+})
+
+export const mapDispatchToProps = (dispatch: Dispatch) => ({
+  actions: bindActionCreators(rewardsPanelActions, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RewardsPanel)

components/brave_rewards/extension/components/walletPanel.tsx

@@ -0,0 +1,39 @@
+/* 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 { bindActionCreators, Dispatch } from 'redux'
+import { connect } from 'react-redux'
+
+// Constants
+import { ApplicationState, ComponentProps } from '../constants/rewardsPanelState'
+
+// Utils
+import * as rewardsPanelActions from '../actions/rewards_panel_actions'
+
+interface Props extends ComponentProps {
+}
+
+export class WalletPanel extends React.Component<Props, {}> {
+  render () {
+    return (
+      <>
+        This is wallet panel content
+      </>
+    )
+  }
+}
+
+export const mapStateToProps = (state: ApplicationState) => ({
+  rewardsPanelData: state.rewardsPanelData
+})
+
+export const mapDispatchToProps = (dispatch: Dispatch) => ({
+  actions: bindActionCreators(rewardsPanelActions, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(WalletPanel)

components/brave_rewards/extension/constants/rewardsPanelState.ts

@@ -0,0 +1,21 @@
+/* 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 interface RewardsPanelState {
+  walletCreated: boolean
+  walletCreateFailed: boolean
+  publisher: {
+    publisherKey: string
+    url: string
+  } | {}
+}
+
+export interface ApplicationState {
+  rewardsPanelData: RewardsPanelState
+}
+
+export interface ComponentProps {
+  rewardsPanelData: RewardsPanelState
+  actions: any
+}

components/brave_rewards/extension/constants/rewards_panel_types.ts

@@ -0,0 +1,11 @@
+/* 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 const enum types {
+  CREATE_WALLET = '@@rewards_panel/CREATE_WALLET',
+  ON_WALLET_CREATED = '@@rewards_panel/ON_WALLET_CREATED',
+  ON_WALLET_CREATE_FAILED = '@@rewards_panel/ON_WALLET_CREATE_FAILED',
+  ON_TAB_ID = '@@rewards_panel/ON_TAB_ID',
+  ON_TAB_RETRIEVED = '@@rewards_panel/ON_TAB_RETRIEVED'
+}

components/brave_rewards/extension/manifest.json

@@ -3,8 +3,14 @@
   "name": "Brave Rewards",
   "manifest_version": 2,
   "description": "Brave Rewards Extension",
+  "default_locale": "en",
+  "background" : {
+    "scripts": ["extension/out/brave_rewards_panel_background.bundle.js"],
+    "persistent": true
+  },
+  "permissions": ["tabs"],
   "browser_action": {
-    "default_popup": "extension/popup.html",
+    "default_popup": "extension/brave_rewards_panel.html",
     "default_icon": {
       "16": "extension/img/bat-16.png",
       "32": "extension/img/bat-32.png",

components/brave_rewards/extension/popup.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-  </head>
-  <body>
-    <h2>This is a placeholder for Brave Rewards Extension UI</h2>
-  </body>
-</html>

components/brave_rewards/resources.grd

@@ -11,7 +11,11 @@
   <release seq="1">
     <includes first_id="38000">
       <include name="IDR_BRAVE_REWARDS" file="brave_rewards/extension/manifest.json" type="BINDATA" />
-      <include name="IDR_BRAVE_REWARDS_POPUP_HTML" file="brave_rewards/extension/popup.html" type="BINDATA" />
+      <include name="IDR_BRAVE_REWARDS_LOCALES_EN" file="brave_rewards/extension/_locales/en/messages.json" type="BINDATA" />
+      <include name="IDR_BRAVE_REWARDS_LOCALES_EN_GB" file="brave_rewards/extension/_locales/en_GB/messages.json" type="BINDATA" />
+      <include name="IDR_BRAVE_REWARDS_PANEL_HTML" file="brave_rewards/extension/brave_rewards_panel.html" type="BINDATA" />
+      <include name="IDR_BRAVE_REWARDS_PANEL_BUNDLE_JS" file="brave_rewards/extension/out/brave_rewards_panel.bundle.js" type="BINDATA" />
+      <include name="IDR_BRAVE_REWARDS_PANEL_BACKGROUND_JS" file="brave_rewards/extension/out/brave_rewards_panel_background.bundle.js" type="BINDATA" />
       <include name="IDR_BRAVE_REWARDS_ICON_16" file="brave_rewards/extension/img/bat-16.png" type="BINDATA" />
       <include name="IDR_BRAVE_REWARDS_ICON_32" file="brave_rewards/extension/img/bat-32.png" type="BINDATA" />
       <include name="IDR_BRAVE_REWARDS_ICON_48" file="brave_rewards/extension/img/bat-48.png" type="BINDATA" />

components/definitions/global.d.ts

@@ -26,8 +26,18 @@ declare global {
     }
     brave_rewards: {
       initialize: () => void
-      walletCreated: () => void
-      walletCreateFailed: () => void
+      walletCreated: chrome.events.Event<() => void>
+      walletCreateFailed: chrome.events.Event<() => void>
+      walletProperties: chrome.events.Event<(properties: {status: number, wallet: Rewards.WalletProperties}) => void>
+      grant: chrome.events.Event<(properties: Rewards.Grant) => void>
+      grantCaptcha: chrome.events.Event<(image: string) => void>
+      walletPassphrase: chrome.events.Event<(pass: string) => void>
+      recoverWalletData: chrome.events.Event<(properties: Rewards.RecoverWallet) => void>
+      grantFinish: chrome.events.Event<(properties: Rewards.GrantFinish) => void>
+      reconcileStamp: chrome.events.Event<(stamp: number) => void>
+      addresses: chrome.events.Event<(addresses: Record<string, string>) => void>
+      contributeList: chrome.events.Event<(list: Rewards.Publisher[]) => void>
+      balanceReports: chrome.events.Event<(reports: Record<string, Rewards.Report>) => void>
     }
     brave_welcome: {
       initialize: () => void

components/webpack/dev.config.js

@@ -11,6 +11,8 @@ module.exports = {
     brave_welcome: path.join(__dirname, '../brave_welcome_ui/brave_welcome'),
     brave_webtorrent: path.join(__dirname, '../brave_webtorrent/extension/brave_webtorrent'),
     brave_webtorrent_background: path.join(__dirname, '../brave_webtorrent/extension/background'),
+    brave_rewards_panel: path.join(__dirname, '../brave_rewards/extension/brave_rewards_panel'),
+    brave_rewards_panel_background: path.join(__dirname, '../brave_rewards/extension/background'),
   },
   output: {
     path: process.env.TARGET_GEN_DIR,

components/webpack/prod.config.js

@@ -11,6 +11,8 @@ module.exports = {
     brave_welcome: path.join(__dirname, '../brave_welcome_ui/brave_welcome'),
     brave_webtorrent: path.join(__dirname, '../brave_webtorrent/extension/brave_webtorrent'),
     brave_webtorrent_background: path.join(__dirname, '../brave_webtorrent/extension/background'),
+    brave_rewards_panel: path.join(__dirname, '../brave_rewards/extension/brave_rewards_panel'),
+    brave_rewards_panel_background: path.join(__dirname, '../brave_rewards/extension/background'),
   },
   output: {
     path: process.env.TARGET_GEN_DIR,