merge develop

apps/wallet-mobile/src/AppNavigator.tsx

@@ -56,7 +56,7 @@ const changeNavigationBarColor = (colorScheme: 'default-dark' | 'default-light',
 }
 
 export const AppNavigator = () => {
-  useInitNotifications({enabled: features.notifications})
+  useInitNotifications({localEnabled: features.localNotifications, pushEnabled: features.pushNotifications})
   useDeepLinkWatcher()
   const strings = useStrings()
   const [routeName, setRouteName] = React.useState<string>()

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/components/Modal/ModalContext.tsx

@@ -7,18 +7,25 @@ type ModalState = {
   isOpen: boolean
   title: string
   content: React.ReactNode
+  footer?: React.ReactNode
   isLoading: boolean
   full: boolean
+  canContinue?: boolean
+  canDiscard: boolean
 }
 type ModalActions = {
-  openModal: (
-    title: ModalState['title'],
-    content: ModalState['content'],
-    height?: ModalState['height'],
-    onClose?: () => void,
-    full?: boolean,
-  ) => void
+  openModal: (args: {
+    height?: number
+    title?: string
+    content: React.ReactNode
+    footer?: React.ReactNode
+    full?: boolean
+    onClose?: () => void
+    canContinue?: boolean
+    canDiscard?: boolean
+  }) => void
   closeModal: () => void
+  setCanContinue: (v: boolean) => void
   startLoading: () => void
   stopLoading: () => void
 }
@@ -51,20 +58,15 @@ export const ModalProvider = ({
         onCloseRef.current?.()
       }
     },
-    openModal: (
-      title: ModalState['title'],
-      content: ModalState['content'],
-      height?: ModalState['height'],
-      onClose?: () => void,
-      full = false,
-    ) => {
+    openModal: ({title = '', content, height, onClose, full = false, footer, canContinue, canDiscard = true}) => {
       Keyboard.dismiss()
-      dispatch({type: 'open', title, content, height, full})
+      dispatch({type: 'open', title, content, footer, height, full, canContinue, canDiscard})
       navigation.navigate('modal')
       onCloseRef.current = onClose
     },
     startLoading: () => dispatch({type: 'startLoading'}),
     stopLoading: () => dispatch({type: 'stopLoading'}),
+    setCanContinue: (v) => dispatch({type: 'canContinue', canContinue: v}),
   }).current
 
   const context = React.useMemo(() => ({...state, ...actions}), [state, actions])
@@ -77,19 +79,24 @@ type ModalAction =
       type: 'open'
       height: ModalState['height'] | undefined
       content: ModalState['content']
+      footer: ModalState['footer']
       title: ModalState['title']
       full: ModalState['full']
+      canContinue: ModalState['canContinue']
+      canDiscard: ModalState['canDiscard']
     }
   | {type: 'close'}
   | {type: 'startLoading'}
   | {type: 'stopLoading'}
+  | {type: 'canContinue'; canContinue: boolean}
 
 const modalReducer = (state: ModalState, action: ModalAction) => {
   switch (action.type) {
     case 'open':
       return {
         ...state,
         content: action.content,
+        footer: action.footer,
         height: action.height ?? defaultState.height,
         title: action.title,
         isOpen: true,
@@ -106,18 +113,23 @@ const modalReducer = (state: ModalState, action: ModalAction) => {
     case 'startLoading':
       return {...state, isLoading: true}
 
+    case 'canContinue':
+      return {...state, canContinue: action.canContinue}
+
     default:
       throw new Error(`modalReducer invalid action`)
   }
 }
 
 const defaultState: ModalState = Object.freeze({
   content: undefined,
+  footer: undefined,
   height: 350,
   title: '',
   isOpen: false,
   isLoading: false,
   full: false,
+  canDiscard: true,
 })
 
 const getLastRouteName = (navigation: NavigationProp<ReactNavigation.RootParamList>) => {

apps/wallet-mobile/src/components/Modal/ModalScreen.tsx

@@ -6,17 +6,19 @@ import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {KeyboardAvoidingView} from '../KeyboardAvoidingView/KeyboardAvoidingView'
 import {LoadingOverlay} from '../LoadingOverlay/LoadingOverlay'
+import {ScrollView, useScrollView} from '../ScrollView/ScrollView'
 import {Spacer} from '../Spacer/Spacer'
 import {FullModalScreen} from './FullModalScreen'
 import {useModal} from './ModalContext'
 
 export const ModalScreen = () => {
   const styles = useStyles()
   const {current} = useCardAnimation()
-  const {height, closeModal, content, isOpen, isLoading, full} = useModal()
+  const {height, closeModal, content, footer, isOpen, isLoading, full, canDiscard} = useModal()
   const [swipeLocationY, setSwipeLocationY] = React.useState(height)
   // NOTE: this is to fill the bottom of the screen with the same color as the modal
   const {bottom} = useSafeAreaInsets()
+  const {isScrollBarShown, setIsScrollBarShown, scrollViewRef} = useScrollView()
 
   const onResponderMove = ({nativeEvent}: GestureResponderEvent) => {
     if (swipeLocationY < nativeEvent.locationY && isOpen) {
@@ -36,7 +38,7 @@ export const ModalScreen = () => {
 
   return (
     <SafeAreaView style={styles.backdrop}>
-      <Pressable style={styles.cancellableArea} onPress={closeModal} />
+      <Pressable style={styles.cancellableArea} {...(canDiscard && {onPress: closeModal})} />
 
       <KeyboardAvoidingView style={styles.root} keyboardVerticalOffset={0}>
         <Animated.View
@@ -61,7 +63,13 @@ export const ModalScreen = () => {
 
             <Header onResponderMove={onResponderMove} onStartShouldSetResponder={() => true} />
 
-            {content}
+            <ScrollView ref={scrollViewRef} onScrollBarChange={setIsScrollBarShown}>
+              {content}
+            </ScrollView>
+
+            {footer !== undefined && (
+              <View style={[styles.actions, isScrollBarShown && styles.actionsScroll]}>{footer}</View>
+            )}
           </View>
         </Animated.View>
       </KeyboardAvoidingView>
@@ -147,6 +155,13 @@ const useStyles = () => {
       width: 32,
       borderRadius: 10,
     },
+    actions: {
+      ...atoms.p_lg,
+    },
+    actionsScroll: {
+      ...atoms.border_t,
+      borderTopColor: color.gray_200,
+    },
   })
   return styles
 }

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}