Discharge7443/brave-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding Opt-in WebUI for Crypto Wallets

Browse Source
This commit is contained in:
ryanml
2020-05-13 16:53:51 -04:00
committed by Brian R. Bondy
parent 5e66ab0a36
commit 1ace3ab56d
11 changed files with 313 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser/brave_profile_prefs_browsertest.cc
+2 -1
View File
@@ -67,7 +67,8 @@ IN_PROC_BROWSER_TEST_F(BraveProfilePrefsBrowserTest, MiscBravePrefs) {
browser()->profile()->GetPrefs()->GetInteger(kBraveWalletWeb3Provider),
static_cast<int>(BraveWalletWeb3ProviderTypes::ASK));
EXPECT_FALSE(
browser()->profile()->GetPrefs()->GetBoolean(kLoadCryptoWalletsOnStartup));
browser()->profile()->GetPrefs()->GetBoolean(
kLoadCryptoWalletsOnStartup));
EXPECT_FALSE(
browser()->profile()->GetPrefs()->GetBoolean(kOptedIntoCryptoWallets));
browser/ui/webui/brave_webui_source.cc
+11 -1
View File
@@ -49,7 +49,7 @@ void AddResourcePaths(content::WebUIDataSource* html_source,
void CustomizeWebUIHTMLSource(const std::string &name,
content::WebUIDataSource* source) {
#if !defined(OS_ANDROID)
if (name == "rewards") {
if (name == "rewards" || name == "wallet") {
NavigationBarDataProvider::Initialize(source);
}
#endif
@@ -278,6 +278,16 @@ void CustomizeWebUIHTMLSource(const std::string &name,
{ "binanceWidgetAuthInvalidCopy", IDS_BINANCE_WIDGET_AUTH_INVALID_COPY }, // NOLINT
{ "binanceWidgetRefreshData", IDS_BINANCE_WIDGET_REFRESH_DATA }
}
}, {
std::string("wallet"), {
{ "cryptoWalletsWelcome", IDS_BRAVE_WALLET_WELCOME },
{ "cryptoWalletsDisclosureOne", IDS_BRAVE_WALLET_DISCLOSURE_ONE },
{ "cryptoWalletsDisclosureTwo", IDS_BRAVE_WALLET_DISCLOSURE_TWO },
{ "cryptoWalletsDisclosureThree", IDS_BRAVE_WALLET_DISCLOSURE_THREE },
{ "cryptoWalletsDisclosureFour", IDS_BRAVE_WALLET_DISCLOSURE_FOUR },
{ "cryptoWalletsBraveRewards", IDS_BRAVE_WALLET_BRAVE_REWARDS },
{ "cryptoWalletsDisclosureConfirm", IDS_BRAVE_WALLET_DISCLOSURE_CONFIRM } // NOLINT
}
}, {
std::string("welcome"), {
{ "welcome", IDS_BRAVE_WELCOME_PAGE_MAIN_TITLE },
common/extensions/api/_api_features.json
+2 -1
View File
@@ -117,7 +117,8 @@
"chrome://welcome/*",
"chrome://settings/*",
"chrome://newtab/*",
"chrome://webcompat/*"
"chrome://webcompat/*",
"chrome://wallet/*"
]
}]
}
components/brave_wallet_ui/brave_wallet.html
+24 -12
View File
@@ -1,15 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Restart the navigation after first run -->
<script src="/brave_wallet.bundle.js"></script>
<style>
#root { height: -webkit-fill-available; width: -webkit-fill-available; }
</style>
</head>
<body>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Crypto Wallets</title>
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<link rel="import" href="chrome://brave-resources/br_elements/br_toolbar/br_toolbar.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="/strings.js"></script>
<script src="/brave_wallet.bundle.js"></script>
<style>
#root {
display: flex;
min-height: calc(100vh - 56px);
}
</style>
</head>
<body>
<cr-toolbar no-search></cr-toolbar>
<div id="root"></div>
</body>
</html>
components/brave_wallet_ui/brave_wallet.tsx
+58 -16
View File
@@ -1,17 +1,59 @@
// To opt in:
/*
chrome.braveWallet.loadUI(() => {
window.location.href = 'chrome://wallet'
})
*/
// 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/.
chrome.braveWallet.shouldPromptForSetup((prompt) => {
console.log('should prompt: ', prompt)
// If we shouldn't prompt, then the extension is already loaded or
// else the user has already explicitly opted in.
if (!prompt) {
chrome.braveWallet.loadUI(() => {
window.location.href = 'chrome://wallet'
})
}
})
import * as React from 'react'
import { render } from 'react-dom'
import { initLocale } from 'brave-ui'
import 'emptykit.css'
// Fonts
import '../../ui/webui/resources/fonts/poppins.css'
import '../../ui/webui/resources/fonts/muli.css'
// Components
import App from './components/app'
import Theme from 'brave-ui/theme/brave-default'
import DarkTheme from 'brave-ui/theme/brave-dark'
import BraveCoreThemeProvider from '../common/BraveCoreThemeProvider'
function initialize () {
chrome.braveWallet.shouldPromptForSetup((prompt: boolean) => {
if (!prompt) {
chrome.braveWallet.loadUI(() => {
window.location.href = 'chrome://wallet'
})
return
}
renderWebUIView()
})
}
function renderWebUIView () {
new Promise(resolve => chrome.braveTheme.getBraveThemeType(resolve))
.then((themeType: chrome.braveTheme.ThemeType) => {
window.i18nTemplate.process(window.document, window.loadTimeData)
if (window.loadTimeData && window.loadTimeData.data_) {
initLocale(window.loadTimeData.data_)
}
render(
<BraveCoreThemeProvider
initialThemeType={themeType}
dark={DarkTheme}
light={Theme}
>
<App />
</BraveCoreThemeProvider>,
document.getElementById('root')
)
})
.catch(({ message }) => {
console.error(`Could not mount brave wallet: ${message}`)
})
}
document.addEventListener('DOMContentLoaded', initialize)
components/brave_wallet_ui/components/app.tsx
+22
View File
@@ -0,0 +1,22 @@
// 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 OptIn from './opt-in'
export default class App extends React.PureComponent<{}, {}> {
onWalletOptin = () => {
chrome.braveWallet.loadUI(() => {
window.location.href = 'chrome://wallet'
})
}
render () {
return (
<OptIn onWalletOptIn={this.onWalletOptin} />
)
}
}
components/brave_wallet_ui/components/opt-in/assets/crypto-banner.tsx
+41
View File
@@ -0,0 +1,41 @@
// 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'
export default class CryptoBanner extends React.PureComponent<{}, {}> {
render () {
return (
<svg width={'620'} height={'139'} xmlns={'http://www.w3.org/2000/svg'}>
<g fillRule={'nonzero'} fill={'none'}>
<path d={'M20.45 91.341L5.885 105.908l-7.226-7.226a43.733 43.733 0 0 0 21.793-7.34zm13.81-14.96l-1.785-1.775-26.591-26.6-26.6 26.6L-23 76.89l.825.71a42.37 42.37 0 0 0 2.88 2.207c10.516 7.408 23.557 9.644 35.6 6.698a43.298 43.298 0 0 0 13.79-6.036 45.146 45.146 0 0 0 3.06-2.226 54.614 54.614 0 0 0 1.613-1.353l-.509-.509zm-21.361 6.688a50.005 50.005 0 0 0-26.38-7.398c12.13-5.288 27.013-6.007 40.659 1.842a39.513 39.513 0 0 1-14.28 5.556z'} fill={'#2B71FF'} />
<path d={'M527.677 85.617a2564.54 2564.54 0 0 0 5.683 7.596c-3.827 4.523-8.582 7.422-14.322 8.64-6.379 1.333-12.41.348-18.266-2.9 5.22-3.885 10.322-7.712 15.482-11.539 1.16 1.102 2.262 2.204 3.363 3.248 1.218 1.16.754 1.217 2.32.348a16.08 16.08 0 0 0 5.334-4.93c.058-.115.174-.231.232-.347-.058 0 0 0 .174-.116zM504.89 90.72c-1.45 1.101-2.783 2.087-4.117 3.13-.985.755-1.971 1.45-2.957 2.204-.406.348-.696.348-1.16-.058-4.406-3.943-7.19-8.813-8.233-14.612-1.044-5.856-.116-11.423 2.667-16.7.058-.115.174-.29.232-.405 0-.058.058-.058.174-.116 3.827 5.044 7.712 10.089 11.539 15.134-.116.174-.174.29-.29.406-1.16 1.217-2.32 2.435-3.537 3.595-.348.347-.406.637-.174 1.043 1.218 2.32 2.9 4.233 4.987 5.799.29.174.521.348.87.58zm21.629-36.009a327.817 327.817 0 0 1-5.567 3.943c-3.189 2.261-6.378 4.58-9.51 6.842-.405.29-.695.348-1.043-.058-1.044-1.101-2.146-2.087-3.19-3.189-.29-.29-.58-.348-.985-.174-2.493 1.276-4.465 3.073-6.088 5.335-.116.116-.232.29-.348.464-.928-1.218-1.798-2.32-2.668-3.48-.927-1.217-1.797-2.435-2.667-3.594-.29-.406-.348-.696.058-1.102 4.465-4.929 9.973-7.828 16.584-8.524 5.218-.58 10.205.464 14.844 2.957.174.116.348.174.522.29 0 .174 0 .232.058.29zm9.451 34.79c-1.218-1.565-2.32-3.014-3.42-4.464-2.552-3.363-5.104-6.784-7.713-10.147-.348-.464-.348-.754.058-1.16 1.102-1.102 2.146-2.203 3.247-3.305.29-.29.406-.58.174-.986a17.188 17.188 0 0 0-5.276-6.088c-.174-.116-.348-.29-.58-.406.174-.174.348-.29.464-.406 2.203-1.682 4.406-3.305 6.61-4.987.348-.29.638-.406 1.044 0 5.508 4.987 8.465 11.191 8.755 18.671.116 4.35-.87 8.466-2.841 12.351a4.394 4.394 0 0 0-.522.928z'} fill={'#231815'} />
<g fill={'#F3BA2F'}>
<path d={'M84.078 71.458L94.92 60.62l10.847 10.847 6.305-6.31L94.921 48 77.768 65.153zM67 75.916l6.306-6.31 6.31 6.31-6.31 6.306zM84.078 80.37L94.92 91.213l10.847-10.848 6.31 6.301-17.153 17.158L77.768 86.68zM110.213 75.916l6.305-6.31 6.31 6.306-6.31 6.314z'} />
<path d={'M101.319 75.912l-6.398-6.403-4.732 4.732-.546.542-1.12 1.12 6.398 6.394 6.398-6.38z'} />
</g>
<path fill={'#343434'} d={'M309.848 0l-.932 3.167V95.07l.932.93 42.66-25.216z'} />
<path fill={'#8C8C8C'} d={'M309.848 0l-42.66 70.784L309.848 96V51.394z'} />
<path fill={'#3C3C3B'} d={'M309.848 104.078l-.525.64v32.738l.525 1.533 42.686-60.115z'} />
<path fill={'#8C8C8C'} d={'M309.848 138.989v-34.912l-42.66-25.204z'} />
<path fill={'#141414'} d={'M309.848 96l42.66-25.216-42.66-19.39z'} />
<path fill={'#393939'} d={'M267.188 70.784L309.848 96V51.394z'} />
<g transform={'translate(576 44)'}>
<circle fill={'#1A53F0'} cx={'31.5'} cy={'31.5'} r={'31.5'} />
<path d={'M25.3 35.766c-4.022 0-7.283 3.271-7.283 7.306 0 4.034 3.261 7.305 7.284 7.305s7.284-3.271 7.284-7.305c0-4.035-3.26-7.306-7.284-7.306zm0 12.401c-2.803 0-5.077-2.28-5.077-5.093s2.273-5.093 5.078-5.093c2.804 0 5.078 2.28 5.078 5.093-.004 2.81-2.275 5.09-5.078 5.093zm15.557-27.983c-4.022 0-7.284 3.27-7.284 7.305 0 4.034 3.262 7.305 7.284 7.305 4.023 0 7.285-3.27 7.285-7.305s-3.261-7.306-7.284-7.306zm0 12.4c-2.803 0-5.078-2.28-5.078-5.093a5.085 5.085 0 0 1 5.079-5.093 5.085 5.085 0 0 1 5.078 5.093 5.094 5.094 0 0 1-5.078 5.093zm-15.556-12.4a7.293 7.293 0 0 0-7.147 5.855 7.315 7.315 0 0 0 4.305 8.186 7.304 7.304 0 0 0 8.059-11.832h2.065v-2.21h-7.282zm5.079 7.304c0 2.813-2.274 5.093-5.079 5.093-2.805 0-5.078-2.28-5.078-5.093a5.085 5.085 0 0 1 5.078-5.091c2.804 0 5.076 2.28 5.081 5.092h-.002z'} fill={'#FFF'} />
</g>
<g fill={'#667CE9'}>
<path d={'M418.074 76a7.728 7.728 0 0 1-7.733 7.734c-7.42.002-12.341-7.896-12.341-7.896s4.061-7.237 12.341-7.57c4.114-.164 7.733 3.463 7.733 7.732zM423 80.926a7.728 7.728 0 0 1 7.734 7.733c.002 7.42-7.896 12.341-7.896 12.341s-7.237-4.061-7.57-12.341c-.164-4.114 3.463-7.733 7.732-7.733zM427.926 76a7.728 7.728 0 0 1 7.733-7.734c7.42-.002 12.341 7.896 12.341 7.896s-4.061 7.237-12.341 7.57c-4.114.164-7.733-3.463-7.733-7.732zm-5.097-4.926a7.728 7.728 0 0 1-7.733-7.733C415.096 55.921 423 51 423 51s7.237 4.061 7.568 12.341c.159 4.114-3.467 7.733-7.74 7.733z'} />
</g>
<g>
<path d={'M187 47c16.568 0 30 13.432 30 30 0 16.568-13.433 30-30 30s-30-13.429-30-30c0-16.571 13.43-30 30-30'} fill={'#53AE94'} />
<path d={'M190.703 73.003V68.54h10.205v-6.8h-27.79v6.8h10.207V73c-8.295.38-14.532 2.023-14.532 3.991s6.24 3.61 14.532 3.994V95.28h7.38V80.984c8.28-.382 14.504-2.024 14.504-3.99 0-1.966-6.224-3.608-14.504-3.99m0 6.77v-.004c-.208.013-1.278.077-3.66.077-1.904 0-3.244-.054-3.716-.079v.006c-7.329-.324-12.799-1.6-12.799-3.127 0-1.527 5.47-2.802 12.799-3.127v4.983c.48.033 1.852.114 3.747.114 2.276 0 3.42-.095 3.63-.114V73.52c7.314.326 12.772 1.603 12.772 3.125 0 1.521-5.46 2.8-12.772 3.125'} fill={'#FFF'} />
</g>
</g>
</svg>
)
}
}
components/brave_wallet_ui/components/opt-in/index.tsx
+67
View File
@@ -0,0 +1,67 @@
// 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'
// Components
import CryptoBanner from './assets/crypto-banner'
import {
StyledWrapper,
StyledInner,
StyledContent,
StyledHeader,
StyledSeparator,
StyledDisclosure,
StyledText,
StyledRewards,
StyledButtonWrapper,
StyledButton
} from './style'
// Utils
import { getLocale } from '../../../common/locale'
interface Props {
onWalletOptIn: () => void
}
export default class OptIn extends React.PureComponent<Props, {}> {
openRewards = () => {
window.open('chrome://rewards', '_blank')
}
render () {
return (
<StyledWrapper>
<StyledInner>
<CryptoBanner />
<StyledContent>
<StyledHeader>
{getLocale('cryptoWalletsWelcome')}
</StyledHeader>
<StyledSeparator />
<StyledDisclosure>
<StyledText>
{getLocale('cryptoWalletsDisclosureOne')}
</StyledText>
<StyledText>
{getLocale('cryptoWalletsDisclosureTwo')}
</StyledText>
<StyledText>
{getLocale('cryptoWalletsDisclosureThree')} <StyledRewards onClick={this.openRewards}>{getLocale('cryptoWalletsBraveRewards')}</StyledRewards>. {getLocale('cryptoWalletsDisclosureFour')}
</StyledText>
</StyledDisclosure>
</StyledContent>
<StyledButtonWrapper>
<StyledButton onClick={this.props.onWalletOptIn}>
{getLocale('cryptoWalletsDisclosureConfirm')}
</StyledButton>
</StyledButtonWrapper>
</StyledInner>
</StyledWrapper>
)
}
}
components/brave_wallet_ui/components/opt-in/style.ts
+77
View File
@@ -0,0 +1,77 @@
// 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 styled from 'styled-components'
const isDarkTheme = (p: any) => {
return p.theme.name === 'Brave Dark'
}
export const StyledWrapper = styled<{}, 'div'>('div')`
width: 100%;
color: ${p => isDarkTheme(p) ? '#fff' : '#000'};
background: ${p => isDarkTheme(p) ? '#1d2025' : '#fff'};
`
export const StyledInner = styled<{}, 'div'>('div')`
margin: 75px auto;
background: inherit;
border-radius: 6px;
overflow: hidden;
padding: 20px 0px;
max-width: 620px;
`
export const StyledContent = styled<{}, 'div'>('div')`
max-width: 90%;
margin: 0 auto;
text-align: center;
`
export const StyledHeader = styled<{}, 'span'>('span')`
font-weight: bold;
font-size: 21px;
`
export const StyledSeparator = styled<{}, 'div'>('div')`
background: #d3d3d3;
height: 1px;
margin-top: 10px;
`
export const StyledDisclosure = styled<{}, 'div'>('div')`
font-size: 14px;
margin-top: 15px;
display: block;
text-align: left;
`
export const StyledText = styled<{}, 'span'>('span')`
margin-top: 10px;
display: block;
`
export const StyledRewards = styled<{}, 'span'>('span')`
color: #0076ff;
font-size: 14px;
cursor: pointer;
`
export const StyledButtonWrapper = styled<{}, 'div'>('div')`
width: 100%;
margin-top: 50px;
text-align: center;
`
export const StyledButton = styled<{}, 'button'>('button')`
color: #fff;
background: #0076ff;
border-radius: 20px;
height: 40px;
width: 184px;
font-size: 14px;
cursor: pointer;
border: none;
`
components/resources/brave_components_strings.grd
+8
View File
@@ -896,6 +896,14 @@
<message name="IDS_BRAVE_SYNC_REQUIRES_CORRECT_TIME_DESCRIPTION" desc="Error message in dialog for when a Sync could not connect to Sync servers, because of wrong system time (description)">Your computer's clock may be set to the wrong time or time zone. Check your clock settings.</message>
<!-- WebUI Brave Toolbar resources -->
<message name="IDS_WALLETS_TITLE" desc="The toolbar title for the brave://wallets page">Crypto Wallets</message>
<!-- WebUI Crypto Wallets resources -->
<message name="IDS_BRAVE_WALLET_WELCOME" desc="">Welcome to Brave Crypto Wallets</message>
<message name="IDS_BRAVE_WALLET_DISCLOSURE_ONE" desc="">Crypto Wallets lets you work with cryptocurrency and related assets in Brave. Crypto Wallets supports Ethereum tokens like ETH and BAT, as well as collectibles, and lets you work with Ðapps and other smart contracts. All this is meant for people who are familiar with Ethereum and other blockchain systems — or are excited to learn.</message>
<message name="IDS_BRAVE_WALLET_DISCLOSURE_TWO" desc="">Only use Crypto Wallets if you accept that you alone are responsible for all risk associated with this use, and that Brave Software bears no responsibility or liability for any losses including incidental or consequential losses you might suffer as a result of this use.</message>
<message name="IDS_BRAVE_WALLET_DISCLOSURE_THREE" desc="">All of this is completely separate from</message>
<message name="IDS_BRAVE_WALLET_DISCLOSURE_FOUR" desc="">So if you were looking to support your favorite sites, head over there instead.</message>
<message name="IDS_BRAVE_WALLET_BRAVE_REWARDS" desc="">Brave Rewards</message>
<message name="IDS_BRAVE_WALLET_DISCLOSURE_CONFIRM" desc="">I understand</message>
<part file="speedreader_strings.grdp" />
</messages>
ui/webui/resources/br_elements/br_toolbar/br_toolbar.html
+1 -1
View File
@@ -166,7 +166,7 @@
</a>
</li>
<li class="nav-items_list-item" title="[[walletsTitle]]">
<a class="nav-item" href="chrome://wallet">
<a class$="nav-item [[getNavItemSelectedClassName('wallet')]]" href="chrome://wallet">
<span class="nav-item_icon">
<svg
xmlns="http://www.w3.org/2000/svg"