Skip to content

Commit

Permalink
feat(connect-deeplink-example): new example react-native app for deep…
Browse files Browse the repository at this point in the history
…links
  • Loading branch information
karliatto authored and martykan committed Sep 26, 2024
1 parent 12a72c5 commit c727023
Show file tree
Hide file tree
Showing 11 changed files with 229 additions and 5 deletions.
5 changes: 2 additions & 3 deletions packages/connect-deeplink/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ The `@trezor/connect-deeplink` package provides an implementation of `@trezor/co

Currently the library is still under development, only supports read-only methods and does not communicate with the production Suite Lite app.

To run a dev version of the Suite mobile app follow the instructions in [@suite-native/app](https://github.com/trezor/trezor-suite/blob/develop/suite-native/app/README.md)

To run a dev version of the Suite mobile app follow the instructions in [@suite-native/app](https://github.com/trezor/trezor-suite/blob/develop/suite-native/app/README.md)

## Using the Library

Expand Down Expand Up @@ -44,4 +43,4 @@ useEffect(() => {
## Example
The [connect-deeplink-example](https://github.com/trezor/trezor-suite/tree/develop/packages/connect-examples/connect-deeplink-example) shows how to use the library in a React Native + Expo app.
The [Connect deeplink example](https://github.com/trezor/trezor-suite/tree/develop/packages/connect-examples/deeplink-expo) shows how to use the library in a React Native + Expo app.
35 changes: 35 additions & 0 deletions packages/connect-examples/deeplink-expo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files

# dependencies
node_modules/

# Expo
.expo/
dist/
web-build/

# Native
*.orig.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision

# Metro
.metro-health-check*

# debug
npm-debug.*
yarn-debug.*
yarn-error.*

# macOS
.DS_Store
*.pem

# local env files
.env*.local

# typescript
*.tsbuildinfo
90 changes: 90 additions & 0 deletions packages/connect-examples/deeplink-expo/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { Button, StyleSheet, Text, View } from 'react-native';
import { useEffect, useState } from 'react';

import { StatusBar } from 'expo-status-bar';
import * as Linking from 'expo-linking';

import TrezorConnect from '@trezor/connect-deeplink';

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
dataContainer: {
marginTop: 20,
alignItems: 'flex-start',
},
});

export const App = () => {
const [errorData, setErrorData] = useState<any>(null);
const [successData, setSuccessData] = useState<any>(null);

const initialize = () => {
TrezorConnect.init({
manifest: {
email: 'developer@xyz.com',
appUrl: 'http://your.application.com',
},
deeplinkOpen: url => {
// eslint-disable-next-line no-console
console.log('deeplinkOpen', url);
Linking.openURL(url);
},
deeplinkCallbackUrl: Linking.createURL('/connect'),
});
};

const getAddress = async () => {
try {
const response = await TrezorConnect.getAddress({
path: "m/49'/0'/0'/0/0",
coin: 'btc',
});
if (!response.success) {
setSuccessData(null);
setErrorData({ success: response.success });

return;
}
setErrorData(null);
setSuccessData(response);
} catch (error) {
console.error('error', error);
}
};

useEffect(() => {
const subscription = Linking.addEventListener('url', event => {
TrezorConnect.handleDeeplink(event.url);
});

return () => subscription?.remove();
}, []);

return (
<View style={styles.container}>
<Text>Trezor Connect Native example!</Text>
<Button onPress={initialize} title="Initialize TrezorConnect" />
<Button onPress={getAddress} title="Get Address" />
{successData && (
<View style={styles.dataContainer}>
<Text>Success: {successData.success ? 'Yes' : 'No'}</Text>
<Text>Address: {successData.payload?.address}</Text>
<Text>Path: {successData.payload?.path.join(', ')}</Text>
<Text>Serialized Path: {successData.payload?.serializedPath}</Text>
</View>
)}

{errorData && (
<View style={styles.dataContainer}>
<Text>Success: {errorData.success ? 'Yes' : 'No'}</Text>
</View>
)}
<StatusBar style="auto" />
</View>
);
};
11 changes: 11 additions & 0 deletions packages/connect-examples/deeplink-expo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
## Deep link example with Expo

`@trezor/connect-deeplink` running with a React Native + Expo app

### Run it

`yarn android`

Will start the Expo app in Android emulator/device.

You will also need to have the Trezor Suite Lite app installed. Follow the instructions in [@suite-native/app](https://github.com/trezor/trezor-suite/blob/develop/suite-native/app/README.md) to run a dev version of the app.
13 changes: 13 additions & 0 deletions packages/connect-examples/deeplink-expo/app.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"expo": {
"name": "connect-deeplink-example",
"slug": "connect-deeplink-example",
"version": "1.0.0",
"orientation": "portrait",
"userInterfaceStyle": "light",
"ios": {
"supportsTablet": true
},
"scheme": "connectdeeplinkexample"
}
}
7 changes: 7 additions & 0 deletions packages/connect-examples/deeplink-expo/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = function (api) {
api.cache(true);

return {
presets: ['babel-preset-expo'],
};
};
8 changes: 8 additions & 0 deletions packages/connect-examples/deeplink-expo/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { registerRootComponent } from 'expo';

import { App } from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
25 changes: 25 additions & 0 deletions packages/connect-examples/deeplink-expo/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "connect-deeplink-expo-example",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@trezor/connect-deeplink": "workspace:*",
"expo": "51.0.31",
"expo-linking": "6.3.1",
"expo-status-bar": "1.12.1",
"react": "18.2.0",
"react-native": "0.75.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "18.2.45",
"typescript": "^5.3.3"
},
"private": true
}
7 changes: 7 additions & 0 deletions packages/connect-examples/deeplink-expo/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "../../../tsconfig.base.json",
"compilerOptions": { "outDir": "./libDev" },
"references": [
{ "path": "../../connect-deeplink" }
]
}
4 changes: 4 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
{ "path": "packages/connect" },
{ "path": "packages/connect-analytics" },
{ "path": "packages/connect-common" },
{ "path": "packages/connect-deeplink" },
{ "path": "packages/connect-explorer" },
{
"path": "packages/connect-explorer-theme"
Expand Down Expand Up @@ -187,6 +188,9 @@
{
"path": "packages/connect-examples/webextension-mv3-sw-ts"
},
{
"path": "packages/connect-examples/deeplink-expo"
},
{
"path": "packages/connect-examples/electron-main-process"
},
Expand Down
29 changes: 27 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -10431,7 +10431,7 @@ __metadata:
"@trezor/connect": "workspace:*"
"@trezor/styles": "workspace:*"
"@trezor/theme": "workspace:*"
expo-linking: "npm:^6.3.1"
expo-linking: "npm:6.3.1"
expo-navigation-bar: "npm:3.0.7"
expo-system-ui: "npm:3.0.7"
react: "npm:18.2.0"
Expand Down Expand Up @@ -11197,6 +11197,15 @@ __metadata:
languageName: unknown
linkType: soft

"@trezor/connect-deeplink@workspace:*, @trezor/connect-deeplink@workspace:packages/connect-deeplink":
version: 0.0.0-use.local
resolution: "@trezor/connect-deeplink@workspace:packages/connect-deeplink"
dependencies:
"@trezor/connect": "workspace:^"
"@trezor/utils": "workspace:^"
languageName: unknown
linkType: soft

"@trezor/connect-explorer-theme@workspace:^, @trezor/connect-explorer-theme@workspace:packages/connect-explorer-theme":
version: 0.0.0-use.local
resolution: "@trezor/connect-explorer-theme@workspace:packages/connect-explorer-theme"
Expand Down Expand Up @@ -17975,6 +17984,22 @@ __metadata:
languageName: node
linkType: hard

"connect-deeplink-expo-example@workspace:packages/connect-examples/deeplink-expo":
version: 0.0.0-use.local
resolution: "connect-deeplink-expo-example@workspace:packages/connect-examples/deeplink-expo"
dependencies:
"@babel/core": "npm:^7.20.0"
"@trezor/connect-deeplink": "workspace:*"
"@types/react": "npm:18.2.45"
expo: "npm:51.0.31"
expo-linking: "npm:6.3.1"
expo-status-bar: "npm:1.12.1"
react: "npm:18.2.0"
react-native: "npm:0.75.2"
typescript: "npm:^5.3.3"
languageName: unknown
linkType: soft

"connect-example-electron-main@workspace:packages/connect-examples/electron-main-process":
version: 0.0.0-use.local
resolution: "connect-example-electron-main@workspace:packages/connect-examples/electron-main-process"
Expand Down Expand Up @@ -22434,7 +22459,7 @@ __metadata:
languageName: node
linkType: hard

"expo-linking@npm:^6.3.1":
"expo-linking@npm:6.3.1, expo-linking@npm:^6.3.1":
version: 6.3.1
resolution: "expo-linking@npm:6.3.1"
dependencies:
Expand Down

0 comments on commit c727023

Please sign in to comment.