diff --git a/packages/site/gatsby-config.ts b/packages/site/gatsby-config.ts index 9a453b6..6596f31 100644 --- a/packages/site/gatsby-config.ts +++ b/packages/site/gatsby-config.ts @@ -14,7 +14,6 @@ const config: GatsbyConfig = { options: { name: 'ChainTrack Snap', icon: 'src/assets/logo.svg', - theme_color: '#6F4CFF', background_color: '#FFFFFF', display: 'standalone', }, diff --git a/packages/site/package.json b/packages/site/package.json index bf61408..0863004 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -66,8 +66,8 @@ "eslint-plugin-jsdoc": "^39.2.9", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^4.2.1", - "gatsby": "^4.24.4", - "gatsby-plugin-manifest": "^4.24.0", + "gatsby": "^5.12.9", + "gatsby-plugin-manifest": "^5.12.3", "gatsby-plugin-svgr": "^3.0.0-beta.0", "prettier": "^2.2.1", "prettier-plugin-packagejson": "^2.2.18", diff --git a/packages/site/src/Root.tsx b/packages/site/src/Root.tsx index 26ef89f..9eb73d9 100644 --- a/packages/site/src/Root.tsx +++ b/packages/site/src/Root.tsx @@ -30,7 +30,9 @@ export const ToggleThemeContext = createContext({ }); export const Root: FunctionComponent = ({ children }) => { - const [mode, setMode] = useState<'light' | 'dark'>(getThemePreference()); + const [mode, setMode] = useState<'light' | 'dark' | null>( + getThemePreference(), + ); const colorMode = useMemo( () => ({ toggleColorMode: () => { @@ -44,27 +46,33 @@ export const Root: FunctionComponent = ({ children }) => { [], ); - const theme = createTheme({ - palette: { - mode, - primary: mode === 'dark' ? blueGrey : brown, - secondary: mode === 'dark' ? grey : blueGrey, - }, - custom: mode === 'dark' ? { ...dark } : { ...light }, - }); + let theme; + + if (mode) { + theme = createTheme({ + palette: { + mode, + primary: mode === 'dark' ? blueGrey : brown, + secondary: mode === 'dark' ? grey : blueGrey, + }, + custom: mode === 'dark' ? { ...dark } : { ...light }, + }); + } useEffect(() => { setMode(getThemePreference()); }, []); + if (!mode || !theme) { + return null; + } + return ( - mode && ( - - - - {children} - - - ) + + + + {children} + + ); }; diff --git a/packages/site/src/components/About/AboutCTA.tsx b/packages/site/src/components/About/AboutCTA.tsx index ba5e364..0f311fe 100644 --- a/packages/site/src/components/About/AboutCTA.tsx +++ b/packages/site/src/components/About/AboutCTA.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react'; -import { Box, Typography } from '@mui/material'; +import { Box, Typography, useMediaQuery } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; import { MyButton } from '../Button'; type AboutCTAProps = { @@ -11,18 +12,27 @@ export const AboutCTA: FC = ({ handleConnectClick, disabled, }) => { + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); + return ( - + Stay on top of your recurring transactions. - + Experience the ChainTrack difference today. @@ -31,9 +41,9 @@ export const AboutCTA: FC = ({ onClick={handleConnectClick} size="large" sx={{ - fontSize: '25x', - fontWeight: 400, - padding: '15px 30px', + fontSize: '2rem', + fontWeight: 500, + padding: '20px 40px', }} > Get Started with ChainTrack diff --git a/packages/site/src/components/About/AboutFAQ.tsx b/packages/site/src/components/About/AboutFAQ.tsx index c19a7d9..e985f97 100644 --- a/packages/site/src/components/About/AboutFAQ.tsx +++ b/packages/site/src/components/About/AboutFAQ.tsx @@ -5,19 +5,24 @@ import { AccordionSummary, Box, Typography, + useMediaQuery, } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Grid from '@mui/material/Grid'; +import { useTheme } from '@mui/material/styles'; export const AboutFaq: FC = () => { + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); + return ( diff --git a/packages/site/src/components/About/AboutFeatureSection.tsx b/packages/site/src/components/About/AboutFeatureSection.tsx index 8d8b66e..8ee0620 100644 --- a/packages/site/src/components/About/AboutFeatureSection.tsx +++ b/packages/site/src/components/About/AboutFeatureSection.tsx @@ -1,10 +1,14 @@ import React, { FC } from 'react'; -import { Typography, styled, Grid, Box } from '@mui/material'; +import { Typography, styled, Grid, useMediaQuery } from '@mui/material'; import CodeIcon from '@mui/icons-material/Code'; import StarBorderIcon from '@mui/icons-material/StarBorder'; import SmartphoneIcon from '@mui/icons-material/Smartphone'; +import { useTheme } from '@mui/material/styles'; export const AboutFeatureSection: FC = () => { + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); + const BorderLine = styled('div')(() => ({ minHeight: '25px', margin: '60px 0 40px 0', @@ -30,16 +34,15 @@ export const AboutFeatureSection: FC = () => { - - - WHAT WE DO - - - + Exclusively for MetaMask users, we'll alert you about recurring transaction that hasn't taken place. diff --git a/packages/site/src/components/About/AboutHero.tsx b/packages/site/src/components/About/AboutHero.tsx index 083df30..9761218 100644 --- a/packages/site/src/components/About/AboutHero.tsx +++ b/packages/site/src/components/About/AboutHero.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { Box, Typography } from '@mui/material'; +import { Box, Typography, useMediaQuery } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { MyButton } from '../Button'; @@ -13,24 +13,25 @@ export const AboutHero: FC = ({ disabled, }) => { const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); return ( ChainTrack = ({ { + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); + return ( - - - + + + "ChainTrack is one of my first dives into the web3 world. Hope you dig it!" - + Nikolay S. - + Software Engineer - - + + "ChainTrack exhibits simplicity, effectiveness, and reliability. It has significantly improved the fluidity of my MetaMask experience." - + Dzmitry H. - + Software Engineer diff --git a/packages/site/src/components/ActionCard.tsx b/packages/site/src/components/ActionCard.tsx index f846b1f..77ecd73 100644 --- a/packages/site/src/components/ActionCard.tsx +++ b/packages/site/src/components/ActionCard.tsx @@ -6,13 +6,12 @@ import CardActions from '@mui/material/CardActions'; import * as React from 'react'; import Card from '@mui/material/Card'; import { useTheme } from '@mui/material/styles'; -import { Box } from '@mui/material'; +import { Box, useMediaQuery } from '@mui/material'; type CardProps = { content: { title?: string; description: ReactNode; - button?: ReactNode; buttons?: ReactNode[]; }; disabled?: boolean; @@ -20,8 +19,9 @@ type CardProps = { }; export const ActionCard = ({ content }: CardProps) => { - const { title, description, button, buttons } = content; + const { title, description, buttons } = content; const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); return ( { {description} - {button && {button}} - {buttons && {buttons}} + {buttons && ( + + {buttons} + + )} ); }; diff --git a/packages/site/src/components/AddMonitorActionCard.tsx b/packages/site/src/components/AddMonitorActionCard.tsx index db8b921..316fbaa 100644 --- a/packages/site/src/components/AddMonitorActionCard.tsx +++ b/packages/site/src/components/AddMonitorActionCard.tsx @@ -28,16 +28,16 @@ export function AddMonitorActionCard({ installedSnap, handleSendAddClick, }: ConnectActionCardProps) { - const button = ( + const buttons = [ Add Transaction - - ); + , + ]; const content = { title: 'Add Transaction', description, - button, + buttons, }; return ; diff --git a/packages/site/src/components/AddTransactionModal.tsx b/packages/site/src/components/AddTransactionModal.tsx index 8b16afd..91018be 100644 --- a/packages/site/src/components/AddTransactionModal.tsx +++ b/packages/site/src/components/AddTransactionModal.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { Modal, Box, InputLabel } from '@mui/material'; +import { Modal, Box, InputLabel, useTheme, useMediaQuery } from '@mui/material'; import FormControl from '@mui/material/FormControl'; import TextField from '@mui/material/TextField'; @@ -13,8 +13,6 @@ import { } from '../../../shared/types'; import { MetaMaskContext } from '../hooks'; import { MyButton } from './Button'; -// eslint-disable-next-line import/no-unassigned-import -import './styles.css'; type AddTransactionModalProps = { open: boolean; @@ -26,18 +24,6 @@ type AddTransactionModalProps = { predefinedMonitor?: PredefinedMonitor; }; -const style = { - position: 'absolute' as const, - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 600, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: 24, - p: 4, -}; - export const AddTransactionModal = ({ open, editTransaction, @@ -51,6 +37,9 @@ export const AddTransactionModal = ({ const [monitor, setMonitor] = React.useState>( predefinedMonitor || {}, ); + const theme = useTheme(); + const screenLessThanSmall = useMediaQuery(theme.breakpoints.down('sm')); + React.useEffect(() => { setMonitor(predefinedMonitor || {}); }, [predefinedMonitor]); @@ -79,170 +68,185 @@ export const AddTransactionModal = ({ aria-describedby="modal-modal-description" className="add-transactions-modal" > - - console.log('qwer')}> - { - setMonitor({ ...monitor, name: event.target.value }); - }} - /> + + + + { + setMonitor({ ...monitor, name: event.target.value }); + }} + /> - - - Network - - { + setMonitor({ + ...monitor, + network: event.target.value as ChainIds, + }); + }} + > + {Object.keys(ChainNameToIdEnum).map((name) => ( + + {name} + + ))} + + + + { - setMonitor({ - ...monitor, - network: event.target.value as ChainIds, - }); + setMonitor({ ...monitor, from: event.target.value }); }} - > - {Object.keys(ChainNameToIdEnum).map((name) => ( - - {name} - - ))} - - - - { - setMonitor({ ...monitor, from: event.target.value }); - }} - /> + /> - { - setMonitor({ ...monitor, to: event.target.value }); - }} - /> + { + setMonitor({ ...monitor, to: event.target.value }); + }} + /> - { - setMonitor({ ...monitor, intervalHours: event.target.value }); - }} - /> + { + setMonitor({ ...monitor, intervalHours: event.target.value }); + }} + /> - { - setMonitor({ ...monitor, contractAddress: event.target.value }); - }} - /> + { + setMonitor({ ...monitor, contractAddress: event.target.value }); + }} + /> - { - setMonitor({ - ...monitor, - amount: event.target.value - ? Number(event.target.value) - : undefined, - }); - }} - /> + { + setMonitor({ + ...monitor, + amount: event.target.value + ? Number(event.target.value) + : undefined, + }); + }} + /> - { - setMonitor({ ...monitor, url: event.target.value }); - }} - /> - + { + setMonitor({ ...monitor, url: event.target.value }); + }} + /> + - - { - if (editTransaction) { - handleUpdateMonitor(monitor as Monitor); - } else { - handleAddMonitor(monitor as Monitor); + + { + if (editTransaction) { + handleUpdateMonitor(monitor as Monitor); + } else { + handleAddMonitor(monitor as Monitor); + } + setOpenAddTransactionModal(false); + setMonitor({}); + }} + fullWidth + disabled={ + !monitor?.from || + !monitor?.to || + !monitor?.network || + !monitor?.intervalHours } - setOpenAddTransactionModal(false); - setMonitor({}); - }} - fullWidth - disabled={ - !monitor?.from || - !monitor?.to || - !monitor?.network || - !monitor?.intervalHours - } - > - {editTransaction ? 'Update transaction' : 'Start Monitoring'} - + > + {editTransaction ? 'Update transaction' : 'Start Monitoring'} + + diff --git a/packages/site/src/components/AlertsTable.tsx b/packages/site/src/components/AlertsTable.tsx index 63c5661..d64986c 100644 --- a/packages/site/src/components/AlertsTable.tsx +++ b/packages/site/src/components/AlertsTable.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; import { DataGrid, GridColDef } from '@mui/x-data-grid'; +import { useTheme } from '@mui/material/styles'; +import { useMediaQuery } from '@mui/material'; import { Alerts } from '../../../shared/types'; import { column } from './MonitorsTable'; @@ -22,6 +24,8 @@ type MonitorsTableProps = { }; export const AlertsTable = ({ alerts }: MonitorsTableProps) => { + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); const data = alerts?.map((alert) => { return { ...alert.monitor, ...alert }; }); @@ -29,7 +33,9 @@ export const AlertsTable = ({ alerts }: MonitorsTableProps) => {
+ screenLessThanMedium ? { ...col, flex: 0 } : col, + )} initialState={{ pagination: { paginationModel: { page: 0, pageSize: 10 }, diff --git a/packages/site/src/components/CatalogActionCard.tsx b/packages/site/src/components/CatalogActionCard.tsx index ddf446e..31c8bf6 100644 --- a/packages/site/src/components/CatalogActionCard.tsx +++ b/packages/site/src/components/CatalogActionCard.tsx @@ -41,7 +41,6 @@ export function CatalogActionCard({ color="secondary" href="https://github.com/NasCorp/ChainTrack/issues" target="_blank" - sx={{ marginLeft: '10px' }} disabled={!installedSnap} mykey="idea" key="idea" diff --git a/packages/site/src/components/Donate.tsx b/packages/site/src/components/Donate.tsx index e7389dc..cf86e81 100644 --- a/packages/site/src/components/Donate.tsx +++ b/packages/site/src/components/Donate.tsx @@ -51,8 +51,7 @@ export const Donate = () => { return ( { onClick={handleDonateClick} startIcon={} color="secondary" + disabled={!state.installedSnap} > Donate diff --git a/packages/site/src/components/Footer.tsx b/packages/site/src/components/Footer.tsx index b2b98ce..176a75e 100644 --- a/packages/site/src/components/Footer.tsx +++ b/packages/site/src/components/Footer.tsx @@ -1,24 +1,48 @@ -import { IconButton, Typography } from '@mui/material'; +import { Box, IconButton, Typography, useMediaQuery } from '@mui/material'; import React from 'react'; import GitHubIcon from '@mui/icons-material/GitHub'; import TelegramIcon from '@mui/icons-material/Telegram'; import Grid from '@mui/material/Grid'; +import { useTheme } from '@mui/material/styles'; +import { Link } from 'gatsby'; +import { HOME_ROUTE } from '../routes'; import { SnapName } from './SnapName'; import { Logo } from './Logo'; export const Footer = () => { + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); + return ( - - - + + + + + + + - + { - + {!screenLessThanMedium && } ); }; diff --git a/packages/site/src/components/Header.tsx b/packages/site/src/components/Header.tsx index 015f67f..3bd2e61 100644 --- a/packages/site/src/components/Header.tsx +++ b/packages/site/src/components/Header.tsx @@ -1,9 +1,21 @@ -import { useContext } from 'react'; -import { Box } from '@mui/material'; +import { useContext, useState } from 'react'; +import { + Box, + IconButton, + Menu, + Toolbar, + Typography, + useMediaQuery, +} from '@mui/material'; import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'; - +import { navigate, Link } from 'gatsby'; +import { useTheme } from '@mui/material/styles'; +import MenuItem from '@mui/material/MenuItem'; +import MenuIcon from '@mui/icons-material/Menu'; import { MetamaskActions, MetaMaskContext } from '../hooks'; import { connectSnap, getSnap } from '../utils'; +import Analytics, { Action } from '../utils/analytics'; +import { HOME_ROUTE, TRACKING_ROUTE } from '../routes'; import { Toggle } from './Toggle'; import { SnapName } from './SnapName'; import { MyButton } from './Button'; @@ -16,8 +28,16 @@ export const Header = ({ handleToggleClick(): void; }) => { const [state, dispatch] = useContext(MetaMaskContext); + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); const handleConnectClick = async () => { + Analytics.trackUserEvent({ + action: Action.snapConnectClick, + }); + try { await connectSnap(); const installedSnap = await getSnap(); @@ -26,51 +46,134 @@ export const Header = ({ type: MetamaskActions.SetInstalled, payload: installedSnap, }); + navigate(TRACKING_ROUTE); } catch (e) { console.error(e); dispatch({ type: MetamaskActions.SetError, payload: e }); + dispatch({ + type: MetamaskActions.SetInstalled, + payload: null, + }); } }; - return ( - - - - - - - - {state.installedSnap ? ( - ( + <> + {state.installedSnap ? ( + + } > - } - > - Connected - - - ) : ( - - } - onClick={handleConnectClick} + Connected + + + ) : ( + + } + onClick={handleConnectClick} + > + Connect + + + )} + + ); + + return ( + + + + + + + + + + {!screenLessThanMedium && ( + - Connect - - - )} - + + Tracking + + + )} + + + {screenLessThanMedium ? ( + <> + setAnchorEl(event?.currentTarget)} + > + + + setAnchorEl(null)} + > + { + navigate(HOME_ROUTE); + setAnchorEl(null); + }} + divider + sx={{ fontSize: '2rem' }} + > + Home + + { + navigate(TRACKING_ROUTE); + setAnchorEl(null); + }} + divider + sx={{ fontSize: '2rem' }} + > + Tracking + + + + + + + + ) : ( + <> + + + + )} + + ); }; diff --git a/packages/site/src/components/Layout.tsx b/packages/site/src/components/Layout.tsx new file mode 100644 index 0000000..be15173 --- /dev/null +++ b/packages/site/src/components/Layout.tsx @@ -0,0 +1,193 @@ +import React, { ReactElement, useContext, useEffect } from 'react'; +import { navigate } from 'gatsby'; +import { MetamaskActions, MetaMaskContext } from '../hooks'; +import { + connectSnap, + getAlerts, + getMonitors, + getUserStats, + getSnap, + isLocalSnap, + resetData, + sendAdd, +} from '../utils'; +import { defaultSnapOrigin } from '../config'; +import Analytics, { Action } from '../utils/analytics'; +import { ChainIdToNameEnum } from '../../../shared/types'; +import { TRACKING_ROUTE } from '../routes'; +import ErrorHandler from './ErrorHandler'; + +export type LayoutChildrenProps = { + handleConnectClick: () => void; + handleResetClick: () => void; + handleReloadClick: () => void; + handleAddClick: () => void; + loadSnapData: () => void; + isMetaMaskReady: boolean; +}; + +type LayoutProps = { + children: (props: LayoutChildrenProps) => ReactElement; +}; + +const Layout = ({ children }: LayoutProps) => { + let loadDataInterval: NodeJS.Timeout | null = null; + const [state, dispatch] = useContext(MetaMaskContext); + const isMetaMaskReady = isLocalSnap(defaultSnapOrigin) && state.snapsDetected; + + const getWallets = async () => { + try { + const data = await window.ethereum.request({ + method: 'eth_requestAccounts', + }); + dispatch({ type: MetamaskActions.SetWallets, payload: data }); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + const getChain = async () => { + try { + const data = await window.ethereum.request< + keyof typeof ChainIdToNameEnum + >({ + method: 'eth_chainId', + }); + dispatch({ type: MetamaskActions.SetChain, payload: data }); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + const loadMonitors = async () => { + try { + const data = await getMonitors(); + dispatch({ type: MetamaskActions.SetMonitors, payload: data }); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + const loadAlerts = async () => { + try { + const data = await getAlerts(); + dispatch({ type: MetamaskActions.SetAlerts, payload: data }); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + const loadUserStats = async () => { + try { + const data = await getUserStats(); + dispatch({ type: MetamaskActions.SetUserStats, payload: data }); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + async function loadSnapData() { + dispatch({ type: MetamaskActions.SetLoading, payload: true }); + await Promise.all([ + getWallets(), + getChain(), + loadMonitors(), + loadAlerts(), + loadUserStats(), + ]); + dispatch({ type: MetamaskActions.SetLoading, payload: false }); + } + + async function startLoadingSnapData() { + if (!loadDataInterval) { + await loadSnapData(); + // eslint-disable-next-line require-atomic-updates + loadDataInterval = setInterval(loadSnapData, 5 * 60 * 1000); + } + } + + const handleConnectClick = async () => { + if (loadDataInterval) { + clearInterval(loadDataInterval); + loadDataInterval = null; + } + + Analytics.trackUserEvent({ + action: Action.snapConnectClick, + }); + + try { + await connectSnap(); + const installedSnap = await getSnap(); + + dispatch({ + type: MetamaskActions.SetInstalled, + payload: installedSnap, + }); + + await startLoadingSnapData(); + navigate(TRACKING_ROUTE); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + dispatch({ + type: MetamaskActions.SetInstalled, + payload: null, + }); + } + }; + + const handleResetClick = async () => { + try { + await resetData(); + await loadSnapData(); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + const handleReloadClick = async () => { + try { + await loadSnapData(); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + const handleAddClick = async () => { + try { + await sendAdd(); + } catch (e) { + console.error(e); + dispatch({ type: MetamaskActions.SetError, payload: e }); + } + }; + + useEffect(() => { + if (state.installedSnap) { + loadSnapData(); + } + }, [state.installedSnap]); + + return ( + + {children({ + handleConnectClick, + handleReloadClick, + handleResetClick, + handleAddClick, + isMetaMaskReady, + loadSnapData, + })} + + ); +}; + +export default Layout; diff --git a/packages/site/src/components/Logo.tsx b/packages/site/src/components/Logo.tsx index 2b96da0..a5889ed 100644 --- a/packages/site/src/components/Logo.tsx +++ b/packages/site/src/components/Logo.tsx @@ -7,7 +7,7 @@ export const Logo = ({ size }: { size: number }) => ( xmlns="http://www.w3.org/2000/svg" > ( fill="#D9D9D9" /> - + ( fill="#D9D9D9" /> - + - - + + - - + + - - + + - - + + - - + + - + - - + + - + - + ( - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - + + ( - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/packages/site/src/components/MonitorsTable.tsx b/packages/site/src/components/MonitorsTable.tsx index dbe2d89..c4bc0b5 100644 --- a/packages/site/src/components/MonitorsTable.tsx +++ b/packages/site/src/components/MonitorsTable.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGrid, GridColDef } from '@mui/x-data-grid'; +import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'; import { Button, ButtonGroup, @@ -9,10 +9,12 @@ import { IconButton, Link, Typography, + useMediaQuery, } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import { useState } from 'react'; +import { useTheme } from '@mui/material/styles'; import { ChainIdToNameEnum, Monitor, @@ -121,10 +123,12 @@ export const MonitorsTable = ({ }: MonitorsTableProps) => { const throwAsyncError = useThrowAsyncError(); const [monitorToDelete, setMonitorToDelete] = useState(); + const theme = useTheme(); + const screenLessThanMedium = useMediaQuery(theme.breakpoints.down('md')); const columns: GridColDef[] = [ { - renderCell: (params) => ( + renderCell: (params: GridRenderCellParams) => ( openAddTransactionModal(params.row, true)}> @@ -146,7 +150,7 @@ export const MonitorsTable = ({ column.contractAddress, column.amount, column.url, - ]; + ].map((col) => (screenLessThanMedium ? { ...col, flex: 0 } : col)); return (
@@ -183,7 +187,7 @@ export const MonitorsTable = ({