From 3a8a72cffbda8ed6f56a84e397d65d7d16ec19cc Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Mon, 30 Oct 2023 20:25:50 +0800 Subject: [PATCH 1/2] feat: add spinner in popup setup page --- packages/mask/.webpack/config.ts | 6 +- packages/mask/.webpack/popups.html | 75 +++++++++++++++++++ packages/mask/src/extension/popups/render.tsx | 2 + 3 files changed, 81 insertions(+), 2 deletions(-) create mode 100644 packages/mask/.webpack/popups.html diff --git a/packages/mask/.webpack/config.ts b/packages/mask/.webpack/config.ts index 437274359cec..71512bbecd09 100644 --- a/packages/mask/.webpack/config.ts +++ b/packages/mask/.webpack/config.ts @@ -28,6 +28,8 @@ const __dirname = fileURLToPath(dirname(import.meta.url)) const require = createRequire(import.meta.url) const patchesDir = join(__dirname, '../../../patches') const templateContent = readFile(join(__dirname, './template.html'), 'utf8') +const popupTemplateContent = readFile(join(__dirname, './popups.html'), 'utf8') + export async function createConfiguration(_inputFlags: BuildFlags): Promise { const VERSION = JSON.parse(await readFile(new URL('../../../package.json', import.meta.url), 'utf-8')).version const flags = normalizeBuildFlags(_inputFlags) @@ -346,11 +348,11 @@ async function addHTMLEntry({ gun?: boolean perf: boolean }) { - let template = await templateContent + let template = await (options.filename === 'popups.html' ? popupTemplateContent : templateContent) if (gun) template = template.replace(``, '') if (perf) template = template.replace(``, '') return new HTMLPlugin({ - templateContent: template, + templateContent: options.filename === 'popups.html' ? popupTemplateContent : templateContent, inject: 'body', scriptLoading: 'defer', minify: false, diff --git a/packages/mask/.webpack/popups.html b/packages/mask/.webpack/popups.html new file mode 100644 index 000000000000..740de0258c5d --- /dev/null +++ b/packages/mask/.webpack/popups.html @@ -0,0 +1,75 @@ + + + + Mask Network + + + + + + + + + + + + + + + + + + + + diff --git a/packages/mask/src/extension/popups/render.tsx b/packages/mask/src/extension/popups/render.tsx index 1c89afc76677..f058c63b06e3 100644 --- a/packages/mask/src/extension/popups/render.tsx +++ b/packages/mask/src/extension/popups/render.tsx @@ -27,6 +27,8 @@ if (navigator.userAgent.includes('Firefox')) { ) }, 200) } +const spinner = document.getElementById('app-spinner') +if (spinner) spinner.remove() createNormalReactRoot() startPluginHost() From e81acf84d3a3caa99205c5f7a34fd2193ecabe16 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Mon, 30 Oct 2023 21:01:23 +0800 Subject: [PATCH 2/2] fix: improve style --- packages/mask/.webpack/popups.html | 59 +++++++++++++------ packages/mask/src/extension/popups/UI.tsx | 6 ++ packages/mask/src/extension/popups/render.tsx | 2 - 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/mask/.webpack/popups.html b/packages/mask/.webpack/popups.html index 740de0258c5d..faecb0034d9e 100644 --- a/packages/mask/.webpack/popups.html +++ b/packages/mask/.webpack/popups.html @@ -20,16 +20,25 @@ body { background: #ffffff; margin: 0; - width: 400px; - height: 600px; + min-width: 400px; + min-height: 600px; } - @media (prefers-color-scheme: dark) { - body { - background: #030303; - } - .app-spinner-container { - color: #ffffff; - } + .text { + margin: 0; + font-family: Helvetica; + font-size: 14px; + color: #767f8d; + font-weight: 400; + margin-top: 12px; + margin-bottom: 0; + line-height: 1.5; + } + .spinner-box { + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } .app-spinner-container { display: flex; @@ -39,6 +48,17 @@ align-items: center; overflow: hidden; } + @media (prefers-color-scheme: dark) { + body { + background: #030303; + } + .app-spinner-container { + color: #ffffff; + } + .text { + color: rgba(255, 255, 255, 0.78); + } + } @keyframes loadingAnimation { 0% { -webkit-transform: rotate(0deg); @@ -61,15 +81,18 @@ diff --git a/packages/mask/src/extension/popups/UI.tsx b/packages/mask/src/extension/popups/UI.tsx index 3c85d06c1a48..6a2436869469 100644 --- a/packages/mask/src/extension/popups/UI.tsx +++ b/packages/mask/src/extension/popups/UI.tsx @@ -68,6 +68,12 @@ const personaInitialState = { const PopupRoutes = memo(function PopupRoutes() { const location = useLocation() const mainLocation = location.state?.mainLocation as Location | undefined + + useEffect(() => { + const spinner = document.getElementById('app-spinner') + if (spinner) spinner.remove() + }, []) + return ( ) startPluginHost()