1- /* eslint-disable react/jsx-props-no-spreading */
21import Box from '@components/Box'
32import ButtonPressable from '@components/ButtonPressable'
43import SafeAreaBox from '@components/SafeAreaBox'
54import Text from '@components/Text'
65import { useNavigation } from '@react-navigation/native'
7- import WarningKeystone from '@assets/images/warningKeystone.svg'
8- import React , {
9- forwardRef ,
10- ReactNode ,
11- Ref ,
12- useCallback ,
13- useImperativeHandle ,
14- useMemo ,
15- useRef ,
16- } from 'react'
17- import useCamera from '@hooks/useCamera'
18- import { BottomSheetBackdrop , BottomSheetModal } from '@gorhom/bottom-sheet'
19- import { useOpacity , useSpacing } from '@theme/themeHooks'
20- import useBackHandler from '@hooks/useBackHandler'
21- import { useTheme } from '@shopify/restyle'
6+ import React , { useCallback } from 'react'
227import { t } from 'i18next'
23- import { Image , Linking , Platform } from 'react-native'
8+ import { Image } from 'react-native'
249import { AddNewAccountNavigationProp } from '../home/addNewAccount/addNewAccountTypes'
2510
26- type CameraPermissionBottomSheetAlertRef = {
27- show : ( ) => void
28- dismiss : ( ) => void
29- }
30-
31- const CameraPermissionBottomSheetAlert = forwardRef (
32- (
33- { children } : { children : ReactNode } ,
34- ref : Ref < CameraPermissionBottomSheetAlertRef > ,
35- ) => {
36- useImperativeHandle ( ref , ( ) => ( {
37- show : ( ) => {
38- bottomSheetModalRef . current ?. present ( )
39- } ,
40- dismiss : ( ) => {
41- bottomSheetModalRef . current ?. dismiss ( )
42- } ,
43- } ) )
44-
45- const bottomSheetModalRef = useRef < BottomSheetModal > ( null )
46- const { backgroundStyle } = useOpacity ( 'surfaceSecondary' , 1 )
47- const { m } = useSpacing ( )
48- const { colors } = useTheme ( )
49- const snapPoints = useMemo ( ( ) => [ '40%' ] , [ ] )
50- const sheetHandleStyle = useMemo ( ( ) => ( { padding : m } ) , [ m ] )
51- const { handleDismiss } = useBackHandler ( bottomSheetModalRef )
52- const handleIndicatorStyle = useMemo ( ( ) => {
53- return {
54- backgroundColor : colors . secondaryText ,
55- }
56- } , [ colors . secondaryText ] )
57- const renderBackdrop = useCallback (
58- ( props ) => (
59- < BottomSheetBackdrop
60- disappearsOnIndex = { - 1 }
61- appearsOnIndex = { 0 }
62- // eslint-disable-next-line react/jsx-props-no-spreading
63- { ...props }
64- />
65- ) ,
66- [ ] ,
67- )
68-
69- return (
70- < BottomSheetModal
71- ref = { bottomSheetModalRef }
72- index = { 0 }
73- backgroundStyle = { backgroundStyle }
74- backdropComponent = { renderBackdrop }
75- snapPoints = { snapPoints }
76- handleStyle = { sheetHandleStyle }
77- onDismiss = { handleDismiss }
78- handleIndicatorStyle = { handleIndicatorStyle }
79- >
80- { children }
81- </ BottomSheetModal >
82- )
83- } ,
84- )
85-
86- const WarningContent = ( ) => {
87- const handleOpenSettings = ( ) => {
88- if ( Platform . OS === 'ios' ) {
89- Linking . openURL ( 'app-settings:' )
90- } else {
91- Linking . openSettings ( )
92- }
93- }
94- return (
95- < SafeAreaBox
96- flex = { 1 }
97- justifyContent = "center"
98- marginHorizontal = "l"
99- edges = { [ 'bottom' ] }
100- >
101- < Box flex = { 1 } justifyContent = "center" >
102- < Box alignItems = "center" >
103- < WarningKeystone />
104- < Text variant = "body0" textAlign = "center" marginVertical = "l" >
105- { t ( 'keystone.connectKeystoneStart.warning' ) as string }
106- </ Text >
107- </ Box >
108- </ Box >
109- < ButtonPressable
110- borderRadius = "round"
111- onPress = { handleOpenSettings }
112- backgroundColor = "primaryText"
113- backgroundColorOpacityPressed = { 0.7 }
114- backgroundColorDisabled = "surfaceSecondary"
115- backgroundColorDisabledOpacity = { 0.5 }
116- titleColorDisabled = "black500"
117- titleColor = "primary"
118- fontWeight = "500"
119- title = { t ( 'keystone.connectKeystoneStart.ok' ) }
120- marginBottom = "l"
121- />
122- </ SafeAreaBox >
123- )
124- }
125-
12611const ConnectKeystoneStart = ( ) => {
127- const { hasPermission } = useCamera ( )
128- const cameraPermissionBottomSheetAlertRef =
129- useRef < CameraPermissionBottomSheetAlertRef > ( null )
13012 const navigation = useNavigation < AddNewAccountNavigationProp > ( )
13113 const handleStart = useCallback ( ( ) => {
132- if ( ! hasPermission ) {
133- cameraPermissionBottomSheetAlertRef . current ?. show ( )
134- } else {
135- navigation . navigate ( 'KeystoneNavigator' )
136- }
137- } , [ navigation , hasPermission ] )
14+ navigation . navigate ( 'KeystoneNavigator' )
15+ } , [ navigation ] )
13816 return (
13917 < SafeAreaBox
14018 flex = { 1 }
@@ -155,11 +33,6 @@ const ConnectKeystoneStart = () => {
15533 </ Text >
15634 </ Box >
15735 </ Box >
158- < CameraPermissionBottomSheetAlert
159- ref = { cameraPermissionBottomSheetAlertRef }
160- >
161- < WarningContent />
162- </ CameraPermissionBottomSheetAlert >
16336 < ButtonPressable
16437 borderRadius = "round"
16538 onPress = { handleStart }
0 commit comments