Skip to content

Commit 7736074

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Fix MUI Grid compatibility issues for v7.2.0
Co-authored-by: 0xrinegade <[email protected]>
1 parent c681f09 commit 7736074

File tree

7 files changed

+39
-39
lines changed

7 files changed

+39
-39
lines changed

‎src/components/AEANetwork/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import {
66
Button,
77
CircularProgress,
88
Alert,
9-
Grid,
109
Dialog,
1110
DialogTitle,
1211
DialogContent,
1312
DialogActions,
1413
Tabs,
1514
Tab,
15+
Grid,
1616
} from '@mui/material';
1717
import {
1818
SmartToy as AgentIcon,
@@ -271,7 +271,7 @@ export const AEANetworkInterface: React.FC<AEANetworkInterfaceProps> = ({ isActi
271271
<>
272272
<Grid container spacing={3} sx={{ marginTop: 2 }}>
273273
{agentPagination.paginatedItems.map((agent) => (
274-
<Grid item xs={12} md={6} lg={4} key={agent.id}>
274+
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={agent.id}>
275275
<AgentCard agent={agent} onView={handleViewItem} />
276276
</Grid>
277277
))}
@@ -333,7 +333,7 @@ export const AEANetworkInterface: React.FC<AEANetworkInterfaceProps> = ({ isActi
333333
<>
334334
<Grid container spacing={3} sx={{ marginTop: 2 }}>
335335
{mcpPagination.paginatedItems.map((server) => (
336-
<Grid item xs={12} md={6} lg={4} key={server.id}>
336+
<Grid size={{ xs: 12, md: 6, lg: 4 }} key={server.id}>
337337
<MCPServerCard server={server} onView={handleViewItem} />
338338
</Grid>
339339
))}

‎src/components/OnboardingSetup.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import styled from 'styled-components';
4-
import { Card, CardContent, Typography, Button, Grid, Box } from '@mui/material';
4+
import { Card, CardContent, Typography, Button, Box, Grid } from '@mui/material';
55
import { CheckCircle as CheckIcon } from '@mui/icons-material';
66
import { useTheme } from '../context/ThemeContext';
77
import { supportedLanguages } from '../i18n';
@@ -287,7 +287,7 @@ export const OnboardingSetup: React.FC<OnboardingSetupProps> = ({ onComplete })
287287

288288
<OptionGrid container spacing={2}>
289289
{supportedLanguages.map((language) => (
290-
<Grid item xs={6} sm={4} key={language.code}>
290+
<Grid size={{ xs: 6, sm: 4 }} key={language.code}>
291291
<OptionCard
292292
selected={selectedLanguage === language.code}
293293
onClick={() => handleLanguageSelect(language.code)}
@@ -324,7 +324,7 @@ export const OnboardingSetup: React.FC<OnboardingSetupProps> = ({ onComplete })
324324

325325
<OptionGrid container spacing={2}>
326326
{Object.entries(availableThemes).map(([themeKey, theme]) => (
327-
<Grid item xs={6} sm={4} key={themeKey}>
327+
<Grid size={{ xs: 6, sm: 4 }} key={themeKey}>
328328
<OptionCard
329329
selected={selectedTheme === themeKey}
330330
onClick={() => handleThemeSelect(themeKey as ThemeName)}

‎src/components/SVMPay/index.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
430430

431431
{/* Action Selection */}
432432
<Grid container spacing={2} mb={3}>
433-
<Grid item xs={12} sm={4}>
433+
<Grid size={{ xs: 12, sm: 4 }}>
434434
<ActionCard
435435
onClick={() => setActiveTab('send')}
436436
elevation={activeTab === 'send' ? 8 : 2}
@@ -442,7 +442,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
442442
</Typography>
443443
</ActionCard>
444444
</Grid>
445-
<Grid item xs={12} sm={4}>
445+
<Grid size={{ xs: 12, sm: 4 }}>
446446
<ActionCard
447447
onClick={() => setActiveTab('request')}
448448
elevation={activeTab === 'request' ? 8 : 2}
@@ -454,7 +454,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
454454
</Typography>
455455
</ActionCard>
456456
</Grid>
457-
<Grid item xs={12} sm={4}>
457+
<Grid size={{ xs: 12, sm: 4 }}>
458458
<ActionCard
459459
onClick={() => setActiveTab('process')}
460460
elevation={activeTab === 'process' ? 8 : 2}
@@ -488,7 +488,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
488488
Send Payment
489489
</Typography>
490490
<Grid container spacing={2}>
491-
<Grid item xs={12}>
491+
<Grid size={12}>
492492
<StyledTextField
493493
fullWidth
494494
label="Recipient Address"
@@ -506,7 +506,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
506506
}}
507507
/>
508508
</Grid>
509-
<Grid item xs={12} sm={6}>
509+
<Grid size={{ xs: 12, sm: 6 }}>
510510
<StyledTextField
511511
fullWidth
512512
label="Amount"
@@ -521,7 +521,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
521521
}}
522522
/>
523523
</Grid>
524-
<Grid item xs={12} sm={6}>
524+
<Grid size={{ xs: 12, sm: 6 }}>
525525
<StyledTextField
526526
fullWidth
527527
label="Memo (Optional)"
@@ -530,7 +530,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
530530
placeholder="Payment description"
531531
/>
532532
</Grid>
533-
<Grid item xs={12}>
533+
<Grid size={12}>
534534
<Button
535535
fullWidth
536536
variant="contained"
@@ -555,7 +555,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
555555
Generate Payment Request
556556
</Typography>
557557
<Grid container spacing={2}>
558-
<Grid item xs={12} sm={6}>
558+
<Grid size={{ xs: 12, sm: 6 }}>
559559
<StyledTextField
560560
fullWidth
561561
label="Amount"
@@ -570,7 +570,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
570570
}}
571571
/>
572572
</Grid>
573-
<Grid item xs={12} sm={6}>
573+
<Grid size={{ xs: 12, sm: 6 }}>
574574
<StyledTextField
575575
fullWidth
576576
label="Memo (Optional)"
@@ -579,7 +579,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
579579
placeholder="Payment description"
580580
/>
581581
</Grid>
582-
<Grid item xs={12}>
582+
<Grid size={12}>
583583
<Button
584584
fullWidth
585585
variant="contained"
@@ -592,7 +592,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
592592
</Button>
593593
</Grid>
594594
{generatedUrl && (
595-
<Grid item xs={12}>
595+
<Grid size={12}>
596596
<StyledTextField
597597
fullWidth
598598
label="Generated Payment URL"
@@ -638,7 +638,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
638638
Process Payment URL
639639
</Typography>
640640
<Grid container spacing={2}>
641-
<Grid item xs={12}>
641+
<Grid size={12}>
642642
<StyledTextField
643643
fullWidth
644644
label="Payment URL"
@@ -649,7 +649,7 @@ export const SVMPayInterface: React.FC<SVMPayInterfaceProps> = ({ isActive }) =>
649649
rows={2}
650650
/>
651651
</Grid>
652-
<Grid item xs={12}>
652+
<Grid size={12}>
653653
<Button
654654
fullWidth
655655
variant="contained"

‎src/components/WebBrowser/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -409,7 +409,7 @@ export const WebBrowser: React.FC<WebBrowserProps> = ({ isActive = true }) => {
409409
<NetworkErrorBoundary onRetry={() => setShowDApps(true)}>
410410
<DAppsGrid container spacing={2}>
411411
{POPULAR_DAPPS.map((dapp) => (
412-
<Grid item xs={12} sm={6} md={4} lg={3} key={dapp.name}>
412+
<Grid size={{ xs: 12, sm: 6 }} md={4} lg={3} key={dapp.name}>
413413
<DAppCard onClick={() => navigateToUrl(dapp.url)} data-testid="dapp-card">
414414
<CardContent>
415415
<Box display="flex" alignItems="center" gap={1} mb={1}>

‎src/pages/Connections/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
22
import Container from '@mui/material/Container';
3-
import Grid from '@mui/material/Grid';
3+
import { Grid } from '@mui/material';
44
import ConnectionsList from './ConnectionsList';
55

66
export default function ConnectionsPage({ theme, close, open }) {
77
return (
88
<Container>
99
<Grid container>
10-
<Grid item xs={12}>
10+
<Grid size={12}>
1111
<ConnectionsList theme={theme} close={() => close()} open={open} />
1212
</Grid>
1313
</Grid>

‎src/pages/Wallet/components/WalletGroupManager.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -523,15 +523,15 @@ const CreateGroupDialog: React.FC<{
523523
<DialogTitle>{t('multiAccount.createGroup')}</DialogTitle>
524524
<DialogContent>
525525
<Grid container spacing={2} sx={{ mt: 1 }}>
526-
<Grid item xs={12} sm={6}>
526+
<Grid size={{ xs: 12, sm: 6 }}>
527527
<TextField
528528
fullWidth
529529
label={t('multiAccount.groupName')}
530530
value={formData.name}
531531
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
532532
/>
533533
</Grid>
534-
<Grid item xs={12} sm={6}>
534+
<Grid size={{ xs: 12, sm: 6 }}>
535535
<TextField
536536
fullWidth
537537
type="color"
@@ -540,7 +540,7 @@ const CreateGroupDialog: React.FC<{
540540
onChange={(e) => setFormData({ ...formData, color: e.target.value })}
541541
/>
542542
</Grid>
543-
<Grid item xs={12}>
543+
<Grid size={12}>
544544
<TextField
545545
fullWidth
546546
multiline
@@ -550,7 +550,7 @@ const CreateGroupDialog: React.FC<{
550550
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
551551
/>
552552
</Grid>
553-
<Grid item xs={12}>
553+
<Grid size={12}>
554554
<FormControl fullWidth>
555555
<InputLabel>{t('multiAccount.selectWallets')}</InputLabel>
556556
<Select
@@ -603,7 +603,7 @@ const ImportWalletDialog: React.FC<{
603603
<DialogTitle>{t('multiAccount.importWallet')}</DialogTitle>
604604
<DialogContent>
605605
<Grid container spacing={2} sx={{ mt: 1 }}>
606-
<Grid item xs={12}>
606+
<Grid size={12}>
607607
<TextField
608608
fullWidth
609609
label={t('multiAccount.publicKey')}
@@ -612,15 +612,15 @@ const ImportWalletDialog: React.FC<{
612612
placeholder="Enter Solana public key..."
613613
/>
614614
</Grid>
615-
<Grid item xs={12}>
615+
<Grid size={12}>
616616
<TextField
617617
fullWidth
618618
label={t('multiAccount.walletName')}
619619
value={formData.name}
620620
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
621621
/>
622622
</Grid>
623-
<Grid item xs={12}>
623+
<Grid size={12}>
624624
<FormControl fullWidth>
625625
<InputLabel>{t('multiAccount.assignToGroups')}</InputLabel>
626626
<Select
@@ -673,15 +673,15 @@ const EditGroupDialog: React.FC<{
673673
<DialogTitle>{t('multiAccount.editGroup')}</DialogTitle>
674674
<DialogContent>
675675
<Grid container spacing={2} sx={{ mt: 1 }}>
676-
<Grid item xs={12} sm={6}>
676+
<Grid size={{ xs: 12, sm: 6 }}>
677677
<TextField
678678
fullWidth
679679
label={t('multiAccount.groupName')}
680680
value={formData.name}
681681
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
682682
/>
683683
</Grid>
684-
<Grid item xs={12} sm={6}>
684+
<Grid size={{ xs: 12, sm: 6 }}>
685685
<TextField
686686
fullWidth
687687
type="color"
@@ -690,7 +690,7 @@ const EditGroupDialog: React.FC<{
690690
onChange={(e) => setFormData({ ...formData, color: e.target.value })}
691691
/>
692692
</Grid>
693-
<Grid item xs={12}>
693+
<Grid size={12}>
694694
<TextField
695695
fullWidth
696696
multiline
@@ -700,7 +700,7 @@ const EditGroupDialog: React.FC<{
700700
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
701701
/>
702702
</Grid>
703-
<Grid item xs={12}>
703+
<Grid size={12}>
704704
<FormControl fullWidth>
705705
<InputLabel>{t('multiAccount.selectWallets')}</InputLabel>
706706
<Select
@@ -751,7 +751,7 @@ const ExportDialog: React.FC<{
751751
<DialogTitle>{t('multiAccount.exportData')}</DialogTitle>
752752
<DialogContent>
753753
<Grid container spacing={2} sx={{ mt: 1 }}>
754-
<Grid item xs={12}>
754+
<Grid size={12}>
755755
<FormControl fullWidth>
756756
<InputLabel>{t('multiAccount.format')}</InputLabel>
757757
<Select
@@ -764,7 +764,7 @@ const ExportDialog: React.FC<{
764764
</Select>
765765
</FormControl>
766766
</Grid>
767-
<Grid item xs={12}>
767+
<Grid size={12}>
768768
<FormControlLabel
769769
control={
770770
<Switch
@@ -775,7 +775,7 @@ const ExportDialog: React.FC<{
775775
label={t('multiAccount.includeTransactions')}
776776
/>
777777
</Grid>
778-
<Grid item xs={12}>
778+
<Grid size={12}>
779779
<FormControlLabel
780780
control={
781781
<Switch
@@ -786,7 +786,7 @@ const ExportDialog: React.FC<{
786786
label={t('multiAccount.includeMetadata')}
787787
/>
788788
</Grid>
789-
<Grid item xs={12}>
789+
<Grid size={12}>
790790
<Typography variant="body2" color="text.secondary">
791791
{selectedWallets.length > 0 && `${selectedWallets.length} wallets selected`}
792792
{selectedGroups.length > 0 && `${selectedGroups.length} groups selected`}

‎src/pages/WelcomePage/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,11 +238,11 @@ export const WelcomePage = () => {
238238
</WelcomeHeader>
239239

240240
<OptionsGrid container spacing={0} justifyContent="center">
241-
<Grid item xs={12} sm={6} md={5}>
241+
<Grid size={{ xs: 12, sm: 6 }} md={5}>
242242
{renderCreateWalletLink()}
243243
</Grid>
244244

245-
<Grid item xs={12} sm={6} md={5}>
245+
<Grid size={{ xs: 12, sm: 6 }} md={5}>
246246
<Link to="/restore_wallet" style={{ textDecoration: 'none', color: 'inherit' }}>
247247
<RestoreWalletOption />
248248
</Link>

0 commit comments

Comments
 (0)