Merge pull request #2092 from LiskHQ/2038-implement-my-account-component

Implement the my account component - closes #2038

i18n/locales/en/common.json

@@ -228,6 +228,7 @@
   "ID already added to bookmarks": "ID already added to bookmarks",
   "If you’re not sure how to do this please follow the": "If you’re not sure how to do this please follow the",
   "In": "In",
+  "In order to see your recent transactions you need to sign in.": "In order to see your recent transactions you need to sign in.",
   "In order to use this Lisk Hub feature you need to sign in to your Lisk account.": "In order to use this Lisk Hub feature you need to sign in to your Lisk account.",
   "In this section of Lisk Hub you can vote for up to 101 delegates to secure Lisk’s blockchain network. By doing so you have a real impact on the Lisk ecosystem.": "In this section of Lisk Hub you can vote for up to 101 delegates to secure Lisk’s blockchain network. By doing so you have a real impact on the Lisk ecosystem.",
   "Include your operating system and screen resolution in your report": "Include your operating system and screen resolution in your report",
@@ -458,6 +459,7 @@
   "Sign a message": "Sign a message",
   "Sign back in": "Sign back in",
   "Sign in": "Sign in",
+  "Sign in to view recent transactions": "Sign in to view recent transactions",
   "Sign in with a Hardware Wallet": "Sign in with a Hardware Wallet",
   "Sign in with a Passphrase": "Sign in with a Passphrase",
   "Simply scan the QR code using the Lisk Mobile app or any other QR code reader": "Simply scan the QR code using the Lisk Mobile app or any other QR code reader",
@@ -555,6 +557,7 @@
   "Voting submitted": "Voting submitted",
   "Voting summary": "Voting summary",
   "Wallet": "Wallet",
+  "Wallet details": "Wallet details",
   "We recommend including date & time or a specific keyword.": "We recommend including date & time or a specific keyword.",
   "Welcome back": "Welcome back",
   "Welcome to Lisk Delegates!": "Welcome to Lisk Delegates!",
@@ -625,5 +628,6 @@
   "{{fee}} {{token}}": "{{fee}} {{token}}",
   "{{length}} bytes left": "{{length}} bytes left",
   "{{length}} extra characters": "{{length}} extra characters",
-  "{{length}} out of {{maxLength}} characters left": "{{length}} out of {{maxLength}} characters left"
+  "{{length}} out of {{maxLength}} characters left": "{{length}} out of {{maxLength}} characters left",
+  "{{token}} Balance": "{{token}} Balance"
 }

src/components/dashboardV2/dashboard.css

@@ -1,4 +1,3 @@
-@import '../app/variables.css';
 @import '../app/variablesV2.css';
 @import '../app/mixins.css';
 
@@ -42,11 +41,34 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
+
+    & > .subContainer {
+      width: 100%;
+      max-width: 431px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      box-sizing: border-box;
+    }
+
+    & > .community {
+      width: 100%;
+      max-width: 541px;
+      box-sizing: border-box;
+      margin: 0 12px;
+    }
+
+    & > .bookmarks {
+      width: 100%;
+      max-width: 321px;
+      box-sizing: border-box;
+    }
   }
 }
 
-.bookmarkList {
-  max-width: 321px;
+.marginFix {
+  margin-bottom: 12px;
 }
 
 .bannerWrapper {
@@ -55,132 +77,20 @@
   width: 100%;
 }
 
-.bottomModuleWrapper {
-  height: auto;
-  min-height: 200px;
-  padding: 0px 8px;
-
-  & > div:first-child {
-    padding-right: 10px;
-    height: auto;
-  }
-
-  & > div:last-child {
-    padding-left: 10px;
-  }
-}
-
 .initLink {
   margin-left: 25px;
   color: var(--color-link-active);
   font-size: var(--paragraph-font-size-l);
   text-decoration: none;
 }
 
-.bookmarks {
-  height: auto;
-  padding: 0;
-  width: calc(50% - 10px);
-}
-
-.newsFeedWrapper {
-  width: 100%;
-  max-width: 540px;
-  margin: 0 15px;
-}
-
-.seeAllLink {
-  font-family: var(--content-font);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-primary-standard);
-  margin-left: 40px;
-  text-decoration: none;
-}
-
-.graph {
-  padding: 0px;
-  height: 318px;
-}
-
-.showMore {
-  align-self: flex-end;
-  margin-top: auto;
-}
-
 @media (--medium-viewport) {
   .wrapper {
-    margin: 0;
-    min-height: unset;
-
-    & .main {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: flex-start;
-      flex-basis: 100%;
-      max-width: 100%;
-      min-height: min-content;
-      padding-bottom: 50px;
+    & > .main {
+      & > .bookmarks {
+        max-width: 431px;
+        margin-left: 12px;
+      }
     }
   }
-
-  .latestActivity {
-    height: auto;
-    min-height: 0;
-    margin: 0 8px 20px;
-  }
-
-  .bottomModuleWrapper {
-    height: auto;
-    display: flex;
-    flex-direction: column;
-    flex-basis: 50%;
-    margin: 0;
-
-    & > div {
-      max-width: 100%;
-      padding: 0;
-    }
-
-    & > div:first-child {
-      margin-bottom: 20px;
-      padding-right: 0;
-    }
-
-    & > div:last-child {
-      padding-left: 0;
-    }
-  }
-
-  .newsFeedWrapper {
-    padding: 0 8px;
-    min-width: 476px;
-  }
-
-  .graph {
-    height: 60%;
-    min-height: 327px;
-    margin-bottom: 0;
-    overflow: initial;
-  }
-
-  .bookmarks {
-    height: auto;
-    min-height: 300px;
-    width: 100%;
-  }
-
-  .main > div:first-child {
-    margin: 0 0 20px;
-  }
-
-  .main > div:nth-child(2) {
-    padding-left: 0;
-  }
-
-  .main > div:last-child {
-    padding-right: 0;
-  }
 }

src/components/dashboardV2/dashboard.js

@@ -6,6 +6,7 @@ import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import routes from '../../constants/routes';
 import BookmarksList from '../bookmarksList';
 import NewsFeed from '../newsFeedV2';
+import MyAccount from '../myAccount';
 import Piwik from '../../utils/piwik';
 import links from '../../constants/externalLinks';
 import { fromRawLsk } from '../../utils/lsk';
@@ -92,6 +93,7 @@ class Dashboard extends React.Component {
       history,
       t,
     } = this.props;
+    const { isDesktop } = this.state;
 
     const isLoggedIn = account.address;
 
@@ -136,17 +138,27 @@ class Dashboard extends React.Component {
           </header>
 
           <div className={`${styles.main}`}>
-            <RecentTransactions />
+            <div className={styles.subContainer}>
+              {
+                isLoggedIn
+                ? <MyAccount className={styles.marginFix}/>
+                : null
+              }
+
+              <RecentTransactions className={styles.marginFix} isLoggedIn={isLoggedIn} />
+            </div>
 
             {
-            <div className={`${styles.newsFeedWrapper}`}>
-              <NewsFeed />
-              <ExtensionPoint identifier={LiskHubExtensions.identifiers.dashboardColumn3} />
-            </div>
+              isDesktop
+              ? <div className={`${styles.community}`}>
+                  <NewsFeed />
+                  <ExtensionPoint identifier={LiskHubExtensions.identifiers.dashboardColumn3} />
+                </div>
+              : null
             }
 
             <div className={`${styles.bookmarks} bookmarks`}>
-              <BookmarksList className={styles.bookmarkList} history={history}/>
+              <BookmarksList history={history}/>
               <ExtensionPoint identifier={LiskHubExtensions.identifiers.dashboardColumn1} />
             </div>
           </div>

src/components/dashboardV2/recentTransactions/recentTransactions.js

@@ -27,43 +27,59 @@ class RecentTransactions extends Component {
     const {
       account,
       bookmarks,
+      className,
+      isLoggedIn,
       settings,
       t,
     } = this.props;
     const activeToken = tokenMap[settings.token.active];
     const transactionList = this.getLatestTransactions();
 
     return (
-      <Box className={`${styles.box}`}>
+      <Box className={`${styles.box} ${className}`}>
       <header>
         <h2 className={styles.title}>{t('Recent {{value}} transactions', { value: activeToken.label })}</h2>
       </header>
-      {
-        transactionList.length
-        ? <TransactionList
-            account={account}
-            activeToken={activeToken.key}
-            bookmarks={bookmarks}
-            transactions={transactionList}
-            t={t}/>
-        : <EmptyState>
-            <img src={svg.icon_empty_recent_transactions} />
-            <h1>{t('No Transactions Yet')}</h1>
-            <p>{t('A great way to start is to top up your account with some {{value}} tokens.', { value: activeToken.key })}</p>
-            <div>
-            {
-              // TODO this validation should be remove once we have the external link for BTC
-              activeToken.key === tokenMap.LSK.key
-              ? <a href={links.outgoingTransactions}
-                  rel="noopener noreferrer"
-                  target="_blank">
-                  <SecondaryButtonV2>{t('Learn more')}</SecondaryButtonV2>
-                </a>
-              : null
-            }
-            </div>
-          </EmptyState>
-      }
+        {
+          isLoggedIn && transactionList.length
+            ? <TransactionList
+                account={account}
+                activeToken={activeToken.key}
+                bookmarks={bookmarks}
+                transactions={transactionList}
+                t={t}/>
+            : null
+        }
+        {
+          isLoggedIn && !transactionList.length
+          ? <EmptyState>
+              <img src={svg.icon_empty_recent_transactions} />
+              <h1>{t('No Transactions Yet')}</h1>
+              <p>{t('A great way to start is to top up your account with some {{value}} tokens.', { value: activeToken.key })}</p>
+              <div>
+              {
+                // TODO this validation should be remove once we have the external link for BTC
+                activeToken.key === tokenMap.LSK.key
+                ? <a href={links.outgoingTransactions}
+                    rel="noopener noreferrer"
+                    target="_blank">
+                    <SecondaryButtonV2>{t('Learn more')}</SecondaryButtonV2>
+                  </a>
+                : null
+              }
+              </div>
+            </EmptyState>
+          : null
+        }
+        {
+          !isLoggedIn
+          ? <EmptyState>
+              <img src={svg.icon_empty_recent_transactions} />
+              <h1>{t('Sign in to view recent transactions')}</h1>
+              <p>{t('In order to see your recent transactions you need to sign in.')}</p>
+            </EmptyState>
+          : null
+        }
       </Box>
     );
   }

src/components/dashboardV2/recentTransactions/recentTransactions.test.js

@@ -75,13 +75,15 @@ describe('Recent Transactions', () => {
         },
       ],
     },
+    isLoggedIn: true,
     t: key => key,
   };
 
   const btcProps = {
     account: {
       address: 'mkakDp2f31btaXdATtAogoqwXcdx1PqqFo',
     },
+    isLoggedIn: true,
     bookmarks: {
       BTC: [
         {

src/components/myAccount/index.js

@@ -0,0 +1,12 @@
+// istanbul ignore file
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import MyAccount from './myAccount';
+
+
+const mapStateToProps = state => ({
+  account: state.account,
+  settings: state.settings,
+});
+
+export default connect(mapStateToProps)(translate()(MyAccount));