Line break to modal text

package.json

@@ -161,7 +161,7 @@
     "@gnosis.pm/safe-apps-sdk": "1.0.3",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#8dea3a6",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#fb1a523",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.41.0",
     "@material-ui/core": "^4.11.0",

src/components/AppLayout/Sidebar/SafeHeader/index.tsx

@@ -44,7 +44,9 @@ const IconContainer = styled.div`
   justify-content: space-evenly;
 `
 const StyledButton = styled(Button)`
-  padding: 0 18px;
+  &&.MuiButton-root {
+    padding: 0 16px;
+  }
   *:first-child {
     margin: 0 4px 0 0;
   }

src/logic/safe/store/actions/createTransaction.ts

@@ -80,11 +80,7 @@ export const createTransaction = (
   const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
   const lastTx = await getLastTx(safeAddress)
   const nextNonce = await getNewTxNonce(lastTx, safeInstance)
-
+  const nonce = txNonce !== undefined ? txNonce.toString() : nextNonce
-  let nonce = nextNonce
-  if (txNonce !== undefined) {
-    nonce = txNonce.toString()
-  }
 
   const isExecution = await shouldExecuteTransaction(safeInstance, nonce, lastTx)
   const safeVersion = await getCurrentSafeVersion(safeInstance)

src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx

@@ -1,5 +1,6 @@
 import InputAdornment from '@material-ui/core/InputAdornment'
 import MenuItem from '@material-ui/core/MenuItem'
+import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import CheckCircle from '@material-ui/icons/CheckCircle'
 import * as React from 'react'
@@ -159,6 +160,18 @@ const SafeOwnersForm = (props): React.ReactElement => {
           Add additional owners (e.g. wallets of your teammates) and specify how many of them have to confirm a
           transaction before it gets executed. You can also add/remove owners and change the signature threshold after
           your Safe is created.
+          <Link
+            href="https://help.gnosis-safe.io/en/articles/4772567-what-gnosis-safe-setup-should-i-use"
+            target="_blank"
+            className={classes.link}
+            rel="noreferrer"
+            title="Learn about which Safe setup to use"
+          >
+            <Text size="lg" as="span" color="primary">
+              Learn about which Safe setup to use
+            </Text>
+            <Icon size="sm" type="externalLink" color="primary" />
+          </Link>
         </Paragraph>
       </Block>
       <Hairline />

src/routes/open/components/SafeOwnersConfirmationsForm/style.ts

@@ -1,4 +1,4 @@
-import { disabled, extraSmallFontSize, lg, md, screenSm, sm } from 'src/theme/variables'
+import { disabled, extraSmallFontSize, lg, md, screenSm, sm, xs } from 'src/theme/variables'
 import { createStyles } from '@material-ui/core'
 
 export const styles = createStyles({
@@ -8,6 +8,16 @@ export const styles = createStyles({
   title: {
     padding: `${md} ${lg}`,
   },
+  link: {
+    paddingLeft: `${xs}`,
+    '& svg': {
+      position: 'relative',
+      top: '1px',
+      left: `${xs}`,
+      height: '14px',
+      width: '14px',
+    },
+  },
   owner: {
     flexDirection: 'column',
     marginTop: '12px',

src/routes/safe/components/Apps/components/AddAppForm/index.tsx

@@ -33,8 +33,11 @@ const AppInfo = styled.div`
 const AppDocsInfo = styled.div`
   display: flex;
   margin-bottom: 10px;
-  a {
+  flex-direction: column;
-    margin-left: 5px;
+  svg {
+    position: relative;
+    top: 5px;
+    left: 2px;
   }
 `
 
@@ -85,7 +88,7 @@ const AddApp = ({ appList, closeModal }: AddAppProps): ReactElement => {
               title="Learn more about building Safe Apps"
             >
               <Text size="xl" as="span" color="primary">
-                Learn more about building Safe Apps
+                Learn more about building Safe Apps.
               </Text>
               <Icon size="sm" type="externalLink" color="primary" />
             </Link>

src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx

@@ -1,8 +1,6 @@
-import { Dot, IconText as IconTextSrc, Text } from '@gnosis.pm/safe-react-components'
+import { Dot, IconText as IconTextSrc, Text, Tooltip } from '@gnosis.pm/safe-react-components'
 import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
-import { Tooltip } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
-import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { ReactElement, useContext, useRef } from 'react'
 import styled from 'styled-components'
 
@@ -86,21 +84,6 @@ const IconText = styled(IconTextSrc)`
   }
 `
 
-const useTooltipStyles = makeStyles(
-  createStyles(() => ({
-    arrow: {
-      color: 'white',
-    },
-    tooltip: {
-      backgroundColor: 'white',
-      color: 'rgba(0, 0, 0, 0.87)',
-      boxShadow: '#00000026 0 2px 4px 0',
-      fontSize: '14px',
-      lineHeight: '14px',
-    },
-  })),
-)
-
 const TooltipContent = styled.div`
   width: max-content;
 `
@@ -146,12 +129,11 @@ export const TxCollapsed = ({
 
   const txCollapsedInfo = <div className={'tx-info' + willBeReplaced}>{info && <TxInfo info={info} />}</div>
 
-  const tooltipStyles = useTooltipStyles()
   const timestamp = useRef<HTMLDivElement | null>(null)
 
   const txCollapsedTime = (
     <div className={'tx-time' + willBeReplaced}>
-      <Tooltip classes={tooltipStyles} title={formatDateTime(time)} arrow>
+      <Tooltip title={formatDateTime(time)} arrow backgroundColor="white" size="lg">
         <TooltipContent ref={timestamp}>
           <Text size="xl">{txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}</Text>
         </TooltipContent>

src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions.tsx

@@ -1,26 +1,11 @@
-import { Icon, theme } from '@gnosis.pm/safe-react-components'
+import { Icon, Tooltip } from '@gnosis.pm/safe-react-components'
-import { Tooltip as TooltipMui } from '@material-ui/core'
 import { default as MuiIconButton } from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 
 import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
 import { useActionButtonsHandlers } from './hooks/useActionButtonsHandlers'
 
-const Tooltip = withStyles(() => ({
-  popper: {
-    zIndex: 2001,
-  },
-  tooltip: {
-    marginBottom: '4px',
-    backgroundColor: theme.colors.overlay.color,
-    border: `1px solid ${theme.colors.icon}`,
-    boxShadow: `1px 2px 4px ${theme.colors.shadow.color}14`,
-    color: theme.colors.text,
-  },
-}))(TooltipMui)
-
 const IconButton = styled(MuiIconButton)`
   padding: 8px !important;
 
@@ -46,7 +31,6 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
 
   return (
     <>
-      {
       <Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
         <IconButton
           size="small"
@@ -59,7 +43,6 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
           <Icon type={transaction.txStatus === 'AWAITING_EXECUTION' ? 'rocket' : 'check'} color="primary" size="sm" />
         </IconButton>
       </Tooltip>
-      }
       {canCancel && (
         <Tooltip title="Cancel" placement="top">
           <IconButton size="small" type="button" onClick={handleCancelButtonClick} disabled={isPending}>

src/routes/safe/container/hooks/useTransactionParameters.ts

@@ -88,11 +88,10 @@ export const useTransactionParameters = (props?: Props): TxParameters => {
       }
     }
 
-    const safeNonce = Number(props?.initialSafeNonce || 0)
     if (safeNonce === undefined) {
       getSafeNonce()
     }
-  }, [safeAddress, props?.initialSafeNonce])
+  }, [safeAddress, safeNonce])
 
   return {
     safeNonce,

yarn.lock

@@ -1561,12 +1561,11 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#8dea3a6":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#fb1a523":
-  version "0.4.0"
+  version "0.5.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#8dea3a6abedba736b5504927892eac46a0603c6d"
+  resolved "https://github.com/gnosis/safe-react-components.git#fb1a523ece12aa54e7e6a1169c7cd13da5bf5b61"
   dependencies:
     classnames "^2.2.6"
-    polished "^3.6.7"
     react-media "^1.10.0"
 
 "@gnosis.pm/util-contracts@2.0.6":
@@ -15709,10 +15708,10 @@ pocket-js-core@0.0.3:
   dependencies:
     axios "^0.18.0"
 
-polished@^3.3.1, polished@^3.6.7:
+polished@^3.3.1:
-  version "3.7.1"
+  version "3.6.7"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.7.1.tgz#d1addc87ee16eb5b413c6165eda37600cccb9c11"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.6.7.tgz#44cbd0047f3187d83db0c479ef0c7d5583af5fb6"
-  integrity sha512-/QgHrNGYwIA4mwxJ/7FSvalUJsm7KNfnXiScVSEG2Xa5qxDeBn4nmdjN2pW00mkM2Tts64ktc47U8F7Ed1BRAA==
+  integrity sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==
   dependencies:
     "@babel/runtime" "^7.12.5"