diff --git a/app/components/UI/Stake/components/UpsellBanner/UpsellBanner.styles.tsx b/app/components/UI/Stake/components/UpsellBanner/UpsellBanner.styles.tsx new file mode 100644 index 00000000000..901c2cb636c --- /dev/null +++ b/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; diff --git a/app/components/UI/Stake/components/UpsellBanner/UpsellBanner.test.tsx b/app/components/UI/Stake/components/UpsellBanner/UpsellBanner.test.tsx new file mode 100644 index 00000000000..294b08b0d8a --- /dev/null +++ b/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: ( +