Add warning

Emurgo · Aug 2, 2024 · 24a425d · 24a425d
1 parent f89a9b3
commit 24a425d
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 80 deletions.
diff --git a/apps/wallet-mobile/src/components/ChainWarning/ChainWarning.tsx b/apps/wallet-mobile/src/components/ChainWarning/ChainWarning.tsx
@@ -0,0 +1,52 @@
+import {Text} from '../Text'
+import LinearGradient from 'react-native-linear-gradient'
+import React from 'react'
+import {useTheme} from '@yoroi/theme'
+import {StyleSheet} from 'react-native'
+
+type Props = {
+  title: string
+  description: string
+}
+
+export const ChainWarning = ({title, description}: Props) => {
+  const {isDark, color} = useTheme()
+  const styles = useStyles()
+
+  return (
+    <LinearGradient
+      colors={isDark ? ['rgba(19, 57, 54, 1)', 'rgba(20, 24, 58, 1)', 'rgba(22, 25, 45, 1)'] : color.bg_gradient_1} // it fixes a weird bug
+      start={{x: isDark ? 0.5 : 0.5, y: isDark ? 0 : 0.5}}
+      end={{x: isDark ? 0 : 0, y: isDark ? 0.5 : 0}}
+      style={styles.disclaimer}
+    >
+      <Text style={styles.title}>{title}</Text>
+
+      <Text style={styles.description}>{description}</Text>
+    </LinearGradient>
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    disclaimer: {
+      ...atoms.px_lg,
+      ...atoms.py_md,
+      ...atoms.gap_sm,
+      overflow: 'hidden',
+      borderRadius: 8,
+    },
+    title: {
+      ...atoms.body_1_lg_medium,
+      ...atoms.font_semibold,
+      color: color.gray_cmax,
+    },
+    description: {
+      ...atoms.body_2_md_regular,
+      ...atoms.font_normal,
+      color: color.gray_c900,
+    },
+  })
+  return styles
+}
diff --git a/apps/wallet-mobile/src/features/Discover/common/ChainDAppsWarning.tsx b/apps/wallet-mobile/src/features/Discover/common/ChainDAppsWarning.tsx
@@ -0,0 +1,23 @@
+import {ChainWarning} from '../../../components/ChainWarning/ChainWarning'
+import * as React from 'react'
+import {useWalletManager} from '../../WalletManager/context/WalletManagerProvider'
+import {Chain} from '@yoroi/types'
+import {useStrings} from './useStrings'
+
+export const ChainDAppsWarning = () => {
+  const strings = useStrings()
+  const {
+    selected: {network},
+  } = useWalletManager()
+  const isMainnet = network === Chain.Network.Mainnet
+
+  if (isMainnet) return null
+  return (
+    <ChainWarning
+      title={'Testnet DApps 🚧'}
+      description={
+        'This is a list of DApps designed for testnet use. Note that it may be limited, as not all DApps are deployed in the testnet environment.'
+      }
+    />
+  )
+}
diff --git a/...features/Discover/useCases/SelectDappFromList/CountDAppsConnected/CountDAppsConnected.tsx b/...features/Discover/useCases/SelectDappFromList/CountDAppsConnected/CountDAppsConnected.tsx
@@ -12,7 +12,7 @@ export const CountDAppsConnected = ({total}: Props) => {
   const strings = useStrings()
 
   return (
-    <View style={styles.countAvailableBox}>
+    <View>
       <Text style={styles.availableText}>{`${strings.totalDAppConnected(total)}`}</Text>
     </View>
   )
@@ -26,9 +26,6 @@ const useStyles = () => {
       ...atoms.body_2_md_regular,
       color: color.gray_c700,
     },
-    countAvailableBox: {
-      ...atoms.px_lg,
-    },
   })
   return {styles} as const
 }
diff --git a/apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/DAppTypes/DAppTypes.tsx b/apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/DAppTypes/DAppTypes.tsx
@@ -109,7 +109,6 @@ const useStyles = () => {
       ...atoms.body_1_lg_regular,
     },
     contentContainer: {
-      ...atoms.pl_lg,
       ...atoms.pb_lg,
     },
     boxDisabledStyle: {

diff --git a/...let-mobile/src/features/Discover/useCases/SelectDappFromList/SelectDappFromListScreen.tsx b/...let-mobile/src/features/Discover/useCases/SelectDappFromList/SelectDappFromListScreen.tsx
@@ -16,6 +16,7 @@ import {DAppExplorerTabItem} from './DAppExplorerTabItem/DAppExplorerTabItem'
 import {DAppListItem} from './DAppListItem/DAppListItem'
 import {DAppTypes} from './DAppTypes/DAppTypes'
 import {WelcomeDAppModal} from './WelcomeDAppModal'
+import {ChainDAppsWarning} from '../../common/ChainDAppsWarning'
 
 const DAppTabs = {
   connected: 'connected',
@@ -76,11 +77,11 @@ export const SelectDappFromListScreen = () => {
       <WelcomeDAppModal />
 
       <View style={[styles.root]}>
+        <ChainDAppsWarning />
         <FlatList
           data={myDapps}
           extraData={connectedOrigins}
           keyExtractor={(item) => item.id.toString()}
-          ListHeaderComponentStyle={styles.boxHeader}
           ListHeaderComponent={
             <HeaderControl
               currentTab={currentTab}
@@ -90,11 +91,7 @@ export const SelectDappFromListScreen = () => {
               onCategoryToggle={handleToggleCategory}
             />
           }
-          renderItem={({item: entry}) => (
-            <View style={styles.dAppItemBox}>
-              <DAppListItem dApp={entry} connected={isDappConnected(entry.origins)} />
-            </View>
-          )}
+          renderItem={({item: entry}) => <DAppListItem dApp={entry} connected={isDappConnected(entry.origins)} />}
           ItemSeparatorComponent={() => <Spacer style={styles.dAppsBox} />}
           ListFooterComponent={() => <Spacer style={styles.dAppsBox} />}
         />
@@ -109,15 +106,12 @@ const useStyles = () => {
     root: {
       flex: 1,
       backgroundColor: color.bg_color_high,
+      ...atoms.px_lg,
+      ...atoms.gap_lg,
     },
-    boxHeader: {},
-    containerHeader: {},
     dAppsBox: {
       height: 16,
     },
-    dAppItemBox: {
-      ...atoms.px_lg,
-    },
     tabsContainer: {
       flexDirection: 'row',
       gap: 8,
@@ -157,7 +151,7 @@ const HeaderControl = ({
   return (
     <>
       {hasConnectedDapps && (
-        <View style={[styles.dAppItemBox, styles.tabsContainer]}>
+        <View style={styles.tabsContainer}>
           <DAppExplorerTabItem
             name={strings.connected}
             isActive={currentTab === DAppTabs.connected}
@@ -173,15 +167,15 @@ const HeaderControl = ({
       )}
 
       {hasConnectedDapps && currentTab === DAppTabs.connected && (
-        <View style={styles.containerHeader}>
+        <View>
           <CountDAppsConnected total={connectedOrigins.length} />
 
           <Spacer style={styles.dAppsBox} />
         </View>
       )}
 
       {(!hasConnectedDapps || currentTab === DAppTabs.recommended) && (
-        <View style={styles.containerHeader}>
+        <View>
           <DAppTypes types={filters} onToggle={onCategoryToggle} selectedTypes={selectedCategories} />
 
           <CountDAppsAvailable total={count} />

diff --git a/apps/wallet-mobile/src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx b/apps/wallet-mobile/src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx
@@ -2,11 +2,11 @@ import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import {useQuery} from 'react-query'
 
-import {Button, Spacer, Text, TextInput} from '../../../components'
+import {Button, Spacer, TextInput} from '../../../components'
 import {isValidPoolIdOrHash, normalizeToPoolHash} from '../../../yoroi-wallets/cardano/delegationUtils'
+import {ChainWarning} from '../../../components/ChainWarning/ChainWarning'
 
 type Props = {
   onPressDelegate: (poolHash: string) => void
@@ -17,7 +17,6 @@ export const PoolDetailScreen = ({onPressDelegate, disabled = false}: Props) =>
   const strings = useStrings()
   const styles = useStyles()
   const [poolIdOrHash, setPoolIdOrHash] = React.useState('')
-  const {isDark, color} = useTheme()
 
   const {data: isValid} = useIsValidPoolIdOrHash(poolIdOrHash)
 
@@ -30,16 +29,7 @@ export const PoolDetailScreen = ({onPressDelegate, disabled = false}: Props) =>
 
   return (
     <>
-      <LinearGradient
-        colors={isDark ? ['rgba(19, 57, 54, 1)', 'rgba(20, 24, 58, 1)', 'rgba(22, 25, 45, 1)'] : color.bg_gradient_1} // it fixes a weird bug
-        start={{x: isDark ? 0.5 : 0.5, y: isDark ? 0 : 0.5}}
-        end={{x: isDark ? 0 : 0, y: isDark ? 0.5 : 0}}
-        style={styles.disclaimer}
-      >
-        <Text style={styles.title}>{strings.disclaimerTitle}</Text>
-
-        <Text style={styles.description}>{strings.disclaimerText}</Text>
-      </LinearGradient>
+      <ChainWarning title={strings.disclaimerTitle} description={strings.disclaimerText} />
 
       <Spacer height={24} />
 
@@ -73,28 +63,11 @@ const useIsValidPoolIdOrHash = (poolIdOrHash: string) => {
 }
 
 const useStyles = () => {
-  const {atoms, color} = useTheme()
+  const {atoms} = useTheme()
   const styles = StyleSheet.create({
     button: {
       ...atoms.p_sm,
     },
-    disclaimer: {
-      ...atoms.px_lg,
-      ...atoms.py_md,
-      ...atoms.gap_sm,
-      overflow: 'hidden',
-      borderRadius: 8,
-    },
-    title: {
-      ...atoms.body_1_lg_medium,
-      ...atoms.font_semibold,
-      color: color.gray_cmax,
-    },
-    description: {
-      ...atoms.body_2_md_regular,
-      ...atoms.font_normal,
-      color: color.gray_c900,
-    },
   })
   return styles
 }

diff --git a/.../wallet-mobile/translations/messages/src/legacy/Staking/PoolDetails/PoolDetailScreen.json b/.../wallet-mobile/translations/messages/src/legacy/Staking/PoolDetails/PoolDetailScreen.json
@@ -4,104 +4,104 @@
     "defaultMessage": "!!!Delegate",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 117,
+      "line": 90,
       "column": 12,
-      "index": 3370
+      "index": 2569
     },
     "end": {
-      "line": 120,
+      "line": 93,
       "column": 3,
-      "index": 3484
+      "index": 2683
     }
   },
   {
     "id": "global.next",
     "defaultMessage": "!!!Next",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 121,
+      "line": 94,
       "column": 8,
-      "index": 3494
+      "index": 2693
     },
     "end": {
-      "line": 124,
+      "line": 97,
       "column": 3,
-      "index": 3553
+      "index": 2752
     }
   },
   {
     "id": "global.staking.stakePoolHash",
     "defaultMessage": "!!!Stake pool hash",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 125,
+      "line": 98,
       "column": 12,
-      "index": 3567
+      "index": 2766
     },
     "end": {
-      "line": 128,
+      "line": 101,
       "column": 3,
-      "index": 3654
+      "index": 2853
     }
   },
   {
     "id": "global.staking.stakePoolID",
     "defaultMessage": "!!!Enter test stake pool ID",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 129,
+      "line": 102,
       "column": 10,
-      "index": 3666
+      "index": 2865
     },
     "end": {
-      "line": 132,
+      "line": 105,
       "column": 3,
-      "index": 3760
+      "index": 2959
     }
   },
   {
     "id": "global.staking.invalidPoolID",
     "defaultMessage": "!!!Invalid pool ID. Please retype.",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 133,
+      "line": 106,
       "column": 17,
-      "index": 3779
+      "index": 2978
     },
     "end": {
-      "line": 136,
+      "line": 109,
       "column": 3,
-      "index": 3882
+      "index": 3081
     }
   },
   {
     "id": "components.stakingcenter.poolDetails.disclaimerTitle",
     "defaultMessage": "!!!Stake test ADA and support Yoroi 💥",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 137,
+      "line": 110,
       "column": 19,
-      "index": 3903
+      "index": 3102
     },
     "end": {
-      "line": 140,
+      "line": 113,
       "column": 3,
-      "index": 4034
+      "index": 3233
     }
   },
   {
     "id": "components.stakingcenter.poolDetails.disclaimerText",
     "defaultMessage": "!!!Experience the mechanism of staking firsthand and help us improve Yoroi's functionality and user experience.",
     "file": "src/legacy/Staking/PoolDetails/PoolDetailScreen.tsx",
     "start": {
-      "line": 141,
+      "line": 114,
       "column": 18,
-      "index": 4054
+      "index": 3253
     },
     "end": {
-      "line": 145,
+      "line": 118,
       "column": 3,
-      "index": 4263
+      "index": 3462
     }
   }
 ]