diff --git a/src/components/tx-flow/common/TxButton.tsx b/src/components/tx-flow/common/TxButton.tsx
index 32452c4385..5bcda48681 100644
--- a/src/components/tx-flow/common/TxButton.tsx
+++ b/src/components/tx-flow/common/TxButton.tsx
@@ -1,23 +1,59 @@
-import { Button, SvgIcon } from '@mui/material'
-import type { ButtonProps } from '@mui/material'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Button, SvgIcon, type ButtonProps } from '@mui/material'
import AssetsIcon from '@/public/images/sidebar/assets.svg'
import NftIcon from '@/public/images/common/nft.svg'
+import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
+import { AppRoutes } from '@/config/routes'
+import Track from '@/components/common/Track'
+import { MODALS_EVENTS } from '@/services/analytics'
const TxButton = ({ sx, ...props }: ButtonProps) => (
)
export const SendTokensButton = ({ onClick, ...props }: ButtonProps) => (
- } {...props}>
- Send tokens
-
+
)
-export const SendNFTsButton = ({ onClick, ...props }: ButtonProps) => (
- } {...props}>
- Send NFTs
-
-)
+export const SendNFTsButton = ({ onClick, ...props }: ButtonProps) => {
+ const router = useRouter()
+
+ return (
+
+ )
+}
+
+export const TxBuilderButton = ({ ...props }: ButtonProps) => {
+ const txBuilder = useTxBuilderApp()
+ if (!txBuilder?.app) return null
+
+ return (
+
+ )
+}
export default TxButton
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
index 9b089bd017..4183aabad4 100644
--- a/src/components/tx-flow/flows/NewTx/index.tsx
+++ b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -1,27 +1,14 @@
import { useCallback, useContext } from 'react'
-import { useRouter } from 'next/router'
-import TxButton, { SendNFTsButton, SendTokensButton } from '@/components/tx-flow/common/TxButton'
-import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
+import { SendNFTsButton, SendTokensButton, TxBuilderButton } from '@/components/tx-flow/common/TxButton'
import { Box, Typography } from '@mui/material'
import { TxModalContext } from '../../'
import TokenTransferFlow from '../TokenTransfer'
-import { AppRoutes } from '@/config/routes'
import css from './styles.module.css'
-import Link from 'next/link'
-const BUTTONS_HEIGHT = '91px'
+const buttonSx = { height: '91px' }
const NewTxMenu = () => {
- const router = useRouter()
const { setTxFlow } = useContext(TxModalContext)
- const txBuilder = useTxBuilderApp()
-
- const onNftsClick = useCallback(() => {
- router.push({
- pathname: AppRoutes.balances.nfts,
- query: { safe: router.query.safe },
- })
- }, [router])
const onTokensClick = useCallback(() => {
setTxFlow()
@@ -33,24 +20,11 @@ const NewTxMenu = () => {
New transaction
-
-
-
-
- {txBuilder && txBuilder.app && (
-
-
- }
- variant="outlined"
- onClick={() => console.log('open contract interaction flow')}
- sx={{ height: BUTTONS_HEIGHT }}
- >
- Contract interaction
-
-
-
- )}
+
+
+
+
+
)
}