Merge branch 'main' into personal_sign_e2e

app/components/UI/Stake/components/UpsellBanner/UpsellBanner.styles.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const upsellBannerStylesheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      backgroundColor: colors.background.alternative,
+      borderRadius: 8,
+      gap: 8,
+      alignItems: 'center',
+      paddingVertical: 24,
+      paddingHorizontal: 16,
+    },
+  });
+};
+
+export default upsellBannerStylesheet;

app/components/UI/Stake/components/UpsellBanner/UpsellBanner.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import UpsellBanner from '.';
+import {
+  UPSELL_BANNER_VARIANTS,
+  UpsellBannerProps,
+} from './UpsellBanner.types';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import Button, {
+  ButtonVariants,
+} from '../../../../../component-library/components/Buttons/Button';
+
+describe('UpsellBanner', () => {
+  const baseProps = {
+    primaryText: 'you could earn',
+    secondaryText: '$454',
+    tertiaryText: 'per year on your tokens',
+    endAccessory: (
+      <Button
+        label={'Earn 4.5%'}
+        variant={ButtonVariants.Secondary}
+        onPress={jest.fn()}
+      />
+    ),
+  };
+
+  describe('UpsellBannerHeader variant', () => {
+    it('render matches screenshot', () => {
+      const props: UpsellBannerProps = {
+        variant: UPSELL_BANNER_VARIANTS.HEADER,
+        ...baseProps,
+      };
+
+      const { toJSON } = renderWithProvider(<UpsellBanner {...props} />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('UpsellBannerBody variant', () => {
+    it('render matches screenshot', () => {
+      const props: UpsellBannerProps = {
+        variant: UPSELL_BANNER_VARIANTS.BODY,
+        onTooltipPress: jest.fn(),
+        ...baseProps,
+      };
+
+      const { toJSON } = renderWithProvider(<UpsellBanner {...props} />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

app/components/UI/Stake/components/UpsellBanner/UpsellBanner.types.ts

@@ -0,0 +1,23 @@
+export enum UPSELL_BANNER_VARIANTS {
+  HEADER = 'HEADER',
+  BODY = 'BODY',
+}
+
+interface UpsellBannerBaseProps {
+  primaryText: string;
+  secondaryText: string;
+  tertiaryText: string;
+  endAccessory?: React.ReactNode;
+}
+
+export type UpsellBannerHeaderProps = UpsellBannerBaseProps;
+
+export type UpsellBannerBodyProps = UpsellBannerBaseProps & {
+  onTooltipPress: () => void;
+};
+
+export type UpsellBannerProps =
+  | (UpsellBannerHeaderProps & { variant: UPSELL_BANNER_VARIANTS.HEADER })
+  | (UpsellBannerBodyProps & {
+      variant: UPSELL_BANNER_VARIANTS.BODY;
+    });

app/components/UI/Stake/components/UpsellBanner/UpsellBannerBody/UpsellBannerBody.styles.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      backgroundColor: colors.background.alternative,
+      borderRadius: 8,
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    left: {
+      alignItems: 'flex-start',
+    },
+    tooltipContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    right: {
+      justifyContent: 'center',
+    },
+  });
+};
+
+export default styleSheet;

app/components/UI/Stake/components/UpsellBanner/UpsellBannerBody/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import styleSheet from './UpsellBannerBody.styles';
+import { UpsellBannerBodyProps } from '../UpsellBanner.types';
+import { useStyles } from '../../../../../hooks/useStyles';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../../../../component-library/components/Texts/Text';
+import Icon, {
+  IconName,
+  IconColor,
+  IconSize,
+} from '../../../../../../component-library/components/Icons/Icon';
+
+const UpsellBannerBody = ({
+  primaryText,
+  secondaryText,
+  tertiaryText,
+  onTooltipPress,
+  endAccessory,
+}: UpsellBannerBodyProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.left}>
+        <Text variant={TextVariant.HeadingMD}>{primaryText}</Text>
+        <Text variant={TextVariant.DisplayMD} color={TextColor.Success}>
+          {secondaryText}
+        </Text>
+        <View style={styles.tooltipContainer}>
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            {tertiaryText}
+          </Text>
+          <TouchableOpacity onPress={onTooltipPress}>
+            <Icon
+              name={IconName.Info}
+              size={IconSize.Sm}
+              color={IconColor.Alternative}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+      <View style={styles.right}>
+        {React.isValidElement(endAccessory) && endAccessory}
+      </View>
+    </View>
+  );
+};
+
+export default UpsellBannerBody;

app/components/UI/Stake/components/UpsellBanner/UpsellBannerHeader/UpsellBannerHeader.styles.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      backgroundColor: colors.background.alternative,
+      borderRadius: 8,
+      gap: 8,
+      paddingVertical: 24,
+      paddingHorizontal: 16,
+      alignItems: 'center',
+    },
+  });
+};
+
+export default styleSheet;

app/components/UI/Stake/components/UpsellBanner/UpsellBannerHeader/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { UpsellBannerHeaderProps } from '../UpsellBanner.types';
+import styleSheet from './UpsellBannerHeader.styles';
+import { useStyles } from '../../../../../hooks/useStyles';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../../../../component-library/components/Texts/Text';
+
+const UpsellBannerHeader = ({
+  primaryText,
+  secondaryText,
+  tertiaryText,
+  endAccessory,
+}: UpsellBannerHeaderProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.container}>
+      <Text variant={TextVariant.HeadingMD}>{primaryText}</Text>
+      <Text variant={TextVariant.DisplayMD} color={TextColor.Success}>
+        {secondaryText}
+      </Text>
+      <Text color={TextColor.Alternative}>{tertiaryText}</Text>
+      {React.isValidElement(endAccessory) && endAccessory}
+    </View>
+  );
+};
+
+export default UpsellBannerHeader;