diff --git a/src/components/tx/security/redefine/RedefineBalanceChange.tsx b/src/components/tx/security/redefine/RedefineBalanceChange.tsx index d77d60e089..0191994ad3 100644 --- a/src/components/tx/security/redefine/RedefineBalanceChange.tsx +++ b/src/components/tx/security/redefine/RedefineBalanceChange.tsx @@ -7,19 +7,15 @@ import { type RedefineModuleResponse } from '@/services/security/modules/Redefin import { sameAddress } from '@/utils/addresses' import { FEATURES } from '@/utils/chains' import { formatVisualAmount } from '@/utils/formatters' -import { Box, Chip, CircularProgress, Grid, SvgIcon, Typography } from '@mui/material' +import { Box, Chip, CircularProgress, Grid, Typography } from '@mui/material' import { TokenType } from '@safe-global/safe-gateway-typescript-sdk' import { ErrorBoundary } from '@sentry/react' import { useContext } from 'react' import { TxSecurityContext } from '../shared/TxSecurityContext' -import RedefineLogo from '@/public/images/transactions/redefine.svg' -import RedefineLogoDark from '@/public/images/transactions/redefine-dark-mode.svg' import ArrowOutwardIcon from '@/public/images/transactions/outgoing.svg' import ArrowDownwardIcon from '@/public/images/transactions/incoming.svg' import css from './styles.module.css' -import sharedCss from '@/components/tx/security/shared/styles.module.css' -import { useDarkMode } from '@/hooks/useDarkMode' const FungibleBalanceChange = ({ change, @@ -43,6 +39,7 @@ const FungibleBalanceChange = ({ {change.symbol} + ) @@ -77,6 +74,7 @@ const NFTBalanceChange = ({ #{change.tokenId} + ) @@ -101,28 +99,28 @@ const BalanceChange = ({ const BalanceChanges = () => { const { balanceChange, isLoading } = useContext(TxSecurityContext) - const totalBalanceChanges = balanceChange ? balanceChange.in.length + balanceChange.out.length : 0 + const totalBalanceChanges = balanceChange ? balanceChange.in.length + balanceChange.out.length : undefined if (isLoading && !balanceChange) { return (
palette.text.secondary, }} /> - + Calculating...
) } - if (totalBalanceChanges === 0) { + if (totalBalanceChanges && totalBalanceChanges === 0) { return ( - - None + + No balance change detected ) } @@ -143,30 +141,19 @@ const BalanceChanges = () => { export const RedefineBalanceChanges = () => { const isFeatureEnabled = useHasFeature(FEATURES.RISK_MITIGATION) - const isDarkMode = useDarkMode() if (!isFeatureEnabled) { return null } return ( - - - - Balance change - - - Powered by{' '} - - - +
+ + Balance change + Error showing balance changes
}> -
+ ) } diff --git a/src/components/tx/security/redefine/index.tsx b/src/components/tx/security/redefine/index.tsx index 36697ba0ec..9796da18d9 100644 --- a/src/components/tx/security/redefine/index.tsx +++ b/src/components/tx/security/redefine/index.tsx @@ -57,7 +57,7 @@ const RedefineBlock = () => {
{isLoading ? ( palette.text.secondary, }} diff --git a/src/components/tx/security/redefine/styles.module.css b/src/components/tx/security/redefine/styles.module.css index f1c664eb7f..48f7809ff9 100644 --- a/src/components/tx/security/redefine/styles.module.css +++ b/src/components/tx/security/redefine/styles.module.css @@ -25,21 +25,20 @@ .loader { display: flex; align-items: center; - padding-left: var(--space-2); + gap: var(--space-1); + padding-right: 12px; + justify-self: flex-end; } .balanceChanges { - padding: var(--space-2); max-height: 300px; overflow-y: auto; align-items: center; - gap: 1px; + gap: var(--space-1); } .balanceChange { display: flex; - border-radius: 6px; - align-items: center; margin-bottom: 6px; } @@ -59,23 +58,13 @@ .categoryChip { border-radius: 4px; - margin-left: auto; height: auto; } -.head { - border-bottom: 1px solid var(--color-border-light); - padding: var(--space-1) var(--space-2); - - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - .box { border-radius: 6px; border: 1px solid var(--color-border-light); - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 35% auto; + padding: var(--space-2) 12px; } diff --git a/src/components/tx/security/tenderly/index.tsx b/src/components/tx/security/tenderly/index.tsx index 7e8d99a9f1..d00045272c 100644 --- a/src/components/tx/security/tenderly/index.tsx +++ b/src/components/tx/security/tenderly/index.tsx @@ -87,7 +87,7 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit }: TxSimulationPro
{isLoading ? ( palette.text.secondary, }}