From 0e3436bf6707f5ff632fc28e9e413564d22494c7 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Fri, 3 Jul 2020 06:59:36 -0300 Subject: [PATCH 1/3] Prevent showing enable data modal (#1086) * Prevent from showing enable modal * Add message info for failing txs * c'mon Travis! Stop complaining. * PR feedback improvements Co-authored-by: Mati Dastugue Co-authored-by: Mikhail Mikheev --- src/logic/wallets/transactionDataCheck.ts | 17 +++++++++-------- src/routes/open/container/Open.tsx | 4 +++- .../safe/store/actions/createTransaction.ts | 7 ++++++- .../safe/store/actions/processTransaction.ts | 5 ++++- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/logic/wallets/transactionDataCheck.ts b/src/logic/wallets/transactionDataCheck.ts index 5c7a7b05..4ca7235e 100644 --- a/src/logic/wallets/transactionDataCheck.ts +++ b/src/logic/wallets/transactionDataCheck.ts @@ -1,18 +1,19 @@ -function transactionDataCheck(): any { - let completed = false - return (stateAndHelpers) => { - const { wallet } = stateAndHelpers +import { loadFromStorage, saveToStorage } from 'src/utils/storage' +import { WALLET_PROVIDER } from 'src/logic/wallets/getWeb3' - if (wallet && wallet.name === 'Ledger' && !completed) { +const USER_ENABLED_LEDGER_TX_DATA = 'USER_ENABLED_LEDGER_TX_DATA' +function transactionDataCheck(): any { + return async (stateAndHelpers) => { + const { wallet } = stateAndHelpers + const isTransactionDataEnabled = await loadFromStorage(USER_ENABLED_LEDGER_TX_DATA) + if (wallet && wallet.name === WALLET_PROVIDER.LEDGER && !isTransactionDataEnabled) { return { heading: 'Allow Transaction Data', // edit modal heading here description: 'Please allow transaction data on your Ledger device.', // edit modal description that is displayed here. You can include html strings here and they will be rendered as html elements. eventCode: 'allowTransactionData', button: { text: 'Done', - onclick: () => { - completed = true - }, + onclick: async () => await saveToStorage(USER_ENABLED_LEDGER_TX_DATA, true), }, icon: ` diff --git a/src/routes/open/container/Open.tsx b/src/routes/open/container/Open.tsx index f489fbe3..45c5e714 100644 --- a/src/routes/open/container/Open.tsx +++ b/src/routes/open/container/Open.tsx @@ -69,12 +69,14 @@ export const createSafe = (values, userAccount) => { }) .then(async (receipt) => { await checkReceiptStatus(receipt.transactionHash) - const safeAddress = receipt.events.ProxyCreation.returnValues.proxy const safeProps = await getSafeProps(safeAddress, name, ownersNames, ownerAddresses) // returning info for testing purposes, in app is fully async return { safeAddress: safeProps.address, safeTx: receipt } }) + .catch((error) => { + console.error(error) + }) return promiEvent } diff --git a/src/routes/safe/store/actions/createTransaction.ts b/src/routes/safe/store/actions/createTransaction.ts index a6cb1b57..2dbfd554 100644 --- a/src/routes/safe/store/actions/createTransaction.ts +++ b/src/routes/safe/store/actions/createTransaction.ts @@ -117,6 +117,7 @@ const createTransaction = ({ const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, origin) const beforeExecutionKey = showSnackbar(notificationsQueue.beforeExecution, enqueueSnackbar, closeSnackbar) + let pendingExecutionKey let txHash @@ -246,6 +247,10 @@ const createTransaction = ({ return receipt.transactionHash }) } catch (err) { + const errorMsg = err.message + ? `${notificationsQueue.afterExecutionError.message} - ${err.message}` + : notificationsQueue.afterExecutionError.message + console.error(err) closeSnackbar(beforeExecutionKey) @@ -253,7 +258,7 @@ const createTransaction = ({ closeSnackbar(pendingExecutionKey) } - showSnackbar(notificationsQueue.afterExecutionError, enqueueSnackbar, closeSnackbar) + showSnackbar(errorMsg, enqueueSnackbar, closeSnackbar) const executeDataUsedSignatures = safeInstance.contract.methods .execTransaction(to, valueInWei, txData, operation, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, sigs) diff --git a/src/routes/safe/store/actions/processTransaction.ts b/src/routes/safe/store/actions/processTransaction.ts index a1bc4f47..f591b02d 100644 --- a/src/routes/safe/store/actions/processTransaction.ts +++ b/src/routes/safe/store/actions/processTransaction.ts @@ -199,6 +199,9 @@ const processTransaction = ({ return receipt.transactionHash }) } catch (err) { + const errorMsg = err.message + ? `${notificationsQueue.afterExecutionError.message} - ${err.message}` + : notificationsQueue.afterExecutionError.message console.error(err) if (txHash !== undefined) { @@ -208,7 +211,7 @@ const processTransaction = ({ closeSnackbar(pendingExecutionKey) } - showSnackbar(notificationsQueue.afterExecutionError, enqueueSnackbar, closeSnackbar) + showSnackbar(errorMsg, enqueueSnackbar, closeSnackbar) const executeData = safeInstance.contract.methods.approveHash(txHash).encodeABI() const errMsg = await getErrorMessage(safeInstance.address, 0, executeData, from) From 822903c83d3bee658420f56352dc7807e6eb4708 Mon Sep 17 00:00:00 2001 From: nicolas Date: Fri, 3 Jul 2020 07:12:49 -0300 Subject: [PATCH 2/3] sapp iframe size (#1081) * sapp iframe size * review changes * CenteredMT * remove className Co-authored-by: Mikhail Mikheev --- src/components/Footer/index.tsx | 2 +- src/components/ListContentLayout/Layout.ts | 3 +-- src/routes/safe/components/Apps/index.tsx | 10 +++++++--- yarn.lock | 1 - 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 0107aab3..3f63cb8a 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles({ justifyContent: 'center', margin: '0 auto', maxWidth: '100%', - padding: `40px ${sm} 20px`, + padding: `20px ${sm} 20px`, width: `${screenSm}px`, }, item: { diff --git a/src/components/ListContentLayout/Layout.ts b/src/components/ListContentLayout/Layout.ts index 09b4cad9..feb7d423 100644 --- a/src/components/ListContentLayout/Layout.ts +++ b/src/components/ListContentLayout/Layout.ts @@ -3,8 +3,7 @@ import styled from 'styled-components' export const Wrapper = styled.div` display: grid; grid-template-columns: 245px auto; - grid-template-rows: 514px; - min-height: 525px; + min-height: 560px; .background { box-shadow: 1px 2px 10px 0 rgba(212, 212, 211, 0.59); background-color: white; diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx index 949e37f2..2606f6f9 100644 --- a/src/routes/safe/components/Apps/index.tsx +++ b/src/routes/safe/components/Apps/index.tsx @@ -27,7 +27,7 @@ const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY' const APPS_LEGAL_DISCLAIMER_STORAGE_KEY = 'APPS_LEGAL_DISCLAIMER_STORAGE_KEY' const StyledIframe = styled.iframe` - padding: 24px; + padding: 15px; box-sizing: border-box; width: 100%; height: 100%; @@ -39,6 +39,10 @@ const Centered = styled.div` flex-direction: column; ` +const CenteredMT = styled(Centered)` + margin-top: 5px; +` + const IframeWrapper = styled.div` position: relative; height: 100%; @@ -409,7 +413,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) { )} - + - + ) } diff --git a/yarn.lock b/yarn.lock index 29b7fcc0..b22e17a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18395,7 +18395,6 @@ websocket@^1.0.31: dependencies: debug "^2.2.0" es5-ext "^0.10.50" - gulp "^4.0.2" nan "^2.14.0" typedarray-to-buffer "^3.1.5" yaeti "^0.0.6" From 36e78e00b4a7a1bcf619bd11980120ab881b8bb0 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Fri, 3 Jul 2020 09:23:30 -0300 Subject: [PATCH 3/3] (Fix) - Settings ui break (#1073) * Adds useWindowDimensions hook Uses useWindowDimensions hook to render the address on ownerAddressTable depending of the size of the screen * Fix table width for medium sizes * Reduces padding for medium screen sizes Also simplifies js logic for adding cut addresses * Adjust the padding for larger screens * Adjust the padding for larger screens Co-authored-by: Mikhail Mikheev --- src/components/layout/Page/index.module.scss | 9 ++++++- .../OwnerAddressTableCell/index.tsx | 17 ++++++++++++- .../container/hooks/useWindowDimensions.tsx | 24 +++++++++++++++++++ 3 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 src/routes/safe/container/hooks/useWindowDimensions.tsx diff --git a/src/components/layout/Page/index.module.scss b/src/components/layout/Page/index.module.scss index 2e3e196f..26c03497 100644 --- a/src/components/layout/Page/index.module.scss +++ b/src/components/layout/Page/index.module.scss @@ -9,10 +9,17 @@ @media only screen and (max-width: #{$screenLg}px) { .page { - padding: 72px $lg 0px $lg; + padding: 72px $lg 0 $lg; } } +@media only screen and (min-width: #{$screenLg}px) and (max-width: 1360px) { + .page { + padding: 96px 120px 0 120px; + } +} + + .center { align-self: center; } diff --git a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx index 961feb5f..671d4cea 100644 --- a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx @@ -4,16 +4,31 @@ import EtherScanLink from 'src/components/EtherscanLink' import Identicon from 'src/components/Identicon' import Block from 'src/components/layout/Block' import Paragraph from 'src/components/layout/Paragraph' +import { useWindowDimensions } from '../../../../container/hooks/useWindowDimensions' +import { useEffect, useState } from 'react' const OwnerAddressTableCell = (props) => { const { address, knownAddress, showLinks, userName } = props + const [cut, setCut] = useState(undefined) + const { width } = useWindowDimensions() + + useEffect(() => { + if (width <= 900) { + setCut(6) + } else if (width <= 1024) { + setCut(12) + } else { + setCut(undefined) + } + }, [width]) + return ( {showLinks ? (
{userName} - +
) : ( {address} diff --git a/src/routes/safe/container/hooks/useWindowDimensions.tsx b/src/routes/safe/container/hooks/useWindowDimensions.tsx new file mode 100644 index 00000000..3a5cd9cf --- /dev/null +++ b/src/routes/safe/container/hooks/useWindowDimensions.tsx @@ -0,0 +1,24 @@ +import { useState, useEffect } from 'react' + +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window + return { + width, + height, + } +} + +export const useWindowDimensions = (): { width: number; height: number } => { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()) + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()) + } + + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) + + return windowDimensions +}