diff --git a/src/routes/safe/components/Layout/Tabs/index.tsx b/src/routes/safe/components/Layout/Tabs/index.tsx index 1ad32c57..08982552 100644 --- a/src/routes/safe/components/Layout/Tabs/index.tsx +++ b/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 -} - const BalancesLabel = ( <> @@ -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) => { ) } -export default withStyles(styles as any)(withRouter(TabsComponent)) +export default TabsComponent diff --git a/src/routes/safe/components/Layout/Tabs/style.ts b/src/routes/safe/components/Layout/Tabs/style.ts index d820dc00..9b1f1c43 100644 --- a/src/routes/safe/components/Layout/Tabs/style.ts +++ b/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', diff --git a/src/routes/safe/components/Layout/index.tsx b/src/routes/safe/components/Layout/index.tsx index 2473eda0..063ead25 100644 --- a/src/routes/safe/components/Layout/index.tsx +++ b/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 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 diff --git a/src/routes/safe/components/Layout/style.ts b/src/routes/safe/components/Layout/style.ts index 50e6689a..ed951783 100644 --- a/src/routes/safe/components/Layout/style.ts +++ b/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)', diff --git a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx index 3dd5db75..d8c5a3a1 100644 --- a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx +++ b/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 = ({ {showLinks ? (
- {userName} + {!userName || userName === 'UNKNOWN' ? null : userName}
) : ( diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx index bd381a32..9406d49b 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.tsx +++ b/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' @@ -18,31 +18,55 @@ import Button from 'src/components/layout/Button' import Img from 'src/components/layout/Img' import Paragraph from 'src/components/layout/Paragraph' 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, - owner, - pendingAcceptAction, - pendingRejectAction, - showConfirmBtn, - showExecuteBtn, - showExecuteRejectBtn, - showRejectBtn, - thresholdReached, - userAddress, -}: any) => { +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, + isCancelTx, + thresholdReached, + executor, + showConfirmBtn, + onTxConfirm, + onTxExecute, + showExecuteBtn, + showRejectBtn, + userAddress, + onTxReject, + showExecuteRejectBtn, + confirmed, + } = props const nameInAdbk = useSelector((state) => getNameFromAddressBook(state, owner)) + const classes = useStyles() const [imgCircle, setImgCircle] = React.useState(ConfirmSmallGreyCircle) React.useMemo(() => { @@ -155,8 +179,8 @@ const OwnerComponent = ({ - - {nameInAdbk} + + {!nameInAdbk || nameInAdbk === 'UNKNOWN' ? null : nameInAdbk} @@ -167,4 +191,4 @@ const OwnerComponent = ({ ) } -export default withStyles(styles as any)(OwnerComponent) +export default OwnerComponent diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnersList.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnersList.tsx index 8cd107f9..0d0b4058 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnersList.tsx +++ b/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) => ( - <> - {ownersWhoConfirmed.map((owner) => ( - - ))} - {ownersUnconfirmed.map(({ hasPendingAcceptActions, hasPendingRejectActions, owner }) => ( - - ))} - -) +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 +} -export default withStyles(styles as any)(OwnersList) +const OwnersList = (props: OwnersListProps): React.ReactElement => { + const { ownersUnconfirmed, ownersWhoConfirmed } = props + return ( + <> + {ownersWhoConfirmed.map((owner) => ( + + ))} + {ownersUnconfirmed.map(({ hasPendingAcceptActions, hasPendingRejectActions, owner }) => ( + + ))} + + ) +} + +export default OwnersList diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx index 40eda58c..73e6358f 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/index.tsx +++ b/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 diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/style.ts index cfee3724..36e8fdf2 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/style.ts +++ b/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', diff --git a/src/store/index.ts b/src/store/index.ts index 0171b0a1..0a7ef8a5 100644 --- a/src/store/index.ts +++ b/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 [NOTIFICATIONS_REDUCER_ID]: Map - [CURRENCY_VALUES_KEY]: CurrencyReducerMap + [CURRENCY_VALUES_KEY]: CurrencyValuesState [COOKIES_REDUCER_ID]: Map [ADDRESS_BOOK_REDUCER_ID]: AddressBookReducerMap [CURRENT_SESSION_REDUCER_ID]: Map