refactor: abstracts common rpc handling into createJsonRpcRequestHandler

dapps/react-dapp-v2/src/HooksApp.tsx

@@ -53,6 +53,13 @@ import {
   SToggleContainer,
 } from "./components/app";
 
+interface FormattedRpcResponse {
+  method: string;
+  address: string;
+  valid: boolean;
+  result: string;
+}
+
 export default function App() {
   const [loading, setLoading] = useState(false);
   const [pending, setPending] = useState(false);
@@ -317,7 +324,11 @@ export default function App() {
     setChainData(chainData);
   };
 
-  const testSendTransaction = async (chainId: string) => {
+  // ----- EVM RPC -----
+
+  const createJsonRpcRequestHandler =
+    (rpcRequest: (...requestArgs: [any]) => Promise<FormattedRpcResponse>) =>
+    async (chainId: string) => {
       if (typeof client === "undefined") {
         throw new Error("WalletConnect is not initialized");
       }
@@ -327,6 +338,17 @@ export default function App() {
 
       try {
         setPending(true);
+        const result = await rpcRequest(chainId);
+        setResult(result);
+      } catch (err) {
+        console.error(err);
+        setResult(null);
+      } finally {
+        setPending(false);
+      }
+    };
+
+  const testSendTransaction = createJsonRpcRequestHandler(async (chainId: string) => {
     // get ethereum address
     const account = accounts.find(account => account.startsWith(chainId));
     if (account === undefined) throw new Error("Account is not found");
@@ -340,18 +362,16 @@ export default function App() {
 
     const balance = BigNumber.from(balances[account][0].balance || "0");
     if (balance.lt(BigNumber.from(tx.gasPrice).mul(tx.gasLimit))) {
-        const formattedResult = {
+      return {
         method: "eth_sendTransaction",
         address,
         valid: false,
         result: "Insufficient funds for intrinsic transaction cost",
       };
-        setResult(formattedResult);
-        return;
     }
 
-      const result = await client.request({
-        topic: session.topic,
+    const result: string = await client!.request({
+      topic: session!.topic,
       chainId,
       request: {
         method: "eth_sendTransaction",
@@ -360,33 +380,15 @@ export default function App() {
     });
 
     // format displayed result
-      const formattedResult = {
+    return {
       method: "eth_sendTransaction",
       address,
       valid: true,
       result,
     };
+  });
 
-      // display result
-      setResult(formattedResult);
-    } catch (e) {
-      console.error(e);
-      setResult(null);
-    } finally {
-      setPending(false);
-    }
-  };
-
-  const testSignPersonalMessage = async (chainId: string) => {
-    if (typeof client === "undefined") {
-      throw new Error("WalletConnect is not initialized");
-    }
-    if (typeof session === "undefined") {
-      throw new Error("Session is not connected");
-    }
-
-    try {
-      setPending(true);
+  const testSignPersonalMessage = createJsonRpcRequestHandler(async (chainId: string) => {
     // test message
     const message = `My email is john@doe.com - ${Date.now()}`;
 
@@ -406,8 +408,8 @@ export default function App() {
     openRequestModal();
 
     // send message
-      const result = await client.request({
-        topic: session.topic,
+    const result: string = await client!.request({
+      topic: session!.topic,
       chainId,
       request: {
         method: "personal_sign",
@@ -431,33 +433,15 @@ export default function App() {
     const valid = await verifySignature(address, result, hash, rpcUrl);
 
     // format displayed result
-      const formattedResult = {
+    return {
       method: "personal_sign",
       address,
       valid,
       result,
     };
+  });
 
-      // display result
-      setResult(formattedResult);
-    } catch (e) {
-      console.error(e);
-      setResult(null);
-    } finally {
-      setPending(false);
-    }
-  };
-
-  const testSignTypedData = async (chainId: string) => {
-    if (typeof client === "undefined") {
-      throw new Error("WalletConnect is not initialized");
-    }
-    if (typeof session === "undefined") {
-      throw new Error("Session is not connected");
-    }
-    try {
-      setPending(true);
-
+  const testSignTypedData = createJsonRpcRequestHandler(async (chainId: string) => {
     // test message
     const message = JSON.stringify(eip712.example);
 
@@ -474,8 +458,8 @@ export default function App() {
     openRequestModal();
 
     // send message
-      const result = await client.request({
-        topic: session.topic,
+    const result = await client!.request({
+      topic: session!.topic,
       chainId,
       request: {
         method: "eth_signTypedData",
@@ -499,22 +483,15 @@ export default function App() {
     const valid = await verifySignature(address, result, hash, rpcUrl);
 
     // format displayed result
-      const formattedResult = {
+    return {
       method: "eth_signTypedData",
       address,
       valid,
       result,
     };
+  });
 
-      // display result
-      setResult(formattedResult);
-    } catch (e) {
-      console.error(e);
-      setResult(null);
-    } finally {
-      setPending(false);
-    }
-  };
+  // ------ COSMOS RPC ------
 
   const testSignDirect = async (chainId: string) => {
     if (typeof client === "undefined") {