From 08e00a65abd30f184a4538ea7ac5bef6ea53eb0d Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 15 Jan 2020 09:12:17 -0300 Subject: [PATCH] #386: Addressbook transaction details (#407) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Development (#378) * Adds cookie permissions to localStorage/redux state * Adds action * Adds files to git * (fix) linting issues * (update) flow-typed * (update) .eslint and .flowconfig * (add) cookie banner * Finish cookie banner implementation * (Add) checkbox's disabled style. * Removes redux for cookiesStorage * Fix cookieStore deletion * Fixs cookies acceptance * Fixs cookies banner verbiage Fix "x" in wrong place for snackbar messages * (remove) unused library * Adds cookies utils Replaces localStorage with cookies Adds js-cookie * (fix) added correct polished library and import, updated flow-typed * (update) removed polish flow type, added js-cookie flow type * Add link to cookie policy, use generic links for legal docs * Remove link to cookie policy from sidebar, link cookie policy in the banner * Let the user re-open the cookie banner * remove withMutations from cookies reducer, move utils/cookies to logic/cookies * Now the sidebar closes when the cookie banner is toggled * Feature #169: Intercom (#301) * Implements intercom Adds REACT_APP_INTERCOM_ID_MAINNET and REACT_APP_INTERCOM_ID_RINKEBY env vars * Adds .env.example * Adds intercom env vars * Updates env vars Replaces "rinkeby" and "mainnet" with "non-production" and "production" * Now loads intercom after the user accepted the analytics * Add env variable for production intercom id * Update .env.example * Removes react-intercom Fixs getIntercomId with default dev appID Now loads intercom as script * Renegerate flow-types * Remove 'Hide zero balances' (#310) * Use medium font size for 'select an asset' label (#312) * Feature #272: Google Analytics (#299) * Adds google analytics tracking for every route * Adds cookies acceptance check before tracking * Fix react-ga dependency * Fix cookieStore deletion * Merge with #189-cookie-banner * Fixs react ga version Refactored HOC with hooks * Fix TYPO * Fix path for cookies utils * Fix imports * remove flow type definition for polish * Add GA ID log * Fix load GA After cookies acceptance * Feature #224: Activate tokens automatically (#300) * Replace 'Manage Tokens' with 'Manage List' * prevent 301 redirects * Add `BLACKLISTED_TOKENS` key to persist through immortal * Add store/action to extract _activate tokens by its balance_ - keeps already activated tokens - discards blacklisted tokens - adds tokens whose vales are bigger than zero and are not blacklisted * Add `blacklistedTokens` list to safe's store * Display activeTokensByBalance in 'Balances' screen * Enable token's blacklisting functionality in Tokens List * Retrieve balance from API * Rename action to `activateTokensByBalance` * Fix linting errors - line too long - required return * Do not persist a separate list into `BLACKLISTED_TOKENS` * Typo fix (#326) * Fix security vulnerability: Remove uglifyjs, use terser plugin (#327) * Remove uglifyjs, use terser plugin * fix css-loader config * Feature #256: Sticky header (#308) * Add sticky header * Remove react-headroom, set position to fixed for header * Regenerate yarn lock * Remove unused headroom style from root.scss * Pull from dev, conflict fixes * Update welcome text (#323) * Feature #137: Tx list improvements (#222) * Fix swapOwners threshold displayed as hex in tx list * Refactor spinner in empty table * Fix number of rows per page in table pagination * Add use of EtherscanLink component * Set short version of strings in tx list * Adjust styles in tx list * Add more styles to table * WIP * An attempt to fix #204 by showing UNKNOWN instead of failed to fetch token symbol * Table pagination style fixes * Show confirm transaction button in owner list * Update dependencies * Add confirmation icons to owner list in tx list * exclude unneeded stuff from travis.yml * Adds cookie permissions to localStorage/redux state * Update dependencies * Adds action * Adds files to git * (fix) linting issues * (update) flow-typed * (update) .eslint and .flowconfig * (add) cookie banner * Finish cookie banner implementation * (Add) checkbox's disabled style. * Removes redux for cookiesStorage * Fix cookieStore deletion * Increase TO_EXP for bignumber.js * Fixs cookies acceptance * Fixs cookies banner verbiage Fix "x" in wrong place for snackbar messages * (fix) added correct polished library and import, updated flow-typed * (update) removed polish flow type, added js-cookie flow type * Add link to cookie policy, use generic links for legal docs * Remove link to cookie policy from sidebar, link cookie policy in the banner * Mock Safe creation transaction * Format code * Fix break statement * Remove deployment of storybook * Let the user re-open the cookie banner * Update tx status messages and visual confirmation progress * Fix svg in tx confirmation progress * Add styles to tx type in tx list * Replace nonce in tx list with tx id * Update opacity of cancelled tx * Fix short version of address * remove withMutations from cookies reducer, move utils/cookies to logic/cookies * Now the sidebar closes when the cookie banner is toggled * Fix styles in tx list * Add Pending status in tx description * (remove) unused library * Adds cookies utils Replaces localStorage with cookies Adds js-cookie * Set 25 rows per page in tx list by default * Align tx table * Adjust tx table and tx details borders * Fix fetching transactions to show Safe creation tx alone * Fix failed Safe creation transaction * Add styles to tx data * Refactor and fix owner list in transaction * Refactor use of theme variables * Remove storybook files * Update dependencies * Fix warnings * Fix dependencies * Update file-loader config * Fix owner colors in the tx confirmation progress * Fix transaction type icon height * Tx list adjustments * Update readme * (Feature) Etherscan button icon (#331) * (add) new open on etherscan button icon * (remove) unused asset * (fix) icon background * Feature #239: Replace early access label with network label (#311) * Remove early access label * Revert "Remove early access label" This reverts commit 34682f0f6d9c1974a6e45c2a31358864931d9c1e. * Replace early access label with network label * Capitalzie first letter of the network name * Adds threshold update on checkAndUpdateSafe (#320) * Feature #159: Pending transaction that requires user confirmation (#330) * Creates a new notification: waitingConfirmation Adds key as optional parameter for notification Implemented getAwaitingTransactions to get the transactions that needs to be confirmed by the current user Not fetchTransactions action also dispatch a notification for awaiting transactions Improved performance of routes/safe/container/index to avoid re-rendering * Removes notification logic on fetchTransactions Adds notificationsMiddleware * Moves fetchTransaction to container * Removes unused param on fetchTransactions * Fixs null safe check * Fixs middleware declaration * Removes lodash * Changes cancelled transaction detection logic * Feature #122: Multisig migration (#315) * Adds query-string package.json Parses query string on open layout * Implements load all the values on openSafe view from param querys * Adds query params validation * Moves query parse logic to open.jsx * Changes default no metamask component on open page * Replaces global isNaN * Fix threshold parsing validation * Updates the welcome component with new verbiage for open * Renames isOpenSafe to isOldMultisigMigration * Merge branch 'development' of https://github.com/gnosis/safe-react into 122-multisig-migration # Conflicts: # src/routes/open/components/Layout.jsx * Merge branch 'development' of https://github.com/gnosis/safe-react into 159-pending-transactions # Conflicts: # src/routes/safe/components/Transactions/index.jsx # yarn.lock * set anonymizeIp to true (#335) * Feature #180: Predict transaction nonce (#293) * Dep bump * Fetch transactions when safe view is mounted * eslint fix * Calculate new tx nonce from latest tx in service * Fix tx cancellation, allow passing nonce to createTransaction * dep bump * Refactor createTransaction/processTransaction to use object as argument * Adopting transactions table to new send tx flow with predicted nonces * dep bump, disable esModule in file-loader options after new v5 release * Don't show older tx annotation for already executed txs * sort tx by nonce * get new safe nonce after tx execution * Bugfixes * remove whitespace for showOlderTxAnnotation * Feature #329: Rename to Multisig (#334) * Rename to Multisig * migration text fix * replace safe for teams with multisig * Fixs race condition (#341) Fixs typo * (Feature) Incoming transactions (#333) * Add `blockNumber` to transactions model * Create `incomingTransaction` node in store and load it along with `transactions` * Add incoming transfers to the Transactions table * Rename `transactionHash` to `executionTxHash` for better incoming/outgoing txs unification in Transactions table * Add incoming transactions details * Add transaction type icon in table row * Add snackbar notification for incoming txs * Make incoming transaction snackbar to show on any tab * Use makeStyles hooks * Fix incoming amounts conversion from wei * Make concurrent promise calls * Use date to calculate transactions ids * Prevent repeating messages - also move logic to display snack bar into the notifications middleware * Merge transactions and incomingTxs to the transactions selector * Show 'Multiple incoming transfers' if they are more than 3 * Prevent incoming transactions snack bar for first-timer users * Set ID as the default order * Use constant for _incoming_ type * Feature #154: Fiat Balances (#290) * Adds DropdownCurrency Adds redux store for currencyValues Adds Value column on the assets table Adds mocked currency values * (add) base currency dropdown * (add) dropdown styles * Refactors data fetching of the balances list Now uses the endpoint * Fix column value styling * Adds support for ECB currency values * Fixs list overflow * Changes endpoint url Adds decimals for balance values * (fix) remove inline style * (add) currencies dropdown search field * (fix) list items' hover color * Implements filter search * Fix warning on dropdown template * Saves selected currency in localStorage * Remove spaces on curly braces Add alt Renames rowItem to cellItem Improves fetchCurrenciesRates handling * Removes withMutations * Removes middleware Export style to another file for dropdownCurrency * Adds classNames * Fix incomming transactions fetching (#346) * Feature: Activate fortmatic (#339) * Add fortmatic integration to web3connect * add fortmatic * Safe open form improvements: limit calling initContracts to 1 time * update .env.example * Feature #336: Confirmation required notification for non-owners fix (#338) * Refactors grantedSelector with isUserOwner function Checks if the user is owner of the safe before sending notification * Adds safeParamAddressFromStateSelector Refactors notificationsMiddleware with new selector * Remove old size check * safe notifications middleware fixes * add apt-get update to travis yml * (Fix) Incoming transactions inline-styles (#344) * Remove inline styles * Replace ternary with logical && operator * use cn as shortcut for classnames * Makes minMaxLength 2 to AddCustomToken (#363) * Fixs ETH display on balances list (#360) * Bug #348: Safelist entries get removed (#358) * Fix balances saved to localStorage not in format [tokenAdd, balance] but [balance] * Updates localStorage version value * Use submission instead of execution date to sort outgoing txs (#364) * Feature #190: Sidebar improvements (#347) * Change icons Adds checked icon * Adds safeParamAddressFromStateSelector for get current safe selected Implements check icon on sidebar * Remove overflow on sidebar Start alignments * Removes headerPlaceholder * Improves header * Improves header * Fix header style * use sameAddress function to check address eqaulity when fetching transactions (#365) * Bug #352: Owner shown multiple times (#367) * Ensure lowercased string comparison for owners' addresses * Use `sameAddress` for addresses comparison * Use transaction value as a string (#369) * Update isTokenTransfer to use value as a string * Rename error message * Update dependencies * Refactor * Fix alternative token abi and token address for incoming transactions (#373) * Bug #313: Payload breaks ui (#371) * Makes minMaxLength 2 to AddCustomToken * Fix styling * Fix typo * Feature #200: Show version number (#370) * Add `dotenv-expand` as a dependency * Add app version to sidebar * Add hardcoded latest safe version to env variables * Add `semver` to compare current vs latest version * Add Safe version to Safe Details * Adjustments in version number * Fix transaction description value (#377) * Fix transaction description value * Remove duplicated symbols * fix checkAndUpdateSafe logic (#379) * Update .env.example * update package json version * update package json version * Fix app version in side bar * add REACT_APP_APP_VERSION global env var * add react_app_version to build script * remove react_app_app_version from build-mainnet * Adds basic addressBook table * Implements redux and localStorage for addressBook * Disables loading page on empty address book * Fix address display * Adds logic for add entry * Implements update localStorage and redux state on new entry created * Updates default row per page * Renames createEntry modal to createEditEntryModal Implements edit entry logic * Fix save/edit entry notification verbiage * Implements delete entry * Finish delete entry implementation Moves update/remove/add entry logic to redux * Updates defaultRowsPerPage to 25 * Implements sendFunds modal within addressBook Refactors safeSelector with safeParamAddressFromStateSelector * Removes unused addressBook container * Moves loadAddressBook to safeContainer Adds in transaction details Adds userName (if available) on OwnerAddressTableCell * Removes unused pops Renames AddressBookEntry with AddressBookEntry * Replaces updateAddressBook with addAddressBook * Fixs transaction details styling with OwnerAddressTableCell Show menu off Edit/Add entry * Implements logic to add/edit addressBook entry from transaction details * Fix duplicated entry validation * Fix edit entry * Adds OwnerAddressTableCell in SettingsDescription and CustomDescription Shows owners name in addressboko from owner lists * Refactor redux addressBook, now saves the data for each safe * Fix addressbook url * Fix display addressbook names on transaction details * Fix entry exists validation * Refactors create/edit/delete entry, now the addressbook is global for all the safes * Refactor, uses immutable * Adds variable for hideBorderBottom * Adds disabled bin icon Disable the delete button for owner entries * Adds getAddressBookListSelector * Simplifies validator logic * Makes AddressBookEntry an immutable js list * Feedback fixes Co-authored-by: Germán Martínez Co-authored-by: Mikhail Mikheev --- .gitignore | 1 + src/components/EtherscanLink/index.jsx | 13 +- src/components/EtherscanLink/style.js | 3 + .../addressBook/store/selectors/index.js | 13 ++ src/logic/addressBook/utils/index.js | 2 + .../CreateEditEntryModal/index.jsx | 4 +- .../EllipsisTransactionDetails/copy.svg | 5 + .../EllipsisTransactionDetails/index.jsx | 77 +++++++++++ .../safe/components/AddressBook/index.jsx | 31 ++++- .../OwnerAddressTableCell/index.jsx | 9 +- .../IncomingTxDescription/index.jsx | 18 ++- .../OwnersColumn/OwnerComponent.jsx | 122 +++++++++--------- .../ExpandedTx/TxDescription/index.jsx | 95 ++++++++------ src/routes/safe/store/selectors/index.js | 10 ++ 14 files changed, 294 insertions(+), 109 deletions(-) create mode 100644 src/routes/safe/components/AddressBook/EllipsisTransactionDetails/copy.svg create mode 100644 src/routes/safe/components/AddressBook/EllipsisTransactionDetails/index.jsx diff --git a/.gitignore b/.gitignore index daa0b33c..d0d3934a 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ build_webpack/ build/ yarn-error.log .env* +.idea/ diff --git a/src/components/EtherscanLink/index.jsx b/src/components/EtherscanLink/index.jsx index 3107b92f..a09fa90f 100644 --- a/src/components/EtherscanLink/index.jsx +++ b/src/components/EtherscanLink/index.jsx @@ -1,29 +1,36 @@ // @flow import React from 'react' import { withStyles } from '@material-ui/core/styles' +import cn from 'classnames' import Block from '~/components/layout/Block' -import Span from '~/components/layout/Span' import CopyBtn from '~/components/CopyBtn' import EtherscanBtn from '~/components/EtherscanBtn' import { shortVersionOf } from '~/logic/wallets/ethAddresses' import { styles } from './style.js' +import EllipsisTransactionDetails from '~/routes/safe/components/AddressBook/EllipsisTransactionDetails' +import Span from '~/components/layout/Span' type EtherscanLinkProps = { type: 'tx' | 'address', value: string, cut?: number, + knownAddress?: boolean, classes: Object, } const EtherscanLink = ({ - type, value, cut, classes, + type, value, cut, classes, knownAddress, }: EtherscanLinkProps) => ( - + {cut ? shortVersionOf(value, cut) : value} + {knownAddress !== undefined ? : null} ) diff --git a/src/components/EtherscanLink/style.js b/src/components/EtherscanLink/style.js index fc028b3b..eadaa727 100644 --- a/src/components/EtherscanLink/style.js +++ b/src/components/EtherscanLink/style.js @@ -5,4 +5,7 @@ export const styles = () => ({ display: 'flex', alignItems: 'center', }, + addressParagraph: { + fontSize: '13px', + }, }) diff --git a/src/logic/addressBook/store/selectors/index.js b/src/logic/addressBook/store/selectors/index.js index ce3d4610..607e3c09 100644 --- a/src/logic/addressBook/store/selectors/index.js +++ b/src/logic/addressBook/store/selectors/index.js @@ -1,6 +1,7 @@ // @flow import { List, Map } from 'immutable' import { createSelector, Selector } from 'reselect' +import { useSelector } from 'react-redux' import { ADDRESS_BOOK_REDUCER_ID } from '~/logic/addressBook/store/reducer/addressBook' import type { GlobalState } from '~/store' import type { AddressBook } from '~/logic/addressBook/model/addressBook' @@ -32,3 +33,15 @@ export const getAddressBookListSelector: Selector { + if (!userAddress) { + return null + } + const addressBook = useSelector(getAddressBook) + const result = addressBook.filter((addressBookItem) => addressBookItem.address === userAddress) + if (result.size > 0) { + return result.get(0).name + } + return null +} diff --git a/src/logic/addressBook/utils/index.js b/src/logic/addressBook/utils/index.js index ecd709b1..79fab242 100644 --- a/src/logic/addressBook/utils/index.js +++ b/src/logic/addressBook/utils/index.js @@ -19,3 +19,5 @@ export const saveAddressBook = async (addressBook: AddressBook) => { } export const getAddressesListFromAdbk = (addressBook: AddressBook) => Array.from(addressBook).map((entry) => entry.address) + + diff --git a/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.jsx b/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.jsx index 35b0e19e..7881028e 100644 --- a/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.jsx +++ b/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.jsx @@ -35,6 +35,7 @@ type Props = { newEntryModalHandler: Function, editEntryModalHandler: Function, entryToEdit?: AddressBookEntry, + newEntryDefaultAddress: string | null, } const CreateEditEntryModalComponent = ({ @@ -43,6 +44,7 @@ const CreateEditEntryModalComponent = ({ classes, newEntryModalHandler, entryToEdit, + newEntryDefaultAddress, editEntryModalHandler, }: Props) => { const onFormSubmitted = (values) => { @@ -98,7 +100,7 @@ const CreateEditEntryModalComponent = ({ text="Owner address*" className={classes.addressInput} testId={CREATE_ENTRY_INPUT_ADDRESS_ID} - defaultValue={entryToEdit ? entryToEdit.entry.address : undefined} + defaultValue={entryToEdit ? entryToEdit.entry.address : newEntryDefaultAddress} /> diff --git a/src/routes/safe/components/AddressBook/EllipsisTransactionDetails/copy.svg b/src/routes/safe/components/AddressBook/EllipsisTransactionDetails/copy.svg new file mode 100644 index 00000000..51341f1a --- /dev/null +++ b/src/routes/safe/components/AddressBook/EllipsisTransactionDetails/copy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/routes/safe/components/AddressBook/EllipsisTransactionDetails/index.jsx b/src/routes/safe/components/AddressBook/EllipsisTransactionDetails/index.jsx new file mode 100644 index 00000000..a1393ab3 --- /dev/null +++ b/src/routes/safe/components/AddressBook/EllipsisTransactionDetails/index.jsx @@ -0,0 +1,77 @@ +// @flow +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { makeStyles } from '@material-ui/core/styles' +import MoreHorizIcon from '@material-ui/icons/MoreHoriz' +import Menu from '@material-ui/core/Menu' +import MenuItem from '@material-ui/core/MenuItem' +import ClickAwayListener from '@material-ui/core/ClickAwayListener' +import { Divider } from '@material-ui/core' +import { push } from 'connected-react-router' +import { xs } from '~/theme/variables' +import { safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors' +import { SAFELIST_ADDRESS } from '~/routes/routes' + + +const useStyles = makeStyles({ + container: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + cursor: 'pointer', + margin: `0 ${xs}`, + borderRadius: '50%', + transition: 'background-color .2s ease-in-out', + '&:hover': { + backgroundColor: '#F0EFEE', + }, + }, + increasedPopperZindex: { + zIndex: 2001, + }, +}) + +type EllipsisTransactionDetailsProps = { + knownAddress: boolean, + address: string, +} + +const EllipsisTransactionDetails = ({ knownAddress, address }: EllipsisTransactionDetailsProps) => { + const classes = useStyles() + const [anchorEl, setAnchorEl] = React.useState(null) + + const dispatch = useDispatch() + const currentSafeAddress = useSelector(safeParamAddressFromStateSelector) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const closeMenuHandler = () => setAnchorEl(null) + + const addOrEditEntryHandler = () => { + dispatch(push(`${SAFELIST_ADDRESS}/${currentSafeAddress}/address-book?entryAddress=${address}`)) + closeMenuHandler() + } + + return ( + +
+ + + Send Again + + { knownAddress ? Edit Address book Entry : Add to address book} + +
+ + ) +} + +export default EllipsisTransactionDetails diff --git a/src/routes/safe/components/AddressBook/index.jsx b/src/routes/safe/components/AddressBook/index.jsx index 5f00bc0b..b3f4ec17 100644 --- a/src/routes/safe/components/AddressBook/index.jsx +++ b/src/routes/safe/components/AddressBook/index.jsx @@ -1,5 +1,5 @@ // @flow -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import cn from 'classnames' import { List } from 'immutable' @@ -40,7 +40,7 @@ import { updateAddressBookEntry } from '~/logic/addressBook/store/actions/update import { removeAddressBookEntry } from '~/logic/addressBook/store/actions/removeAddressBookEntry' import { addAddressBookEntry } from '~/logic/addressBook/store/actions/addAddressBookEntry' import SendModal from '~/routes/safe/components/Balances/SendModal' -import { safeSelector, safesListSelector } from '~/routes/safe/store/selectors' +import { safeSelector, safesListSelector, addressBookQueryParamsSelector } from '~/routes/safe/store/selectors' import { extendedSafeTokensSelector } from '~/routes/safe/container/selector' import { isUserOwnerOnAnySafe } from '~/logic/wallets/ethAddresses' @@ -59,6 +59,31 @@ const AddressBookTable = ({ classes }: Props) => { ) const [deleteEntryModalOpen, setDeleteEntryModalOpen] = useState(false) const [sendFundsModalOpen, setSendFundsModalOpen] = useState(false) + const [defaultNewEntryAddress, setDefaultNewEntryAddress] = useState(null) + const entryAddressToEditOrCreateNew = useSelector(addressBookQueryParamsSelector) + + + useEffect(() => { + if (entryAddressToEditOrCreateNew) { + setEditCreateEntryModalOpen(true) + } + }, []) + + useEffect(() => { + if (entryAddressToEditOrCreateNew) { + const key = addressBook.findKey((entry) => entry.address === entryAddressToEditOrCreateNew) + if (key >= 0) { + // Edit old entry + const value = addressBook.get(key) + setSelectedEntry({ entry: value, index: key }) + } else { + // Create new entry + setDefaultNewEntryAddress(entryAddressToEditOrCreateNew) + setSelectedEntry(null) + } + } + }, + [addressBook]) const safe = useSelector(safeSelector) const safesList = useSelector(safesListSelector) @@ -68,6 +93,7 @@ const AddressBookTable = ({ classes }: Props) => { const newEntryModalHandler = (entry: AddressBookEntry) => { setEditCreateEntryModalOpen(false) dispatch(addAddressBookEntry(entry)) + setDefaultNewEntryAddress(null) } const editEntryModalHandler = (entry: AddressBookEntry) => { @@ -198,6 +224,7 @@ const AddressBookTable = ({ classes }: Props) => { newEntryModalHandler={newEntryModalHandler} editEntryModalHandler={editEntryModalHandler} entryToEdit={selectedEntry} + newEntryDefaultAddress={defaultNewEntryAddress} /> setDeleteEntryModalOpen(false)} diff --git a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx index 421c774f..b5c726aa 100644 --- a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx @@ -8,16 +8,21 @@ import EtherScanLink from '~/components/EtherscanLink' type Props = { address: string, showLinks?: boolean, + knownAddress?: boolean, + userName?: boolean, } const OwnerAddressTableCell = (props: Props) => { - const { address, showLinks } = props + const { + address, userName, showLinks, knownAddress, + } = props return ( { showLinks ? (
- + { userName } +
) : {address} } diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/IncomingTxDescription/index.jsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/IncomingTxDescription/index.jsx index 1fa0d4b3..200ec939 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/IncomingTxDescription/index.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/IncomingTxDescription/index.jsx @@ -7,12 +7,17 @@ import EtherscanLink from '~/components/EtherscanLink' import Block from '~/components/layout/Block' import { md, lg } from '~/theme/variables' import { getIncomingTxAmount } from '~/routes/safe/components/Transactions/TxsTable/columns' +import OwnerAddressTableCell from '~/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell' +import { getNameFromAddressBook } from '~/logic/addressBook/store/selectors' + export const TRANSACTIONS_DESC_INCOMING_TEST_ID = 'tx-description-incoming' const useStyles = makeStyles({ txDataContainer: { - padding: `${lg} ${md}`, + paddingTop: lg, + paddingLeft: md, + paddingBottom: md, borderRight: '2px solid rgb(232, 231, 230)', }, }) @@ -24,9 +29,10 @@ type Props = { type TransferDescProps = { value: string, from: string, + txFromName?: string, } -const TransferDescription = ({ value = '', from }: TransferDescProps) => ( +const TransferDescription = ({ value = '', from, txFromName }: TransferDescProps) => ( Received @@ -36,16 +42,18 @@ const TransferDescription = ({ value = '', from }: TransferDescProps) => ( from:
- + {txFromName ? + : } ) + const IncomingTxDescription = ({ tx }: Props) => { const classes = useStyles() - + const txFromName = getNameFromAddressBook(tx.from) return ( - + ) } diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.jsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.jsx index 669622aa..9dd0b2de 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/OwnerComponent.jsx @@ -12,6 +12,8 @@ import { styles } from './style' import ConfirmSmallGreyIcon from './assets/confirm-small-grey.svg' import ConfirmSmallGreenIcon from './assets/confirm-small-green.svg' import ConfirmSmallFilledIcon from './assets/confirm-small-filled.svg' +import { getNameFromAddressBook } from '~/logic/addressBook/store/selectors' + export const CONFIRM_TX_BTN_TEST_ID = 'confirm-btn' export const EXECUTE_TX_BTN_TEST_ID = 'execute-btn' @@ -40,65 +42,69 @@ const OwnerComponent = ({ executor, confirmed, thresholdReached, -}: OwnerProps) => ( - -
-
- {confirmed ? ( - - ) : thresholdReached || executor ? ( - - ) : ( - - )} -
- - - - {owner.name} - - { + const nameInAdbk = getNameFromAddressBook(owner.address) + const ownerName = owner.name === 'UNKNOWN' && nameInAdbk ? nameInAdbk : owner.name + return ( + +
+
+ {confirmed ? ( + + ) : thresholdReached || executor ? ( + + ) : ( + + )} +
+ + + + {ownerName} + + + + + {showConfirmBtn && owner.address === userAddress && ( + + )} + {showExecuteBtn && owner.address === userAddress && ( + + )} + {owner.address === executor && ( + Executor + )} - - {showConfirmBtn && owner.address === userAddress && ( - - )} - {showExecuteBtn && owner.address === userAddress && ( - - )} - {owner.address === executor && ( - Executor - )} - -) + ) +} export default withStyles(styles)(OwnerComponent) diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx index e8989bb4..506e3475 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx @@ -11,6 +11,9 @@ import { md, lg } from '~/theme/variables' import { getTxData } from './utils' import { shortVersionOf } from '~/logic/wallets/ethAddresses' import LinkWithRef from '~/components/layout/Link' +import OwnerAddressTableCell from '~/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell' +import { getNameFromAddressBook } from '~/logic/addressBook/store/selectors' + export const TRANSACTIONS_DESC_ADD_OWNER_TEST_ID = 'tx-description-add-owner' export const TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID = 'tx-description-remove-owner' @@ -21,7 +24,9 @@ export const TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID = 'tx-description-custom-data export const styles = () => ({ txDataContainer: { - padding: `${lg} ${md}`, + paddingTop: lg, + paddingLeft: md, + paddingBottom: md, }, txData: { wordBreak: 'break-all', @@ -58,48 +63,62 @@ type CustomDescProps = { classes: Object, } -const TransferDescription = ({ amount = '', recipient }: TransferDescProps) => ( - - - Send - {' '} - {amount} - {' '} - to: - - - -) +const TransferDescription = ({ amount = '', recipient }: TransferDescProps) => { + const recipientName = getNameFromAddressBook(recipient) + return ( + + + Send + {' '} + {amount} + {' '} + to: + + {recipientName ? + : } + + ) +} -const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: DescriptionDescProps) => ( - <> - {removedOwner && ( - - Remove owner: - - - )} - {addedOwner && ( - - Add owner: - - - )} - {newThreshold && ( - - Change required confirmations: - - {newThreshold} - - - )} - -) +const SettingsDescription = ({ + removedOwner, addedOwner, newThreshold, +}: DescriptionDescProps) => { + const ownerChangedName = removedOwner ? getNameFromAddressBook(removedOwner) : getNameFromAddressBook(addedOwner) + return ( + <> + {removedOwner && ( + + Remove owner: + {ownerChangedName + ? + : } + + )} + {addedOwner && ( + + Add owner: + {ownerChangedName + ? + : } + + )} + {newThreshold && ( + + Change required confirmations: + + {newThreshold} + + + )} + + ) +} const CustomDescription = ({ data, amount = 0, recipient, classes, }: CustomDescProps) => { const [showTxData, setShowTxData] = useState(false) + const recipientName = getNameFromAddressBook(recipient) return ( <> @@ -110,7 +129,7 @@ const CustomDescription = ({ {' '} to: - + { recipientName ? : } Data (hex encoded): diff --git a/src/routes/safe/store/selectors/index.js b/src/routes/safe/store/selectors/index.js index 7b4007a8..29be404d 100644 --- a/src/routes/safe/store/selectors/index.js +++ b/src/routes/safe/store/selectors/index.js @@ -70,6 +70,16 @@ export const safeTransactionsSelector: Selector { + const { location } = state.router + let entryAddressToEditOrCreateNew = null + if (location && location.query) { + const { entryAddress } = location.query + entryAddressToEditOrCreateNew = entryAddress + } + return entryAddressToEditOrCreateNew +} + export const safeParamAddressFromStateSelector = (state: GlobalState): string => { const match = matchPath( state.router.location.pathname,