MetaMask · Voltmod · Jul 23, 2024 · Jul 23, 2024
diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss
@@ -1,10 +1,10 @@
-:root[data-theme='dark'] {
-  --accordion-background: #24272A;
+:root[data-theme="dark"] {
+  --accordion-background: #24272a;
   --accordion-border: rgba(132, 140, 150, 0.16);
 }
 
-:root[data-theme='light'] {
-  --accordion-background: #FFFFFF;
+:root[data-theme="light"] {
+  --accordion-background: #ffffff;
   --accordion-border: rgba(187, 192, 197, 0.4);
 }
 
@@ -49,7 +49,7 @@
 
     &.opened {
       visibility: visible;
-      display: block
+      display: block;
     }
   }
 }

diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -6,10 +6,11 @@ import Text from "@site/src/components/Text";
 
 interface IAccordion {
   children: string | React.ReactElement;
+  opened?: boolean;
 }
 
-export default function Accordion({ children }: IAccordion) {
-  const [isOpened, setIsOpened] = useState(true);
+export default function Accordion({ children, opened = false }: IAccordion) {
+  const [isOpened, setIsOpened] = useState(opened);
 
   const handleClose = () => {
     setIsOpened((value) => !value);

diff --git a/src/components/Alert/alert.module.scss b/src/components/Alert/alert.module.scss
@@ -1,19 +1,19 @@
-:root[data-theme='dark'] {
+:root[data-theme="dark"] {
   --alert-error-background: rgb(53, 40, 41);
-  --alert-error-border: #E06470;
+  --alert-error-border: #e06470;
   --alert-success-background: rgb(34, 48, 36);
-  --alert-success-border: #28A745;
+  --alert-success-border: #28a745;
   --alert-info-background: rgb(61, 57, 43);
-  --alert-info-border: #FFDF70;
+  --alert-info-border: #ffdf70;
 }
 
-:root[data-theme='light'] {
+:root[data-theme="light"] {
   --alert-error-background: rgb(248, 235, 237);
-  --alert-error-border: #D73847;
+  --alert-error-border: #d73847;
   --alert-success-background: rgb(234, 242, 235);
-  --alert-success-border: #1C8234;
+  --alert-success-border: #1c8234;
   --alert-info-background: rgb(247, 238, 231);
-  --alert-info-border: #BF5208;
+  --alert-info-border: #bf5208;
 }
 
 .alert {
@@ -29,7 +29,7 @@
     background-color: var(--alert-info-background);
 
     .icon {
-      color: var(--alert-info-border)
+      color: var(--alert-info-border);
     }
   }
 
@@ -38,7 +38,7 @@
     background-color: var(--alert-success-background);
 
     .icon {
-      color: var(--alert-success-border)
+      color: var(--alert-success-border);
     }
   }
 
@@ -47,7 +47,7 @@
     background-color: var(--alert-error-background);
 
     .icon {
-      color: var(--alert-error-border)
+      color: var(--alert-error-border);
     }
   }
 

diff --git a/src/components/Badge/badge.module.scss b/src/components/Badge/badge.module.scss
@@ -1,20 +1,20 @@
 :root {
-  --badge-default-color: #6A737D;
-  --badge-default-bg-color: #F2F4F6;
+  --badge-default-color: #6a737d;
+  --badge-default-bg-color: #f2f4f6;
   --badge-default-border-color: transparent;
-  --badge-success-color: #1C8234;
+  --badge-success-color: #1c8234;
   --badge-success-bg-color: rgba(28, 130, 52, 0.1);
-  --badge-error-color: #D73847;
+  --badge-error-color: #d73847;
   --badge-error-bg-color: rgba(215, 56, 71, 0.1);
 }
 
-:root[data-theme='dark'] {
-  --badge-default-color: #BBC0C5;
-  --badge-default-bg-color: #24272A;
-  --badge-default-border-color: #BBC0C5;
-  --badge-success-color: #28A745;
+:root[data-theme="dark"] {
+  --badge-default-color: #bbc0c5;
+  --badge-default-bg-color: #24272a;
+  --badge-default-border-color: #bbc0c5;
+  --badge-success-color: #28a745;
   --badge-success-bg-color: rgba(40, 167, 69, 0.15);
-  --badge-error-color: #E06470;
+  --badge-error-color: #e06470;
   --badge-error-bg-color: rgba(224, 100, 112, 0.15);
 }
 

diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
@@ -2,17 +2,13 @@ import React from "react";
 import styles from "./badge.module.scss";
 import clsx from "clsx";
 
-type variant = "error" | "success" | "default"
+type variant = "error" | "success" | "default";
 
 interface IBadge {
   variant?: variant;
   label: string;
 }
 
 export default function Badge({ variant = "default", label }: IBadge) {
-  return (
-    <span className={clsx(styles.badge, styles[variant])}>
-      {label}
-    </span>
-  );
+  return <span className={clsx(styles.badge, styles[variant])}>{label}</span>;
 }
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -1,17 +1,19 @@
-:root[data-theme='dark'] {
-  --button-background-color: #1098FC;
+:root[data-theme="dark"] {
+  --button-background-color: #1098fc;
   --button-color: #141618;
-  --button-hover-background-color: #26A2FC;
-  --button-hover-shadow: 0px 2px 8px 0px var(--shadow-primary, rgba(16, 152, 252, 0.40));
-  --button-active-background-color: #3BAAFD;
+  --button-hover-background-color: #26a2fc;
+  --button-hover-shadow: 0px 2px 8px 0px
+    var(--shadow-primary, rgba(16, 152, 252, 0.4));
+  --button-active-background-color: #3baafd;
 }
 
-:root[data-theme='light'] {
-  --button-background-color: #0376C9;
-  --button-color: #FFFFFF;
-  --button-hover-background-color: #036AB5;
-  --button-hover-shadow: 0px 2px 8px 0px var(--shadow-primary, rgba(3, 118, 201, 0.20));
-  --button-active-background-color: #025EA1;
+:root[data-theme="light"] {
+  --button-background-color: #0376c9;
+  --button-color: #ffffff;
+  --button-hover-background-color: #036ab5;
+  --button-hover-shadow: 0px 2px 8px 0px
+    var(--shadow-primary, rgba(3, 118, 201, 0.2));
+  --button-active-background-color: #025ea1;
 }
 
 .button {
@@ -42,4 +44,4 @@
   &:disabled {
     opacity: 0.5;
   }
-}
+}
diff --git a/src/components/Faucet/TransactionTable.tsx b/src/components/Faucet/TransactionTable.tsx
@@ -7,21 +7,24 @@ const TABLE_DATA = [
   {
     id: "01",
     createdAt: "2024-06-05T13:24:49.207Z",
-    txnHash: "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    txnHash:
+      "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
     value: "0.0001",
     status: "success",
   },
   {
     id: "02",
     createdAt: "2024-05-05T13:24:49.207Z",
-    txnHash: "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    txnHash:
+      "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
     value: "0.0002",
     status: "failed",
   },
   {
     id: "03",
     createdAt: "2024-07-05T13:24:49.207Z",
-    txnHash: "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    txnHash:
+      "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
     value: "0.0003",
     status: "pending",
   },
@@ -47,7 +50,8 @@ const getDiffTime = (time) => {
   const deltaTimeInDays = deltaTimeInHours / 24;
 
   if (deltaTimeInMin < 1) return transformWordEnding(deltaTimeInSec, "second");
-  if (deltaTimeInHours < 1) return transformWordEnding(deltaTimeInMin, "minute");
+  if (deltaTimeInHours < 1)
+    return transformWordEnding(deltaTimeInMin, "minute");
   if (deltaTimeInDays < 1) return transformWordEnding(deltaTimeInHours, "hour");
   return transformWordEnding(deltaTimeInDays, "day");
 };
@@ -70,13 +74,27 @@ export default function TransactionTable() {
         hideCenterLetters(item.txnHash),
         getDiffTime(item.createdAt),
         `${item.value} ETH`,
-        <Badge key={item.id} label={item.status} variant={renderStatus(item.status)} />,
-        <Link key={`link-${item.id}`} to="/" target="_blank" rel="noopener noreferrer">
+        <Badge
+          key={item.id}
+          label={item.status}
+          variant={renderStatus(item.status)}
+        />,
+        <Link
+          key={`link-${item.id}`}
+          to="/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           View on Etherscan
         </Link>,
       ],
     }));
   }, []);
 
-  return <Table thCells={["Your Transactions", "Age", "Value", "Status", ""]} trRows={dataRows} />;
+  return (
+    <Table
+      thCells={["Your Transactions", "Age", "Value", "Status", ""]}
+      trRows={dataRows}
+    />
+  );
 }
diff --git a/src/components/ParserOpenRPC/CollapseBox/styles.module.css b/src/components/ParserOpenRPC/CollapseBox/styles.module.css
@@ -61,7 +61,7 @@
   border-color: transparent;
   width: 100%;
   border-radius: 0;
-  border-bottom: 1px solid #848C96;
+  border-bottom: 1px solid #848c96;
 }
 
 .collapsedBtnView:hover {

diff --git a/src/components/ParserOpenRPC/DetailsBox/styles.module.css b/src/components/ParserOpenRPC/DetailsBox/styles.module.css
@@ -23,7 +23,7 @@
 }
 
 .paramItemWrapper:not(:first-child) {
-  border-top: 1px solid #848C96;
+  border-top: 1px solid #848c96;
 }
 
 .borderTopLine {

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -22,19 +22,25 @@ export default function Table({ classes, thCells = [], trRows = [] }: ITable) {
           <thead className={styles.thead}>
             <tr className={styles.throw}>
               {thCells.map((cell, i) => (
-                <th className={styles.thcell} key={`th-${i}`}>{cell}</th>
+                <th className={styles.thcell} key={`th-${i}`}>
+                  {cell}
+                </th>
               ))}
             </tr>
           </thead>
           <tbody>
             {trRows.map((row, i) => (
               <tr key={`tr-${i}`} className={styles.trow}>
-                {row.cells.map((cell, y) => <td className={styles.tdcell} key={`td-${i}-${y}`}>{cell}</td>)}
+                {row.cells.map((cell, y) => (
+                  <td className={styles.tdcell} key={`td-${i}-${y}`}>
+                    {cell}
+                  </td>
+                ))}
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     </div>
   );
-};
+}
diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
@@ -1,13 +1,13 @@
 :root {
   --table-border-color: rgba(132, 140, 150, 0.16);
-  --table-bg-color: #FFF;
-  --table-bg-thead-color: #F2F4F6;
+  --table-bg-color: #fff;
+  --table-bg-thead-color: #f2f4f6;
 }
 
-:root[data-theme='dark'] {
+:root[data-theme="dark"] {
   --table-border-color: rgba(132, 140, 150, 0.16);
-  --table-bg-color: #24272A;
-  --table-bg-thead-color: #24272A;
+  --table-bg-color: #24272a;
+  --table-bg-thead-color: #24272a;
 }
 
 .tableWrapper {

diff --git a/src/components/Text/text.module.scss b/src/components/Text/text.module.scss
@@ -10,7 +10,6 @@
   font-style: normal;
   font-weight: 700;
   line-height: 32px;
-
 }
 
 .h3 {
@@ -25,4 +24,4 @@
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
-}
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -324,9 +324,9 @@ button:hover {
   border-top-color: rgba(20, 22, 24, 1);
 }
 
-[data-theme="light"] .tippy-popper[x-placement^=bottom] [x-arrow] {
-    border-bottom-color:  rgba(20, 22, 24, 1);
-  }
+[data-theme="light"] .tippy-popper[x-placement^="bottom"] [x-arrow] {
+  border-bottom-color: rgba(20, 22, 24, 1);
+}
 
 [data-theme="dark"] .tippy-tooltip {
   background-color: rgba(255, 255, 255, 1);
@@ -337,12 +337,13 @@ button:hover {
   border-top-color: rgba(255, 255, 255, 1);
 }
 
-[data-theme="dark"] .tippy-popper[x-placement^=bottom] [x-arrow] {
+[data-theme="dark"] .tippy-popper[x-placement^="bottom"] [x-arrow] {
   border-bottom-color: rgba(255, 255, 255, 1);
 }
 
 @media (max-width: 1200px) {
-  .navbar__item, .navbar__link {
+  .navbar__item,
+  .navbar__link {
     font-size: 14px;
   }
 }
diff --git a/src/pages/developer-tools/faucet.module.scss b/src/pages/developer-tools/faucet.module.scss
@@ -1,10 +1,10 @@
-:root[data-theme='dark'] {
+:root[data-theme="dark"] {
   --faucet-bg-color-primary: #252526;
   --faucet-box-shadow: none;
 }
 
-:root[data-theme='light'] {
-  --faucet-bg-color-primary: #FFFFFF;
+:root[data-theme="light"] {
+  --faucet-bg-color-primary: #ffffff;
   --faucet-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 }
 
@@ -13,7 +13,8 @@
 }
 
 .authCont {
-  padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
+  padding: var(--ifm-navbar-padding-vertical)
+    var(--ifm-navbar-padding-horizontal);
   height: 80px;
   display: flex;
   justify-content: space-between;
@@ -76,4 +77,4 @@
       }
     }
   }
-}
+}