Adding lock display to the dashboard (#265)

* Adding lock display to the dashboard

* Adding transaction status to helper tests

* Using React fragments

unlock-app/src/__tests__/helpers/Locks.test.js

@@ -1,4 +1,4 @@
-import { getLockTransaction, getLockConfirmations } from '../../helpers/Locks'
+import {getLockTransaction, getLockConfirmations, getLockStatusString} from '../../helpers/Locks'
 
 describe('lockHelpers', () => {
   it ('should retrieve a transaction from a lock when a match exists', () => {
@@ -101,4 +101,42 @@ describe('lockHelpers', () => {
 
     expect(getLockConfirmations(transactions, Lock.address)).toEqual(null)
   })
+  it ('should return the status "deployed" for locks with mined transactions and at least 12 confirmations', () => {
+    const Lock = {
+      address: '0x1234567890',
+    }
+    const transactions = {
+      all: {
+        theTransactionWereLookingFor: {
+          hash: 'theTransactionWereLookingFor',
+          confirmations: 12,
+          status: 'mined',
+          lock: {
+            address: '0x1234567890',
+          },
+        },
+      },
+    }
+
+    expect(getLockStatusString(transactions, Lock.address)).toEqual('deployed')
+  })
+  it ('should return the status "confirming" for locks with mined transactions and under 12 confirmations', () => {
+    const Lock = {
+      address: '0x1234567890',
+    }
+    const transactions = {
+      all: {
+        theTransactionWereLookingFor: {
+          hash: 'theTransactionWereLookingFor',
+          confirmations: 4,
+          status: 'mined',
+          lock: {
+            address: '0x1234567890',
+          },
+        },
+      },
+    }
+
+    expect(getLockStatusString(transactions, Lock.address)).toEqual('confirming')
+  })
 })

unlock-app/src/components/creator/CreatorLock.js

@@ -60,6 +60,7 @@ const LockRow = styled.div`
   grid-gap: 16px;
   grid-template-columns: 32px minmax(100px, 3fr) repeat(4, minmax(56px, 100px)) minmax(174px, 1fr);
   align-items: center;
+  margin-bottom: 32px;
 `
 
 const LockName = styled.div`

unlock-app/src/components/creator/CreatorLocks.js

@@ -0,0 +1,23 @@
+import UnlockPropTypes from '../../propTypes'
+
+import React, { Component } from 'react'
+import { getLockStatusString } from '../../helpers/Locks'
+import CreatorLock from './CreatorLock'
+
+export default class CreatorLocks extends Component {
+  render() {
+    return (
+      <React.Fragment>
+        {Object.values(this.props.locks).map((lock, index) => {
+          let lockStatus = getLockStatusString(this.props.transactions, lock.address)
+          return(<CreatorLock key={index} lock={lock} status={lockStatus}/>)
+        })}
+      </React.Fragment>
+    )
+  }
+}
+
+CreatorLocks.propTypes = {
+  transactions: UnlockPropTypes.transactions,
+  locks: UnlockPropTypes.locks,
+}

unlock-app/src/components/creator/Dashboard.js

@@ -3,12 +3,14 @@ import UnlockPropTypes from '../../propTypes'
 import React, { Component } from 'react'
 import Layout from '../interface/Layout'
 import CreatorAccount from './CreatorAccount'
+import CreatorLocks from './CreatorLocks'
 
 export default class Dashboard extends Component {
   render() {
     return (
       <Layout title="Creator Dashboard">
         <CreatorAccount network={this.props.network} account={this.props.account} />
+        <CreatorLocks transactions={this.props.transactions} locks={this.props.locks} />
       </Layout>
     )
   }
@@ -17,4 +19,6 @@ export default class Dashboard extends Component {
 Dashboard.propTypes = {
   account: UnlockPropTypes.account,
   network: UnlockPropTypes.network,
+  transactions: UnlockPropTypes.transactions,
+  locks: UnlockPropTypes.locks,
 }

unlock-app/src/helpers/Locks.js

@@ -26,3 +26,17 @@ export function getLockConfirmations(transactionStore, lockAddress) {
   if (transaction) return transaction.confirmations
   return null
 }
+
+/**
+ * Returns a status string for a given lock, used to determine which component to display
+ * @param transactionStore
+ * @param lockAddress
+ * @returns {string}
+ */
+export function getLockStatusString(transactionStore, lockAddress) {
+  let transaction = getLockTransaction(transactionStore, lockAddress)
+  if (!transaction) return 'notfound'
+  if (transaction.status === 'mined' && transaction.confirmations >= 12) return 'deployed'
+  if (transaction.status === 'mined' && transaction.confirmations < 12) return 'confirming'
+  if (transaction.status !== 'mined') return 'pending'
+}

unlock-app/src/propTypes.js

@@ -36,7 +36,7 @@ export const mechanism = PropTypes.oneOf(['0', '1', '2', undefined])
 
 export const layout = PropTypes.instanceOf(Function) //PropTypes.instanceOf(React.Component)
 
-export const locks = PropTypes.arrayOf(lock)
+export const locks = PropTypes.shape({})
 
 export const transactions = PropTypes.shape({})
 

unlock-app/src/stories/creator/Dashboard.stories.js

@@ -10,7 +10,44 @@ storiesOf('Dashboard')
     const network = {
       name: 4,
     }
+    const transactions = {
+      all: {
+        0x1234: {
+          hash: '0x12345678',
+          confirmations: 12,
+          status: 'mined',
+          lock: {
+            address: '0x12345678a',
+          },
+        },
+        0x5678: {
+          hash: '0x56781234',
+          confirmations: 4,
+          status: 'mined',
+          lock: {
+            address: '0x56781234a',
+          },
+        },
+      },
+    }
+    const locks = {
+      0x5678a: {
+        address: '0x56781234a',
+        keyPrice: '10000000000000000000',
+        expirationDuration: '86400',
+        maxNumberOfKeys: '800',
+        outstandingKeys: '32',
+      },
+      0x1234a: {
+        address: '0x12345678a',
+        name: 'My Blog',
+        keyPrice: '27000000000000000',
+        expirationDuration: '172800',
+        maxNumberOfKeys: '240',
+        outstandingKeys: '3',
+      },
+    }
     return (
-      <Dashboard network={network} account={account} />
+      <Dashboard network={network} account={account} transactions={transactions} locks={locks} />
     )
   })