hotfix: fix activity defects (#2378)

* Fixes numerous defects associated with activity tab

* Bump version

* lint

* Fix pending count styles on legacy

__tests__/components/__snapshots__/Settings.test.js.snap

@@ -923,7 +923,7 @@ exports[`Settings renders without crashing 1`] = `
                                                                                         Manage your neon wallet
                                                                                       </FormattedMessage>
                                                                                        - v
-                                                                                      2.12.3
+                                                                                      2.12.4
                                                                                     </div>
                                                                                     <div
                                                                                       className="settingsPanelHeaderItem"

app/actions/pendingTransactionActions.js

@@ -139,17 +139,11 @@ export const fetchTransactionInfo = async (
   if (Array.isArray(transactions[address]) && transactions[address].length) {
     const { chain } = await getSettings()
 
-    let client
-    if (chain === 'neo2') {
-      let url = await getNode(net)
-      if (isEmpty(url)) {
-        url = await getRPCEndpoint(net)
-      }
-      client = Neon.create.rpcClient(url)
-    } else {
-      const url = 'https://testnet2.neo.coz.io:443'
-      client = new rpc.RPCClient(url, '2.3.3')
+    let url = await getNode(net)
+    if (isEmpty(url)) {
+      url = await getRPCEndpoint(net)
     }
+    const client = Neon.create.rpcClient(url)
 
     const pendingTransactionInfo = []
 

app/components/Blockchain/Transaction/N3PendingAbstract.jsx

@@ -0,0 +1,84 @@
+// @flow
+import React, { Fragment } from 'react'
+import { injectIntl } from 'react-intl'
+import classNames from 'classnames'
+
+import styles from './Transaction.scss'
+import SendIcon from '../../../assets/icons/send-tx.svg'
+import { pluralize } from '../../../util/pluralize'
+
+type Props = {
+  findContact: (address: string) => React$Node | null,
+  asset: {
+    symbol: string,
+    image?: string,
+  },
+  blocktime: number,
+  amount: string | number,
+  to: string,
+  confirmations: number,
+
+  renderTxDate: (time: number) => React$Node | null,
+}
+
+class N3PendingAbstract extends React.Component<Props> {
+  render = () => {
+    const {
+      asset,
+      amount,
+      to,
+      blocktime,
+      findContact,
+      confirmations,
+      renderTxDate,
+    } = this.props
+    const contactTo = findContact(to)
+    const logo = asset.image && (
+      <img src={asset.image} alt={`${asset.symbol} logo`} />
+    )
+
+    return (
+      <Fragment>
+        <div className={classNames(styles.transactionContainerN3)}>
+          <div className={styles.abstractContainerN3}>
+            <div className={styles.txTypeIconContainerN3}>
+              <div className={styles.sendIconContainer}>
+                <SendIcon />
+              </div>
+            </div>
+            {!blocktime ? (
+              <div className={styles.pendingTxDate}>
+                awaiting confirmations...
+              </div>
+            ) : (
+              renderTxDate(blocktime)
+            )}
+            <div className={styles.txLabelContainerN3}>Transfer</div>
+          </div>
+
+          <div className={styles.txToContainerN3}>
+            <div className={styles.txTransferContainerN3}>
+              <div className={styles.txTokenContainerN3}>
+                {logo}
+                {asset.symbol}
+              </div>
+              <div className={styles.txAmountContainerN3}>{amount}</div>
+            </div>
+            <div className={styles.txSubjectContainerN3}>
+              <p>{contactTo}</p>
+            </div>
+          </div>
+          <div
+            className={styles.confirmationsContainer}
+            style={{ marginLeft: 100 }}
+          >
+            <b>{confirmations || 0}</b>{' '}
+            {pluralize('Confirmation', confirmations || 0)}
+          </div>
+        </div>
+      </Fragment>
+    )
+  }
+}
+
+export default injectIntl(N3PendingAbstract)

app/components/Blockchain/Transaction/Transaction.jsx

@@ -22,6 +22,7 @@ import Tooltip from '../../Tooltip'
 import styles from './Transaction.scss'
 import N3NEP11ReceiveAbstract from './N3NEP11ReceiveAbstract'
 import N3NEP11SendAbstract from './N3NEP11SendAbstract'
+import N3PendingAbstract from './N3PendingAbstract'
 
 type Props = {
   address: string,
@@ -43,6 +44,7 @@ type Props = {
   },
   showAddContactModal: ({ address: string }) => null,
   tx: Object,
+  renderN2Tx?: boolean,
 }
 
 export default class Transaction extends React.Component<Props> {
@@ -56,10 +58,13 @@ export default class Transaction extends React.Component<Props> {
       chain,
       className,
       isPending,
+      renderN2Tx,
     } = this.props
     return (
       <div className={classNames(styles.transactionContainer, className)}>
-        {chain === 'neo3' ? this.renderAbstractN3() : this.renderAbstract(type)}
+        {chain === 'neo3' && !renderN2Tx
+          ? this.renderAbstractN3()
+          : this.renderAbstract(type)}
         {!isPending && (
           <Button
             className={styles.transactionHistoryButton}
@@ -115,7 +120,7 @@ export default class Transaction extends React.Component<Props> {
     )
   }
 
-  renderAbstract = (type: string) => {
+  renderAbstract = (type: string, isN3?: boolean) => {
     const { isPending, address } = this.props
     const { time, label, amount, isNetworkFee, to, from, image } = this.props.tx
     const contactTo = this.findContact(to)
@@ -142,7 +147,13 @@ export default class Transaction extends React.Component<Props> {
     }
 
     if (isPending) {
-      return (
+      return isN3 ? (
+        <N3PendingAbstract
+          {...abstractProps}
+          {...this.props.pendingTx}
+          renderTxDate={this.renderTxDate}
+        />
+      ) : (
         <PendingAbstract
           {...abstractProps}
           {...this.props.pendingTx}
@@ -174,7 +185,7 @@ export default class Transaction extends React.Component<Props> {
   renderAbstractN3 = () => {
     const { isPending, tx, address } = this.props
     const { time, type, sender } = tx
-    const txDate = this.renderTxDate(time || tx.metadata.time)
+    const txDate = this.renderTxDate(time || (tx.metadata && tx.metadata.time))
 
     const metadata = {
       txDate,
@@ -185,6 +196,10 @@ export default class Transaction extends React.Component<Props> {
       ...tx.metadata,
     }
 
+    if (isPending) {
+      return this.renderAbstract(type, true)
+    }
+
     switch (type) {
       case TX_TYPES.N3CONTRACTINVOCATION:
         return <N3ContractInvocationAbstract {...metadata} />

app/components/Send/SendPanel/SendSuccess/index.jsx

@@ -70,6 +70,7 @@ export default class SendSuccess extends React.Component<Props> {
           <TransactionList>
             {transactions.map((tx, i) => (
               <Transaction
+                renderN2Tx
                 tx={tx}
                 key={`sentTx${i}`}
                 className={styles.sendSuccessBodyListItem}

app/containers/App/Sidebar/Sidebar.jsx

@@ -75,7 +75,13 @@ const Sidebar = ({
         activeClassName={styles.active}
       >
         {pendingTransactionsCount > 0 && (
-          <div className={styles.pendingTransactionsCount}>
+          <div
+            className={
+              chain === 'neo2'
+                ? styles.pendingTransactionsCount
+                : styles.pendingTransactionsCountN3
+            }
+          >
             {pendingTransactionsCount}
           </div>
         )}

app/containers/App/Sidebar/Sidebar.scss

@@ -116,8 +116,24 @@ $size: 70px;
   height: 24px;
   width: 24px;
   background-color: #d355e7;
-  margin-top: -22px !important;
-  margin-left: 10px;
+  margin-top: -34px !important;
+  margin-left: 26px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-family: var(--font-gotham-medium);
+  font-size: 14px !important;
+}
+
+.pendingTransactionsCountN3 {
+  position: fixed;
+  height: 24px;
+  width: 24px;
+  background-color: #d355e7;
+  margin-top: -34px !important;
+  margin-left: 26px;
   border-radius: 100px;
   display: flex;
   align-items: center;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Neon",
-  "version": "2.12.3",
+  "version": "2.12.4",
   "main": "./main.js",
   "description": "Light wallet for NEO blockchain",
   "homepage": "https://github.com/CityOfZion/neon-wallet",