brave · kjozwiak · Sep 29, 2021 · Sep 23, 2021
@@ -19,6 +19,26 @@
     "message": "Refresh Status",
     "description": ""
   },
+  "pendingTipText": {
+    "message": "Any tip you make will remain pending in your wallet and retry automatically for 90 days. $link_begin$Learn more$link_end$",
+    "description": "",
+    "placeholders": {
+      "link_begin": {
+        "content": "$1"
+      },
+      "link_end": {
+        "content": "$2"
+      }
+    }
+  },
+  "pendingTipTitle": {
+    "message": "This creator is not signed up yet.",
+    "description": ""
+  },
+  "pendingTipTitleRegistered": {
+    "message": "This creator is currently not configured to receive tips from your wallet.",
+    "description": ""
+  },
   "platformPublisherTitle": {
     "message": "$name$ on $platform$",
     "placeholders": {

@@ -61,6 +61,10 @@ export const root = styled.div`
     .selected button {
       color: var(--brave-palette-blurple400);
     }
+
+    button[disabled] {
+      color: inherit;
+    }
   }
 `
 

@@ -48,42 +48,145 @@ export const name = styled.div`
 `
 
 export const status = styled.div`
-  font-weight: normal;
+  font-weight: 600;
   font-size: 12px;
-  line-height: 14px;
+  line-height: 18px;
   margin-top: 7px;
   color: var(--brave-palette-neutral700);
+  display: flex;
+
+  .brave-theme-dark & {
+    color: var(--brave-palette-grey400);
+  }
+`
+
+export const statusIndicator = styled.div`
+  position: relative;
+  border: 1px solid var(--brave-palette-neutral200);
+  border-radius: 48px;
+  padding: 3px 10px;
 
   .icon {
+    color: var(--brave-palette-grey200);
     height: 13px;
     width: auto;
     vertical-align: middle;
-    margin-bottom: 2px;
+    margin-bottom: 1px;
     margin-right: 4px;
+
+    .brave-theme-dark & {
+      color: #343A40;
+    }
+  }
+
+  &.registered {
+    border-color: var(--brave-palette-grey500);
+
+    .icon {
+      color: var(--brave-color-brandBatInteracting);
+    }
   }
 
   .brave-theme-dark & {
-    color: var(--brave-palette-grey400);
+    border-color: var(--brave-palette-grey800);
+  }
+
+  &:hover {
+    border-color: var(--brave-color-brandBatInteracting);
+    cursor: default;
+
+    .pending-bubble {
+      display: initial;
+    }
+  }
+
+  .pending-bubble {
+    position: absolute;
+    left: -49px;
+    top: 100%;
+    width: 318px;
+    z-index: 1;
+    padding-top: 8px;
+    display: none;
   }
 `
 
-export const refreshStatus = styled.span`
-  display: inline-block;
-  border-left: solid 1px var(--brave-palette-neutral200);
-  padding-left: 4px;
-  margin-left: 5px;
+export const pendingBubble = styled.div`
+  position: relative;
+  background: var(--brave-palette-white);
+  box-shadow: 0px 0px 24px rgba(99, 105, 110, 0.26);
+  border-radius: 6px;
+  padding: 14px 20px;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    background: inherit;
+    width: 18px;
+    height: 18px;
+    left: 109px;
+    top: -8px;
+    transform: rotate(45deg);
+  }
+
+  a {
+    color: var(--brave-color-brandBat);
+    font-weight: 600;
+    margin-left: 3px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .brave-theme-dark & {
+    background: var(--brave-palette-grey800);
+
+    a {
+      color: var(--brave-palette-blurple400);
+    }
+  }
+`
+
+export const pendingBubbleHeader = styled.div`
+  font-weight: 600;
+  color: var(--brave-palette-neutral900);
+
+  .brave-theme-dark & {
+    color: var(--brave-palette-grey000);
+  }
+`
+
+export const pendingBubbleText = styled.div`
+  margin-top: 3px;
+  color: var(--brave-palette-neutral600);
+
+  .brave-theme-dark & {
+    color: var(--brave-palette-grey500);
+  }
+`
+
+export const refreshStatus = styled.div`
+  padding-left: 10px;
+  padding-top: 4px;
 
   .icon {
     height: 13px;
     width: auto;
-    margin-bottom: 2px;
-    margin-left: 2px;
+    margin-left: 35px;
+    margin-top: 2px;
     color: var(--brave-color-brandBat);
   }
 
   button {
     ${mixins.buttonReset}
     color: var(--brave-color-brandBatInteracting);
+    font-weight: 600;
     cursor: pointer;
 
     &:hover {
@@ -100,22 +203,6 @@ export const refreshStatus = styled.span`
   }
 `
 
-export const verified = styled.span`
-  .icon {
-    color: var(--brave-color-brandBatInteracting);
-  }
-`
-
-export const unverified = styled.span`
-  .icon {
-    color: var(--brave-palette-grey200);
-
-    .brave-theme-dark & {
-      color: #343A40;
-    }
-  }
-`
-
 export const attention = styled.div`
   font-size: 14px;
   line-height: 26px;
@@ -192,8 +279,8 @@ export const tipAction = styled.div`
     line-height: 20px;
     cursor: pointer;
 
-    &:active {
-      background: var(--brave-palette-blurple400);
+    &:hover {
+      background: var(--brave-palette-blurple600);
     }
   }
 `
@@ -8,13 +8,16 @@ import { LocaleContext, formatMessage } from '../../shared/lib/locale_context'
 import { getPublisherPlatformName } from '../../shared/lib/publisher_platform'
 import { HostContext, useHostListener } from '../lib/host_context'
 import { MonthlyTipAction } from '../lib/interfaces'
+import { NewTabLink } from '../../shared/components/new_tab_link'
 import { ToggleButton } from './toggle_button'
 import { MonthlyTipView } from './monthly_tip_view'
 import { VerifiedIcon } from './icons/verified_icon'
 import { LoadingIcon } from './icons/loading_icon'
 
 import * as style from './publisher_card.style'
 
+const pendingTipsURL = 'https://brave.com/faq/#unclaimed-funds'
+
 export function PublisherCard () {
   const { getString } = React.useContext(LocaleContext)
   const host = React.useContext(HostContext)
@@ -23,37 +26,80 @@ export function PublisherCard () {
     React.useState(host.state.publisherInfo)
   const [publisherRefreshing, setPublisherRefreshing] =
     React.useState(host.state.publisherRefreshing)
+  const [externalWallet, setExternalWallet] =
+    React.useState(host.state.externalWallet)
   const [settings, setSettings] = React.useState(host.state.settings)
 
   const [showPublisherLoading, setShowPublisherLoading] = React.useState(false)
 
   useHostListener(host, (state) => {
     setPublisherInfo(state.publisherInfo)
     setPublisherRefreshing(state.publisherRefreshing)
+    setExternalWallet(state.externalWallet)
     setSettings(host.state.settings)
   })
 
   if (!publisherInfo) {
     return null
   }
 
-  function renderStatusMessage () {
+  function renderPendingBubble () {
     if (!publisherInfo) {
       return null
     }
 
-    if (publisherInfo.registered) {
-      return (
-        <style.verified>
-          <VerifiedIcon />{getString('verifiedCreator')}
-        </style.verified>
-      )
+    const { supportedWalletProviders } = publisherInfo
+
+    if (supportedWalletProviders.length > 0) {
+      if (!externalWallet) {
+        return null
+      }
+      if (supportedWalletProviders.includes(externalWallet.provider)) {
+        return null
+      }
+    }
+
+    return (
+      <style.pendingBubble>
+        <style.pendingBubbleHeader>
+          {
+            getString(publisherInfo.registered
+              ? 'pendingTipTitleRegistered'
+              : 'pendingTipTitle')
+          }
+        </style.pendingBubbleHeader>
+        <style.pendingBubbleText>
+          {
+            formatMessage(getString('pendingTipText'), {
+              tags: {
+                $1: content => (
+                  <NewTabLink key='link' href={pendingTipsURL}>
+                    {content}
+                  </NewTabLink>
+                )
+              }
+            })
+          }
+        </style.pendingBubbleText>
+      </style.pendingBubble>
+    )
+  }
+
+  function renderStatusIndicator () {
+    if (!publisherInfo) {
+      return null
     }
 
+    const { registered } = publisherInfo
+
     return (
-      <style.unverified>
-        <VerifiedIcon />{getString('unverifiedCreator')}
-      </style.unverified>
+      <style.statusIndicator className={registered ? 'registered' : ''}>
+        <VerifiedIcon />
+        {getString(registered ? 'verifiedCreator' : 'unverifiedCreator')}
+        <div className='pending-bubble'>
+          {renderPendingBubble()}
+        </div>
+      </style.statusIndicator>
     )
   }
 
@@ -99,7 +145,7 @@ export function PublisherCard () {
         <style.name>
           {getPublisherName()}
           <style.status>
-            {renderStatusMessage()}
+            {renderStatusIndicator()}
             <style.refreshStatus>
               {
                 publisherRefreshing || showPublisherLoading

@@ -14,6 +14,9 @@ export const localeStrings = {
   unverifiedCreator: 'Unverified Creator',
   verifiedCreator: 'Verified Creator',
   refreshStatus: 'Refresh Status',
+  pendingTipText: 'Any tip you make will remain pending in your wallet and retry automatically for 90 days. $1Learn more$2',
+  pendingTipTitle: 'This creator is not signed up yet.',
+  pendingTipTitleRegistered: 'This creator is currently not configured to receive tips from your wallet.',
   platformPublisherTitle: '$1 on $2',
   attention: 'Attention',
   sendTip: 'Send Tip',

@@ -19,7 +19,7 @@ export const verifyWallet = styled.div`
     border: none;
     cursor: pointer;
 
-    &:active {
+    &:hover {
       background: rgba(255, 255, 255, 0.30);
     }
   }
@@ -33,22 +33,6 @@ export const verifyWallet = styled.div`
   }
 `
 
-export const reconnectWallet = styled.div`
-  button.connect {
-    font-size: 12px;
-    line-height: 18px;
-    padding: 6px 10px;
-  }
-
-  .icon {
-    height: 17px;
-    width: auto;
-    vertical-align: middle;
-    margin-right: 6px;
-    margin-bottom: 2px;
-  }
-`
-
 export const bubbleAction = styled.div`
   button {
     background: none;