Adds disclaimers for dapps, swap and exchanges

apps/wallet-mobile/src/components/Modal/ModalContext.tsx

@@ -10,6 +10,8 @@ type ModalState = {
   footer?: React.ReactNode
   isLoading: boolean
   full: boolean
+  canContinue?: boolean
+  canDiscard: boolean
 }
 type ModalActions = {
   openModal: (args: {
@@ -19,8 +21,11 @@ type ModalActions = {
     footer?: React.ReactNode
     full?: boolean
     onClose?: () => void
+    canContinue?: boolean
+    canDiscard?: boolean
   }) => void
   closeModal: () => void
+  setCanContinue: (v: boolean) => void
   startLoading: () => void
   stopLoading: () => void
 }
@@ -53,14 +58,15 @@ export const ModalProvider = ({
         onCloseRef.current?.()
       }
     },
-    openModal: ({title = '', content, height, onClose, full = false, footer}) => {
+    openModal: ({title = '', content, height, onClose, full = false, footer, canContinue, canDiscard = true}) => {
       Keyboard.dismiss()
-      dispatch({type: 'open', title, content, footer, height, full})
+      dispatch({type: 'open', title, content, footer, height, full, canContinue, canDiscard})
       navigation.navigate('modal')
       onCloseRef.current = onClose
     },
     startLoading: () => dispatch({type: 'startLoading'}),
     stopLoading: () => dispatch({type: 'stopLoading'}),
+    setCanContinue: (v) => dispatch({type: 'canContinue', canContinue: v}),
   }).current
 
   const context = React.useMemo(() => ({...state, ...actions}), [state, actions])
@@ -76,10 +82,13 @@ type ModalAction =
       footer: ModalState['footer']
       title: ModalState['title']
       full: ModalState['full']
+      canContinue: ModalState['canContinue']
+      canDiscard: ModalState['canDiscard']
     }
   | {type: 'close'}
   | {type: 'startLoading'}
   | {type: 'stopLoading'}
+  | {type: 'canContinue'; canContinue: boolean}
 
 const modalReducer = (state: ModalState, action: ModalAction) => {
   switch (action.type) {
@@ -104,6 +113,9 @@ const modalReducer = (state: ModalState, action: ModalAction) => {
     case 'startLoading':
       return {...state, isLoading: true}
 
+    case 'canContinue':
+      return {...state, canContinue: action.canContinue}
+
     default:
       throw new Error(`modalReducer invalid action`)
   }
@@ -117,6 +129,7 @@ const defaultState: ModalState = Object.freeze({
   isOpen: false,
   isLoading: false,
   full: false,
+  canDiscard: true,
 })
 
 const getLastRouteName = (navigation: NavigationProp<ReactNavigation.RootParamList>) => {

apps/wallet-mobile/src/components/Modal/ModalScreen.tsx

@@ -14,7 +14,7 @@ import {useModal} from './ModalContext'
 export const ModalScreen = () => {
   const styles = useStyles()
   const {current} = useCardAnimation()
-  const {height, closeModal, content, footer, isOpen, isLoading, full} = useModal()
+  const {height, closeModal, content, footer, isOpen, isLoading, full, canDiscard} = useModal()
   const [swipeLocationY, setSwipeLocationY] = React.useState(height)
   // NOTE: this is to fill the bottom of the screen with the same color as the modal
   const {bottom} = useSafeAreaInsets()
@@ -38,7 +38,7 @@ export const ModalScreen = () => {
 
   return (
     <SafeAreaView style={styles.backdrop}>
-      <Pressable style={styles.cancellableArea} onPress={closeModal} />
+      <Pressable style={styles.cancellableArea} {...(canDiscard && {onPress: closeModal})} />
 
       <KeyboardAvoidingView style={styles.root} keyboardVerticalOffset={0}>
         <Animated.View

apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/SelectDappFromListScreen.tsx

@@ -6,11 +6,13 @@ import {FlatList, StyleSheet, View} from 'react-native'
 import {SimpleTab} from '../../../../components/SimpleTab/SimpleTab'
 import {Spacer} from '../../../../components/Spacer/Spacer'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
+import {ShowDisclaimer} from '../../../Legal/Disclaimer/ShowDisclaimer'
 import {useSearch, useSearchOnNavBar} from '../../../Search/SearchContext'
 import {NetworkTag} from '../../../Settings/useCases/changeAppSettings/ChangeNetwork/NetworkTag'
 import {ChainDAppsWarning} from '../../common/ChainDAppsWarning'
 import {getGoogleSearchItem} from '../../common/helpers'
 import {useDAppsConnected} from '../../common/useDAppsConnected'
+import {useShowWelcomeDApp} from '../../common/useShowWelcomeDApp'
 import {useStrings} from '../../common/useStrings'
 import {CountDAppsAvailable} from './CountDAppsAvailable/CountDAppsAvailable'
 import {CountDAppsConnected} from './CountDAppsConnected/CountDAppsConnected'
@@ -31,6 +33,7 @@ export const SelectDappFromListScreen = () => {
   const [currentTab, setCurrentTab] = React.useState<TDAppTabs>('connected')
   const [categoriesSelected, setCategoriesSelected] = React.useState<string[]>([])
   const {track} = useMetrics()
+  const {isShowedWelcomeDApp} = useShowWelcomeDApp()
 
   React.useEffect(() => {
     if (currentTab === 'recommended') {
@@ -76,6 +79,8 @@ export const SelectDappFromListScreen = () => {
     <>
       <WelcomeDAppModal />
 
+      <ShowDisclaimer type="dapps" disabled={!isShowedWelcomeDApp} />
+
       <View style={[styles.root]}>
         <ChainDAppsWarning />
 

apps/wallet-mobile/src/features/Exchange/useCases/CreateExchangeOrderScreen/CreateExchangeOrderScreen.tsx

@@ -15,6 +15,7 @@ import {banxaTestWallet} from '../../../../kernel/env'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {useWalletNavigation} from '../../../../kernel/navigation'
 import {delay} from '../../../../yoroi-wallets/utils/timeUtils'
+import {ShowDisclaimer} from '../../../Legal/Disclaimer/ShowDisclaimer'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
 import {useWalletManager} from '../../../WalletManager/context/WalletManagerProvider'
 import {ProviderItem} from '../../common/ProviderItem/ProviderItem'
@@ -27,7 +28,6 @@ import {EditAmount} from './EditAmount/EditAmount'
 import {ErrorScreen} from './LoadingLink/ErrorScreen'
 import {LoadingLinkScreen} from './LoadingLink/LoadingScreen'
 import {SelectBuyOrSell} from './SelectBuyOrSell/SelectBuyOrSell'
-import {ShowDisclaimer} from './ShowDisclaimer/ShowDisclaimer'
 import {ShowPreprodNotice} from './ShowPreprodNotice/ShowPreprodNotice'
 
 const BOTTOM_ACTION_SECTION = 180
@@ -164,7 +164,7 @@ export const CreateExchangeOrderScreen = () => {
               disabled
             />
 
-            <ShowDisclaimer />
+            <ShowDisclaimer type="exchange" />
           </View>
         </ScrollView>
 

apps/wallet-mobile/src/features/Legal/Disclaimer/ShowDisclaimer.tsx

@@ -0,0 +1,125 @@
+import {useNavigation} from '@react-navigation/native'
+import {useTheme} from '@yoroi/theme'
+import React from 'react'
+import {useIntl} from 'react-intl'
+import {StyleSheet, View} from 'react-native'
+import Markdown from 'react-native-markdown-display'
+
+import {Button, ButtonType} from '../../../components/Button/Button'
+import {Checkbox} from '../../../components/Checkbox/Checkbox'
+import {useModal} from '../../../components/Modal/ModalContext'
+import globalMessages, {actionMessages, confirmationMessages} from '../../../kernel/i18n/global-messages'
+import {useLanguage} from '../../../kernel/i18n/LanguageProvider'
+import {useWalletNavigation} from '../../../kernel/navigation'
+import {loadText} from './loadText'
+import {Disclaimer} from './types'
+import {useDisclaimerState} from './useDisclaimerState'
+
+type Props = {
+  type: Disclaimer
+  disabled?: boolean
+}
+
+export const ShowDisclaimer = ({type, disabled}: Props) => {
+  const {languageCode} = useLanguage()
+  const {openModal, closeModal} = useModal()
+  const styles = useStyles()
+  const strings = useStrings()
+  const {resetToTxHistory} = useWalletNavigation()
+  const navigation = useNavigation()
+  const [showed, setShowed] = React.useState(false)
+  const [accepted, setAccepted] = useDisclaimerState(type)
+
+  React.useEffect(() => {
+    if (!disabled && !accepted && showed === false) {
+      openModal({
+        title: strings.disclaimer,
+        content: (
+          <View style={styles.container}>
+            {/* @ts-expect-error old react */}
+            <Markdown style={styles}>{loadText(type, languageCode)}</Markdown>
+
+            <Check text={strings.accept} />
+          </View>
+        ),
+        footer: (
+          <View style={styles.actions}>
+            <Button type={ButtonType.Secondary} title={strings.cancel} onPress={resetToTxHistory} />
+
+            <Proceed
+              title={strings.proceed}
+              onPress={() => {
+                setAccepted(true)
+                closeModal()
+              }}
+            />
+          </View>
+        ),
+        height: 700,
+        canDiscard: false,
+      })
+      setShowed(true)
+    }
+  }, [
+    accepted,
+    closeModal,
+    disabled,
+    languageCode,
+    navigation,
+    openModal,
+    resetToTxHistory,
+    setAccepted,
+    showed,
+    strings.accept,
+    strings.cancel,
+    strings.disclaimer,
+    strings.proceed,
+    styles,
+    type,
+  ])
+  return null
+}
+
+const Check = ({text}: {text: string}) => {
+  const {canContinue = false, setCanContinue} = useModal()
+  return <Checkbox text={text} checked={canContinue} onChange={() => setCanContinue(!canContinue)} />
+}
+
+const Proceed = ({title, onPress}: {title: string; onPress: () => void}) => {
+  const {canContinue = false} = useModal()
+
+  return <Button title={title} onPress={onPress} disabled={!canContinue} />
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    container: {
+      ...atoms.px_lg,
+      ...atoms.pb_lg,
+    },
+    // eslint-disable-next-line react-native/no-unused-styles
+    body: {
+      ...atoms.body_1_lg_regular,
+      ...atoms.py_sm,
+      color: color.gray_max,
+    },
+    actions: {
+      ...atoms.flex,
+      ...atoms.flex_row,
+      ...atoms.gap_lg,
+    },
+  })
+
+  return styles
+}
+const useStrings = () => {
+  const intl = useIntl()
+
+  return {
+    disclaimer: intl.formatMessage(globalMessages.disclaimer),
+    cancel: intl.formatMessage(globalMessages.cancel),
+    proceed: intl.formatMessage(actionMessages.proceed),
+    accept: intl.formatMessage(confirmationMessages.commonButtons.iUnderstandButton),
+  }
+}

apps/wallet-mobile/src/features/Legal/Disclaimer/dapp/bn-BD.md

@@ -0,0 +1,8 @@
+By clicking "Proceed," you acknowledge that you will be dealing with the third-party decentralized applications (DApps) offering multiple services. You may be required to agree to the terms, conditions, and privacy policies of DApps to deal with them. Yoroi Wallet does not control, endorse, or assume responsibility for the content, security, policies, or services provided by DApps.
+
+**Please note:**
+
+1. Yoroi Wallet is not liable for any losses, delays, or errors that may occur while using the third-party service.
+2. Transactions may be subject to restrictions based on your geographic location, applicable laws, financial institution policies, or the service provider's limitations.
+3. Ensure you review and understand the third party's terms, as your interactions are solely governed by their agreements.
+4. Yoroi Wallet does not collect or store any personal or financial data submitted through the third-party platform.

apps/wallet-mobile/src/features/Legal/Disclaimer/dapp/cs-CZ.md

@@ -0,0 +1,8 @@
+By clicking "Proceed," you acknowledge that you will be dealing with the third-party decentralized applications (DApps) offering multiple services. You may be required to agree to the terms, conditions, and privacy policies of DApps to deal with them. Yoroi Wallet does not control, endorse, or assume responsibility for the content, security, policies, or services provided by DApps.
+
+**Please note:**
+
+1. Yoroi Wallet is not liable for any losses, delays, or errors that may occur while using the third-party service.
+2. Transactions may be subject to restrictions based on your geographic location, applicable laws, financial institution policies, or the service provider's limitations.
+3. Ensure you review and understand the third party's terms, as your interactions are solely governed by their agreements.
+4. Yoroi Wallet does not collect or store any personal or financial data submitted through the third-party platform.

apps/wallet-mobile/src/features/Legal/Disclaimer/dapp/de-DE.md

@@ -0,0 +1,8 @@
+By clicking "Proceed," you acknowledge that you will be dealing with the third-party decentralized applications (DApps) offering multiple services. You may be required to agree to the terms, conditions, and privacy policies of DApps to deal with them. Yoroi Wallet does not control, endorse, or assume responsibility for the content, security, policies, or services provided by DApps.
+
+**Please note:**
+
+1. Yoroi Wallet is not liable for any losses, delays, or errors that may occur while using the third-party service.
+2. Transactions may be subject to restrictions based on your geographic location, applicable laws, financial institution policies, or the service provider's limitations.
+3. Ensure you review and understand the third party's terms, as your interactions are solely governed by their agreements.
+4. Yoroi Wallet does not collect or store any personal or financial data submitted through the third-party platform.

apps/wallet-mobile/src/features/Legal/Disclaimer/dapp/el-GR.md

@@ -0,0 +1,8 @@
+By clicking "Proceed," you acknowledge that you will be dealing with the third-party decentralized applications (DApps) offering multiple services. You may be required to agree to the terms, conditions, and privacy policies of DApps to deal with them. Yoroi Wallet does not control, endorse, or assume responsibility for the content, security, policies, or services provided by DApps.
+
+**Please note:**
+
+1. Yoroi Wallet is not liable for any losses, delays, or errors that may occur while using the third-party service.
+2. Transactions may be subject to restrictions based on your geographic location, applicable laws, financial institution policies, or the service provider's limitations.
+3. Ensure you review and understand the third party's terms, as your interactions are solely governed by their agreements.
+4. Yoroi Wallet does not collect or store any personal or financial data submitted through the third-party platform.