fix(wallet-mobile): Change copy and add warning in dapp explorer (#3673)

Signed-off-by: Juliano Lazzarotto <[email protected]>
Co-authored-by: Juliano Lazzarotto <[email protected]>

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" />
+}

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}
+}

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.',
+    },
   }),
 )
 

apps/wallet-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} />
 

apps/wallet-mobile/src/kernel/i18n/locales/en-US.json

@@ -1101,12 +1101,12 @@
   "discover.discoverList.welcomeToYoroiDAppExplorerDescription": "Discover, inspect, and connect to Cardano decentralized applications (DApps) with ease. Our solution helps to interact with DApps and their smart contracts, seamlessly enhancing your Cardano experience",
   "discover.discoverList.dAppAvailable": "{count} DApp(s) available",
   "discover.discoverList.dAppConnected": "{count} DApp(s) connected",
-  "discover.discoverList.connected": "Connected",
+  "discover.discoverList.connected": "Authorized",
   "discover.discoverList.singleAddress": "Single address",
   "discover.discoverList.recommended": "Recommended",
   "discover.discoverList.done": "DONE",
   "discover.discoverList.openDApp": "Open DApp",
-  "discover.discoverList.disconnectWalletFromDApp": "Disconnect wallet from DApp",
+  "discover.discoverList.disconnectWalletFromDApp": "Disconnect DApp",
   "discover.discoverList.dAppActions": "DApp actions",
   "discover.filterOptions.child.news": "News",
   "discover.filterOptions.child.entertainment": "Entertainment",
@@ -1122,6 +1122,7 @@
   "discover.filterOptions.parent.nft": "NFT",
   "discover.filterOptions.parent.trading": "Trading",
   "discover.filterOptions.parent.community": "Community",
+  "discover.modal.disconnectWarning": "Even if you disconnected Yoroi from the DApp, Yoroi is still authorized. If you want to remove such authorization, please click Disconnect DApp.",
   "walletinit.theme.tryDarkTheme": "Try Yoroi dark theme",
   "walletinit.theme.description": "Press the theme switcher and dive into the new stylish theme crafted to enhance your Cardano wallet experience",
   "walletinit.theme.chanageTheme": "You can always change your theme later in the App settings",