eslint:write & prettier:write

src/TemplateModule.js

@@ -1,72 +1,68 @@
 import React, { useEffect, useState } from 'react'
-import { Form, Input, Grid, Card, Statistic } from 'semantic-ui-react'
+import { Form, Input, Grid, Message } from 'semantic-ui-react'
 
 // Pre-built Substrate front-end utilities for connecting to a node
 // and making a transaction.
 import { useSubstrateState } from './substrate-lib'
 import { TxButton } from './substrate-lib/components'
 
 // Polkadot-JS utilities for hashing data.
-import { blake2AsHex } from '@polkadot/util-crypto';
+import { blake2AsHex } from '@polkadot/util-crypto'
 
 // Main Proof Of Existence component is exported.
 function Main(props) {
   // Establish an API to talk to the Substrate node.
-  const { api } = useSubstrateState()
-
-  // The transaction submission status
-  const [status, setStatus] = useState('')
-
+  const { api, currentAccount } = useSubstrateState()
   // React hooks for all the state variables we track.
   // Learn more at: https://reactjs.org/docs/hooks-intro.html
-  const [status, setStatus] = useState('');
-  const [digest, setDigest] = useState('');
-  const [owner, setOwner] = useState('');
-  const [block, setBlock] = useState(0);
+  const [status, setStatus] = useState('')
+  const [digest, setDigest] = useState('')
+  const [owner, setOwner] = useState('')
+  const [block, setBlock] = useState(0)
 
- // Our `FileReader()` which is accessible from our functions below.
-  let fileReader;
+  // Our `FileReader()` which is accessible from our functions below.
+  let fileReader
   // Takes our file, and creates a digest using the Blake2 256 hash function
   const bufferToDigest = () => {
     // Turns the file content to a hexadecimal representation.
     const content = Array.from(new Uint8Array(fileReader.result))
       .map(b => b.toString(16).padStart(2, '0'))
-      .join('');
-    const hash = blake2AsHex(content, 256);
-    setDigest(hash);
-  };
+      .join('')
+    const hash = blake2AsHex(content, 256)
+    setDigest(hash)
+  }
 
   // Callback function for when a new file is selected.
   const handleFileChosen = file => {
-    fileReader = new FileReader();
-    fileReader.onloadend = bufferToDigest;
-    fileReader.readAsArrayBuffer(file);
-  };
+    fileReader = new FileReader()
+    fileReader.onloadend = bufferToDigest
+    fileReader.readAsArrayBuffer(file)
+  }
 
   // React hook to update the owner and block number information for a file
   useEffect(() => {
-    let unsubscribe;
+    let unsubscribe
     // Polkadot-JS API query to the `proofs` storage item in our pallet.
     // This is a subscription, so it will always get the latest value,
     // even if it changes.
     api.query.templateModule
       .proofs(digest, result => {
         // Our storage item returns a tuple, which is represented as an array.
-        setOwner(result[0].toString());
-        setBlock(result[1].toNumber());
+        setOwner(result[0].toString())
+        setBlock(result[1].toNumber())
       })
       .then(unsub => {
-        unsubscribe = unsub;
-      });
-    return () => unsubscribe && unsubscribe();
+        unsubscribe = unsub
+      })
+    return () => unsubscribe && unsubscribe()
     // This tells the React hook to update whenever the file digest changes
     // (when a new file is chosen), or when the storage subscription says the
     // value of the storage item has updated.
-  }, [digest, api.query.templateModule]);
+  }, [digest, api.query.templateModule])
 
   // We can say a file digest is claimed if the stored block number is not 0
-  function isClaimed () {
-    return block !== 0;
+  function isClaimed() {
+    return block !== 0
   }
 
   // The actual UI elements which are returned from our component.
@@ -96,28 +92,28 @@ function Main(props) {
         <Form.Field>
           {/* Button to create a claim. Only active if a file is selected, and not already claimed. Updates the `status`. */}
           <TxButton
-            label='Create Claim'
+            label="Create Claim"
             type="SIGNED-TX"
             setStatus={setStatus}
             disabled={isClaimed() || !digest}
             attrs={{
               palletRpc: 'templateModule',
               callable: 'createClaim',
               inputParams: [digest],
-              paramFields: [true]
+              paramFields: [true],
             }}
           />
           {/* Button to revoke a claim. Only active if a file is selected, and is already claimed. Updates the `status`. */}
           <TxButton
             label="Revoke Claim"
             type="SIGNED-TX"
             setStatus={setStatus}
-            disabled={!isClaimed() || owner !== accountPair.address}
+            disabled={!isClaimed() || owner !== currentAccount.address}
             attrs={{
               palletRpc: 'templateModule',
               callable: 'revokeClaim',
               inputParams: [digest],
-              paramFields: [true]
+              paramFields: [true],
             }}
           />
         </Form.Field>
@@ -130,7 +126,5 @@ function Main(props) {
 
 export default function TemplateModule(props) {
   const { api } = useSubstrateState()
-  return api.query.templateModule && api.query.templateModule.something ? (
-    <Main {...props} />
-  ) : null
+  return api.query.templateModule ? <Main {...props} /> : null
 }