Update OP Round 2 Rewards Sheet

src/components/info-alert/info-alert.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box, Text, useForegroundColor } from '@/design-system';
+
+type InfoAlertProps = {
+  title: string;
+  description: string;
+  rightIcon: React.ReactNode;
+};
+
+export const InfoAlert: React.FC<InfoAlertProps> = ({
+  rightIcon,
+  title,
+  description,
+}) => {
+  return (
+    <Box
+      style={{
+        gap: 12,
+        borderWidth: 2,
+        borderColor: useForegroundColor('separatorTertiary'),
+      }}
+      flexDirection="row"
+      borderRadius={20}
+      alignItems="center"
+      justifyContent="flex-start"
+      paddingHorizontal="20px"
+      paddingVertical="16px"
+    >
+      <Box width={{ custom: 20 }} height={{ custom: 20 }} alignItems="center">
+        {rightIcon}
+      </Box>
+      <Box style={{ gap: 10 }} flexDirection="column">
+        <Text color="label" size="15pt" weight="heavy">
+          {title}
+        </Text>
+        <Text color="labelTertiary" size="13pt" weight="medium">
+          {description}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

src/components/sheet/DynamicHeightSheet.js

@@ -0,0 +1,229 @@
+import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { BottomSheetContext } from '@gorhom/bottom-sheet/src/contexts/external';
+import React, {
+  forwardRef,
+  Fragment,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import { Pressable, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../../theme/ThemeContext';
+import { Centered } from '../layout';
+import SheetHandleFixedToTop, {
+  SheetHandleFixedToTopHeight,
+} from './SheetHandleFixedToTop';
+import { useDimensions } from '@/hooks';
+import { useNavigation } from '@/navigation';
+import styled from '@/styled-thing';
+import { position } from '@/styles';
+import { IS_ANDROID, IS_IOS } from '@/env';
+import TouchableBackdrop from '../TouchableBackdrop';
+
+const AndroidBackground = styled.View({
+  ...position.coverAsObject,
+  backgroundColor: ({ backgroundColor }) => backgroundColor,
+});
+
+const Container = styled(Centered).attrs({ direction: 'column' })(
+  ({
+    backgroundColor,
+    borderRadius,
+    contentHeight,
+    sheetHeight,
+    sheetHeightRatio, // Default to 2/3 of the screen
+  }) => ({
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    backgroundColor: backgroundColor,
+    bottom: 0,
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    right: 0,
+    height: sheetHeight ? sheetHeight : contentHeight * sheetHeightRatio, // Set height to a ratio of the device height
+  })
+);
+
+const Content = styled.ScrollView.attrs(({ limitScrollViewContent }) => ({
+  contentContainerStyle: limitScrollViewContent ? { height: '100%' } : {},
+  directionalLockEnabled: true,
+  keyboardShouldPersistTaps: 'always',
+  scrollEventThrottle: 16,
+}))(
+  ({
+    contentHeight,
+    deviceHeight,
+    backgroundColor,
+    removeTopPadding,
+    sheetHeightRatio = 0.67,
+  }) => ({
+    // Default to 2/3 of the screen
+    backgroundColor: backgroundColor,
+    ...(contentHeight
+      ? { height: deviceHeight * sheetHeightRatio + contentHeight }
+      : {}), // Set height to a ratio of the device height
+    paddingTop: removeTopPadding ? 0 : SheetHandleFixedToTopHeight,
+    width: '100%',
+  })
+);
+
+const ContentWrapper = styled.View({
+  ...position.sizeAsObject('100%'),
+  backgroundColor: ({ backgroundColor }) => backgroundColor,
+});
+
+export default forwardRef(function SlackSheet(
+  {
+    additionalTopPadding = false,
+    removeTopPadding = false,
+    backgroundColor,
+    borderRadius = 30,
+    children,
+    contentHeight,
+    deferredHeight = false,
+    discoverSheet,
+    hideHandle = false,
+    limitScrollViewContent,
+    onContentSizeChange,
+    renderHeader,
+    scrollEnabled = true,
+    showsHorizontalScrollIndicator = true,
+    showsVerticalScrollIndicator = true,
+    showBlur,
+    testID,
+    removeClippedSubviews = false,
+    yPosition: givenYPosition,
+    onDismiss,
+    sheetHeight,
+    sheetHeightRatio = 1, // Default to full height of screen
+    ...props
+  },
+  ref
+) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const yPosition = givenYPosition || useSharedValue(0);
+  const { height: deviceHeight } = useDimensions();
+  const { goBack } = useNavigation();
+  const insets = useSafeAreaInsets();
+  const bottomInset = useMemo(
+    () => (insets.bottom || scrollEnabled ? 42 : 30),
+    [insets.bottom, scrollEnabled]
+  );
+  const { colors } = useTheme();
+  const contentContainerStyle = useMemo(
+    () => ({
+      paddingBottom: bottomInset,
+    }),
+    [bottomInset]
+  );
+
+  const sheet = useRef();
+  const isInsideBottomSheet = !!useContext(BottomSheetContext);
+
+  useImperativeHandle(ref, () => sheet.current);
+
+  const scrollIndicatorInsets = useMemo(
+    () => ({
+      bottom: bottomInset,
+      top: borderRadius + SheetHandleFixedToTopHeight,
+    }),
+    [borderRadius, bottomInset]
+  );
+
+  // In discover sheet we need to set it additionally
+  useEffect(
+    () => {
+      discoverSheet &&
+        ios &&
+        sheet.current.setNativeProps({ scrollIndicatorInsets });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const scrollHandler = useAnimatedScrollHandler(event => {
+    yPosition.value = event.contentOffset.y;
+  });
+
+  const bg = backgroundColor || colors.white;
+
+  // callback upon closing the sheet
+  useEffect(
+    () => () => {
+      if (onDismiss) onDismiss();
+    },
+    []
+  );
+
+  return (
+    <Fragment>
+      {IS_ANDROID ? (
+        <Pressable onPress={goBack} style={[StyleSheet.absoluteFillObject]} />
+      ) : null}
+      <TouchableBackdrop onPress={goBack} />
+
+      <Container
+        additionalTopPadding={additionalTopPadding}
+        backgroundColor={bg}
+        contentHeight={contentHeight}
+        borderRadius={borderRadius}
+        deferredHeight={deferredHeight}
+        deviceHeight={deviceHeight}
+        sheetHeightRatio={sheetHeightRatio}
+        sheetHeight={sheetHeight}
+        testID={testID}
+        {...props}
+      >
+        {IS_ANDROID && (
+          <AndroidBackground as={TouchableWithoutFeedback} backgroundColor={bg}>
+            <AndroidBackground backgroundColor={bg} />
+          </AndroidBackground>
+        )}
+        {!hideHandle && (
+          <SheetHandleFixedToTop showBlur={showBlur || scrollEnabled} />
+        )}
+        <ContentWrapper backgroundColor={bg}>
+          {renderHeader?.(yPosition)}
+          <Content
+            as={
+              isInsideBottomSheet ? BottomSheetScrollView : Animated.ScrollView
+            }
+            backgroundColor={bg}
+            contentContainerStyle={scrollEnabled && contentContainerStyle}
+            contentHeight={contentHeight}
+            deviceHeight={deviceHeight}
+            sheetHeightRatio={sheetHeightRatio}
+            limitScrollViewContent={limitScrollViewContent}
+            onContentSizeChange={onContentSizeChange}
+            ref={sheet}
+            removeClippedSubviews={removeClippedSubviews}
+            removeTopPadding={removeTopPadding}
+            scrollEnabled={scrollEnabled}
+            scrollIndicatorInsets={scrollIndicatorInsets}
+            showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+            {...(isInsideBottomSheet && IS_ANDROID
+              ? {
+                  onScrollWorklet: scrollHandler,
+                }
+              : {
+                  onScroll: scrollHandler,
+                })}
+          >
+            {children}
+          </Content>
+        </ContentWrapper>
+      </Container>
+    </Fragment>
+  );
+});

src/components/sheet/index.js

@@ -8,6 +8,7 @@ export {
 export { default as SheetKeyboardAnimation } from './SheetKeyboardAnimation';
 export { default as SheetSubtitleCycler } from './SheetSubtitleCycler';
 export { default as SheetTitle } from './SheetTitle';
+export { default as DynamicHeightSheet } from './DynamicHeightSheet';
 export { default as SlackSheet } from './SlackSheet';
 export {
   BuyActionButton,

src/graphql/queries/metadata.graphql

@@ -43,28 +43,6 @@ fragment baseQuery on Rewards {
     }
     color
   }
-  leaderboard {
-    accounts {
-      address
-      ens
-      avatarURL
-      earnings {
-        base {
-          ...amount
-        }
-        bonus {
-          ...amount
-        }
-      }
-    }
-    updatedAt
-  }
-}
-
-query getRewardsLeaderboard {
-  rewards(project: OPTIMISM) {
-    ...baseQuery
-  }
 }
 
 query getRewardsDataForWallet($address: String!) {
@@ -84,15 +62,14 @@ query getRewardsDataForWallet($address: String!) {
       pending {
         ...amount
       }
+      daily {
+        day
+        usd
+        token
+      }
       updatedAt
     }
     stats {
-      position {
-        current
-        change {
-          h24
-        }
-      }
       actions {
         type
         amount {

src/languages/en_US.json

@@ -1481,22 +1481,26 @@
       "error_text": "Please check your internet connection and check back later.",
       "ended_title": "Program ended",
       "ended_text": "Stay tuned for what we have in store for you next!",
+      "info": {
+        "title": "Earn OP for swapping and bridging",
+        "description": "Get cash back by swapping on or bridging to Optimism. Rewards distributed monthly."
+      },
       "op": {
         "airdrop_timing": {
-          "title": "Airdrops Every Week",
-          "text": "Swap on Optimism or bridge to Optimism to earn OP rewards. At the end of each week, the rewards you’ve earned will be airdropped to your wallet."
+          "title": "Airdrops Every Month",
+          "text": "Swap on Optimism or bridge to Optimism to earn OP rewards. At the end of each month, the rewards you’ve earned will be airdropped to your wallet."
         },
         "amount_distributed": {
           "title": "67,850 OP Every Week",
           "text": "Up to 67,850 OP in rewards will be distributed every week. If weekly rewards run out, rewards will temporarily pause and resume the following week."
         },
         "bridge": {
-          "title": "Earn 0.125% on Bridging",
-          "text": "While rewards are live, bridging verified tokens to Optimism will earn you approximately 0.125% back in OP.\n\nStats update periodically throughout the day. Check back soon if you don’t see your recent bridging reflected here."
+          "title": "Earn %{percent}% on Bridging",
+          "text": "While rewards are live, bridging verified tokens to Optimism will earn you approximately %{percent}% back in OP.\n\nStats update periodically throughout the day. Check back soon if you don’t see your recent bridging reflected here."
         },
         "swap": {
-          "title": "Earn 0.425% on Swaps",
-          "text": "While rewards are live, swapping verified tokens on Optimism will earn you approximately 0.425% back in OP.\n\nStats update periodically throughout the day. Check back soon if you don’t see your recent swaps reflected here."
+          "title": "Earn %{percent}% on Swaps",
+          "text": "While rewards are live, swapping verified tokens on Optimism will earn you approximately %{percent}% back in OP.\n\nStats update periodically throughout the day. Check back soon if you don’t see your recent swaps reflected here."
         },
         "position": {
           "title": "Leaderboard Position",

src/screens/ExplainSheet.js

@@ -423,14 +423,22 @@ export const explainers = (params, colors) => ({
   },
   op_rewards_bridge: {
     emoji: '🌉',
-    title: i18n.t(i18n.l.rewards.op.bridge.title),
-    text: i18n.t(i18n.l.rewards.op.bridge.text),
+    title: i18n.t(i18n.l.rewards.op.bridge.title, {
+      percent: params?.percent || 0,
+    }),
+    text: i18n.t(i18n.l.rewards.op.bridge.text, {
+      percent: params?.percent || 0,
+    }),
     extraHeight: IS_ANDROID ? -65 : 10,
   },
   op_rewards_swap: {
     emoji: '🔀',
-    title: i18n.t(i18n.l.rewards.op.swap.title),
-    text: i18n.t(i18n.l.rewards.op.swap.text),
+    title: i18n.t(i18n.l.rewards.op.swap.title, {
+      percent: params?.percent || 0,
+    }),
+    text: i18n.t(i18n.l.rewards.op.swap.text, {
+      percent: params?.percent || 0,
+    }),
     extraHeight: IS_ANDROID ? -65 : 10,
   },
   op_rewards_position: {