feature: tier progress bar and membership tier card redesign

maxbbb · maxbbb · commit bf9b51ef5926 · 2026-04-02T18:18:33.000-04:00
diff --git a/src/components/gradient-border/GradientBorderView.tsx b/src/components/gradient-border/GradientBorderView.tsx
@@ -17,6 +17,10 @@ type GradientBorderViewProps = {
   start?: { x: number; y: number };
   end?: { x: number; y: number };
   borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
   backgroundColor?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -29,13 +33,24 @@ export const GradientBorderView = memo(function GradientBorderView({
   end = DEFAULT_END,
   borderWidth = THICK_BORDER_WIDTH,
   borderRadius = DEFAULT_BORDER_RADIUS,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
   style,
   backgroundColor = DEFAULT_BACKGROUND_COLOR,
 }: GradientBorderViewProps) {
+  const radiusStyle = {
+    borderTopLeftRadius: borderTopLeftRadius ?? borderRadius,
+    borderTopRightRadius: borderTopRightRadius ?? borderRadius,
+    borderBottomLeftRadius: borderBottomLeftRadius ?? borderRadius,
+    borderBottomRightRadius: borderBottomRightRadius ?? borderRadius,
+  };
+
   return (
-    <View style={[styles.baseStyle, style, { backgroundColor, borderRadius }]}>
+    <View style={[styles.baseStyle, style, { backgroundColor }, radiusStyle]}>
       <MaskedView
-        maskElement={<View style={[styles.maskElement, { borderWidth, borderRadius }]} />}
+        maskElement={<View style={[styles.maskElement, { borderWidth }, radiusStyle]} />}
         style={styles.maskView}
         pointerEvents="none"
       >
diff --git a/src/features/rnbw-membership/components/TierProgressBar.tsx b/src/features/rnbw-membership/components/TierProgressBar.tsx
@@ -0,0 +1,192 @@
+import { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { InnerShadow } from '@/features/polymarket/components/InnerShadow';
+import { useBackgroundColor, useColorMode } from '@/design-system';
+import { GradientBorderView } from '@/components/gradient-border/GradientBorderView';
+import { opacity } from '@/framework/ui/utils/opacity';
+import { useMembershipTierInfo } from '@/features/rnbw-membership/stores/derived/useMembershipTierInfo';
+import { TIER_VISUALS } from '@/features/rnbw-membership/constants';
+import { getValueForColorMode } from '@/design-system/color/palettes';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Blur, Canvas, RoundedRect } from '@shopify/react-native-skia';
+import type { Tier } from '@/features/rnbw-membership/types';
+
+const PROGRESS_BAR_HORIZONTAL_PADDING = 12;
+const PROGRESS_HIGHLIGHT_INSET = 5;
+const PROGRESS_HIGHLIGHT_HEIGHT = 5;
+const PROGRESS_HIGHLIGHT_RADIUS = 2.5;
+const PROGRESS_HIGHLIGHT_BLUR = 2;
+const PROGRESS_HIGHLIGHT_BLUR_PADDING = PROGRESS_HIGHLIGHT_BLUR * 2;
+
+type TierProgressBarProps = {
+  width: number;
+  height: number;
+  tier?: Tier;
+  tierIndex?: number;
+  tierProgress?: number;
+};
+
+export const TierProgressBar = memo(function TierProgressBar({ width, height, tier, tierIndex, tierProgress }: TierProgressBarProps) {
+  const { isDarkMode, colorMode } = useColorMode();
+  const surfaceSecondary = useBackgroundColor('surfaceSecondary');
+  const backgroundColor = isDarkMode ? '#242529' : surfaceSecondary;
+
+  const { currentTier, currentTierIndex, currentTierProgress, allTiers } = useMembershipTierInfo();
+  const resolvedTier = tier ?? currentTier;
+  const resolvedTierIndex = tierIndex ?? currentTierIndex;
+  const resolvedTierProgress = tierProgress ?? currentTierProgress;
+  const isMaxTier = resolvedTierIndex === allTiers.length - 1;
+
+  const { gradient, borderGradient, shadow } = useMemo(() => {
+    const visuals = TIER_VISUALS[resolvedTier.level];
+    return {
+      gradient: getValueForColorMode(visuals.progressBarGradient, colorMode),
+      borderGradient: getValueForColorMode(visuals.progressBarBorderGradient, colorMode),
+      shadow: getValueForColorMode(visuals.progressBarShadow, colorMode),
+    };
+  }, [resolvedTier.level, colorMode]);
+
+  const tierMarkerPositions = useMemo(() => {
+    const tierCount = allTiers.length;
+    const usableWidth = width - PROGRESS_BAR_HORIZONTAL_PADDING * 2;
+    return allTiers.map((_, i) => PROGRESS_BAR_HORIZONTAL_PADDING * 2 + (i * usableWidth) / (tierCount - 1));
+  }, [allTiers, width]);
+
+  const fillWidth = useMemo(() => {
+    const base = tierMarkerPositions[resolvedTierIndex];
+    const next = tierMarkerPositions[resolvedTierIndex + 1] ?? base;
+    return base + resolvedTierProgress * (next - base);
+  }, [tierMarkerPositions, resolvedTierIndex, resolvedTierProgress]);
+
+  const { leftRadius, rightRadius } = useMemo(() => {
+    const full = height / 2;
+    return { leftRadius: full, rightRadius: isMaxTier ? full : 8 };
+  }, [height, isMaxTier]);
+
+  const progressHighlight = useMemo(() => {
+    const rectWidth = fillWidth - PROGRESS_HIGHLIGHT_INSET * 2;
+
+    // Blur needs extra canvas area, otherwise Skia clips the softened edges.
+    return {
+      canvasLeft: PROGRESS_HIGHLIGHT_INSET - PROGRESS_HIGHLIGHT_BLUR_PADDING,
+      canvasTop: PROGRESS_HIGHLIGHT_INSET - PROGRESS_HIGHLIGHT_BLUR_PADDING,
+      canvasWidth: rectWidth + PROGRESS_HIGHLIGHT_BLUR_PADDING * 2,
+      canvasHeight: PROGRESS_HIGHLIGHT_HEIGHT + PROGRESS_HIGHLIGHT_BLUR_PADDING * 2,
+      rectX: PROGRESS_HIGHLIGHT_BLUR_PADDING,
+      rectY: PROGRESS_HIGHLIGHT_BLUR_PADDING,
+      rectWidth,
+    };
+  }, [fillWidth]);
+
+  return (
+    <GradientBorderView
+      borderGradientColors={isDarkMode ? [opacity('#9AA2A7', 0.016), opacity('#9AA2A7', 0.08)] : ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']}
+      borderWidth={1}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 0, y: 1 }}
+      backgroundColor={backgroundColor}
+      style={{ height, width, overflow: 'visible' }}
+    >
+      <View style={styles.dotsContainer}>
+        {allTiers.map(t => (
+          <TierDot key={t.level} />
+        ))}
+      </View>
+      <GradientBorderView
+        borderGradientColors={borderGradient.colors}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        borderWidth={1}
+        borderTopRightRadius={rightRadius}
+        borderBottomRightRadius={rightRadius}
+        borderTopLeftRadius={leftRadius}
+        borderBottomLeftRadius={leftRadius}
+        style={{
+          height,
+          width: fillWidth,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          overflow: 'visible',
+          ...shadow,
+        }}
+      >
+        <LinearGradient
+          colors={gradient.colors}
+          start={gradient.start}
+          end={gradient.end}
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              borderTopRightRadius: rightRadius,
+              borderBottomRightRadius: rightRadius,
+              borderTopLeftRadius: leftRadius,
+              borderBottomLeftRadius: leftRadius,
+              borderCurve: 'continuous',
+            },
+          ]}
+        />
+        <Canvas
+          style={{
+            position: 'absolute',
+            top: progressHighlight.canvasTop,
+            left: progressHighlight.canvasLeft,
+            height: progressHighlight.canvasHeight,
+            width: progressHighlight.canvasWidth,
+          }}
+        >
+          <RoundedRect
+            x={progressHighlight.rectX}
+            y={progressHighlight.rectY}
+            width={progressHighlight.rectWidth}
+            height={PROGRESS_HIGHLIGHT_HEIGHT}
+            r={PROGRESS_HIGHLIGHT_RADIUS}
+            color="rgba(255,255,255,0.4)"
+          >
+            <Blur blur={PROGRESS_HIGHLIGHT_BLUR} />
+          </RoundedRect>
+        </Canvas>
+      </GradientBorderView>
+      <InnerShadow
+        width={width}
+        height={height}
+        borderRadius={height / 2}
+        color={isDarkMode ? opacity('#000000', 0.43) : opacity('#7A7A7A', 0.13)}
+        blur={2}
+        dx={0}
+        dy={1}
+      />
+    </GradientBorderView>
+  );
+});
+
+const DOT_SIZE = 8;
+const DOT_RADIUS = DOT_SIZE / 2;
+
+function TierDot() {
+  const { isDarkMode } = useColorMode();
+  return (
+    <View style={[styles.dot, { backgroundColor: isDarkMode ? opacity('#FFFFFF', 0.05) : '#E3E3E3' }]}>
+      {!isDarkMode && (
+        <InnerShadow width={DOT_SIZE} height={DOT_SIZE} borderRadius={DOT_RADIUS} color={opacity('#7A7A7A', 0.13)} blur={2} dx={0} dy={1} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dotsContainer: {
+    flexDirection: 'row',
+    height: '100%',
+    width: '100%',
+    paddingHorizontal: PROGRESS_BAR_HORIZONTAL_PADDING,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_RADIUS,
+    overflow: 'hidden',
+  },
+});
diff --git a/src/features/rnbw-membership/constants.ts b/src/features/rnbw-membership/constants.ts
@@ -33,6 +33,9 @@ type TierVisuals = {
   badgeBorderGradient: Themed<GradientConfig>;
   badgeShadow: Themed<ShadowConfig>;
   badgeTextShadow: Themed<TextShadowConfig>;
+  progressBarGradient: Themed<GradientConfig>;
+  progressBarBorderGradient: Themed<GradientConfig>;
+  progressBarShadow: Themed<ShadowConfig>;
 };
 
 export const TIER_VISUALS: Record<TierId, TierVisuals> = {
@@ -56,6 +59,15 @@ export const TIER_VISUALS: Record<TierId, TierVisuals> = {
       light: { textShadowColor: 'rgba(0, 0, 0, 0.14)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 1 },
       dark: { textShadowColor: 'rgba(0, 0, 0, 0.14)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 1 },
     },
+    progressBarGradient: { light: { colors: ['#2B80F4', '#1F6FDC'] }, dark: { colors: ['#2B80F4', '#1F6FDC'] } },
+    progressBarBorderGradient: {
+      light: { colors: ['rgba(0,0,0,0.06)', 'rgba(0,0,0,0.06)'] },
+      dark: { colors: ['rgba(255,255,255,0.12)', 'rgba(255,255,255,0.12)'] },
+    },
+    progressBarShadow: {
+      light: { shadowColor: '#2A99FA', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.5, shadowRadius: 2.5 },
+      dark: { shadowColor: '#2A99FA', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.5, shadowRadius: 2.5 },
+    },
   },
   STAKING_TIER_LEVEL_SILVER: {
     backgroundGradient: {
@@ -77,6 +89,15 @@ export const TIER_VISUALS: Record<TierId, TierVisuals> = {
       light: { textShadowColor: 'rgba(255, 255, 255, 0.46)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 0 },
       dark: { textShadowColor: 'rgba(255, 255, 255, 0.46)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 0 },
     },
+    progressBarGradient: { light: { colors: ['#EFEFEF', '#A2A2A2'] }, dark: { colors: ['#EFEFEF', '#A2A2A2'] } },
+    progressBarBorderGradient: {
+      light: { colors: [opacity('#959595', 0.15), opacity('#3B3B3B', 0.09)] },
+      dark: { colors: ['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)'] },
+    },
+    progressBarShadow: {
+      light: { shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.06, shadowRadius: 6 },
+      dark: { shadowColor: '#B2B2B2', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.3, shadowRadius: 15 },
+    },
   },
   STAKING_TIER_LEVEL_GOLD: {
     backgroundGradient: {
@@ -98,6 +119,15 @@ export const TIER_VISUALS: Record<TierId, TierVisuals> = {
       light: { textShadowColor: 'rgba(255, 255, 255, 0.26)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 0 },
       dark: { textShadowColor: 'rgba(255, 255, 255, 0.26)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 0 },
     },
+    progressBarGradient: { light: { colors: ['#FAD96A', '#E7B114'] }, dark: { colors: ['#FAD96A', '#E7B114'] } },
+    progressBarBorderGradient: {
+      light: { colors: ['rgba(0,0,0,0.06)', 'rgba(0,0,0,0.06)'] },
+      dark: { colors: ['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.3)'] },
+    },
+    progressBarShadow: {
+      light: { shadowColor: '#E5B92C', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.5, shadowRadius: 2.5 },
+      dark: { shadowColor: '#FFDD20', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.3, shadowRadius: 15 },
+    },
   },
   STAKING_TIER_LEVEL_DIAMOND: {
     backgroundGradient: {
@@ -119,6 +149,15 @@ export const TIER_VISUALS: Record<TierId, TierVisuals> = {
       light: { textShadowColor: opacity('#CBF6FF', 0.46), textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 0 },
       dark: { textShadowColor: opacity('#CBF6FF', 0.46), textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 0 },
     },
+    progressBarGradient: { light: { colors: ['#ECF2F8', '#C8D1D7'] }, dark: { colors: ['#D5DCE3', '#9AA7B0'] } },
+    progressBarBorderGradient: {
+      light: { colors: [opacity('#6C8CA8', 0.15), opacity('#404647', 0.09)] },
+      dark: { colors: [opacity('#959595', 0.15), opacity('#3B3B3B', 0.06)] },
+    },
+    progressBarShadow: {
+      light: { shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.06, shadowRadius: 6 },
+      dark: { shadowColor: '#42D2EB', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.3, shadowRadius: 15 },
+    },
   },
   STAKING_TIER_LEVEL_BLACK: {
     backgroundGradient: {
@@ -143,6 +182,15 @@ export const TIER_VISUALS: Record<TierId, TierVisuals> = {
       light: { textShadowColor: 'rgba(0, 0, 0, 0)', textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 },
       dark: { textShadowColor: 'rgba(0, 0, 0, 0)', textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 },
     },
+    progressBarGradient: { light: { colors: ['#444444', '#000000'] }, dark: { colors: ['#444444', '#000000'] } },
+    progressBarBorderGradient: {
+      light: { colors: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)'] },
+      dark: { colors: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)'] },
+    },
+    progressBarShadow: {
+      light: { shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.06, shadowRadius: 6 },
+      dark: { shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.06, shadowRadius: 6 },
+    },
   },
 };
 
diff --git a/src/features/rnbw-membership/screens/rnbw-membership-screen/components/MembershipTierCard.tsx b/src/features/rnbw-membership/screens/rnbw-membership-screen/components/MembershipTierCard.tsx
@@ -1,29 +1,48 @@
 import { memo } from 'react';
-import { Box, Text } from '@/design-system';
+import { Box, Separator, Text } from '@/design-system';
 import { useMembershipTierInfo } from '@/features/rnbw-membership/stores/derived/useMembershipTierInfo';
 import ButtonPressAnimation from '@/components/animations/ButtonPressAnimation';
 import Navigation from '@/navigation/Navigation';
 import Routes from '@/navigation/routesNames';
+import { MembershipCard } from '@/features/rnbw-membership/screens/rnbw-membership-screen/components/MembershipCard';
+import { TierThemedLabel } from '@/features/rnbw-membership/components/TierThemedLabel';
+import { TierProgressBar } from '@/features/rnbw-membership/components/TierProgressBar';
+import { RNBW_SYMBOL } from '@/features/rnbw-rewards/constants';
 
 export const MembershipTierCard = memo(function MembershipTierCard() {
-  const { currentTier, stakeRequiredForNextTier, cashbackPercentage, currentTierProgress } = useMembershipTierInfo();
+  const { currentTier, stakeRequiredForNextTier, cashbackPercentage } = useMembershipTierInfo();
 
   return (
     <ButtonPressAnimation onPress={navigateToMembershipTiersSheet} scaleTo={0.96}>
-      <Box background="surfacePrimary" borderRadius={24} padding="20px" gap={20} shadow={'18px'}>
-        <Text size="22pt" weight="heavy" color="label">
-          {`${currentTier.name} Tier`}
-        </Text>
-        <Text size="17pt" weight="heavy" color="label">
-          {`current tier progress: ${currentTierProgress * 100}/100`}
-        </Text>
-        <Text size="17pt" weight="heavy" color="label">
-          {`Cashback: ${cashbackPercentage}%`}
-        </Text>
-        <Text size="17pt" weight="heavy" color="label">
-          {`Stake to unlock: ${stakeRequiredForNextTier}`}
-        </Text>
-      </Box>
+      <MembershipCard paddingHorizontal="20px" paddingVertical="24px">
+        <Box gap={16}>
+          <TierThemedLabel tier={currentTier}>
+            <Text size="22pt" weight="heavy" color="label">
+              {`${currentTier.name} Tier`}
+            </Text>
+          </TierThemedLabel>
+          <TierProgressBar width={300} height={24} />
+          <Box gap={16} paddingHorizontal={'4px'}>
+            <Box flexDirection="row" justifyContent="space-between">
+              <Text size="17pt" weight="semibold" color="labelTertiary">
+                {'Rewards'}
+              </Text>
+              <Text size="17pt" weight="bold" color="label">
+                {`${cashbackPercentage}%`}
+              </Text>
+            </Box>
+            <Separator color="separatorTertiary" thickness={1} />
+            <Box flexDirection="row" justifyContent="space-between">
+              <Text size="17pt" weight="semibold" color="labelTertiary">
+                {'Stake to next tier'}
+              </Text>
+              <Text size="17pt" weight="bold" color="label">
+                {`${stakeRequiredForNextTier} ${RNBW_SYMBOL}`}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      </MembershipCard>
     </ButtonPressAnimation>
   );
 });
diff --git a/src/features/rnbw-membership/screens/rnbw-membership-tiers-sheet/RnbwMembershipTiersSheet.tsx b/src/features/rnbw-membership/screens/rnbw-membership-tiers-sheet/RnbwMembershipTiersSheet.tsx
diff --git a/src/features/rnbw-membership/stores/derived/useMembershipTierInfo.ts b/src/features/rnbw-membership/stores/derived/useMembershipTierInfo.ts
