fix: auto-connect with gnosis safe

demo/public/manifest.json

@@ -0,0 +1,12 @@
+{
+  "background_color": "#fff",
+  "display": "standalone",
+  "homepage_url": "",
+  "providedBy": { "name": "Vue Dapp", "url": "" },
+  "orientation": "portrait",
+  "name": "Vue Dapp",
+  "short_name": "vue-dapp",
+  "description": "vue-dapp test",
+  "start_url": ".",
+  "theme_color": "#ff007a"
+}

src/components/Board.vue

@@ -9,7 +9,7 @@ import GnosisSafeIcon from './logos/GnosisSafe.vue'
 
 import { useBoard } from '../composables/useBoard'
 import { useWallet } from '../composables/useWallet'
-import { Connector, MetaMaskConnector } from '../connectors'
+import { Connector, MetaMaskConnector, SafeConnector } from '../connectors'
 
 export default defineComponent({
   components: {
@@ -45,23 +45,24 @@ export default defineComponent({
     const isAutoConnect = inject('autoConnect')
     if (isAutoConnect) {
       onMounted(async () => {
-        const metaMaskConnector = connectors.find(
-          (connector) => connector.name === 'metaMask',
-        ) as MetaMaskConnector
+        // auto-connect to Safe as first
+        let connected = false
+        const safe = connectors.find(
+          (conn) => conn.name === 'safe',
+        ) as SafeConnector
+        if (safe) {
+          connected = await autoConnect(safe)
+          if (connected) return
+        }
 
-        if (metaMaskConnector) {
-          try {
-            await autoConnect(metaMaskConnector)
-          } catch (err) {
-            console.error(
-              'AutoConnectError: Failed to connect to MetaMask',
-              err,
-            )
-          }
-        } else {
-          console.error(
-            'AutoConnectError: MetaMask connector not found (you should add MetaMask connector so theautoConnect can work)',
-          )
+        console.log('check metamask')
+        // then check metamask
+        const metamask = connectors.find(
+          (conn) => conn.name === 'metaMask',
+        ) as MetaMaskConnector
+        if (metamask) {
+          connected = await autoConnect(metamask)
+          if (connected) return
         }
       })
     }

src/components/logos/GnosisSafe.vue

@@ -3,6 +3,7 @@
     width="1024"
     height="1024"
     viewBox="0 0 280 280"
+    fill="#008C73"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path

src/composables/useWallet.ts

@@ -1,6 +1,6 @@
 import { reactive, markRaw } from 'vue'
 import { providers } from 'ethers'
-import { Connector, MetaMaskConnector } from '../connectors'
+import { Connector, MetaMaskConnector, SafeConnector } from '../connectors'
 import { useEthers } from './useEthers'
 
 export type ConnectionStatus = 'none' | 'connecting' | 'loading' | 'connected'
@@ -133,11 +133,34 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
     clearWallet()
   }
 
-  async function autoConnect(metaMaskConnector: MetaMaskConnector) {
-    const isConnected = await MetaMaskConnector.checkConnection()
-    if (isConnected) {
-      await connectWith(metaMaskConnector)
+  async function autoConnect(connector: Connector): Promise<boolean> {
+    if (connector.name === 'metaMask') {
+      const metamask = connector as MetaMaskConnector
+
+      const isConnected = await MetaMaskConnector.checkConnection()
+      console.log('metamask is connected: ', isConnected)
+      if (isConnected) {
+        try {
+          await connectWith(metamask)
+          return true
+        } catch (err) {
+          console.error('Failed to auto-connect MetaMask')
+        }
+      }
+    } else if (connector.name === 'safe') {
+      const safe = connector as SafeConnector
+
+      const isSafeApp = await safe.isSafeApp()
+      if (isSafeApp) {
+        try {
+          await connectWith(safe)
+          return true
+        } catch (err) {
+          console.error('Failed to auto-connect Gnosis Safe')
+        }
+      }
     }
+    return false
   }
 
   function onDisconnect(callback: OnDisconnectCallback) {

src/connectors/safe.ts

@@ -33,7 +33,7 @@ export class SafeConnector extends Connector<SafeAppProvider, SafeOpts> {
   }
 
   async connect() {
-    const runningAsSafeApp = await this.#isSafeApp()
+    const runningAsSafeApp = await this.isSafeApp()
     if (!runningAsSafeApp) {
       throw new ConnectorNotFoundError()
     }
@@ -65,7 +65,7 @@ export class SafeConnector extends Connector<SafeAppProvider, SafeOpts> {
     return this.#provider
   }
 
-  async #isSafeApp(): Promise<boolean> {
+  async isSafeApp(): Promise<boolean> {
     if (!this.ready) {
       return false
     }