Abi Encoder Events

src/elements/buttons/LinkColorButton.scss

@@ -14,7 +14,7 @@
     color: colors.$primary-300;
   }
 
-  &:not(:disabled):not(&[data-disabled]):not(&[data-destructive]) {
+  &:not(:disabled):not(&[data-disabled]):not(&[data-active="true"]):not(&[data-destructive]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$primary-700;
@@ -50,7 +50,7 @@
     color: colors.$primary-600;
   }
 
-  &:not(&:disabled):not(&[data-disabled]):not(&[data-destructive]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]):not(&[data-destructive]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$primary-300;

src/elements/buttons/LinkGrayButton.scss

@@ -12,7 +12,7 @@
     color: colors.$gray-300;
   }
 
-  &:not(:disabled):not(&[data-disabled]):not(&[data-destructive]) {
+  &:not(:disabled):not(&[data-disabled]):not(&[data-active="true"]):not(&[data-destructive]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$gray-700;
@@ -44,7 +44,7 @@
     color: colors.$gray-600;
   }
 
-  &:not(&:disabled):not(&[data-disabled]):not(&[data-destructive]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]):not(&[data-destructive]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$gray-300;

src/elements/buttons/PrimaryButton.scss

@@ -35,7 +35,7 @@
     border-color: colors.$primary-200;
   }
 
-  &:not(&:disabled):not(&[data-disabled]):not([data-destructive]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]):not([data-destructive]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$white;
@@ -63,7 +63,7 @@
     border: 1px solid colors.$error-200;
   }
 
-  &:not(&:disabled):not(&[data-disabled]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]) {
     &[data-state="hover"],
     &:hover {
       background-color: colors.$error-700;
@@ -81,7 +81,7 @@
 }
 
 .dark .button.primary[data-destructive] {
-  &:not(&:disabled):not(&[data-disabled]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]) {
     &[data-state="focused"],
     &:focus,
     &:active,

src/elements/buttons/SecondaryGrayButton.scss

@@ -17,7 +17,7 @@
     border: 1px solid colors.$gray-200;
   }
 
-  &:not(:disabled):not(&[data-disabled]) {
+  &:not(:disabled):not(&[data-disabled]):not(&[data-active="true"]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$gray-800;
@@ -44,7 +44,7 @@
     border: 1px solid colors.$error-200;
   }
 
-  &:not(&:disabled):not(&[data-disabled]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$error-800;
@@ -71,7 +71,7 @@
     color: colors.$gray-700;
   }
 
-  &:not(&:disabled):not(&[data-disabled]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$gray-100;
@@ -98,7 +98,7 @@
     color: colors.$error-900;
   }
 
-  &:not(&:disabled):not(&[data-disabled]) {
+  &:not(&:disabled):not(&[data-disabled]):not(&[data-active="true"]) {
     &[data-state="hover"],
     &:hover {
       color: colors.$error-300;

src/react-code/Encoder/Func.jsx

@@ -9,6 +9,7 @@ import { Icon } from '../components/Icon'
 import { EncodeData } from './FunctionType/encode'
 import { ReadContract } from './FunctionType/read'
 import { WriteContract } from './FunctionType/write'
+import { Events } from './FunctionType/events'
 import {
   encodeData
 
@@ -18,29 +19,35 @@ import { createJoiSchema, getDefaultEncodeData, getFunctionSignature } from './h
 const TypeComponent = {
   encode_data: EncodeData,
   read_contract: ReadContract,
-  write_contract: WriteContract
+  write_contract: WriteContract,
+  view_events: Events
 }
 
 const Func = (props) => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const { type, func, interface: encodeInterface, count, call, isReady, abi } = props
-  const { inputs, name } = func
+  const { type, func, interface: encodeInterface, count, call, isReady, abi, address } = props
+  const { name } = func
 
   const Component = TypeComponent[type]
 
   const [encodedFn, setEncodedFn] = useState('')
 
   useEffect(() => {
-    if (type !== 'write_contract') return
+    if (type !== 'write_contract') {
+      return
+    }
 
     const encodeSignature = getFunctionSignature(func)
     const encodeArgs = getDefaultEncodeData(func)
     const _encodedFn = encodeData(encodeInterface, encodeSignature, encodeArgs, (err) => {
       console.log(`Error in encoding ${name} method with signature: ${encodeSignature} and args:`, encodeArgs)
       console.error(err)
     })
-    if (_encodedFn) setEncodedFn(_encodedFn.slice(0, 10))
+
+    if (_encodedFn) {
+      setEncodedFn(_encodedFn.slice(0, 10))
+    }
   }, [func, encodeInterface, type])
 
   useEffect(() => {
@@ -74,6 +81,7 @@ const Func = (props) => {
           encodeInterface={encodeInterface}
           joiSchema={createJoiSchema(func)}
           itemIndex={count}
+          address={address}
         />}
     </div>
   )

src/react-code/Encoder/Func.scss

@@ -97,6 +97,7 @@
     .array.item {
       position: relative;
       padding-left: 16px;
+      overflow: visible !important;
 
       button.close, button.plus {
         position: absolute;

src/react-code/Encoder/FunctionType/decode.jsx

@@ -1,10 +1,9 @@
-import { Fragment, useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { decodeData, parseEncoded } from '../helpers/solidity/methods'
 import { TextArea } from '../../components/TextArea'
 import { Button } from '../../components/Button/Button'
 
 import './decode.scss'
-import { getTypeInfo } from '../helpers/web3-tools/abi-encoder'
 
 const DecodeData = ({ encodeInterface }) => {
   const [encodedData, setEncodedData] = useState('')
@@ -26,7 +25,10 @@ const DecodeData = ({ encodeInterface }) => {
     const _decodedData = decodeData(encodeInterface, parsed, (errorMessage) => {
       setError(errorMessage)
     })
-    if (_decodedData) setDecodedData(_decodedData)
+
+    if (_decodedData) {
+      setDecodedData(_decodedData)
+    }
   }, [encodedData])
 
   const ArgList = ({ args, firstParent = true }) => {
@@ -111,7 +113,7 @@ const DecodeData = ({ encodeInterface }) => {
           id={'decode-data-input'}
           rows={5}
           value={encodedData}
-          onChange={(e) => setEncodedData(e.target.value)}
+          onChange={e => setEncodedData(e.target.value)}
           error={error}
         />
 

src/react-code/Encoder/FunctionType/encode.scss

@@ -21,7 +21,7 @@
   }
 
   .dark & {
-    background-color: colors.$gray-900;
+    background-color: colors.$black-800;
   }
 
   textarea:disabled {

src/react-code/Encoder/FunctionType/events.jsx

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useState } from 'react'
+import './events.scss'
+import { useGetLogs } from '../hooks/useGetLogs'
+import { InputWithLabel } from '../../components/InputWithLabel/InputWithLabel'
+import { useDebouncedValue } from '../hooks/useDebouncedValue'
+import { LogsTable } from '../components/LogsTable'
+import { Icon } from '../../components/Icon'
+
+const Events = ({ address, func, encodeInterface }) => {
+  const [fromBlock, setFromBlock] = useState('')
+  const [toBlock, setToBlock] = useState('')
+
+  const fromBlockDebounced = useDebouncedValue(fromBlock, 500)
+  const toBlockDebounced = useDebouncedValue(toBlock, 500)
+
+  const [logs, setLogs] = useState([])
+
+  const { isReady, getLogs, loading, error, resetError, noLogs } = useGetLogs({
+    address,
+    func,
+    iface: encodeInterface
+  })
+
+  const handleSubmit = useCallback(async (from, to) => {
+    try {
+      const logs = await getLogs(from, to)
+      setLogs(logs)
+    } catch (err) {
+      console.error(err)
+    }
+  }, [getLogs])
+
+  useEffect(() => {
+    if (!isReady || loading || !fromBlockDebounced || !toBlockDebounced) {
+      return
+    }
+
+    handleSubmit(fromBlockDebounced, toBlockDebounced)
+  }, [fromBlockDebounced, toBlockDebounced, isReady])
+
+  const handleInputChange = (field, event) => {
+    resetError()
+
+    if (field === 'fromBlock') {
+      setFromBlock(event.target.value)
+    } else {
+      setToBlock(event.target.value)
+    }
+  }
+
+  return (
+    <div className="events container">
+      <form onSubmit={handleSubmit}>
+        <div className='row'>
+          <InputWithLabel
+            label={'From block'}
+            placeholder={'1'}
+            type={'number'}
+            id={'events-input-from-block'}
+            onChange={e => handleInputChange('fromBlock', e)}
+            value={fromBlock}
+            />
+
+          <InputWithLabel
+            label={'To block'}
+            placeholder={'1200'}
+            type={'number'}
+            id={'events-input-to-block'}
+            onChange={e => handleInputChange('toBlock', e)}
+            value={toBlock}
+            />
+        </div>
+      </form>
+
+      {
+        loading && (
+          <div className='info'>
+            <p>Loading...</p>
+          </div>
+        )
+      }
+
+      {
+        noLogs && !loading && (
+          <div className='info'>
+            <p>No logs found</p>
+          </div>
+        )
+      }
+
+      {
+        (!loading && error) && (
+          <div className='error'>
+            <Icon variant='alert-circle' size={'lg'} />
+
+            <div>
+              <p className='title'>Error getting logs</p>
+              <p className='text'>{error}</p>
+
+              <button onClick={() => handleSubmit(fromBlockDebounced, toBlockDebounced)}>
+                Try Again
+                <Icon variant='refresh-ccw-02' size={'lg'} />
+              </button>
+            </div>
+          </div>
+        )
+      }
+
+      {
+        Boolean(!loading && logs.length) && (
+          <div className='logs'>
+            <LogsTable logs={logs} />
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export { Events }