Skip to content

Commit 8b844c9

Browse files
josepotjosepot
committed
sunset
1 parent 706338f commit 8b844c9

File tree

3 files changed

+54
-225
lines changed

3 files changed

+54
-225
lines changed

‎packages/ui/src/App.tsx‎

Lines changed: 1 addition & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,14 @@
11
import './styles/App.css'
22
import { CssBaseline } from '@mui/material'
3-
import { AccountContextProvider } from './contexts/AccountsContext'
4-
import { ApiContextProvider } from './contexts/ApiContext'
5-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
6-
import { MultiProxyContextProvider } from './contexts/MultiProxyContext'
7-
import ToastContextProvider from './contexts/ToastContext'
83
import { theme } from './styles/theme'
94
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
10-
import { AccountNamesContextProvider } from './contexts/AccountNamesContext'
11-
import { NetworkContextProvider } from './contexts/NetworkContext'
125
import MainLayout from './components/layout/Main'
13-
import { WatchedAccountsContextProvider } from './contexts/WatchedAccountsContext'
14-
import { WalletConnectContextProvider } from './contexts/WalletConnectContext'
15-
import { ModalsContextProvider } from './contexts/ModalsContext'
16-
import { PplApiContextProvider } from './contexts/PeopleChainApiContext'
17-
import { ReactiveDotProvider } from '@reactive-dot/react'
18-
import { config } from './walletConfigs'
19-
import { Suspense } from 'react'
20-
import { AssetsContextProvider } from './contexts/AssetsContext'
21-
import { HiddenAccountsContextProvider } from './contexts/HiddenAccountsContext'
22-
import { PendingTxsContextProvider } from './contexts/PendingTxContext'
236

247
const App = () => {
25-
const queryClient = new QueryClient()
26-
278
return (
289
<MuiThemeProvider theme={theme}>
2910
<CssBaseline />
30-
<ReactiveDotProvider config={config}>
31-
<Suspense fallback={<div> Loading...</div>}>
32-
<ToastContextProvider>
33-
<NetworkContextProvider>
34-
<QueryClientProvider client={queryClient}>
35-
<ApiContextProvider>
36-
<PplApiContextProvider>
37-
<AssetsContextProvider>
38-
<WatchedAccountsContextProvider>
39-
<HiddenAccountsContextProvider>
40-
<AccountContextProvider>
41-
<AccountNamesContextProvider>
42-
<MultiProxyContextProvider>
43-
<WalletConnectContextProvider>
44-
<PendingTxsContextProvider>
45-
<ModalsContextProvider>
46-
<MainLayout />
47-
</ModalsContextProvider>
48-
</PendingTxsContextProvider>
49-
</WalletConnectContextProvider>
50-
</MultiProxyContextProvider>
51-
</AccountNamesContextProvider>
52-
</AccountContextProvider>
53-
</HiddenAccountsContextProvider>
54-
</WatchedAccountsContextProvider>
55-
</AssetsContextProvider>
56-
</PplApiContextProvider>
57-
</ApiContextProvider>
58-
</QueryClientProvider>
59-
</NetworkContextProvider>
60-
</ToastContextProvider>
61-
</Suspense>
62-
</ReactiveDotProvider>
11+
<MainLayout />
6312
</MuiThemeProvider>
6413
)
6514
}

‎packages/ui/src/components/Header/Header.tsx‎

Lines changed: 15 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,23 @@
1-
import { Box, IconButton, Toolbar } from '@mui/material'
2-
import { Button, NavLink } from '../library'
1+
import { Box, Toolbar } from '@mui/material'
32
import { styled } from '@mui/material/styles'
4-
import { useEffect, useMemo } from 'react'
53
import MuiAppBar from '@mui/material/AppBar'
6-
import MultiProxySelection from '../select/MultiProxySelection'
7-
import { useAccounts } from '../../contexts/AccountsContext'
8-
import { HiOutlineWallet, HiOutlineBars3 as MenuIcon } from 'react-icons/hi2'
9-
import { MENU_ROUTES } from '../../pages/routes'
10-
import { isEmptyArray } from '../../utils/arrayUtils'
11-
import NetworkSelection from '../select/NetworkSelection'
124
import multixLogo from '../../logos/multix-logo.svg'
13-
import useWalletConnectEventsManager from '../../hooks/useWalletConnectEventsManager'
14-
import { Link, createSearchParams, useSearchParams } from 'react-router'
15-
import { useSwitchAddress } from '../../hooks/useSwitchAddress'
16-
import { ConnectionDialog } from 'dot-connect/react.js'
17-
18-
interface Props {
19-
handleDrawerOpen: () => void
20-
}
21-
22-
const Header = ({ handleDrawerOpen }: Props) => {
23-
const {
24-
selectedAccount,
25-
ownAccountList,
26-
selectAccount,
27-
isConnectionDialogOpen,
28-
setIsConnectionDialogOpen,
29-
allowConnectionToExtension
30-
} = useAccounts()
31-
const isAccountConnected = useMemo(() => !isEmptyArray(ownAccountList), [ownAccountList])
32-
const [params] = useSearchParams()
33-
34-
useWalletConnectEventsManager()
35-
useSwitchAddress()
36-
37-
useEffect(() => {
38-
if (!selectedAccount?.address && ownAccountList.length > 0) {
39-
selectAccount(ownAccountList[0])
40-
setIsConnectionDialogOpen(false)
41-
}
42-
}, [ownAccountList, selectAccount, selectedAccount?.address, setIsConnectionDialogOpen])
5+
import { Link } from 'react-router'
436

7+
const Header = () => {
448
return (
45-
<>
46-
<MuiAppBarStyled position="sticky">
47-
<Toolbar>
48-
<LogoWrapperStyled>
49-
<HomeLinkStyled to="/">
50-
<LogoStyled
51-
src={multixLogo}
52-
alt={`Multix logo`}
53-
/>
54-
</HomeLinkStyled>
55-
</LogoWrapperStyled>
56-
<DesktopMenuStyled data-cy="menu-desktop">
57-
<MenuWrapperStyled>
58-
{MENU_ROUTES.map(({ path, name, isDisplayWhenNoWallet }) => {
59-
const paramsString = createSearchParams(params).toString()
60-
61-
return isAccountConnected || isDisplayWhenNoWallet ? (
62-
<NavLink
63-
key={name}
64-
to={`${path}?${paramsString}`}
65-
data-cy={`button-navigate-${name.toLowerCase().replace(/ /g, '-')}`}
66-
>
67-
{name}
68-
</NavLink>
69-
) : null
70-
})}
71-
</MenuWrapperStyled>
72-
<RightButtonsWrapperStyled>
73-
{ownAccountList.length === 0 && (
74-
<ConnectButtonStyled
75-
data-cy="button-menu-connect"
76-
onClick={() => {
77-
setIsConnectionDialogOpen(true)
78-
allowConnectionToExtension()
79-
}}
80-
variant="primary"
81-
>
82-
Connect
83-
</ConnectButtonStyled>
84-
)}
85-
<MultiProxySelection testId="desktop" />
86-
<NetworkSelectionStyled />
87-
{ownAccountList.length > 0 && (
88-
<IconButtonStyled
89-
data-cy="button-wallet"
90-
aria-label="wallet"
91-
onClick={() => setIsConnectionDialogOpen(true)}
92-
>
93-
<HiOutlineWallet size={20} />
94-
</IconButtonStyled>
95-
)}
96-
</RightButtonsWrapperStyled>
97-
</DesktopMenuStyled>
98-
<MobileIconButtonStyled
99-
color="inherit"
100-
aria-label="open drawer"
101-
edge="end"
102-
onClick={handleDrawerOpen}
103-
>
104-
<MenuIcon />
105-
</MobileIconButtonStyled>
106-
</Toolbar>
107-
</MuiAppBarStyled>
108-
{isConnectionDialogOpen && (
109-
<ConnectionDialog
110-
data-cy="dialog-connection"
111-
open={isConnectionDialogOpen}
112-
onClose={() => setIsConnectionDialogOpen(false)}
113-
/>
114-
)}
115-
</>
9+
<MuiAppBarStyled position="sticky">
10+
<Toolbar>
11+
<LogoWrapperStyled>
12+
<HomeLinkStyled to="/">
13+
<LogoStyled
14+
src={multixLogo}
15+
alt={`Multix logo`}
16+
/>
17+
</HomeLinkStyled>
18+
</LogoWrapperStyled>
19+
</Toolbar>
20+
</MuiAppBarStyled>
11621
)
11722
}
11823

@@ -129,39 +34,6 @@ const HomeLinkStyled = styled(Link)`
12934
display: flex;
13035
`
13136

132-
const ConnectButtonStyled = styled(Button)`
133-
margin-right: 1rem;
134-
`
135-
136-
const RightButtonsWrapperStyled = styled(Box)`
137-
width: 100%;
138-
display: flex;
139-
align-items: center;
140-
justify-content: flex-end;
141-
flex: 1;
142-
`
143-
144-
const MenuWrapperStyled = styled(Box)`
145-
width: 100%;
146-
display: flex;
147-
align-items: center;
148-
`
149-
150-
const DesktopMenuStyled = styled(Box)`
151-
display: none;
152-
153-
@media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
154-
width: 100%;
155-
flex-grow: 0;
156-
display: flex;
157-
align-items: center;
158-
}
159-
160-
@media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
161-
flex-grow: 1;
162-
}
163-
`
164-
16537
const LogoWrapperStyled = styled(Box)`
16638
display: flex;
16739
align-items: center;
@@ -177,25 +49,7 @@ const LogoWrapperStyled = styled(Box)`
17749
}
17850
`
17951

180-
const NetworkSelectionStyled = styled(NetworkSelection)`
181-
margin-left: 0.5rem;
182-
`
183-
18452
const LogoStyled = styled('img')`
18553
height: 3rem;
18654
`
187-
188-
const IconButtonStyled = styled(IconButton)`
189-
margin-left: 1rem;
190-
`
191-
192-
const MobileIconButtonStyled = styled(IconButton)`
193-
display: block;
194-
color: black;
195-
196-
@media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
197-
display: none;
198-
}
199-
`
200-
20155
export default Header

‎packages/ui/src/components/layout/Main.tsx‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
1-
import React from 'react'
2-
import { Box } from '@mui/material'
1+
import { Box, Button, Link } from '@mui/material'
32
import Header from '../Header/Header'
43
import Container from '@mui/material/Container'
5-
import { Outlet } from 'react-router'
6-
import MobileMenu from '../Drawer/Drawer'
74
import { styled } from '@mui/material/styles'
5+
import { Center } from './Center'
6+
import { HiOutlineExclamationCircle } from 'react-icons/hi2'
87

9-
function MainLayout() {
10-
const [open, setOpen] = React.useState(false)
8+
const CenterStyled = styled(Center)`
9+
text-align: center;
10+
`
11+
const ErrorMessageStyled = styled('div')`
12+
text-align: center;
13+
margin-top: 1rem;
1114
15+
button {
16+
margin-top: 1rem;
17+
}
18+
`
19+
const FORUM_POST_URL =
20+
'https://forum.polkadot.network/t/multix-sunset-announcement-jan-1-2026/16454'
21+
22+
function MainLayout() {
1223
return (
1324
<BoxStyled>
14-
<Header handleDrawerOpen={() => setOpen(true)} />
25+
<Header />
1526
<Container
1627
fixed
1728
maxWidth="lg"
1829
>
19-
<Outlet />
30+
<CenterStyled>
31+
<ErrorMessageStyled>
32+
<HiOutlineExclamationCircle size={64} />
33+
<div>
34+
Multix has been sunset and is now offline. Thanks to everyone who used and supported
35+
it.
36+
</div>
37+
<Button
38+
component={Link}
39+
href={FORUM_POST_URL}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
color="inherit"
43+
variant="outlined"
44+
size="small"
45+
>
46+
Read the announcement
47+
</Button>
48+
</ErrorMessageStyled>
49+
</CenterStyled>
2050
</Container>
21-
<MobileMenu
22-
open={open}
23-
handleDrawerClose={() => setOpen(false)}
24-
/>
2551
</BoxStyled>
2652
)
2753
}

0 commit comments

Comments
 (0)