From 4031b258b2f69c594b88de5999352a7a830bf256 Mon Sep 17 00:00:00 2001 From: banklesss Date: Wed, 18 Dec 2024 15:51:53 +0100 Subject: [PATCH] feature(wallet-mobile): tx review operations notice --- .../ReviewTx/common/hooks/useStrings.tsx | 16 + .../illustrations/OperationsNoticeIcon.tsx | 747 ++++++++++++++++++ .../ReviewTx/Overview/OverviewTab.tsx | 58 ++ .../src/kernel/i18n/locales/en-US.json | 5 +- .../ReviewTx/common/hooks/useStrings.json | 661 ++++++++-------- 5 files changed, 1178 insertions(+), 309 deletions(-) create mode 100644 apps/wallet-mobile/src/features/ReviewTx/illustrations/OperationsNoticeIcon.tsx diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx index d3bc77f211..4df4add4aa 100644 --- a/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx +++ b/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx @@ -84,6 +84,9 @@ export const useStrings = () => { operationsLogTitle: intl.formatMessage(messages.operationsLogTitle), operationsLogWarningText: intl.formatMessage(messages.operationsLogWarningText), operationsLogWarningTitle: intl.formatMessage(messages.operationsLogWarningTitle), + operationsNoticeText: intl.formatMessage(messages.operationsNoticeText), + operationsNoticeButton: intl.formatMessage(messages.operationsNoticeButton), + operationsNoticeTitle: intl.formatMessage(messages.operationsNoticeTitle), } } @@ -397,4 +400,17 @@ const messages = defineMessages({ id: 'txReview.createdBy', defaultMessage: '!!!Created by', }, + operationsNoticeText: { + id: 'txReview.overview.operationsNoticeText', + defaultMessage: + '!!!You are about to interact with operations, which are key components used in governance and various blockchain activities. These include Cardano Governance Certificates, as outlined in CIP-0095, which facilitate governance transactions.', + }, + operationsNoticeButton: { + id: 'txReview.overview.operationsNoticeButton', + defaultMessage: '!!!Ok', + }, + operationsNoticeTitle: { + id: 'txReview.overview.operationsNoticeTitle', + defaultMessage: '!!!What are operations?', + }, }) diff --git a/apps/wallet-mobile/src/features/ReviewTx/illustrations/OperationsNoticeIcon.tsx b/apps/wallet-mobile/src/features/ReviewTx/illustrations/OperationsNoticeIcon.tsx new file mode 100644 index 0000000000..21e0af3ecd --- /dev/null +++ b/apps/wallet-mobile/src/features/ReviewTx/illustrations/OperationsNoticeIcon.tsx @@ -0,0 +1,747 @@ +import * as React from 'react' +import Svg, {Defs, LinearGradient, Path, Stop} from 'react-native-svg' + +export const OperationsNoticeIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx index e4cc8cea70..df99af9170 100644 --- a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx +++ b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx @@ -6,6 +6,7 @@ import {Image} from 'expo-image' import * as React from 'react' import {Linking, ScrollView, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native' +import {Button} from '../../../../../../components/Button/Button' import {Divider} from '../../../../../../components/Divider/Divider' import {Icon} from '../../../../../../components/Icon' import {Info} from '../../../../../../components/Info/Info' @@ -23,6 +24,7 @@ import {Operations, useOperations} from '../../../../common/operations' import {TokenItem} from '../../../../common/TokenItem' import {FormattedOutput, FormattedOutputs, FormattedTx} from '../../../../common/types' import {WalletBalance} from '../../../../common/WalletBalance' +import {OperationsNoticeIcon} from '../../../../illustrations/OperationsNoticeIcon' export const OverviewTab = ({ tx, @@ -40,6 +42,7 @@ export const OverviewTab = ({ const {styles} = useStyles() const operations = useOperations(tx.certificates) const strings = useStrings() + const {openModal} = useModal() const notOwnedOutputs = React.useMemo(() => tx.outputs.filter((output) => !output.ownAddress), [tx.outputs]) const ownedOutputs = React.useMemo(() => tx.outputs.filter((output) => output.ownAddress), [tx.outputs]) @@ -48,6 +51,24 @@ export const OverviewTab = ({ [operations.components], ) + React.useEffect(() => { + let timeout: ReturnType | undefined + + const openOperationsNotice = () => { + clearTimeout(timeout) + + timeout = setTimeout(() => { + openModal(strings.operationsNoticeTitle, , 570) + }, 500) + } + + if (operations.components.length > 0) openOperationsNotice() + + return () => clearTimeout(timeout) + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + return ( @@ -484,6 +505,30 @@ export const CreatedByInfoItem = ({logo, url}: {logo?: string; url: string}) => ) } +export const OperationsNotice = () => { + const {styles} = useStyles() + const strings = useStrings() + const {closeModal} = useModal() + + return ( + + + + + + + + {strings.operationsNoticeText} + + + + +