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

…les (#3190)

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>
   )