(feat) Skin UI to make it look a bit more like Zilliqa

index.html

@@ -4,10 +4,13 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Erigon based block explorer" />
+    <meta name="description" content="Zilliqa block explorer" />
     <meta name="format-detection" content="telephone=no" />
     <link rel="apple-touch-icon" href="/logo192.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Montserrat"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/ConnectionErrorPanel.tsx

@@ -18,68 +18,32 @@ const ConnectionErrorPanel: React.FC<ConnectionErrorPanelProps> = ({
   config,
 }) => {
   return (
-    <div className="flex h-screen flex-col bg-gray-300 font-sans">
-      <div className="min-w-lg m-auto h-60 max-w-lg text-lg text-gray-700">
-        <Step type="wait" msg="Trying to connect to Erigon node..." />
+    <div className="flex h-screen flex-col font-sans">
+      <div className="min-w-lg m-auto h-60 max-w-lg">
+        <Step type="wait" msg="Trying to connect to Zilliqa node..." />
         <div className="flex space-x-2">
           <span className="ml-7 text-base">{config?.erigonURL}</span>
         </div>
         {connStatus === ConnectionStatus.NOT_ETH_NODE && (
-          <Step type="error" msg="It does not seem to be an ETH node">
+          <Step type="error" msg="This does not seem to be a Zilliqa node">
             <p>Make sure your browser can access the URL above.</p>
-            <p>
-              If you want to customize the Erigon rpcdaemon endpoint, please
-              follow these{" "}
-              <a
-                href="https://github.com/wmitsuda/otterscan#run-otterscan-docker-image-from-docker-hub"
-                target="_blank"
-                rel="noreferrer noopener"
-                className="font-bold text-blue-800 hover:underline"
-              >
-                instructions
-              </a>
-              .
-            </p>
           </Step>
         )}
         {connStatus === ConnectionStatus.NOT_ERIGON && (
           <>
-            <Step type="ok" msg="It is an ETH node" />
-            <Step type="error" msg="It does not seem to be an Erigon node">
-              Make sure you rpcdaemon with Otterscan patches is up and running
-              and the <strong>erigon_</strong> namespace is enabled according to
-              the{" "}
-              <a
-                href="https://github.com/wmitsuda/otterscan#install-otterscan-patches-on-top-of-erigon"
-                target="_blank"
-                rel="noreferrer noopener"
-                className="font-bold text-blue-800 hover:underline"
-              >
-                instructions
-              </a>
-              .
+            <Step type="ok" msg="It is a Zilliqa node" />
+            <Step type="error" msg="It does not seem to be an Zilliqa node">
+              Make sure your Zilliqa node is running.
             </Step>
           </>
         )}
         {connStatus === ConnectionStatus.NOT_OTTERSCAN_PATCHED && (
           <>
-            <Step type="ok" msg="It is an Erigon node" />
+            <Step type="ok" msg="It is a Zilliqa node" />
             <Step
               type="error"
               msg="It does not seem to contain up-to-date Otterscan patches"
-            >
-              Make sure you compiled rpcdaemon with compatible Otterscan patches
-              and enabled <strong>ots_</strong> namespace according to the{" "}
-              <a
-                href="https://github.com/wmitsuda/otterscan#install-otterscan-patches-on-top-of-erigon"
-                target="_blank"
-                rel="noreferrer noopener"
-                className="font-bold text-blue-800 hover:underline"
-              >
-                instructions
-              </a>
-              .
-            </Step>
+            ></Step>
           </>
         )}
       </div>

src/Footer.tsx

@@ -9,11 +9,11 @@ const Footer: React.FC = () => {
       className={`w-full border-t border-t-gray-100 px-2 py-1 text-xs ${
         provider?._network.chainId === 1n
           ? "bg-link-blue text-gray-200"
-          : "bg-orange-400 text-white"
+          : "bg-zq-lightblue text-white font-bold"
       } text-center`}
     >
       {provider ? (
-        <>Using Erigon node at {config?.erigonURL}</>
+        <>Using Zilliqa node at {config?.erigonURL}</>
       ) : (
         <>Waiting for the provider...</>
       )}

src/Home.tsx

@@ -104,6 +104,7 @@ const Home: FC = () => {
           >
             <div>Latest block: {commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
+            <div>Ziliqa Otterscan Version: {config?.version}</div>
           </NavLink>
         )}
         {finalizedSlotNumber !== undefined && (

src/PriceBox.tsx

@@ -53,7 +53,7 @@ const PriceBox: React.FC = () => {
       {latestPriceData && (
         <div
           className={`flex space-x-2 rounded-lg px-2 py-1 ${
-            maybeOutdated ? "bg-orange-200" : "bg-gray-100"
+            maybeOutdated ? "bg-zq-lightblue" : "bg-gray-100"
           } font-sans text-xs text-gray-800`}
         >
           <span

src/SourcifyMenu.tsx

@@ -50,7 +50,7 @@ const SourcifyMenuItem: React.FC<PropsWithChildren<SourcifyMenuItemProps>> = ({
     {({ active }) => (
       <button
         className={`px-2 py-1 text-left text-sm ${
-          active ? "border-orange-200 text-gray-500" : "text-gray-400"
+          active ? "border-zq-lightblue text-gray-500" : "text-gray-400"
         } transition-colors transition-transform duration-75 ${
           checked ? "text-gray-900" : ""
         }`}

src/WarningHeader.tsx

@@ -29,7 +29,7 @@ const WarningHeader: React.FC = () => {
 
   return (
     <div
-      className="w-full bg-orange-400 px-2 py-1 text-center font-bold text-white"
+      className="w-full bg-zq-lightblue px-2 py-1 text-center font-bold text-white"
       data-test="warning-header-network-name"
     >
       You are on {chainMsg}

src/components/BlockLink.tsx

@@ -24,7 +24,7 @@ const BlockLink: FC<BlockLinkProps> = ({ blockTag }) => {
       }`}
       to={blockURL(blockTag)}
     >
-      <span className="text-orange-500">
+      <span className="text-black">
         <FontAwesomeIcon className="self-center" icon={faCube} size="1x" />
       </span>
       <span>{text.toString()}</span>

src/components/DSBlockLink.tsx

@@ -24,7 +24,7 @@ const DSBlockLink: FC<DSBlockLinkProps> = ({ blockTag }) => {
       }`}
       to={dsBlockURL(blockTag)}
     >
-      <span className="text-orange-500">
+      <span className="text-black">
         <FontAwesomeIcon className="self-center" icon={faCube} size="1x" />
       </span>
       <span>{text}</span>

src/components/PercentagePosition.tsx

@@ -6,7 +6,7 @@ type PercentagePositionProps = {
 
 const PercentagePosition: FC<PercentagePositionProps> = ({ perc }) => (
   <div className="w-40 self-center">
-    <div className="relative h-5 w-full rounded border border-orange-200">
+    <div className="relative h-5 w-full rounded border border-zq-darkblue">
       <div className="absolute h-1/2 w-full border-b"></div>
       <div className="absolute top-1/4 h-1/2 w-full border-l-2 border-r-2 border-gray-300"></div>
       <div className="absolute top-1/4 h-1/2 w-1/2 border-r-2 border-gray-300"></div>

src/execution/Block.tsx

@@ -125,7 +125,7 @@ const Block: FC = () => {
           {burntFees !== null && burntFees !== undefined && (
             <InfoRow title="Burnt Fees">
               <div className="flex items-baseline space-x-1">
-                <span className="flex space-x-1 text-orange-500">
+                <span className="flex space-x-1 text-black">
                   <span title="Burnt fees">
                     <FontAwesomeIcon icon={faBurn} size="1x" />
                   </span>

src/execution/transaction/RewardSplit.tsx

@@ -39,7 +39,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
           textColor="text-orange-800"
         />
         <div className="flex items-baseline space-x-1">
-          <span className="flex space-x-1 text-orange-500">
+          <span className="flex space-x-1 text-black">
             <span title="Burnt fees">
               <FontAwesomeIcon icon={faBurn} size="1x" />
             </span>

src/selection/FormattedBalanceHighlighter.tsx

@@ -23,7 +23,7 @@ const FormattedBalanceHighlighter: FC<FormattedBalanceProps> = ({
         selection !== null &&
         selection.type === "value" &&
         selection.content === value.toString()
-          ? "border-orange-400 bg-amber-100"
+          ? "border-zq-lightblue bg-amber-100"
           : "border-transparent"
       }`}
       onMouseEnter={select}

src/useConfig.ts

@@ -116,6 +116,10 @@ export type OtterscanConfig = {
    * "central_server" whose values are their respective root URLs.
    */
   sourcifySources?: { [key: string]: string };
+
+  /** Version number
+   */
+  version: string;
 };
 
 /**
@@ -155,6 +159,7 @@ export const useConfig = (
         );
       }
     }
+    _config.version = "zq1.0.0";
     return _config;
   }, [data]);
 

src/useRuntime.ts

@@ -74,6 +74,7 @@ export const useRuntime = (): OtterscanRuntime => {
         zilliqa: zilliqa,
       };
     }
+
     return { config: effectiveConfig, connStatus, provider, zilliqa };
   }, [effectiveConfig, connStatus, provider, zilliqa]);
 

tailwind.config.js

@@ -17,15 +17,18 @@ export default {
         "link-blue-hover": "#0468ab",
         "verified-contract": "#2b50aa",
         "verified-contract-hover": "#26007b",
+        "zq-darkblue": "#2B9297",
+        "zq-lightblue": "#4DBBBA",
+        "zq-whitetext": "#F0F0F0",
       },
       fontFamily: {
-        sans: ["Roboto"],
-        title: ["Space Grotesk"],
-        address: ["Roboto Mono"],
+        sans: ["Montserrat"],
+        title: ["Montserrat"],
+        address: ["Montserrat"],
         hash: ["Roboto Mono"],
         data: ["Roboto Mono"],
         balance: ["Fira Code"],
-        blocknum: ["Roboto"],
+        blocknum: ["Montserrat"],
         code: ["Fira Code"],
       },
       borderColor: {