From af1add99627abf7787e6957724fdec67c4cebf9a Mon Sep 17 00:00:00 2001 From: fairlight <31534717+fairlighteth@users.noreply.github.com> Date: Fri, 17 Nov 2023 19:19:55 +0000 Subject: [PATCH] feat: widget skeleton (#3393) --- apps/cowswap-frontend/index.html | 134 +++++++++++++++++- .../public/images/cowprotocol-dark.svg | 1 + .../public/images/cowprotocol-light.svg | 1 + apps/cowswap-frontend/src/cow-react/index.tsx | 98 +++++++------ .../src/app/embedDialog/index.tsx | 6 +- libs/assets/src/cow-swap/html.svg | 2 +- libs/assets/src/cow-swap/js.svg | 2 +- libs/assets/src/cow-swap/react.svg | 2 +- 8 files changed, 197 insertions(+), 49 deletions(-) create mode 100644 apps/cowswap-frontend/public/images/cowprotocol-dark.svg create mode 100644 apps/cowswap-frontend/public/images/cowprotocol-light.svg diff --git a/apps/cowswap-frontend/index.html b/apps/cowswap-frontend/index.html index 2ad7ce9539..378d1a21c5 100644 --- a/apps/cowswap-frontend/index.html +++ b/apps/cowswap-frontend/index.html @@ -35,14 +35,13 @@ - + + + +
+
+ +
+
+
diff --git a/apps/cowswap-frontend/public/images/cowprotocol-dark.svg b/apps/cowswap-frontend/public/images/cowprotocol-dark.svg new file mode 100644 index 0000000000..8ba898a2f6 --- /dev/null +++ b/apps/cowswap-frontend/public/images/cowprotocol-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/cowswap-frontend/public/images/cowprotocol-light.svg b/apps/cowswap-frontend/public/images/cowprotocol-light.svg new file mode 100644 index 0000000000..8bbb7d6384 --- /dev/null +++ b/apps/cowswap-frontend/public/images/cowprotocol-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx index eb78e960c7..542973e525 100644 --- a/apps/cowswap-frontend/src/cow-react/index.tsx +++ b/apps/cowswap-frontend/src/cow-react/index.tsx @@ -4,7 +4,7 @@ import 'inter-ui' import '@cowprotocol/analytics' import './sentry' import { Provider as AtomProvider } from 'jotai' -import { StrictMode } from 'react' +import { useEffect, StrictMode } from 'react' import { BlockNumberProvider } from '@cowprotocol/common-hooks' import { isInjectedWidget } from '@cowprotocol/common-utils' @@ -41,46 +41,62 @@ if (window.ethereum) { window.ethereum.autoRefreshOnNetworkChange = false } -const root = createRoot(document.getElementById('root')!) -const isInjectedWidgetMode = isInjectedWidget() - -root.render( - - - - - - - - - - - - - - - {!isInjectedWidgetMode && ( - <> - - - - - - )} - - - - - - - - - - - - - -) +function Main() { + const isInjectedWidgetMode = isInjectedWidget() + + useEffect(() => { + const skeleton = document.getElementById('skeleton') + if (skeleton) { + skeleton.parentNode?.removeChild(skeleton) + } + }, []) + + return ( + + + + + + + + + + + + + + + {!isInjectedWidgetMode && ( + <> + + + + + + )} + + + + + + + + + + + + + + ) +} + +const container = document.getElementById('root') +if (container !== null) { + const root = createRoot(container) + root.render(
) +} else { + console.error('Failed to find the root element') +} if (process.env.REACT_APP_SERVICE_WORKER !== 'false') { serviceWorkerRegistration.register() diff --git a/apps/widget-configurator/src/app/embedDialog/index.tsx b/apps/widget-configurator/src/app/embedDialog/index.tsx index 5a177b5d5c..297295a389 100644 --- a/apps/widget-configurator/src/app/embedDialog/index.tsx +++ b/apps/widget-configurator/src/app/embedDialog/index.tsx @@ -99,11 +99,15 @@ export function EmbedDialog({ params, open, handleClose }: EmbedDialogProps) { setCurrentTab(newValue)} - aria-label="basic tabs example" + aria-label="configuration tabs" sx={{ '& .MuiTab-iconWrapper': { height: '16px', width: '16px', + opacity: 0.75, + }, + '& .Mui-selected .MuiTab-iconWrapper': { + opacity: 1, }, }} > diff --git a/libs/assets/src/cow-swap/html.svg b/libs/assets/src/cow-swap/html.svg index c553ee21ab..3b3737920b 100644 --- a/libs/assets/src/cow-swap/html.svg +++ b/libs/assets/src/cow-swap/html.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/libs/assets/src/cow-swap/js.svg b/libs/assets/src/cow-swap/js.svg index a949bc0e6c..48445b81b6 100644 --- a/libs/assets/src/cow-swap/js.svg +++ b/libs/assets/src/cow-swap/js.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/libs/assets/src/cow-swap/react.svg b/libs/assets/src/cow-swap/react.svg index 769819b8cd..1ba2f2d692 100644 --- a/libs/assets/src/cow-swap/react.svg +++ b/libs/assets/src/cow-swap/react.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file