Faucet Responsive + Fix Flicker (#1782)

Co-authored-by: Pavan Soratur <[email protected]>
tangle-network · Oct 20, 2023 · b21aa3e · b21aa3e
1 parent 4ea6a42
commit b21aa3e
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 76 deletions.
diff --git a/apps/faucet/src/components/ProcessingModal.tsx b/apps/faucet/src/components/ProcessingModal.tsx
@@ -108,9 +108,11 @@ const ProcessingModal: FC = () => {
     <Modal open={isModalOpen}>
       <ModalContent
         onCloseAutoFocus={handleCloseAutoFocus}
-        className="bg-mono-0 dark:bg-mono-160 rounded-xl w-modal"
+        className={cx(
+          'bg-mono-0 dark:bg-mono-160 rounded-xl !w-full md:!w-[500px]',
+          'top-auto bottom-0 md:-translate-x-1/2 md:-translate-y-1/2 md:top-1/2 md:bottom-auto md:left-1/2'
+        )}
         isOpen={isModalOpen}
-        isCenter
       >
         <ModalHeader onClose={() => handleOpenChange(false)} />
 
@@ -120,7 +122,12 @@ const ProcessingModal: FC = () => {
             animationData={animationData}
           />
 
-          <Typography fw="bold" ta="center" variant="h5">
+          <Typography
+            fw="black"
+            ta="center"
+            variant="h5"
+            className="!text-[24px] !leading-[40px]"
+          >
             {isSuccess
               ? 'Transfer Successful'
               : isFailed

diff --git 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) => {
     <Provider>
       <DefaultSeo {...metadata} />
 
-      <div className="h-screen flex">
-        <SideBar {...sidebarProps} className="z-0 hidden lg:block" />
-        <main className="flex-[1] h-full overflow-y-auto">
-          <div className="mx-3 md:mx-5 lg:mx-10 space-y-4">
-            <Header />
-
-            <main>
-              <Component {...pageProps} />
-            </main>
-
-            <Footer isMinimal isNext className="py-12 mx-auto" />
-          </div>
-        </main>
-      </div>
+      <main>
+        <Component {...pageProps} />
+      </main>
     </Provider>
   );
 };

diff --git 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 (
-    <div className={cx('max-w-[100vw]')}>
-      <NextSeo {...metadata} />
+    <div className="h-screen flex">
+      <SideBar
+        {...sideBarProps}
+        isExpandedAtDefault={sideBarInitialState}
+        onSideBarToggle={setSideBarCookieOnToggle}
+        className="!z-0 hidden lg:block"
+      />
+      <main className="flex-[1] h-full overflow-y-auto">
+        <div className="mx-3 md:mx-5 lg:mx-10 space-y-4">
+          <Header />
 
-      {/** The Faucet Card */}
-      <div
-        className={cx(
-          'px-4 md:px-12 py-12 max-w-[964px] rounded-2xl mx-auto',
-          'border-4 border-mono-0 dark:border-mono-170',
-          'bg-glass dark:bg-glass_dark'
-        )}
-        style={{ backdropFilter: 'blur(15px)' }}
-      >
-        <div className="max-w-[564px] mx-auto">
-          {/** Static content */}
-          <div className="flex flex-col gap-4">
-            <div>
-              <Typography
-                variant="mkt-small-caps"
-                className="font-black text-center text-blue-70"
-              >
-                Get tokens
-              </Typography>
-              <Typography
-                variant="mkt-h3"
-                className="font-black text-center text-mono-200"
-              >
-                Hubble Bridge Faucet
-              </Typography>
-            </div>
-            <Typography
-              variant="mkt-body1"
-              className="font-medium text-center text-mono-140"
-            >
-              This faucet sends various test tokens on networks supported by the
-              Hubble Bridge.
-            </Typography>
-            <Typography
-              variant="mkt-body1"
-              className="font-medium text-center text-mono-140"
+          <main className="max-w-[100vw]">
+            <NextSeo {...metadata} />
+
+            {/** The Faucet Card */}
+            <div
+              className={cx(
+                'px-4 md:px-12 py-12 max-w-[964px] rounded-2xl mx-auto',
+                'border-4 border-mono-0 dark:border-mono-170',
+                'bg-glass dark:bg-glass_dark'
+              )}
+              style={{ backdropFilter: 'blur(15px)' }}
             >
-              To receive tokens, follow <TwitterLink />
-              {
-                " 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."
-              }
-            </Typography>
-          </div>
+              <div className="max-w-[564px] mx-auto">
+                {/** Static content */}
+                <div className="flex flex-col gap-4">
+                  <div>
+                    <Typography
+                      variant="mkt-small-caps"
+                      className="font-black text-center text-blue-70"
+                    >
+                      Get tokens
+                    </Typography>
+                    <Typography
+                      variant="mkt-h3"
+                      className="font-black text-center text-mono-200"
+                    >
+                      Hubble Bridge Faucet
+                    </Typography>
+                  </div>
+                  <Typography
+                    variant="mkt-body1"
+                    className="font-medium text-center text-mono-140"
+                  >
+                    This faucet sends various test tokens on networks supported
+                    by the Hubble Bridge.
+                  </Typography>
+                  <Typography
+                    variant="mkt-body1"
+                    className="font-medium text-center text-mono-140"
+                  >
+                    To receive tokens, follow <TwitterLink />
+                    {
+                      " 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."
+                    }
+                  </Typography>
+                </div>
 
-          {/** Logic content */}
-          <div className="mt-16 space-y-8">
-            <LoginWithTwitter />
-            <InputsContainer />
-          </div>
-        </div>
-      </div>
+                {/** Logic content */}
+                <div className="mt-16 space-y-8">
+                  <LoginWithTwitter />
+                  <InputsContainer />
+                </div>
+              </div>
+            </div>
 
-      <ProcessingModal />
+            <ProcessingModal />
+          </main>
+
+          <Footer isMinimal isNext className="py-12 mx-auto" />
+        </div>
+      </main>
     </div>
   );
-};
+}
 
-export default Page;
+export const getServerSideProps: GetServerSideProps<PageProps> = 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
@@ -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<typeof getCookie>[1]
+) {
+  const sideBarStateFromCookie = getCookie(SIDEBAR_OPEN_KEY, options);
+
+  return sideBarStateFromCookie === undefined
+    ? undefined
+    : sideBarStateFromCookie === 'true'
+    ? true
+    : false;
+}
diff --git 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
@@ -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 @@ [email protected], 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"