fix(wallet-mobile): scrollviews

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.stories.tsx

@@ -2,6 +2,7 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 import {View} from 'react-native'
 
+import {useScrollView} from '../../../../../components/ScrollView/ScrollView'
 import {MnemonicWordInputRef} from '../RestoreWalletScreen'
 import {MnemonicInput} from './MnemonicInput'
 
@@ -11,6 +12,7 @@ storiesOf('MnemonicInput', module)
     const [mnemonicWords, setMnemonicWords] = React.useState<Array<string>>(Array.from({length}).map(() => ''))
     const mnenonicRefs = React.useRef(mnemonicWords.map(() => React.createRef<MnemonicWordInputRef>())).current
     const [_, setFocusedIndex] = React.useState<number>(0)
+    const {scrollViewRef} = useScrollView()
     const [mnemonicSelectedWords, setMnemonicSelectedWords] = React.useState<Array<string>>(
       Array.from({length: 15}).map(() => ''),
     )
@@ -59,6 +61,7 @@ storiesOf('MnemonicInput', module)
           mnemonic={mnemonic}
           onError={onError}
           onClearError={onClearError}
+          scrollViewRef={scrollViewRef}
         />
       </View>
     )
@@ -73,6 +76,7 @@ storiesOf('MnemonicInput', module)
     )
     const [mnemonic, setMnemonic] = React.useState('')
     const [inputErrorsIndexes, setInputErrorsIndexes] = React.useState<Array<number>>([])
+    const {scrollViewRef} = useScrollView()
 
     const onSelect = (index: number, word: string) => {
       setMnemonicWords((words) => {
@@ -116,6 +120,7 @@ storiesOf('MnemonicInput', module)
           mnemonic={mnemonic}
           onError={onError}
           onClearError={onClearError}
+          scrollViewRef={scrollViewRef}
         />
       </View>
     )

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx

@@ -1,9 +1,8 @@
 import {useTheme} from '@yoroi/theme'
 import {wordlists} from 'bip39'
 import * as React from 'react'
-import {Platform, StyleSheet, Text, TextInput as RNTextInput, TouchableOpacity, View} from 'react-native'
+import {Platform, ScrollView, StyleSheet, Text, TextInput as RNTextInput, TouchableOpacity, View} from 'react-native'
 
-import {useScrollView} from '../../../../../components/ScrollableView/ScrollableView'
 import {Space} from '../../../../../components/Space/Space'
 import {Spacer} from '../../../../../components/Spacer/Spacer'
 import {isEmptyString} from '../../../../../kernel/utils'
@@ -25,6 +24,7 @@ export const MnemonicInput = ({
   mnenonicRefs,
   mnemonic,
   inputErrorsIndexes,
+  scrollViewRef,
   onError,
   onClearError,
 }: {
@@ -41,6 +41,7 @@ export const MnemonicInput = ({
   mnenonicRefs: React.RefObject<MnemonicWordInputRef>[]
   inputErrorsIndexes: Array<number>
   mnemonic: string
+  scrollViewRef: React.MutableRefObject<ScrollView | null>
   onError: (index: number) => void
   onClearError: (index: number) => void
 }) => {
@@ -63,6 +64,7 @@ export const MnemonicInput = ({
         onFocus={onFocus}
         onError={onError}
         onClearError={onClearError}
+        scrollViewRef={scrollViewRef}
       />
 
       <Space height="lg" />
@@ -114,29 +116,30 @@ const ClearAllButton = ({onPress, testId}: {onPress: () => void; testId?: string
 type MnemonicWordsInputProps = {
   mnenonicRefs: React.RefObject<MnemonicWordInputRef>[]
   mnemonicSelectedWords: Array<string>
-  onSelect: (index: number, word: string) => void
   isValidPhrase: boolean
   suggestedWords: Array<string>
   inputErrorsIndexes: Array<number>
+  scrollViewRef: React.MutableRefObject<ScrollView | null>
+  onSelect: (index: number, word: string) => void
   setSuggestedWords: (suggestedWord: Array<string>) => void
   onFocus: (index: number) => void
   onError: (index: number) => void
   onClearError: (index: number) => void
 }
 const MnemonicWordsInput = ({
-  onSelect,
   mnemonicSelectedWords,
   mnenonicRefs,
   isValidPhrase = false,
   suggestedWords,
   inputErrorsIndexes,
+  scrollViewRef,
+  onSelect,
   setSuggestedWords,
   onFocus,
   onError,
   onClearError,
 }: MnemonicWordsInputProps) => {
   const {styles} = useStyles()
-  const scrollView = useScrollView()
   const rowHeightRef = React.useRef<number | void>()
 
   useAutoFocus(mnenonicRefs[0])
@@ -168,8 +171,7 @@ const MnemonicWordsInput = ({
                 if (rowHeightRef.current == null) return
                 const columnNumber = index % 3
                 const rowNumber = (index - columnNumber) / 3
-                // TODO: revist @banklesss for this to work it needs to be in a ScrollableView
-                scrollView?.scrollTo({y: rowNumber * rowHeightRef.current})
+                scrollViewRef?.current?.scrollTo({y: rowNumber * rowHeightRef.current})
 
                 onFocus(index)
               }}

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx

@@ -10,6 +10,7 @@ import {SafeAreaView} from 'react-native-safe-area-context'
 import {Button} from '../../../../components/Button/Button'
 import {KeyboardAvoidingView} from '../../../../components/KeyboardAvoidingView/KeyboardAvoidingView'
 import {useModal} from '../../../../components/Modal/ModalContext'
+import {useScrollView} from '../../../../components/ScrollView/ScrollView'
 import {Space} from '../../../../components/Space/Space'
 import {StepperProgress} from '../../../../components/StepperProgress/StepperProgress'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
@@ -37,6 +38,7 @@ export const RestoreWalletScreen = () => {
   const {openModal} = useModal()
   const [focusedIndex, setFocusedIndex] = React.useState<number>(0)
   const [isValidPhrase, setIsValidPhrase] = React.useState(false)
+  const {scrollViewRef} = useScrollView()
 
   if (mnemonicType === null) throw new Error('mnemonicType missing')
 
@@ -170,6 +172,7 @@ export const RestoreWalletScreen = () => {
             inputErrorsIndexes={inputErrorsIndexes}
             onError={onError}
             onClearError={onClearError}
+            scrollViewRef={scrollViewRef}
           />
         </ScrollView>
 

apps/wallet-mobile/src/legacy/Dashboard/Dashboard.tsx

@@ -75,7 +75,7 @@ export const Dashboard = () => {
       return
     }
 
-    openModal('', <WithdrawStakingRewards wallet={wallet} />, windowHeight * 0.8)
+    openModal('', <WithdrawStakingRewards wallet={wallet} />, Math.min(windowHeight * 0.9, 704))
   }
 
   return (

apps/wallet-mobile/src/legacy/Dashboard/WithdrawStakingRewards/WithdrawStakingRewards.tsx

@@ -1,13 +1,14 @@
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
-import {ScrollView, StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 
 import {Boundary} from '../../../components/Boundary/Boundary'
 import {Button} from '../../../components/Button/Button'
 import {Checkbox} from '../../../components/Checkbox/Checkbox'
 import {useModal} from '../../../components/Modal/ModalContext'
 import {PleaseWaitView} from '../../../components/PleaseWaitModal'
+import {ScrollView, useScrollView} from '../../../components/ScrollView/ScrollView'
 import {Space} from '../../../components/Space/Space'
 import {Warning} from '../../../components/Warning/Warning'
 import {useSelectedWallet} from '../../../features/WalletManager/common/hooks/useSelectedWallet'
@@ -56,13 +57,15 @@ export const WithdrawStakingRewards = ({wallet}: Props) => {
 }
 
 const WithdrawalTxForm = ({wallet, onDone}: {wallet: YoroiWallet; onDone: (withdrawalTx: YoroiUnsignedTx) => void}) => {
-  const styles = useStyles()
+  const {styles, colors} = useStyles()
   const bold = useBold()
   const {meta} = useSelectedWallet()
   const {stakingInfo} = useStakingInfo(wallet, {suspense: true})
   const strings = useWithdrawStakingRewardsStrings()
   const [isChecked, setIsChecked] = React.useState(false)
   const [deregister, setDeregister] = React.useState<boolean>()
+  const {isScrollBarShown, setIsScrollBarShown, scrollViewRef} = useScrollView()
+
   const {isLoading} = useWithdrawalTx(
     {wallet, deregister, addressMode: meta.addressMode},
     {enabled: deregister != null, onSuccess: (withdrawalTx) => onDone(withdrawalTx)},
@@ -77,7 +80,7 @@ const WithdrawalTxForm = ({wallet, onDone}: {wallet: YoroiWallet; onDone: (withd
     <View style={styles.root} testID="dangerousActionView">
       <Header title={strings.warningModalTitle}></Header>
 
-      <ScrollView style={styles.scroll} bounces={false}>
+      <ScrollView ref={scrollViewRef} style={styles.scroll} bounces={false} onScrollBarChange={setIsScrollBarShown}>
         <Warning content={[strings.warning1, strings.warning2, strings.warning3].join('\r\n')} />
 
         <Space height="lg" />
@@ -117,7 +120,7 @@ const WithdrawalTxForm = ({wallet, onDone}: {wallet: YoroiWallet; onDone: (withd
         <Space height="lg" />
       </ScrollView>
 
-      <View style={styles.actions}>
+      <View style={[styles.actions, isScrollBarShown && {borderTopWidth: 1, borderTopColor: colors.lightGray}]}>
         <Button
           shelleyTheme
           onPress={() => setDeregister(false)}
@@ -133,7 +136,7 @@ const WithdrawalTxForm = ({wallet, onDone}: {wallet: YoroiWallet; onDone: (withd
 }
 
 const Header = ({title}: {title: string}) => {
-  const styles = useStyles()
+  const {styles} = useStyles()
   return <View style={styles.header}>{title !== '' && <Text style={styles.title}>{title}</Text>}</View>
 }
 
@@ -209,7 +212,7 @@ const messages = defineMessages({
 })
 
 const useBold = () => {
-  const styles = useStyles()
+  const {styles} = useStyles()
 
   return {
     b: (text: React.ReactNode) => <Text style={styles.bolder}>{text}</Text>,
@@ -240,8 +243,6 @@ const useStyles = () => {
     actions: {
       ...atoms.px_lg,
       paddingTop: 16,
-      borderTopWidth: 1,
-      borderTopColor: color.gray_200,
     },
     bolder: {
       color: color.gray_max,
@@ -257,5 +258,9 @@ const useStyles = () => {
       ...atoms.self_stretch,
     },
   })
-  return styles
+
+  const colors = {
+    lightGray: color.gray_200,
+  }
+  return {styles, colors} as const
 }

apps/wallet-mobile/translations/messages/src/legacy/Dashboard/Dashboard.json

@@ -6,12 +6,12 @@
     "start": {
       "line": 232,
       "column": 23,
-      "index": 7438
+      "index": 7453
     },
     "end": {
       "line": 235,
       "column": 3,
-      "index": 7571
+      "index": 7586
     }
   }
 ]