Merge branch 'development' into feature/#934-advanced-settings

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

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<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: () => {
-            completed = true
-          },
+          onclick: async () => await saveToStorage(USER_ENABLED_LEDGER_TX_DATA, 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/store/actions/createTransaction.ts

@@ -132,6 +132,7 @@ const createTransaction = ({
 
   const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, origin)
   const beforeExecutionKey = showSnackbar(notificationsQueue.beforeExecution, enqueueSnackbar, closeSnackbar)
+
   let pendingExecutionKey
 
   let txHash
@@ -266,6 +267,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)
 
@@ -273,7 +278,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)