From 33037d75991dbdaaee12a8f7d96288391dd5d427 Mon Sep 17 00:00:00 2001
From: gregs <gregs@rainbow.me>
Date: Mon, 18 Dec 2023 18:39:59 -0300
Subject: [PATCH] Points stop hitting metadata foreach leaderboard address
 (#1212)

Co-authored-by: Bruno Barbieri <1247834+brunobar79@users.noreply.github.com>
Co-authored-by: Daniel Sinclair <d@niel.nyc>
---
 .../components/WalletAvatar/WalletAvatar.tsx     |  4 +++-
 src/entries/popup/hooks/useAvatar.ts             | 16 +++++++++++++---
 .../popup/pages/home/Points/PointsDashboard.tsx  | 15 ++++++++-------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/entries/popup/components/WalletAvatar/WalletAvatar.tsx b/src/entries/popup/components/WalletAvatar/WalletAvatar.tsx
index dadde362dd..2026ae5a84 100644
--- a/src/entries/popup/components/WalletAvatar/WalletAvatar.tsx
+++ b/src/entries/popup/components/WalletAvatar/WalletAvatar.tsx
@@ -6,6 +6,7 @@ import { Avatar } from '../../components/Avatar/Avatar';
 import { useAvatar } from '../../hooks/useAvatar';
 
 export function WalletAvatar({
+  avatarUrl,
   addressOrName,
   size,
   emojiSize,
@@ -15,6 +16,7 @@ export function WalletAvatar({
   emojiPaddingTop,
   boxShadow,
 }: {
+  avatarUrl?: string;
   addressOrName?: string;
   size: number;
   emojiSize?: TextStyles['fontSize'];
@@ -24,7 +26,7 @@ export function WalletAvatar({
   emojiPaddingTop?: BoxStyles['paddingTop'];
   boxShadow?: BoxStyles['boxShadow'];
 }) {
-  const { data: avatar } = useAvatar({ addressOrName });
+  const { data: avatar } = useAvatar({ addressOrName, avatarUrl });
 
   return (
     <AccentColorProvider color={avatar?.color || '#000000'}>
diff --git a/src/entries/popup/hooks/useAvatar.ts b/src/entries/popup/hooks/useAvatar.ts
index cb6c39cb1a..2f89e3ca9c 100644
--- a/src/entries/popup/hooks/useAvatar.ts
+++ b/src/entries/popup/hooks/useAvatar.ts
@@ -13,12 +13,14 @@ import { fetchDominantColor } from './useDominantColor';
 
 const fetchWalletAvatar = async ({
   addressOrName,
+  avatarUrl,
 }: {
   addressOrName: string;
+  avatarUrl?: string;
 }): Promise<WalletAvatar> => {
   const { setWalletAvatar } = walletAvatarStore.getState();
 
-  const ensAvatar = await resolveEnsAvatar({ addressOrName });
+  const ensAvatar = avatarUrl || (await resolveEnsAvatar({ addressOrName }));
   let correctEnsAvatar = true;
   let dominantColor = null;
   try {
@@ -36,13 +38,21 @@ const fetchWalletAvatar = async ({
   return avatar;
 };
 
-export function useAvatar({ addressOrName }: { addressOrName?: string }) {
+export function useAvatar({
+  addressOrName,
+  avatarUrl,
+}: {
+  addressOrName?: string;
+  avatarUrl?: string;
+}) {
   const { walletAvatar } = useWalletAvatarStore();
 
   return useQuery(
     ['walletAvatar', addressOrName],
     async () =>
-      addressOrName ? fetchWalletAvatar({ addressOrName }) : undefined,
+      addressOrName
+        ? fetchWalletAvatar({ addressOrName, avatarUrl })
+        : undefined,
     {
       enabled: !!addressOrName,
       initialData: () => {
diff --git a/src/entries/popup/pages/home/Points/PointsDashboard.tsx b/src/entries/popup/pages/home/Points/PointsDashboard.tsx
index f4889b7d6a..8ded17a5d7 100644
--- a/src/entries/popup/pages/home/Points/PointsDashboard.tsx
+++ b/src/entries/popup/pages/home/Points/PointsDashboard.tsx
@@ -3,13 +3,15 @@
 import { formatDistanceToNowStrict } from 'date-fns';
 import { MotionProps, motion } from 'framer-motion';
 import { PropsWithChildren, useEffect, useReducer } from 'react';
+import { Address } from 'wagmi';
 
 import { i18n } from '~/core/languages';
 import { useCurrentAddressStore } from '~/core/state';
 import { useCurrentThemeStore } from '~/core/state/currentSettings/currentTheme';
+import { truncateAddress } from '~/core/utils/address';
 import { copy } from '~/core/utils/copy';
 import { formatDate } from '~/core/utils/formatDate';
-import { createNumberFormatter } from '~/core/utils/formatNumber';
+import { formatNumber } from '~/core/utils/formatNumber';
 import {
   Box,
   Inline,
@@ -27,10 +29,6 @@ import { WalletAvatar } from '~/entries/popup/components/WalletAvatar/WalletAvat
 
 import { usePoints } from './usePoints';
 
-const { format: formatNumber } = createNumberFormatter({
-  maximumSignificantDigits: 8,
-});
-
 function Card({
   children,
   ...props
@@ -129,7 +127,7 @@ function Leaderboard() {
         <Stack separator={<Separator color="separatorTertiary" />} space="12px">
           {leaderboard.accounts
             ?.slice(0, 100)
-            .map(({ address, earnings }, index) => (
+            .map(({ address, earnings, ens, avatarURL }, index) => (
               <Inline
                 key={address}
                 wrap={false}
@@ -140,10 +138,13 @@ function Leaderboard() {
                 <Inline wrap={false} space="12px" alignVertical="center">
                   <WalletAvatar
                     size={32}
+                    avatarUrl={avatarURL}
                     addressOrName={address}
                     emojiSize="16pt"
                   />
-                  <AddressOrEns address={address} size="14pt" weight="bold" />
+                  <TextOverflow size="14pt" weight="bold">
+                    {ens || truncateAddress(address as Address)}
+                  </TextOverflow>
                 </Inline>
                 <LeaderboardPositionNumberDisplay position={index + 1}>
                   {formatNumber(earnings.total)}