feat(wallet-mobile): Add dApp Explorer feature flag and rename variables

apps/wallet-mobile/src/Dashboard/Dashboard.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {useNavigation} from '@react-navigation/native'
+import {StackNavigationProp} from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
@@ -15,7 +16,7 @@ import {useIsGovernanceFeatureEnabled} from '../features/Staking/Governance'
 import {useSelectedWallet} from '../features/WalletManager/Context'
 import globalMessages from '../i18n/global-messages'
 import {Modal} from '../legacy/Modal'
-import {useWalletNavigation} from '../navigation'
+import {DashboardRoutes, useWalletNavigation} from '../navigation'
 import {isEmptyString} from '../utils/utils'
 import {getCardanoNetworkConfigById} from '../yoroi-wallets/cardano/networks'
 import {getCardanoBaseConfig} from '../yoroi-wallets/cardano/utils'
@@ -149,20 +150,10 @@ export const Dashboard = () => {
 }
 
 const useNavigateTo = () => {
-  const navigation = useNavigation()
+  const navigation = useNavigation<StackNavigationProp<DashboardRoutes>>()
 
   return {
-    stakingCenter: () => {
-      navigation.navigate('app-root', {
-        screen: 'staking-dashboard',
-        params: {
-          screen: 'staking-center',
-          params: {
-            screen: 'staking-center-main',
-          },
-        },
-      })
-    },
+    stakingCenter: () => navigation.navigate('staking-center', {screen: 'staking-center-main'}),
   }
 }
 

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

@@ -1,6 +1,6 @@
 import {useFocusEffect} from '@react-navigation/native'
 import {useTheme} from '@yoroi/theme'
-import React, {useState} from 'react'
+import * as React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {LayoutAnimation, StyleSheet, View} from 'react-native'
 
@@ -27,9 +27,9 @@ export const TxHistory = () => {
   const strings = useStrings()
   const styles = useStyles()
   const wallet = useSelectedWallet()
-  const [showWarning, setShowWarning] = useState(isByron(wallet.walletImplementationId))
+  const [showWarning, setShowWarning] = React.useState(isByron(wallet.walletImplementationId))
 
-  const [activeTab, setActiveTab] = useState<Tab>('transactions')
+  const [activeTab, setActiveTab] = React.useState<Tab>('transactions')
 
   const onSelectTab = (tab: Tab) => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -39,7 +39,7 @@ export const TxHistory = () => {
   const {sync, isLoading} = useSync(wallet)
   useFocusEffect(React.useCallback(() => sync(), [sync]))
 
-  const [expanded, setExpanded] = useState(true)
+  const [expanded, setExpanded] = React.useState(true)
   const onScroll = useOnScroll({
     onScrollUp: () => setExpanded(true),
     onScrollDown: () => setExpanded(false),

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -22,12 +22,12 @@ import {
 import {SelectWalletFromList} from './features/SetupWallet/useCases/SelectWalletFromList'
 import {GovernanceNavigator} from './features/Staking/Governance'
 import {ToggleAnalyticsSettingsNavigator} from './features/ToggleAnalyticsSettings'
+import {CONFIG} from './legacy/config'
 import {useMetrics} from './metrics/metricsManager'
 import {defaultStackNavigationOptions, hideTabBarForRoutes, WalletStackRoutes, WalletTabRoutes} from './navigation'
 import {NftDetailsNavigator} from './NftDetails/NftDetailsNavigator'
 import {NftsNavigator} from './Nfts/NftsNavigator'
 import {SearchProvider} from './Search/SearchContext'
-import {theme} from './theme'
 import {TxHistoryNavigator} from './TxHistory'
 import {useWalletManager} from './wallet-manager/WalletManagerContext'
 import {useAuthSetting, useIsAuthOsSupported} from './yoroi-wallets/auth'
@@ -37,7 +37,7 @@ const Tab = createBottomTabNavigator<WalletTabRoutes>()
 const WalletTabNavigator = () => {
   const strings = useStrings()
   const {colors} = useStyles()
-  const initialRoute = /* isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' :*/ 'history'
+  const initialRoute = 'history'
 
   const [isKeyboardOpen, setIsKeyboardOpen] = React.useState(false)
 
@@ -115,7 +115,23 @@ const WalletTabNavigator = () => {
           )}
         </Tab.Screen>
 
-        {/* {isHaskellShelley(wallet.walletImplementationId) && (
+        {CONFIG.DAPP_EXPLORER_ENABLED ? (
+          <Tab.Screen
+            name="discover"
+            options={({route}: {route: RouteProp<WalletTabRoutes, 'discover'>}) => ({
+              tabBarIcon: ({focused}) => <Icon.Discover size={28} color={focused ? colors.active : colors.inactive} />,
+              tabBarLabel: strings.discoverTabBarLabel,
+              tabBarTestID: 'discoverTabBarButton',
+              tabBarStyle: hideTabBarForRoutes(route),
+            })}
+          >
+            {() => (
+              <SearchProvider>
+                <DiscoverNavigator />
+              </SearchProvider>
+            )}
+          </Tab.Screen>
+        ) : (
           <Tab.Screen
             name="staking-dashboard"
             component={DashboardNavigator}
@@ -127,28 +143,7 @@ const WalletTabNavigator = () => {
               tabBarTestID: 'stakingTabBarButton',
             }}
           />
-        )} */}
-
-        <Tab.Screen
-          name="discover"
-          options={({route}: {route: RouteProp<WalletTabRoutes, 'discover'>}) => ({
-            tabBarIcon: ({focused}) => (
-              <Icon.Discover
-                size={28}
-                color={focused ? theme.COLORS.NAVIGATION_ACTIVE : theme.COLORS.NAVIGATION_INACTIVE}
-              />
-            ),
-            tabBarLabel: strings.discoverTabBarLabel,
-            tabBarTestID: 'discoverTabBarButton',
-            tabBarStyle: hideTabBarForRoutes(route),
-          })}
-        >
-          {() => (
-            <SearchProvider>
-              <DiscoverNavigator />
-            </SearchProvider>
-          )}
-        </Tab.Screen>
+        )}
 
         <Tab.Screen
           name="menu"

apps/wallet-mobile/src/components/Icon/Backward.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Svg, {Path} from 'react-native-svg'
 
 type Props = {

apps/wallet-mobile/src/features/Discover/BrowserNavigator.tsx

@@ -1,12 +1,12 @@
 import {createStackNavigator} from '@react-navigation/stack'
 import {useTheme} from '@yoroi/theme'
-import React from 'react'
+import * as React from 'react'
 import {StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import {BrowserRoutes} from 'src/navigation'
 
-import {BrowseDappScreen} from './useCases/BrowseDappScreen/BrowseDappScreen'
-import {BrowseSearchDappScreen} from './useCases/BrowseSearchDappScreen/BrowseSearchDappScreen'
+import {BrowseDappScreen} from './useCases/BrowseDapp/BrowseDappScreen'
+import {SearchDappInBrowserScreen} from './useCases/SearchDappInBrowser/SearchDappInBrowserScreen'
 
 const Tab = createStackNavigator<BrowserRoutes>()
 
@@ -21,9 +21,9 @@ export const BrowserNavigator = () => {
           headerShown: false,
         }}
       >
-        <Tab.Screen name="browser-view" component={BrowseDappScreen} />
+        <Tab.Screen name="discover-browse-dapp" component={BrowseDappScreen} />
 
-        <Tab.Screen name="browser-search" component={BrowseSearchDappScreen} />
+        <Tab.Screen name="discover-search-dapp-in-browser" component={SearchDappInBrowserScreen} />
       </Tab.Navigator>
     </SafeAreaView>
   )

apps/wallet-mobile/src/features/Discover/DiscoverNavigator.tsx

@@ -6,7 +6,7 @@ import {defaultStackNavigationOptions, DiscoverRoutes} from '../../navigation'
 import {BrowserNavigator} from './BrowserNavigator'
 import {BrowserProvider} from './common/BrowserProvider'
 import {useStrings} from './common/useStrings'
-import {DiscoverListScreen} from './useCases/DiscoverListScreen/DiscoverListScreen'
+import {SelectDappFromListScreen} from './useCases/SelectDappFromList/SelectDappFromListScreen'
 
 const Stack = createStackNavigator<DiscoverRoutes>()
 
@@ -23,23 +23,15 @@ export const DiscoverNavigator = () => {
           detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
           gestureEnabled: true,
         }}
-        initialRouteName="discover-list"
+        initialRouteName="discover-select-dapp-from-list"
       >
         <Stack.Screen
-          name="discover-list"
-          component={DiscoverListScreen}
-          options={{
-            title: strings.discoverTitle,
-          }}
+          name="discover-select-dapp-from-list"
+          component={SelectDappFromListScreen}
+          options={{title: strings.discoverTitle}}
         />
 
-        <Stack.Screen
-          name="browser"
-          component={BrowserNavigator}
-          options={{
-            headerShown: false,
-          }}
-        />
+        <Stack.Screen name="discover-browser" component={BrowserNavigator} options={{headerShown: false}} />
       </Stack.Navigator>
     </BrowserProvider>
   )

apps/wallet-mobile/src/features/Discover/common/BrowserProvider.tsx

@@ -1,6 +1,6 @@
 import {invalid, useAsyncStorage} from '@yoroi/common'
 import {produce} from 'immer'
-import React, {createContext, ReactNode, useContext, useEffect} from 'react'
+import * as React from 'react'
 
 import {useSelectedWallet} from '../../../features/WalletManager/Context'
 
@@ -37,7 +37,7 @@ type BrowserContextState = Readonly<{
 
 export type BrowserProviderContext = BrowserContextState & BrowserContextActions
 
-const BrowserContext = createContext<BrowserProviderContext>({
+const BrowserContext = React.createContext<BrowserProviderContext>({
   ...initialBrowserState,
   ...defaultBrowserActions,
 })
@@ -49,7 +49,7 @@ export const BrowserProvider = ({
   children,
   initialState,
 }: {
-  children: ReactNode
+  children: React.ReactNode
   initialState?: Partial<BrowserContextState>
 }) => {
   const storage = useAsyncStorage()
@@ -61,12 +61,12 @@ export const BrowserProvider = ({
     ...initialState,
   })
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (browserState.status === 'waiting') return
     browserStorage.setItem(storageBrowserState, JSON.stringify(browserState))
   }, [browserState, browserStorage])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (browserState.status === 'active') return
     browserStorage.getItem(storageBrowserState).then((browserStorage) => {
       if (Boolean(browserStorage) && typeof browserStorage === 'string') {
@@ -106,7 +106,7 @@ export const BrowserProvider = ({
 }
 
 export const useBrowser = () =>
-  useContext(BrowserContext) ?? invalid('useBrowser: needs to be wrapped in a BrowserProvider')
+  React.useContext(BrowserContext) ?? invalid('useBrowser: needs to be wrapped in a BrowserProvider')
 
 enum BrowserAction {
   AddBrowserTab = 'addBrowserTab',

apps/wallet-mobile/src/features/Discover/common/LabelCategoryDApp.stories.tsx

@@ -1,5 +1,5 @@
 import {storiesOf} from '@storybook/react-native'
-import React from 'react'
+import * as React from 'react'
 import {View} from 'react-native'
 
 import {LabelCategoryDApp} from './LabelCategoryDApp'

apps/wallet-mobile/src/features/Discover/common/LabelCategoryDApp.tsx

@@ -1,5 +1,5 @@
 import {useTheme} from '@yoroi/theme'
-import React from 'react'
+import * as React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 

apps/wallet-mobile/src/features/Discover/common/LabelConnected.stories.tsx

@@ -1,5 +1,5 @@
 import {storiesOf} from '@storybook/react-native'
-import React from 'react'
+import * as React from 'react'
 import {View} from 'react-native'
 
 import {LabelConnected} from './LabelConnected'

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

@@ -1,24 +1,18 @@
 import {NavigationProp, useNavigation} from '@react-navigation/native'
-import {useRef} from 'react'
+import * as React from 'react'
 
 import {DiscoverRoutes} from '../../../navigation'
 
 export const useNavigateTo = () => {
   const navigation = useNavigation<NavigationProp<DiscoverRoutes>>()
 
-  return useRef({
+  return React.useRef({
     goBack: () => navigation.goBack(),
-    browserSearch: (isEdit = false) => {
-      return navigation.navigate('browser', {
-        screen: 'browser-search',
-        params: {isEdit},
-      })
+    searchDappInBrowser: ({isEdit = false} = {}) => {
+      return navigation.navigate('discover-browser', {screen: 'discover-search-dapp-in-browser', params: {isEdit}})
     },
-    discover: () => navigation.navigate('discover-list'),
-    browserView: () =>
-      navigation.navigate('browser', {
-        screen: 'browser-view',
-      }),
+    selectDappFromList: () => navigation.navigate('discover-select-dapp-from-list'),
+    browseDapp: () => navigation.navigate('discover-browser', {screen: 'discover-browse-dapp'}),
     navigation: () => navigation,
   }).current
 }

apps/wallet-mobile/src/features/Discover/common/useShowWelcomeDApp.tsx

@@ -1,5 +1,5 @@
 import {isBoolean, useAsyncStorage} from '@yoroi/common'
-import {useCallback} from 'react'
+import * as React from 'react'
 import {useMutation, UseMutationOptions, useQuery, UseQueryOptions} from 'react-query'
 
 import {useSelectedWallet} from '../../../features/WalletManager/Context'
@@ -46,7 +46,7 @@ export const useShowWelcomeDApp = () => {
   return {
     loadingGetShowedWelcomeDApp,
     isShowedWelcomeDApp,
-    setShowedWelcomeDApp: useCallback(
+    setShowedWelcomeDApp: React.useCallback(
       (options?: UseMutationOptions<void, Error, boolean>) => setShowingWelcomeDApp(true, options),
       [setShowingWelcomeDApp],
     ),

apps/wallet-mobile/src/features/Discover/useCases/BrowseDappScreen/BrowseDappScreen.stories.tsx → apps/wallet-mobile/src/features/Discover/useCases/BrowseDapp/BrowseDappScreen.stories.tsx

@@ -1,5 +1,5 @@
 import {storiesOf} from '@storybook/react-native'
-import React from 'react'
+import * as React from 'react'
 import {ScrollView} from 'react-native'
 
 import {SelectedWalletProvider} from '../../../../features/WalletManager/Context'

apps/wallet-mobile/src/features/Discover/useCases/BrowseDappScreen/BrowseDappScreen.tsx → apps/wallet-mobile/src/features/Discover/useCases/BrowseDapp/BrowseDappScreen.tsx

@@ -1,5 +1,5 @@
 import {useTheme} from '@yoroi/theme'
-import React, {useRef} from 'react'
+import * as React from 'react'
 import {FlatList, StyleSheet, View} from 'react-native'
 
 import {Spacer} from '../../../../components'
@@ -9,7 +9,7 @@ import {WebViewItem} from './WebViewItem'
 
 export const BrowseDappScreen = () => {
   const {styles} = useStyles()
-  const flatListRef = useRef<FlatList>(null)
+  const flatListRef = React.useRef<FlatList>(null)
   const {tabs, switchTabOpen} = useBrowser()
 
   return (