Merge pull request #10259 from brave/wired-up-default-wallet-banner

Built/Wired up the Default Wallet Banner

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')

components/brave_wallet_ui/common/async/wallet_async_handler.ts

@@ -97,6 +97,8 @@ async function refreshWalletInfo (store: Store) {
   store.dispatch(WalletActions.getAllTokensList())
 
   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))
 
@@ -262,12 +264,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)

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

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,

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}
             />
           }
         </>

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

components/brave_wallet_ui/components/desktop/backup-warning-banner/style.ts → 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;

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.',

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 {
@@ -583,12 +584,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>
 }
 

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')

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

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
@@ -608,6 +609,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 = userVisibleTokenOptions.map((token) => {
@@ -752,6 +757,8 @@ function Container (props: Props) {
                 onSetUserAssetVisible={onSetUserAssetVisible}
                 onRemoveUserAsset={onRemoveUserAsset}
                 addUserAssetError={addUserAssetError}
+                defaultWallet={defaultWallet}
+                onOpenWalletSettings={onOpenWalletSettings}
               />
             }
           </Route>