scaffold-eth apps should be safe apps! (scaffold-eth#932)

* scaffold-eth apps should be safe apps! * auto connect if safe app and clean up manifest just in case that works * maybe fix linting lol * clean up * 😅 shame shame me trying to put master scaffold on mainnet🧌
tomicvladan · Dec 8, 2022 · 533094c · 533094c
1 parent db24f28
commit 533094c
Show file tree

Hide file tree

Showing 5 changed files with 610 additions and 870 deletions.
diff --git a/packages/react-app/package.json b/packages/react-app/package.json
@@ -19,6 +19,8 @@
     "@apollo/client": "^3.3.21",
     "@apollo/react-hooks": "^4.0.0",
     "@arbitrum/sdk": "^2.0.0",
+    "@gnosis.pm/safe-apps-sdk": "^7.8.0",
+    "@gnosis.pm/safe-apps-web3modal": "^17.0.4",
     "@portis/web3": "^4.0.5",
     "@ramp-network/ramp-instant-sdk": "^2.2.0",
     "@testing-library/jest-dom": "^5.11.4",
@@ -55,7 +57,7 @@
     "react-scripts": "4.0.1",
     "searchico": "^1.2.1",
     "walletlink": "^2.1.5",
-    "web3modal": "^1.9.1"
+    "web3modal": "^1.9.10"
   },
   "devDependencies": {
     "@apollo/client": "^3.3.21",

diff --git a/packages/react-app/public/manifest.json b/packages/react-app/public/manifest.json
@@ -1,7 +1,9 @@
 {
+  "name": "Scaffold-Eth App",
+  "description": "A Scaffold-Eth App",
+  "iconPath": "logo192.png",
   "short_name": "🏗 Scaffold-Eth App",
   "start_url": ".",
-  "name": "🏗 Scaffold-Eth App",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -225,7 +225,8 @@ function App(props) {
   ]);
 
   const loadWeb3Modal = useCallback(async () => {
-    const provider = await web3Modal.connect();
+    //const provider = await web3Modal.connect();
+    const provider = await web3Modal.requestProvider();
     setInjectedProvider(new ethers.providers.Web3Provider(provider));
 
     provider.on("chainChanged", chainId => {
@@ -250,6 +251,13 @@ function App(props) {
     if (web3Modal.cachedProvider) {
       loadWeb3Modal();
     }
+    //automatically connect if it is a safe app
+    const checkSafeApp = async () => {
+      if (await web3Modal.isSafeApp()) {
+        loadWeb3Modal();
+      }
+    };
+    checkSafeApp();
   }, [loadWeb3Modal]);
 
   const faucetAvailable = localProvider && localProvider.connection && targetNetwork.name.indexOf("local") !== -1;

diff --git a/packages/react-app/src/helpers/Web3ModalSetup.js b/packages/react-app/src/helpers/Web3ModalSetup.js
@@ -3,8 +3,8 @@ import WalletConnectProvider from "@walletconnect/web3-provider";
 import Authereum from "authereum";
 import Fortmatic from "fortmatic";
 import WalletLink from "walletlink";
-import Web3Modal from "web3modal";
 import { ALCHEMY_KEY, INFURA_ID } from "../constants";
+import { SafeAppWeb3Modal } from "@gnosis.pm/safe-apps-web3modal";
 
 // Coinbase walletLink init
 const walletLink = new WalletLink({
@@ -19,7 +19,7 @@ const walletLinkProvider = walletLink.makeWeb3Provider(`https://eth-mainnet.alch
   Web3 modal helps us "connect" external wallets:
 **/
 const web3ModalSetup = () =>
-  new Web3Modal({
+  new SafeAppWeb3Modal({
     network: "mainnet", // Optional. If using WalletConnect on xDai, change network to "xdai" and add RPC info below for xDai chain.
     cacheProvider: true, // optional
     theme: "light", // optional. Change to "dark" for a dark theme.