Release v2.18.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {
@@ -67,7 +67,7 @@
   },
   "productName": "Safe Multisig",
   "build": {
-    "appId": "io.gnosis.safe.macos",
+    "appId": "io.gnosis.safe",
     "afterSign": "scripts/notarize.js",
     "extends": null,
     "productName": "Safe Multisig",
@@ -95,19 +95,10 @@
       ]
     },
     "files": [
-      "**/*",
-      "!src${/*}",
-      "!config${/*}",
-      "!contracts${/*}",
-      "!migrations${/*}",
-      "!flow-typed${/*}",
-      "!apps${/*}",
-      "!out${/*}",
-      "!.editorconfig",
-      "!.gitignore",
-      "!README.md",
-      "!yarn-error.log",
-      "!yarn.lock"
+      "build/",
+      "public",
+      "scripts",
+      "package.json"
     ],
     "directories": {
       "buildResources": "public/build"
@@ -134,12 +125,12 @@
       "deleteAppDataOnUninstall": true
     },
     "linux": {
+      "category": "Finance",
       "target": [
         "AppImage",
         "deb",
         "zip"
-      ],
-      "icon": "./public/build/safe.png"
+      ]
     },
     "win": {
       "target": [
@@ -165,21 +156,21 @@
     ]
   },
   "dependencies": {
-    "@gnosis.pm/safe-apps-sdk": "1.0.0-beta.4",
+    "@gnosis.pm/safe-apps-sdk": "1.0.2",
     "@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#bf3a84486b7353bd25447ddff39c406f6fafecc6",
     "@gnosis.pm/util-contracts": "2.0.6",
-    "@ledgerhq/hw-transport-node-hid-singleton": "5.34.0",
+    "@ledgerhq/hw-transport-node-hid-singleton": "5.36.0",
     "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "4.9.1",
+    "@material-ui/icons": "^4.11.0",
     "@material-ui/lab": "4.0.0-alpha.56",
     "@openzeppelin/contracts": "3.1.0",
     "@sentry/react": "^5.28.0",
     "@sentry/tracing": "^5.28.0",
-    "@truffle/contract": "4.2.30",
+    "@truffle/contract": "^4.3.0",
     "async-sema": "^3.1.0",
-    "axios": "0.21.0",
+    "axios": "0.21.1",
     "bignumber.js": "9.0.1",
     "bnc-onboard": "^1.16.1",
     "classnames": "^2.2.6",
@@ -190,7 +181,7 @@
     "date-fns": "2.16.1",
     "detect-port": "^1.3.0",
     "electron-is-dev": "^1.2.0",
-    "electron-log": "4.3.0",
+    "electron-log": "^4.3.0",
     "electron-settings": "^4.0.2",
     "electron-updater": "4.3.5",
     "eth-sig-util": "^2.5.3",
@@ -208,9 +199,10 @@
     "lodash.memoize": "^4.1.2",
     "material-ui-search-bar": "^1.0.0",
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
-    "qrcode.react": "1.0.0",
-    "query-string": "6.13.7",
+    "qrcode.react": "1.0.1",
+    "query-string": "6.13.8",
     "react": "16.13.1",
+    "react-device-detect": "^1.15.0",
     "react-dom": "16.13.1",
     "react-final-form": "^6.5.2",
     "react-final-form-listeners": "^1.0.2",
@@ -225,7 +217,7 @@
     "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "semver": "7.3.2",
+    "semver": "^7.3.2",
     "styled-components": "^5.2.1",
     "web3": "1.2.11",
     "web3-core": "^1.2.11",
@@ -240,8 +232,8 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "5.11.6",
-    "@testing-library/react": "11.2.2",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
     "@typechain/web3-v1": "^2.0.0",
     "@types/history": "4.6.2",
     "@types/jest": "^26.0.16",
@@ -254,29 +246,27 @@
     "@types/styled-components": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
-    "autoprefixer": "9.8.6",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "dotenv-expand": "^5.1.0",
     "electron": "^9.3.5",
     "electron-builder": "22.9.1",
     "electron-notarize": "1.0.0",
     "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.14.0",
+    "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-sort-destructure-keys": "^1.3.5",
-    "ethereumjs-abi": "0.6.8",
     "husky": "^4.3.0",
     "lint-staged": "^10.5.2",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.0",
     "sass": "^1.29.0",
     "typechain": "^4.0.0",
-    "typescript": "4.0.5",
-    "wait-on": "5.2.0"
+    "typescript": "4.1.3",
+    "wait-on": "5.2.1"
   }
 }

public/electron.js

@@ -92,7 +92,7 @@ function createWindow(port = DEFAULT_PORT) {
       allowRunningInsecureContent: true,
       nativeWindowOpen: true, // need to be set in order to display modal
     },
-    icon: electron.nativeImage.createFromPath(path.join(__dirname, './build/safe.png')),
+    icon: electron.nativeImage.createFromPath(path.join(__dirname, '/public/build/safe.png')),
   })
 
   mainWindow.once('ready-to-show', () => {

src/components/App/index.tsx

@@ -11,7 +11,7 @@ import ErrorIcon from 'src/assets/icons/error.svg'
 import InfoIcon from 'src/assets/icons/info.svg'
 
 import AppLayout from 'src/components/AppLayout'
-import SafeListSidebarProvider, { SafeListSidebarContext } from 'src/components/SafeListSidebar'
+import { SafeListSidebar, SafeListSidebarContext } from 'src/components/SafeListSidebar'
 import CookiesBanner from 'src/components/CookiesBanner'
 import Notifier from 'src/components/Notifier'
 import Backdrop from 'src/components/layout/Backdrop'
@@ -159,9 +159,9 @@ const App: React.FC = ({ children }) => {
 }
 
 const WrapperAppWithSidebar: React.FC = ({ children }) => (
-  <SafeListSidebarProvider>
+  <SafeListSidebar>
     <App>{children}</App>
-  </SafeListSidebarProvider>
+  </SafeListSidebar>
 )
 
 export default WrapperAppWithSidebar

src/components/AppLayout/MobileNotSupported/index.tsx

@@ -0,0 +1,134 @@
+import { Button, Text, Card, Icon } from '@gnosis.pm/safe-react-components'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import styled from 'styled-components'
+import React, { ReactElement } from 'react'
+import { MobileView } from 'react-device-detect'
+
+import Phone from 'src/components/AppLayout/MobileStart/assets/phone@2x.png'
+
+const Overlay = styled.div`
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: ${({ theme }) => fade(theme.colors.overlay.color, 0.75)};
+  z-index: 2147483009; /* on top of Intercom Button */
+`
+
+const ModalApp = styled.div`
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  bottom: 0;
+  width: 100vw;
+  height: 260px;
+  background-color: ${({ theme }) => theme.colors.background};
+  box-shadow: 1px 2px 10px rgba(40, 54, 61, 0.18);
+  z-index: 2147483004; /* on top of Intercom Button */
+  padding: 20px 16px 0 16px;
+`
+
+const StyledCard = styled(Card)`
+  background-color: #fdfdfd;
+  /*   width: 45vw; */
+  min-width: 245px;
+  height: 220px;
+  padding: 24px 58px 24px 24px;
+  box-sizing: border-box;
+  box-shadow: none;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+
+  @media (max-width: 340px) {
+    padding: 16px;
+    min-width: 215px;
+  }
+`
+const StyledImg = styled.img`
+  margin: 24px -81px 0 -58px;
+  z-index: 1;
+  width: 45%;
+  height: auto;
+  object-fit: cover;
+
+  @media (max-width: 340px) {
+    display: none;
+  }
+
+  @media (min-width: 430px) {
+    width: 30%;
+  }
+
+  @media (min-width: 720px) {
+    width: 25%;
+  }
+
+  @media (min-width: 800px) {
+    width: 20%;
+  }
+`
+
+const StyledCloseIcon = styled(Icon)`
+  margin: 0 34px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.separator};
+    border-radius: 16px;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  @media (max-width: 340px) {
+    margin: 8px 34px 0 16px;
+  }
+`
+const StyledButton = styled(Button)`
+  background-color: transparent;
+  min-width: 0;
+
+  :hover {
+    background-color: transparent;
+  }
+`
+
+const StyledLink = styled.a`
+  text-decoration: none;
+`
+
+type Props = {
+  onClose: () => void
+}
+
+export const MobileNotSupported = ({ onClose }: Props): ReactElement => {
+  return (
+    <MobileView>
+      <Overlay>
+        <ModalApp>
+          <StyledCard>
+            <Text size="lg">The Safe Multisig web app is not optimized for mobile.</Text>
+            <Text size="lg">Get the mobile app for a better experience.</Text>
+            <Button size="md" color="primary" variant="contained">
+              <StyledLink target="_blank" href="https://gnosis-safe.io/#mobile" rel="noopener noreferrer">
+                <Text color="white" size="xl">
+                  Get the App
+                </Text>
+              </StyledLink>
+            </Button>
+          </StyledCard>
+
+          <StyledImg src={Phone} alt="Phone" />
+          <StyledButton size="md" variant="outlined" color="primary" onClick={onClose}>
+            <StyledCloseIcon size="md" type="cross" />
+          </StyledButton>
+        </ModalApp>
+      </Overlay>
+    </MobileView>
+  )
+}

src/components/AppLayout/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { ListItemType } from 'src/components/List'
 
 import Header from './Header'
 import Footer from './Footer'
 import Sidebar from './Sidebar'
+import { MobileNotSupported } from './MobileNotSupported'
 
 const Container = styled.div`
   height: 100vh;
@@ -85,30 +86,38 @@ const Layout: React.FC<Props> = ({
   onNewTransactionClick,
   children,
   sidebarItems,
-}): React.ReactElement => (
-  <Container>
-    <HeaderWrapper>
-      <Header />
-    </HeaderWrapper>
-    <BodyWrapper>
-      <SidebarWrapper>
-        <Sidebar
-          items={sidebarItems}
-          safeAddress={safeAddress}
-          safeName={safeName}
-          balance={balance}
-          granted={granted}
-          onToggleSafeList={onToggleSafeList}
-          onReceiveClick={onReceiveClick}
-          onNewTransactionClick={onNewTransactionClick}
-        />
-      </SidebarWrapper>
-      <ContentWrapper>
-        <div>{children}</div>
-        <Footer />
-      </ContentWrapper>
-    </BodyWrapper>
-  </Container>
-)
+}): React.ReactElement => {
+  const [mobileNotSupportedClosed, setMobileNotSupportedClosed] = useState(false)
+
+  const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
+
+  return (
+    <Container>
+      <HeaderWrapper>
+        <Header />
+      </HeaderWrapper>
+      <BodyWrapper>
+        <SidebarWrapper>
+          <Sidebar
+            items={sidebarItems}
+            safeAddress={safeAddress}
+            safeName={safeName}
+            balance={balance}
+            granted={granted}
+            onToggleSafeList={onToggleSafeList}
+            onReceiveClick={onReceiveClick}
+            onNewTransactionClick={onNewTransactionClick}
+          />
+        </SidebarWrapper>
+        <ContentWrapper>
+          <div>{children}</div>
+          <Footer />
+        </ContentWrapper>
+      </BodyWrapper>
+
+      {!mobileNotSupportedClosed && <MobileNotSupported onClose={closeMobileNotSupported} />}
+    </Container>
+  )
+}
 
 export default Layout