feature(wallet-mobile): Dapp explorer UI (#3189)

Co-authored-by: hoailp <[email protected]>

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

@@ -154,14 +154,11 @@ const useNavigateTo = () => {
   return {
     stakingCenter: () => {
       navigation.navigate('app-root', {
-        screen: 'main-wallet-routes',
+        screen: 'staking-dashboard',
         params: {
-          screen: 'staking-dashboard',
+          screen: 'staking-center',
           params: {
-            screen: 'staking-center',
-            params: {
-              screen: 'staking-center-main',
-            },
+            screen: 'staking-center-main',
           },
         },
       })

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -9,6 +9,7 @@ import {Keyboard, Platform} from 'react-native'
 import {VotingRegistration} from './Catalyst'
 import {Icon, OfflineBanner} from './components'
 import {DashboardNavigator} from './Dashboard'
+import {DiscoverNavigator} from './features/Discover'
 import {ShowExchangeResultOrderScreen} from './features/Exchange/useCases/ShowExchangeResultOrderScreen/ShowExchangeResultOrderScreen'
 import {useLinksRequestAction} from './features/Links/common/useLinksRequestAction'
 import {useLinksShowActionResult} from './features/Links/common/useLinksShowActionResult'
@@ -21,25 +22,22 @@ import {
 import {SelectWalletFromList} from './features/SetupWallet/useCases/SelectWalletFromList'
 import {GovernanceNavigator} from './features/Staking/Governance'
 import {ToggleAnalyticsSettingsNavigator} from './features/ToggleAnalyticsSettings'
-import {useSelectedWallet} from './features/WalletManager/Context'
 import {useMetrics} from './metrics/metricsManager'
-import {hideTabBarForRoutes, WalletStackRoutes, WalletTabRoutes} from './navigation'
-import {defaultStackNavigationOptions} from './navigation'
+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'
-import {isHaskellShelley} from './yoroi-wallets/cardano/utils'
 import {useHasWallets} from './yoroi-wallets/hooks'
 
 const Tab = createBottomTabNavigator<WalletTabRoutes>()
 const WalletTabNavigator = () => {
   const strings = useStrings()
   const {colors} = useStyles()
-  const wallet = useSelectedWallet()
-  const initialRoute = isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' : 'history'
+  const initialRoute = /* isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' :*/ 'history'
 
   const [isKeyboardOpen, setIsKeyboardOpen] = React.useState(false)
 
@@ -117,7 +115,7 @@ const WalletTabNavigator = () => {
           )}
         </Tab.Screen>
 
-        {isHaskellShelley(wallet.walletImplementationId) && (
+        {/* {isHaskellShelley(wallet.walletImplementationId) && (
           <Tab.Screen
             name="staking-dashboard"
             component={DashboardNavigator}
@@ -129,7 +127,28 @@ 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"
@@ -157,7 +176,8 @@ export const WalletNavigator = () => {
   const hasWallets = useHasWallets(walletManager)
   const authSetting = useAuthSetting()
 
-  const shouldAskToUseAuthWithOs = !hasWallets && showBiometricsScreen && isAuthOsSupported && authSetting !== 'os'
+  const shouldAskToUseAuthWithOs =
+    !hasWallets && showBiometricsScreen && isAuthOsSupported === true && authSetting !== 'os'
 
   // initialRoute doesn't update the state of the navigator, only at first render
   // https://reactnavigation.org/docs/auth-flow/
@@ -211,6 +231,8 @@ export const WalletNavigator = () => {
       />
 
       <Stack.Screen name="governance" options={{headerShown: false}} component={GovernanceNavigator} />
+
+      <Stack.Screen name="staking-dashboard" options={{headerShown: false}} component={DashboardNavigator} />
     </Stack.Navigator>
   )
 }
@@ -263,6 +285,10 @@ const messages = defineMessages({
     id: 'menu',
     defaultMessage: '!!!Menu',
   },
+  discoverButton: {
+    id: 'components.common.navigation.discover',
+    defaultMessage: '!!!Discover',
+  },
   walletSelectionScreenHeader: {
     id: 'components.walletselection.walletselectionscreen.header',
     defaultMessage: '!!!My wallets',
@@ -281,6 +307,7 @@ const useStrings = () => {
     walletTabBarLabel: intl.formatMessage(messages.walletButton),
     nftsTabBarLabel: intl.formatMessage(messages.nftsButton),
     menuTabBarLabel: intl.formatMessage(messages.menuButton),
+    discoverTabBarLabel: intl.formatMessage(messages.discoverButton),
     walletSelectionScreenHeader: intl.formatMessage(messages.walletSelectionScreenHeader),
   }
 }

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Backward = ({size = 24, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M12.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L7.414 13H19a1 1 0 100-2H7.414l5.293-5.293z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import Svg, {Circle, Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+  fill?: string
+}
+
+export const CheckFilled2 = ({size = 20, color, fill}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20">
+    <Circle cx={10} cy={10} r={10} fill={fill} />
+
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.64 6.232a1 1 0 01.128 1.408l-5 6a1 1 0 01-1.475.067l-3-3a1 1 0 111.414-1.414l2.226 2.226 4.299-5.16a1 1 0 011.408-.127z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const DApp = ({size = 24, color = 'black'}: Props) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 1.002a3 3 0 00-1.498.4L7.306 3.23a1 1 0 00-.553.316L3.504 5.402l-.004.002a3 3 0 00-.937.848 1.001 1.001 0 00-.249.414A3 3 0 002 7.999V16a3 3 0 001.5 2.595l.004.002 3.25 1.857c.142.16.335.274.553.316l3.193 1.825.002.001c.317.183.664.305 1.023.363a.996.996 0 00.95 0c.36-.058.706-.18 1.023-.363l.002-.001 3.193-1.825a.999.999 0 00.554-.316l3.25-1.857.003-.002A3 3 0 0022 16v-3.984V8a3 3 0 00-.314-1.333 1.002 1.002 0 00-.249-.414 3 3 0 00-.937-.848l-3.252-1.859a1 1 0 00-.554-.316L13.5 1.404l-.002-.001A3 3 0 0012 1.002zm1 19.576l2.5-1.428V14.6a1 1 0 01.5-.866l4-2.311V8.537l-7 4.05v7.991zm-2-7.991l-7-4.05v2.886l4 2.311a1 1 0 01.5.866v4.55l2.5 1.428v-7.991zm1-1.732l6.961-4.027-2.51-1.435-3.95 2.283a1 1 0 01-1.001 0L7.55 5.393 5.04 6.828 12 10.855zm5.5 7.152l2-1.143.002-.001a1.001 1.001 0 00.498-.864v-2.266l-2.5 1.444v2.83zM4 15.999v-2.266l2.5 1.444v2.83l-2-1.143-.001-.001A1 1 0 014 15.999zM14.44 4.245l-1.94-1.11a1 1 0 00-1 0l-.004.003L9.56 4.245 12 5.655l2.44-1.41z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Disconnect = ({size = 24, color = 'black'}: Props) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M10.385 7.985a1.095 1.095 0 01-1.132-.264c-.581-.582-.356-1.58.423-1.846a6.937 6.937 0 014.611.048l1.698-1.698c.965-.964 2.662-.828 3.794.303 1.13 1.131 1.266 2.829.302 3.793l-1.698 1.698a6.938 6.938 0 01.048 4.611c-.265.78-1.264 1.005-1.846.423a1.096 1.096 0 01-.264-1.132c.569-1.642.214-3.531-1.095-4.84-1.31-1.31-3.199-1.665-4.841-1.096z"
+        fill={color}
+      />
+
+      <Path
+        d="M10.707 9.793a1 1 0 00-1.414 1.415l1.293 1.292-1.293 1.293a1 1 0 101.414 1.415L12 13.915l1.293 1.293a1 1 0 001.414-1.415L13.414 12.5l1.293-1.293a1 1 0 00-1.414-1.414L12 11.086l-1.293-1.293z"
+        fill={color}
+      />
+
+      <Path
+        d="M14.568 17.07a1.095 1.095 0 00-1.132-.264 4.681 4.681 0 01-4.324-.648l-.965-.964A4.682 4.682 0 017.5 10.87a1.095 1.095 0 00-.265-1.132c-.58-.581-1.58-.356-1.846.423a6.938 6.938 0 00.049 4.612L3.919 16.29c-.964.964-.828 2.662.303 3.793 1.131 1.131 2.829 1.267 3.793.303l1.519-1.519a6.938 6.938 0 004.611.049c.779-.266 1.004-1.265.423-1.846z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Discover = ({size = 36, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 25 24" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.33 8.294a1 1 0 00-1.249-1.25l-6.12 1.88a1 1 0 00-.662.662l-1.88 6.12a1 1 0 001.25 1.25l6.12-1.88a1 1 0 00.662-.662l1.88-6.12zM9.886 14.49l1.17-3.81 3.81-1.17-1.17 3.81-3.81 1.17z"
+      fill={color}
+    />
+
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.375 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm-8 10a8 8 0 1116 0 8 8 0 01-16 0z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Forward = ({size = 24, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M12.707 4.293a1 1 0 10-1.414 1.414L16.586 11H5a1 1 0 100 2h11.586l-5.293 5.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -246,6 +246,26 @@ storiesOf('Icon', module).add('Gallery', () => {
         <Item icon={<Icon.Warning />} title="Warning" />
 
         <Item icon={<Icon.Collateral />} title="Collateral" />
+
+        <Item icon={<Icon.Discover />} title="Discover" />
+
+        <Item icon={<Icon.CheckFilled2 />} title="CheckFilled2" />
+
+        <Item icon={<Icon.DApp />} title="DApp Icon" />
+
+        <Item icon={<Icon.Disconnect />} title="Disconnect" />
+
+        <Item icon={<Icon.LockFilled />} title="LockFilled" />
+
+        <Item icon={<Icon.Backward />} title="Backward" />
+
+        <Item icon={<Icon.Forward />} title="Forward" />
+
+        <Item icon={<Icon.Share2 />} title="Share2" />
+
+        <Item icon={<Icon.Reload />} title="Reload" />
+
+        <Item icon={<Icon.Square />} title="Square" />
       </ScrollView>
     </FilterProvider>
   )

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const LockFilled = ({size = 16, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 7V5.778C4 4.75 4.442 3.78 5.2 3.08A4.126 4.126 0 018 2c1.037 0 2.046.38 2.8 1.08.758.701 1.2 1.67 1.2 2.698V7h.667C13.403 7 14 7.57 14 8.273v4.454C14 13.43 13.403 14 12.667 14H3.333C2.597 14 2 13.43 2 12.727V8.273C2 7.57 2.597 7 3.333 7H4zm2.558-2.453C6.928 4.205 7.446 4 8 4c.554 0 1.072.205 1.442.547.368.34.558.785.558 1.23V7H6V5.778c0-.446.19-.89.558-1.23z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Reload = ({size = 24, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M7.555 5.348A8 8 0 0112 4c2.251 0 4.412.892 6.04 2.454l.546.546H16a1 1 0 100 2h5a.997.997 0 001-1V3a1 1 0 10-2 0v2.586l-.553-.553-.014-.014C17.443 3.105 14.786 2 12 2a10 10 0 1010 10 1 1 0 10-2 0A8 8 0 117.555 5.348z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Share2 = ({size = 24, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M11.293 2.293a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L13 5.414V16a1 1 0 11-2 0V5.414L8.707 7.707a1 1 0 01-1.414-1.414l4-4z"
+      fill={color}
+    />
+
+    <Path
+      d="M4 11a1 1 0 011 1v7.2c0 .176.077.37.255.53.181.163.448.27.745.27h12c.297 0 .564-.107.745-.27A.715.715 0 0019 19.2V12a1 1 0 112 0v7.2c0 .779-.345 1.501-.917 2.016A3.118 3.118 0 0118 22H6a3.118 3.118 0 01-2.083-.784A2.713 2.713 0 013 19.2V12a1 1 0 011-1z"
+      fill={color}
+    />
+  </Svg>
+)

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Square = ({size = 24, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 4a1 1 0 00-1 1v14a1 1 0 001 1h14a1 1 0 001-1V5a1 1 0 00-1-1H5zM2 5a3 3 0 013-3h14a3 3 0 013 3v14a3 3 0 01-3 3H5a3 3 0 01-3-3V5z"
+      fill={color}
+    />
+  </Svg>
+)