feat: add cache call functionality and work on identicon

package.json

@@ -56,6 +56,7 @@
     "polished": "^2.3.0",
     "prop-types": "^15.6.2",
     "react": "16.7.0-alpha.2",
+    "react-blockies": "^1.4.0",
     "react-dom": "16.7.0-alpha.2",
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1",

src/bootstrap/app.js

@@ -4,6 +4,7 @@ import { Col, Layout, Menu, Row } from 'antd'
 import { DrizzleProvider, Initializer } from '../temp/drizzle-react-hooks'
 import { Helmet } from 'react-helmet'
 import Home from '../containers/home'
+import Identicon from '../components/identicon'
 import { ReactComponent as Logo } from '../assets/images/logo.svg'
 import NotificationSettings from '../components/notification-settings'
 import Notifications from '../components/notifications'
@@ -102,6 +103,7 @@ export default () => (
                 <StyledCol span={4}>
                   <Notifications notifications={notifications} />
                   <NotificationSettings settings={settings} />
+                  <Identicon pinakion />
                 </StyledCol>
               </Row>
             </Layout.Header>

src/components/identicon.js

@@ -0,0 +1,75 @@
+import { List, Popover } from 'antd'
+import PropTypes from 'prop-types'
+import React from 'react'
+import ReactBlockies from 'react-blockies'
+import styled from 'styled-components/macro'
+import { useDrizzle } from '../temp/drizzle-react-hooks'
+
+const StyledDiv = styled.div`
+  line-height: 100%;
+`
+const StyledReactBlockies = styled(ReactBlockies)`
+  border-radius: ${({ large }) => (large ? '4' : '16')}px;
+`
+const Identicon = ({ large, pinakion: _pinakion }) => {
+  const { drizzle, drizzleState } = useDrizzle()
+  const content = (
+    <StyledDiv>
+      <StyledReactBlockies
+        large={large}
+        scale={large ? 7 : 4}
+        seed={drizzleState.accounts[0].toLowerCase()}
+        size={large ? 14 : 8}
+      />
+    </StyledDiv>
+  )
+  return large ? (
+    content
+  ) : (
+    <Popover
+      arrowPointAtCenter
+      content={
+        <List>
+          <List.Item>
+            <List.Item.Meta
+              description={`${drizzleState.accounts[0].slice(
+                0,
+                6
+              )}...${drizzleState.accounts[0].slice(
+                drizzleState.accounts[0].length - 4
+              )}`}
+              title="Address"
+            />
+          </List.Item>
+          <List.Item>
+            <List.Item.Meta
+              description={Number(
+                drizzle.web3.utils.fromWei(
+                  drizzleState.accountBalances[drizzleState.accounts[0]]
+                )
+              ).toFixed(4)}
+              title="ETH"
+            />
+          </List.Item>
+        </List>
+      }
+      placement="bottomRight"
+      title="Your Account"
+      trigger="click"
+    >
+      {content}
+    </Popover>
+  )
+}
+
+Identicon.propTypes = {
+  large: PropTypes.bool,
+  pinakion: PropTypes.bool
+}
+
+Identicon.defaultProps = {
+  large: false,
+  pinakion: false
+}
+
+export default Identicon

src/temp/drizzle-react-hooks.js

@@ -17,13 +17,25 @@ export const DrizzleProvider = ({ children, drizzle }) => {
     drizzleStatus: { initialized: false },
     web3: { status: 'initializing' }
   })
+  const cacheCall = useCallback(
+    (contractName, methodName, ...args) => {
+      const cacheKey = drizzle.contracts[contractName].methods[
+        methodName
+      ].cacheCall(...args)
+      return (
+        drizzleState.contracts[contractName][methodName][cacheKey] &&
+        drizzleState.contracts[contractName][methodName][cacheKey].value
+      )
+    },
+    [drizzle, drizzleState]
+  )
   const setAndCacheDrizzleState = useCallback(newDrizzleState => {
     setDrizzleState(newDrizzleState)
     localStorage.setItem(
       newDrizzleState.accounts[0],
       JSON.stringify(newDrizzleState)
     )
-  })
+  }, [])
   useEffect(
     () => {
       const cachedDrizzleState = JSON.parse(
@@ -44,11 +56,12 @@ export const DrizzleProvider = ({ children, drizzle }) => {
     <Context.Provider
       value={useMemo(
         () => ({
+          cacheCall,
           drizzle,
           drizzleState,
           setDrizzleState: setAndCacheDrizzleState
         }),
-        [drizzle, drizzleState, setAndCacheDrizzleState]
+        [cacheCall, drizzle, drizzleState, setAndCacheDrizzleState]
       )}
     >
       {children}

yarn.lock

@@ -11539,6 +11539,13 @@ react-app-polyfill@^0.1.3:
     raf "3.4.0"
     whatwg-fetch "3.0.0"
 
+react-blockies@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-blockies/-/react-blockies-1.4.0.tgz#4a23927c8c2368df569054778e732dc9d32342ab"
+  integrity sha512-AQe8oLnb5TabDrIJJ4XzoH2djapuLtEockB+Fcx/5hLAFzFmbsRsv8tJL3p+LOb3gK0hLJlJfd1JMtjSAJpcNA==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-create-ref@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-create-ref/-/react-create-ref-1.0.0.tgz#c9fc1b40acfc05449c4ee84cc44a4635088938c2"