[NTP] Add Rewards provider deprecation notice (#32611)

browser/resources/brave_new_tab_page_refresh/components/widgets/rewards_widget.style.ts

@@ -86,6 +86,26 @@ export const style = scoped.css`
     padding-bottom: 4px;
   }
 
+  &.reset-external-wallet {
+    .title {
+      --leo-icon-color: ${color.systemfeedback.warningIcon};
+      --leo-icon-size: 16px;
+    }
+
+    .text {
+      color: #fff;
+    }
+
+    .header {
+      font: ${font.default.semibold};
+    }
+
+    p {
+      font: ${font.xSmall.regular};
+      opacity: 0.6;
+    }
+  }
+
   &.login {
     --leo-icon-size: 40px;
     --provider-icon-color: currentcolor;

browser/resources/brave_new_tab_page_refresh/components/widgets/rewards_widget.tsx

@@ -18,7 +18,10 @@ import { usePersistedJSON } from '$web-common/usePersistedState'
 import { WidgetMenu } from './widget_menu'
 import { Link, openLink } from '../common/link'
 import { WalletProviderIcon } from '../../../../../components/brave_rewards/resources/shared/components/icons/wallet_provider_icon'
-import { getExternalWalletProviderName } from '../../../../../components/brave_rewards/resources/shared/lib/external_wallet'
+import {
+  getExternalWalletProviderName,
+  shouldResetExternalWallet,
+} from '../../../../../components/brave_rewards/resources/shared/lib/external_wallet'
 import { getProviderPayoutStatus } from '../../../../../components/brave_rewards/resources/shared/lib/provider_payout_status'
 import { formatString } from '$web-common/formatString'
 
@@ -129,6 +132,44 @@ export function RewardsWidget() {
     )
   }
 
+  function renderResetExternalWallet() {
+    if (!externalWallet) {
+      return null
+    }
+    const provider = getExternalWalletProviderName(externalWallet.provider)
+    return (
+      <RewardsWidgetContainer className='reset-external-wallet'>
+        <div className='title'>
+          <Icon name='warning-triangle-filled' />
+          {getString(S.NEW_TAB_REWARDS_WIDGET_TITLE)}
+        </div>
+        <div className='content'>
+          <div className='text'>
+            <div className='header'>
+              {formatString(getString(S.REWARDS_RESET_EXTERNAL_WALLET_TITLE), [
+                provider,
+              ])}
+            </div>
+            <p>
+              {formatString(getString(S.REWARDS_RESET_EXTERNAL_WALLET_TEXT), {
+                $1: provider,
+                $2: (content) => null,
+              })}
+            </p>
+          </div>
+          <div className='actions'>
+            <Button
+              size='small'
+              onClick={() => openLink(urls.switchAccountURL)}
+            >
+              {getString(S.REWARDS_MORE_BUTTON_LABEL)}
+            </Button>
+          </div>
+        </div>
+      </RewardsWidgetContainer>
+    )
+  }
+
   function renderLogin() {
     if (!externalWallet) {
       return null
@@ -268,6 +309,10 @@ export function RewardsWidget() {
     return renderUnconnected()
   }
 
+  if (shouldResetExternalWallet(externalWallet.provider)) {
+    return renderResetExternalWallet()
+  }
+
   if (!externalWallet.authenticated) {
     return renderLogin()
   }

components/resources/rewards_strings.grdp

@@ -28,10 +28,10 @@
   <message name="IDS_REWARDS_RESET_EXTERNAL_WALLET_NOTE" desc="">
     Don't worry: Any BAT already in your <ph name="PROVIDER">$1<ex>Uphold</ex></ph> account won't be affected by resetting.
   </message>
-  <message name="IDS_REWARDS_RESET_EXTERNAL_WALLET_TEXT" desc="">
+  <message name="IDS_REWARDS_RESET_EXTERNAL_WALLET_TEXT" desc="" formatter_data="webui=BraveRewards">
     You will not earn for ads while connected to <ph name="PROVIDER">$1<ex>Uphold</ex></ph>. Reset Brave Rewards and connect a different payout account to keep earning. <ph name="LINK_BEGIN">$2</ph>Learn more<ph name="LINK_END">/$2</ph>
   </message>
-  <message name="IDS_REWARDS_RESET_EXTERNAL_WALLET_TITLE" desc="">
+  <message name="IDS_REWARDS_RESET_EXTERNAL_WALLET_TITLE" desc="" formatter_data="webui=BraveRewards">
     <ph name="PROVIDER">$1<ex>Uphold</ex></ph> account no longer supported.
   </message>
 
@@ -435,7 +435,7 @@
   <message name="IDS_REWARDS_HELP_BUTTON_LABEL" desc="">
     Help
   </message>
-  <message name="IDS_REWARDS_MORE_BUTTON_LABEL" desc="">
+  <message name="IDS_REWARDS_MORE_BUTTON_LABEL" desc="" formatter_data="webui=BraveRewards">
     More
   </message>
   <message name="IDS_REWARDS_NAVIGATION_CREATORS_LABEL" desc="">