diff --git a/src/components/common/GradientBoxSafenet/index.tsx b/src/components/common/GradientBoxSafenet/index.tsx new file mode 100644 index 0000000000..7fe560629f --- /dev/null +++ b/src/components/common/GradientBoxSafenet/index.tsx @@ -0,0 +1,58 @@ +import { Box, SvgIcon, Typography } from '@mui/material' +import SafenetIcon from '@/public/images/safenet.svg' +import { type CSSProperties, type ReactNode } from 'react' + +const GradientBoxSafenet = ({ + heading, + children, + className, + style, +}: { + heading?: string + children?: ReactNode + className?: string + style?: CSSProperties +}) => { + return ( + + + + + {heading ?? 'Safenet'} + + + + {children} + + + ) +} + +export default GradientBoxSafenet diff --git a/src/components/transactions/TxDetails/Summary/index.tsx b/src/components/transactions/TxDetails/Summary/index.tsx index 8653901eaf..150a56b4e4 100644 --- a/src/components/transactions/TxDetails/Summary/index.tsx +++ b/src/components/transactions/TxDetails/Summary/index.tsx @@ -14,6 +14,7 @@ import { calculateSafeTransactionHash } from '@safe-global/protocol-kit/dist/src import useSafeInfo from '@/hooks/useSafeInfo' import { SafeTxHashDataRow } from './SafeTxHashDataRow' import { SafenetTxSimulation } from '@/components/tx/security/safenet' +import GradientBoxSafenet from '@/components/common/GradientBoxSafenet' interface Props { txDetails: TransactionDetails @@ -76,17 +77,19 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false } - undefined, - addSignature: () => {}, - encodedSignatures: () => '', - }} - /> + + undefined, + addSignature: () => {}, + encodedSignatures: () => '', + }} + /> + diff --git a/src/components/tx/SignOrExecuteForm/SafenetTxChecks.tsx b/src/components/tx/SignOrExecuteForm/SafenetTxChecks.tsx index 442db557f7..3ed739dc23 100644 --- a/src/components/tx/SignOrExecuteForm/SafenetTxChecks.tsx +++ b/src/components/tx/SignOrExecuteForm/SafenetTxChecks.tsx @@ -1,11 +1,13 @@ +import { Typography } from '@mui/material' +import { type SafeTransaction } from '@safe-global/safe-core-sdk-types' import { type ReactElement } from 'react' +import GradientBoxSafenet from '@/components/common/GradientBoxSafenet' import { SafenetTxSimulation } from '@/components/tx/security/safenet' import TxCard from '@/components/tx-flow/common/TxCard' import useIsSafenetEnabled from '@/hooks/useIsSafenetEnabled' -import { Typography } from '@mui/material' import useChainId from '@/hooks/useChainId' import useSafeAddress from '@/hooks/useSafeAddress' -import type { SafeTransaction } from '@safe-global/safe-core-sdk-types' +import css from './styles.module.css' const SafenetTxChecks = ({ safeTx }: { safeTx: SafeTransaction }): ReactElement | null => { const safe = useSafeAddress() @@ -17,11 +19,12 @@ const SafenetTxChecks = ({ safeTx }: { safeTx: SafeTransaction }): ReactElement } return ( - - Safenet checks - - - + + + Safenet checks + + + ) } diff --git a/src/components/tx/SignOrExecuteForm/styles.module.css b/src/components/tx/SignOrExecuteForm/styles.module.css index 96f1f2223e..45fad25ec6 100644 --- a/src/components/tx/SignOrExecuteForm/styles.module.css +++ b/src/components/tx/SignOrExecuteForm/styles.module.css @@ -75,3 +75,11 @@ border-radius: 4px; padding: 2px 8px; } + +.safenetGradientCard { + margin-bottom: var(--space-2); +} + +.safenetGradientCard > div:last-child > div { + margin-bottom: 0; +} diff --git a/src/components/tx/security/safenet/index.tsx b/src/components/tx/security/safenet/index.tsx index 2801902b9a..83b4578adf 100644 --- a/src/components/tx/security/safenet/index.tsx +++ b/src/components/tx/security/safenet/index.tsx @@ -1,24 +1,14 @@ -import { - CircularProgress, - Link, - List, - ListItem, - ListItemIcon, - ListItemText, - Paper, - SvgIcon, - Typography, -} from '@mui/material' +import { Button, CircularProgress, List, ListItem, ListItemText, Paper, SvgIcon, Typography } from '@mui/material' import type { SafeTransaction } from '@safe-global/safe-core-sdk-types' import useDecodeTx from '@/hooks/useDecodeTx' import CheckIcon from '@/public/images/common/check.svg' import CloseIcon from '@/public/images/common/close.svg' +import LinkIcon from '@/public/images/common/link.svg' import type { SafenetSimulationResponse } from '@/store/safenet' import { useLazySimulateSafenetTxQuery } from '@/store/safenet' +import { hashTypedData } from '@/utils/web3' import { useEffect, type ReactElement } from 'react' import css from './styles.module.css' -import { hashTypedData } from '@/utils/web3' -import { Loop } from '@mui/icons-material' export type SafenetTxSimulationProps = { safe: string @@ -80,6 +70,43 @@ function _getSafeTxHash({ safe, chainId, safeTx }: Required { + if (status === 'success') { + return ( + + + No issues found + + ) + } else if (status === 'pending' && link) { + return ( + } + > + Verify recipient + + ) + } else { + return ( + + + Failure + + ) + } +} + const SafenetTxTxSimulationSummary = ({ simulation }: { simulation: SafenetSimulationResponse }): ReactElement => { if (simulation.results.length === 0) { return No Safenet checks enabled... @@ -97,26 +124,8 @@ const SafenetTxTxSimulationSummary = ({ simulation }: { simulation: SafenetSimul {guarantees.map(({ display, status, link }) => ( - - - {status === 'success' && ( - - )} - {status === 'failure' && } - {status === 'pending' && } - - - {display} - {status === 'pending' && link && ( - - Share this{' '} - - link - {' '} - to the recipient to confirm the transfer - - )} - + }> + {display} ))} diff --git a/src/components/tx/security/safenet/styles.module.css b/src/components/tx/security/safenet/styles.module.css index d398edd6e1..ffd4ca6658 100644 --- a/src/components/tx/security/safenet/styles.module.css +++ b/src/components/tx/security/safenet/styles.module.css @@ -9,3 +9,18 @@ .errorSummary { padding: calc(var(--space-1) * 2) calc(var(--space-2) * 2) var(--space-1) calc(var(--space-2) * 2); } + +.labelSuccess { + color: var(--color-success-main); + font-size: 0.9rem; +} + +.labelFailure { + color: var(--color-error-main); + font-size: 0.9rem; +} + +.safenetCheckIcon { + vertical-align: middle; + margin: 0 4px 2px 0; +}