tooltip text from server (#23596)

Author: jzila

go/invitefriends/api.go

@@ -14,14 +14,15 @@ var (
 
 func GetCounts(mctx libkb.MetaContext) (counts keybase1.InviteCounts, err error) {
 	type apiRes struct {
-		NumInvitesInLastDay int     `json:"numInvitesInLastDay"`
-		PercentageChange    float64 `json:"percentageChange"`
-		ShowNumInvites      bool    `json:"showNumInvites"`
-		ShowFire            bool    `json:"showFire"`
+		NumInvites       int     `json:"numInvites"`
+		PercentageChange float64 `json:"percentageChange"`
+		ShowNumInvites   bool    `json:"showNumInvites"`
+		ShowFire         bool    `json:"showFire"`
+		TooltipMarkdown  string  `json:"tooltipMarkdown"`
 		libkb.AppStatusEmbed
 	}
 	apiArg := libkb.APIArg{
-		Endpoint:    "invite_friends/num_invites_in_last_day",
+		Endpoint:    "invite_friends/num_invites",
 		SessionType: libkb.APISessionTypeNONE,
 	}
 	var res apiRes
@@ -30,10 +31,11 @@ func GetCounts(mctx libkb.MetaContext) (counts keybase1.InviteCounts, err error)
 		return counts, err
 	}
 	newCounts := keybase1.InviteCounts{
-		InviteCount:      res.NumInvitesInLastDay,
+		InviteCount:      res.NumInvites,
 		PercentageChange: res.PercentageChange,
 		ShowNumInvites:   res.ShowNumInvites,
 		ShowFire:         res.ShowFire,
+		TooltipMarkdown:  res.TooltipMarkdown,
 	}
 	countsCacheMu.Lock()
 	countsCache = &newCounts

go/protocol/keybase1/invite_friends.go

@@ -8,6 +8,7 @@ protocol inviteFriends {
     double percentageChange; // vs the previous 24 hours
     boolean showNumInvites;
     boolean showFire; // Are keybase servers on fire?
+    string tooltipMarkdown; // Tooltip text
   }
 
   record EmailInvites {

protocol/avdl/keybase1/invite_friends.avdl

@@ -45,7 +45,6 @@ const InviteFriends = () => {
   )
 
   let inviteCounter: React.ReactNode = null
-  let firstTooltipLine = ''
   if (inviteCounts?.showNumInvites) {
     inviteCounter = (
       <Kb.Box2 direction="horizontal" gap="tiny" centerChildren={true}>
@@ -56,16 +55,16 @@ const InviteFriends = () => {
         </Kb.Text>
       </Kb.Box2>
     )
-    firstTooltipLine = `${inviteCounts.inviteCount.toLocaleString()} friends invited in the last 24 hours.`
   }
+  const tooltipMarkdown = <Kb.Markdown style={styles.tooltip}>{inviteCounts?.tooltipMarkdown}</Kb.Markdown>
 
   return Styles.isMobile ? (
     <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.mobileContainer}>
       <Kb.Box style={Styles.globalStyles.flexOne} />
       {inviteButton}
       {inviteCounter ? (
         <Kb.Box2 direction="horizontal" style={styles.inviteCounterBox}>
-          <Kb.WithTooltip tooltip={firstTooltipLine} showOnPressMobile={true}>
+          <Kb.WithTooltip tooltip={tooltipMarkdown} showOnPressMobile={true}>
             {inviteCounter}
           </Kb.WithTooltip>
         </Kb.Box2>
@@ -82,27 +81,7 @@ const InviteFriends = () => {
       <Kb.Box2 direction="vertical" gap="xsmall" style={styles.container} className="invite-friends-big">
         {inviteButton}
         {!!inviteCounter && inviteCounts && (
-          <Kb.WithTooltip
-            tooltip={
-              <Kb.Box2 direction="vertical" alignItems="flex-start">
-                <Kb.Text type="BodySmall" style={styles.tooltip}>
-                  {firstTooltipLine}
-                </Kb.Text>
-                {inviteCounts.percentageChange > 0 ? (
-                  <Kb.Text type="BodySmall" style={styles.tooltip}>
-                    That's {inviteCounts.percentageChange}% more than yesterday.
-                  </Kb.Text>
-                ) : null}
-                {inviteCounts.showFire ? (
-                  <Kb.Text type="BodySmall" style={styles.tooltip}>
-                    Keybase servers are on fire! <Kb.Emoji emojiName=":fire:" size={12} />
-                  </Kb.Text>
-                ) : null}
-              </Kb.Box2>
-            }
-          >
-            {inviteCounter}
-          </Kb.WithTooltip>
+          <Kb.WithTooltip tooltip={tooltipMarkdown}>{inviteCounter}</Kb.WithTooltip>
         )}
       </Kb.Box2>
       <Kb.ClickableBox