Skip to content

Commit 037e661

Browse files
swkatmaskswkatmask
committed
fix: revert to jsxCompose
1 parent 468a242 commit 037e661

File tree

11 files changed

+137
-162
lines changed

11 files changed

+137
-162
lines changed

‎packages/mask/.webpack/flags.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ export interface BuildFlags {
3737
sourceMapPreference?: boolean | string
3838
/** @default true */
3939
sourceMapHideFrameworks?: boolean | undefined
40+
FIREFLY_X_CLIENT_ID?: string
41+
FIREFLY_X_CLIENT_SECRET?: string
4042
}
4143
export type NormalizedFlags = Required<BuildFlags>
4244
export function normalizeBuildFlags(flags: BuildFlags): NormalizedFlags {
@@ -50,6 +52,8 @@ export function normalizeBuildFlags(flags: BuildFlags): NormalizedFlags {
5052
reactCompiler = false,
5153
lavamoat = false,
5254
csp = false,
55+
FIREFLY_X_CLIENT_ID = '',
56+
FIREFLY_X_CLIENT_SECRET = '',
5357
} = flags
5458
let {
5559
hmr = mode === 'development',
@@ -87,6 +91,9 @@ export function normalizeBuildFlags(flags: BuildFlags): NormalizedFlags {
8791
devtoolsEditorURI,
8892
// CI / profiling
8993
profiling,
94+
// Secrets
95+
FIREFLY_X_CLIENT_ID,
96+
FIREFLY_X_CLIENT_SECRET,
9097
}
9198
}
9299

‎packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx‎

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,37 @@
11
import { i18n } from '@lingui/core'
22
import { useSiteThemeMode } from '@masknet/plugin-infra/content-script'
3-
import { LinguiProviderHMR, SharedContextProvider, PrivySetup } from '@masknet/shared'
3+
import { LinguiProviderHMR, SharedContextProvider } from '@masknet/shared'
4+
import { jsxCompose } from '@masknet/shared-base'
45
import { queryClient } from '@masknet/shared-base-ui'
56
import { DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
67
import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
78
import { QueryClientProvider } from '@tanstack/react-query'
89
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
910
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
10-
import { Suspense } from 'react'
11+
import { cloneElement, Suspense } from 'react'
1112
import { createPortal } from 'react-dom'
1213
import { queryPersistOptions } from '../../../shared-ui/utils/persistOptions.js'
1314
import { useMaskSiteAdaptorMixedTheme } from '../../components/useMaskSiteAdaptorMixedTheme.js'
1415

1516
export function ContentScriptGlobalProvider(children: React.ReactNode) {
16-
const jsx =
17+
return jsxCompose(
18+
<Suspense />,
19+
<DialogStackingProvider hasGlobalBackdrop={false} />,
20+
<QueryClientProvider client={queryClient} />,
21+
<PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
22+
<RootWeb3ContextProvider />,
23+
<SharedContextProvider />,
24+
<LinguiProviderHMR i18n={i18n} />,
25+
// eslint-disable-next-line react-compiler/react-compiler
26+
<MaskThemeProvider useMaskIconPalette={useSiteThemeMode} useTheme={useMaskSiteAdaptorMixedTheme} />,
27+
)(
28+
cloneElement,
1729
process.env.NODE_ENV === 'development' ?
1830
<>
1931
{/* https://github.com/TanStack/query/issues/5417 */}
2032
{createPortal(<ReactQueryDevtools buttonPosition="bottom-right" />, document.body)}
2133
{children}
2234
</>
23-
: children
24-
25-
// eslint-disable: react-compiler/react-compiler
26-
// prettier-ignore
27-
return (
28-
<Suspense>
29-
<DialogStackingProvider hasGlobalBackdrop={false}>
30-
<QueryClientProvider client={queryClient}>
31-
<PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions}>
32-
<RootWeb3ContextProvider>
33-
<PrivySetup />
34-
<SharedContextProvider>
35-
<LinguiProviderHMR i18n={i18n}>
36-
<MaskThemeProvider
37-
// eslint-disable-next-line react-compiler/react-compiler
38-
useMaskIconPalette={useSiteThemeMode}
39-
// eslint-disable-next-line react-compiler/react-compiler
40-
useTheme={useMaskSiteAdaptorMixedTheme}>
41-
{jsx}
42-
</MaskThemeProvider>
43-
</LinguiProviderHMR>
44-
</SharedContextProvider>
45-
</RootWeb3ContextProvider>
46-
</PersistQueryClientProvider>
47-
</QueryClientProvider>
48-
</DialogStackingProvider>
49-
</Suspense>
35+
: children,
5036
)
5137
}

‎packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1-
import { Suspense } from 'react'
1+
import { cloneElement, Suspense } from 'react'
22
import { CSSVariableInjector, CustomSnackbarProvider } from '@masknet/theme'
33
import { ErrorBoundary } from '@masknet/shared-base-ui'
4-
import { Sniffings } from '@masknet/shared-base'
4+
import { Sniffings, jsxCompose } from '@masknet/shared-base'
55

66
// Providers added here will be added to ALL ShadowRoots, if you're mean to add a global one, add it in ./SiteUIProvider.tsx
77
export function ShadowRootAttachPointRoot(children: React.ReactNode) {
8-
return (
9-
<Suspense>
10-
<ErrorBoundary>
11-
<CustomSnackbarProvider
12-
disableWindowBlurListener={false}
13-
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
14-
offsetY={Sniffings.is_facebook_page ? 80 : undefined}>
15-
<CSSVariableInjector />
16-
{children}
17-
</CustomSnackbarProvider>
18-
</ErrorBoundary>
19-
</Suspense>
8+
return jsxCompose(
9+
<Suspense />,
10+
<ErrorBoundary />,
11+
<CustomSnackbarProvider
12+
disableWindowBlurListener={false}
13+
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
14+
children={null!}
15+
offsetY={Sniffings.is_facebook_page ? 80 : undefined}
16+
/>,
17+
)(
18+
cloneElement,
19+
<>
20+
<CSSVariableInjector />
21+
{children}
22+
</>,
2023
)
2124
}

‎packages/mask/dashboard/Dashboard.tsx‎

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect } from 'react'
1+
import { cloneElement, useEffect } from 'react'
22
import { CssBaseline, ThemeProvider, StyledEngineProvider, GlobalStyles } from '@mui/material'
33
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
44
import {
@@ -12,7 +12,7 @@ import {
1212
import { LinguiProviderHMR, PersonaContext, SharedContextProvider, Modals } from '@masknet/shared'
1313
import { ErrorBoundary } from '@masknet/shared-base-ui'
1414
import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
15-
import { DashboardRoutes, PrivySetupProvider } from '@masknet/shared-base'
15+
import { DashboardRoutes, jsxCompose, PrivySetupProvider } from '@masknet/shared-base'
1616

1717
import { Pages } from './pages/routes.js'
1818
import { UserContext, useAppearance } from '../shared-ui/index.js'
@@ -37,7 +37,6 @@ const PersonaContextIO = {
3737
queryPersonaAvatarLastUpdateTime: Services.Identity.getPersonaAvatarLastUpdateTime,
3838
queryPersonaAvatar: Services.Identity.getPersonaAvatar,
3939
}
40-
const createWallet = () => Services.Helper.openDashboard(DashboardRoutes.CreateMaskWalletForm)
4140
export default function Dashboard() {
4241
// #region theme
4342
const appearance = useAppearance()
@@ -53,38 +52,29 @@ export default function Dashboard() {
5352
}, [appearance])
5453
// #endregion
5554

56-
// prettier-ignore
57-
return (
58-
<PrivySetupProvider>
59-
<RootWeb3ContextProvider enforceEVM>
60-
<LinguiProviderHMR i18n={i18n}>
61-
<StyledEngineProvider injectFirst>
62-
<ThemeProvider theme={theme}>
63-
<DialogStackingProvider hasGlobalBackdrop={false}>
64-
<UserContext.Provider>
65-
<PersonaContext.Provider initialState={PersonaContextIO}>
66-
<ErrorBoundary>
67-
<CustomSnackbarProvider >
68-
<SharedContextProvider>
69-
<CssBaseline />
70-
{GlobalCss}
71-
{/* https://github.com/TanStack/query/issues/5417 */}
72-
{process.env.NODE_ENV === 'development' ?
73-
<ReactQueryDevtools buttonPosition="bottom-right" />
74-
: null}
75-
<Modals createWallet={createWallet} />
76-
77-
<Pages />
78-
</SharedContextProvider>
79-
</CustomSnackbarProvider>
80-
</ErrorBoundary>
81-
</PersonaContext.Provider>
82-
</UserContext.Provider>
83-
</DialogStackingProvider>
84-
</ThemeProvider>
85-
</StyledEngineProvider>
86-
</LinguiProviderHMR>
87-
</RootWeb3ContextProvider>
88-
</PrivySetupProvider>
55+
return jsxCompose(
56+
<PrivySetupProvider />,
57+
<RootWeb3ContextProvider enforceEVM />,
58+
<LinguiProviderHMR i18n={i18n} />,
59+
<StyledEngineProvider injectFirst />,
60+
<ThemeProvider theme={theme} />,
61+
<DialogStackingProvider />,
62+
<UserContext.Provider />,
63+
<PersonaContext.Provider initialState={PersonaContextIO} />,
64+
<ErrorBoundary />,
65+
<CustomSnackbarProvider children={null!} />,
66+
<SharedContextProvider />,
67+
)(
68+
cloneElement,
69+
<>
70+
<CssBaseline />
71+
{GlobalCss}
72+
{/* https://github.com/TanStack/query/issues/5417 */}
73+
{process.env.NODE_ENV === 'development' ?
74+
<ReactQueryDevtools buttonPosition="bottom-right" />
75+
: null}
76+
<Modals createWallet={() => Services.Helper.openDashboard(DashboardRoutes.CreateMaskWalletForm)} />
77+
<Pages />
78+
</>,
8979
)
9080
}

‎packages/mask/popups/Popup.tsx‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
import Services from '#services'
21
import { PageUIProvider, PersonaContext, PrivySetup } from '@masknet/shared'
3-
import { MaskMessages, PopupRoutes, PrivySetupProvider, assert } from '@masknet/shared-base'
4-
import { queryClient } from '@masknet/shared-base-ui'
2+
import { assert, jsxCompose, MaskMessages, PopupRoutes, PrivySetupProvider } from '@masknet/shared-base'
53
import { PopupSnackbarProvider } from '@masknet/theme'
64
import { EVMWeb3ContextProvider } from '@masknet/web3-hooks-base'
75
import { ProviderType } from '@masknet/web3-shared-evm'
86
import { Box } from '@mui/material'
9-
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
10-
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
11-
import { Suspense, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
7+
import { Suspense, cloneElement, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
128
import { useIdleTimer } from 'react-idle-timer'
139
import {
10+
createHashRouter,
1411
Navigate,
1512
Outlet,
1613
RouterProvider,
17-
createHashRouter,
1814
useNavigate,
19-
useRouteError,
2015
useSearchParams,
16+
useRouteError,
2117
} from 'react-router-dom'
22-
import { ErrorBoundaryUIOfError } from '../../shared-base-ui/src/components/ErrorBoundary/ErrorBoundary.js'
23-
import { UserContext, queryPersistOptions } from '../shared-ui/index.js'
18+
import { usePopupTheme } from './hooks/usePopupTheme.js'
19+
import Services from '#services'
2420
import { LoadingPlaceholder } from './components/LoadingPlaceholder/index.js'
2521
import { PopupLayout } from './components/PopupLayout/index.js'
26-
import { PageTitleContext, PopupContext } from './hooks/index.js'
27-
import { usePopupTheme } from './hooks/usePopupTheme.js'
22+
import { PopupContext, PageTitleContext } from './hooks/index.js'
2823
import { Modals } from './modals/index.js'
29-
import { ContactsFrame, contactsRoutes } from './pages/Friends/index.js'
24+
import { UserContext, queryPersistOptions } from '../shared-ui/index.js'
25+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
26+
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
27+
import { queryClient } from '@masknet/shared-base-ui'
3028
import { PersonaFrame, personaRoute } from './pages/Personas/index.js'
31-
import { TraderFrame, traderRoutes } from './pages/Trader/index.js'
3229
import { WalletFrame, walletRoutes } from './pages/Wallet/index.js'
30+
import { ContactsFrame, contactsRoutes } from './pages/Friends/index.js'
31+
import { ErrorBoundaryUIOfError } from '../../shared-base-ui/src/components/ErrorBoundary/ErrorBoundary.js'
32+
import { TraderFrame, traderRoutes } from './pages/Trader/index.js'
3333

3434
const personaInitialState = {
3535
queryOwnedPersonaInformation: Services.Identity.queryOwnedPersonaInformation,
@@ -110,33 +110,25 @@ export default function Popups() {
110110

111111
assert(process.env.PRIVY_APP_ID, 'Missing PRIVY_APP_ID')
112112

113-
// prettier-ignore
114-
return (
115-
<PrivySetupProvider>
116-
<PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions}>
117-
{/* eslint-disable-next-line react-compiler/react-compiler */}
118-
<PageUIProvider useTheme={usePopupTheme}>
119-
<PopupSnackbarProvider>
120-
<EVMWeb3ContextProvider providerType={ProviderType.MaskWallet}>
121-
<PopupContext>
122-
<PageTitleContext value={titleContext}>
123-
{/* https://github.com/TanStack/query/issues/5417 */}
124-
{process.env.NODE_ENV === 'development' ?
125-
<ReactQueryDevtools buttonPosition="bottom-right" />
126-
: null}
127-
<PrivySetup />
128-
<RouterProvider
129-
router={router}
130-
fallbackElement={pending}
131-
future={{ v7_startTransition: true }}
132-
/>
133-
</PageTitleContext>
134-
</PopupContext>
135-
</EVMWeb3ContextProvider>
136-
</PopupSnackbarProvider>
137-
</PageUIProvider>
138-
</PersistQueryClientProvider>
139-
</PrivySetupProvider>
113+
return jsxCompose(
114+
<PrivySetupProvider />,
115+
<PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
116+
// eslint-disable-next-line react-compiler/react-compiler
117+
<PageUIProvider useTheme={usePopupTheme} />,
118+
<PopupSnackbarProvider children={null!} />,
119+
<EVMWeb3ContextProvider providerType={ProviderType.MaskWallet} />,
120+
<PopupContext />,
121+
<PageTitleContext value={titleContext} />,
122+
)(
123+
cloneElement,
124+
<>
125+
{/* https://github.com/TanStack/query/issues/5417 */}
126+
{process.env.NODE_ENV === 'development' ?
127+
<ReactQueryDevtools buttonPosition="bottom-right" />
128+
: null}
129+
<PrivySetup />
130+
<RouterProvider router={router} fallbackElement={pending} future={{ v7_startTransition: true }} />
131+
</>,
140132
)
141133
}
142134

0 commit comments

Comments
 (0)