ACT-1473 Assemble faucet page

MetaMask · Jul 25, 2024 · 52ab084 · Chator1 · Jul 25, 2024 · Chator1
1 parent 50e5158
commit 52ab084
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 81 deletions.
diff --git a/src/components/Faucet/Hero.tsx b/src/components/Faucet/Hero.tsx
@@ -3,6 +3,7 @@ import Text from "@site/src/components/Text";
 import Button from "@site/src/components/Button";
 import Input from "@site/src/components/Input";
 import clsx from "clsx";
+import EthIcon from "./eth.svg";
 
 import styles from "./hero.module.scss";
 
@@ -33,52 +34,68 @@ export default function Hero({
 }: IHero) {
   return (
     <div className={clsx(styles.hero, className)}>
+      {!(isUserConnected && isWalletConnected) && <EthIcon />}
       <Text as="h1">
         {network === "linea" && "Linea Sepolia"}
         {network === "sepolia" && "Sepolia"} ETH delivered straight to your
         wallet.
       </Text>
-      <Text as="p">Enter your MetaMask wallet address and request ETH.</Text>
-
+      {isUserConnected && isWalletConnected && (
+        <Text as="p">Enter your MetaMask wallet address and request ETH.</Text>
+      )}
+      {!(isUserConnected && isWalletConnected) && (
+        <Text as="p">
+          Sign in with MetaMask to get started and request ETH.
+        </Text>
+      )}
       <div className={styles.actions}>
-        <div className={styles.inputCont}>
-          <Input
-            label="Wallet address"
-            value={inputValue}
-            placeholder="ex. 0x"
-            onChange={handleOnInputChange}
-          />
-          <p className={styles.caption}>
-            The amount of Sepolia ETH you’ll get is determined by your addresses
-            Ethereum Mainnet activity to ensure fair and bot-free distribution
-          </p>
-        </div>
-        {!isUserConnected ? (
-          <Button
-            isLoading={isLoading}
-            className={styles.button}
-            onClick={handleLogin}
-          >
-            Sign in
-          </Button>
-        ) : !isWalletConnected ? (
-          <Button
-            isLoading={isLoading}
-            className={styles.button}
-            onClick={handleConnectWallet}
-          >
-            Install MetaMask
-          </Button>
-        ) : (
-          <Button
-            isLoading={isLoading}
-            disabled={!inputValue}
-            className={styles.button}
-            onClick={handleRequest}
-          >
-            Request ETH
-          </Button>
+        {isUserConnected && isWalletConnected && (
+          <div className={styles.inputCont}>
+            <Input
+              label="Wallet address"
+              value={inputValue}
+              placeholder="ex. 0x"
+              onChange={handleOnInputChange}
+            />
+            <p className={styles.caption}>
+              The amount of Sepolia ETH you’ll get is determined by your
+              addresses Ethereum Mainnet activity to ensure fair and bot-free
+              distribution
+            </p>
+          </div>
         )}
+        <div
+          className={clsx(
+            isUserConnected && isWalletConnected && styles.alignedButtons,
+          )}
+        >
+          {!isUserConnected ? (
+            <Button
+              isLoading={isLoading}
+              className={styles.button}
+              onClick={handleLogin}
+            >
+              Sign in
+            </Button>
+          ) : !isWalletConnected ? (
+            <Button
+              isLoading={isLoading}
+              className={styles.button}
+              onClick={handleConnectWallet}
+            >
+              Install MetaMask
+            </Button>
+          ) : (
+            <Button
+              isLoading={isLoading}
+              disabled={!inputValue}
+              className={styles.button}
+              onClick={handleRequest}
+            >
+              Request ETH
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Faucet/TransactionTable.tsx b/src/components/Faucet/TransactionTable.tsx
@@ -4,33 +4,6 @@ import Badge from "@site/src/components/Badge";
 import Table from "@site/src/components/Table";
 import Text from "@site/src/components/Text";
 
-const TABLE_DATA = [
-  {
-    id: "01",
-    createdAt: "2024-06-05T13:24:49.207Z",
-    txnHash:
-      "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
-    value: "0.0001",
-    status: "success",
-  },
-  {
-    id: "02",
-    createdAt: "2024-05-05T13:24:49.207Z",
-    txnHash:
-      "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
-    value: "0.0002",
-    status: "failed",
-  },
-  {
-    id: "03",
-    createdAt: "2024-07-05T13:24:49.207Z",
-    txnHash:
-      "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
-    value: "0.0003",
-    status: "pending",
-  },
-];
-
 const hideCenterLetters = (word) => {
   if (word.length < 10) return word;
   return `${word.substring(0, 5)}...${word.substring(word.length - 4)}`;
@@ -71,14 +44,22 @@ const renderStatus = (status) => {
 interface ITransactionTable {
   className?: string;
   classNameHeading?: string;
+  data: {
+    id: string;
+    createdAt: string;
+    txnHash: string;
+    value: string;
+    status: string;
+  }[];
 }
 
 export default function TransactionTable({
   className,
   classNameHeading,
+  data,
 }: ITransactionTable) {
   const dataRows = useMemo(() => {
-    return TABLE_DATA.map((item) => ({
+    return data.map((item) => ({
       cells: [
         hideCenterLetters(item.txnHash),
         getDiffTime(item.createdAt),

diff --git a/src/components/Faucet/eth.svg b/src/components/Faucet/eth.svg
diff --git a/src/components/Faucet/hero.module.scss b/src/components/Faucet/hero.module.scss
@@ -37,9 +37,12 @@
       }
     }
 
+    .alignedButtons {
+      margin-top: 22px;
+    }
+
     .button {
       height: 48px;
-      margin-top: 22px;
 
       @media screen and (max-width: 996px) {
         width: 100%;

diff --git a/src/pages/developer-tools/faucet.module.scss b/src/pages/developer-tools/faucet.module.scss
@@ -9,7 +9,7 @@
 :root[data-theme="light"] {
   --faucet-bg-color-primary: #ffffff;
   --faucet-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  --faucet-faq-bg: rgb(224, 226, 228);
+  --faucet-faq-bg: rgb(242, 244, 246);
   --faucet-hero-border: rgba(187, 192, 197, 0.4);
   --faucet-hero-background: #f2f4f6;
 }

diff --git a/src/pages/developer-tools/faucet.tsx b/src/pages/developer-tools/faucet.tsx
@@ -15,17 +15,71 @@ import { useAlert } from "react-alert";
 import { useSDK } from "@metamask/sdk-react";
 
 import styles from "./faucet.module.scss";
-import { useTimeout } from "react-use";
+
+const LINEA = [
+  {
+    id: "01",
+    createdAt: "2024-06-05T13:24:49.207Z",
+    txnHash:
+      "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0001",
+    status: "success",
+  },
+  {
+    id: "02",
+    createdAt: "2024-05-05T13:24:49.207Z",
+    txnHash:
+      "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0002",
+    status: "failed",
+  },
+  {
+    id: "03",
+    createdAt: "2024-07-05T13:24:49.207Z",
+    txnHash:
+      "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0003",
+    status: "pending",
+  },
+];
+
+const SEPOLIA = [
+  {
+    id: "03",
+    createdAt: "2024-07-05T13:24:49.207Z",
+    txnHash:
+      "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0003",
+    status: "pending",
+  },
+  {
+    id: "01",
+    createdAt: "2024-06-05T13:24:49.207Z",
+    txnHash:
+      "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0001",
+    status: "success",
+  },
+  {
+    id: "02",
+    createdAt: "2024-05-05T13:24:49.207Z",
+    txnHash:
+      "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0002",
+    status: "failed",
+  },
+];
 
 export default function Faucet() {
+  const { sdk, ready, connected, provider, account } = useSDK();
   const alert = useAlert();
   const [isUserConnected, setIsUserConnected] = useState(false);
-  const [walletAddress, setWalletAddress] = useState();
   const [isLoading, setIsLoading] = useState(false);
-  const { sdk, ready, connected, provider, account } = useSDK();
+  const [isMMConnected, setIsMMConnected] = useState(false);
+  const [walletAddress, setWalletAddress] = useState("");
 
   const isWalletConnected = useMemo(() => {
-    return true; // ready && connected && !!account;
+    return ready && connected && !!account;
   }, [ready, connected, account]);
 
   const handleLogin = () => {
@@ -38,10 +92,13 @@ export default function Faucet() {
   };
 
   const connectSDKHandler = async () => {
-    // @TODO remove later
-    alert.error(<AlertCommonIssue />);
-
     try {
+      setIsLoading(true);
+      setTimeout(() => {
+        setIsLoading(false);
+        setIsMMConnected(true);
+        alert.error(<AlertCommonIssue />);
+      }, 2000);
       const accounts = await sdk?.connect();
     } catch (err) {
       console.warn("failed to connect..", err);
@@ -53,6 +110,7 @@ export default function Faucet() {
     setTimeout(() => {
       setIsLoading(false);
       alert.success(<AlertSuccess url="https://www.infura.io" />);
+      setWalletAddress("");
     }, 2000);
   };
 
@@ -70,14 +128,19 @@ export default function Faucet() {
             className={styles.hero}
             handleLogin={handleLogin}
             handleC
-            isWalletConnected={isWalletConnected}
+            isWalletConnected={isMMConnected || isWalletConnected}
             handleConnectWallet={connectSDKHandler}
             handleRequest={handleRequest}
             handleOnInputChange={handleOnInputChange}
             inputValue={walletAddress}
             isLoading={isLoading}
           />
-          <TransactionTable classNameHeading={styles.sectionHeading} />
+          {isUserConnected && (
+            <TransactionTable
+              data={network === "linea" ? LINEA : SEPOLIA}
+              classNameHeading={styles.sectionHeading}
+            />
+          )}
         </div>
         <div className={styles.bottomContent}>
           <Faq
@@ -95,9 +158,13 @@ export default function Faucet() {
       <div className={styles.authCont}>
         <span className={styles.title}>MetaMask Faucet</span>
         {!isUserConnected ? (
-          <Button onClick={handleLogin}>Sign in</Button>
-        ) : !isWalletConnected ? (
-          <Button onClick={connectSDKHandler}>Install MetaMask</Button>
+          <Button isLoading={isLoading} onClick={handleLogin}>
+            Sign in
+          </Button>
+        ) : !(isMMConnected || isWalletConnected) ? (
+          <Button isLoading={isLoading} onClick={connectSDKHandler}>
+            Install MetaMask
+          </Button>
         ) : (
           <div>walletId</div>
         )}