diff --git a/src/pages/contract-detail/contract-detail.tsx b/src/pages/contract-detail/contract-detail.tsx index 949d29a5..f522d95e 100644 --- a/src/pages/contract-detail/contract-detail.tsx +++ b/src/pages/contract-detail/contract-detail.tsx @@ -1,8 +1,6 @@ import React from 'react' -import SimpleAccordion from '@/view/components/Accordion' import { CopyToClipboardButton } from '@/view/components/CopyButton' import { MonoTypography } from '@/view/components/MonoTypography' -import BasicTabs from '@/view/components/Tabs' import { Box, Typography, Stack, Tooltip } from '@mui/material' import { DefaultToolTipButton } from '@/view/components/DefaultTooltipButton' import EditIcon from '@mui/icons-material/Edit' @@ -13,6 +11,9 @@ import NetworkBadge from '@/view/components/NetworkBadge' import { UseModalBehaviour } from '@/hooks/useModalBehaviour' import { UserContractDetails } from '@/domain' import { isoDate, isoToReadableDate } from '@/utils/formatString' +import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext' +import { ContractDetailsInteraction } from '@/view/ContractDetailsInteraction' +import { ConnectWalletSection } from '@/view/components/ConnectWalletSection' type ContractTabType = 'Read Contract' | 'Write Contract' const types: ContractTabType[] = ['Read Contract', 'Write Contract'] @@ -31,6 +32,7 @@ export default function ContractDetail({ userContract }: Props) { const [type, setType] = React.useState(types[0]) + const { accountConnected } = useNetworkAccountsContext() if (!userContract) { return null } @@ -130,66 +132,13 @@ export default function ContractDetail({ - - - <> - {/* {type} */} - {isReadContract ? ( - <> - - Learn more about your contract πŸ” - - - Let'start to work with your contract displaying each - method. - - - ) : ( - <> - - Interact with your contract πŸ” - - - Let's start to work with your contract doing different - querys. - - - )} - - - - + {accountConnected ? ( + + ) : ( + + )} ) } diff --git a/src/view/ContractDetailsInteraction/index.tsx b/src/view/ContractDetailsInteraction/index.tsx new file mode 100644 index 00000000..41c28c36 --- /dev/null +++ b/src/view/ContractDetailsInteraction/index.tsx @@ -0,0 +1,86 @@ +import { Box, Typography } from '@mui/material' +import React from 'react' +import { UserContractDetails } from '@/domain' +import BasicTabs from '@/components/Tabs' +import SimpleAccordion from '@/components/Accordion' + +type ContractTabType = 'Read Contract' | 'Write Contract' +const types: ContractTabType[] = ['Read Contract', 'Write Contract'] + +interface Props { + userContract: UserContractDetails +} + +export function ContractDetailsInteraction({ userContract }: Props) { + const [type, setType] = React.useState(types[0]) + const isReadContract = type === 'Read Contract' + + const handleChange = (newValue: number) => { + setType(types[newValue]) + } + + return ( + <> + + + <> + {/* {type} */} + {isReadContract ? ( + <> + + Learn more about your contract πŸ” + + + Let'start to work with your contract displaying each + method. + + + ) : ( + <> + + Interact with your contract πŸ” + + + Let's start to work with your contract doing different + querys. + + + )} + + + + + + ) +} diff --git a/src/view/HomeView/ContractsTableWidget/styled.ts b/src/view/HomeView/ContractsTableWidget/styled.ts deleted file mode 100644 index 90b182d4..00000000 --- a/src/view/HomeView/ContractsTableWidget/styled.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { - TableContainer, - TableContainerProps, - Stack, - TableRow -} from '@mui/material' -import { styled } from '@mui/material/styles' - -export const StyledTableContainer = styled(TableContainer)( - ({ theme }) => ({ - '& .MuiTable-root': { - margin: '2rem auto 1rem' - }, - '& .MuiTableCell-root': { - color: theme.palette.secondary.light, - fontSize: '1.1rem', - fontFeatureSettings: '"ss01", "ss02"' - } - }) -) - -export const TokenWrapper = styled(Stack)(() => ({ - flexDirection: 'row', - gap: '0.5rem' -})) - -export const TableRowStyled = styled(TableRow)({ - '&:last-child td, &:last-child th': { - border: 0 - }, - '&:hover': { - backgroundColor: 'rgba(0, 0, 0, 1)', // Ajusta el color segΓΊn tus preferencias - cursor: 'pointer' - } -}) diff --git a/src/view/components/ContractsTable/ContractsTable.tsx b/src/view/components/ContractsTable/ContractsTable.tsx index 67e00a77..757eae19 100644 --- a/src/view/components/ContractsTable/ContractsTable.tsx +++ b/src/view/components/ContractsTable/ContractsTable.tsx @@ -16,11 +16,12 @@ import { CopyToClipboardButton, TokenIconSvg } from '@/components' import { isoDate, isoToReadableDate, + takeLastChars, truncateAddress } from '@/utils/formatString' import { UserContractTableItem } from '@/domain/wizard/ContractTableItem' import { MonoTypography } from '@/components' -import { StyledTableContainer, TokenWrapper } from './styled' +import { StyledTableContainer, TableRowStyled, TokenWrapper } from './styled' import { DefaultToolTipButton } from '@/view/components/DefaultTooltipButton' import EditIcon from '@mui/icons-material/Edit' @@ -39,6 +40,10 @@ import { DeleteContractModal } from '@/view/components/DeleteContractModal' import { UpdateDeployment } from '@/domain/repositories/DeploymentRepository' import { nameWithTimestamp } from '@/utils/generators' import { getUserContractUrl } from './getUserContractUrl' +import router from 'next/router' +import { ROUTES } from '@/constants' +import { MuiTextField } from '../MuiTextField' +import { useRef } from 'react' export interface TableConfig { onlyTable: boolean @@ -72,9 +77,22 @@ function ContractTableRow({ const { updateContract } = useUpdateUserContracts() const { ref: refButton, recentlyClicked } = useRecentlyClicked() const isDownloading = recentlyClicked || contract.isDownloading + const textRef = useRef(null) const typeMap = TITLE_MAP_TOKEN[contract.type] + const handleRowClick = () => { + router.push(`${ROUTES.CONTRACTDETAIL}?uuid=${contract.uuid}`) + } + + const stopPropagation = ( + event: React.MouseEvent, + onFn: () => void + ) => { + event.stopPropagation() + onFn() + } + const handleChange = (event: React.ChangeEvent) => { setError(false) const value = event.target.value @@ -103,14 +121,7 @@ function ContractTableRow({ } return ( - + {editable ? ( <> - + ref={textRef} + > stopPropagation(event, () => handleUpdate())} > setEditable(!editable)} + onClick={event => + stopPropagation(event, () => setEditable(!editable)) + } > ) : ( @@ -153,11 +167,16 @@ function ContractTableRow({ {textInput} {config?.editName && ( setEditable(!editable)} + onClick={event => { + stopPropagation(event, () => { + setEditable(!editable) + textRef.current && textRef.current.focus() + }) + }} > )} @@ -176,7 +195,7 @@ function ContractTableRow({ {truncateAddress(contract.address, 4)} @@ -191,36 +210,36 @@ function ContractTableRow({ setOpenShareModal(true)} + onClick={event => + stopPropagation(event, () => setOpenShareModal(true)) + } > setOpenDeleteModal(true)} + onClick={event => + stopPropagation(event, () => setOpenDeleteModal(true)) + } > - onDownloadMeta(contract)} - > - {isDownloading ? ( - - ) : ( - - - - )} - + Icon={isDownloading ? HourglassBottomIcon : FileDownloadIcon} + title={isDownloading ? '' : 'download .json'} + onClick={event => + stopPropagation(event, () => onDownloadMeta(contract)) + } + > - + ) } @@ -232,7 +251,9 @@ export function ContractsTable({ const [openShareModal, setOpenShareModal] = React.useState(false) const [openDeleteModal, setOpenDeleteModal] = React.useState(false) const [url, setUrl] = React.useState('') - const [contract, setContract] = React.useState({} as UserContractTableItem) + const [contractDeleted, setContractDeleted] = React.useState( + {} as UserContractTableItem + ) return ( <> @@ -271,7 +292,7 @@ export function ContractsTable({ setOpenShareModal(true) }} setOpenDeleteModal={() => { - setContract(contract) + setContractDeleted(contract) setOpenDeleteModal(true) }} /> @@ -289,7 +310,7 @@ export function ContractsTable({ setOpenDeleteModal(false)} - contract={contract} + contract={contractDeleted} > ) diff --git a/src/view/components/ContractsTable/styled.ts b/src/view/components/ContractsTable/styled.ts index 1066de55..8a4013f5 100644 --- a/src/view/components/ContractsTable/styled.ts +++ b/src/view/components/ContractsTable/styled.ts @@ -1,4 +1,9 @@ -import { TableContainer, TableContainerProps, Stack } from '@mui/material' +import { + TableContainer, + TableContainerProps, + Stack, + TableRow +} from '@mui/material' import { styled } from '@mui/material/styles' export const StyledTableContainer = styled(TableContainer)( @@ -22,3 +27,13 @@ export const TokenWrapper = styled(Stack)(() => ({ minWidth: '11rem', alignItems: 'center' })) + +export const TableRowStyled = styled(TableRow)({ + '&:last-child td, &:last-child th': { + border: 0 + }, + '&:hover': { + backgroundColor: '#AD093029', + cursor: 'pointer' + } +}) diff --git a/src/view/components/DefaultTooltipButton/index.tsx b/src/view/components/DefaultTooltipButton/index.tsx index 8bdbdd6f..3de4dc8d 100644 --- a/src/view/components/DefaultTooltipButton/index.tsx +++ b/src/view/components/DefaultTooltipButton/index.tsx @@ -1,23 +1,38 @@ -import { IconButton, SvgIcon, SvgIconTypeMap, SxProps } from '@mui/material' +import { Ref, forwardRef } from 'react' +import { + ButtonProps, + IconButton, + SvgIcon, + SvgIconTypeMap, + SxProps +} from '@mui/material' import Tooltip from '@mui/material/Tooltip' import { OverridableComponent } from '@mui/material/OverridableComponent' -interface Props { +interface Props extends ButtonProps { sx?: SxProps id: string title: string Icon: OverridableComponent> & { muiName: string } - onClick?: React.MouseEventHandler } -export const DefaultToolTipButton = ({ sx, title, Icon, onClick }: Props) => { +export const DefaultToolTipButton = forwardRef(function DefaultToolTipButtonRef( + { sx, title, Icon, onClick, ...other }: Props, + ref: Ref +) { return ( - - + + ) -} +}) diff --git a/src/view/components/MuiTextField/index.tsx b/src/view/components/MuiTextField/index.tsx new file mode 100644 index 00000000..5ba2b965 --- /dev/null +++ b/src/view/components/MuiTextField/index.tsx @@ -0,0 +1,30 @@ +import { TextField, TextFieldProps } from '@mui/material' +import { Ref, forwardRef, useImperativeHandle, useRef } from 'react' + +export const MuiTextField = forwardRef(function MuiTextFieldRef( + props: TextFieldProps, + ref: Ref<{ focus: () => void }> +) { + const inputRef = useRef(null) + + useImperativeHandle(ref, () => ({ + focus: () => { + if (inputRef.current) { + inputRef.current.focus() + } + } + })) + + return ( + { + event.stopPropagation() + if (inputRef.current) { + inputRef.current.focus() + } + }} + /> + ) +})