Merge branch 'development' into feature/address-book-suggestions

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: {

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: 560px;
-  min-height: 525px;
   .background {
     box-shadow: 1px 2px 10px 0 rgba(212, 212, 211, 0.59);
     background-color: white;

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;
 }

src/logic/wallets/transactionDataCheck.ts

@@ -1,18 +1,19 @@
-function transactionDataCheck(): any {
+import { loadFromStorage, saveToStorage } from 'src/utils/storage'
-  let completed = false
+import { WALLET_PROVIDER } from 'src/logic/wallets/getWeb3'
-  return (stateAndHelpers) => {
-    const { wallet } = stateAndHelpers
 
-    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<boolean>(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: () => {
+          onclick: async () => await saveToStorage(USER_ENABLED_LEDGER_TX_DATA, true),
-            completed = true
-          },
         },
         icon: `
                   <svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>

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
 }

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 }) {
           </Centered>
         </Card>
       )}
-      <Centered>
+      <CenteredMT>
         <IconText
           color="secondary"
           iconSize="sm"
@@ -417,7 +421,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
           text="These are third-party apps, which means they are not owned, controlled, maintained or audited by Gnosis. Interacting with the apps is at your own risk."
           textSize="sm"
         />
-      </Centered>
+      </CenteredMT>
     </>
   )
 }

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 (
     <Block justify="left">
       <Identicon address={address} diameter={32} />
       {showLinks ? (
         <div style={{ marginLeft: 10, flexShrink: 1, minWidth: 0 }}>
           {userName}
-          <EtherScanLink knownAddress={knownAddress} type="address" value={address} />
+          <EtherScanLink knownAddress={knownAddress} type="address" value={address} cut={cut} />
         </div>
       ) : (
         <Paragraph style={{ marginLeft: 10 }}>{address}</Paragraph>

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
+}

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)

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)

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"