feat(wallet-mobile): Add delegate to Yoroi banners

apps/wallet-mobile/src/features/Banners/common/DismissableBanner.tsx → apps/wallet-mobile/src/components/DismissableView.tsx

@@ -5,10 +5,10 @@ type Props = {
   isVisible: boolean
   children: React.ReactNode
   duration?: number
-  style?: ViewStyle
+  style?: Exclude<ViewStyle, 'opacity'>
 }
 
-export const DismissibleBanner = ({isVisible, children, style, duration = 300}: Props) => {
+export const DismissibleView = ({isVisible, children, style, duration = 300}: Props) => {
   const fadeAnim = React.useRef(new Animated.Value(0)).current
   const [shouldRender, setShouldRender] = React.useState(isVisible)
 

apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.stories.tsx

@@ -0,0 +1,9 @@
+import {action} from '@storybook/addon-actions'
+import {storiesOf} from '@storybook/react-native'
+import * as React from 'react'
+
+import {DelegateToYoroiDRepBanner} from './DelegateToYoroiDRepBanner'
+
+storiesOf('DelegateToYoroiDRepBanner', module).add('Initial', () => (
+  <DelegateToYoroiDRepBanner isVisible onDismiss={action('onDismiss')} />
+))

apps/wallet-mobile/src/features/Banners/common/DelegateToYoroiDRepBanner/DelegateToYoroiDRepBanner.tsx

@@ -0,0 +1,96 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+
+import {Button} from '../../../../components/Button/Button'
+import {DismissibleView} from '../../../../components/DismissableView'
+import {Icon} from '../../../../components/Icon'
+import {Text} from '../../../../components/Text'
+import {GovernanceBackground} from '../../illustrations/GovernanceBackground'
+import {useStrings} from '../strings'
+
+type Props = {
+  isVisible: boolean
+  onDismiss: () => void
+  style?: ViewStyle
+}
+
+export const DelegateToYoroiDRepBanner = ({onDismiss, isVisible, style}: Props) => {
+  const {styles, colors} = useStyles()
+  const {title, description, cta} = useStrings()
+
+  const handleOnDismiss = React.useCallback(() => onDismiss(), [onDismiss])
+  const handleOnCta = React.useCallback(() => console.log('cta'), [])
+
+  return (
+    <DismissibleView isVisible={isVisible} style={style}>
+      <LinearGradient start={{x: 1, y: 1}} end={{x: 0, y: 0}} colors={colors.gradient} style={styles.gradient}>
+        <View style={styles.root}>
+          <GovernanceBackground style={styles.backgroundImage} />
+
+          <TouchableOpacity onPress={handleOnDismiss} style={styles.dismiss}>
+            <Icon.Close color={colors.icon} size={20} />
+          </TouchableOpacity>
+
+          <Text style={styles.title}>{title}</Text>
+
+          <Text style={styles.description}>{description}</Text>
+
+          <Button style={styles.cta} type="Secondary" size="S" onPress={handleOnCta} title={cta} />
+        </View>
+      </LinearGradient>
+    </DismissibleView>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+  const styles = StyleSheet.create({
+    backgroundImage: {
+      ...atoms.absolute,
+      right: 0,
+      bottom: 0,
+    },
+    dismiss: {
+      width: 20,
+      height: 20,
+      right: atoms.px_lg.paddingRight,
+      top: atoms.py_lg.paddingTop,
+      ...atoms.absolute,
+      ...atoms.z_10,
+    },
+    cta: {
+      ...atoms.self_start,
+    },
+    gradient: {
+      ...atoms.relative,
+      ...atoms.rounded_sm,
+    },
+    root: {
+      minHeight: 134,
+      ...atoms.py_lg,
+      ...atoms.px_lg,
+      ...atoms.relative,
+    },
+    title: {
+      color: color.gray_max,
+      ...atoms.font_semibold,
+      ...atoms.body_1_lg_medium,
+    },
+    description: {
+      color: color.gray_max,
+      maxWidth: 279,
+      ...atoms.font_normal,
+      ...atoms.body_2_md_regular,
+      ...atoms.pb_lg,
+    },
+  })
+
+  const colors = {
+    gradient: color.bg_gradient_1,
+    icon: color.gray_max,
+  }
+
+  return {styles, colors} as const
+}

apps/wallet-mobile/src/features/Banners/common/strings.ts

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import {defineMessages, useIntl} from 'react-intl'
+
+export const useStrings = () => {
+  const intl = useIntl()
+
+  return React.useRef({
+    description: intl.formatMessage(messages.description),
+    title: intl.formatMessage(messages.title),
+    cta: intl.formatMessage(messages.cta),
+  } as const).current
+}
+
+const messages = defineMessages({
+  description: {
+    id: 'components.considerDelegatingToYoroiBanner.description',
+    defaultMessage: '!!!Delegate to our DRep and help Cardano evolve in a way that benefits your wallet experience.',
+  },
+  title: {
+    id: 'components.considerDelegatingToYoroiBanner.title',
+    defaultMessage: '!!!Consider delegating to Yoroi',
+  },
+  cta: {
+    id: 'components.considerDelegatingToYoroiBanner.cta',
+    defaultMessage: '!!!Delegate Now',
+  },
+})