brave · zenparsing · May 20, 2022 · May 4, 2022
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -261,6 +261,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "rewardsOptInHeader", IDS_REWARDS_WIDGET_OPT_IN_HEADER },
         { "rewardsOptInTerms", IDS_BRAVE_REWARDS_ONBOARDING_TERMS },
         { "rewardsOptInText", IDS_REWARDS_WIDGET_OPT_IN_TEXT },
+        { "rewardsLogInToSeeBalance", IDS_REWARDS_LOG_IN_TO_SEE_BALANCE },
         { "rewardsPaymentCheckStatus", IDS_REWARDS_PAYMENT_CHECK_STATUS },
         { "rewardsPaymentCompleted", IDS_REWARDS_PAYMENT_COMPLETED },
         { "rewardsPaymentPending", IDS_REWARDS_PAYMENT_PENDING },
@@ -697,6 +698,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "rewardsContribute", IDS_BRAVE_UI_REWARDS_CONTRIBUTE },
         { "rewardsContributeAttention", IDS_BRAVE_UI_REWARDS_CONTRIBUTE_ATTENTION },             // NOLINT
         { "rewardsGrantDaysRemaining", IDS_REWARDS_WIDGET_GRANT_DAYS_REMAINING },  // NOLINT
+        { "rewardsLogInToSeeBalance", IDS_REWARDS_LOG_IN_TO_SEE_BALANCE },
         { "rewardsPaymentCheckStatus", IDS_REWARDS_PAYMENT_CHECK_STATUS },
         { "rewardsPaymentCompleted", IDS_REWARDS_PAYMENT_COMPLETED },
         { "rewardsPaymentPending", IDS_REWARDS_PAYMENT_PENDING },

diff --git a/components/brave_new_tab_ui/api/initialData.ts b/components/brave_new_tab_ui/api/initialData.ts
@@ -31,6 +31,7 @@ export type PreInitialRewardsData = {
 export type InitialRewardsData = {
   report: NewTab.RewardsBalanceReport
   balance: NewTab.RewardsBalance
+  externalWallet?: RewardsExtension.ExternalWallet
   adsAccountStatement: NewTab.AdsAccountStatement
   parameters: NewTab.RewardsParameters
 }
@@ -131,7 +132,8 @@ export async function getRewardsInitialData (): Promise<InitialRewardsData> {
       adsAccountStatement,
       report,
       balance,
-      parameters
+      parameters,
+      externalWallet
     ] = await Promise.all([
       new Promise(resolve => chrome.braveRewards.getAdsAccountStatement((success: boolean, adsAccountStatement: NewTab.AdsAccountStatement) => {
         resolve(success ? adsAccountStatement : undefined)
@@ -145,6 +147,9 @@ export async function getRewardsInitialData (): Promise<InitialRewardsData> {
       new Promise(resolve => chrome.braveRewards.getRewardsParameters((parameters: NewTab.RewardsParameters) => {
         resolve(parameters)
       })),
+      new Promise(resolve => {
+        chrome.braveRewards.getExternalWallet((_, wallet) => resolve(wallet))
+      }),
       new Promise(resolve => {
         chrome.braveRewards.fetchPromotions()
         resolve(true)
@@ -154,7 +159,8 @@ export async function getRewardsInitialData (): Promise<InitialRewardsData> {
       adsAccountStatement,
       report,
       balance,
-      parameters
+      parameters,
+      externalWallet
     } as InitialRewardsData
   } catch (err) {
     throw Error(err)

diff --git a/components/brave_new_tab_ui/components/default/rewards/index.tsx b/components/brave_new_tab_ui/components/default/rewards/index.tsx
@@ -12,6 +12,7 @@ import { LocaleContext } from '../../../../brave_rewards/resources/shared/lib/lo
 import { WithThemeVariables } from '../../../../brave_rewards/resources/shared/components/with_theme_variables'
 import { GrantInfo } from '../../../../brave_rewards/resources/shared/lib/grant_info'
 import { OnboardingCompletedStore } from '../../../../brave_rewards/resources/shared/lib/onboarding_completed_store'
+import { externalWalletFromExtensionData } from '../../../../brave_rewards/resources/shared/lib/external_wallet'
 
 import {
   RewardsCard,
@@ -45,6 +46,7 @@ export interface RewardsProps {
   rewardsEnabled: boolean
   enabledAds: boolean
   balance: NewTab.RewardsBalance
+  externalWallet?: RewardsExtension.ExternalWallet
   report?: NewTab.RewardsBalanceReport
   adsAccountStatement: NewTab.AdsAccountStatement
   parameters: NewTab.RewardsParameters
@@ -105,6 +107,7 @@ export const RewardsWidget = createWidget((props: RewardsProps) => {
       exchangeCurrency='USD'
       exchangeRate={props.parameters.rate}
       grantInfo={grantInfo}
+      externalWallet={externalWalletFromExtensionData(props.externalWallet)}
       nextPaymentDate={adsInfo ? adsInfo.nextPaymentDate : 0}
       earningsThisMonth={adsInfo ? adsInfo.earningsThisMonth : 0}
       earningsLastMonth={adsInfo ? adsInfo.earningsLastMonth : 0}

diff --git a/components/brave_new_tab_ui/reducers/rewards_reducer.ts b/components/brave_new_tab_ui/reducers/rewards_reducer.ts
@@ -96,6 +96,7 @@ const rewardsReducer: Reducer<NewTab.State | undefined> = (state: NewTab.State,
       const initialRewardsDataPayload = payload as InitialRewardsData
       const newRewardsState = {
         balance: initialRewardsDataPayload.balance,
+        externalWallet: initialRewardsDataPayload.externalWallet,
         report: initialRewardsDataPayload.report,
         totalContribution: getTotalContributions(initialRewardsDataPayload.report),
         parameters: initialRewardsDataPayload.parameters

diff --git a/components/brave_new_tab_ui/storage/new_tab_storage.ts b/components/brave_new_tab_ui/storage/new_tab_storage.ts
@@ -70,6 +70,7 @@ export const defaultState: NewTab.State = {
       total: 0,
       wallets: {}
     },
+    externalWallet: undefined,
     dismissedNotifications: [],
     rewardsEnabled: false,
     enabledAds: false,

@@ -135,6 +135,21 @@
     "message": "Brave Rewards is having an issue. Please try again later.",
     "description": ""
   },
+  "rewardsLogInToSeeBalance": {
+    "message": "$begin_bold$Log in to $provider$$end_bold$ to see your balance",
+    "description": "",
+    "placeholders": {
+      "begin_bold": {
+        "content": "$1"
+      },
+      "provider": {
+        "content": "$2"
+      },
+      "end_bold": {
+        "content": "$3"
+      }
+    }
+  },
   "rewardsPaymentCheckStatus": {
     "message": "Check status",
     "description": ""

@@ -83,25 +83,13 @@ export function getRewardsParameters () {
   })
 }
 
-const externalWalletLoginURLs = new Map<ExternalWalletProvider, string>()
-
-export function getExternalWalletLoginURL (provider: ExternalWalletProvider) {
-  return new Promise<string>((resolve) => {
-    resolve(externalWalletLoginURLs.get(provider) || '')
-  })
-}
-
 export function getExternalWalletProviders () {
   return new Promise<ExternalWalletProvider[]>((resolve) => {
     // The extension API currently does not support retrieving a list of
     // external wallet providers. Instead, use the `getExternalWallet` function
-    // to retrieve the "currently selected" provider and save the OAuth URL for
-    // that provider.
+    // to retrieve the "currently selected" provider.
     chrome.braveRewards.getExternalWallet((_, wallet) => {
       const provider = wallet && externalWalletProviderFromString(wallet.type)
-      if (provider && wallet && wallet.loginUrl) {
-        externalWalletLoginURLs.set(provider, wallet.loginUrl)
-      }
       resolve(provider ? [provider] : [])
     })
   })

@@ -132,6 +132,31 @@ export function createHost (): Host {
     })
   }
 
+  function getExternalWalletActionURL (action: ExternalWalletAction) {
+    const verifyURL = 'chrome://rewards#verify'
+
+    const { externalWallet } = stateManager.getState()
+    if (!externalWallet) {
+      return verifyURL
+    }
+
+    const { links } = externalWallet
+    switch (action) {
+      case 'add-funds':
+        return links.addFunds || links.account || ''
+      case 'complete-verification':
+        return links.completeVerification || links.account || ''
+      case 'reconnect':
+        return links.reconnect || ''
+      case 'verify':
+        return verifyURL
+      case 'view-account':
+        return links.account || ''
+      case 'disconnect':
+        return ''
+    }
+  }
+
   function handleExternalWalletAction (action: ExternalWalletAction) {
     const { externalWallet } = stateManager.getState()
 
@@ -143,26 +168,13 @@ export function createHost (): Host {
       return
     }
 
-    Promise.resolve().then(() => {
-      const verifyURL = 'chrome://rewards#verify'
-      if (!externalWallet) {
-        return verifyURL
-      }
+    const url = getExternalWalletActionURL(action)
+    if (!url) {
+      console.error(`Action URL does not exist for '${action}`)
+      return
+    }
 
-      const { links } = externalWallet
-      switch (action) {
-        case 'add-funds':
-          return links.addFunds || links.account
-        case 'complete-verification':
-          return links.completeVerification || links.account
-        case 'reconnect':
-          return apiAdapter.getExternalWalletLoginURL(externalWallet.provider)
-        case 'verify':
-          return verifyURL
-        case 'view-account':
-          return links.account
-      }
-    }).then(openTab, console.error)
+    openTab(url)
   }
 
   function handleStartupParameters () {

@@ -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 * as React from 'react'
+
+export function ArrowCircleIcon () {
+  return (
+    <svg className='icon' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path fillRule='evenodd' clipRule='evenodd' d='M20 10.0601C20 15.5742 15.5142 20.0601 10 20.0601C4.48667 20.0601 0 15.5742 0 10.0601C0 4.54589 4.48667 0.0600591 10 0.0600591C15.5142 0.0600591 20 4.54589 20 10.0601ZM1.66667 10.0601C1.66667 14.6551 5.405 18.3934 10 18.3934C14.595 18.3934 18.3333 14.6551 18.3333 10.0601C18.3333 5.46506 14.595 1.72672 10 1.72672C5.405 1.72672 1.66667 5.46506 1.66667 10.0601ZM12.2558 9.47089C12.4183 9.63339 12.5 9.84673 12.5 10.0601C12.5 10.2734 12.4183 10.4867 12.2558 10.6492L8.9225 13.9826C8.5975 14.3084 8.06917 14.3084 7.74417 13.9826C7.41833 13.6567 7.41833 13.1301 7.74417 12.8042L10.4883 10.0601L7.74417 7.31589C7.41833 6.99006 7.41833 6.46339 7.74417 6.13756C8.06917 5.81173 8.5975 5.81173 8.9225 6.13756L12.2558 9.47089Z' fill='currentColor'/>
+    </svg>
+  )
+}
@@ -75,6 +75,31 @@ export const terms = styled.div`
   }
 `
 
+export const disconnected = styled.div`
+  margin-top: 20px;
+  padding: 16px;
+  font-size: 14px;
+  line-height: 20px;
+  background: linear-gradient(137.04deg, #346FE1 33.4%, #5844C3 82.8%);
+  border-radius: 8px;
+  cursor: pointer;
+
+  strong {
+    font-weight: 600;
+  }
+`
+
+export const disconnectedArrow = styled.div`
+  text-align: right;
+  line-height: 15px;
+
+  .icon {
+    vertical-align: middle;
+    width: 21px;
+    height: auto;
+  }
+`
+
 export const balance = styled.div`
   margin-top: 16px;
   font-size: 12px;

@@ -6,6 +6,8 @@ import * as React from 'react'
 
 import { LocaleContext, formatMessage } from '../../lib/locale_context'
 import { GrantInfo } from '../../lib/grant_info'
+import { ExternalWallet, getExternalWalletProviderName } from '../../lib/external_wallet'
+import { ArrowCircleIcon } from '../icons/arrow_circle_icon'
 import { BatIcon } from '../icons/bat_icon'
 import { SettingsIcon } from '../icons/settings_icon'
 import { InfoIcon } from './icons/info_icon'
@@ -71,6 +73,7 @@ interface Props {
   earningsReceived: boolean
   contributionsThisMonth: number
   grantInfo: GrantInfo | null
+  externalWallet: ExternalWallet | null
   onEnableRewards: () => void
   onEnableAds: () => void
   onClaimGrant: () => void
@@ -89,6 +92,32 @@ export function RewardsCard (props: Props) {
       )
     }
 
+    const { externalWallet } = props
+    if (externalWallet && externalWallet.status === 'disconnected') {
+      const onClick = () => {
+        if (externalWallet.links.reconnect) {
+          window.open(externalWallet.links.reconnect, '_blank')
+        }
+      }
+      return (
+        <style.disconnected onClick={onClick}>
+          {
+            formatMessage(getString('rewardsLogInToSeeBalance'), {
+              placeholders: {
+                $2: getExternalWalletProviderName(externalWallet.provider)
+              },
+              tags: {
+                $1: (content) => <strong key='1'>{content}</strong>
+              }
+            })
+          }
+          <style.disconnectedArrow>
+            <ArrowCircleIcon />
+          </style.disconnectedArrow>
+        </style.disconnected>
+      )
+    }
+
     const showPending = shouldRenderPendingRewards(
       props.earningsLastMonth,
       props.nextPaymentDate)

@@ -31,6 +31,7 @@ export function Card () {
   const nextPaymentDate = Date.now() + 1000 * 60 * 60 * 24 * daysUntilPayment
   const showGrant = knobs.boolean('Grant Available', false)
   const earningsReceived = knobs.boolean('Earnings received', false)
+  const disconnectedWallet = knobs.boolean('Disconnected', false)
 
   return (
     <LocaleContext.Provider value={localeContext}>
@@ -51,6 +52,14 @@ export function Card () {
               claimableUntil: Date.now() + 1000 * 10 * 24 * 60 * 60,
               expiresAt: Date.now() + 1000 * 10 * 24 * 60 * 60
             } : null}
+            externalWallet={disconnectedWallet ? {
+              provider: 'uphold',
+              status: 'disconnected',
+              username: '',
+              links: {
+                reconnect: 'https://brave.com'
+              }
+            } : null}
             nextPaymentDate={nextPaymentDate}
             earningsThisMonth={0.142}
             earningsLastMonth={1.25}

@@ -14,6 +14,7 @@ export const localeStrings = {
   rewardsGiving: 'Giving',
   rewardsGrantDaysRemaining: 'You have $1 left to claim',
   rewardsLearnMore: 'Learn more',
+  rewardsLogInToSeeBalance: '$1Log in to $2$3 to see your balance',
   rewardsOptInHeader: 'Earn tokens and give back',
   rewardsOptInTerms: 'By proceeding, you agree to the $1Terms of Service$2 and $3Privacy Policy$4.',
   rewardsOptInText: 'Earn tokens by viewing Brave Private Ads and support content creators automatically.',

@@ -44,7 +44,9 @@ export function Wallet () {
 
   const externalWallet: ExternalWallet = {
     provider: 'uphold',
-    status: 'verified',
+    status: knobs.boolean('Wallet disconnected', false)
+      ? 'disconnected'
+      : 'verified',
     username: 'brave123',
     links: {}
   }

@@ -1,4 +1,5 @@
 export const localeStrings = {
+  rewardsLogInToSeeBalance: '$1Log in to $2$3 to see your balance',
   rewardsPaymentCheckStatus: 'Check status',
   rewardsPaymentCompleted: 'Congrats! Your $1 rewards have arrived!',
   rewardsPaymentPending: 'Your $1 $2 rewards will arrive in $3',