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,
}}