feat(mobile): WIP native connect popup

trezor · Sep 10, 2024 · 19a6223 · 19a6223
1 parent 22b96b5
commit 19a6223
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 0 deletions.
diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts
@@ -141,6 +141,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
     return {
         ...config,
         name,
+        scheme: 'trezorsuitelite',
         slug: appSlugs[buildType],
         owner: 'trezorcompany',
         version: suiteNativeVersion,

diff --git a/suite-native/app/package.json b/suite-native/app/package.json
@@ -87,6 +87,7 @@
         "expo-haptics": "13.0.1",
         "expo-image": "1.12.15",
         "expo-linear-gradient": "13.0.2",
+        "expo-linking": "^6.3.1",
         "expo-localization": "15.0.3",
         "expo-navigation-bar": "3.0.7",
         "expo-secure-store": "13.0.2",

diff --git a/suite-native/app/src/navigation/RootStackNavigator.tsx b/suite-native/app/src/navigation/RootStackNavigator.tsx
@@ -22,6 +22,7 @@ import { AddCoinAccountStackNavigator } from '@suite-native/module-add-accounts'
 import { DeviceInfoModalScreen, useHandleDeviceConnection } from '@suite-native/device';
 import { SendStackNavigator } from '@suite-native/module-send';
 import { CoinEnablingInitScreen } from '@suite-native/coin-enabling';
+import { ConnectPopupScreen, useConnectPopup } from '@suite-native/module-connect-popup';
 
 import { AppTabNavigator } from './AppTabNavigator';
 import { useCoinEnablingInitialCheck } from '../hooks/useCoinEnablingInitialCheck';
@@ -31,6 +32,7 @@ const RootStack = createNativeStackNavigator<RootStackParamList>();
 export const RootStackNavigator = () => {
     useHandleDeviceConnection();
     useCoinEnablingInitialCheck();
+    useConnectPopup();
 
     const isOnboardingFinished = useSelector(selectIsOnboardingFinished);
 
@@ -96,6 +98,14 @@ export const RootStackNavigator = () => {
                 }}
             />
             <RootStack.Screen name={RootStackRoutes.SendStack} component={SendStackNavigator} />
+
+            <RootStack.Screen
+                name={RootStackRoutes.ConnectPopup}
+                component={ConnectPopupScreen}
+                options={{
+                    presentation: 'fullScreenModal',
+                }}
+            />
         </RootStack.Navigator>
     );
 };
diff --git a/suite-native/module-connect-popup/package.json b/suite-native/module-connect-popup/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "@suite-native/module-connect-popup",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "depcheck": "yarn g:depcheck",
+        "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
+        "type-check": "yarn g:tsc --build"
+    },
+    "dependencies": {
+        "@suite-native/atoms": "workspace:*",
+        "@suite-native/navigation": "workspace:*",
+        "expo-linking": "^6.3.1"
+    }
+}
diff --git a/suite-native/module-connect-popup/src/hooks/useConnectPopup.ts b/suite-native/module-connect-popup/src/hooks/useConnectPopup.ts
@@ -0,0 +1,47 @@
+import {
+    StackToStackCompositeNavigationProps,
+    RootStackParamList,
+    RootStackRoutes,
+} from '@suite-native/navigation';
+import { useNavigation } from '@react-navigation/native';
+import * as Linking from 'expo-linking';
+import { useEffect } from 'react';
+
+type NavigationProp = StackToStackCompositeNavigationProps<
+    RootStackParamList,
+    RootStackRoutes.ConnectPopup,
+    RootStackParamList
+>;
+
+// TODO: wull be necessary to handle if device is not connected/unlocked so we probably want to wait until user unlock device
+// we already have some modals like biometrics or coin enabled which are waiting for device to be connected
+export const useConnectPopup = () => {
+    const navigation = useNavigation<NavigationProp>();
+
+    const navigateToConnectPopup = (url: string) => {
+        const parsedUrl = Linking.parse(url);
+        navigation.navigate(RootStackRoutes.ConnectPopup, { parsedUrl });
+    };
+
+    useEffect(() => {
+        const navigateToInitalUrl = async () => {
+            const currentUrl = await Linking.getInitialURL();
+            console.log('currentUrl', currentUrl);
+            if (currentUrl) {
+                navigateToConnectPopup(currentUrl);
+            }
+        };
+        navigateToInitalUrl();
+    }, []);
+
+    useEffect(() => {
+        // there could be when you open same deep link for second time and in that case it will be ignored
+        // this could be probably handed by Linking.addEventListener
+        const subscription = Linking.addEventListener('url', event => {
+            console.log('url event received', event.url);
+            navigateToConnectPopup(event.url);
+        });
+
+        return () => subscription?.remove();
+    }, []);
+};
diff --git a/suite-native/module-connect-popup/src/index.ts b/suite-native/module-connect-popup/src/index.ts
@@ -0,0 +1,2 @@
+export * from './screens/ConnectPopupScreen';
+export * from './hooks/useConnectPopup';
diff --git a/suite-native/module-connect-popup/src/screens/ConnectPopupScreen.tsx b/suite-native/module-connect-popup/src/screens/ConnectPopupScreen.tsx
@@ -0,0 +1,37 @@
+import { Box, Button, Text } from '@suite-native/atoms';
+import {
+    RootStackParamList,
+    RootStackRoutes,
+    Screen,
+    ScreenSubHeader,
+    StackProps,
+} from '@suite-native/navigation';
+import * as Linking from 'expo-linking';
+
+export const ConnectPopupScreen = ({
+    route,
+}: StackProps<RootStackParamList, RootStackRoutes.TransactionDetail>) => {
+    return (
+        <Screen
+            screenHeader={
+                <ScreenSubHeader
+                    closeActionType="close"
+                    content={<Text>Connect Popup Native</Text>}
+                />
+            }
+        >
+            <Box alignItems="center" justifyContent="center" flex={1}>
+                <Text>{JSON.stringify(route.params)}</Text>
+                <Button
+                    onPress={() => {
+                        Linking.openURL(
+                            `trezorsuitelite://send?coin=btc&address=1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2&amount=${Math.random()}`,
+                        );
+                    }}
+                >
+                    Open URL in this app
+                </Button>
+            </Box>
+        </Screen>
+    );
+};
diff --git a/suite-native/module-connect-popup/tsconfig.json b/suite-native/module-connect-popup/tsconfig.json
@@ -0,0 +1,5 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": []
+}
diff --git a/suite-native/navigation/package.json b/suite-native/navigation/package.json
@@ -28,6 +28,7 @@
         "@trezor/theme": "workspace:*",
         "expo-navigation-bar": "3.0.7",
         "expo-system-ui": "3.0.7",
+        "expo-linking": "^6.3.1",
         "react": "18.2.0",
         "react-native": "0.75.2",
         "react-native-keyboard-aware-scroll-view": "0.9.5",

diff --git a/suite-native/navigation/src/navigators.ts b/suite-native/navigation/src/navigators.ts
@@ -10,6 +10,7 @@ import {
 } from '@suite-common/wallet-types';
 import { AccountType, NetworkSymbol } from '@suite-common/wallet-config';
 import { AccountInfo, TokenTransfer } from '@trezor/connect';
+import { ParsedURL } from 'expo-linking';
 
 import {
     AppTabsRoutes,
@@ -174,4 +175,7 @@ export type RootStackParamList = {
     [RootStackRoutes.AddCoinAccountStack]: NavigatorScreenParams<AddCoinAccountStackParamList>;
     [RootStackRoutes.SendStack]: NavigatorScreenParams<SendStackParamList>;
     [RootStackRoutes.CoinEnablingInit]: undefined;
+    [RootStackRoutes.ConnectPopup]: {
+        parsedUrl: ParsedURL;
+    };
 };
diff --git a/suite-native/navigation/src/routes.ts b/suite-native/navigation/src/routes.ts
@@ -12,6 +12,7 @@ export enum RootStackRoutes {
     DeviceInfo = 'DeviceInfo',
     AddCoinAccountStack = 'AddCoinAccountStack',
     CoinEnablingInit = 'CoinEnablingInit',
+    ConnectPopup = 'ConnectPopup',
 }
 
 export enum AppTabsRoutes {

diff --git a/yarn.lock b/yarn.lock
@@ -9571,6 +9571,7 @@ __metadata:
     expo-haptics: "npm:13.0.1"
     expo-image: "npm:1.12.15"
     expo-linear-gradient: "npm:13.0.2"
+    expo-linking: "npm:^6.3.1"
     expo-localization: "npm:15.0.3"
     expo-navigation-bar: "npm:3.0.7"
     expo-secure-store: "npm:13.0.2"
@@ -10149,6 +10150,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@suite-native/module-connect-popup@workspace:suite-native/module-connect-popup":
+  version: 0.0.0-use.local
+  resolution: "@suite-native/module-connect-popup@workspace:suite-native/module-connect-popup"
+  dependencies:
+    "@suite-native/atoms": "workspace:*"
+    "@suite-native/navigation": "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "@suite-native/module-dev-utils@workspace:*, @suite-native/module-dev-utils@workspace:suite-native/module-dev-utils":
   version: 0.0.0-use.local
   resolution: "@suite-native/module-dev-utils@workspace:suite-native/module-dev-utils"
@@ -22360,6 +22370,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-linking@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "expo-linking@npm:6.3.1"
+  dependencies:
+    expo-constants: "npm:~16.0.0"
+    invariant: "npm:^2.2.4"
+  checksum: 10/07ee4417ae6e58351797b805bd88215ceb6f89ec16c99e305db6d826925da1d1620e3baaa733a5c8848663dc2b3c39b6d375b381cf590a603a98eb671fef105d
+  languageName: node
+  linkType: hard
+
 "expo-local-authentication@npm:14.0.1":
   version: 14.0.1
   resolution: "expo-local-authentication@npm:14.0.1"