From 17c2118e7b1296310f43565cebc81f1b46ffc0b3 Mon Sep 17 00:00:00 2001
From: jorbuedo <jorbuedo@users.noreply.github.com>
Date: Thu, 13 Jun 2024 16:51:31 +0200
Subject: [PATCH] (pool-transition) Fix small screen modal scroll (#3300)

---
 .../PoolTransition/PoolTransitionModal.tsx    | 136 +++++++++---------
 1 file changed, 71 insertions(+), 65 deletions(-)

diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
index 8002853953..96ca97ee18 100644
--- a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
+++ b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
@@ -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'
@@ -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} />
@@ -158,6 +161,9 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'flex-end',
     },
+    scroll: {
+      width: '100%',
+    },
     card: {
       borderRadius: 8,
       gap: 8,