Merge branch 'development' into issue-1144

src/routes/safe/components/Layout/Tabs/index.tsx

@@ -1,8 +1,8 @@
 import Tab from '@material-ui/core/Tab'
 import Tabs from '@material-ui/core/Tabs'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
-import { withRouter, RouteComponentProps } from 'react-router-dom'
+import { useRouteMatch, useLocation, useHistory } from 'react-router-dom'
 
 import { styles } from './style'
 
@@ -19,10 +19,6 @@ import { AppsIcon } from 'src/routes/safe/components/assets/AppsIcon'
 import { BalancesIcon } from 'src/routes/safe/components/assets/BalancesIcon'
 import { TransactionsIcon } from 'src/routes/safe/components/assets/TransactionsIcon'
 
-interface Props extends RouteComponentProps {
-  classes: Record<string, any>
-}
-
 const BalancesLabel = (
   <>
     <BalancesIcon />
@@ -51,12 +47,15 @@ const TransactionsLabel = (
   </>
 )
 
-const TabsComponent = (props: Props) => {
-  const { classes, location, match } = props
+const useStyles = makeStyles(styles)
 
-  const handleCallToRouter = (_, value) => {
-    const { history } = props
+const TabsComponent = (): React.ReactElement => {
+  const classes = useStyles()
+  const match = useRouteMatch()
+  const location = useLocation()
+  const history = useHistory()
 
+  const handleCallToRouter = (_: unknown, value: string) => {
     history.push(value)
   }
 
@@ -128,4 +127,4 @@ const TabsComponent = (props: Props) => {
     </Tabs>
   )
 }
-export default withStyles(styles as any)(withRouter(TabsComponent))
+export default TabsComponent

src/routes/safe/components/Layout/Tabs/style.ts

@@ -1,6 +1,7 @@
 import { secondary } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   tabWrapper: {
     display: 'flex',
     flexDirection: 'row',

src/routes/safe/components/Layout/index.tsx

@@ -2,7 +2,7 @@ import { GenericModal } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
-import { Redirect, Route, Switch, withRouter, RouteComponentProps } from 'react-router-dom'
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import Receive from '../Balances/Receive'
 
@@ -32,7 +32,7 @@ const Balances = React.lazy(() => import('../Balances'))
 const TxsTable = React.lazy(() => import('src/routes/safe/components/Transactions/TxsTable'))
 const AddressBookTable = React.lazy(() => import('src/routes/safe/components/AddressBook'))
 
-interface Props extends RouteComponentProps {
+interface Props {
   sendFunds: Record<string, any>
   showReceive: boolean
   onShow: (value: string) => void
@@ -41,11 +41,12 @@ interface Props extends RouteComponentProps {
   hideSendFunds: () => void
 }
 
-const useStyles = makeStyles(styles as any)
+const useStyles = makeStyles(styles)
 
-const Layout = (props: Props) => {
+const Layout = (props: Props): React.ReactElement => {
   const classes = useStyles()
-  const { hideSendFunds, match, onHide, onShow, sendFunds, showReceive, showSendFunds } = props
+  const { hideSendFunds, onHide, onShow, sendFunds, showReceive, showSendFunds } = props
+  const match = useRouteMatch()
 
   const [modal, setModal] = useState({
     isOpen: false,
@@ -117,4 +118,4 @@ const Layout = (props: Props) => {
   )
 }
 
-export default withRouter(Layout)
+export default Layout

src/routes/safe/components/Layout/style.ts

@@ -1,6 +1,7 @@
 import { screenSm, sm } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core'
 
-export const styles = () => ({
+export const styles = createStyles({
   receiveModal: {
     height: 'auto',
     maxWidth: 'calc(100% - 30px)',

src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx

@@ -7,19 +7,15 @@ import Paragraph from 'src/components/layout/Paragraph'
 import { useWindowDimensions } from 'src/routes/safe/container/hooks/useWindowDimensions'
 import { useEffect, useState } from 'react'
 
-interface OwnerAddressTableCellProps {
+type OwnerAddressTableCellProps = {
   address: string
   knownAddress?: boolean
   showLinks: boolean
   userName?: string
 }
 
-const OwnerAddressTableCell = ({
-  address,
-  knownAddress,
-  showLinks,
-  userName,
-}: OwnerAddressTableCellProps): React.ReactElement => {
+const OwnerAddressTableCell = (props: OwnerAddressTableCellProps): React.ReactElement => {
+  const { address, knownAddress, showLinks, userName } = props
   const [cut, setCut] = useState(undefined)
   const { width } = useWindowDimensions()
 
@@ -38,7 +34,7 @@ const OwnerAddressTableCell = ({
       <Identicon address={address} diameter={32} />
       {showLinks ? (
         <div style={{ marginLeft: 10, flexShrink: 1, minWidth: 0 }}>
-          {userName}
+          {!userName || userName === 'UNKNOWN' ? null : userName}
           <EtherScanLink knownAddress={knownAddress} type="address" value={address} cut={cut} />
         </div>
       ) : (

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx

@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
 import React from 'react'
 import { useSelector } from 'react-redux'
@@ -17,31 +17,55 @@ import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Img from 'src/components/layout/Img'
 import { getNameFromAddressBook } from 'src/logic/addressBook/store/selectors'
+import { OwnersWithoutConfirmations } from './index'
 
 export const CONFIRM_TX_BTN_TEST_ID = 'confirm-btn'
 export const EXECUTE_TX_BTN_TEST_ID = 'execute-btn'
 export const REJECT_TX_BTN_TEST_ID = 'reject-btn'
 export const EXECUTE_REJECT_TX_BTN_TEST_ID = 'execute-reject-btn'
 
-const OwnerComponent = ({
-  classes,
-  confirmed,
-  executor,
-  isCancelTx,
-  onTxConfirm,
-  onTxExecute,
-  onTxReject,
+type OwnerComponentProps = {
+  executor: string
+  isCancelTx?: boolean
+  onTxConfirm?: () => void
+  onTxExecute?: () => void
+  onTxReject?: () => void
+  ownersUnconfirmed: OwnersWithoutConfirmations
+  ownersWhoConfirmed: string[]
+  showConfirmBtn?: boolean
+  showExecuteBtn?: boolean
+  showExecuteRejectBtn?: boolean
+  showRejectBtn?: boolean
+  thresholdReached: boolean
+  userAddress: string
+  confirmed?: boolean
+  owner: string
+  pendingAcceptAction?: boolean
+  pendingRejectAction?: boolean
+}
+
+const useStyles = makeStyles(styles)
+
+const OwnerComponent = (props: OwnerComponentProps): React.ReactElement => {
+  const {
     owner,
     pendingAcceptAction,
     pendingRejectAction,
-  showConfirmBtn,
-  showExecuteBtn,
-  showExecuteRejectBtn,
-  showRejectBtn,
+    isCancelTx,
     thresholdReached,
+    executor,
+    showConfirmBtn,
+    onTxConfirm,
+    onTxExecute,
+    showExecuteBtn,
+    showRejectBtn,
     userAddress,
-}: any) => {
+    onTxReject,
+    showExecuteRejectBtn,
+    confirmed,
+  } = props
   const nameInAdbk = useSelector((state) => getNameFromAddressBook(state, owner))
+  const classes = useStyles()
   const [imgCircle, setImgCircle] = React.useState(ConfirmSmallGreyCircle)
 
   React.useMemo(() => {
@@ -154,7 +178,7 @@ const OwnerComponent = ({
       </div>
       <EthHashInfo
         hash={owner}
-        name={nameInAdbk}
+        name={!nameInAdbk || nameInAdbk === 'UNKNOWN' ? null : nameInAdbk}
         shortenHash={4}
         showIdenticon
         showCopyBtn
@@ -168,4 +192,4 @@ const OwnerComponent = ({
   )
 }
 
-export default withStyles(styles as any)(OwnerComponent)
+export default OwnerComponent

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnersList.tsx

@@ -1,64 +1,42 @@
-import { withStyles } from '@material-ui/core/styles'
 import React from 'react'
 
 import OwnerComponent from './OwnerComponent'
-import { styles } from './style'
+import { OwnersWithoutConfirmations } from './index'
 
-const OwnersList = ({
-  classes,
-  executor,
-  isCancelTx,
-  onTxConfirm,
-  onTxExecute,
-  onTxReject,
-  ownersUnconfirmed,
-  ownersWhoConfirmed,
-  showConfirmBtn,
-  showExecuteBtn,
-  showExecuteRejectBtn,
-  showRejectBtn,
-  thresholdReached,
-  userAddress,
-}: any) => (
+type OwnersListProps = {
+  executor: string
+  isCancelTx?: boolean
+  onTxConfirm?: () => void
+  onTxExecute?: () => void
+  onTxReject?: () => void
+  ownersUnconfirmed: OwnersWithoutConfirmations
+  ownersWhoConfirmed: string[]
+  showConfirmBtn?: boolean
+  showExecuteBtn?: boolean
+  showExecuteRejectBtn?: boolean
+  showRejectBtn?: boolean
+  thresholdReached: boolean
+  userAddress: string
+}
+
+const OwnersList = (props: OwnersListProps): React.ReactElement => {
+  const { ownersUnconfirmed, ownersWhoConfirmed } = props
+  return (
     <>
       {ownersWhoConfirmed.map((owner) => (
-      <OwnerComponent
-        classes={classes}
-        confirmed
-        executor={executor}
-        isCancelTx={isCancelTx}
-        key={owner}
-        onTxExecute={onTxExecute}
-        onTxReject={onTxReject}
-        owner={owner}
-        showExecuteBtn={showExecuteBtn}
-        showExecuteRejectBtn={showExecuteRejectBtn}
-        showRejectBtn={showRejectBtn}
-        thresholdReached={thresholdReached}
-        userAddress={userAddress}
-      />
+        <OwnerComponent confirmed key={owner} owner={owner} {...props} />
       ))}
       {ownersUnconfirmed.map(({ hasPendingAcceptActions, hasPendingRejectActions, owner }) => (
         <OwnerComponent
-        classes={classes}
-        executor={executor}
-        isCancelTx={isCancelTx}
           key={owner}
-        onTxConfirm={onTxConfirm}
-        onTxExecute={onTxExecute}
-        onTxReject={onTxReject}
           owner={owner}
           pendingAcceptAction={hasPendingAcceptActions}
           pendingRejectAction={hasPendingRejectActions}
-        showConfirmBtn={showConfirmBtn}
-        showExecuteBtn={showExecuteBtn}
-        showExecuteRejectBtn={showExecuteRejectBtn}
-        showRejectBtn={showRejectBtn}
-        thresholdReached={thresholdReached}
-        userAddress={userAddress}
+          {...props}
         />
       ))}
     </>
-)
+  )
+}
 
-export default withStyles(styles as any)(OwnersList)
+export default OwnersList

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx

@@ -1,4 +1,3 @@
-import { withStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
 import React from 'react'
 import { useSelector } from 'react-redux'
@@ -9,7 +8,6 @@ import CheckLargeFilledRedCircle from './assets/check-large-filled-red.svg'
 import ConfirmLargeGreenCircle from './assets/confirm-large-green.svg'
 import ConfirmLargeGreyCircle from './assets/confirm-large-grey.svg'
 import ConfirmLargeRedCircle from './assets/confirm-large-red.svg'
-import { styles } from './style'
 
 import Block from 'src/components/layout/Block'
 import Col from 'src/components/layout/Col'
@@ -18,10 +16,19 @@ import Paragraph from 'src/components/layout/Paragraph/index'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import { makeTransaction } from 'src/routes/safe/store/models/transaction'
 import { safeOwnersSelector, safeThresholdSelector } from 'src/routes/safe/store/selectors'
-import { TransactionStatus } from 'src/routes/safe/store/models/types/transaction'
+import { Transaction, TransactionStatus } from 'src/routes/safe/store/models/types/transaction'
+import { List } from 'immutable'
+import { makeStyles } from '@material-ui/core/styles'
+import { styles } from './style'
 
-function getOwnersConfirmations(tx, userAddress) {
-  const ownersWhoConfirmed = []
+export type OwnersWithoutConfirmations = {
+  hasPendingAcceptActions: boolean
+  hasPendingRejectActions: boolean
+  owner: string
+}[]
+
+function getOwnersConfirmations(tx: Transaction, userAddress: string): [string[], boolean] {
+  const ownersWhoConfirmed: string[] = []
   let currentUserAlreadyConfirmed = false
 
   tx.confirmations.forEach((conf) => {
@@ -34,7 +41,11 @@ function getOwnersConfirmations(tx, userAddress) {
   return [ownersWhoConfirmed, currentUserAlreadyConfirmed]
 }
 
-function getPendingOwnersConfirmations(owners, tx, userAddress) {
+function getPendingOwnersConfirmations(
+  owners: List<{ name: string; address: string }>,
+  tx: Transaction,
+  userAddress: string,
+): [OwnersWithoutConfirmations, boolean] {
   const ownersWithNoConfirmations = []
   let currentUserNotConfirmed = true
 
@@ -74,10 +85,23 @@ function getPendingOwnersConfirmations(owners, tx, userAddress) {
   return [ownersWithNoConfirmationsSorted, currentUserNotConfirmed]
 }
 
+const useStyles = makeStyles(styles)
+
+type ownersColumnProps = {
+  tx: Transaction
+  cancelTx: Transaction
+  thresholdReached: boolean
+  cancelThresholdReached: boolean
+  onTxConfirm: () => void
+  onTxExecute: () => void
+  onTxReject: () => void
+  canExecute: boolean
+  canExecuteCancel: boolean
+}
+
 const OwnersColumn = ({
   tx,
   cancelTx = makeTransaction({ isCancellationTx: true, status: TransactionStatus.AWAITING_YOUR_CONFIRMATION }),
-  classes,
   thresholdReached,
   cancelThresholdReached,
   onTxConfirm,
@@ -85,7 +109,8 @@ const OwnersColumn = ({
   onTxReject,
   canExecute,
   canExecuteCancel,
-}) => {
+}: ownersColumnProps): React.ReactElement => {
+  const classes = useStyles()
   let showOlderTxAnnotation
 
   if (tx.isExecuted || cancelTx.isExecuted) {
@@ -234,4 +259,4 @@ const OwnersColumn = ({
   )
 }
 
-export default withStyles(styles as any)(OwnersColumn)
+export default OwnersColumn

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/style.ts

@@ -1,6 +1,7 @@
 import { boldFont, border, error, primary, secondary, secondaryText, sm, warning } from 'src/theme/variables'
+import { createStyles } from '@material-ui/core/styles'
 
-export const styles = () => ({
+export const styles = createStyles({
   ownersList: {
     height: '192px',
     overflowY: 'scroll',
@@ -18,7 +19,7 @@ export const styles = () => ({
     position: 'absolute',
     top: '-27px',
     width: '2px',
-    zIndex: '12',
+    zIndex: 12,
   },
   verticalLinePending: {
     backgroundColor: secondaryText,
@@ -80,7 +81,7 @@ export const styles = () => ({
     justifyContent: 'center',
     marginRight: '18px',
     width: '20px',
-    zIndex: '13',
+    zIndex: 13,
 
     '& > img': {
       display: 'block',
@@ -88,7 +89,7 @@ export const styles = () => ({
   },
   button: {
     alignSelf: 'center',
-    flexGrow: '0',
+    flexGrow: 0,
     fontSize: '16px',
     justifyContent: 'center',
     paddingLeft: '14px',

src/store/index.ts

@@ -17,7 +17,7 @@ import cookies, { COOKIES_REDUCER_ID } from 'src/logic/cookies/store/reducer/coo
 import currencyValuesStorageMiddleware from 'src/logic/currencyValues/store/middleware'
 import currencyValues, {
   CURRENCY_VALUES_KEY,
-  CurrencyReducerMap,
+  CurrencyValuesState,
 } from 'src/logic/currencyValues/store/reducer/currencyValues'
 import currentSession, { CURRENT_SESSION_REDUCER_ID } from 'src/logic/currentSession/store/reducer/currentSession'
 import notifications, { NOTIFICATIONS_REDUCER_ID } from 'src/logic/notifications/store/reducer/notifications'
@@ -80,7 +80,7 @@ export type AppReduxState = CombinedState<{
   [CANCELLATION_TRANSACTIONS_REDUCER_ID]: CancellationTxState
   [INCOMING_TRANSACTIONS_REDUCER_ID]: Map<string, any>
   [NOTIFICATIONS_REDUCER_ID]: Map<string, any>
-  [CURRENCY_VALUES_KEY]: CurrencyReducerMap
+  [CURRENCY_VALUES_KEY]: CurrencyValuesState
   [COOKIES_REDUCER_ID]: Map<string, any>
   [ADDRESS_BOOK_REDUCER_ID]: AddressBookReducerMap
   [CURRENT_SESSION_REDUCER_ID]: Map<string, any>