Switch to new landing page, add realms votes (#96)

helium · Dec 27, 2023 · 7d6a153 · 7d6a153
1 parent b1992bc
commit 7d6a153
Show file tree

Hide file tree

Showing 34 changed files with 1,810 additions and 1,289 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,6 +1,7 @@
 import { FunctionComponent } from "react";
 import Loading, { LoadingDots } from "./Loading";
 import Tooltip from "./Tooltip";
+import classNames from "classnames";
 
 interface ButtonProps {
   className?: string;
@@ -26,12 +27,12 @@ const Button: FunctionComponent<React.PropsWithChildren<ButtonProps>> = ({
 }) => {
   return (
     <button
-      className={`${className} default-transition font-bold px-4 bg-hv-blue-700 rounded-lg ${
+      className={`${className} default-transition font-bold px-4 bg-blue-600 rounded-lg ${
         small ? "py-1" : "py-2.5"
       } text-sm focus:outline-none ${
         disabled
           ? "opacity-60 cursor-not-allowed"
-          : "hover:bg-hv-blue-400 text-bkg-2 hover:bg-fgd-1"
+          : "hover:bg-blue-500 text-bkg-2 hover:bg-fgd-1"
       }`}
       {...props}
       style={style}
@@ -63,15 +64,18 @@ export const SecondaryButton: FunctionComponent<React.PropsWithChildren<ButtonPr
       onClick={onClick}
       disabled={disabled}
       type={type}
-      className={`${className} border border-hv-blue-700 ${
-        disabled ? "opacity-60" : "hover:bg-blue-400"
-      } font-bold default-transition rounded-lg px-4 ${
-        small ? "py-1" : "py-2.5"
-      } text-primary-light text-sm hover:border-fgd-1 hover:text-fgd-1 focus:outline-none disabled:border-fgd-4 disabled:text-fgd-3 disabled:cursor-not-allowed`}
+      className={classNames(
+        className,
+        `border border-white ${
+          disabled ? "opacity-60" : "hover:bg-gray-700"
+        } font-bold default-transition rounded-lg ${className?.includes("px") ? '' : 'px-4'} ${
+          small ? "py-1" : "py-2.5"
+        } text-primary-light text-sm hover:border-fgd-1 hover:text-fgd-1 focus:outline-none disabled:border-fgd-4 disabled:text-fgd-3 disabled:cursor-not-allowed`,
+      )}
       {...props}
     >
       <Tooltip content={tooltipMessage}>
-        <div>{isLoading ? <Loading /> : children}</div>
+        {isLoading ? <Loading /> : children}
       </Tooltip>
     </button>
   );

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -19,21 +19,15 @@ export const DAOS = {
   [MOBILE_MINT.toBase58()]: "Helium Mobile",
 };
 
-export function Header({
-  votingMint,
-  setVotingMint,
-}: {
-  votingMint: PublicKey;
-  setVotingMint: (mint: PublicKey) => void;
-}) {
+export function Header() {
   const [isExpanded, setIsExpanded] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const { network } = useNetwork()
 
   return (
-    <nav className="border-b border-gray-200 dark:border-gray-600">
+    <nav className="dark:border-gray-600">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <a href={`/?network=${network}`} className="flex items-center">
+        <a href={`/${network}`} className="flex items-center">
           <img src="/images/logo.svg" className="h-8 mr-3" alt="Helium Logo" />
           <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
             Helium
@@ -64,98 +58,13 @@ export function Header({
             />
           </svg>
         </button>
-        <div
-          className={classNames("w-full md:block md:w-auto", {
-            hidden: !isExpanded,
-          })}
-          id="navbar-default"
-        >
-          <ul className="items-center font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:flex-row space-y-4 md:space-y-0 md:space-x-8 md:mt-0 md:border-0 dark:border-gray-700">
-            <li className="flex flex-row items-center">
-              <Link
-                href={`/staking?network=${network}`}
-                className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
-              >
-                My Voting Power
-              </Link>
-            </li>
-            <li>
-              <div
-                tabIndex={0}
-                onBlur={(e) => {
-                  setDropdownOpen(false);
-                }}
-              >
-                <div
-                  data-dropdown-toggle="dropdown"
-                  onClick={() => {
-                    setDropdownOpen(!dropdownOpen);
-                  }}
-                  className="flex flex-row items-center hover:cursor-pointer items-center py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
-                >
-                  {DAOS[votingMint.toBase58()]}
-                  <svg
-                    className="w-2.5 h-2.5 ml-2.5"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 10 6"
-                  >
-                    <path
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="m1 1 4 4 4-4"
-                    />
-                  </svg>
-                </div>
-                <div
-                  id="dropdown"
-                  className={classNames(
-                    "absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700",
-                    { hidden: !dropdownOpen }
-                  )}
-                >
-                  <ul
-                    className="py-2 text-sm text-gray-700 dark:text-gray-200"
-                    aria-labelledby="dropdownDefaultButton"
-                  >
-                    {Object.entries(DAOS).map(([mint, name]) => (
-                      <li
-                        key={mint}
-                        className={
-                          mint === votingMint.toBase58()
-                            ? "bg-gray-100 dark:bg-gray-600"
-                            : undefined
-                        }
-                      >
-                        <div
-                          onClick={(e) => {
-                            setVotingMint(new PublicKey(mint));
-                            setDropdownOpen(false);
-                          }}
-                          className="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-                        >
-                          {name}
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </li>
-            <li className="flex">
-              <WalletMultiButton
-                style={{
-                  backgroundColor: "transparent",
-                  border: "1px solid rgb(75 85 99)",
-                  borderRadius: 8,
-                }}
-              />
-            </li>
-          </ul>
-        </div>
+        <WalletMultiButton
+          style={{
+            backgroundColor: "transparent",
+            border: "1px solid rgb(75 85 99)",
+            borderRadius: 8,
+          }}
+        />
       </div>
     </nav>
   );

diff --git a/components/LockTokensAccount.tsx b/components/LockTokensAccount.tsx
@@ -168,11 +168,11 @@ export const LockTokensAccount: React.FC = (props) => {
     }
   };
 
-  const mainBoxesClasses = "bg-bkg-1 col-span-1 p-4 rounded-md";
+  const mainBoxesClasses = "bg-bkg-1 col-span-1 rounded-md";
   const isLoading = loading || loadingSubDaos;
 
   return (
-    <div className="grid grid-cols-12 gap-4 text-white pt-0">
+    <div className="grid grid-cols-12 gap-4 text-white pt-0 rounded-lg bg-opacity-25 bg-gray-600">
       <div className="bg-bkg-2 rounded-lg p-4 md:p-6 col-span-12">
         <div className="flex items-center justify-between mb-4">
           <h1 className="leading-none flex flex-col mb-0 text-md sm:text-2xl font-semibold text-white">
@@ -235,18 +235,19 @@ export const LockTokensAccount: React.FC = (props) => {
               )}
             </div>
             <div
-              className={`grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8`}
+              className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8`}
             >
               {!loading &&
                 sortedPositions?.map((pos, idx) => (
                   <PositionCard key={idx} position={pos} subDaos={subDaos} />
                 ))}
-              <div className="shadow-lg bg-hv-gray-750 flex flex-col items-center justify-center p-6 rounded-lg">
+              <div className="shadow-lg bg-gray-600 flex flex-col items-center justify-center p-6 rounded-lg">
                 <BsFillLightningChargeFill className="h-8 mb-2 text-primary-light w-8" />
                 <p className="flex text-center pb-6">
                   Increase your voting power by locking your tokens.
                 </p>
                 <Button
+                  className="h-8 justify-center items-center inline-flex w-full text-xs font-bold"
                   onClick={() => setIsLockModalOpen(true)}
                   disabled={!hasTokensInWallet}
                   {...(hasTokensInWallet
@@ -256,7 +257,7 @@ export const LockTokensAccount: React.FC = (props) => {
                           "You don't have any governance tokens in your wallet to lock.",
                       })}
                 >
-                  <div className="flex items-center">
+                  <div className="flex flex-row items-center justify-center">
                     <AiFillLock className="h-5 mr-1.5 w-5" />
                     <span>Lock Tokens</span>
                   </div>

diff --git a/components/NetworkSelector.tsx b/components/NetworkSelector.tsx
@@ -0,0 +1,33 @@
+import { TabPill } from "./TabPill";
+import { useNetwork } from "../hooks/useNetwork";
+
+export const NetworkSelector = ({
+  route = "/$network"
+}) => {
+  const { network } = useNetwork();
+
+  return (
+    <div className="flex flex-col w-full">
+      <div className="flex flex-row justify-stretch space-x-2 md:space-x-6">
+        <TabPill
+          active={network == "hnt"}
+          name="HNT"
+          href={route.replace("$network", "hnt")}
+          icon="/helium.svg"
+        />
+        <TabPill
+          active={network == "mobile"}
+          name="MOBILE"
+          href={route.replace("$network", "mobile")}
+          icon="/mobile.svg"
+        />
+        <TabPill
+          active={network == "iot"}
+          name="IOT"
+          href={route.replace("$network", "iot")}
+          icon="/iot.svg"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/components/Page.tsx b/components/Page.tsx
@@ -4,14 +4,17 @@ import { Wallet } from "@coral-xyz/anchor";
 import { useAnchorProvider } from "@helium/helium-react-hooks";
 import { useNetwork } from "../hooks/useNetwork";
 
-const Page: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+const Page: React.FC<React.PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => {
   const anchorProvider = useAnchorProvider();
-  const { mint, setMint } = useNetwork();
+  const { mint } = useNetwork();
 
   return (
     <>
-      <main className="w-full min-h-screen">
-        <Header votingMint={mint} setVotingMint={setMint} />
+      <main className={`${className} w-full min-h-screen`}>
+        <Header />
         <div className="min-h-screen w-full pb-20 py-10">
           <HeliumVsrStateProvider
             connection={anchorProvider?.connection}