Skip to content

Commit

Permalink
(pool-transition) Fix small screen modal scroll (#3300)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorbuedo
jorbuedo authored Jun 13, 2024
1 parent 33abf2e commit 17c2118
Showing 1 changed file with 71 additions and 65 deletions.
136 changes: 71 additions & 65 deletions apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +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 {Space} from '../../components/Space/Space'
import {formatTimeSpan} from '../../yoroi-wallets/utils'
import {useStrings} from './usePoolTransition'
Expand Down Expand Up @@ -41,96 +42,98 @@ export const PoolTransitionModal = ({

return (
<View style={styles.modal}>
<Text style={styles.details}>{isActive ? strings.warning : strings.finalWarning}</Text>
<ScrollView style={styles.scroll}>
<View style={styles.modal}>
<Text style={styles.details}>{isActive ? strings.warning : strings.finalWarning}</Text>

<Space fill />
<Space height="l" />

<Space height="l" />
<View style={[styles.card, isActive ? styles.border : styles.warningBorder]}>
<Row>
<Text style={styles.label}>{strings.currentPool}</Text>

<View style={[styles.card, isActive ? styles.border : styles.warningBorder]}>
<Row>
<Text style={styles.label}>{strings.currentPool}</Text>
<View style={styles.poolTicker}>
{poolTransition.current.pic != null && (
<Image source={{uri: poolTransition.current.pic}} style={styles.pic} />
)}

<View style={styles.poolTicker}>
{poolTransition.current.pic != null && (
<Image source={{uri: poolTransition.current.pic}} style={styles.pic} />
)}
<Text
style={styles.poolTickerText}
>{`[${poolTransition.current.ticker}] ${poolTransition.current.name}`}</Text>
</View>
</Row>

<Text
style={styles.poolTickerText}
>{`[${poolTransition.current.ticker}] ${poolTransition.current.name}`}</Text>
</View>
</Row>

<Row>
<Text style={styles.label}>{strings.estimatedRoa}</Text>
<Row>
<Text style={styles.label}>{strings.estimatedRoa}</Text>

<Text style={styles.currentValue}>{poolTransition.current.roa} %</Text>
</Row>
<Text style={styles.currentValue}>{poolTransition.current.roa} %</Text>
</Row>

<Row>
<Text style={styles.label}>{strings.fee}</Text>
<Row>
<Text style={styles.label}>{strings.fee}</Text>

<Text style={styles.currentValue}>{formatFee(poolTransition.current.taxRatio)} %</Text>
</Row>
<Text style={styles.currentValue}>{formatFee(poolTransition.current.taxRatio)} %</Text>
</Row>

<Text style={styles.warning}>
<Text style={styles.warningText}>{isActive ? strings.poolWillStopRewards : strings.poolNoRewards}</Text>
<Text style={styles.warning}>
<Text style={styles.warningText}>{isActive ? strings.poolWillStopRewards : strings.poolNoRewards}</Text>

{isActive && (
<Text style={styles.warningTimer}>
{'\n'}
{isActive && (
<Text style={styles.warningTimer}>
{'\n'}

{formatTimeSpan(timeSpan)}
{formatTimeSpan(timeSpan)}
</Text>
)}
</Text>
)}
</Text>
</View>
</View>

<Space height="s" />
<Space height="s" />

<Icon.ArrowDown size={17} />
<Icon.ArrowDown size={17} />

<Space height="s" />
<Space height="s" />

<View style={styles.card}>
<LinearGradient
style={[StyleSheet.absoluteFill, {opacity: 1, borderRadius: 8}]}
start={{x: 0, y: 0}}
end={{x: 1, y: 0.5}}
colors={colors.backgroundGradientCard}
/>
<View style={styles.card}>
<LinearGradient
style={[StyleSheet.absoluteFill, {opacity: 1, borderRadius: 8}]}
start={{x: 0, y: 0}}
end={{x: 1, y: 0.5}}
colors={colors.backgroundGradientCard}
/>

<Row>
<Text style={styles.label}>{strings.newPool}</Text>
<Row>
<Text style={styles.label}>{strings.newPool}</Text>

<View style={styles.poolTicker}>
{poolTransition.suggested.pic != null && (
<Image source={{uri: poolTransition.suggested.pic}} style={styles.pic} />
)}
<View style={styles.poolTicker}>
{poolTransition.suggested.pic != null && (
<Image source={{uri: poolTransition.suggested.pic}} style={styles.pic} />
)}

<Text
style={styles.poolTickerText}
>{`[${poolTransition.suggested.ticker}] ${poolTransition.suggested.name}`}</Text>
</View>
</Row>
<Text
style={styles.poolTickerText}
>{`[${poolTransition.suggested.ticker}] ${poolTransition.suggested.name}`}</Text>
</View>
</Row>

<Row>
<Text style={styles.label}>{strings.estimatedRoa}</Text>
<Row>
<Text style={styles.label}>{strings.estimatedRoa}</Text>

<Text style={styles.suggestedValue}>{poolTransition.suggested.roa} %</Text>
</Row>
<Text style={styles.suggestedValue}>{poolTransition.suggested.roa} %</Text>
</Row>

<Row>
<Text style={styles.label}>{strings.fee}</Text>
<Row>
<Text style={styles.label}>{strings.fee}</Text>

<Text style={styles.suggestedValue}>{formatFee(poolTransition.suggested.taxRatio)} %</Text>
</Row>
<Text style={styles.suggestedValue}>{formatFee(poolTransition.suggested.taxRatio)} %</Text>
</Row>

<Text style={styles.currentValue}>{strings.poolGeneratesRewards}</Text>
</View>
<Text style={styles.currentValue}>{strings.poolGeneratesRewards}</Text>
</View>

<Space height="xl" />
<Space height="xl" />
</View>
</ScrollView>

<Actions>
<Button outline title={strings.skipNoRewards} textStyles={styles.outlineButton} onPress={handleOnSkip} />
Expand Down Expand Up @@ -158,6 +161,9 @@ const useStyles = () => {
flex: 1,
justifyContent: 'flex-end',
},
scroll: {
width: '100%',
},
card: {
borderRadius: 8,
gap: 8,
Expand Down

0 comments on commit 17c2118

Please sign in to comment.