release: 2.2.0 (#1828)

* adds csv dep * removes buggy success notification from activity panel and adds export button in header * sets up working boilerplate for CSV download * updates snapshots * fixes notification weirdness in activity page and adds export functionality * updates snapshots * adds dismiss functionality to info notification * refactor of TransactionHistory.jsx * Updated TOLL to BRDG token with new supply * chore: fixes contacts layout (#1810) * fixes broken layout bug in contacts panel * removes unnused styles * adds working implementation of error boundary around app * removes hardcoded error * styles error page * removes hard coded errors * refactors validation in ContactForm.jsx * reimplements dynamic token hash fetch * bumps version in package.json * feature: activity export enhancements (#1836) * adds disable state to tx history component fixes default file name and location * fixes linting errors * removes commented out import * fixes css bug
CityOfZion · Apr 18, 2019 · 3014fbd · 3014fbd
1 parent e0ca2cf
commit 3014fbd
Show file tree

Hide file tree

Showing 20 changed files with 406 additions and 85 deletions.
diff --git a/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap b/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap
@@ -1,9 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionHistoryPanel renders without crashing 1`] = `
-<withData(Connect(withData(withProps(Connect(withActions(Connect(withProgress(withProgressComponents(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(Connect(Connect(withProgress(LoadedNotifier)))))))))))))))))))))))))
-  address="AWy7RNBVr9vDadRMK9p7i7Z1tL7GrLAxoh"
-  dispatch={[Function]}
+<Connect(withData(Connect(withData(withProps(Connect(withActions(Connect(withProgress(withProgressComponents(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(TransactionHistory)))))))))))))))))))))))
+  showErrorNotification={[Function]}
+  showInfoNotification={[Function]}
+  showSuccessNotification={[Function]}
   store={
     Object {
       "clearActions": [Function],
@@ -14,27 +15,5 @@ exports[`TransactionHistoryPanel renders without crashing 1`] = `
       "subscribe": [Function],
     }
   }
-  storeSubscription={
-    t {
-      "listeners": Object {
-        "clear": [Function],
-        "get": [Function],
-        "notify": [Function],
-        "subscribe": [Function],
-      },
-      "onStateChange": [Function],
-      "parentSub": undefined,
-      "store": Object {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "unsubscribe": [Function],
-    }
-  }
-  wif="L4SLRcPgqNMAMwM3nFSxnh36f1v5omjPg3Ewy1tg2PnEon8AcHou"
 />
 `;
diff --git a/app/actions/transactionHistoryActions.js b/app/actions/transactionHistoryActions.js
@@ -13,7 +13,11 @@ type Props = {
   shouldIncrementPagination: boolean,
 }
 
-async function parseAbstractData(data, currentUserAddress, net) {
+export async function parseAbstractData(
+  data: Array<any>,
+  currentUserAddress: string,
+  net: string,
+) {
   const parsedTxType = abstract => {
     if (
       abstract.address_to === currentUserAddress &&
@@ -48,6 +52,7 @@ async function parseAbstractData(data, currentUserAddress, net) {
       time: abstract.time,
       amount: abstract.amount,
       asset,
+      symbol: asset.symbol,
       image: asset.image,
       label: type === TX_TYPES.CLAIM ? 'GAS Claim' : asset.symbol,
       type,

diff --git a/app/components/Contacts/ContactForm/ContactForm.jsx b/app/components/Contacts/ContactForm/ContactForm.jsx
@@ -193,11 +193,13 @@ export default class ContactForm extends React.Component<Props, State> {
   handleChangeName = (event: Object) => {
     this.clearErrors(event.target.name)
     this.props.setName(event.target.value)
+    this.validate(event.target.value, this.props.formAddress)
   }
 
   handleChangeAddress = (event: Object) => {
     this.clearErrors(event.target.name)
     this.props.setAddress(event.target.value)
+    this.validate(this.props.formName, event.target.value)
   }
 
   handleSubmit = (event: Object) => {

diff --git a/app/components/Contacts/ContactsPanel/ContactsPanel.jsx b/app/components/Contacts/ContactsPanel/ContactsPanel.jsx
@@ -149,7 +149,7 @@ export default class ContactsPanel extends React.Component<Props, State> {
         </Button>
         <Address address={address} asWrapper>
           <Button className={styles.infoButton} renderIcon={InfoIcon}>
-            View Activity
+            Activity
           </Button>
         </Address>
         <Link
@@ -160,7 +160,7 @@ export default class ContactsPanel extends React.Component<Props, State> {
           className={styles.settingsDonations}
         >
           <Button className={styles.sendButton} renderIcon={SendIcon}>
-            Send Assets
+            Send
           </Button>
         </Link>
       </div>

diff --git a/app/components/Contacts/ContactsPanel/ContactsPanel.scss b/app/components/Contacts/ContactsPanel/ContactsPanel.scss
@@ -26,7 +26,7 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: nowrap;
-    padding: 12px 24px;
+    padding: 12px 12px 12px 24px;
 
     button {
       background-color: transparent;
@@ -53,29 +53,15 @@
       display: flex;
       align-items: center;
 
+      span {
+        margin-left: 6px;
+      }
+
       svg {
         path {
           fill: var(--tx-list-button-icon);
         }
       }
-
-      .editButton {
-        width: 100px;
-        margin-right: 10px;
-      }
-
-      .infoButton {
-        width: 150px;
-        margin-right: 10px;
-      }
-
-      .sendButton {
-        width: 150px;
-      }
-
-      .deleteButton {
-        width: 100px;
-      }
     }
   }
 }

diff --git a/app/components/ErrorBoundaries/Main/Main.jsx b/app/components/ErrorBoundaries/Main/Main.jsx
@@ -0,0 +1,63 @@
+// @flow
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import styles from './Main.scss'
+import Button from '../../Button'
+import { ROUTES } from '../../../core/constants'
+import themes from '../../../themes'
+import Arrow from '../../../assets/icons/arrow.svg'
+import lightLogo from '../../../assets/images/logo-light.png'
+import darkLogo from '../../../assets/images/logo-dark.png'
+
+type Props = {
+  children: React$Node,
+  theme: string,
+  logout: () => void,
+}
+
+type State = {
+  hasError: boolean,
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  componentDidCatch(error: Error, info: any) {
+    console.warn('An unkown error has occurred!', { error, info })
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    const { theme, children, logout } = this.props
+    const dynamicImage = theme === 'Light' ? lightLogo : darkLogo
+
+    if (this.state.hasError) {
+      return (
+        <div style={themes[theme]} className={styles.errorContainer}>
+          <img className={styles.logo} src={dynamicImage} alt="" />
+          <h1>Oops something went wrong...</h1>
+          <Link to={ROUTES.HOME}>
+            <Button
+              renderIcon={() => <Arrow />}
+              shouldCenterButtonLabelText
+              className={styles.backButton}
+              onClick={() => {
+                logout()
+                this.setState({ hasError: false })
+              }}
+              primary
+            >
+              Back to Login
+            </Button>
+          </Link>
+        </div>
+      )
+    }
+
+    return children
+  }
+}
diff --git a/app/components/ErrorBoundaries/Main/Main.scss b/app/components/ErrorBoundaries/Main/Main.scss
@@ -0,0 +1,18 @@
+.errorContainer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  width: 172px;
+  margin-bottom: 24px;
+}
+
+.backButton {
+  width: 250px;
+  margin-top: 48px;
+}
diff --git a/app/components/ErrorBoundaries/Main/index.js b/app/components/ErrorBoundaries/Main/index.js
@@ -0,0 +1,20 @@
+// @flow
+import { compose } from 'recompose'
+import { withActions } from 'spunky'
+
+import Main from './Main'
+import withThemeData from '../../../hocs/withThemeData'
+import { logoutActions } from '../../../actions/authActions'
+
+type Props = {
+  logout: Function,
+}
+
+const mapActionsToProps = (actions): Props => ({
+  logout: () => actions.call(),
+})
+
+export default compose(
+  withActions(logoutActions, mapActionsToProps),
+  withThemeData(),
+)(Main)
diff --git a/app/components/PanelHeaderButton/PanelHeaderButton.jsx b/app/components/PanelHeaderButton/PanelHeaderButton.jsx
@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import styles from './PanelHeaderButton.scss'
 
 type Props = {
-  onClick: () => void,
+  onClick: () => void | Promise<void>,
   renderIcon: () => React$Node,
   buttonText: string,
   className?: string,

diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.jsx b/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.jsx
@@ -16,6 +16,7 @@ type Props = {
   handleRefreshTxData: () => void,
   pendingTransactions: Array<Object>,
   address: string,
+  showSuccessNotification: ({ message: string }) => void,
 }
 
 const REFRESH_INTERVAL_MS = 30000
@@ -55,9 +56,13 @@ export default class TransactionHistory extends React.Component<Props> {
   }
 
   addPolling = () => {
+    const { showSuccessNotification } = this.props
     this.transactionDataInterval = setInterval(async () => {
       await this.props.handleGetPendingTransactionInfo()
       this.props.handleRefreshTxData()
+      showSuccessNotification({
+        message: 'Recevied latest transaction information.',
+      })
     }, REFRESH_INTERVAL_MS)
   }
 

diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/index.js b/app/components/TransactionHistory/TransactionHistoryPanel/index.js
@@ -1,15 +1,21 @@
 // @flow
 import { compose } from 'recompose'
 import { withData, withActions, withCall } from 'spunky'
+import { connect } from 'react-redux'
 
+import { bindActionCreators } from 'redux'
 import TransactionHistoryPanel from './TransactionHistoryPanel'
 import transactionHistoryActions from '../../../actions/transactionHistoryActions'
 import { getPendingTransactionInfo } from '../../../actions/pendingTransactionActions'
 import withProgressPanel from '../../../hocs/withProgressPanel'
 import withAuthData from '../../../hocs/withAuthData'
 import withNetworkData from '../../../hocs/withNetworkData'
 import withLoadingProp from '../../../hocs/withLoadingProp'
-import withSuccessNotification from '../../../hocs/withSuccessNotification'
+import {
+  showErrorNotification,
+  showSuccessNotification,
+  showInfoNotification,
+} from '../../../modules/notifications'
 
 const mapTransactionsDataToProps = transactions => ({
   transactions,
@@ -42,7 +48,20 @@ const mapPendingTransactionInfoToProps = pendingTransactions => ({
   pendingTransactions: pendingTransactions || [],
 })
 
+const actionCreators = {
+  showErrorNotification,
+  showSuccessNotification,
+  showInfoNotification,
+}
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(actionCreators, dispatch)
+
 export default compose(
+  connect(
+    null,
+    mapDispatchToProps,
+  ),
   withAuthData(),
   withNetworkData(),
   withProgressPanel(transactionHistoryActions, {
@@ -54,8 +73,4 @@ export default compose(
   withData(getPendingTransactionInfo, mapPendingTransactionInfoToProps),
   withLoadingProp(transactionHistoryActions),
   withData(transactionHistoryActions, mapTransactionsDataToProps),
-  withSuccessNotification(
-    transactionHistoryActions,
-    'Received latest transaction information.',
-  ),
 )(TransactionHistoryPanel)
diff --git a/app/containers/App/App.jsx b/app/containers/App/App.jsx
@@ -10,6 +10,7 @@ import { upgradeUserWalletNEP6 } from '../../modules/generateWallet'
 
 import styles from './App.scss'
 import themes from '../../themes'
+import ErrorBoundary from '../../components/ErrorBoundaries/Main'
 
 type Props = {
   children: React$Node,
@@ -47,17 +48,19 @@ class App extends Component<Props> {
     const { children, address, theme, location } = this.props
 
     return (
-      <div style={themes[theme]} className={styles.container}>
-        {address &&
-          routesWithSideBar.includes(location.pathname) && (
-            <Sidebar theme={theme} className={styles.sidebar} />
-          )}
-        <div className={styles.wrapper}>
-          <div className={styles.content}>{children}</div>
-          <Notifications />
-          <ModalRenderer />
+      <ErrorBoundary>
+        <div style={themes[theme]} className={styles.container}>
+          {address &&
+            routesWithSideBar.includes(location.pathname) && (
+              <Sidebar theme={theme} className={styles.sidebar} />
+            )}
+          <div className={styles.wrapper}>
+            <div className={styles.content}>{children}</div>
+            <Notifications />
+            <ModalRenderer />
+          </div>
         </div>
-      </div>
+      </ErrorBoundary>
     )
   }
 }

diff --git a/app/containers/Buttons/RefreshButton/RefreshButton.jsx b/app/containers/Buttons/RefreshButton/RefreshButton.jsx
@@ -7,7 +7,7 @@ import RefreshIcon from '../../../assets/icons/refresh.svg'
 import styles from './RefreshButton.scss'
 
 type Props = {
-  loadWalletData: () => void,
+  loadWalletData?: () => void,
   loading?: boolean,
 }