Fix to fetch latest block on button click (#1)

* Fix fetching latest block on button click

* Get contract address from config

* Remove cache from latest block GQL query

* Print error on failing invoke

Author: nikugogoi

packages/react-app/.sample.env

@@ -1,3 +1,3 @@
 REACT_APP_PROVIDER=https://rinkeby.infura.io/v3/2717afb6bf164045b5d5468031b93f87
-REACT_APP_CONTRACT_ADDRESS=0x7963FF0883524f8f22F9e26c8814024B85dDd391
+
 REACT_APP_WATCHER_URI=http://localhost:3010/graphql

packages/react-app/src/MemberCheck.jsx

@@ -4,6 +4,7 @@ import useLazyQuery from "./hooks/useLazyQuery";
 import LATEST_BLOCK_GRAPHQL from "./queries/latestBlock";
 import IS_MEMBER_GRAPHQL from "./queries/isMember";
 import TextInput from "./TextInput";
+import { address } from "./config.json";
 
 export default function MemberCheck(props) {
   const [output, setOutput] = useState("");
@@ -30,28 +31,26 @@ export default function MemberCheck(props) {
 export function MemberCheckButton() {
   // Get latest block
   const LATEST_BLOCK_GQL = gql(LATEST_BLOCK_GRAPHQL);
-  const { loading, data: latestBlockData } = useQuery(LATEST_BLOCK_GQL, {
+  const latestBlock = useLazyQuery(LATEST_BLOCK_GQL, {
     context: { clientName: "watcher" },
+    fetchPolicy: "no-cache",
   });
 
   // Check if isMember
   const IS_MEMBER_GQL = gql(IS_MEMBER_GRAPHQL);
   const isMember = useLazyQuery(IS_MEMBER_GQL, {
     context: { clientName: "watcher" },
     variables: {
-      contractAddress: process?.env?.REACT_APP_CONTRACT_ADDRESS,
+      contractAddress: address,
     },
   });
 
-  if (loading) {
-    return <p>Loading...</p>;
-  }
-
   return (
     <MemberCheck
       checkMember={async name => {
         const codedName = `TWT:${name.toLowerCase()}`;
         try {
+          const { data: latestBlockData } = await latestBlock();
           const { data } = await isMember({ blockHash: latestBlockData?.latestBlock?.hash, key0: codedName });
 
           if (data?.isMember?.value) {

packages/react-app/src/MemberReport.jsx

@@ -86,7 +86,7 @@ function SubmitBatchButton(props) {
             setMembers([]);
           } catch (err) {
             console.error(err);
-            alert(`Error: ${err}`);
+            alert(`Error: ${err.message}`);
           }
         }}
       >

packages/react-app/src/PhisherCheck.jsx

@@ -4,6 +4,7 @@ import useLazyQuery from "./hooks/useLazyQuery";
 import LATEST_BLOCK_GRAPHQL from "./queries/latestBlock";
 import IS_PHISHER_GRAPHQL from "./queries/isPhisher";
 import TextInput from "./TextInput";
+import { address } from "./config.json";
 
 export default function PhisherCheck(props) {
   const [output, setOutput] = useState("");
@@ -30,28 +31,26 @@ export default function PhisherCheck(props) {
 export function PhisherCheckButton() {
   // Get latest block
   const LATEST_BLOCK_GQL = gql(LATEST_BLOCK_GRAPHQL);
-  const { loading, data: latestBlockData } = useQuery(LATEST_BLOCK_GQL, {
+  const latestBlock = useLazyQuery(LATEST_BLOCK_GQL, {
     context: { clientName: "watcher" },
+    fetchPolicy: "no-cache",
   });
 
   // Check if isPhisher
   const IS_PHISHER_GQL = gql(IS_PHISHER_GRAPHQL);
   const isPhisher = useLazyQuery(IS_PHISHER_GQL, {
     context: { clientName: "watcher" },
     variables: {
-      contractAddress: process?.env?.REACT_APP_CONTRACT_ADDRESS,
+      contractAddress: address,
     },
   });
 
-  if (loading) {
-    return <p>Loading...</p>;
-  }
-
   return (
     <PhisherCheck
       checkPhisher={async name => {
         const codedName = `TWT:${name.toLowerCase()}`;
         try {
+          const { data: latestBlockData } = await latestBlock();
           const { data } = await isPhisher({ blockHash: latestBlockData?.latestBlock?.hash, key0: codedName });
 
           if (data?.isPhisher?.value) {

packages/react-app/src/PhishingReport.jsx

@@ -100,7 +100,7 @@ function SubmitBatchButton(props) {
             localStorage.clear();
             setPhishers([]);
           } catch (err) {
-            alert(`Error: ${err}`);
+            alert(`Error: ${err.message}`);
           }
         }}
       >

packages/server/index.ts

@@ -25,7 +25,7 @@ const BASE_URI = 'https://mobymask.com/#';
 const fs = require('fs');
 const path = require('path');
 const configPath = path.join(__dirname, './config.json');
-const { privateKey, mnemonic, rpcUrl } = require('./secrets.json');
+const { privateKey, mnemonic, rpcUrl, baseURI = BASE_URI } = require('./secrets.json');
 
 const openrpcDocument = require('./openrpc.json');
 const { parseOpenRPCDocument } = require("@open-rpc/schema-utils-js");
@@ -230,7 +230,7 @@ async function signDelegation () {
   }
   console.log('A SIGNED DELEGATION/INVITE LINK:');
   console.log(JSON.stringify(invitation, null, 2));
-  console.log(BASE_URI + '/members?invitation=' + encodeURIComponent(JSON.stringify(invitation)));
+  console.log(baseURI + '/members?invitation=' + encodeURIComponent(JSON.stringify(invitation)));
 }
 
 function fromHexString (hexString: string) {