diff --git a/apps/box/android/app/src/main/AndroidManifest.xml b/apps/box/android/app/src/main/AndroidManifest.xml index f2e256c7..1485773f 100644 --- a/apps/box/android/app/src/main/AndroidManifest.xml +++ b/apps/box/android/app/src/main/AndroidManifest.xml @@ -2,6 +2,8 @@ xmlns:tools="http://schemas.android.com/tools"> + + - + + + diff --git a/apps/box/package.json b/apps/box/package.json index efc51f4f..950e1e5e 100644 --- a/apps/box/package.json +++ b/apps/box/package.json @@ -7,6 +7,7 @@ "@functionland/react-native-fula": "*", "@gorhom/bottom-sheet": "*", "@metamask/sdk-react": "*", + "@notifee/react-native": "*", "@react-native-async-storage/async-storage": "*", "@react-native-clipboard/clipboard": "*", "@react-native-community/netinfo": "*", diff --git a/apps/box/src/navigation/navigationConfig.ts b/apps/box/src/navigation/navigationConfig.ts index 48d57cc1..6d6144cb 100644 --- a/apps/box/src/navigation/navigationConfig.ts +++ b/apps/box/src/navigation/navigationConfig.ts @@ -89,7 +89,7 @@ export type SettingsStackParamList = { export type InitialSetupStackParamList = { [Routes.Welcome]: undefined; [Routes.LinkPassword]: undefined; - [Routes.ConnectToWallet]: { password: string }; + [Routes.ConnectToWallet]: undefined; [Routes.ConnectToBlox]: undefined; [Routes.ConnectToExistingBlox]: undefined; [Routes.ConnectToWifi]: undefined; diff --git a/apps/box/src/screens/InitialSetup/ConnectToWallet.screen.tsx b/apps/box/src/screens/InitialSetup/ConnectToWallet.screen.tsx index eb051e2b..04b59b20 100644 --- a/apps/box/src/screens/InitialSetup/ConnectToWallet.screen.tsx +++ b/apps/box/src/screens/InitialSetup/ConnectToWallet.screen.tsx @@ -1,326 +1,60 @@ -import '@walletconnect/react-native-compat'; -import React, { useEffect, useState } from 'react'; -import { ActivityIndicator } from 'react-native'; +import React from 'react'; import { FxBox, FxButton, - FxPicker, - FxPickerItem, FxProgressBar, FxSafeAreaBox, FxText, - useToast, } from '@functionland/component-library'; import { useInitialSetupNavigation } from '../../hooks/useTypedNavigation'; import { Routes } from '../../navigation/navigationConfig'; -import { useUserProfileStore } from '../../stores/useUserProfileStore'; -import { Helper } from '../../utils'; -import { WalletDetails } from '../../components/WalletDetails'; -import { useSDK } from '@metamask/sdk-react'; -import { useLogger } from '../../hooks'; -import { - chains, - goerliChainId, - mumbaiChainId, - ethereumChainId, -} from '../../utils/walletConnectConifg'; +import notifee from '@notifee/react-native'; export const ConnectToWalletScreen = () => { const navigation = useInitialSetupNavigation(); - const [networkConfirmed, setNetworkConfirmed] = useState(false); - const [selectedChainId, setSelectedChainId] = useState(mumbaiChainId); // Mumbai Polygon Testnet - const { queueToast } = useToast(); - const { account, chainId, provider, sdk, connected, connecting } = useSDK(); - - const [walletId, signiture, password, setWalletId] = useUserProfileStore( - (state) => [ - state.walletId, - state.signiture, - state.password, - state.setWalletId, - ] - ); - const switchChain = async (_chainId: string) => { - return await provider?.request({ - method: 'wallet_switchEthereumChain', - params: [ - { - chainId: _chainId, + const allowNotifications = async () => { + await notifee.requestPermission(); + notifee.registerForegroundService(async () => {}); + await notifee.createChannel({ + id: 'sticky', + name: 'Sticky Channel' + }) + await notifee.displayNotification({ + id: 'wallet', + title: 'warmup', + body: 'warmup', + android: { + progress: { + indeterminate: true }, - ], - }); - }; - - const addChain = async (_chainId: string) => { - return await provider?.request({ - method: 'wallet_addEthereumChain', - params: [ - { - ...chains[_chainId], + pressAction: { + id: 'default' }, - ], - }); - }; - - const logger = useLogger(); - useEffect(() => { - console.log('provider', provider); - if (!provider || !account) return; - if (account !== walletId) { - setWalletId(account, true); - } - }, [provider, account]); - - const handleConnect = async () => { - //Added a `setNetwork` here as we do not need to select chain here anymoe - try { - await sdk?.connect(); - } catch (err) { - console.log(err); - logger.logError('handleConnect', err); - queueToast({ - title: 'Metamask linking error', - message: err.toString(), - type: 'error', - autoHideDuration: 3000, - }); - disconnectWallet(); - } - }; - - useEffect(() => { - /*if (connected && chainId !== undefined && chainId !== selectedChainId && networkConfirmed) { - setNetworkConfirmed(false); - let err = 'chainId does not match the selected chain'; - console.log(err); - logger.logError('chianId check', err); - queueToast({ - title: 'Metamask chain error', - message: err, - type: 'error', - autoHideDuration: 3000, - }); - return; - }*/ - if (connected && chainId) { - setNetworkConfirmed(true); - } - }, [chainId, connected]); - - const handleNetwork = async () => { - if (chainId !== selectedChainId) { - try { - await addChain(selectedChainId); - } catch (e) { - console.log( - '###################### chain could not be added. trying switch: ', - e - ); - try { - await switchChain(selectedChainId); - // eslint-disable-next-line no-catch-shadow - } catch (e) { - console.log(e); - logger.logError('handleNetwork, add chain', e); - queueToast({ - title: 'Error adding chain to MetaMask', - message: JSON.stringify(e.toString()), - type: 'error', - autoHideDuration: 3000, - }); - disconnectWallet(); - return; - } + ongoing: true, + asForegroundService: true, + channelId: 'sticky' } - } - setNetworkConfirmed(true); - }; - - const disconnectWallet = () => { - setNetworkConfirmed(false); - sdk?.terminate(); - }; - const handleLinkPassword = () => { - provider - ?.request({ - method: 'wallet_requestPermissions ', - params: [], - }) - .then((res) => { - console.log('handlelink wallet request'); - console.log(res); - navigation.navigate(Routes.LinkPassword); - }) - .catch((e) => { - console.log(e); - navigation.navigate(Routes.LinkPassword); - }); - }; + }) + notifee.stopForegroundService(); + navigation.navigate(Routes.LinkPassword); + } - const handleConnectToBlox = () => { - navigation.navigate(Routes.ConnectToBlox); - }; - const handleConnectToExistingBlox = () => { - navigation.navigate(Routes.ConnectToExistingBlox); - }; - - const handleOnBluetoothCommand = () => { - navigation.navigate(Routes.BluetoothCommands); - }; - const handleSkipToManulaSetup = () => { - navigation.navigate(Routes.SetBloxAuthorizer, { isManualSetup: true }); - }; return ( - - - {provider && chainId && networkConfirmed ? ( - <> - - {password && signiture ? ( - - - Your DID - - - {Helper.getMyDID(password, signiture)} - - - ) : null} - - ) : ( - <> - - Connect To Wallet - - {chainId && !networkConfirmed && ( - - - Select network - - - setSelectedChainId(itemValue) - } - > - - - - - - - )} - - )} - - {!networkConfirmed ? ( - { - queueToast({ - title: 'Provider is not ready', - message: 'Provider is being prepared', - type: 'error', - autoHideDuration: 3000, - }); - } - } - > - {provider ? ( - chainId ? ( - 'Confirm' - ) : connecting ? ( - 'Disconnect' - ) : ( - 'Connect to Wallet' - ) - ) : ( - - )} - - ) : !signiture && chainId ? ( - {}} - > - {provider ? 'Next' : } - - ) : ( - <> - - Connect to new Blox - - - Reconnect to existing Blox - - {logger.isDebugModeEnable && ( - - Bluetooth commands - - )} - - Skip to manual setup - - - )} - {provider && connected && ( - - Disconnect wallet - - )} + + + Connect To Wallet + + App needs notification permission to connect your wallet and perform data sync. Tap allow in the next prompt. + + Allow Notifications + - ); }; diff --git a/apps/box/src/screens/InitialSetup/LinkPassword.screen.tsx b/apps/box/src/screens/InitialSetup/LinkPassword.screen.tsx index f4d678a7..39652efa 100644 --- a/apps/box/src/screens/InitialSetup/LinkPassword.screen.tsx +++ b/apps/box/src/screens/InitialSetup/LinkPassword.screen.tsx @@ -20,6 +20,8 @@ import { useUserProfileStore } from '../../stores/useUserProfileStore'; import { KeyChain } from '../../utils'; import { ActivityIndicator } from 'react-native'; import { useSDK } from '@metamask/sdk-react'; +import notifee from '@notifee/react-native'; + export const LinkPasswordScreen = () => { const navigation = useInitialSetupNavigation(); const { account, sdk, provider, connected, error, status, rpcHistory } = @@ -45,12 +47,38 @@ export const LinkPasswordScreen = () => { }, [signiture, password]); const personalSign = async (msg: string) => { - return await sdk?.connectAndSign({ - msg: msg, + let signature = ''; + let resolveSigned = () => {}; + const signed = new Promise(resolve => { + resolveSigned = resolve; + }) + + notifee.registerForegroundService(() => signed); + await notifee.displayNotification({ + id: 'wallet', + title: 'Connecting Wallet...', + body: 'Wallet connection in progress, click to move back to the app', + android: { + progress: { + indeterminate: true + }, + pressAction: { + id: 'default' + }, + ongoing: true, + asForegroundService: true, + channelId: 'sticky' + } }); + signature = await sdk?.connectAndSign({ msg }) as string; + resolveSigned(); + notifee.stopForegroundService(); + + return signature; }; - const disconnectWallet = () => { + const disconnectWallet = () => { + notifee.stopForegroundService(); setLinking(false); sdk?.terminate(); }; diff --git a/apps/box/src/screens/InitialSetup/Welcome.screen.tsx b/apps/box/src/screens/InitialSetup/Welcome.screen.tsx index a174d931..2a98cb35 100644 --- a/apps/box/src/screens/InitialSetup/Welcome.screen.tsx +++ b/apps/box/src/screens/InitialSetup/Welcome.screen.tsx @@ -37,7 +37,7 @@ export const WelcomeScreen = () => { // } else { // navigation.navigate(Routes.ConnectToWallet); // } - navigation.navigate(Routes.LinkPassword); + navigation.navigate(Routes.ConnectToWallet); }; const renderContent = () => { diff --git a/package.json b/package.json index dd23b8ff..048514da 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@functionland/react-native-fula": "1.44.1", "@gorhom/bottom-sheet": "^4.5.1", "@metamask/sdk-react": "^0.14.2", + "@notifee/react-native": "^7.8.2", "@react-native-async-storage/async-storage": "^1.21.0", "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/netinfo": "^11.1.1", diff --git a/yarn.lock b/yarn.lock index f29f79c0..9320067d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3079,6 +3079,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@notifee/react-native@^7.8.2": + version "7.8.2" + resolved "https://registry.yarnpkg.com/@notifee/react-native/-/react-native-7.8.2.tgz#72d3199ae830b4128ddaef3c1c2f11604759c9c4" + integrity sha512-VG4IkWJIlOKqXwa3aExC3WFCVCGCC9BA55Ivg0SMRfEs+ruvYy/zlLANcrVGiPtgkUEryXDhA8SXx9+JcO8oLA== + "@npmcli/fs@^1.0.0": version "1.1.1" resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.1.1.tgz#72f719fe935e687c56a4faecf3c03d06ba593257"