Merge branch 'develop' into yomo-1943

Emurgo · Oct 8, 2024 · e86f41e · e86f41e
2 parents 348270e + bf707c9
commit e86f41e
Show file tree

Hide file tree

Showing 35 changed files with 1,142 additions and 831 deletions.
diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js
diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx
@@ -31,7 +31,6 @@ import {
   useShowDarkThemeAnnouncementScreen,
 } from './features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement'
 import {useDeepLinkWatcher} from './features/Links/common/useDeepLinkWatcher'
-import {PortfolioScreen} from './features/Portfolio/useCases/PortfolioScreen'
 import {SearchProvider} from './features/Search/SearchContext'
 import {SetupWalletNavigator} from './features/SetupWallet/SetupWalletNavigator'
 import {useHasWallets} from './features/WalletManager/common/hooks/useHasWallets'
@@ -202,8 +201,6 @@ export const AppNavigator = () => {
               <Stack.Screen name="storybook" component={StorybookScreen} />
 
               <Stack.Screen name="playground" component={Playground} />
-
-              <Stack.Screen name="portfolio-dashboard" component={PortfolioScreen} />
             </Stack.Group>
           )}
         </Stack.Navigator>

diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx
@@ -10,7 +10,6 @@ import {
   swapStorageMaker,
 } from '@yoroi/swap'
 import {useTheme} from '@yoroi/theme'
-import {TransferProvider} from '@yoroi/transfer'
 import {Swap} from '@yoroi/types'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
@@ -233,51 +232,49 @@ export const WalletNavigator = () => {
   }
 
   return (
-    <TransferProvider>
-      <SearchProvider>
-        <Stack.Navigator
-          screenOptions={{
-            ...navOptions,
-            headerLeft: undefined,
+    <SearchProvider>
+      <Stack.Navigator
+        screenOptions={{
+          ...navOptions,
+          headerLeft: undefined,
+        }}
+      >
+        <Stack.Screen
+          name="wallet-selection"
+          options={{
+            title: strings.walletSelectionScreenHeader,
+            headerTitle: ({children}) => <NetworkTag directChangeActive>{children}</NetworkTag>,
           }}
-        >
-          <Stack.Screen
-            name="wallet-selection"
-            options={{
-              title: strings.walletSelectionScreenHeader,
-              headerTitle: ({children}) => <NetworkTag directChangeActive>{children}</NetworkTag>,
-            }}
-            component={SelectWalletFromList}
-          />
+          component={SelectWalletFromList}
+        />
 
-          <Stack.Screen //
-            name="setup-wallet"
-            options={{headerShown: false}}
-            component={SetupWalletNavigator}
-          />
+        <Stack.Screen //
+          name="setup-wallet"
+          options={{headerShown: false}}
+          component={SetupWalletNavigator}
+        />
 
-          <Stack.Screen name="main-wallet-routes" options={{headerShown: false}} component={WalletTabNavigator} />
+        <Stack.Screen name="main-wallet-routes" options={{headerShown: false}} component={WalletTabNavigator} />
 
-          <Stack.Screen name="settings" options={{headerShown: false}} component={SettingsScreenNavigator} />
+        <Stack.Screen name="settings" options={{headerShown: false}} component={SettingsScreenNavigator} />
 
-          <Stack.Screen
-            name="voting-registration"
-            options={{headerShown: false}}
-            getComponent={() => CatalystNavigator}
-          />
+        <Stack.Screen
+          name="voting-registration"
+          options={{headerShown: false}}
+          getComponent={() => CatalystNavigator}
+        />
 
-          <Stack.Screen
-            name="toggle-analytics-settings"
-            options={{headerShown: false}}
-            component={ToggleAnalyticsSettingsNavigator}
-          />
+        <Stack.Screen
+          name="toggle-analytics-settings"
+          options={{headerShown: false}}
+          component={ToggleAnalyticsSettingsNavigator}
+        />
 
-          <Stack.Screen name="governance" options={{headerShown: false}} component={GovernanceNavigator} />
+        <Stack.Screen name="governance" options={{headerShown: false}} component={GovernanceNavigator} />
 
-          <Stack.Screen name="staking-dashboard" options={{headerShown: false}} component={DashboardNavigator} />
-        </Stack.Navigator>
-      </SearchProvider>
-    </TransferProvider>
+        <Stack.Screen name="staking-dashboard" options={{headerShown: false}} component={DashboardNavigator} />
+      </Stack.Navigator>
+    </SearchProvider>
   )
 }
 

diff --git a/apps/wallet-mobile/src/YoroiApp.tsx b/apps/wallet-mobile/src/YoroiApp.tsx
@@ -2,6 +2,7 @@ import {AsyncStorageProvider} from '@yoroi/common'
 import {LinksProvider} from '@yoroi/links'
 import {SetupWalletProvider} from '@yoroi/setup-wallet'
 import {ThemeProvider} from '@yoroi/theme'
+import {TransferProvider} from '@yoroi/transfer'
 import React from 'react'
 import {LogBox, StyleSheet} from 'react-native'
 import * as RNP from 'react-native-paper'
@@ -58,17 +59,19 @@ const Yoroi = () => {
                     <LoadingBoundary style={StyleSheet.absoluteFill}>
                       <LanguageProvider>
                         <AuthProvider>
-                          <LinksProvider>
-                            <SetupWalletProvider>
-                              <PoolTransitionProvider>
-                                <BrowserProvider>
-                                  <AutomaticWalletOpenerProvider>
-                                    <InitApp />
-                                  </AutomaticWalletOpenerProvider>
-                                </BrowserProvider>
-                              </PoolTransitionProvider>
-                            </SetupWalletProvider>
-                          </LinksProvider>
+                          <TransferProvider>
+                            <LinksProvider>
+                              <SetupWalletProvider>
+                                <PoolTransitionProvider>
+                                  <BrowserProvider>
+                                    <AutomaticWalletOpenerProvider>
+                                      <InitApp />
+                                    </AutomaticWalletOpenerProvider>
+                                  </BrowserProvider>
+                                </PoolTransitionProvider>
+                              </SetupWalletProvider>
+                            </LinksProvider>
+                          </TransferProvider>
                         </AuthProvider>
                       </LanguageProvider>
                     </LoadingBoundary>

diff --git a/apps/wallet-mobile/src/components/InfoBanner/InfoBanner.stories.tsx b/apps/wallet-mobile/src/components/InfoBanner/InfoBanner.stories.tsx
@@ -0,0 +1,10 @@
+import {storiesOf} from '@storybook/react-native'
+import * as React from 'react'
+
+import {InfoBanner} from './InfoBanner'
+
+storiesOf('InfoBanner', module).add('initial', () => <Initial />)
+
+const Initial = () => {
+  return <InfoBanner content="Example info message" />
+}
diff --git a/apps/wallet-mobile/src/components/InfoBanner/InfoBanner.tsx b/apps/wallet-mobile/src/components/InfoBanner/InfoBanner.tsx
@@ -0,0 +1,43 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {Icon} from '../Icon'
+import {Space} from '../Space/Space'
+
+type Props = {content: React.ReactNode; iconSize?: number}
+
+export const InfoBanner = ({content, iconSize = 30}: Props) => {
+  const {styles, colors} = useStyles()
+
+  return (
+    <View style={styles.notice}>
+      <Icon.Info size={iconSize} color={colors.icon} />
+
+      <Space height="sm" />
+
+      <Text style={styles.text}>{content}</Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+  const styles = StyleSheet.create({
+    notice: {
+      backgroundColor: color.sys_cyan_100,
+      ...atoms.p_md,
+      borderRadius: 8,
+    },
+    text: {
+      ...atoms.body_2_md_regular,
+      color: color.gray_max,
+    },
+  })
+
+  const colors = {
+    icon: color.primary_500,
+  }
+
+  return {colors, styles}
+}
diff --git a/...t-mobile/src/components/ShareQRCodeCard/CaptureShareQRCodeCard/CaptureShareQRCodeCard.tsx b/...t-mobile/src/components/ShareQRCodeCard/CaptureShareQRCodeCard/CaptureShareQRCodeCard.tsx
@@ -82,8 +82,8 @@ const useStyles = () => {
   })
 
   const colors = {
-    white: color.gray_min,
-    black: color.gray_max,
+    white: color.white_static,
+    black: color.black_static,
     transparent: 'transparent',
     backgroundGradientCard: color.bg_gradient_1,
   }

diff --git a/apps/wallet-mobile/src/components/ShareQRCodeCard/ShareQRCodeCard.tsx b/apps/wallet-mobile/src/components/ShareQRCodeCard/ShareQRCodeCard.tsx
@@ -66,7 +66,7 @@ export const ShareQRCodeCard = ({
 
   if (isSharing)
     return (
-      <ViewShot ref={ref}>
+      <ViewShot style={styles.shot} ref={ref}>
         <CaptureShareQRCodeCard content={qrContent} />
       </ViewShot>
     )
@@ -128,6 +128,9 @@ const useStyles = () => {
     addressContainer: {
       alignItems: 'center',
     },
+    shot: {
+      height: 308,
+    },
     card: {
       ...atoms.gap_lg,
       minHeight: 432,

diff --git a/apps/wallet-mobile/src/features/Dev/DeveloperScreen.tsx b/apps/wallet-mobile/src/features/Dev/DeveloperScreen.tsx
@@ -88,8 +88,6 @@ export const DeveloperScreen = () => {
           onPress={() => storageVersionMaker(rootStorage).remove()}
         />
 
-        <Button title="Portfolio" style={styles.button} onPress={() => navigation.navigate('portfolio-dashboard')} />
-
         <Button
           title="Logout"
           style={styles.button}

diff --git a/apps/wallet-mobile/src/features/Discover/common/useStrings.tsx b/apps/wallet-mobile/src/features/Discover/common/useStrings.tsx
@@ -66,6 +66,7 @@ export const useStrings = () => {
     filterParentOptionsNFT: intl.formatMessage(messages.filterParentOptionsNFT),
     filterParentOptionsTrading: intl.formatMessage(messages.filterParentOptionsTrading),
     learnMore: intl.formatMessage(globalMessages.learnMore),
+    disconnectWarning: intl.formatMessage(messages.disconnectWarning),
   }).current
 }
 
@@ -106,7 +107,7 @@ const messages = Object.freeze(
     },
     connected: {
       id: 'discover.discoverList.connected',
-      defaultMessage: '!!!Connected',
+      defaultMessage: '!!!Authorized',
     },
     singleAddress: {
       id: 'discover.discoverList.singleAddress',
@@ -126,7 +127,7 @@ const messages = Object.freeze(
     },
     disconnectWalletFromDApp: {
       id: 'discover.discoverList.disconnectWalletFromDApp',
-      defaultMessage: '!!!Disconnect wallet from DApp',
+      defaultMessage: '!!!Disconnect DApp',
     },
     dAppActions: {
       id: 'discover.discoverList.dAppActions',
@@ -299,6 +300,11 @@ const messages = Object.freeze(
       id: 'discover.filterOptions.parent.community',
       defaultMessage: '!!!Community',
     },
+    disconnectWarning: {
+      id: 'discover.modal.disconnectWarning',
+      defaultMessage:
+        '!!!Even if you disconnected Yoroi from the DApp, Yoroi is still authorized. If you want to remove such authorization, please click Disconnect DApp.',
+    },
   }),
 )
 

diff --git a/...et-mobile/src/features/Discover/useCases/SelectDappFromList/DAppListItem/DAppListItem.tsx b/...et-mobile/src/features/Discover/useCases/SelectDappFromList/DAppListItem/DAppListItem.tsx
@@ -7,6 +7,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import uuid from 'uuid'
 
 import {Icon} from '../../../../../components/Icon'
+import {InfoBanner} from '../../../../../components/InfoBanner/InfoBanner'
 import {useModal} from '../../../../../components/Modal/ModalContext'
 import {Space} from '../../../../../components/Space/Space'
 import {Spacer} from '../../../../../components/Spacer/Spacer'
@@ -37,7 +38,7 @@ export const DAppListItem = ({dApp, connected, onPress}: Props) => {
   const {manager} = useDappConnector()
   const {track} = useMetrics()
 
-  const heightDialogByHeightScreen = dApp.isSingleAddress ? 460 : 340
+  const heightDialogByHeightScreen = dApp.isSingleAddress ? 612 : 492
 
   const heightDialogByInit = INIT_DIALOG_DAPP_ACTIONS_HEIGHT + insets.bottom
   const dialogHeight = heightDialogByInit < heightDialogByHeightScreen ? heightDialogByHeightScreen : heightDialogByInit
@@ -111,6 +112,10 @@ export const DAppListItem = ({dApp, connected, onPress}: Props) => {
 
         <Space height="lg" />
 
+        <InfoBanner iconSize={20} content={strings.disconnectWarning} />
+
+        <Space height="lg" />
+
         <View>
           <DAppAction onPress={handleOpenDApp} icon={<Icon.DApp color={colors.icon} />} title={strings.openDApp} />
 

diff --git a/apps/wallet-mobile/src/features/Portfolio/PortfolioNavigator.tsx b/apps/wallet-mobile/src/features/Portfolio/PortfolioNavigator.tsx
@@ -3,7 +3,7 @@ import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
 
 import {Boundary} from '../../components/Boundary/Boundary'
-import {defaultStackNavigationOptions, Portfolio2Routes} from '../../kernel/navigation'
+import {defaultStackNavigationOptions, PortfolioRoutes} from '../../kernel/navigation'
 import {SearchProvider} from '../Search/SearchContext'
 import {NetworkTag} from '../Settings/ChangeNetwork/NetworkTag'
 import {TxDetails} from '../Transactions/useCases/TxDetails/TxDetails'
@@ -15,7 +15,7 @@ import ExportTokenTransactions from './useCases/PortfolioTokenDetails/ExportToke
 import {PortfolioTokenDetailsScreen} from './useCases/PortfolioTokenDetails/PortfolioTokenDetailsScreen'
 import {PortfolioTokenListScreen} from './useCases/PortfolioTokensList/PortfolioTokenListScreen'
 
-const Stack = createStackNavigator<Portfolio2Routes>()
+const Stack = createStackNavigator<PortfolioRoutes>()
 
 export const PortfolioNavigator = () => {
   const {atoms, color} = useTheme()