Safe apps can request the Safe info (#1138)

* Request Safe info from Safe apps

* Update dependencies

* Update yarn.lock file

* remove usecallback

* Rename initialization messageId from safe-apps-sdk

* Fix openOnFocus on AddressBookInput

* Fix yarn.lock file

* Rollback @material-ui/lab to avoid type errors

* dep bump

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Co-authored-by: Mikhail Mikheev <mmvsha73@gmail.com>

package.json

@@ -162,7 +162,7 @@
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
     "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#7bb55de",
     "@gnosis.pm/util-contracts": "2.0.6",
-    "@ledgerhq/hw-transport-node-hid": "5.19.0",
+    "@ledgerhq/hw-transport-node-hid": "5.19.1",
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.39",
@@ -170,39 +170,39 @@
     "async-sema": "^3.1.0",
     "axios": "0.19.2",
     "bignumber.js": "9.0.0",
-    "bnc-onboard": "1.10.2",
+    "bnc-onboard": "1.10.3",
     "classnames": "^2.2.6",
     "concurrently": "^5.2.0",
     "connected-react-router": "6.8.0",
     "coveralls": "^3.1.0",
     "currency-flags": "2.1.2",
-    "date-fns": "2.14.0",
+    "date-fns": "2.15.0",
-    "electron-is-dev": "^1.1.0",
+    "electron-is-dev": "^1.2.0",
     "electron-log": "4.2.2",
-    "electron-settings": "4.0.2",
+    "electron-settings": "^4.0.2",
     "electron-updater": "4.3.1",
     "eth-sig-util": "^2.5.3",
     "ethereum-blockies-base64": "^1.0.2",
     "exponential-backoff": "^3.0.1",
     "express": "^4.17.1",
-    "final-form": "4.20.1",
+    "final-form": "^4.20.1",
     "final-form-calculate": "^1.3.1",
     "history": "4.10.1",
-    "immortal-db": "^1.0.2",
+    "immortal-db": "^1.0.3",
-    "immutable": "^4.0.0-rc.9",
+    "immutable": "^4.0.0-rc.12",
     "js-cookie": "^2.2.1",
     "lodash.memoize": "^4.1.2",
     "material-ui-search-bar": "^1.0.0-beta.13",
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
-    "open": "^7.0.3",
+    "open": "^7.1.0",
     "polished": "3.6.5",
     "qrcode.react": "1.0.0",
     "query-string": "6.13.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-final-form": "^6.5.0",
+    "react-final-form": "^6.5.1",
     "react-final-form-listeners": "^1.0.2",
-    "react-ga": "3.0.0",
+    "react-ga": "3.1.2",
     "react-hot-loader": "4.12.21",
     "react-qr-reader": "^2.2.1",
     "react-redux": "7.2.0",
@@ -215,23 +215,22 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "semver": "7.3.2",
-    "styled-components": "^5.0.1",
+    "styled-components": "^5.1.1",
     "truffle-contract": "4.0.31",
-    "web3": "1.2.9"
+    "web3": "1.2.11"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.11.0",
+    "@testing-library/jest-dom": "5.11.1",
-    "@testing-library/react": "10.4.3",
+    "@testing-library/react": "10.4.7",
-    "@testing-library/user-event": "11.3.1",
+    "@testing-library/user-event": "12.0.13",
-    "@types/jest": "^25.2.1",
+    "@types/jest": "^26.0.7",
-    "@types/node": "14.0.14",
+    "@types/node": "14.0.25",
-    "@types/react": "^16.9.32",
+    "@types/react": "^16.9.43",
-    "@types/react-dom": "^16.9.6",
+    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9",
+    "@types/styled-components": "^5.1.1",
-    "@types/styled-components": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "3.7.0",
-    "@typescript-eslint/eslint-plugin": "3.5.0",
+    "@typescript-eslint/parser": "3.7.0",
-    "@typescript-eslint/parser": "3.5.0",
+    "autoprefixer": "9.8.5",
-    "autoprefixer": "9.8.4",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
     "dotenv-expand": "^5.1.0",
@@ -241,21 +240,20 @@
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "7.20.3",
+    "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "ethereumjs-abi": "0.6.8",
-    "husky": "^4.2.2",
+    "husky": "^4.2.5",
     "lint-staged": "10.2.11",
     "node-sass": "^4.14.1",
     "prettier": "2.0.5",
     "react-app-rewired": "^2.1.6",
-    "truffle": "5.1.33",
+    "truffle": "5.1.35",
-    "typescript": "3.9.6",
+    "typescript": "^3.9.7",
-    "wait-on": "5.0.1",
+    "wait-on": "5.1.0",
-    "web3-core": "^1.2.9",
+    "web3-eth-contract": "^1.2.11",
-    "web3-eth-contract": "^1.2.9",
+    "web3-utils": "^1.2.11"
-    "web3-utils": "^1.2.8"
   }
 }

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

@@ -58,8 +58,9 @@ const IframeCoverLoading = styled.div`
   background: white;
 `
 const operations = {
-  SEND_TRANSACTIONS: 'SEND_TRANSACTIONS',
   ON_SAFE_INFO: 'ON_SAFE_INFO',
+  SAFE_APP_SDK_INITIALIZED: 'SAFE_APP_SDK_INITIALIZED',
+  SEND_TRANSACTIONS: 'SEND_TRANSACTIONS',
 }
 
 function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
@@ -222,6 +223,14 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
 
   const getEnabledApps = () => appList.filter((a) => !a.disabled)
 
+  const sendMessageToIframe = useCallback(
+    (messageId, data) => {
+      const app = getSelectedApp()
+      iframeEl.contentWindow.postMessage({ messageId, data }, app.url)
+    },
+    [getSelectedApp, iframeEl.contentWindow],
+  )
+
   // handle messages from iframe
   useEffect(() => {
     const handleIframeMessage = (data) => {
@@ -234,7 +243,6 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
         case operations.SEND_TRANSACTIONS: {
           const onConfirm = async () => {
             closeModal()
-
             await sendTransactions(
               dispatch,
               safeAddress,
@@ -256,7 +264,15 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
             closeModal,
             onConfirm,
           )
+          break
+        }
 
+        case operations.SAFE_APP_SDK_INITIALIZED: {
+          sendMessageToIframe(operations.ON_SAFE_INFO, {
+            safeAddress,
+            network,
+            ethBalance,
+          })
           break
         }
 
@@ -347,10 +363,6 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
 
   // on iframe change
   useEffect(() => {
-    const sendMessageToIframe = (messageId, data) => {
-      const app = getSelectedApp()
-      iframeEl.contentWindow.postMessage({ messageId, data }, app.url)
-    }
     const onIframeLoaded = () => {
       setAppIsLoading(false)
       sendMessageToIframe(operations.ON_SAFE_INFO, {
@@ -370,7 +382,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
     return () => {
       iframeEl.removeEventListener('load', onIframeLoaded)
     }
-  }, [ethBalance, getSelectedApp, iframeEl, network, safeAddress, selectedApp])
+  }, [ethBalance, getSelectedApp, iframeEl, network, safeAddress, selectedApp, sendMessageToIframe])
 
   if (loading) {
     return <Loader size="md" />