Tweak Smesher screen and fix bunch of bugs

app/components/node/SmesherLog.tsx

@@ -1,48 +1,101 @@
 import React from 'react';
 import styled from 'styled-components';
-import { CorneredContainer } from '../common';
-import { getFormattedTimestamp, formatSmidge } from '../../infra/utils';
+import ReactTimeago from 'react-timeago';
+import { formatSmidge } from '../../infra/utils';
 import { smColors } from '../../vars';
-import { Reward } from '../../types';
 import { SmallHorizontalPanel } from '../../basicComponents';
 import {
   bottomRightCorner,
   bottomRightCornerWhite,
+  horizontalPanelBlack,
   leftSideTIcon,
   leftSideTIconWhite,
   topRightCorner,
   topRightCornerWhite,
 } from '../../assets/images';
+import { RewardsInfo, SmesherReward } from '../../../shared/types';
+import { CorneredContainer } from '../common';
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: 100%;
   overflow-y: visible;
   overflow-x: hidden;
-  margin-left: 10px;
-  padding: 0 10px;
+  margin: 5px -20px -20px -20px;
+  padding: 0 20px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
 `;
 
 const LogEntry = styled.div`
   display: flex;
   flex-direction: column;
+  opacity: 0.6;
+  transition: opacity 0.2s linear;
+  padding: 0.25em 0 0.3em 0;
+
+  &:hover,
+  &:active,
+  &:focus {
+    opacity: 1;
+  }
 `;
 
 const LogText = styled.div`
-  font-size: 16px;
-  line-height: 20px;
+  font-size: 14px;
+  line-height: 18px;
   color: ${({ theme }) => (theme.isDarkMode ? smColors.white : smColors.black)};
 `;
 
+const LayerNumber = styled(LogText)`
+  width: 70px;
+`;
+
 const AwardText = styled(LogText)`
   color: ${smColors.green};
+  margin-left: auto;
+`;
+
+const LayerReward = styled.div`
+  display: flex;
+  flex-direction: row;
 `;
 
-const LogEntrySeparator = styled(LogText)`
-  margin: 15px 0;
+const DateText = styled.div`
+  font-size: 12px;
   line-height: 16px;
+  color: ${smColors.mediumGray};
+`;
+const EpochText = styled.div`
+  display: block;
+  position: relative;
+  margin: 1.5em -20px 1em -20px;
+  padding: 0 20px;
+  font-size: 12px;
+  text-align: center;
+
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  color: ${smColors.lightGray};
+
+  &:before,
+  &:after {
+    display: block;
+    content: '';
+    background: no-repeat url(${horizontalPanelBlack}) left center;
+    position: absolute;
+    height: 12px;
+    width: 41px;
+    top: 0;
+  }
+  &:before {
+    left: 0;
+  }
+  &:after {
+    right: 0;
+    transform: scaleX(-1);
+  }
 `;
 
 const FullCrossIcon = styled.img`
@@ -76,28 +129,47 @@ const BottomRightCorner = styled.img`
   height: 8px;
 `;
 
+const Total = styled.div<{ epoch?: boolean }>`
+  display: block;
+  color: ${({ epoch }) => (epoch ? smColors.purple : smColors.green)};
+  margin: 0.25em 0;
+
+  small {
+    display: block;
+    margin: 0.1em 0;
+    color: ${smColors.mediumGray};
+  }
+`;
+
 type Props = {
   initTimestamp: string | null;
   smeshingTimestamp: string | null;
-  rewards: Reward[];
+  rewards: SmesherReward[];
+  rewardsInfo: RewardsInfo;
   isDarkMode: boolean;
+  epochByLayer: (number) => number;
+  timestampByLayer: (number) => number;
 };
 
 const SmesherLog = ({
   initTimestamp,
   smeshingTimestamp,
   rewards,
+  rewardsInfo,
   isDarkMode,
+  epochByLayer,
+  timestampByLayer,
 }: Props) => {
   const icon = isDarkMode ? leftSideTIconWhite : leftSideTIcon;
   const topRight = isDarkMode ? topRightCornerWhite : topRightCorner;
   const bottomRight = isDarkMode ? bottomRightCornerWhite : bottomRightCorner;
+
   return (
     <CorneredContainer
       useEmptyWrap
       width={310}
       height={450}
-      header="SMESHER LOG"
+      header="REWARDS"
       isDarkMode={isDarkMode}
     >
       <FullCrossIcon className="top" src={icon} />
@@ -106,41 +178,69 @@ const SmesherLog = ({
       <BottomRightCorner src={bottomRight} />
       <SmallHorizontalPanel isDarkMode={isDarkMode} />
 
-      <LogText>--</LogText>
+      {rewardsInfo && (
+        <>
+          <Total>
+            <small title={`within ${rewardsInfo.epochs} epochs`}>
+              Total for {rewardsInfo.layers} layers:
+            </small>
+            {formatSmidge(rewardsInfo.total)}
+          </Total>
+          <Total epoch>
+            <small>Within current epoch:</small>
+            {formatSmidge(rewardsInfo.lastEpoch)}
+          </Total>
+        </>
+      )}
+
       <Wrapper>
-        {initTimestamp ? (
+        {rewards &&
+          (() => {
+            let prevEpoch;
+            return rewards.map((reward, index) => {
+              const curEpoch = epochByLayer(reward.layer);
+              const showEpoch = curEpoch !== prevEpoch;
+              prevEpoch = curEpoch;
+              return (
+                <React.Fragment key={`reward_${reward.layer}_${index}`}>
+                  {showEpoch && (
+                    <EpochText>Epoch {epochByLayer(reward.layer)}</EpochText>
+                  )}
+                  <div>
+                    <LogEntry>
+                      <LayerReward>
+                        <LayerNumber>{reward.layer}</LayerNumber>
+                        <DateText>
+                          <ReactTimeago date={timestampByLayer(reward.layer)} />
+                        </DateText>
+                        <AwardText>+{formatSmidge(reward.total)}</AwardText>
+                      </LayerReward>
+                    </LogEntry>
+                  </div>
+                </React.Fragment>
+              );
+            });
+          })()}
+        {smeshingTimestamp ? (
           <>
             <LogEntry>
-              <LogText>{initTimestamp}</LogText>
-              <LogText>Initializing smesher</LogText>
+              <DateText>
+                <ReactTimeago date={smeshingTimestamp} />
+              </DateText>
+              <LogText>Started smeshing</LogText>
             </LogEntry>
-            <LogEntrySeparator>...</LogEntrySeparator>
           </>
         ) : null}
-        {smeshingTimestamp ? (
+        {initTimestamp ? (
           <>
             <LogEntry>
-              <LogText>{smeshingTimestamp}</LogText>
-              <LogText>Started smeshing</LogText>
+              <DateText>
+                <ReactTimeago date={initTimestamp} />
+              </DateText>
+              <LogText>Initializing smesher</LogText>
             </LogEntry>
-            <LogEntrySeparator>...</LogEntrySeparator>
           </>
         ) : null}
-        {rewards &&
-          rewards.map((reward, index) => (
-            <div key={`reward${index}`}>
-              <LogEntry>
-                <LogText>{getFormattedTimestamp(reward.timestamp)}</LogText>
-                <AwardText>
-                  Smeshing reward: {formatSmidge(reward.total)}
-                </AwardText>
-                <AwardText>
-                  Smeshing fee reward: {formatSmidge(reward.layerReward)}
-                </AwardText>
-              </LogEntry>
-              <LogEntrySeparator>...</LogEntrySeparator>
-            </div>
-          ))}
       </Wrapper>
     </CorneredContainer>
   );

app/components/wallet/AccountsOverview.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useSelector, useDispatch } from 'react-redux';
 import { setCurrentAccount } from '../../redux/wallet/actions';
 import {
   BoldText,
   DropDown,
   WrapperWith2SideBars,
 } from '../../basicComponents';
-import { formatSmidge } from '../../infra/utils';
+import { parseSmidge } from '../../infra/utils';
 import { smColors } from '../../vars';
 import { RootState } from '../../types';
 import Address from '../common/Address';
@@ -42,34 +42,37 @@ const Footer = styled.div`
 `;
 
 const BalanceHeader = styled.div`
-  margin-bottom: 10px;
   font-size: 13px;
   line-height: 17px;
   color: ${({ theme }) => (theme.isDarkMode ? smColors.white : smColors.black)};
 `;
 
-const BalanceWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
+const BalanceWrapper = styled.div<{ isSynced?: boolean }>`
+  color: ${({ isSynced }) => (isSynced ? smColors.green : smColors.mediumGray)};
+  font-size: 6px;
+
+  ${({ isSynced }) =>
+    !isSynced &&
+    css`
+      &:before {
+        content: 'Syncing...';
+        display: block;
+        font-size: 14px;
+        line-height: 20px;
+        margin-top: 4px;
+        color: ${smColors.orange};
+      }
+    `}
 `;
 
 const BalanceAmount = styled.div`
+  display: inline-block;
   font-size: 32px;
-  line-height: 40px;
-  color: ${smColors.green};
 `;
 
-const SmhText = styled.div`
+const UnitsText = styled.div`
+  display: inline-block;
   font-size: 17px;
-  line-height: 32px;
-  color: ${smColors.green};
-`;
-
-const NotSyncedYetText = styled.div`
-  font-size: 15px;
-  line-height: 32px;
-  color: ${smColors.orange};
 `;
 
 const AccountsOverview = () => {
@@ -78,6 +81,7 @@ const AccountsOverview = () => {
   );
   const meta = useSelector((state: RootState) => state.wallet.meta);
   const accounts = useSelector((state: RootState) => state.wallet.accounts);
+  const balances = useSelector((state: RootState) => state.wallet.balances);
   const currentAccountIndex = useSelector(
     (state: RootState) => state.wallet.currentAccountIndex
   );
@@ -104,13 +108,9 @@ const AccountsOverview = () => {
   if (!accounts || !accounts.length) {
     return null;
   }
-  const { displayName, publicKey, currentState } = accounts[
-    currentAccountIndex
-  ];
-  const { value, unit }: any = formatSmidge(
-    currentState ? currentState.balance : 0,
-    true
-  );
+  const { displayName, publicKey } = accounts[currentAccountIndex];
+  const balance = balances[publicKey];
+  const { value, unit } = parseSmidge(balance?.currentState?.balance || 0);
 
   return (
     <WrapperWith2SideBars
@@ -143,14 +143,14 @@ const AccountsOverview = () => {
       </AccountDetails>
       <Footer>
         <BalanceHeader>BALANCE</BalanceHeader>
-        {isSynced ? (
-          <BalanceWrapper>
-            <BalanceAmount>{value}</BalanceAmount>
-            <SmhText>{unit}</SmhText>
-          </BalanceWrapper>
-        ) : (
-          <NotSyncedYetText>Syncing...</NotSyncedYetText>
-        )}
+        <BalanceWrapper
+          isSynced={isSynced}
+          title={isSynced ? 'Your current balance' : 'Last synced balance'}
+        >
+          <BalanceAmount>{value}</BalanceAmount>
+          &nbsp;
+          <UnitsText>{unit}</UnitsText>
+        </BalanceWrapper>
       </Footer>
     </WrapperWith2SideBars>
   );

app/components/wallet/TxSent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Link, Button } from '../../basicComponents';
-import { getAddress, formatSmidge } from '../../infra/utils';
+import { getAddress, formatSmidge, parseSmidge } from '../../infra/utils';
 import { fireworksImg, doneIconGreen } from '../../assets/images';
 import { smColors } from '../../vars';
 import Address, { AddressType } from '../common/Address';
@@ -108,7 +108,7 @@ const TxSent = ({
 }: Props) => {
   const navigateToGuide = () => window.open(ExternalLinks.SendCoinGuide);
 
-  const { unit }: any = formatSmidge(amount, true);
+  const { unit } = parseSmidge(amount);
   return (
     <Wrapper>
       <Header>