Refactor modal footers and scrolls

apps/wallet-mobile/src/components/ConfirmTxWithHwModal/ConfirmTxWithHwModal.tsx

@@ -2,7 +2,7 @@ import {useTheme} from '@yoroi/theme'
 import {HW} from '@yoroi/types'
 import React, {useState} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
-import {ActivityIndicator, ScrollView, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
 
 import {useSelectedWallet} from '../../features/WalletManager/common/hooks/useSelectedWallet'
 import {useWalletManager} from '../../features/WalletManager/context/WalletManagerProvider'
@@ -149,9 +149,9 @@ const ConfirmTxWithHwModalContent = ({
 
   if (step === 'connect-transport') {
     return (
-      <ScrollView style={styles.scroll}>
+      <View style={styles.wrapper}>
         <LedgerConnect useUSB={transportType === 'USB'} onConnectBLE={onConnectBLE} onConnectUSB={onConnectUSB} />
-      </ScrollView>
+      </View>
     )
   }
 
@@ -167,7 +167,7 @@ const ConfirmTxWithHwModalContent = ({
 const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
-    scroll: {
+    wrapper: {
       ...atoms.px_lg,
     },
     container: {

apps/wallet-mobile/src/components/LedgerTransportSwitch/LedgerTransportSwitch.tsx

@@ -1,6 +1,6 @@
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
-import {Alert, ScrollView, StyleSheet, View} from 'react-native'
+import {Alert, StyleSheet, View} from 'react-native'
 
 import {useStrings} from '../../features/Swap/common/strings'
 import {useIsUsbSupported} from '../../legacy/HW'
@@ -25,32 +25,30 @@ const LedgerTransportSwitchView = ({onSelectUSB, onSelectBLE}: Props) => {
   })
 
   return (
-    <ScrollView>
-      <View style={styles.content}>
-        <Text style={styles.paragraph}>{strings.bluetoothExplanation}</Text>
+    <View style={styles.content}>
+      <Text style={styles.paragraph}>{strings.bluetoothExplanation}</Text>
 
-        <Button
-          type={ButtonType.Secondary}
-          onPress={() => request()}
-          title={strings.bluetoothButton}
-          testID="connectWithBLEButton"
-        />
+      <Button
+        type={ButtonType.Secondary}
+        onPress={() => request()}
+        title={strings.bluetoothButton}
+        testID="connectWithBLEButton"
+      />
 
-        <Spacer height={16} />
+      <Spacer height={16} />
 
-        <Text style={styles.paragraph}>{strings.usbExplanation}</Text>
+      <Text style={styles.paragraph}>{strings.usbExplanation}</Text>
 
-        <Button
-          type={ButtonType.Secondary}
-          onPress={onSelectUSB}
-          title={strings.usbButton}
-          disabled={!isUSBSupported || !HARDWARE_WALLETS.LEDGER_NANO.ENABLE_USB_TRANSPORT}
-          testID="connectWithUSBButton"
-        />
+      <Button
+        type={ButtonType.Secondary}
+        onPress={onSelectUSB}
+        title={strings.usbButton}
+        disabled={!isUSBSupported || !HARDWARE_WALLETS.LEDGER_NANO.ENABLE_USB_TRANSPORT}
+        testID="connectWithUSBButton"
+      />
 
-        <Text style={styles.infoText}>{strings.usbConnectionIsBlocked}</Text>
-      </View>
-    </ScrollView>
+      <Text style={styles.infoText}>{strings.usbConnectionIsBlocked}</Text>
+    </View>
   )
 }
 

apps/wallet-mobile/src/features/Claim/useCases/AskConfirmation.stories.tsx

@@ -2,8 +2,14 @@ import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 
-import {AskConfirmation} from './AskConfirmation'
+import {AskConfirmation, AskConfirmationActions} from './AskConfirmation'
 
 storiesOf('AskConfirmation', module).add('initial', () => {
-  return <AskConfirmation address="address" url="https://example.com" code="42" onContinue={action('onContinue')} />
+  return (
+    <>
+      <AskConfirmation address="address" url="https://example.com" code="42" />
+
+      <AskConfirmationActions onContinue={action('onContinue')} />
+    </>
+  )
 })

apps/wallet-mobile/src/features/Claim/useCases/AskConfirmation.tsx

@@ -1,6 +1,6 @@
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {Platform, ScrollView, StyleSheet, Text, View, ViewProps} from 'react-native'
+import {Platform, StyleSheet, Text, View} from 'react-native'
 
 import {Button, ButtonType} from '../../../components/Button/Button'
 import {useModal} from '../../../components/Modal/ModalContext'
@@ -11,47 +11,33 @@ type Props = {
   address: string
   url: string
   code: string
-  onContinue: () => void
 }
-export const AskConfirmation = ({address, url, code, onContinue}: Props) => {
+export const AskConfirmation = ({address, url, code}: Props) => {
   const strings = useStrings()
-  const {closeModal, isLoading} = useModal()
   const domain = getDomain(url)
   const styles = useStyles()
 
   return (
     <View style={styles.root}>
-      <ScrollView contentContainerStyle={{flex: 1}} bounces={false}>
-        <Text style={styles.warning}>{strings.addressSharingWarning}</Text>
-
-        <Spacer height={20} />
+      <Text style={styles.warning}>{strings.addressSharingWarning}</Text>
 
-        <Text style={styles.monospace}>{address}</Text>
+      <Spacer height={20} />
 
-        <Spacer fill />
+      <Text style={styles.monospace}>{address}</Text>
 
-        <Item label={strings.domain} value={domain} />
+      <Spacer fill />
 
-        <Spacer height={16} />
+      <Item label={strings.domain} value={domain} />
 
-        <Item label={strings.code} value={code} />
+      <Spacer height={16} />
 
-        <Spacer fill />
-      </ScrollView>
+      <Item label={strings.code} value={code} />
 
-      <Actions>
-        <Button size="S" type={ButtonType.Secondary} title={strings.cancel} onPress={closeModal} disabled={isLoading} />
-
-        <Button size="S" title={strings.continue} onPress={onContinue} disabled={isLoading} />
-      </Actions>
+      <Spacer fill />
     </View>
   )
 }
 
-const Actions = ({style, ...props}: ViewProps) => {
-  const styles = useStyles()
-  return <View style={[style, styles.actions]} {...props} />
-}
 const Item = ({label, value}: {label: string; value: string}) => {
   const styles = useStyles()
   return (
@@ -65,6 +51,20 @@ const Item = ({label, value}: {label: string; value: string}) => {
   )
 }
 
+export const AskConfirmationActions = ({onContinue}: {onContinue: () => void}) => {
+  const strings = useStrings()
+  const {closeModal, isLoading} = useModal()
+  const styles = useStyles()
+
+  return (
+    <View style={styles.actions}>
+      <Button size="S" type={ButtonType.Secondary} title={strings.cancel} onPress={closeModal} disabled={isLoading} />
+
+      <Button size="S" title={strings.continue} onPress={onContinue} disabled={isLoading} />
+    </View>
+  )
+}
+
 const useStyles = () => {
   const {atoms, color} = useTheme()
 

apps/wallet-mobile/src/features/Discover/common/ConfirmConnectionModal.stories.tsx

@@ -15,7 +15,6 @@ const Initial = () => {
   return (
     <ConfirmConnectionModal
       logo="https://daehx1qv45z7c.cloudfront.net/cardano-spot.png"
-      onConfirm={action('onConfirm')}
       name="Example DApp"
       website="example.com"
       showSingleAddressWarning={false}

apps/wallet-mobile/src/features/Discover/common/ConfirmConnectionModal.tsx

@@ -1,7 +1,7 @@
 import {useTheme} from '@yoroi/theme'
 import {Image} from 'expo-image'
 import * as React from 'react'
-import {Linking, ScrollView, StyleSheet, Text, View} from 'react-native'
+import {Linking, StyleSheet, Text, View} from 'react-native'
 
 import {Button} from '../../../components/Button/Button'
 import {Icon} from '../../../components/Icon'
@@ -17,15 +17,15 @@ type Props = {
   name: string
   website: string
   logo: string
-  onConfirm: () => void
   showSingleAddressWarning: boolean
 }
 
 type OpenModalProps = {
   onClose: () => void
+  onConfirm: () => void
 } & Props
 
-const confirmConnectionModalHeight = 400
+const confirmConnectionModalHeight = 420
 const confirmConnectionModalWithWarningHeight = 530
 
 export const useOpenConfirmConnectionModal = () => {
@@ -47,7 +47,12 @@ export const useOpenConfirmConnectionModal = () => {
             website={props.website}
             logo={props.logo}
             showSingleAddressWarning={props.showSingleAddressWarning}
-            onConfirm={() => {
+          />
+        ),
+        footer: (
+          <Button
+            title={strings.confirmConnectionModalConnect}
+            onPress={() => {
               track.discoverWebViewBottomSheetConnectClicked()
               props.onConfirm()
               closeModal()
@@ -58,18 +63,18 @@ export const useOpenConfirmConnectionModal = () => {
         onClose: props.onClose,
       })
     },
-    [openModal, strings.confirmConnectionModalTitle, track, closeModal],
+    [openModal, strings.confirmConnectionModalTitle, strings.confirmConnectionModalConnect, track, closeModal],
   )
   return {openConfirmConnectionModal: open, closeModal}
 }
 
-export const ConfirmConnectionModal = ({name, website, onConfirm, logo, showSingleAddressWarning}: Props) => {
+export const ConfirmConnectionModal = ({name, website, logo, showSingleAddressWarning}: Props) => {
   const {styles, colors} = useStyles()
   const strings = useStrings()
   const imageUri = logo.length === 0 ? getDappFallbackLogo(website) : logo
 
   return (
-    <ScrollView style={styles.root} bounces={false}>
+    <View style={styles.root}>
       <View style={styles.imagesLine}>
         <Icon.YoroiApp size={48} />
 
@@ -111,9 +116,7 @@ export const ConfirmConnectionModal = ({name, website, onConfirm, logo, showSing
       </View>
 
       <Spacer height={46} />
-
-      <Button title={strings.confirmConnectionModalConnect} onPress={onConfirm} />
-    </ScrollView>
+    </View>
   )
 }
 

apps/wallet-mobile/src/features/Discover/common/ConfirmHWConnectionModal.tsx

@@ -2,7 +2,7 @@ import {useTheme} from '@yoroi/theme'
 import {HW} from '@yoroi/types'
 import React, {useCallback, useState} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
-import {ActivityIndicator, ScrollView, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {useMutation} from 'react-query'
 
 import {LedgerTransportSwitch} from '../../../components/LedgerTransportSwitch/LedgerTransportSwitch'
@@ -91,11 +91,7 @@ const ConfirmHWConnectionModal = ({onConfirm}: Pick<Props, 'onConfirm'>) => {
   }
 
   if (step === 'connect-transport') {
-    return (
-      <ScrollView>
-        <LedgerConnect useUSB={transportType === 'USB'} onConnectBLE={onConnectBLE} onConnectUSB={onConnectUSB} />
-      </ScrollView>
-    )
+    return <LedgerConnect useUSB={transportType === 'USB'} onConnectBLE={onConnectBLE} onConnectUSB={onConnectUSB} />
   }
 
   return (

apps/wallet-mobile/src/features/Discover/common/HWNotSupportedModal.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 
 import {Button} from '../../../components/Button/Button'
 import {useModal} from '../../../components/Modal/ModalContext'
-import {Spacer} from '../../../components/Spacer/Spacer'
 import {Text} from '../../../components/Text'
 import {useStrings} from './useStrings'
 
@@ -19,25 +18,13 @@ export const useShowHWNotSupportedModal = () => {
     ({onConfirm, onClose}: {onConfirm: Props['onConfirm']; onClose: () => void}) => {
       openModal({
         title: strings.continueOnLedger,
-        content: <HWNotSupportedModal onConfirm={onConfirm} />,
+        content: <Text>{strings.signDataNotSupported}</Text>,
+        footer: <Button title={strings.cancel} onPress={onConfirm} />,
         height: modalHeight,
         onClose,
       })
     },
-    [openModal, strings.continueOnLedger],
+    [openModal, strings.cancel, strings.continueOnLedger, strings.signDataNotSupported],
   )
   return {showHWNotSupportedModal, closeModal}
 }
-
-const HWNotSupportedModal = ({onConfirm}: Props) => {
-  const strings = useStrings()
-  return (
-    <>
-      <Text>{strings.signDataNotSupported}</Text>
-
-      <Spacer fill />
-
-      <Button title={strings.cancel} onPress={onConfirm} />
-    </>
-  )
-}

apps/wallet-mobile/src/features/Discover/common/UnverifiedDappModal.stories.tsx

@@ -4,17 +4,12 @@ import * as React from 'react'
 import {View} from 'react-native'
 
 import {Button} from '../../../components/Button/Button'
-import {UnverifiedDappModal, useOpenUnverifiedDappModal} from './UnverifiedDappModal'
+import {useOpenUnverifiedDappModal} from './UnverifiedDappModal'
 
 storiesOf('Discover UnverifiedDappModal', module)
   .addDecorator((story) => <View style={{padding: 20}}>{story()}</View>)
-  .add('initial', () => <Initial />)
   .add('With Button', () => <WithButton />)
 
-const Initial = () => {
-  return <UnverifiedDappModal onConfirm={action('onConfirm')} />
-}
-
 const WithButton = () => {
   const {openUnverifiedDappModal} = useOpenUnverifiedDappModal()