feat: add frontend design

.github/workflows/main.yml

@@ -0,0 +1,18 @@
+name: Unit Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: [main]
+
+jobs:
+  Jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Run Tests
+        run: |
+          npm install --legacy-peer-deps
+          npm test

app/components/button.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { FunctionComponent } from "react";
+import styles from "../styles/components/button.module.css";
+import { CircularProgress } from "@mui/material";
+
+type ButtonProps = {
+  onClick: () => void;
+  children: string;
+  icon?: React.ReactNode;
+  width?: number;
+  loading?: boolean;
+};
+
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick,
+  icon,
+  width = 0,
+  loading = false,
+}) => {
+  return (
+    <div
+      className={styles.svgBorder}
+      onClick={onClick}
+      style={{ width: `${width ? width + "px" : "auto"} ` }}
+    >
+      <div className={styles.btnContainer}>
+        {loading || icon ? (
+          <div className={styles.btnIcon}>
+            {loading ? (
+              <CircularProgress size={24} sx={{ color: "#4C6449" }} />
+            ) : (
+              icon
+            )}
+          </div>
+        ) : null}
+        <div className={styles.btnText}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Button;

app/components/countdown.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { FunctionComponent, useEffect, useState } from "react";
+import styles from "../styles/components/countdown.module.css";
+import { formatTime } from "@/utils/stringService";
+
+type CountdownProps = {};
+
+const Countdown: FunctionComponent<CountdownProps> = ({}) => {
+  const [timeRemaining, setTimeRemaining] = useState(120); // in seconds
+  const formattedTime = formatTime(timeRemaining);
+  const [minutes, seconds] = formattedTime.split(":");
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeRemaining((prevTime) => (prevTime > 0 ? prevTime - 1 : 0));
+    }, 1000);
+
+    // Cleanup interval on component unmount
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <>
+      <div className={styles.countdownWrapper}>
+        <div className={styles.countdown}>{minutes[0]}</div>
+      </div>
+      <div className={styles.countdownWrapper}>
+        <div className={styles.countdown}>{minutes[1]}</div>
+      </div>
+      <div>:</div>
+      <div className={styles.countdownWrapper}>
+        <div className={styles.countdown}>{seconds[0]}</div>
+      </div>
+      <div className={styles.countdownWrapper}>
+        <div className={styles.countdown}>{seconds[1]}</div>
+      </div>
+    </>
+  );
+};
+
+export default Countdown;

app/components/ethButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React, { FunctionComponent } from "react";
+import styles from "../styles/components/ethButton.module.css";
+
+type EthButtonProps = {
+  onClick: () => void;
+};
+
+const EthButton: FunctionComponent<EthButtonProps> = ({ onClick }) => {
+  return (
+    <div className={styles.base} onClick={onClick}>
+      <div className={styles.innerCircle}>
+        <div className={styles.content}>
+          <img src="/visuals/ethereumIcon.svg" alt="ethereum icon" />
+          <p>PRESS</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EthButton;

app/components/modal.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styles from "../styles/components/modal.module.css";
+import { FunctionComponent, ReactNode } from "react";
+import { Modal } from "@mui/material";
+
+type ModalMessageProps = {
+  title: string;
+  message: ReactNode;
+  closeModal: () => void;
+  open: boolean;
+};
+
+const ModalMessage: FunctionComponent<ModalMessageProps> = ({
+  title,
+  message,
+  closeModal,
+  open,
+}) => {
+  return (
+    <Modal
+      disableAutoFocus
+      open={open}
+      onClose={closeModal}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <div className={styles.menu_wrapper}>
+        <div className={styles.menu}>
+          <p className={styles.menu_title}>{title}</p>
+          {message}
+          <div onClick={closeModal} className={styles.menu_close}>
+            Close
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default ModalMessage;

app/components/starknetConnect.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { FunctionComponent } from "react";
+import { Modal, useMediaQuery } from "@mui/material";
+import { Connector } from "starknetkit";
+import styles from "../styles/components/walletConnect.module.css";
+import {
+  getConnectorDiscovery,
+  getConnectorIcon,
+  getConnectorName,
+  sortConnectors,
+} from "@/utils/starknetConnectorsWrapper";
+import Button from "./button";
+
+type StarknetWalletConnectProps = {
+  closeModal: () => void;
+  open: boolean;
+  connectors: Connector[];
+  connectWallet: (connector: Connector) => void;
+};
+
+const StarknetWalletConnect: FunctionComponent<StarknetWalletConnectProps> = ({
+  closeModal,
+  open,
+  connectors,
+  connectWallet,
+}) => {
+  const connect = (connector: Connector) => {
+    connectWallet(connector);
+    closeModal();
+  };
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  const filterConnectors = (connectors: Connector[]) => {
+    if (!isMobile) return connectors;
+    return connectors.filter((connector) => connector.id !== "argentMobile");
+  };
+
+  const getWalletName = (connectorId: string, isAvailable: boolean): string => {
+    return `${!isAvailable ? "Install " : ""}${
+      connectorId === "argentX" && isMobile
+        ? "Argent"
+        : getConnectorName(connectorId)
+    }`;
+  };
+
+  return (
+    <Modal
+      disableAutoFocus
+      open={open}
+      onClose={closeModal}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      componentsProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: "blur(4px)",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      }}
+    >
+      <div className={styles.menu_wrapper}>
+        <div className={styles.menu}>
+          <div className={styles.modalContent}>
+            <div className={styles.modalTitle}>
+              Connect <span>to</span>
+            </div>
+            {sortConnectors(filterConnectors(connectors)).map(
+              (connector: Connector) => {
+                const isAvailable = connector.available();
+                return (
+                  <div
+                    key={connector.id}
+                    className={styles.wallet}
+                    onClick={
+                      isAvailable
+                        ? () => connect(connector)
+                        : () => window.open(getConnectorDiscovery(connector.id))
+                    }
+                  >
+                    <Button
+                      onClick={() => console.log("Open connect wallet modal")}
+                      icon={
+                        <img
+                          src={getConnectorIcon(connector.id)}
+                          className={styles.walletIcon}
+                        />
+                      }
+                      width={300}
+                    >
+                      {getWalletName(connector.id, isAvailable)}
+                    </Button>
+                  </div>
+                );
+              }
+            )}
+            <div onClick={closeModal} className={styles.menu_close}>
+              Close
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default StarknetWalletConnect;

app/components/stats.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React, { FunctionComponent } from "react";
+import styles from "../styles/components/stats.module.css";
+
+type StatsProps = {};
+
+const Stats: FunctionComponent<StatsProps> = ({}) => {
+  const clickNumber: number = 0;
+  const timeClicked: number = 0;
+  const totalParticipants = 126702;
+
+  return (
+    <div className={styles.statsSections}>
+      <div className={styles.statsSection}>
+        <p>Click number</p>
+        <p>{clickNumber !== 0 ? clickNumber.toLocaleString("en-US") : "--"}</p>
+      </div>
+      <div className={styles.statsSection}>
+        <p>Time clicked</p>
+        <p>{timeClicked !== 0 ? timeClicked.toLocaleString("en-US") : "--"}</p>
+      </div>
+      <div className={styles.statsSection}>
+        <p>Total participants</p>
+        <p>{totalParticipants.toLocaleString("en-US")}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Stats;

app/layout.tsx

@@ -1,12 +1,36 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import "./styles/globals.css";
+import { Providers } from "./provider";
 
+// todo: update with right text
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "The ETH button",
   description: "Generated by create next app",
+  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_LINK as string),
+  // openGraph: {
+  //   title: "The ETH button",
+  //   description: "Generated by create next app",
+  //   url: process.env.NEXT_PUBLIC_APP_LINK,
+  //   siteName: "The ETH button",
+  //   images: [
+  //     {
+  //       url: "/visuals/twitterImage.webp",
+  //       width: 680,
+  //       height: 680,
+  //     },
+  //   ],
+  //   locale: "en_US",
+  //   type: "website",
+  // },
+  // icons: {
+  //   icon: "/icons/theethbutton.svg",
+  // },
+  // twitter: {
+  //   card: "summary_large_image",
+  //   title: "The ETH button",
+  //   description: "Generated by create next app",
+  //   images: ["/visuals/twitterImage.webp"],
+  // },
 };
 
 export default function RootLayout({
@@ -16,7 +40,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className="mainContainer">
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }