Finance: polish for aragonUI 1.0 (aragon#1045)

* Finance: fix double empty results messages * Finance: upgrade from componentWillReceiveProps * Finance: upgrade from deprecated font() * Finance: fix margin for Deposit's TokenBadge
ConsiderItDone · Nov 22, 2019 · e9e5bce · e9e5bce
1 parent 2ee52b5
commit e9e5bce
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 79 deletions.
diff --git a/apps/finance/app/src/components/Balances.js b/apps/finance/app/src/components/Balances.js
@@ -10,15 +10,30 @@ const CONVERT_THROTTLE_TIME = 5000
 const convertApiUrl = symbols =>
   `${CONVERT_API_BASE}/price?fsym=USD&tsyms=${symbols.join(',')}`
 
+const keyFromBalances = balances =>
+  balances
+    .filter(({ verified }) => verified)
+    .sort(({ addressA, addressB }) => addressA - addressB)
+    .map(({ address, numData: { amount } }) => `${address}:${amount}`)
+    .join(',')
+
+const areSameBalances = (balancesA, balancesB) => {
+  const keyA = keyFromBalances(balancesA)
+  const keyB = keyFromBalances(balancesB)
+  return keyA === keyB
+}
+
 class Balances extends React.Component {
   state = {
     convertRates: {},
   }
   componentDidMount() {
     this.updateConvertedRates(this.props)
   }
-  componentWillReceiveProps(nextProps) {
-    this.updateConvertedRates(nextProps)
+  componentDidUpdate(prevProps) {
+    if (!areSameBalances(prevProps.balances, this.props.balances)) {
+      this.updateConvertedRates(this.props)
+    }
   }
   updateConvertedRates = throttle(async ({ balances }) => {
     const verifiedSymbols = balances

diff --git a/apps/finance/app/src/components/EmptyFilteredTransfers.js b/apps/finance/app/src/components/EmptyFilteredTransfers.js
diff --git a/apps/finance/app/src/components/NewTransfer/Deposit.js b/apps/finance/app/src/components/NewTransfer/Deposit.js
@@ -409,14 +409,17 @@ const SelectedTokenBalance = ({ network, selectedToken }) => {
           {addressesEqual(address, ETHER_TOKEN_FAKE_ADDRESS) ? (
             'ETH'
           ) : (
-            <TokenBadge
-              address={address}
-              symbol={symbol}
-              networkType={network.type}
+            <span
               css={`
                 margin: 0 ${0.5 * GU}px;
               `}
-            />
+            >
+              <TokenBadge
+                address={address}
+                symbol={symbol}
+                networkType={network.type}
+              />
+            </span>
           )}{' '}
           available
         </div>

diff --git a/apps/finance/app/src/components/ToggleContent.js b/apps/finance/app/src/components/ToggleContent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { font, springs } from '@aragon/ui'
+import { springs, GU } from '@aragon/ui'
 import { Transition, animated } from 'react-spring'
 import arrow from './assets/arrow.svg'
 
@@ -37,13 +37,13 @@ class ToggleContent extends React.Component {
 
 const Label = styled.button.attrs({ type: 'button' })`
   cursor: pointer;
-  ${font({ weight: 'bold' })};
+  font-weight: 600;
   background: none;
   border: 0;
   outline: 0;
   padding: 0;
   img {
-    margin-left: 10px;
+    margin-left: ${1 * GU}px;
   }
 `
 const Content = styled(animated.div)`

diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js
@@ -32,7 +32,6 @@ import * as TransferTypes from '../transfer-types'
 import { addressesEqual, toChecksumAddress } from '../lib/web3-utils'
 import { formatTokenAmount } from '../lib/utils'
 import TransfersFilters from './TransfersFilters'
-import EmptyFilteredTransfers from './EmptyFilteredTransfers'
 import EmptyTransactions from './EmptyTransactions'
 import { useIdentity, IdentityContext } from './IdentityManager/IdentityManager'
 import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
@@ -206,8 +205,10 @@ const Transfers = React.memo(({ tokens, transactions }) => {
 
   return (
     <DataView
+      status={emptyResultsViaFilters ? 'empty-filters' : 'default'}
       page={page}
       onPageChange={setPage}
+      onStatusEmptyClear={handleClearFilters}
       heading={
         <React.Fragment>
           <div
@@ -251,21 +252,14 @@ const Transfers = React.memo(({ tokens, transactions }) => {
               transferTypes={TRANSFER_TYPES_STRING}
             />
           )}
-          {emptyResultsViaFilters && (
-            <EmptyFilteredTransfers onClear={handleClearFilters} />
-          )}
         </React.Fragment>
       }
-      fields={
-        emptyResultsViaFilters
-          ? []
-          : [
-              { label: 'Date', priority: 2 },
-              { label: 'Source/recipient', priority: 3 },
-              { label: 'Reference', priority: 1 },
-              { label: 'Amount', priority: 2 },
-            ]
-      }
+      fields={[
+        { label: 'Date', priority: 2 },
+        { label: 'Source/recipient', priority: 3 },
+        { label: 'Reference', priority: 1 },
+        { label: 'Amount', priority: 2 },
+      ]}
       entries={sortedTransfers}
       renderEntry={({
         date,