feat(suite-native): modals renderer (trezor#10801)

vacuumlabs · Jan 31, 2024 · a9b4d1e · a9b4d1e
1 parent 2acb84b
commit a9b4d1e
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 115 deletions.
diff --git a/packages/blockchain-link-types/package.json b/packages/blockchain-link-types/package.json
@@ -16,9 +16,9 @@
         "prepublish": "yarn tsx ../../scripts/prepublish.js"
     },
     "dependencies": {
+        "@solana/web3.js": "^1.87.6",
         "@trezor/type-utils": "workspace:*",
         "@trezor/utxo-lib": "workspace:*",
-        "@solana/web3.js": "^1.87.6",
         "socks-proxy-agent": "6.1.1"
     },
     "devDependencies": {

diff --git a/suite-native/alerts/src/components/AlertRenderer.tsx b/suite-native/alerts/src/components/AlertRenderer.tsx
@@ -1,21 +1,12 @@
-import { ReactNode } from 'react';
-
 import { useAtomValue } from 'jotai';
 
 import { AlertSheet } from './AlertSheet';
 import { alertAtom } from '../alertsAtoms';
 
-type NotificationRendererProps = {
-    children: ReactNode;
-};
-
-export const AlertRenderer = ({ children }: NotificationRendererProps) => {
+export const AlertRenderer = () => {
     const alert = useAtomValue(alertAtom);
 
-    return (
-        <>
-            {children}
-            {alert && <AlertSheet alert={alert} />}
-        </>
-    );
+    if (!alert) return null;
+
+    return <AlertSheet alert={alert} />;
 };
diff --git a/suite-native/app/src/App.tsx b/suite-native/app/src/App.tsx
@@ -8,25 +8,20 @@ import * as Sentry from '@sentry/react-native';
 
 import TrezorConnect from '@trezor/connect';
 import { selectIsAppReady, selectIsConnectInitialized, StoreProvider } from '@suite-native/state';
-// import { NotificationRenderer } from '@suite-native/notifications';
-import { ToastRenderer } from '@suite-native/toasts';
 import { FormatterProvider } from '@suite-common/formatters';
-import { AlertRenderer } from '@suite-native/alerts';
 import { NavigationContainerWithAnalytics } from '@suite-native/navigation';
-import { AuthenticatorProvider } from '@suite-native/biometrics';
 import { FeatureMessageScreen, MessageSystemBannerRenderer } from '@suite-native/message-system';
 import { IntlProvider } from '@suite-native/intl';
 import { useTransactionCache } from '@suite-native/accounts';
 import { isDebugEnv } from '@suite-native/config';
-import { PassphraseModalRenderer } from '@suite-native/passphrase';
 
 import { RootStackNavigator } from './navigation/RootStackNavigator';
 import { StylesProvider } from './StylesProvider';
-import { Snow } from './snow/Snow';
 import { useFormattersConfig } from './hooks/useFormattersConfig';
 import { applicationInit } from './initActions';
 import { useReportAppInitToAnalytics } from './hooks/useReportAppInitToAnalytics';
 import { SentryProvider } from './SentryProvider';
+import { ModalsRenderer } from './ModalsRenderer';
 
 // Base time to measure app loading time.
 // The constant has to be placed at the beginning of this file to be initialized as soon as possible.
@@ -95,27 +90,13 @@ const AppComponent = () => {
     if (!isAppReady) return null;
 
     return (
-        <>
-            <FormatterProvider config={formattersConfig}>
-                <AuthenticatorProvider>
-                    <AlertRenderer>
-                        <PassphraseModalRenderer>
-                            {/* Notifications are disabled until the problem with after-import notifications flooding is solved. */}
-                            {/* More here: https://github.com/trezor/trezor-suite/issues/7721  */}
-                            {/* <NotificationRenderer> */}
-                            <ToastRenderer>
-                                <MessageSystemBannerRenderer />
-                                <RootStackNavigator />
-                            </ToastRenderer>
-                            {/* </NotificationRenderer> */}
-                        </PassphraseModalRenderer>
-                    </AlertRenderer>
-                    <Snow />
-                </AuthenticatorProvider>
-            </FormatterProvider>
+        <FormatterProvider config={formattersConfig}>
+            <MessageSystemBannerRenderer />
+            <RootStackNavigator />
+            <ModalsRenderer />
             {/* NOTE: Rendered as last item so that it covers the whole app screen */}
             <FeatureMessageScreen />
-        </>
+        </FormatterProvider>
     );
 };
 

diff --git a/suite-native/app/src/ModalsRenderer.tsx b/suite-native/app/src/ModalsRenderer.tsx
@@ -0,0 +1,20 @@
+import { AlertRenderer } from '@suite-native/alerts';
+import { PassphraseModalRenderer } from '@suite-native/passphrase';
+import { ToastRenderer } from '@suite-native/toasts';
+import { BiometricsModalRenderer } from '@suite-native/biometrics';
+// import { NotificationRenderer } from '@suite-native/notifications';
+
+import { Snow } from './snow/Snow';
+
+export const ModalsRenderer = () => (
+    <>
+        <AlertRenderer />
+        <PassphraseModalRenderer />
+        <ToastRenderer />
+        <Snow />
+        <BiometricsModalRenderer />
+        {/* Notifications are disabled until the problem with after-import notifications flooding is solved. */}
+        {/* More here: https://github.com/trezor/trezor-suite/issues/7721  */}
+        {/* <NotificationRenderer /> */}
+    </>
+);
diff --git a/suite-native/biometrics/src/components/AuthenticatorProvider.tsx b/suite-native/biometrics/src/components/AuthenticatorProvider.tsx
diff --git a/suite-native/biometrics/src/components/BiometricsModalRenderer.tsx b/suite-native/biometrics/src/components/BiometricsModalRenderer.tsx
@@ -0,0 +1,12 @@
+import { useBiometrics } from '../useBiometrics';
+import { useIsBiometricsOverlayVisible } from '../biometricsAtoms';
+import { BiometricOverlay } from './BiometricOverlay';
+
+export const BiometricsModalRenderer = () => {
+    useBiometrics();
+    const { isBiometricsOverlayVisible } = useIsBiometricsOverlayVisible();
+
+    if (!isBiometricsOverlayVisible) return null;
+
+    return <BiometricOverlay />;
+};
diff --git a/suite-native/biometrics/src/index.ts b/suite-native/biometrics/src/index.ts
@@ -1,6 +1,6 @@
 export * from './isBiometricsFeatureAvailable';
 export * from './biometricsAtoms';
 export * from './useBiometrics';
-export * from './components/AuthenticatorProvider';
+export * from './components/BiometricsModalRenderer';
 export * from './useBiometricsSettings';
 export * from './utils';
diff --git a/suite-native/notifications/src/components/NotificationRenderer.tsx b/suite-native/notifications/src/components/NotificationRenderer.tsx
@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
@@ -8,10 +7,6 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { TransactionNotification } from './TransactionNotification';
 
-type NotificationRendererProps = {
-    children: ReactNode;
-};
-
 const notificationContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
     (utils, { topSafeAreaInset }) => ({
         position: 'absolute',
@@ -22,25 +17,22 @@ const notificationContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number
     }),
 );
 
-export const NotificationRenderer = ({ children }: NotificationRendererProps) => {
+export const NotificationRenderer = () => {
     const { applyStyle } = useNativeStyles();
     const { top: topSafeAreaInset } = useSafeAreaInsets();
     const transactionNotifications = useSelector(selectOpenedTransactionNotifications);
 
     return (
-        <>
-            {children}
-            <Box
-                style={applyStyle(notificationContainerStyle, {
-                    topSafeAreaInset,
-                })}
-            >
-                <VStack flex={1}>
-                    {transactionNotifications.map(({ id }) => (
-                        <TransactionNotification notificationId={id} key={id} />
-                    ))}
-                </VStack>
-            </Box>
-        </>
+        <Box
+            style={applyStyle(notificationContainerStyle, {
+                topSafeAreaInset,
+            })}
+        >
+            <VStack flex={1}>
+                {transactionNotifications.map(({ id }) => (
+                    <TransactionNotification notificationId={id} key={id} />
+                ))}
+            </VStack>
+        </Box>
     );
 };
diff --git a/suite-native/passphrase/src/PassphraseModalRenderer.tsx b/suite-native/passphrase/src/PassphraseModalRenderer.tsx
@@ -1,21 +1,12 @@
-import { ReactNode } from 'react';
-
 import { useAtomValue } from 'jotai';
 
 import { PassphraseFormModal } from './PassphraseFormModal';
 import { isPassphraseModalVisibleAtom } from './isPassphraseModalVisibleAtom';
 
-type PassphraseModalRendererProps = {
-    children: ReactNode;
-};
-
-export const PassphraseModalRenderer = ({ children }: PassphraseModalRendererProps) => {
+export const PassphraseModalRenderer = () => {
     const isPassphraseModalVisible = useAtomValue(isPassphraseModalVisibleAtom);
 
-    return (
-        <>
-            {children}
-            {isPassphraseModalVisible && <PassphraseFormModal />}
-        </>
-    );
+    if (!isPassphraseModalVisible) return null;
+
+    return <PassphraseFormModal />;
 };
diff --git a/suite-native/toasts/src/components/ToastRenderer.tsx b/suite-native/toasts/src/components/ToastRenderer.tsx
@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useAtomValue } from 'jotai';
@@ -9,10 +8,6 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { toastsAtom } from '../toastsAtoms';
 import { Toast } from './Toast';
 
-type ToastRendererProps = {
-    children: ReactNode;
-};
-
 const toastsContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
     (utils, { topSafeAreaInset }) => ({
         width: '100%',
@@ -23,26 +18,23 @@ const toastsContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
     }),
 );
 
-export const ToastRenderer = ({ children }: ToastRendererProps) => {
+export const ToastRenderer = () => {
     const { applyStyle } = useNativeStyles();
     const { top: topSafeAreaInset } = useSafeAreaInsets();
     const toasts = useAtomValue(toastsAtom);
 
     return (
-        <>
-            {children}
-            <Box
-                pointerEvents="none"
-                style={applyStyle(toastsContainerStyle, {
-                    topSafeAreaInset,
-                })}
-            >
-                <VStack alignItems="center">
-                    {toasts.map(toast => (
-                        <Toast toast={toast} key={toast.id} />
-                    ))}
-                </VStack>
-            </Box>
-        </>
+        <Box
+            pointerEvents="none"
+            style={applyStyle(toastsContainerStyle, {
+                topSafeAreaInset,
+            })}
+        >
+            <VStack alignItems="center">
+                {toasts.map(toast => (
+                    <Toast toast={toast} key={toast.id} />
+                ))}
+            </VStack>
+        </Box>
     );
 };