Points: UI tweaks (#5362)

rainbow-me · Feb 3, 2024 · a9fbc9b · a9fbc9b
1 parent b784b8f
commit a9fbc9b
Show file tree

Hide file tree

Showing 12 changed files with 313 additions and 377 deletions.
diff --git a/src/components/cards/remote-cards/RemoteCard.tsx b/src/components/cards/remote-cards/RemoteCard.tsx
@@ -185,6 +185,7 @@ export const RemoteCard: React.FC<RemoteCardProps> = ({
         testID={`remote-card-${cardKey}`}
         width={{ custom: width - gutterSize }}
         overflow="visible"
+        justifyContent="center"
         height={'full'}
         borderRadius={18}
         padding={{ custom: 16 }}

diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -1289,7 +1289,6 @@
         "account": "Account",
         "points_you_have": "You Have",
         "points_earned": "Points Earned",
-        "share_bonus": "Share Bonus",
         "share_bonus_paragraph_one": "You're all set!",
         "share_bonus_paragraph_two": "Keep earning points by swapping, bridging, minting, referring friends, and more",
         "share_bonus_paragraph_three": "The more you use Rainbow, the more you'll be rewarded",
@@ -1329,7 +1328,8 @@
         "wallet_balance_required": "Wallet balance required",
         "require_balance_paragraph_one": "To continue, ensure you have an ETH balance on one of the following networks:",
         "require_balance_paragraph_two": "Or alternatively, a MATIC balance on Polygon or a BNB balance on BSC",
-        "fund_my_wallet": "Fund My Wallet"
+        "fund_my_wallet": "Fund My Wallet",
+        "points": "Points"
       }
     },
     "pools": {

diff --git a/src/screens/points/ConsoleSheet.tsx b/src/screens/points/ConsoleSheet.tsx
@@ -36,7 +36,6 @@ export const ConsoleSheet = () => {
     setProfile,
     setAnimationKey,
     setStep,
-    setShareBonusPoints,
     setIntent,
     setDeeplinked,
   } = usePointsProfileContext();
@@ -63,16 +62,8 @@ export const ConsoleSheet = () => {
     setProfile(undefined);
     setAnimationKey(0);
     setStep(RainbowPointsFlowSteps.Initialize);
-    setShareBonusPoints(0);
     setIntent(undefined);
-  }, [
-    viewWeeklyEarnings,
-    setProfile,
-    setAnimationKey,
-    setStep,
-    setShareBonusPoints,
-    setIntent,
-  ]);
+  }, [viewWeeklyEarnings, setProfile, setAnimationKey, setStep, setIntent]);
 
   useFocusEffect(
     useCallback(() => {

diff --git a/src/screens/points/components/AnimatedText.tsx b/src/screens/points/components/AnimatedText.tsx
@@ -69,6 +69,7 @@ export const AnimatedText = ({
     incrementSequence,
   } = useAnimationContext();
   const index = useRef(getNextAnimationIndex()).current;
+
   const displayedCharacters = useSharedValue(
     skipAnimation ? textContent.length : 0
   );

diff --git a/src/screens/points/content/PointsContent.tsx b/src/screens/points/content/PointsContent.tsx
@@ -253,62 +253,72 @@ export default function PointsContent() {
                   </Cover>
                 </Box>
               </Bleed>
-              {!!cards.length && !isReadOnlyWallet && (
-                <>
-                  <RemoteCardCarousel key="remote-cards" />
+              <Stack
+                space="24px"
+                separator={
                   <Separator color="separatorTertiary" thickness={1} />
-                </>
-              )}
-              <Columns space="12px">
-                <Column width="1/2">
-                  {canDisplayNextRewardCard ? (
-                    <InfoCard
-                      // onPress={() => {}}
-                      title={i18n.t(i18n.l.points.points.next_drop)}
-                      mainText={
-                        Date.now() >= nextDistributionSeconds * 1000
-                          ? i18n.t(i18n.l.points.points.now)
-                          : getFormattedTimeQuantity(
-                              nextDistributionSeconds * 1000 - Date.now(),
-                              2
-                            )
-                      }
-                      icon="􀉉"
-                      subtitle={displayNextDistribution(
-                        nextDistributionSeconds
-                      )}
-                      accentColor={labelSecondary}
-                    />
-                  ) : (
-                    <Skeleton height={98} width={(deviceWidth - 40 - 12) / 2} />
-                  )}
-                </Column>
-                <Column width="1/2">
-                  {canDisplayRankCard ? (
-                    <InfoCard
-                      // onPress={() => {}}
-                      title={i18n.t(i18n.l.points.points.your_rank)}
-                      mainText={
-                        isUnranked
-                          ? i18n.t(i18n.l.points.points.unranked)
-                          : `#${rank.toLocaleString('en-US')}`
-                      }
-                      icon={getRankChangeIcon()}
-                      subtitle={
-                        isUnranked
-                          ? i18n.t(i18n.l.points.points.points_to_rank)
-                          : getRankChangeText()
-                      }
-                      mainTextColor={isUnranked ? 'secondary' : 'primary'}
-                      accentColor={
-                        isUnranked ? green : getRankChangeIconColor()
-                      }
-                    />
-                  ) : (
-                    <Skeleton height={98} width={(deviceWidth - 40 - 12) / 2} />
-                  )}
-                </Column>
-              </Columns>
+                }
+              >
+                {!!cards.length && !isReadOnlyWallet && (
+                  <RemoteCardCarousel key="remote-cards" />
+                )}
+                <Columns space="12px">
+                  <Column width="1/2">
+                    {canDisplayNextRewardCard ? (
+                      <InfoCard
+                        // onPress={() => {}}
+                        title={i18n.t(i18n.l.points.points.next_drop)}
+                        mainText={
+                          Date.now() >= nextDistributionSeconds * 1000
+                            ? i18n.t(i18n.l.points.points.now)
+                            : getFormattedTimeQuantity(
+                                nextDistributionSeconds * 1000 - Date.now(),
+                                2
+                              )
+                        }
+                        icon="􀉉"
+                        subtitle={displayNextDistribution(
+                          nextDistributionSeconds
+                        )}
+                        accentColor={labelSecondary}
+                      />
+                    ) : (
+                      <Skeleton
+                        height={98}
+                        width={(deviceWidth - 40 - 12) / 2}
+                      />
+                    )}
+                  </Column>
+                  <Column width="1/2">
+                    {canDisplayRankCard ? (
+                      <InfoCard
+                        // onPress={() => {}}
+                        title={i18n.t(i18n.l.points.points.your_rank)}
+                        mainText={
+                          isUnranked
+                            ? i18n.t(i18n.l.points.points.unranked)
+                            : `#${rank.toLocaleString('en-US')}`
+                        }
+                        icon={getRankChangeIcon()}
+                        subtitle={
+                          isUnranked
+                            ? i18n.t(i18n.l.points.points.points_to_rank)
+                            : getRankChangeText()
+                        }
+                        mainTextColor={isUnranked ? 'secondary' : 'primary'}
+                        accentColor={
+                          isUnranked ? green : getRankChangeIconColor()
+                        }
+                      />
+                    ) : (
+                      <Skeleton
+                        height={98}
+                        width={(deviceWidth - 40 - 12) / 2}
+                      />
+                    )}
+                  </Column>
+                </Columns>
+              </Stack>
               {!isReadOnlyWallet && (
                 <>
                   <Stack space="16px">