Points: UI for "unranked" users (#5293)

* update gql schema * ui * fix gql schema * fix rank card * add unranked to leaderboard row * gql schema fix
rainbow-me · Dec 19, 2023 · dc6a91c · dc6a91c
1 parent d62e8b5
commit dc6a91c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 13 deletions.
diff --git a/src/graphql/queries/metadata.graphql b/src/graphql/queries/metadata.graphql
@@ -268,6 +268,7 @@ query getPointsDataForWallet($address: String!) {
       stats {
         total_users
         total_points
+        rank_cutoff
       }
       accounts {
         address
@@ -285,6 +286,7 @@ query getPointsDataForWallet($address: String!) {
       }
       stats {
         position {
+          unranked
           current
         }
       }
@@ -302,6 +304,10 @@ mutation onboardPoints(
   $referral: String
 ) {
   onboardPoints(address: $address, signature: $signature, referral: $referral) {
+    error {
+      message
+      type
+    }
     meta {
       distribution {
         next
@@ -312,6 +318,7 @@ mutation onboardPoints(
       stats {
         total_users
         total_points
+        rank_cutoff
       }
       accounts {
         address
@@ -329,6 +336,7 @@ mutation onboardPoints(
       }
       stats {
         position {
+          unranked
           current
         }
       }
@@ -350,10 +358,6 @@ mutation onboardPoints(
         }
       }
     }
-    error {
-      message
-      type
-    }
   }
 }
 

diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -1278,7 +1278,9 @@
         "referral_code_copied": "Referral code copied",
         "earn_points_for_referring": "Earn points when your referrals swap $100 through Rainbow, plus earn 10% of the points your referrals earn",
         "already_claimed_points": "Sorry! You have already claimed your points.",
-        "now": "Now"
+        "now": "Now",
+        "unranked": "Unranked",
+        "points_to_rank": "750 points to rank"
       },
       "console": {
         "claim_bonus_paragraph": "You'll receive an additional 100 points once you swap at least $100 through Rainbow",

diff --git a/src/screens/points/components/InfoCard.tsx b/src/screens/points/components/InfoCard.tsx
@@ -9,13 +9,15 @@ export const InfoCard = ({
   mainText,
   icon,
   accentColor,
+  mainTextColor = 'primary',
 }: {
   // onPress: () => void;
   title: string;
   subtitle: string;
   mainText: string;
   icon?: string;
   accentColor: string;
+  mainTextColor?: 'primary' | 'secondary';
 }) => {
   let mainTextFontSize: TextSize;
   if (mainText.length > 10) {
@@ -45,7 +47,11 @@ export const InfoCard = ({
           </Text>
         </Inline> */}
         <Box height={{ custom: 15 }} justifyContent="flex-end">
-          <Text color="label" weight="heavy" size={mainTextFontSize}>
+          <Text
+            color={mainTextColor === 'primary' ? 'label' : 'labelTertiary'}
+            weight="heavy"
+            size={mainTextFontSize}
+          >
             {mainText}
           </Text>
         </Box>

diff --git a/src/screens/points/content/PointsContent.tsx b/src/screens/points/content/PointsContent.tsx
@@ -116,6 +116,7 @@ export default function PointsContent() {
 
   const totalUsers = data?.points?.leaderboard.stats.total_users;
   const rank = data?.points?.user.stats.position.current;
+  const isUnranked = !!data?.points?.user?.stats?.position?.unranked;
 
   const canDisplayTotalPoints = !isNil(data?.points?.user.earnings.total);
   const canDisplayNextRewardCard = !isNil(nextDistributionSeconds);
@@ -241,15 +242,26 @@ export default function PointsContent() {
                     <InfoCard
                       // onPress={() => {}}
                       title={i18n.t(i18n.l.points.points.your_rank)}
-                      mainText={`#${rank.toLocaleString('en-US')}`}
+                      mainText={
+                        isUnranked
+                          ? i18n.t(i18n.l.points.points.unranked)
+                          : `#${rank.toLocaleString('en-US')}`
+                      }
                       icon={
-                        totalUsers >= 10_000_000 && deviceUtils.isSmallPhone
+                        (totalUsers >= 10_000_000 &&
+                          deviceUtils.isSmallPhone) ||
+                        isUnranked
                           ? undefined
                           : '􀉬'
                       }
-                      subtitle={i18n.t(i18n.l.points.points.of_x, {
-                        totalUsers: totalUsers.toLocaleString('en-US'),
-                      })}
+                      subtitle={
+                        isUnranked
+                          ? i18n.t(i18n.l.points.points.points_to_rank)
+                          : i18n.t(i18n.l.points.points.of_x, {
+                              totalUsers: totalUsers.toLocaleString('en-US'),
+                            })
+                      }
+                      mainTextColor={isUnranked ? 'secondary' : 'primary'}
                       accentColor={green}
                     />
                   ) : (
@@ -469,8 +481,14 @@ export default function PointsContent() {
                             : formatAddress(accountAddress, 4, 5)}
                         </Text>
                       </Box>
-                      <Text color="label" size="17pt" weight="heavy">
-                        {`#${rank.toLocaleString('en-US')}`}
+                      <Text
+                        color={isUnranked ? 'labelQuaternary' : 'label'}
+                        size="17pt"
+                        weight="heavy"
+                      >
+                        {isUnranked
+                          ? i18n.t(i18n.l.points.points.unranked)
+                          : `#${rank.toLocaleString('en-US')}`}
                       </Text>
                     </Box>
                   </Box>