feature(walletdetails): link walletdetails modal

app/components/ModalRoot/ModalRoot.js

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types'
 import { MdClose } from 'react-icons/lib/md'
 import SuccessfulSendCoins from './SuccessfulSendCoins'
 import SuccessfulSendPayment from './SuccessfulSendPayment'
+import WalletDetails from './WalletDetails'
 import styles from './ModalRoot.scss'
 
 const MODAL_COMPONENTS = {
   SUCCESSFUL_SEND_COINS: SuccessfulSendCoins,
-  SUCCESSFUL_SEND_PAYMENT: SuccessfulSendPayment
+  SUCCESSFUL_SEND_PAYMENT: SuccessfulSendPayment,
+  WALLET_DETAILS: WalletDetails
   /* other modals */
 }
 

app/components/ModalRoot/WalletDetails.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './WalletDetails.scss'
+
+const WalletDetails = () => {
+  return (
+    <div className={styles.walletdetails}>
+      wallet details
+    </div>
+  )
+}
+
+WalletDetails.propTypes = {
+  
+}
+
+export default WalletDetails

app/components/Wallet/Wallet.js

@@ -6,14 +6,14 @@ import CryptoIcon from 'components/CryptoIcon'
 import { btc, usd } from 'utils'
 import styles from './Wallet.scss'
 
-const Wallet = ({ ticker, currentTicker, balance, address, pubkey }) => {
+const Wallet = ({ ticker, currentTicker, balance, address, pubkey, showModal }) => {
   const copyOnClick = data => {
     copy(data)
     showNotification('Noice', 'Successfully copied to clipboard')
   }
 
   return (
-    <div className={styles.wallet}>
+    <div className={styles.wallet} onClick={() => showModal('WALLET_DETAILS', {})}>
       <div className={styles.content}>
         <div className={styles.left}>
           <div className={styles.leftContent}>
@@ -47,7 +47,8 @@ Wallet.propTypes = {
   currentTicker: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
   address: PropTypes.string.isRequired,
-  pubkey: PropTypes.string.isRequired
+  pubkey: PropTypes.string.isRequired,
+  showModal: PropTypes.func.isRequired
 }
 
 export default Wallet

app/routes/app/components/App.js

@@ -31,6 +31,7 @@ class App extends Component {
       fetchBlockHeight,
 
       modal: { modalType, modalProps },
+      showModal,
       hideModal,
       ticker,
       address: { address },
@@ -88,6 +89,7 @@ class App extends Component {
             balance={balance}
             address={address}
             pubkey={info.data.identity_pubkey}
+            showModal={showModal}
           />
           {children}
         </div>

app/routes/wallet/components/Wallet.js

@@ -38,19 +38,6 @@ class Wallet extends Component {
 
     return (
       <div className={styles.wallet}>
-        <section className={styles.header}>
-          <section className={styles.walletInfo}>
-            <ReactSVG path='../resources/zap_2.svg' />
-            <h1 data-hint='Node identity public key' className='hint--top'>{info.data.identity_pubkey}</h1>
-            <h4 className={`${styles.address} hint--top`} data-hint='Wallet address'>
-              <input
-                type='text'
-                value={address}
-                readOnly
-              />
-            </h4>
-          </section>
-        </section>
         <section className={styles.walletData}>
           <Peers
             peersLoading={peersLoading}