From 91ec12c8b43d8e0cf1a323e114c7680d5b84bab2 Mon Sep 17 00:00:00 2001
From: Richard Watts <richard@zilliqa.com>
Date: Wed, 29 Jan 2025 16:06:14 +0000
Subject: [PATCH] (fix) Formatting

---
 src/App.tsx                                   |  7 ++-
 src/execution/AddressMainPage.tsx             | 26 +++++----
 .../address/AddressReadContractAsProxy.tsx    | 53 +++++++++++------
 src/useERC1967.ts                             | 57 ++++++++++---------
 4 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5337745e..5226c52c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -354,8 +354,11 @@ const router = createBrowserRouter(
             element={<AddressContract />}
             loader={addressContractLoader}
           />
-      <Route path="readContract" element={<AddressReadContract />} />
-          <Route path="readContractAs1967Proxy" element={<AddressReadContractAsProxy />} />
+          <Route path="readContract" element={<AddressReadContract />} />
+          <Route
+            path="readContractAs1967Proxy"
+            element={<AddressReadContractAsProxy />}
+          />
           <Route
             path="proxyLogicContract"
             element={<ProxyContract />}
diff --git a/src/execution/AddressMainPage.tsx b/src/execution/AddressMainPage.tsx
index 0a490dc8..8ad9d7c8 100644
--- a/src/execution/AddressMainPage.tsx
+++ b/src/execution/AddressMainPage.tsx
@@ -15,11 +15,11 @@ import AddressOrENSNameNotFound from "../components/AddressOrENSNameNotFound";
 import NavTab from "../components/NavTab";
 import StandardFrame from "../components/StandardFrame";
 import { useProxyAttributes } from "../ots2/usePrototypeTransferHooks";
-import { useERC1967ProxyAttributes } from "../useERC1967";
 import SourcifyLogo from "../sourcify/SourcifyLogo";
 import { Match, useSourcifyMetadata } from "../sourcify/useSourcify";
 import { useWhatsabiMetadata } from "../sourcify/useWhatsabi";
 import { ChecksummedAddress } from "../types";
+import { useERC1967ProxyAttributes } from "../useERC1967";
 import { useHasCode } from "../useErigonHooks";
 import { useAddressOrENS } from "../useResolvedAddresses";
 import { RuntimeContext } from "../useRuntime";
@@ -97,8 +97,11 @@ const AddressMainPage: React.FC = () => {
     config.assetsURLPrefix,
   );
 
-  const eip1967ProxyAttrs = useERC1967ProxyAttributes(provider, checksummedAddress);
-  
+  const eip1967ProxyAttrs = useERC1967ProxyAttributes(
+    provider,
+    checksummedAddress,
+  );
+
   return (
     <StandardFrame>
       {error ? (
@@ -173,13 +176,16 @@ const AddressMainPage: React.FC = () => {
                         </span>
                       </NavTab>
                     )}
-                  {((match || whatsabiMatch) && eip1967ProxyAttrs?.delegate) && (
-                    <NavTab href={`/address/${addressOrName}/readContractAs1967Proxy`}>
-                        <span className={`flex items-baseline space-x-2`}>
-                          <span>Read As Proxy</span>
-                        </span>
-                      </NavTab>
-                    )}
+                    {(match || whatsabiMatch) &&
+                      eip1967ProxyAttrs?.delegate && (
+                        <NavTab
+                          href={`/address/${addressOrName}/readContractAs1967Proxy`}
+                        >
+                          <span className={`flex items-baseline space-x-2`}>
+                            <span>Read As Proxy</span>
+                          </span>
+                        </NavTab>
+                      )}
                   </>
                 )}
                 {config?.experimental && (
diff --git a/src/execution/address/AddressReadContractAsProxy.tsx b/src/execution/address/AddressReadContractAsProxy.tsx
index b65c2166..7d6101fd 100644
--- a/src/execution/address/AddressReadContractAsProxy.tsx
+++ b/src/execution/address/AddressReadContractAsProxy.tsx
@@ -1,21 +1,22 @@
 import { FC, useContext } from "react";
-import { useOutletContext } from "react-router-dom";
-import { NavLink } from "react-router-dom";
-import { type AddressOutletContext } from "../AddressMainPage";
-import ReadContract from "./contract/ReadContract";
-import { RuntimeContext } from "../../useRuntime";
-import { useERC1967ProxyAttributes } from "../../useERC1967";
-import { Match, useSourcifyMetadata } from "../../sourcify/useSourcify";
-import { useWhatsabiMetadata } from "../../sourcify/useWhatsabi";
+import { NavLink, useOutletContext } from "react-router-dom";
 import ContentFrame from "../../components/ContentFrame";
+import { useSourcifyMetadata } from "../../sourcify/useSourcify";
+import { useWhatsabiMetadata } from "../../sourcify/useWhatsabi";
 import { addressURL } from "../../url.ts";
+import { useERC1967ProxyAttributes } from "../../useERC1967";
+import { RuntimeContext } from "../../useRuntime";
+import { type AddressOutletContext } from "../AddressMainPage";
+import ReadContract from "./contract/ReadContract";
 
 const AddressReadContractAsProxy: FC = () => {
-  const { address } =
-    useOutletContext() as AddressOutletContext;
+  const { address } = useOutletContext() as AddressOutletContext;
   const { config, provider } = useContext(RuntimeContext);
   const proxyAttributes = useERC1967ProxyAttributes(provider, address);
-  const match = useSourcifyMetadata(proxyAttributes?.delegate, provider._network.chainId);
+  const match = useSourcifyMetadata(
+    proxyAttributes?.delegate,
+    provider._network.chainId,
+  );
   const whatsabiMatch = useWhatsabiMetadata(
     match === null ? proxyAttributes?.delegate : undefined,
     provider._network.chainId,
@@ -26,14 +27,30 @@ const AddressReadContractAsProxy: FC = () => {
   return (
     <ContentFrame tabs>
       <div>
-      <p className="py-6" > Reading ERC-1967 proxy
-      <NavLink className="rounded-lg bg-link-blue/10 px-2 py-1 text-xs text-link-blue hover:bg-link-blue/100 hover:text-white" to={addressURL(address)}>{address}</NavLink>
-      whose implementation is at
-      <NavLink className="rounded-lg bg-link-blue/10 px-2 py-1 text-xs text-link-blue hover:bg-link-blue/100 hover:text-white" to={addressURL(proxyAttributes!.delegate)}>{proxyAttributes?.delegate}</NavLink>.
-      </p>
+        <p className="py-6">
+          {" "}
+          Reading ERC-1967 proxy
+          <NavLink
+            className="rounded-lg bg-link-blue/10 px-2 py-1 text-xs text-link-blue hover:bg-link-blue/100 hover:text-white"
+            to={addressURL(address)}
+          >
+            {address}
+          </NavLink>
+          whose implementation is at
+          <NavLink
+            className="rounded-lg bg-link-blue/10 px-2 py-1 text-xs text-link-blue hover:bg-link-blue/100 hover:text-white"
+            to={addressURL(proxyAttributes!.delegate)}
+          >
+            {proxyAttributes?.delegate}
+          </NavLink>
+          .
+        </p>
       </div>
-      <ReadContract checksummedAddress={address} match={match ?? whatsabiMatch} />
-      </ContentFrame>
+      <ReadContract
+        checksummedAddress={address}
+        match={match ?? whatsabiMatch}
+      />
+    </ContentFrame>
   );
 };
 
diff --git a/src/useERC1967.ts b/src/useERC1967.ts
index 8d492167..4077c3b9 100644
--- a/src/useERC1967.ts
+++ b/src/useERC1967.ts
@@ -1,26 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
-import {
-  Contract,
-  JsonRpcApiProvider,
-  TransactionReceipt,
-  TransactionResponse,
-  ZeroAddress,
-  getAddress,
-  BigNumberish,
-} from "ethers";
-import { Fetcher } from "swr";
-import useSWRImmutable from "swr/immutable";
+import { JsonRpcApiProvider, getAddress } from "ethers";
 
 type Address = string;
 
-const DELEGATE_STORAGE_LOCATION = "0x360894a13ba1a3210667c828492db98dca3e2076cc3735a920a3ca505d382bbc";
-const BEACON_STORAGE_LOCATION = "0xa3f0ad74e5423aebfd80d3ef4346578335a9a72aeaee59ff6cb3582b35133d50";
-const ADMIN_STORAGE_LOCATION = "0xb53127684a568b3173ae13b9f8a6016e243e63b6e8ee1178d6a717850b5d6103";
+const DELEGATE_STORAGE_LOCATION =
+  "0x360894a13ba1a3210667c828492db98dca3e2076cc3735a920a3ca505d382bbc";
+const BEACON_STORAGE_LOCATION =
+  "0xa3f0ad74e5423aebfd80d3ef4346578335a9a72aeaee59ff6cb3582b35133d50";
+const ADMIN_STORAGE_LOCATION =
+  "0xb53127684a568b3173ae13b9f8a6016e243e63b6e8ee1178d6a717850b5d6103";
 
 export type ERC1967ProxyAttributes = {
-  delegate: Address,
-  beacon: Address | undefined,
-  admin: Address | undefined
+  delegate: Address;
+  beacon: Address | undefined;
+  admin: Address | undefined;
 };
 
 export const GetStorageQuery = (
@@ -29,17 +22,19 @@ export const GetStorageQuery = (
   slot: string,
 ) => {
   return {
-    queryKey: [ "getStorageAt", address, slot ],
+    queryKey: ["getStorageAt", address, slot],
     queryFn: () => {
       return provider.getStorage(address, slot);
     },
   };
 };
 
-
-export const useERC1967ProxyAttributes = (provider: JsonRpcApiProvider, address: Address | undefined): ERC1967ProxyAttributes | undefined => {
-  function toAddress(s: string | undefined) : string | undefined {
-    if (s===undefined || s === "0x") {
+export const useERC1967ProxyAttributes = (
+  provider: JsonRpcApiProvider,
+  address: Address | undefined,
+): ERC1967ProxyAttributes | undefined => {
+  function toAddress(s: string | undefined): string | undefined {
+    if (s === undefined || s === "0x") {
       return undefined;
     }
     const addr = getAddress("0x" + s.toLowerCase().slice(-40));
@@ -47,18 +42,24 @@ export const useERC1967ProxyAttributes = (provider: JsonRpcApiProvider, address:
   }
 
   if (address === undefined) {
-    return undefined
+    return undefined;
   }
-  const { data: delegateData }= useQuery(GetStorageQuery(provider, address, DELEGATE_STORAGE_LOCATION) );
-  const { data: beaconData }= useQuery(GetStorageQuery(provider, address, BEACON_STORAGE_LOCATION) );
-  const { data: adminData }= useQuery(GetStorageQuery(provider, address, ADMIN_STORAGE_LOCATION) );
+  const { data: delegateData } = useQuery(
+    GetStorageQuery(provider, address, DELEGATE_STORAGE_LOCATION),
+  );
+  const { data: beaconData } = useQuery(
+    GetStorageQuery(provider, address, BEACON_STORAGE_LOCATION),
+  );
+  const { data: adminData } = useQuery(
+    GetStorageQuery(provider, address, ADMIN_STORAGE_LOCATION),
+  );
 
   const delegate = toAddress(delegateData);
   const beacon = toAddress(beaconData);
   const admin = toAddress(adminData);
 
   if (delegate === undefined) {
-    return undefined
+    return undefined;
   }
-  return { delegate, beacon, admin }
+  return { delegate, beacon, admin };
 };