feature: contacts refactor/rewrite (#2502)

* contacts rewrite * contacts progress * Adds logic and deps for NNS * Send panel, contact selection UX implementation * Update history flow and code * lint and clean up * Delete contact actions foo * flow fix * flow fix * flow fix * lint * Revert change and delete AddContact dir * Remove cruft * lint and style enhancements * Clean up commented out styles * clean up comments * mock bs-neo3 * Refactor ContactFormRefactor.jsx * feature: remove infinite scroll on activity screen (#2503) * replace infinite scroll with pagination * Fix tests remove logging * Remove commented out style * remove cruft
CityOfZion · Jun 23, 2023 · 002fe1a · 002fe1a
1 parent 17470f2
commit 002fe1a
Show file tree

Hide file tree

Showing 56 changed files with 1,836 additions and 1,286 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -23,5 +23,4 @@ module.file_ext=.json
 module.name_mapper='^assets' ->'<PROJECT_ROOT>/app/assets'
 sharedmemory.heap_size=3221225472
 server.max_workers=1
-
 esproposal.optional_chaining=enable
diff --git a/__mocks__/@cityofzion/bs-neo3.js b/__mocks__/@cityofzion/bs-neo3.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/__tests__/components/TransactionHistoryPanel.test.js b/__tests__/components/TransactionHistoryPanel.test.js
@@ -45,7 +45,7 @@ const initialState = {
       batch: false,
       progress: LOADED,
       loadedCount: 1,
-      data: [],
+      data: { transactions: [] },
     },
   },
 }
@@ -114,10 +114,11 @@ describe('TransactionHistoryPanel', () => {
 
   test('correctly renders with NEO and GAS transaction history', () => {
     const transactionState = merge({}, initialState, {
-      spunky: { transactionHistory: { data: transactions } },
+      spunky: {
+        transactionHistory: { data: { entries: transactions, count: 2 } },
+      },
     })
     const { wrapper } = setup(transactionState, false)
-
     const transactionList = wrapper.find('#transactionList')
     expect(transactionList.children().length).toEqual(2)
 

diff --git a/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap b/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionHistoryPanel renders without crashing 1`] = `
-<Connect(withData(Connect(withData(withProps(Connect(withActions(Connect(withProgress(withProgressComponents(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(TransactionHistory)))))))))))))))))))))))
+<Connect(withData(Connect(withData(withProps(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(TransactionHistory))))))))))))))))))
   showErrorNotification={[Function]}
   showInfoNotification={[Function]}
   showSuccessNotification={[Function]}

diff --git a/app/actions/appActions.js b/app/actions/appActions.js
@@ -3,7 +3,6 @@ import { createBatchActions } from 'spunky'
 
 import accountsActions from './accountsActions'
 import settingsActions from './settingsActions'
-import contactsActions from './contactsActions'
 import n3AccountsActions from './n3AccountsActions'
 
 export const ID = 'app'
@@ -12,5 +11,4 @@ export default createBatchActions(ID, {
   accounts: accountsActions,
   n3Accounts: n3AccountsActions,
   settings: settingsActions,
-  contacts: contactsActions,
 })
diff --git a/app/actions/contactsActions.js b/app/actions/contactsActions.js
diff --git a/app/actions/transactionHistoryActions.js b/app/actions/transactionHistoryActions.js
@@ -213,10 +213,12 @@ export default createActions(
     }
 
     let parsedEntries = []
+    let count = 0
 
     if (chain === 'neo3') {
       const network = net === 'MainNet' ? 'mainnet' : 'testnet'
       const data = await NeoRest.addressTXFull(address, page, network)
+      count = data.totalCount
       parsedEntries = await computeN3Activity(data, address, net)
     } else {
       const network = net === 'MainNet' ? 'mainnet' : 'testnet'
@@ -225,15 +227,16 @@ export default createActions(
         page,
         network,
       )
+      count = data.total_entries
       parsedEntries = await parseAbstractData(data.entries, address, net)
     }
     page += 1
     if (shouldIncrementPagination) {
       if (page === 1) entries = []
       entries.push(...parsedEntries)
-      return entries
+      return { entries, count }
     }
     entries = [...parsedEntries]
-    return entries
+    return { entries, count }
   },
 )
diff --git a/app/components/Blockchain/Transaction/N3ClaimAbstract.jsx b/app/components/Blockchain/Transaction/N3ClaimAbstract.jsx
@@ -34,7 +34,10 @@ class N3ClaimAbstract extends React.Component<Props> {
               <img src={image} />
               {symbol}
             </div>
-            <div className={styles.txAmountContainerN3}>{amount}</div>
+            <div className={styles.txAmountContainerN3}>
+              {/* eslint-disable-next-line no-restricted-globals */}
+              {!isNaN(amount) && amount}
+            </div>
           </div>
         </div>
       </div>

diff --git a/app/components/Blockchain/Transaction/N3NEP11ReceiveAbstract.jsx b/app/components/Blockchain/Transaction/N3NEP11ReceiveAbstract.jsx
@@ -1,30 +1,47 @@
 // @flow
 import React from 'react'
 import classNames from 'classnames'
-import { injectIntl } from 'react-intl'
+import { FormattedMessage, IntlShape, injectIntl } from 'react-intl'
+import Button from '../../Button'
 import styles from './Transaction.scss'
 import ReceiveIcon from '../../../assets/icons/receive-tx.svg'
+import ContactsAdd from '../../../assets/icons/contacts-add.svg'
+import CopyToClipboard from '../../CopyToClipboard'
 
 type Props = {
   image: string,
   isPending: boolean,
-
+  findContact: (address: string) => React$Node | null,
+  from: string,
+  intl: IntlShape,
+  showAddContactModal: (to: string) => void,
   symbol: string,
-  tokenName: string,
+  to: string,
   txDate: React$Node,
 }
 
 class N3NEP11ReceiveAbstract extends React.Component<Props> {
   render = () => {
-    const { image, isPending, tokenName, symbol, txDate } = this.props
+    const {
+      image,
+      isPending,
+      findContact,
+      from,
+      intl,
+      to,
+      showAddContactModal,
+      symbol,
+      txDate,
+    } = this.props
 
     const logo = image && (
       <img
         src={image.replace('ipfs://', 'https://ipfs.io/ipfs/')}
         alt={`${symbol}`}
       />
     )
-
+    const contactTo = to && findContact(to)
+    const contactToExists = contactTo !== to
     return (
       <div className={classNames(styles.transactionContainerN3)}>
         <div className={styles.abstractContainerN3}>
@@ -47,6 +64,22 @@ class N3NEP11ReceiveAbstract extends React.Component<Props> {
             </div>
             <div className={styles.txAmountContainerN3} />
           </div>
+          <div className={styles.txSubjectContainerN3}>
+            <p>{contactTo}</p>
+            <CopyToClipboard
+              className={styles.copy}
+              text={contactTo}
+              tooltip={intl.formatMessage({ id: 'copyAddressTooltip' })}
+            />
+          </div>
+          <Button
+            className={styles.transactionHistoryButton}
+            renderIcon={ContactsAdd}
+            onClick={() => showAddContactModal(from)}
+            disabled={contactToExists}
+          >
+            <FormattedMessage id="activityAddAddress" />
+          </Button>
         </div>
       </div>
     )

diff --git a/app/components/Blockchain/Transaction/N3NEP11SendAbstract.jsx b/app/components/Blockchain/Transaction/N3NEP11SendAbstract.jsx
@@ -7,6 +7,7 @@ import styles from './Transaction.scss'
 import ReceiveIcon from '../../../assets/icons/receive-tx.svg'
 import ContactsAdd from '../../../assets/icons/contacts-add.svg'
 import CopyToClipboard from '../../CopyToClipboard'
+import SendIcon from '../../../assets/icons/send-tx.svg'
 
 type Props = {
   image: string,
@@ -49,7 +50,7 @@ class N3NEP11SendAbstract extends React.Component<Props> {
         <div className={styles.abstractContainerN3}>
           <div className={styles.txTypeIconContainerN3}>
             <div className={styles.sendIconContainer}>
-              <ReceiveIcon />
+              <SendIcon />
             </div>
           </div>
           {isPending ? 'Pending' : txDate}
@@ -77,7 +78,7 @@ class N3NEP11SendAbstract extends React.Component<Props> {
           <Button
             className={styles.transactionHistoryButton}
             renderIcon={ContactsAdd}
-            onClick={() => showAddContactModal(from)}
+            onClick={() => showAddContactModal(to)}
             disabled={contactToExists}
           >
             <FormattedMessage id="activityAddAddress" />