Merge pull request #21 from TripleSpeeder/development

next release
TripleSpeeder · Feb 22, 2020 · 51af6ab · 51af6ab
2 parents 055182a + 92eb88c
commit 51af6ab
Show file tree

Hide file tree

Showing 11 changed files with 326 additions and 165 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,17 @@
+os: linux
+language: node_js
+node_js: 10
+jobs:
+  include:
+    - name: "Semantic Release"
+      script:
+        - npm run build
+        - npx semantic-release
+      deploy:
+        provider: pages
+        skip_cleanup: true
+        token: $GITHUB_TOKEN
+        keep_history: true
+        local_dir: build
+        on:
+          branch: master
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "TAC",
-  "version": "0.0.0",
+  "version": "0.0.0development",
   "private": true,
   "homepage": "https://tac.dappstar.io",
   "repository": "github:TripleSpeeder/token-allowance-checker",

diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,7 @@ import OnboardGate from './components/OnboardGate'
 import {Button, Container, Divider, Grid, Header, Icon, List, Menu, Popup, Segment} from 'semantic-ui-react'
 import AddressInputContainer from './components/AddressInputContainer'
 import OnboardContext from './components/OnboardContext'
+import pkg from '../package.json'
 
 
 const App = () => {
@@ -129,8 +130,9 @@ const App = () => {
             </Switch>
             </OnboardContext>
             <Segment basic>
-                <Divider></Divider>
+                <Divider/>
                 <Container textAlign={'center'}>
+                    <span style={{ fontSize: '1em', float: 'right' }}><Icon name={'copyright outline'}/> Michael Bauer</span>
                     <List horizontal >
                         <List.Item as={'a'} href={'https://twitter.com/TripleSpeeder'} target={'_blank'}>
                             <Popup content='@triplespeeder' trigger={<Icon size={'big'} name={'twitter'}/>}/>
@@ -148,13 +150,10 @@ const App = () => {
                             <Popup content='u/TripleSpeeder' trigger={<Icon size={'big'} name={'reddit'}/>}/>
                         </List.Item>
                     </List>
-                </Container>
-                <Container textAlign={'center'}>
-                    <p style={{ fontSize: '1em', float: 'right' }}><Icon name={'copyright outline'}/> Michael Bauer</p>
+                    <span style={{ fontSize: '1em', float: 'left' }}>{pkg.version}</span>
                 </Container>
             </Segment>
         </Router>
-
     )
 }
 

diff --git a/src/components/AddressDisplay.js b/src/components/AddressDisplay.js
@@ -1,11 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {Icon, Popup} from 'semantic-ui-react'
-import useClippy from 'use-clippy'
+
 
 const AddressDisplay = (props) => {
     const {address, ensName} = props
-    const [, setClipboard ] = useClippy()
+    const setClipboard = () => {
+        navigator.clipboard.writeText(address).then(function() {
+            /* clipboard successfully set */
+        }, function() {
+            console.log(`failed to set clipboard`)
+        })
+    }
 
     if (ensName) {
         return <>

diff --git a/src/components/AllowanceLister.js b/src/components/AllowanceLister.js
@@ -2,9 +2,10 @@ import React, {useContext, useEffect, useState} from 'react'
 import {useParams} from 'react-router-dom'
 import {createDfuseClient} from '@dfuse/client'
 import {Web3Context} from './OnboardContext'
-import TokenAllowanceListContainer from './TokenAllowanceListContainer'
 import 'semantic-ui-css/semantic.min.css'
-import {Icon, Message, Segment} from 'semantic-ui-react'
+import {Segment} from 'semantic-ui-react'
+import AllowancesListContainer from './AllowancesListContainer'
+import AllowancesListFilter from './AllowancesListFilter'
 
 const topicHashApprove = '0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925'
 const eventABI = [
@@ -70,6 +71,20 @@ const AllowanceLister = () => {
         addressFromParams ? addressFromParams.toLowerCase() : '',
     )
     const [page, setPage] = useState(0)
+    const [showZeroAllowances, setShowZeroAllowances] = useState(true)
+    const [addressFilter, setAddressFilter] = useState('')
+
+    const toggleShowZeroAllowances = () => {
+        setShowZeroAllowances(!showZeroAllowances)
+    }
+
+    const clearAddressFilter = () => {
+        setAddressFilter('')
+    }
+
+    const handleAddressFilterChange = (e, {name, value}) => {
+        setAddressFilter(value)
+    }
 
     useEffect(() => {
         setAddress(addressFromParams ? addressFromParams.toLowerCase() : '')
@@ -136,19 +151,19 @@ const AllowanceLister = () => {
                         // double-check owner - Is this necessary?
                         if (decoded.owner.toLowerCase() === address) {
                             // Add tokenContract if its new
-                            const tokenContract = logEntry.address
-                            if (Object.keys(tokenSpenders).includes(tokenContract)) {
+                            const tokenContractAddress = logEntry.address
+                            if (Object.keys(tokenSpenders).includes(tokenContractAddress)) {
                                 // console.log(`tokenContract ${tokenContract} already known`)
                             } else {
-                                console.log(`Adding tokenContract ${tokenContract}`)
-                                tokenSpenders[tokenContract] = []
+                                console.log(`Adding tokenContract ${tokenContractAddress}`)
+                                tokenSpenders[tokenContractAddress] = []
                             }
                             // Add spender address if its new
-                            if (tokenSpenders[tokenContract].includes(decoded.spender)) {
+                            if (tokenSpenders[tokenContractAddress].includes(decoded.spender)) {
                                 // console.log(`Spender ${decoded.spender} for ${tokenContract} already known`)
                             } else {
-                                console.log(`Adding Spender ${decoded.spender} for ${tokenContract}`)
-                                tokenSpenders[tokenContract].push(decoded.spender)
+                                console.log(`Adding Spender ${decoded.spender} for ${tokenContractAddress}`)
+                                tokenSpenders[tokenContractAddress].push(decoded.spender)
                             }
                         } else {
                             console.log(`Skipping log event due to owner mismatch. Expected ${address}, got ${decoded.owner}`)
@@ -176,79 +191,27 @@ const AllowanceLister = () => {
         }
     }, [web3Context.web3, address])
 
-    if (address === '') {
-        return (
-            <Segment basic padded='very' textAlign={'center'}>
-                <Message info icon size={'huge'}>
-                    <Icon name='info'/>
-                    <Message.Content>
-                        <Message.Header>Enter an address to start!</Message.Header>
-                    </Message.Content>
-                </Message>
-            </Segment>
-        )
-    }
-
-    if (loading) {
-        return (
-            <Segment basic padded='very' textAlign={'center'}>
-                <Message icon warning size={'huge'}>
-                    <Icon name='circle notched' loading/>
-                    <Message.Content>
-                        <Message.Header>Please wait while loading events</Message.Header>
-                        <p>Checking address: {address}</p>
-                        <div>Querying dfuse API for ERC20 Approvals, getting page {page+1}...</div>
-                    </Message.Content>
-                </Message>
-            </Segment>
-        )
-    }
-
-    if (error) {
-        return (
-            <Segment basic padded='very' textAlign={'center'}>
-                <Message error icon size={'huge'}>
-                    <Icon name='exclamation triangle'/>
-                    <Message.Content>
-                        <Message.Header>Error</Message.Header>
-                        {error}
-                    </Message.Content>
-                </Message>
-            </Segment>
-        )
-    }
-
-    if (Object.keys(tokenSpenders).length === 0) {
-        return (
-            <Segment basic padded='very' textAlign={'center'}>
-                <Message success icon size={'huge'}>
-                    <Icon name='info'/>
-                    <Message.Content>
-                        <Message.Header>No Approvals</Message.Header>
-                        Address {address} has no Approvals.
-                    </Message.Content>
-                </Message>
-            </Segment>
-        )
-    }
-
-    const tokens = []
-    for (const [key, value] of Object.entries(tokenSpenders)) {
-        tokens.push(
-            <TokenAllowanceListContainer
-                key={key}
-                owner={address}
-                spenders={value}
-                contractAddress={key}/>,
-        )
-    }
 
     return (
         <React.Fragment>
             <Segment basic>
                 <h2>Allowances of {address}:</h2>
             </Segment>
-            {tokens}
+            <AllowancesListFilter showZeroAllowances={showZeroAllowances}
+                                  toggleShowZeroAllowances={toggleShowZeroAllowances}
+                                  addressFilterValue={addressFilter}
+                                  handleAddressFilterChange={handleAddressFilterChange}
+                                  clearAddressFilter={clearAddressFilter}
+            />
+            <AllowancesListContainer
+                tokenSpenders={tokenSpenders}
+                address={address}
+                showZeroAllowances={showZeroAllowances}
+                addressFilter={addressFilter}
+                error={error}
+                loading={loading}
+                page={page}
+            />
         </React.Fragment>
     )
 }