web/components/contract/tip-button.tsx

@@ -17,9 +17,15 @@ export function TipButton(props: {
   const { tipAmount, totalTipped, userTipped, isCompact, onClick, disabled } =
     props
 
+  const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
+
   return (
     <Tooltip
-      text={disabled ? 'Tips' : `Tip ${formatMoney(tipAmount)}`}
+      text={
+        disabled
+          ? `Tips (${formatMoney(totalTipped)})`
+          : `Tip ${formatMoney(tipAmount)}`
+      }
       placement="bottom"
       noTap
       noFade
@@ -47,12 +53,12 @@ export function TipButton(props: {
             <div
               className={clsx(
                 'bg-greyscale-5 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
-                totalTipped > 99
+                tipDisplay.length > 2
                   ? 'text-[0.4rem] sm:text-[0.5rem]'
                   : 'sm:text-2xs text-[0.5rem]'
               )}
             >
-              {shortFormatNumber(totalTipped)}
+              {tipDisplay}
             </div>
           )}
         </Col>