fix: clean up, fix faucet form UI issue

apps/faucet/src/App/App.tsx

@@ -1,15 +1,13 @@
 import React, { createContext, useCallback, useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
 
-import { ActionButton, Alert, Heading } from "@namada/components";
+import { ActionButton, Alert } from "@namada/components";
 import { Namada } from "@namada/integrations";
 import { ColorMode, getTheme } from "@namada/utils";
 
 import {
   AppContainer,
   BackgroundImage,
-  Banner,
-  BannerContents,
   BottomSection,
   ContentContainer,
   FaucetContainer,
@@ -24,9 +22,13 @@ import { useUntil } from "@namada/hooks";
 import { Account } from "@namada/types";
 import { API } from "utils";
 import dotsBackground from "../../public/bg-dots.svg";
-import { CallToActionCard } from "./CallToActionCard";
-import { CardsContainer } from "./Card.components";
-import { Faq } from "./Faq";
+import {
+  AppBanner,
+  AppHeader,
+  CallToActionCard,
+  CardsContainer,
+  Faq,
+} from "./Common";
 
 const DEFAULT_URL = "http://localhost:5000";
 const DEFAULT_ENDPOINT = "/api/v1/faucet";
@@ -42,7 +44,6 @@ const {
 
 const apiUrl = isProxied ? `http://localhost:${proxyPort}/proxy` : faucetApiUrl;
 const url = `${apiUrl}${faucetApiEndpoint}`;
-const api = new API(url);
 const limit = parseInt(faucetLimit);
 const runFullNodeUrl = "https://docs.namada.net/operators/ledger";
 const becomeBuilderUrl = "https://docs.namada.net/integrating-with-namada";
@@ -54,11 +55,13 @@ type Settings = {
   startsAtText?: string;
 };
 
-type AppContext = Settings & {
+type AppContext = {
   limit: number;
   url: string;
   settingsError?: string;
   api: API;
+  isTestnetLive: boolean;
+  settings: Settings;
 };
 
 const START_TIME_UTC = 1702918800;
@@ -74,17 +77,7 @@ const START_TIME_TEXT = new Date(START_TIME_UTC * 1000).toLocaleString(
   }
 );
 
-const defaults = {
-  startsAt: START_TIME_UTC,
-  startsAtText: `${START_TIME_TEXT} UTC`,
-};
-
-export const AppContext = createContext<AppContext>({
-  ...defaults,
-  limit,
-  url,
-  api,
-});
+export const AppContext = createContext<AppContext | null>(null);
 
 enum ExtensionAttachStatus {
   PendingDetection,
@@ -104,8 +97,10 @@ export const App: React.FC = () => {
   const [colorMode, _] = useState<ColorMode>(initialColorMode);
   const [isTestnetLive, setIsTestnetLive] = useState(true);
   const [settings, setSettings] = useState<Settings>({
-    ...defaults,
+    startsAt: START_TIME_UTC,
+    startsAtText: `${START_TIME_TEXT} UTC`,
   });
+  const [api, setApi] = useState<API>(new API(url));
   const [settingsError, setSettingsError] = useState<string>();
   const theme = getTheme(colorMode);
 
@@ -186,30 +181,22 @@ export const App: React.FC = () => {
   return (
     <AppContext.Provider
       value={{
-        settingsError,
+        api,
+        isTestnetLive,
         limit,
         url,
-        api,
-        ...settings,
+        settingsError,
+        settings,
       }}
     >
       <ThemeProvider theme={theme}>
         <GlobalStyles colorMode={colorMode} />
-        {!isTestnetLive && settings?.startsAtText && (
-          <Banner>
-            <BannerContents>
-              Testnet will go live {settings.startsAtText}! Faucet is disabled
-              until then.
-            </BannerContents>
-          </Banner>
-        )}
+        <AppBanner />
         <BackgroundImage imageUrl={dotsBackground} />
         <AppContainer>
           <ContentContainer>
             <TopSection>
-              <Heading className="uppercase text-black text-4xl" level="h1">
-                Namada Faucet
-              </Heading>
+              <AppHeader />
             </TopSection>
             <FaucetContainer>
               {extensionAttachStatus ===

apps/faucet/src/App/Common/AppBanner.tsx

@@ -0,0 +1,19 @@
+import { AppContext } from "App/App";
+import React, { useContext } from "react";
+import { Banner, BannerContents } from "./Banner.components";
+
+export const AppBanner: React.FC = () => {
+  const { isTestnetLive, settings } = useContext(AppContext)!;
+  return (
+    <>
+      {!isTestnetLive && settings?.startsAtText && (
+        <Banner>
+          <BannerContents>
+            Testnet will go live {settings.startsAtText}! Faucet is disabled
+            until then.
+          </BannerContents>
+        </Banner>
+      )}
+    </>
+  );
+};

apps/faucet/src/App/Common/AppHeader.tsx

@@ -0,0 +1,23 @@
+import { Heading } from "@namada/components";
+import clsx from "clsx";
+import React from "react";
+import { GoGear } from "react-icons/go";
+
+const iconsClassList = clsx(
+  "flex h-full absolute items-center text-black cursor-pointer text-[22px]",
+  "top-0 transition-colors ease-out active:top-px hover:text-cyan"
+);
+
+export const AppHeader: React.FC = () => {
+  return (
+    <Heading className="uppercase text-black text-4xl" level="h1">
+      Namada Faucet
+      <i
+        className={clsx(iconsClassList, "right-7")}
+        onClick={() => console.log("SETTINGS")}
+      >
+        <GoGear />
+      </i>
+    </Heading>
+  );
+};

apps/faucet/src/App/Common/Banner.components.ts

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export const Banner = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.utility3.highAttention};
+  color: ${(props) => props.theme.colors.primary.main20};
+  font-size: 13px;
+  font-weight: bold;
+`;
+
+export const BannerContents = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  max-width: 762px;
+  padding: 8px 0;
+  margin: 0 20px;
+`;

apps/faucet/src/App/CallToActionCard.tsx → apps/faucet/src/App/Common/CallToActionCard.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import InclineArrowBlack from "../../public/incline-arrow-black.svg";
-import InclineArrowYellow from "../../public/incline-arrow-yellow.svg";
+import InclineArrowBlack from "../../../public/incline-arrow-black.svg";
+import InclineArrowYellow from "../../../public/incline-arrow-yellow.svg";
 import {
   BottomBorder,
   CallToActionContainer,

apps/faucet/src/App/FaqDropdown.tsx → apps/faucet/src/App/Common/FaqDropdown.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import plusIcon from "../../public/plus-icon.svg";
+import plusIcon from "../../../public/plus-icon.svg";
 import {
   DropDownTitle,
   DropDownTitleText,

apps/faucet/src/App/Common/index.ts

@@ -0,0 +1,6 @@
+export * from "./AppBanner";
+export * from "./AppHeader";
+export * from "./CallToActionCard";
+export * from "./Card.components";
+export * from "./Faq";
+export * from "./FaqDropdown";

apps/faucet/src/App/Faucet.tsx

@@ -43,8 +43,12 @@ export const FaucetForm: React.FC<Props> = ({
   integration,
   isTestnetLive,
 }) => {
-  const { api, difficulty, settingsError, limit, tokens } =
-    useContext(AppContext);
+  const {
+    api,
+    settingsError,
+    limit,
+    settings: { difficulty, tokens },
+  } = useContext(AppContext)!;
 
   const accountLookup = accounts.reduce(
     (acc, account) => {
@@ -223,7 +227,7 @@ export const FaucetForm: React.FC<Props> = ({
               <Alert type="warning">Processing faucet transfer...</Alert>
             </InfoContainer>
           )}
-          {status === Status.Completed && (
+          {status === Status.Completed && statusText && (
             <InfoContainer>
               <Alert type="info">{statusText}</Alert>
             </InfoContainer>