From 163b2f0e2862feaaae9d289d9212686efe960c03 Mon Sep 17 00:00:00 2001
From: Douglas Daniel <douglashdaniel@gmail.com>
Date: Sat, 25 Sep 2021 15:30:53 -0600
Subject: [PATCH] Built/Wired up the Default Wallet Banner

---
 .../common/actions/wallet_actions.ts          |  4 ++-
 .../common/async/wallet_async_handler.ts      | 14 ++++----
 .../common/reducers/wallet_reducer.ts         | 13 ++++++--
 .../desktop/backup-warning-banner/index.tsx   | 30 -----------------
 .../components/desktop/index.ts               |  4 +--
 .../components/desktop/views/crypto/index.tsx | 30 ++++++++++++++---
 .../desktop/wallet-banner/index.tsx           | 33 +++++++++++++++++++
 .../style.ts                                  |  9 ++---
 .../brave_wallet_ui/constants/locale.ts       |  3 ++
 components/brave_wallet_ui/constants/types.ts |  7 +++-
 .../page/actions/wallet_page_actions.ts       |  1 +
 .../page/async/wallet_page_async_handler.ts   |  8 +++++
 components/brave_wallet_ui/page/container.tsx |  9 ++++-
 .../stories/screens/crypto-story-view.tsx     | 29 ++++++++++++++--
 14 files changed, 140 insertions(+), 54 deletions(-)
 delete mode 100644 components/brave_wallet_ui/components/desktop/backup-warning-banner/index.tsx
 create mode 100644 components/brave_wallet_ui/components/desktop/wallet-banner/index.tsx
 rename components/brave_wallet_ui/components/desktop/{backup-warning-banner => wallet-banner}/style.ts (72%)

diff --git a/components/brave_wallet_ui/common/actions/wallet_actions.ts b/components/brave_wallet_ui/common/actions/wallet_actions.ts
index 2f10f99ecedf..195a94d8f9d7 100644
--- a/components/brave_wallet_ui/common/actions/wallet_actions.ts
+++ b/components/brave_wallet_ui/common/actions/wallet_actions.ts
@@ -29,7 +29,8 @@ import {
   SendTransactionParams,
   ER20TransferParams,
   TransactionInfo,
-  TransactionListInfo
+  TransactionListInfo,
+  DefaultWallet
 } from '../../constants/types'
 
 export const initialize = createAction('initialize')
@@ -72,3 +73,4 @@ export const approveTransaction = createAction<TransactionInfo>('approveTransact
 export const rejectTransaction = createAction<TransactionInfo>('rejectTransaction')
 export const knownTransactionsUpdated = createAction<TransactionInfo[]>('knownTransactionsUpdated')
 export const setTransactionList = createAction<TransactionListInfo[]>('setTransactionList')
+export const defaultWalletUpdated = createAction<DefaultWallet>('defaultWalletUpdated')
diff --git a/components/brave_wallet_ui/common/async/wallet_async_handler.ts b/components/brave_wallet_ui/common/async/wallet_async_handler.ts
index db5ab53e0157..b9f367a3105d 100644
--- a/components/brave_wallet_ui/common/async/wallet_async_handler.ts
+++ b/components/brave_wallet_ui/common/async/wallet_async_handler.ts
@@ -94,6 +94,8 @@ async function refreshWalletInfo (store: Store) {
   store.dispatch(WalletActions.setNetwork(current))
 
   const braveWalletService = apiProxy.braveWalletService
+  const defaultWallet = await braveWalletService.getDefaultWallet()
+  store.dispatch(WalletActions.defaultWalletUpdated(defaultWallet.defaultWallet))
   const visibleTokensInfo = await braveWalletService.getUserAssets(chainId.chainId)
   store.dispatch(WalletActions.setVisibleTokensInfo(visibleTokensInfo.tokens))
 
@@ -259,12 +261,12 @@ handler.on(WalletActions.sendTransaction.getType(), async (store, payload: SendT
   const apiProxy = await getAPIProxy()
 
   const txData = apiProxy.makeTxData(
-      '0x1' /* nonce */,
-      payload.gasPrice || '',  // Estimated by eth_tx_controller if value is ''
-      payload.gas || '',  // Estimated by eth_tx_controller if value is ''
-      payload.to,
-      payload.value,
-      payload.data || []
+    '0x1' /* nonce */,
+    payload.gasPrice || '',  // Estimated by eth_tx_controller if value is ''
+    payload.gas || '',  // Estimated by eth_tx_controller if value is ''
+    payload.to,
+    payload.value,
+    payload.data || []
   )
 
   const addResult = await apiProxy.ethTxController.addUnapprovedTransaction(txData, payload.from)
diff --git a/components/brave_wallet_ui/common/reducers/wallet_reducer.ts b/components/brave_wallet_ui/common/reducers/wallet_reducer.ts
index a0f6d6def2d5..61a96814afad 100644
--- a/components/brave_wallet_ui/common/reducers/wallet_reducer.ts
+++ b/components/brave_wallet_ui/common/reducers/wallet_reducer.ts
@@ -21,7 +21,8 @@ import {
   kMainnetChainId,
   TransactionInfo,
   TransactionStatus,
-  TransactionListInfo
+  TransactionListInfo,
+  DefaultWallet
 } from '../../constants/types'
 import {
   NewUnapprovedTxAdded,
@@ -63,7 +64,8 @@ const defaultState: WalletState = {
   selectedPortfolioTimeline: AssetPriceTimeframe.OneDay,
   networkList: [],
   transactionSpotPrices: [],
-  addUserAssetError: false
+  addUserAssetError: false,
+  defaultWallet: DefaultWallet.BraveWallet
 }
 
 const reducer = createReducer<WalletState>({}, defaultState)
@@ -317,4 +319,11 @@ reducer.on(WalletActions.addUserAssetError, (state: any, payload: boolean) => {
   }
 })
 
+reducer.on(WalletActions.defaultWalletUpdated, (state: any, payload: DefaultWallet) => {
+  return {
+    ...state,
+    defaultWallet: payload
+  }
+})
+
 export default reducer
diff --git a/components/brave_wallet_ui/components/desktop/backup-warning-banner/index.tsx b/components/brave_wallet_ui/components/desktop/backup-warning-banner/index.tsx
deleted file mode 100644
index 438d189856c7..000000000000
--- a/components/brave_wallet_ui/components/desktop/backup-warning-banner/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import locale from '../../../constants/locale'
-// Styled Components
-import {
-  StyledWrapper,
-  WarningText,
-  BannerButton,
-  ButtonRow
-} from './style'
-
-export interface Props {
-  onBackup: () => void
-  onDismiss: () => void
-}
-
-const BackupWarningBanner = (props: Props) => {
-  const { onDismiss, onBackup } = props
-
-  return (
-    <StyledWrapper>
-      <WarningText>{locale.backupWarningText}</WarningText>
-      <ButtonRow>
-        <BannerButton onClick={onBackup} buttonType='primary'>{locale.backupButton}</BannerButton>
-        <BannerButton onClick={onDismiss} buttonType='secondary'>{locale.dismissButton}</BannerButton>
-      </ButtonRow>
-    </StyledWrapper>
-  )
-}
-
-export default BackupWarningBanner
diff --git a/components/brave_wallet_ui/components/desktop/index.ts b/components/brave_wallet_ui/components/desktop/index.ts
index 56eb9682b130..8743a71d4fb6 100644
--- a/components/brave_wallet_ui/components/desktop/index.ts
+++ b/components/brave_wallet_ui/components/desktop/index.ts
@@ -13,7 +13,7 @@ import AccountListItem from './account-list-item'
 import AddButton from './add-button'
 import LockScreen from './lock-screen'
 import WalletMorePopup from './wallet-more-popup'
-import BackupWarningBanner from './backup-warning-banner'
+import WalletBanner from './wallet-banner'
 import PopupModal from './popup-modals'
 import AddAccountModal from './popup-modals/add-account-modal'
 import AccountSettingsModal from './popup-modals/account-settings-modal'
@@ -54,7 +54,7 @@ export {
   OnboardingCreatePassword,
   LockScreen,
   WalletMorePopup,
-  BackupWarningBanner,
+  WalletBanner,
   OnboardingRestore,
   AccountListItem,
   PopupModal,
diff --git a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx
index 770b7d86d667..62ea3b3b7fca 100644
--- a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx
+++ b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx
@@ -12,10 +12,11 @@ import {
   EthereumChain,
   TokenInfo,
   UpdateAccountNamePayloadType,
-  WalletRoutes
+  WalletRoutes,
+  DefaultWallet
 } from '../../../../constants/types'
 import { TopNavOptions } from '../../../../options/top-nav-options'
-import { TopTabNav, BackupWarningBanner, AddAccountModal } from '../../'
+import { TopTabNav, WalletBanner, AddAccountModal } from '../../'
 import locale from '../../../../constants/locale'
 import { PortfolioView, AccountsView } from '../'
 import {
@@ -50,6 +51,7 @@ export interface Props {
   onAddUserAsset: (token: TokenInfo) => void
   onSetUserAssetVisible: (contractAddress: string, isVisible: boolean) => void
   onRemoveUserAsset: (contractAddress: string) => void
+  onOpenWalletSettings: () => void
   addUserAssetError: boolean
   hasImportError: boolean
   transactionSpotPrices: AssetPriceInfo[]
@@ -73,6 +75,7 @@ export interface Props {
   showAddModal: boolean
   selectedNetwork: EthereumChain
   isFetchingPortfolioPriceHistory: boolean
+  defaultWallet: DefaultWallet
 }
 
 const CryptoView = (props: Props) => {
@@ -99,6 +102,8 @@ const CryptoView = (props: Props) => {
     onAddUserAsset,
     onSetUserAssetVisible,
     onRemoveUserAsset,
+    onOpenWalletSettings,
+    defaultWallet,
     addUserAssetError,
     hasImportError,
     userVisibleTokensInfo,
@@ -125,6 +130,7 @@ const CryptoView = (props: Props) => {
   } = props
   const [hideNav, setHideNav] = React.useState<boolean>(false)
   const [showBackupWarning, setShowBackupWarning] = React.useState<boolean>(needsBackup)
+  const [showDefaultWalletBanner, setShowDefaultWalletBanner] = React.useState<boolean>(needsBackup)
   const [selectedAccount, setSelectedAccount] = React.useState<WalletAccountType>()
 
   let { category, id } = useParams<ParamsType>()
@@ -164,6 +170,10 @@ const CryptoView = (props: Props) => {
     setShowBackupWarning(false)
   }
 
+  const onDismissDefaultWalletBanner = () => {
+    setShowDefaultWalletBanner(false)
+  }
+
   const onClickAddAccount = () => {
     onToggleAddModal()
   }
@@ -204,10 +214,22 @@ const CryptoView = (props: Props) => {
             hasMoreButtons={true}
             onLockWallet={onLockWallet}
           />
+          {defaultWallet !== DefaultWallet.BraveWallet && showDefaultWalletBanner &&
+            <WalletBanner
+              onDismiss={onDismissDefaultWalletBanner}
+              onClick={onOpenWalletSettings}
+              bannerType='warning'
+              buttonText={locale.walletPopupSettings}
+              description={locale.defaultWalletBanner}
+            />
+          }
           {needsBackup && showBackupWarning &&
-            <BackupWarningBanner
+            <WalletBanner
               onDismiss={onDismissBackupWarning}
-              onBackup={onShowBackup}
+              onClick={onShowBackup}
+              bannerType='danger'
+              buttonText={locale.backupButton}
+              description={locale.backupWarningText}
             />
           }
         </>
diff --git a/components/brave_wallet_ui/components/desktop/wallet-banner/index.tsx b/components/brave_wallet_ui/components/desktop/wallet-banner/index.tsx
new file mode 100644
index 000000000000..b63779f72994
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-banner/index.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import locale from '../../../constants/locale'
+// Styled Components
+import {
+  StyledWrapper,
+  WarningText,
+  BannerButton,
+  ButtonRow
+} from './style'
+
+export interface Props {
+  onClick: () => void
+  onDismiss: () => void
+  bannerType: 'warning' | 'danger'
+  description: string
+  buttonText: string
+}
+
+const WalletBanner = (props: Props) => {
+  const { onDismiss, onClick, bannerType, description, buttonText } = props
+
+  return (
+    <StyledWrapper bannerType={bannerType}>
+      <WarningText>{description}</WarningText>
+      <ButtonRow>
+        <BannerButton onClick={onClick} buttonType='primary'>{buttonText}</BannerButton>
+        <BannerButton onClick={onDismiss} buttonType='secondary'>{locale.dismissButton}</BannerButton>
+      </ButtonRow>
+    </StyledWrapper>
+  )
+}
+
+export default WalletBanner
diff --git a/components/brave_wallet_ui/components/desktop/backup-warning-banner/style.ts b/components/brave_wallet_ui/components/desktop/wallet-banner/style.ts
similarity index 72%
rename from components/brave_wallet_ui/components/desktop/backup-warning-banner/style.ts
rename to components/brave_wallet_ui/components/desktop/wallet-banner/style.ts
index e966a11a3de4..8a487fb43f59 100644
--- a/components/brave_wallet_ui/components/desktop/backup-warning-banner/style.ts
+++ b/components/brave_wallet_ui/components/desktop/wallet-banner/style.ts
@@ -2,17 +2,18 @@ import styled from 'styled-components'
 
 interface StyleProps {
   buttonType: 'primary' | 'secondary'
+  bannerType: 'warning' | 'danger'
 }
 
-export const StyledWrapper = styled.div`
+export const StyledWrapper = styled.div<Partial<StyleProps>>`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  background-color: ${(p) => p.theme.color.warningBackground};
+  background-color: ${(p) => p.bannerType === 'warning' ? p.theme.color.warningBackground : p.theme.color.errorBackground};
   border-radius: 4px;
-  border: 1px solid ${(p) => p.theme.color.warningBorder};
+  border: 1px solid ${(p) => p.bannerType === 'warning' ? p.theme.color.warningBorder : p.theme.color.errorBorder};
   padding: 20px;
   margin-bottom: 14px;
  `
@@ -32,7 +33,7 @@ export const ButtonRow = styled.div`
   justify-content: center;
 `
 
-export const BannerButton = styled.button<StyleProps>`
+export const BannerButton = styled.button<Partial<StyleProps>>`
   display: flex;;
   cursor: pointer;
   outline: none;
diff --git a/components/brave_wallet_ui/constants/locale.ts b/components/brave_wallet_ui/constants/locale.ts
index 8e2fca52c3eb..09b88e75bf6d 100644
--- a/components/brave_wallet_ui/constants/locale.ts
+++ b/components/brave_wallet_ui/constants/locale.ts
@@ -130,6 +130,9 @@ const locale = {
   backupButton: 'Backup',
   dismissButton: 'Dismiss',
 
+  // Default Wallet Banner
+  defaultWalletBanner: 'Brave Wallet is not currently set as your default web 3 provider. Change default wallet.',
+
   // Restore Screen
   restoreTite: 'Restore Primary Crypto Accounts',
   restoreDescription: 'Enter your recovery phrase to restore your Brave Wallet crypto account.',
diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
index 77863b1ec82b..209ba8ffb649 100644
--- a/components/brave_wallet_ui/constants/types.ts
+++ b/components/brave_wallet_ui/constants/types.ts
@@ -170,6 +170,7 @@ export interface WalletState {
   networkList: EthereumChain[]
   transactionSpotPrices: AssetPriceInfo[]
   addUserAssetError: boolean
+  defaultWallet: DefaultWallet
 }
 
 export interface PanelState {
@@ -584,12 +585,16 @@ export enum DefaultWallet {
   BraveWallet
 }
 
+export interface DefaultWalletReturnInfo {
+  defaultWallet: DefaultWallet
+}
+
 export interface BraveWalletService {
   getUserAssets: (chainId: string) => Promise<GetUserAssetsReturnInfo>
   addUserAsset: (token: TokenInfo, chainId: string) => Promise<AddUserAssetReturnInfo>
   removeUserAsset: (contractAddress: string, chainId: string) => Promise<RemoveUserAssetReturnInfo>
   setUserAssetVisible: (contractAddress: string, chainId: string, visible: boolean) => Promise<SetUserAssetVisibleReturnInfo>
-  getDefaultWallet: () => Promise<DefaultWallet>
+  getDefaultWallet: () => Promise<DefaultWalletReturnInfo>
   setDefaultWallet: (defaultWallet: DefaultWallet) => Promise<void>
 }
 
diff --git a/components/brave_wallet_ui/page/actions/wallet_page_actions.ts b/components/brave_wallet_ui/page/actions/wallet_page_actions.ts
index c6c54798b102..51dbc7232256 100644
--- a/components/brave_wallet_ui/page/actions/wallet_page_actions.ts
+++ b/components/brave_wallet_ui/page/actions/wallet_page_actions.ts
@@ -58,3 +58,4 @@ export const setCryptoWalletsInstalled = createAction<boolean>('setCryptoWallets
 export const setMetaMaskInstalled = createAction<boolean>('setMetaMaskInstalled')
 export const importFromCryptoWallets = createAction<ImportFromExternalWalletPayloadType>('importFromCryptoWallets')
 export const importFromMetaMask = createAction<ImportFromExternalWalletPayloadType>('importFromMetaMask')
+export const openWalletSettings = createAction('openWalletSettings')
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 9ca684f4c43b..7073a1cc5926 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
@@ -228,6 +228,14 @@ handler.on(WalletPageActions.fetchSwapQuote.getType(), async (store, payload: Sw
   }
 })
 
+handler.on(WalletPageActions.openWalletSettings.getType(), async (store) => {
+  chrome.tabs.create({ url: 'chrome://settings/wallet' }, () => {
+    if (chrome.runtime.lastError) {
+      console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
+    }
+  })
+})
+
 // TODO(bbondy): Remove - Example usage:
 //
 // Interacting with the token registry
diff --git a/components/brave_wallet_ui/page/container.tsx b/components/brave_wallet_ui/page/container.tsx
index bb05363c04b0..7f05c9cca441 100644
--- a/components/brave_wallet_ui/page/container.tsx
+++ b/components/brave_wallet_ui/page/container.tsx
@@ -90,7 +90,8 @@ function Container (props: Props) {
     selectedPortfolioTimeline,
     isFetchingPortfolioPriceHistory,
     transactionSpotPrices,
-    addUserAssetError
+    addUserAssetError,
+    defaultWallet
   } = props.wallet
 
   // Page Props
@@ -571,6 +572,10 @@ function Container (props: Props) {
     props.walletActions.removeUserAsset({ contractAddress, chainId: selectedNetwork.chainId })
   }
 
+  const onOpenWalletSettings = () => {
+    props.walletPageActions.openWalletSettings()
+  }
+
   React.useEffect(() => {
     // Creates a list of Accepted Portfolio Routes
     const acceptedPortfolioRoutes = userVisibleTokensInfo.map((token) => {
@@ -715,6 +720,8 @@ function Container (props: Props) {
                 onSetUserAssetVisible={onSetUserAssetVisible}
                 onRemoveUserAsset={onRemoveUserAsset}
                 addUserAssetError={addUserAssetError}
+                defaultWallet={defaultWallet}
+                onOpenWalletSettings={onOpenWalletSettings}
               />
             }
           </Route>
diff --git a/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx b/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx
index bd523755f810..55d942aa6517 100644
--- a/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx
+++ b/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx
@@ -21,7 +21,7 @@ import {
   UpdateAccountNamePayloadType
 } from '../../constants/types'
 import { TopNavOptions } from '../../options/top-nav-options'
-import { TopTabNav, BackupWarningBanner, AddAccountModal } from '../../components/desktop'
+import { TopTabNav, WalletBanner, AddAccountModal } from '../../components/desktop'
 import { SearchBar, AppList } from '../../components/shared'
 import locale from '../../constants/locale'
 import { AppsList } from '../../options/apps-list-options'
@@ -125,6 +125,7 @@ const CryptoStoryView = (props: Props) => {
     onSetImportError
   } = props
   const [showBackupWarning, setShowBackupWarning] = React.useState<boolean>(needsBackup)
+  const [showDefaultWalletBanner, setShowDefaultWalletBanner] = React.useState<boolean>(needsBackup)
   const [selectedAccount, setSelectedAccount] = React.useState<WalletAccountType>()
   const [hideNav, setHideNav] = React.useState<boolean>(false)
   const [filteredAppsList, setFilteredAppsList] = React.useState<AppsListType[]>(AppsList)
@@ -184,6 +185,15 @@ const CryptoStoryView = (props: Props) => {
     toggleNav()
   }
 
+  const onDismissDefaultWalletBanner = () => {
+    setShowDefaultWalletBanner(false)
+  }
+
+  const onClickSettings = () => {
+    // Does nothing in storybook
+    alert('Will Nav to brave://settings/wallet')
+  }
+
   return (
     <StyledWrapper>
       {!hideNav &&
@@ -195,10 +205,23 @@ const CryptoStoryView = (props: Props) => {
             hasMoreButtons={true}
             onLockWallet={onLockWallet}
           />
+          {showDefaultWalletBanner &&
+            <WalletBanner
+              description={locale.defaultWalletBanner}
+              onDismiss={onDismissDefaultWalletBanner}
+              onClick={onClickSettings}
+              bannerType='warning'
+              buttonText={locale.walletPopupSettings}
+            />
+          }
+
           {needsBackup && showBackupWarning &&
-            <BackupWarningBanner
+            <WalletBanner
+              description={locale.backupWarningText}
               onDismiss={onDismissBackupWarning}
-              onBackup={onShowBackup}
+              onClick={onShowBackup}
+              bannerType='danger'
+              buttonText={locale.backupButton}
             />
           }
         </>