diff --git a/apps/wallet-mobile/src/components/ScrollableView/ScrollableView.tsx b/apps/wallet-mobile/src/components/ScrollableView/ScrollableView.tsx deleted file mode 100644 index 709ea91811..0000000000 --- a/apps/wallet-mobile/src/components/ScrollableView/ScrollableView.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' -import {ScrollView, ScrollViewProps} from 'react-native' - -const ScrollViewContext = React.createContext<{current: ScrollView | null}>({current: null}) - -export const useScrollView = () => React.useContext(ScrollViewContext).current - -export const ScrollableView = (props: ScrollViewProps) => { - const scrollViewRef = React.useRef(null) - - return ( - - - - ) -} diff --git a/apps/wallet-mobile/src/components/ScrollableView/index.ts b/apps/wallet-mobile/src/components/ScrollableView/index.ts deleted file mode 100644 index 47d2734daf..0000000000 --- a/apps/wallet-mobile/src/components/ScrollableView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ScrollableView' diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.stories.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.stories.tsx index e044e4c608..6377c2ca74 100644 --- a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.stories.tsx +++ b/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.from({length}).map(() => '')) const mnenonicRefs = React.useRef(mnemonicWords.map(() => React.createRef())).current const [_, setFocusedIndex] = React.useState(0) + const {scrollViewRef} = useScrollView() const [mnemonicSelectedWords, setMnemonicSelectedWords] = React.useState>( Array.from({length: 15}).map(() => ''), ) @@ -59,6 +61,7 @@ storiesOf('MnemonicInput', module) mnemonic={mnemonic} onError={onError} onClearError={onClearError} + scrollViewRef={scrollViewRef} /> ) @@ -73,6 +76,7 @@ storiesOf('MnemonicInput', module) ) const [mnemonic, setMnemonic] = React.useState('') const [inputErrorsIndexes, setInputErrorsIndexes] = React.useState>([]) + 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} /> ) diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx index 28de1d6c1f..5af388f3db 100644 --- a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx +++ b/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[] inputErrorsIndexes: Array mnemonic: string + scrollViewRef: React.MutableRefObject onError: (index: number) => void onClearError: (index: number) => void }) => { @@ -63,6 +64,7 @@ export const MnemonicInput = ({ onFocus={onFocus} onError={onError} onClearError={onClearError} + scrollViewRef={scrollViewRef} /> @@ -114,29 +116,30 @@ const ClearAllButton = ({onPress, testId}: {onPress: () => void; testId?: string type MnemonicWordsInputProps = { mnenonicRefs: React.RefObject[] mnemonicSelectedWords: Array - onSelect: (index: number, word: string) => void isValidPhrase: boolean suggestedWords: Array inputErrorsIndexes: Array + scrollViewRef: React.MutableRefObject + onSelect: (index: number, word: string) => void setSuggestedWords: (suggestedWord: Array) => 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() 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) }} diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx index bff1eabaa6..f27582562a 100644 --- a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx +++ b/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(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} /> diff --git a/apps/wallet-mobile/src/legacy/Dashboard/Dashboard.tsx b/apps/wallet-mobile/src/legacy/Dashboard/Dashboard.tsx index 0059f870db..cb129e703d 100644 --- a/apps/wallet-mobile/src/legacy/Dashboard/Dashboard.tsx +++ b/apps/wallet-mobile/src/legacy/Dashboard/Dashboard.tsx @@ -75,7 +75,7 @@ export const Dashboard = () => { return } - openModal('', , windowHeight * 0.8) + openModal('', , Math.min(windowHeight * 0.9, 704)) } return ( diff --git a/apps/wallet-mobile/src/legacy/Dashboard/WithdrawStakingRewards/WithdrawStakingRewards.tsx b/apps/wallet-mobile/src/legacy/Dashboard/WithdrawStakingRewards/WithdrawStakingRewards.tsx index ae0a03bfe8..3df421aeb4 100644 --- a/apps/wallet-mobile/src/legacy/Dashboard/WithdrawStakingRewards/WithdrawStakingRewards.tsx +++ b/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() + 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
- + @@ -117,7 +120,7 @@ const WithdrawalTxForm = ({wallet, onDone}: {wallet: YoroiWallet; onDone: (withd - +