Bug: safe app check takes 300ms when not in iframe (#226)

* add checks to web3react/web3modal

* add comments

* add changeset

Sent from my iPhone

* fix iframe check

Sent from my iPhone

* build dist

Sent from my iPhone

.changeset/khaki-rats-hide.md

@@ -0,0 +1,9 @@
+---
+'@gnosis.pm/safe-apps-web3-react': patch
+'@gnosis.pm/safe-apps-web3modal': patch
+---
+
+dependency bump
+in isSafeApp check, check if running inside an iframe
+
+Sent from my iPhone

.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@gnosis.pm/cra-template-safe-app": "4.0.0",
+    "@gnosis.pm/safe-apps-provider": "0.8.0",
+    "@gnosis.pm/safe-apps-react-sdk": "4.0.4",
+    "@gnosis.pm/safe-apps-sdk": "4.3.0",
+    "@gnosis.pm/safe-apps-web3-react": "0.6.3",
+    "@gnosis.pm/safe-apps-web3modal": "3.0.0"
+  },
+  "changesets": []
+}

package.json

@@ -19,14 +19,14 @@
     "lerna": "^4.0.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "27.1.1",
-    "prettier": "^2.4.0",
+    "jest": "27.2.4",
+    "prettier": "^2.4.1",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.3"
   }
 }

packages/safe-apps-react-sdk/package.json

@@ -14,19 +14,16 @@
     "@gnosis.pm/safe-apps-sdk": "4.3.0"
   },
   "peerDependencies": {
-    "@types/node": "^14.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.2",
     "react": "16.x.x || 17.x.x"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^27.0.2",
     "@types/react-dom": "^17.0.9",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.9.0",
+    "eslint-plugin-flowtype": "^6.1.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "rimraf": "^3.0.2"
   },

packages/safe-apps-sdk/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnosis.pm/safe-apps-sdk",
-    "version": "4.3.0-next.2",
+    "version": "4.3.0",
     "description": "SDK developed to integrate third-party apps with Safe-Multisig app.",
     "main": "dist/src/index.js",
     "typings": "dist/src/index.d.ts",
@@ -15,21 +15,17 @@
     ],
     "scripts": {
         "test": "jest",
-        "format-dist": "sed -i 's/\"files\":/\"_files\":/' dist/package.json",
+        "format-dist": "sed -i '' 's/\"files\":/\"_files\":/' dist/package.json",
         "build": "yarn rimraf dist && tsc && yarn format-dist",
         "lint": "tslint -p tsconfig.json"
     },
     "author": "Gnosis (https://gnosis.io)",
     "license": "MIT",
     "dependencies": {
         "@changesets/cli": "^2.16.0",
-        "ethers": "^5.4.5"
+        "ethers": "^5.4.7"
     },
     "devDependencies": {
-        "@types/jest": "^27.0.1",
-        "@types/node": "^16.9.0",
-        "@typescript-eslint/eslint-plugin": "^4.31.0",
-        "@typescript-eslint/parser": "^4.31.0",
         "rimraf": "^3.0.2"
     },
     "repository": {

packages/safe-apps-sdk/package.json

@@ -23,13 +23,9 @@
   "license": "MIT",
   "dependencies": {
     "@changesets/cli": "^2.16.0",
-    "ethers": "^5.4.5"
+    "ethers": "^5.4.7"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.9.0",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
     "rimraf": "^3.0.2"
   },
   "repository": {

packages/safe-apps-web3-react/package.json

@@ -30,8 +30,8 @@
     "react": "16.x.x || 17.x.x"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.9.0",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^16.10.3",
     "@web3-react/core": "6.1.9",
     "react": "17.0.2",
     "rimraf": "^3.0.2"

packages/safe-apps-web3-react/src/connector.ts

@@ -47,6 +47,11 @@ class SafeAppConnector extends AbstractConnector {
   }
 
   public async isSafeApp(): Promise<boolean> {
+    // check if we're in an iframe
+    if (window?.parent === window) {
+      return false;
+    }
+
     const safe = await Promise.race([
       this.getSafeInfo(),
       new Promise<undefined>((resolve) => setTimeout(resolve, 300)),

packages/safe-apps-web3-react/src/useSafeAppConnection.ts

@@ -17,7 +17,7 @@ function useSafeAppConnection(connector: SafeAppConnector): boolean {
         setTried(true);
       }
     });
-  }, [activate]); // intentionally only running on mount (make sure it's only mounted once :))
+  }, [activate, connector]); // intentionally only running on mount (make sure it's only mounted once :))
 
   // if the connection worked, wait until we get confirmation of that to flip the flag
   React.useEffect(() => {

packages/safe-apps-web3modal/src/modal.ts

@@ -43,6 +43,11 @@ export class SafeAppWeb3Modal extends Web3Modal {
   };
 
   public async isSafeApp(): Promise<boolean> {
+    // check if we're in an iframe
+    if (window?.parent === window) {
+      return false;
+    }
+
     const safe = await this.getConnectedSafe();
 
     return !!safe;