Initial commit for creator lock component and stories (#244)

* Initial commit for creator lock component

* Using CSS rather than hard changes

* Minor formatting correction

unlock-app/src/__tests__/components/helpers/Balance.test.js

@@ -12,8 +12,17 @@ describe('Balance Component', () => {
     amount={amount}
     unit={unit} />)
 
+  const wrapperNoSymbol = shallow(<Balance
+    amount={amount}
+    unit={unit}
+    symbol={false} />)
+
   it('shows the balance in Eth', () => {
     expect(wrapper.text()).toEqual('Ξ 100')
   })
 
+  it('respects request to hide Eth symbol', () => {
+    expect(wrapperNoSymbol.text()).toEqual('100')
+  })
+
 })

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

@@ -0,0 +1,195 @@
+import React from 'react'
+import styled from 'styled-components'
+import UnlockPropTypes from '../../propTypes'
+import Duration from '../helpers/Duration'
+import Balance from '../helpers/Balance'
+import Icon from '../lock/Icon'
+
+import Icons from '../interface/icons'
+
+export function CreatorLock({ lock, status = 'deployed' }) {
+  // Some sanitization of strings to display
+  let name = lock.name || 'New Lock'
+  let outstandingKeys = lock.maxNumberOfKeys - lock.outstandingKeys || 0
+
+  if (status === 'deployed') { // the transaction was mined and confirmed at least 12 times
+    // TODO add USD values to lock
+    // TODO add all-time balance to lock
+    return (
+      <CreatorLockRow>
+        <CreatorLockSaved>
+          <CreatorLockIcon><Icon lock={lock} address={lock.address} size={'3'} /></CreatorLockIcon>
+          <CreatorLockName>
+            {name}
+            <CreatorLockAddress>{lock.address}</CreatorLockAddress>
+          </CreatorLockName>
+          <CreatorLockDuration>
+            <Duration seconds={lock.expirationDuration} />
+          </CreatorLockDuration>
+          <CreatorLockKeys>{outstandingKeys} / {lock.maxNumberOfKeys}</CreatorLockKeys>
+          <CreatorLockValue>
+            <CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.keyPrice} symbol={false} /></CreatorLockValueEth>
+          </CreatorLockValue>
+          <CreatorLockValue>
+            <CreatorLockValueMain><CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.balance} symbol={false} /></CreatorLockValueEth></CreatorLockValueMain>
+          </CreatorLockValue>
+          <CreatorLockIconBar>
+            <CreatorLockIconBarIcon>
+              <Icons.Withdraw />
+            </CreatorLockIconBarIcon>
+            <CreatorLockIconBarIcon>
+              <Icons.Edit />
+            </CreatorLockIconBarIcon>
+            <CreatorLockIconBarIcon>
+              <Icons.Download />
+            </CreatorLockIconBarIcon>
+            <CreatorLockIconBarIcon>
+              <Icons.Code />
+            </CreatorLockIconBarIcon>
+          </CreatorLockIconBar>
+        </CreatorLockSaved>
+      </CreatorLockRow>
+    )
+  }
+  if (status === 'confirming') { // the transaction was mined but hasn't yet been confirmed at least 12 times
+    return (
+      <CreatorLockRow>
+        <CreatorLockConfirming>
+          <CreatorLockIcon><Icon lock={lock} address={lock.address} size={'3'} /></CreatorLockIcon>
+          <CreatorLockName>
+            {name}
+            <CreatorLockAddress>{lock.address}</CreatorLockAddress>
+          </CreatorLockName>
+          <CreatorLockDuration>
+            <Duration seconds={lock.expirationDuration} />
+          </CreatorLockDuration>
+          <CreatorLockKeys>{outstandingKeys} / {lock.maxNumberOfKeys}</CreatorLockKeys>
+          <CreatorLockValue>
+            <CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.keyPrice} symbol={false} /></CreatorLockValueEth>
+          </CreatorLockValue>
+          <CreatorLockValue>
+            <CreatorLockValueMain><CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.balance} symbol={false} /></CreatorLockValueEth></CreatorLockValueMain>
+          </CreatorLockValue>
+          <CreatorLockStatus>
+            <CreatorLockStatusLabel>
+              Pending
+            </CreatorLockStatusLabel>
+          </CreatorLockStatus>
+        </CreatorLockConfirming>
+      </CreatorLockRow>
+    )
+  }
+}
+
+CreatorLock.propTypes = {
+  lock: UnlockPropTypes.lock,
+  status: UnlockPropTypes.status,
+}
+
+export default CreatorLock
+
+const CreatorLockRow = styled.div`
+  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  grid-gap: 8px;
+  font-family: 'IBM Plex Mono', 'Courier New', Serif;
+  font-weight: 200;
+  color: var(--slate);
+  padding: 10px 0 10px 0;
+  height: 64px;
+`
+
+const CreatorLockSaved = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 2fr repeat(4, 1fr) 2fr;
+`
+
+const CreatorLockConfirming = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 2fr repeat(3, 1fr) 2fr 1fr;
+`
+
+const CreatorLockIcon = styled.div`
+  padding-left: 5px;
+`
+
+const CreatorLockName = styled.div`
+  color: var(--link);
+  font-weight: 600;
+`
+
+const CreatorLockAddress = styled.div`
+  color: var(--grey);
+  font-weight: 200;
+  font-size: 0.75em;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const CreatorLockDuration = styled.div`
+`
+
+const CreatorLockKeys = styled.div`
+`
+
+const CreatorLockValue = styled.div`
+`
+
+/* Saving for use with sub-values that need to be added in a future PR
+const CreatorLockValueSub = styled.div`
+  font-size: 0.6em;
+  color: var(--grey);
+  margin-top: 5px;
+`
+*/
+
+const CreatorLockValueMain = styled.div`
+  font-weight: bold;
+`
+
+const CreatorLockValueEth = styled.div`
+`
+
+/* Saving for use with sub-values that need to be added in a future PR
+const CreatorLockValueUsd = styled.div`
+  &:before {
+    content: "$ ";
+  }
+`
+*/
+
+const LockCurrency = styled.span`
+  font-size: 0.7em;
+`
+
+const CreatorLockIconBar = styled.div`
+  text-align: right;
+  padding-right: 10px;
+  padding: 0;
+  margin: 0;
+  font-size: 28px;
+`
+
+const CreatorLockIconBarIcon = styled.div`
+  display: inline-block;
+  margin-right: 10px;
+  cursor: pointer;
+`
+
+const CreatorLockStatus = styled.div`
+  padding: -10px;
+  margin: 0;
+  margin-top: -10px;
+  margin-bottom: -22px;
+  background-color: var(--lightgrey);
+  text-align: center;
+  font-family: "IBM Plex Sans", sans-serif;
+  font-weight: 200;
+  color: var(--grey);
+`
+
+const CreatorLockStatusLabel = styled.div`
+  margin-top: 30px;
+`

unlock-app/src/components/helpers/Balance.js

@@ -7,15 +7,19 @@ import Web3Utils from 'web3-utils'
  * @param {*} amount: the amount to convert to Eth
  * @param {string} unit: the unit of the amount to convert to Eth
  */
-export function Balance({ amount, unit = 'wei' }) {
-  const inWei = Web3Utils.toWei(amount || '0', unit)
-  const inEth = Web3Utils.fromWei(inWei, 'ether')
-  return (<span>Ξ {inEth}</span>)
+export function Balance({ amount, unit = 'wei', symbol=true }) {
+  let inWei = Web3Utils.toWei(amount || '0', unit)
+  let inEth = Web3Utils.fromWei(inWei, 'ether')
+  if (symbol) {
+    inEth = 'Ξ ' + inEth
+  }
+  return (<span>{inEth}</span>)
 }
 
 Balance.propTypes = {
   amount: PropTypes.string,
   unit: PropTypes.string,
+  symbol: PropTypes.bool,
 }
 
 export default Balance

unlock-app/src/propTypes.js

@@ -42,6 +42,8 @@ export const provider = PropTypes.string
 
 export const networks = PropTypes.shape({})
 
+export const status = PropTypes.string
+
 export default {
   account,
   address,
@@ -57,4 +59,5 @@ export default {
   mechanism,
   provider,
   transaction,
+  status,
 }

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { CreatorLock } from '../../components/creator/CreatorLock'
+
+storiesOf('CreatorLock')
+  .add('Deployed', () => {
+    const lock = {
+      keyPrice: '10000000000000000000',
+      expirationDuration: '172800',
+      maxNumberOfKeys: '240',
+      outstandingKeys: '3',
+      address: '0xab7c74abc0c4d48d1bdad5dcb26153fc8780f83e',
+    }
+    const status = 'deployed'
+    return (
+      <CreatorLock lock={lock} status={status} />
+    )
+  })
+  .add('Confirming', () => {
+    const lock = {
+      keyPrice: '10000000000000000000',
+      expirationDuration: '172800',
+      maxNumberOfKeys: '240',
+      outstandingKeys: '3',
+      address: '0xab7c74abc0c4d48d1bdad5dcb26153fc8780f83e',
+    }
+    const status = 'confirming'
+    return (
+      <CreatorLock lock={lock} status={status} />
+    )
+  })