feature(wallet-mobile): Redirect universal & deeplinks

apps/wallet-mobile/android/app/src/main/AndroidManifest.xml

@@ -21,15 +21,13 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="yoroi"/>
+        <data android:scheme="yoroi" android:host="yoroi-wallet.com" android:pathPrefix="/w1" />
       </intent-filter>
       <intent-filter android:autoVerify="true">
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="https"/>
-        <data android:host="yoroi-wallet.com" android:pathPrefix="/w1" />
-
+        <data android:scheme="https" android:host="yoroi-wallet.com" android:pathPrefix="/w1" />
       </intent-filter>
 
     </activity>

apps/wallet-mobile/index.js

@@ -4,11 +4,13 @@ import 'react-native-gesture-handler' // required by react-navigation
 import './global'
 import './src/i18n/polyfills' // https://formatjs.io/docs/polyfills
 import BigNumber from 'bignumber.js'
+import {enableMapSet} from 'immer'
 
 import {AppRegistry} from 'react-native'
 
 import {name} from './app.json'
 import {YoroiApp} from './src/YoroiApp'
 
+enableMapSet()
 BigNumber.config({DECIMAL_PLACES: 19, EXPONENTIAL_AT: [-10, 40]})
 AppRegistry.registerComponent(name, () => YoroiApp)

apps/wallet-mobile/package.json

@@ -125,7 +125,7 @@
     "@yoroi/api": "1.5.1",
     "@yoroi/common": "1.5.1",
     "@yoroi/exchange": "2.0.0",
-    "@yoroi/links": "1.5.1",
+    "@yoroi/links": "1.5.3",
     "@yoroi/resolver": "2.0.4",
     "@yoroi/staking": "1.5.1",
     "@yoroi/swap": "1.5.2",

apps/wallet-mobile/src/AppNavigator.tsx

@@ -15,6 +15,7 @@ import {ModalProvider} from './components/Modal/ModalContext'
 import {ModalScreen} from './components/Modal/ModalScreen'
 import {AgreementChangedNavigator, InitializationNavigator} from './features/Initialization'
 import {LegalAgreement, useLegalAgreement} from './features/Initialization/common'
+import {useDeepLinkWatcher} from './features/Links/common/useDeepLinkWatcher'
 import {CONFIG, LINKING_CONFIG, LINKING_PREFIXES} from './legacy/config'
 import {DeveloperScreen} from './legacy/DeveloperScreen'
 import {AppRoutes} from './navigation'
@@ -27,9 +28,11 @@ const Stack = createStackNavigator<AppRoutes>()
 const navRef = React.createRef<NavigationContainerRef<ReactNavigation.RootParamList>>()
 
 export const AppNavigator = () => {
+  useDeepLinkWatcher()
   const strings = useStrings()
   const [routeName, setRouteName] = React.useState<string>()
 
+  // NOTE: mind some routes are handled by the event listener
   const enableDeepLink = routeName === 'history-list'
 
   const linking = {

apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx

@@ -24,7 +24,6 @@ import {Boundary, Icon, Spacer} from '../components'
 import {claimApiMaker} from '../features/Claim/module/api'
 import {ClaimProvider} from '../features/Claim/module/ClaimProvider'
 import {ShowSuccessScreen} from '../features/Claim/useCases/ShowSuccessScreen'
-import {useNavigateTo} from '../features/Exchange/common/useNavigateTo'
 import {CreateExchangeOrderScreen} from '../features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen'
 import {SelectProviderFromListScreen} from '../features/Exchange/useCases/SelectProviderFromListScreen/SelectProviderFromListScreen'
 import {ShowExchangeResultOrderScreen} from '../features/Exchange/useCases/ShowExchangeResultOrderScreen/ShowExchangeResultOrderScreen'
@@ -126,8 +125,6 @@ export const TxHistoryNavigator = () => {
   // navigator components
   const headerRightHistory = React.useCallback(() => <HeaderRightHistory />, [])
 
-  const navigateTo = useNavigateTo()
-
   // exchange
   const exchangeManager = React.useMemo(() => {
     const api = exchangeApiMaker({
@@ -254,9 +251,8 @@ export const TxHistoryNavigator = () => {
                         headerShown: false,
                       }}
                       name="exchange-result"
-                    >
-                      {() => <ShowExchangeResultOrderScreen onClose={navigateTo.exchangeOpenOrder} />}
-                    </Stack.Screen>
+                      component={ShowExchangeResultOrderScreen}
+                    />
 
                     <Stack.Screen
                       name="swap-start-swap"

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -1,6 +1,7 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
 import {RouteProp, useFocusEffect} from '@react-navigation/native'
 import {createStackNavigator} from '@react-navigation/stack'
+import {useLinks} from '@yoroi/links'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {Keyboard, Platform} from 'react-native'
@@ -13,9 +14,8 @@ import {MenuNavigator} from './features/Menu'
 import {SettingsScreenNavigator} from './features/Settings'
 import {GovernanceNavigator} from './features/Staking/Governance'
 import {ToggleAnalyticsSettingsNavigator} from './features/ToggleAnalyticsSettings'
-import {useInitialLink} from './IntialLinkManagerProvider'
 import {useMetrics} from './metrics/metricsManager'
-import {hideTabBarForRoutes, useWalletNavigation, WalletStackRoutes, WalletTabRoutes} from './navigation'
+import {hideTabBarForRoutes, WalletStackRoutes, WalletTabRoutes} from './navigation'
 import {NftDetailsNavigator} from './NftDetails/NftDetailsNavigator'
 import {NftsNavigator} from './Nfts/NftsNavigator'
 import {SearchProvider} from './Search/SearchContext'
@@ -154,21 +154,32 @@ const WalletTabNavigator = () => {
 
 const Stack = createStackNavigator<WalletStackRoutes>()
 export const WalletNavigator = () => {
-  const {initialUrl} = useInitialLink()
-  const {resetToWalletSelection} = useWalletNavigation()
+  const initialRouteName = useInitialRouteName()
+
+  // initialRoute doens't update the state of the navigator, only at first render
+  // https://reactnavigation.org/docs/auth-flow/
+  if (initialRouteName === 'exchange-result') {
+    return (
+      <Stack.Navigator
+        initialRouteName={initialRouteName}
+        screenOptions={{
+          headerShown: false /* used only for transition */,
+          detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
+        }}
+      >
+        <Stack.Screen name="exchange-result" component={ShowExchangeResultOrderScreen} />
+      </Stack.Navigator>
+    )
+  }
 
   return (
     <Stack.Navigator
-      initialRouteName={initialUrl !== null ? 'exchange-result' : 'wallet-selection'}
+      initialRouteName={initialRouteName}
       screenOptions={{
         headerShown: false /* used only for transition */,
         detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
       }}
     >
-      <Stack.Screen name="exchange-result">
-        {() => <ShowExchangeResultOrderScreen onClose={resetToWalletSelection} />}
-      </Stack.Screen>
-
       <Stack.Screen name="wallet-selection" component={WalletSelectionScreen} />
 
       <Stack.Screen name="main-wallet-routes" component={WalletTabNavigator} />
@@ -186,6 +197,13 @@ export const WalletNavigator = () => {
   )
 }
 
+const useInitialRouteName = () => {
+  const {action} = useLinks()
+  const routeName: keyof WalletStackRoutes =
+    action?.info.useCase === 'order/show-create-result' ? 'exchange-result' : 'wallet-selection'
+  return routeName
+}
+
 const messages = defineMessages({
   transactionsButton: {
     id: 'components.common.navigation.transactionsButton',

apps/wallet-mobile/src/YoroiApp.tsx

@@ -1,4 +1,5 @@
 import {AsyncStorageProvider} from '@yoroi/common'
+import {LinksProvider} from '@yoroi/links'
 import {ThemeProvider} from '@yoroi/theme'
 import React from 'react'
 import {LogBox, Platform, StyleSheet, UIManager} from 'react-native'
@@ -14,7 +15,6 @@ import {ErrorBoundary} from './components/ErrorBoundary'
 import {CurrencyProvider} from './features/Settings/Currency/CurrencyContext'
 import {LanguageProvider} from './i18n'
 import {InitApp} from './InitApp'
-import {InitialLinkProvider} from './IntialLinkManagerProvider'
 import {CONFIG} from './legacy/config'
 import {setLogLevel} from './legacy/logging'
 import {makeMetricsManager, MetricsProvider} from './metrics/metricsManager'
@@ -62,9 +62,9 @@ export const YoroiApp = () => {
                           <AuthProvider>
                             <SelectedWalletMetaProvider>
                               <SelectedWalletProvider>
-                                <InitialLinkProvider>
+                                <LinksProvider>
                                   <InitApp />
-                                </InitialLinkProvider>
+                                </LinksProvider>
                               </SelectedWalletProvider>
                             </SelectedWalletMetaProvider>
                           </AuthProvider>

apps/wallet-mobile/src/features/Exchange/common/useNavigateTo.tsx

@@ -35,13 +35,3 @@ export const useNavigateTo = () => {
       }),
   }).current
 }
-
-export type ExchangeInitRoutes = {
-  exchange: {
-    coin: string
-    coinAmount: number
-    fiat: number
-    fiatAmount: number
-    status: string
-  }
-}

apps/wallet-mobile/src/features/Exchange/useCases/ShowExchangeResultOrderScreen/ShowExchangeResultOrderScreen.stories.tsx

@@ -1,73 +1,54 @@
-import {NavigationRouteContext, RouteProp} from '@react-navigation/native'
-import {actions} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
 import {exchangeDefaultState, ExchangeProvider, successManagerMock} from '@yoroi/exchange'
-import {produce} from 'immer'
+import {LinksProvider} from '@yoroi/links'
 import React from 'react'
 
 import {ModalProvider} from '../../../../components'
-import {InitialLinkProvider, useInitialLink} from '../../../../IntialLinkManagerProvider'
 import {SelectedWalletProvider} from '../../../../SelectedWallet'
 import {mocks as walletMocks} from '../../../../yoroi-wallets/mocks'
-import {ExchangeInitRoutes} from '../../common/useNavigateTo'
 import {ShowExchangeResultOrderScreen} from './ShowExchangeResultOrderScreen'
 
-storiesOf('Exchange ShowExchangeResultOrderScreen', module)
-  .addDecorator((story) => <InitialLinkProvider>{story()}</InitialLinkProvider>)
-  .add('no params', () => <Init />)
-  .add('no info', () => <ShowExchangeResultOrderScreen onClose={() => actions('onClose')} />)
-  .add('with params', () => <WithParams />)
-
-const Init = () => {
-  const {setInitialUrl} = useInitialLink()
-  const initialState = produce(exchangeDefaultState, (draft) => {
-    draft.orderType = 'buy'
-  })
-
-  React.useEffect(() => {
-    setInitialUrl(
-      'yoroi://ramp-on-off/result?&status=success&fiatAmount=10000&coinAmount=5000&coin=ADA&fiat=USD&provider=encryptus',
-    )
-  }, [setInitialUrl])
+storiesOf('Exchange ShowExchangeResultOrderScreen', module).add('with deep link data', () => <WithDeepLinkData />)
 
+const WithDeepLinkData = () => {
   return (
     <SelectedWalletProvider wallet={{...walletMocks.wallet}}>
       <ModalProvider>
-        <ExchangeProvider manager={successManagerMock} initialState={{...initialState, providerId: 'encryptus'}}>
-          <ShowExchangeResultOrderScreen onClose={() => actions('onClose')} />
-        </ExchangeProvider>
+        <LinksProvider
+          initialState={{
+            authorizations: new Map(),
+            action: {
+              info: {
+                version: 1,
+                feature: 'exchange',
+                useCase: 'order/show-create-result',
+                params: {
+                  coin: 'ADA',
+                  coinAmount: 1,
+                  fiat: 'USD',
+                  fiatAmount: 1,
+                  provider: 'encryptus',
+                  status: 'success',
+                  appId: 'a386e806-92f4-4796-ad61-7a1485b6e745',
+                  authorization: 'fca6fc26-abc6-4cdc-bdce-5910cc3c0a01',
+                  isSandbox: true,
+                  message: 'Your order number 131234 is under processing, bare with us.',
+                  redirectTo: 'https://yoroi-wallet.com/about',
+                  orderType: 'buy',
+                },
+              },
+              isTrusted: false,
+            },
+          }}
+        >
+          <ExchangeProvider
+            manager={successManagerMock}
+            initialState={{...exchangeDefaultState, providerId: 'encryptus'}}
+          >
+            <ShowExchangeResultOrderScreen />
+          </ExchangeProvider>
+        </LinksProvider>
       </ModalProvider>
     </SelectedWalletProvider>
   )
 }
-
-const WithParams = () => {
-  const {setInitialUrl} = useInitialLink()
-  const params: RouteProp<ExchangeInitRoutes, 'exchange'>['params'] = {
-    coin: 'ADA',
-    coinAmount: 100,
-    fiat: 990,
-    fiatAmount: 199,
-    status: 'success',
-  }
-  const initialState = produce(exchangeDefaultState, (draft) => {
-    draft.orderType = 'buy'
-  })
-
-  React.useEffect(() => {
-    setInitialUrl(
-      'yoroi://ramp-on-off/result?&status=success&fiatAmount=10000&coinAmount=5000&coin=ADA&fiat=USD&provider=encryptus',
-    )
-  }, [setInitialUrl])
-  return (
-    <NavigationRouteContext.Provider value={{key: 'key', name: 'name', params}}>
-      <SelectedWalletProvider wallet={{...walletMocks.wallet}}>
-        <ModalProvider>
-          <ExchangeProvider manager={successManagerMock} initialState={{...initialState, providerId: 'encryptus'}}>
-            <ShowExchangeResultOrderScreen onClose={() => actions('onClose')} />
-          </ExchangeProvider>
-        </ModalProvider>
-      </SelectedWalletProvider>
-    </NavigationRouteContext.Provider>
-  )
-}