Add line on scrolling modal

Emurgo · Jun 13, 2024 · c1c461f · c1c461f
1 parent bf7f087
commit c1c461f
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
@@ -5,7 +5,7 @@ import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 
 import {Button, Icon, useModal} from '../../components'
-import {ScrollView} from '../../components/ScrollView/ScrollView'
+import {ScrollView, useScrollView} from '../../components/ScrollView/ScrollView'
 import {Space} from '../../components/Space/Space'
 import {formatTimeSpan} from '../../yoroi-wallets/utils'
 import {useStrings} from './usePoolTransition'
@@ -18,8 +18,9 @@ export const PoolTransitionModal = ({
   onContinue: () => Promise<void> | void
 }) => {
   const [isLoading, setIsLoading] = React.useState(false)
-  const {styles, colors} = useStyles()
   const strings = useStrings()
+  const {isScrollBarShown, scrollViewRef, setIsScrollBarShown} = useScrollView()
+  const {styles, colors} = useStyles()
 
   const {closeModal} = useModal()
 
@@ -42,7 +43,7 @@ export const PoolTransitionModal = ({
 
   return (
     <View style={styles.modal}>
-      <ScrollView style={styles.scroll}>
+      <ScrollView style={styles.scroll} ref={scrollViewRef} onScrollBarChange={setIsScrollBarShown}>
         <View style={styles.modal}>
           <Text style={styles.details}>{isActive ? strings.warning : strings.finalWarning}</Text>
 
@@ -135,6 +136,8 @@ export const PoolTransitionModal = ({
         </View>
       </ScrollView>
 
+      {isScrollBarShown && <View style={styles.line} />}
+
       <Actions>
         <Button outline title={strings.skipNoRewards} textStyles={styles.outlineButton} onPress={handleOnSkip} />
 
@@ -221,6 +224,7 @@ const useStyles = () => {
       height: 24,
       alignItems: 'center',
     },
+    line: {width: '120%', height: StyleSheet.hairlineWidth, backgroundColor: theme.color.gray[200]},
     actions: {
       alignSelf: 'stretch',
       backgroundColor: theme.color.gray.min,