From b21aa3e256c5697d6ca6b734d350d1d589c29871 Mon Sep 17 00:00:00 2001 From: vutuanlinh2k2 <69841784+vutuanlinh2k2@users.noreply.github.com> Date: Fri, 20 Oct 2023 08:37:03 +0700 Subject: [PATCH] Faucet Responsive + Fix Flicker (#1782) Co-authored-by: Pavan Soratur --- .../faucet/src/components/ProcessingModal.tsx | 13 +- apps/faucet/src/pages/_app.tsx | 20 +-- apps/faucet/src/pages/index.tsx | 148 +++++++++++------- apps/faucet/src/utils/sidebar.ts | 33 ++++ package.json | 1 + yarn.lock | 24 +++ 6 files changed, 163 insertions(+), 76 deletions(-) create mode 100644 apps/faucet/src/utils/sidebar.ts diff --git a/apps/faucet/src/components/ProcessingModal.tsx b/apps/faucet/src/components/ProcessingModal.tsx index 86c2f8661d..6a3248adcc 100644 --- a/apps/faucet/src/components/ProcessingModal.tsx +++ b/apps/faucet/src/components/ProcessingModal.tsx @@ -108,9 +108,11 @@ const ProcessingModal: FC = () => { handleOpenChange(false)} /> @@ -120,7 +122,12 @@ const ProcessingModal: FC = () => { animationData={animationData} /> - + {isSuccess ? 'Transfer Successful' : isFailed diff --git a/apps/faucet/src/pages/_app.tsx b/apps/faucet/src/pages/_app.tsx index 137910bd47..3ed22b69a5 100644 --- a/apps/faucet/src/pages/_app.tsx +++ b/apps/faucet/src/pages/_app.tsx @@ -1,13 +1,10 @@ import '@webb-tools/webb-ui-components/tailwind.css'; import '../styles/globals.css'; -import { Footer, SideBar } from '@webb-tools/webb-ui-components'; import { WEBB_FAUCET_URL } from '@webb-tools/webb-ui-components/constants'; import { AppProps } from 'next/app'; import { DefaultSeo, DefaultSeoProps } from 'next-seo'; -import Header from '../components/Header'; -import sidebarProps from '../constants/sidebar'; import Provider from '../provider'; export const metadata: DefaultSeoProps = { @@ -48,20 +45,9 @@ const App = ({ Component, pageProps }: AppProps) => { -
- -
-
-
- -
- -
- -
-
-
-
+
+ +
); }; diff --git a/apps/faucet/src/pages/index.tsx b/apps/faucet/src/pages/index.tsx index 5c911954d9..d45d781ef4 100644 --- a/apps/faucet/src/pages/index.tsx +++ b/apps/faucet/src/pages/index.tsx @@ -1,11 +1,22 @@ -import { Typography } from '@webb-tools/webb-ui-components'; +import { Footer, SideBar, Typography } from '@webb-tools/webb-ui-components'; import cx from 'classnames'; +import type { GetServerSideProps } from 'next'; import { NextSeo, NextSeoProps } from 'next-seo'; +import Header from '../components/Header'; import ProcessingModal from '../components/ProcessingModal'; import TwitterLink from '../components/TwitterLink'; +import sideBarProps from '../constants/sidebar'; import InputsContainer from '../containers/InputsContainer'; import LoginWithTwitter from '../containers/LoginWithTwitter'; +import { + getSideBarStateFromCookie, + setSideBarCookieOnToggle, +} from '../utils/sidebar'; + +interface PageProps { + sideBarInitialState?: boolean; +} export const metadata: NextSeoProps = { additionalMetaTags: [ @@ -20,66 +31,91 @@ export const metadata: NextSeoProps = { ], }; -const Page = () => { +export default function Page({ sideBarInitialState }: PageProps) { return ( -
- +
+ +
+
+
- {/** The Faucet Card */} -
-
- {/** Static content */} -
-
- - Get tokens - - - Hubble Bridge Faucet - -
- - This faucet sends various test tokens on networks supported by the - Hubble Bridge. - - + + + {/** The Faucet Card */} +
- To receive tokens, follow - { - " on Twitter and authenticate yourself by clicking the 'Login with Twitter' below to start the process. *You can claim faucet every 24 hours on each network." - } - -
+
+ {/** Static content */} +
+
+ + Get tokens + + + Hubble Bridge Faucet + +
+ + This faucet sends various test tokens on networks supported + by the Hubble Bridge. + + + To receive tokens, follow + { + " on Twitter and authenticate yourself by clicking the 'Login with Twitter' below to start the process. *You can claim faucet every 24 hours on each network." + } + +
- {/** Logic content */} -
- - -
-
-
+ {/** Logic content */} +
+ + +
+
+
- + +
+ +
+
+
); -}; +} -export default Page; +export const getServerSideProps: GetServerSideProps = async ({ + req, + res, +}) => { + return { + props: { + sideBarInitialState: getSideBarStateFromCookie({ req, res }), + }, + }; +}; diff --git a/apps/faucet/src/utils/sidebar.ts b/apps/faucet/src/utils/sidebar.ts new file mode 100644 index 0000000000..08e10696a2 --- /dev/null +++ b/apps/faucet/src/utils/sidebar.ts @@ -0,0 +1,33 @@ +import { SIDEBAR_OPEN_KEY } from '@webb-tools/webb-ui-components/constants'; +import { getCookie, setCookie } from 'cookies-next'; + +/** + * Set the sidebar state in the cookie on client side + */ +export const setSideBarCookieOnToggle = () => { + const sideBarStateFromCookie = getCookie(SIDEBAR_OPEN_KEY); + + if (sideBarStateFromCookie === 'true') { + setCookie(SIDEBAR_OPEN_KEY, 'false'); + } else { + setCookie(SIDEBAR_OPEN_KEY, 'true'); + } +}; + +/** + * Getting the sidebar state from the on server side to prevent hydration error + * NOTE: this function only works on getServerSideProps according to cookies-next doc + * @param options options required to get the cookie from the server + * @returns the state of the sidebar that is stored in the cookie + */ +export function getSideBarStateFromCookie( + options: Parameters[1] +) { + const sideBarStateFromCookie = getCookie(SIDEBAR_OPEN_KEY, options); + + return sideBarStateFromCookie === undefined + ? undefined + : sideBarStateFromCookie === 'true' + ? true + : false; +} diff --git a/package.json b/package.json index 47c4db1ece..a1fddb56b4 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "chart.js": "^4.3.0", "chromatic": "^6.14.0", "circomlibjs": "0.1.7", + "cookies-next": "^4.0.0", "country-flag-icons": "^1.5.5", "decimal.js": "^10.4.3", "detect-browser": "^5.2.0", diff --git a/yarn.lock b/yarn.lock index a505bcb782..0e1dd90451 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9348,6 +9348,11 @@ dependencies: "@types/node" "*" +"@types/cookie@^0.4.1": + version "0.4.1" + resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d" + integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q== + "@types/cross-spawn@^6.0.2": version "6.0.3" resolved "https://registry.yarnpkg.com/@types/cross-spawn/-/cross-spawn-6.0.3.tgz#c743cb2608f55860ee9776d8c99135d6032c763c" @@ -9706,6 +9711,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.54.tgz#4a63bdcea5b714f546aa27406a1c60621236a132" integrity sha512-oTmGy68gxZZ21FhTJVVvZBYpQHEBZxHKTsGshobMqm9qWpbqdZsA5jvsuPZcHu0KwpmLrOHWPdEfg7XDpNT9UA== +"@types/node@^16.10.2": + version "16.18.59" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.59.tgz#4cdbd631be6d9be266a96fb17b5d0d7ad6bbe26c" + integrity sha512-PJ1w2cNeKUEdey4LiPra0ZuxZFOGvetswE8qHRriV/sUkL5Al4tTmPV9D2+Y/TPIxTHHgxTfRjZVKWhPw/ORhQ== + "@types/node@^18.17.5": version "18.18.0" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.0.tgz#bd19d5133a6e5e2d0152ec079ac27c120e7f1763" @@ -14067,6 +14077,20 @@ cookie@0.5.0, cookie@^0.5.0: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b" integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== +cookie@^0.4.0: + version "0.4.2" + resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432" + integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA== + +cookies-next@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-4.0.0.tgz#36d5c0d5899cf729a2580fd065071bdfa13783ca" + integrity sha512-3TyzeltFCGgdOlVOVTPClSq+YV9ZCdOyA3aHRZv9f5aSgg7EyI4NSvXFOCgzT/xIxeHR4Rz8/z5Tdo9oPqaVpA== + dependencies: + "@types/cookie" "^0.4.1" + "@types/node" "^16.10.2" + cookie "^0.4.0" + copy-anything@^2.0.1: version "2.0.6" resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"