Merge branch 'moonbase-stg' into dev

.dockerignore

@@ -4,3 +4,4 @@
 .DS_Store
 **/.idea
 **/dist
+*Dockerfile*

.env.example

@@ -1,4 +1,8 @@
+# Define environment
+REACT_APP_ENV=
+
 # For all environments
+REACT_APP_GATEWAY_URL=
 REACT_APP_GOOGLE_ANALYTICS=
 REACT_APP_INFURA_TOKEN=
 REACT_APP_IPFS_GATEWAY=https://ipfs.io/ipfs
@@ -21,5 +25,5 @@ REACT_APP_LATEST_SAFE_VERSION=
 REACT_APP_APP_VERSION=$npm_package_version
 
 # Contracts Addresses
-REACT_APP_SPENDING_LIMIT_MODULE_ADDRESS=0x9e9Bf12b5a66c0f0A7435835e0365477E121B110
+REACT_APP_SPENDING_LIMIT_MODULE_ADDRESS=
 

.github/ISSUE_TEMPLATE/bug-report.md

@@ -4,17 +4,15 @@ about: Create an issue to fix a bug
 ---
 
 <!--
-BEFORE SUBMITTING: Please search to make sure this issue has not been opened already
+BEFORE SUBMITTING: Please search to make sure this issue hasn't been reported already
 -->
 
 ## Description
 
 ## Environment
- - Browser:
+ - Browser: Chrome
  - Wallet: MetaMask
- - Safe:
- - Environment:
-   - production (rinkeby)
+ - Chain: Rinkeby
 
 ## Steps to reproduce
  1. Go to

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,17 +1,24 @@
 ---
 name: Feature request
 about: Create a feature request for the Gnosis Safe
-
 ---
 
-## Overview
+<!--
+
+NB: this repository is ONLY for the React frontend of the Safe app.
+Please make sure your feature request is related specifically to the frontend.
+
+For general technical QUESTIONS about the Safe, we strongly prefer StackExchange:
+https://ethereum.stackexchange.com/questions/tagged/gnosis-safe
 
-## Goals
+Thank you!
+
+-->
+
+## Overview
 
 ## Requirements
 
-## Screens
- - Figma:
- - Zeplin:
+## Designs
 
 ## Links

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,4 +5,6 @@ Resolves #
 
 ## How to test it
 
+## Analytics changes
+
 ## Screenshots

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ dev ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ dev ]
+  schedule:
+    - cron: '37 9 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/lint.yml

@@ -6,4 +6,4 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: gnosis/safe-react-eslint-plus-action@main
+      - uses: gnosis/safe-react-eslint-plus-action@v3.5.0

Dockerfile

@@ -1,12 +1,12 @@
 FROM node:14
 
-RUN apt-get update && apt-get install -y libusb-1.0-0 libusb-1.0-0-dev libudev-dev
+RUN apt-get update \
+    && apt-get install -y libusb-1.0-0 libusb-1.0-0-dev libudev-dev \
+    && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
 
-COPY package.json ./
-
-COPY yarn.lock ./
+COPY package.json yarn.lock .
 
 COPY  src/logic/contracts/artifacts ./src/logic/contracts/artifacts
 

README.md

@@ -62,12 +62,24 @@ Install dependencies for the project:
 yarn install
 ```
 
-To launch the app with all configured chains:
+To launch the dev version of the app locally:
 
 ```
 yarn start
 ```
 
+Alternatively, to run the production version of the app:
+
+```
+yarn build
+mv build app
+python -m SimpleHTTPServer 3000
+```
+
+And open http://localhost:3000/app in the browser.
+
+### Docker
+
 If you prefer to use Docker:
 
 ```

docker/nginx.conf

@@ -0,0 +1,18 @@
+server {
+  listen 80;
+
+  location / {
+    root /usr/share/nginx/html;
+    try_files $uri /index.html;
+    index index.html index.htm;
+  }
+
+  location ^~ /app {
+    alias /usr/share/nginx/html;
+    try_files $uri /index.html;
+    index index.html index.htm;
+  }
+
+
+  include /etc/nginx/extra-conf.d/*.conf;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "3.17.2",
+  "version": "3.19.0",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "homepage": "/",
@@ -89,7 +89,7 @@
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-core-sdk": "^1.3.0",
     "@gnosis.pm/safe-deployments": "^1.8.0",
-    "@gnosis.pm/safe-react-components": "^0.9.0",
+    "@gnosis.pm/safe-react-components": "^0.9.7",
     "@gnosis.pm/safe-react-gateway-sdk": "2.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.0",

prod.Dockerfile

@@ -0,0 +1,29 @@
+FROM node:14 as react-build-step
+
+# Grab needed environment variables from .env.example
+ENV REACT_APP_ENV=production
+
+RUN apt-get update \
+    && apt-get install -y libusb-1.0-0 libusb-1.0-0-dev libudev-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY package.json yarn.lock .
+COPY src/logic/contracts/artifacts ./src/logic/contracts/artifacts
+
+RUN yarn install
+
+COPY . .
+
+RUN yarn build
+
+# Deploy the build
+FROM nginx:1-alpine
+
+COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=react-build-step /app/build /usr/share/nginx/html/
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

public/third-party-cookies-check/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Third Party Cookies Test</title>
+  </head>
+
+  <body>
+    <script>
+      const COOKIE_NAME = 'testcookie'
+      const checkCookiesEnable = () => {
+        let isCookieEnabled = window.navigator.cookieEnabled ? true : false
+
+        if (window.navigator.cookieEnabled === undefined && !isCookieEnabled) {
+          document.cookie = COOKIE_NAME
+          isCookieEnabled = document.cookie.indexOf(COOKIE_NAME) != -1 ? true : false
+        }
+
+        return isCookieEnabled
+      }
+
+      ;(function () {
+        window.addEventListener('message', (event) => {
+          try {
+            let data = event.data
+            if (data.test !== 'cookie') return
+            let result = checkCookiesEnable()
+            parent.postMessage(
+              {
+                isCookieEnabled: result,
+              },
+              event.origin,
+            )
+          } catch (e) {
+            console.error(e)
+          }
+        })
+      })()
+    </script>
+  </body>
+</html>

src/components/App/index.tsx

@@ -17,15 +17,12 @@ import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
 import Modal from 'src/components/Modal'
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
-import { useLoadSafe } from 'src/logic/safe/hooks/useLoadSafe'
-import { useSafeScheduledUpdates } from 'src/logic/safe/hooks/useSafeScheduledUpdates'
 import useSafeActions from 'src/logic/safe/hooks/useSafeActions'
 import { formatAmountInUsFormat } from 'src/logic/tokens/utils/formatAmount'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import ReceiveModal from './ReceiveModal'
 import { useSidebarItems } from 'src/components/AppLayout/Sidebar/useSidebarItems'
 import useAddressBookSync from 'src/logic/addressBook/hooks/useAddressBookSync'
-import { extractSafeAddress } from 'src/routes/routes'
 
 const notificationStyles = {
   success: {
@@ -55,13 +52,12 @@ const App: React.FC = ({ children }) => {
   const classes = useStyles()
   const { toggleSidebar } = useContext(SafeListSidebarContext)
   const { name: safeName, totalFiatBalance: currentSafeBalance } = useSelector(currentSafeWithNames)
-  const addressFromUrl = extractSafeAddress()
   const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
   const currentCurrency = useSelector(currentCurrencySelector)
   const granted = useSelector(grantedSelector)
   const sidebarItems = useSidebarItems()
-  useLoadSafe(addressFromUrl) // load initially
-  useSafeScheduledUpdates(addressFromUrl) // load every X seconds
+  const { address: safeAddress } = useSelector(currentSafeWithNames)
+
   useAddressBookSync()
 
   const sendFunds = safeActionsState.sendFunds
@@ -95,7 +91,7 @@ const App: React.FC = ({ children }) => {
 
           <AppLayout
             sidebarItems={sidebarItems}
-            safeAddress={addressFromUrl}
+            safeAddress={safeAddress}
             safeName={safeName}
             balance={balance}
             granted={granted}
@@ -113,15 +109,15 @@ const App: React.FC = ({ children }) => {
             selectedToken={sendFunds.selectedToken}
           />
 
-          {addressFromUrl && (
+          {safeAddress && (
             <Modal
               description="Receive Tokens Form"
               handleClose={onReceiveHide}
               open={safeActionsState.showReceive}
               paperClassName="receive-modal"
               title="Receive Tokens"
             >
-              <ReceiveModal onClose={onReceiveHide} safeAddress={addressFromUrl} safeName={safeName} />
+              <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
             </Modal>
           )}
         </>