clean styles; update header

ChainSafe · Jan 7, 2025 · c731c25 · c731c25
1 parent f743f32
commit c731c25
Show file tree

Hide file tree

Showing 15 changed files with 213 additions and 111 deletions.
diff --git a/packages/web-wallet/src/App.tsx b/packages/web-wallet/src/App.tsx
@@ -11,9 +11,12 @@ function App() {
 
   useEffect(() => {
     // Add custom background to home page
-    document.body.classList.remove('home-page-bg');
-    if (location.pathname === '/') document.body.classList.add('home-page-bg');
-  }, [location]);
+    if (location.pathname === '/') {
+      document.body.classList.add('home-page', 'home-page-bg');
+    } else {
+      document.body.classList.remove('home-page', 'home-page-bg');
+    }
+  }, [location.pathname]);
 
   useInterval(() => {
     triggerRescan();

diff --git a/packages/web-wallet/src/assets/icons/check.svg b/packages/web-wallet/src/assets/icons/check.svg
diff --git a/packages/web-wallet/src/assets/icons/warning.svg b/packages/web-wallet/src/assets/icons/warning.svg
diff --git a/packages/web-wallet/src/assets/index.ts b/packages/web-wallet/src/assets/index.ts
@@ -14,6 +14,8 @@ import { ReactComponent as ShieldDividedSvg } from './icons/shield-divided.svg';
 import { ReactComponent as SummarySvg } from './icons/summary.svg';
 import { ReactComponent as CoinsSvg } from './icons/coins.svg';
 import { ReactComponent as ChevronSVG } from './icons/chevron.svg';
+import { ReactComponent as CheckSVG } from './icons/check.svg';
+import { ReactComponent as WarningSVG } from './icons/warning.svg';
 
 export {
   ChainsafeSvg,
@@ -30,4 +32,6 @@ export {
   SummarySvg,
   CoinsSvg,
   ChevronSVG,
+  CheckSVG,
+  WarningSVG,
 };
diff --git a/packages/web-wallet/src/components/Button/Button.tsx b/packages/web-wallet/src/components/Button/Button.tsx
@@ -1,16 +1,38 @@
-type ButtonProps = {
+import React from 'react';
+type ButtonVariant = 'primary' | 'secondary';
+
+interface ButtonProps {
   onClick: () => void;
   label: string;
-};
+  classNames?: string;
+  variant?: ButtonVariant;
+  icon?: React.ReactNode;
+}
+
+function Button({
+  onClick,
+  label,
+  classNames = '',
+  variant = 'primary',
+  icon,
+}: ButtonProps) {
+  const baseClasses =
+    'min-w-[228px] px-6 py-3 rounded-3xl text-base font-medium leading-normal cursor-pointer transition-all hover:transition-all';
+
+  const variantClasses =
+    variant === 'primary'
+      ? 'bg-[#0e0e0e] text-white border hover:bg-buttonBlackGradientHover'
+      : 'bg-transparent text-black hover:bg-[#fff7e6] border hover:border-[#ffa940]';
 
-function Button({ onClick, label }: ButtonProps) {
   return (
     <button
       onClick={onClick}
-      className="min-w-[228px] px-6 py-3 bg-[#0e0e0e] rounded-3xl text-white text-base font-medium leading-normal
-      cursor-pointer hover:bg-buttonBlackGradientHover"
+      className={`${baseClasses} ${variantClasses} ${classNames}`}
     >
-      {label}
+      <div className="flex items-center justify-center">
+        {icon && <span className="mr-2 flex items-center">{icon}</span>}
+        <span>{label}</span>
+      </div>
     </button>
   );
 }

diff --git a/packages/web-wallet/src/components/Header/Header.tsx b/packages/web-wallet/src/components/Header/Header.tsx
@@ -1,43 +1,62 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { MetaMaskSnapsLogoSvg, ZcashSvg } from '../../assets';
+import { Link, useLocation } from 'react-router-dom';
+import { MetaMaskLogoSvg, MetaMaskSnapsLogoSvg, ZcashSvg } from '../../assets';
+import Button from '@components/Button/Button';
+import { useMetaMask } from '@hooks/snaps/useMetaMask';
 
 const Header = (): React.JSX.Element => {
+  const { clearState } = useMetaMask();
+  const location = useLocation();
+  const isHomePage = location.pathname === '/';
+
   return (
-    <header className="font-inter h-[61px] w-full px-16 flex items-center justify-between bg-transparent py-3 max-h-[3.125rem]">
+    <header className="font-inter h-16 fixed top-0 left-0 w-full px-16 flex flex-grow items-center justify-between bg-transparent py-3 border-b border-neutral-200">
       <Link to={'/'}>
         <div className="flex items-center">
           <div className="h-6 w-6 mr-3">
-            <ZcashSvg />
+            <ZcashSvg className="w-[25px] h-[25px]" />
           </div>
           <div className="h-6 w-full max-w-[200px]">
-            <MetaMaskSnapsLogoSvg />
+            {isHomePage ? (
+              <MetaMaskSnapsLogoSvg />
+            ) : (
+              <MetaMaskLogoSvg className="w-[25px] h-[25px]" />
+            )}
           </div>
         </div>
       </Link>
-      <nav className="flex">
-        <a
-          target="_blank"
-          href="https://chainsafe.github.io/WebZjs/"
-          className="px-6 relative after:content-['|'] after:absolute after:right-0 after:top-0 after:bottom-0 after:w-px after:bg-[divide-dividerColor] hover:underline"
-        >
-          ZCash Docs
-        </a>
-        <a
-          target="_blank"
-          href="https://docs.metamask.io/snaps/"
-          className="px-6 hover:underline"
-        >
-          Snap Docs
-        </a>
-        <a
-          target="_blank"
-          href="https://snaps.metamask.io/"
-          className="hover:underline"
-        >
-          Snap Registry
-        </a>
-      </nav>
+      {isHomePage ? (
+        <nav className="flex">
+          <a
+            target="_blank"
+            href="https://chainsafe.github.io/WebZjs/"
+            className="px-6 relative after:content-['|'] after:absolute after:right-0 after:top-0 after:bottom-0 after:w-px after:bg-[divide-dividerColor] hover:underline"
+          >
+            ZCash Docs
+          </a>
+          <a
+            target="_blank"
+            href="https://docs.metamask.io/snaps/"
+            className="px-6 hover:underline"
+          >
+            Snap Docs
+          </a>
+          <a
+            target="_blank"
+            href="https://snaps.metamask.io/"
+            className="hover:underline"
+          >
+            Snap Registry
+          </a>
+        </nav>
+      ) : (
+        <Button
+          variant={'secondary'}
+          classNames={'min-w-max '}
+          onClick={() => clearState()}
+          label={'Sign out'}
+        />
+      )}
     </header>
   );
 };

diff --git a/packages/web-wallet/src/components/Layout/Layout.tsx b/packages/web-wallet/src/components/Layout/Layout.tsx
@@ -7,7 +7,7 @@ const Layout = ({ children }: React.PropsWithChildren): React.JSX.Element => {
   return (
     <div className="container mx-auto flex flex-col min-h-screen">
       <Header />
-      <main className="flex-grow flex justify-center py-3 self-stretch w-full">
+      <main className="flex-grow flex justify-center py-3 self-stretch mt-16 w-full">
         {children ? children : <Outlet />}
       </main>
       <Footer />

diff --git a/packages/web-wallet/src/components/TransactionStatusCard/TransactionStatusCard.tsx b/packages/web-wallet/src/components/TransactionStatusCard/TransactionStatusCard.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface TransactionStatusCardProps {
+  icon: React.JSX.Element;
+  headText: string;
+  statusMessage?: string;
+  children: React.ReactNode;
+}
+
+function TransactionStatusCard({
+  icon,
+  headText,
+  statusMessage,
+  ...props
+}: TransactionStatusCardProps): React.JSX.Element {
+  return (
+    <div className="x-9 mt-[72px] justify-center items-start gap-2.5 inline-flex">
+      <div className="max-w-[620px] w-full px-12 py-9 bg-white rounded-3xl border border-[#afafaf] flex-col justify-start items-center inline-flex">
+        <div className="self-stretch  flex-col justify-start items-start gap-3 flex">
+          <div className="flex m-auto">{icon}</div>
+          <div className="self-stretch mb-3 text-center text-black text-4xl font-medium font-['Inter'] leading-[43.20px]">
+            {headText}
+          </div>
+        </div>
+        <div className="self-stretch rounded-xl justify-start items-start gap-2 inline-flex mb-9">
+          <div className="grow shrink basis-0 text-center text-[#4f4f4f] text-base font-normal font-['Roboto'] leading-normal">
+            {statusMessage}
+          </div>
+        </div>
+        <div className="flex-col justify-center items-center gap-3 flex">
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TransactionStatusCard;
diff --git a/packages/web-wallet/src/context/MetamaskContext.tsx b/packages/web-wallet/src/context/MetamaskContext.tsx
@@ -17,12 +17,8 @@ const MetaMaskContext = createContext<MetaMaskContextType>({
   provider: null,
   installedSnap: null,
   error: null,
-  setInstalledSnap: () => {
-    /* no-op */
-  },
-  setError: () => {
-    /* no-op */
-  },
+  setInstalledSnap: () => {},
+  setError: () => {},
 });
 
 /**
@@ -55,9 +51,21 @@ export const MetaMaskProvider = ({ children }: { children: ReactNode }) => {
     return undefined;
   }, [error]);
 
+  function clearState() {
+    setProvider(null);
+    setInstalledSnap(null);
+    setError(null);
+  }
+
   return (
     <MetaMaskContext.Provider
-      value={{ provider, error, setError, installedSnap, setInstalledSnap }}
+      value={{
+        provider,
+        error,
+        setError,
+        installedSnap,
+        setInstalledSnap,
+      }}
     >
       {children}
     </MetaMaskContext.Provider>

diff --git a/packages/web-wallet/src/pages/Dashboard.tsx b/packages/web-wallet/src/pages/Dashboard.tsx
@@ -69,7 +69,7 @@ const Dashboard: React.FC = () => {
           </NavLink>
         ))}
       </nav>
-      <div className="flex mt-12 flex-col align-middle w-full mx-auto max-w-[1000px]">
+      <div className="flex flex-col align-middle w-full mx-auto max-w-[1000px]">
         <Outlet />
       </div>
     </div>

diff --git a/packages/web-wallet/src/pages/Home.tsx b/packages/web-wallet/src/pages/Home.tsx
@@ -34,7 +34,7 @@ const Home: React.FC = () => {
   }, [installedSnap, navigate]);
 
   return (
-    <div className="flex items-start md:items-center justify-center px-4">
+    <div className="home-page flex items-start md:items-center justify-center px-4">
       <div className="max-w-6xl w-full grid grid-cols-1 md:grid-cols-2 gap-14">
         <div className="hidden md:flex items-end justify-end">
           <FormTransferSvg />

diff --git a/packages/web-wallet/src/pages/TransferBalance/Step1.tsx b/packages/web-wallet/src/pages/TransferBalance/Step1.tsx
@@ -71,7 +71,7 @@ function Step1({
     if (validateFields()) nextStep();
   };
 
-  const renderSelectLabel = (balance: number) => {
+  const renderBalanceLabel = (balance: number) => {
     return (
       <div className="h-[25px] px-4 py-0.5 bg-neutral-200 rounded-3xl justify-center items-center gap-2.5 inline-flex">
         <div className="text-[#434343] text-sm font-medium font-['Roboto'] leading-[21px]">
@@ -131,8 +131,8 @@ function Step1({
                 value={pool}
                 suffix={
                   pool === PoolType.ORCHARD
-                    ? renderSelectLabel(orchardBalance)
-                    : renderSelectLabel(saplingBalance)
+                    ? renderBalanceLabel(orchardBalance)
+                    : renderBalanceLabel(saplingBalance)
                 }
                 handleChange={(value) => handleChange('pool')(value)}
                 options={PoolSelectOptions}

diff --git a/packages/web-wallet/src/pages/TransferBalance/Step3.tsx b/packages/web-wallet/src/pages/TransferBalance/Step3.tsx
@@ -2,58 +2,52 @@ import Button from '@components/Button/Button';
 import { useNavigate } from 'react-router-dom';
 import { TransferBalanceFormType } from './useTransferBalanceForm';
 import React from 'react';
+import { CheckSVG, WarningSVG } from '../../assets';
+import TransactionStatusCard from '@components/TransactionStatusCard/TransactionStatusCard';
 
 interface Step3Props {
   resetForm: TransferBalanceFormType['resetForm'];
+  error?: string | Error;
 }
 
-function Step3({ resetForm }: Step3Props): React.JSX.Element {
+function Step3({ resetForm, error }: Step3Props): React.JSX.Element {
   const navigate = useNavigate();
 
   return (
-    <div className="x-9 pt-[72px] justify-center items-start gap-2.5 inline-flex">
-      <div className="max-w-[620px] w-full px-12 py-9 bg-white rounded-3xl border border-[#afafaf] flex-col justify-start items-center gap-9 inline-flex">
-        <div className="self-stretch h-[141px] flex-col justify-start items-center gap-3 flex">
-          <div className="w-[50px] h-[50px] relative  overflow-hidden" />
-          <div className="self-stretch h-[79px] flex-col justify-start items-start gap-3 flex">
-            <div className="self-stretch h-[43px] flex-col justify-start items-center gap-6 flex">
-              <div className="self-stretch text-center text-black text-4xl font-medium font-['Inter'] leading-[43.20px]">
-                Transfer complete
-              </div>
-            </div>
-            <div className="self-stretch rounded-xl justify-start items-start gap-2 inline-flex">
-              <div className="grow shrink basis-0 text-center text-[#4f4f4f] text-base font-normal font-['Roboto'] leading-normal">
-                Your transaction has been sent.
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="h-[108px] flex-col justify-center items-center gap-3 flex">
-          <div className="self-stretch h-[108px] flex-col justify-center items-center gap-3 flex">
-            <div className="h-12 rounded-xl flex-col justify-start items-start gap-4 flex">
-              <div className="self-stretch justify-start items-start inline-flex">
-                <div className="grow shrink basis-0 h-12 px-6 py-3 bg-black rounded-3xl justify-center items-center gap-2 flex">
-                  <Button
-                    onClick={() =>
-                      navigate('/dashboard/account-summary', { replace: true })
-                    }
-                    label={'Back to Account Summary'}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="h-12 rounded-xl flex-col justify-start items-start gap-4 flex">
-              <div className="self-stretch justify-start items-start inline-flex">
-                <Button
-                  onClick={() => resetForm()}
-                  label={'Make Another Transfer'}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <>
+      {error ? (
+        <TransactionStatusCard
+          headText="Transfer complete"
+          statusMessage="Your transaction has been sent."
+          icon={<WarningSVG />}
+        >
+          <Button
+            variant="primary"
+            onClick={() => resetForm()}
+            label={'Try Again'}
+          />
+        </TransactionStatusCard>
+      ) : (
+        <TransactionStatusCard
+          headText="Transfer complete"
+          statusMessage="Your transaction has been sent."
+          icon={<CheckSVG />}
+        >
+          <Button
+            onClick={() =>
+              navigate('/dashboard/account-summary', { replace: true })
+            }
+            label={'Back to Account Summary'}
+          />
+          <Button
+            variant="secondary"
+            classNames="border-[#0e0e0e]"
+            onClick={() => resetForm()}
+            label={'Make Another Transfer'}
+          />
+        </TransactionStatusCard>
+      )}
+    </>
   );
 }