feat: add safe support

frontend/netlify.toml

@@ -1,4 +1,10 @@
 [[redirects]]
     from = "/*"
     to = "/index.html"
-    status = 200
+    status = 200
+[[headers]]
+  for = "/manifest.json"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"
+    Access-Control-Allow-Methods = "GET"
+    Access-Control-Allow-Headers = "X-Requested-With, content-type, Authorization"

frontend/public/manifest.json

@@ -0,0 +1,20 @@
+{
+	"name": "Badger",
+	"short_name": "Badger",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#00ffe0",
+	"background_color": "#00ffe0",
+	"display": "standalone",
+	"start_url": "."
+}

frontend/src/components/Button/ConnectButton.js

@@ -2,6 +2,8 @@ import { useAuthentication } from '@hooks'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { useAccount, useSwitchNetwork } from 'wagmi'
 
+import { useAutoConnect } from '../../hooks/useAutoConnect'
+
 const ConnectButton = props => {
 	const { switchNetwork } = useSwitchNetwork()
 
@@ -13,6 +15,8 @@ const ConnectButton = props => {
 
 	const className = props.className || 'secondary'
 
+	useAutoConnect()
+
 	if (isConnected && isWrongNetwork && switchNetwork)
 		return (
 			<button

frontend/src/components/Wallet/Wallet.js

@@ -6,6 +6,7 @@ import {
 } from '@rainbow-me/rainbowkit'
 import { configureChains, createClient, WagmiConfig } from 'wagmi'
 import { localhost, polygon } from 'wagmi/chains'
+import { SafeConnector } from 'wagmi/connectors/safe'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
 import { publicProvider } from 'wagmi/providers/public'
 
@@ -25,8 +26,17 @@ const Wallet = ({ children }) => {
 	})
 
 	const wagmiClient = createClient({
-		autoConnect: true,
-		connectors,
+		autoConnect: false,
+		connectors: [
+			...connectors(),
+			new SafeConnector({
+				chains,
+				options: {
+					allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
+					debug: true
+				}
+			})
+		],
 		provider
 	})
 

frontend/src/hooks/useAutoConnect.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+import { useConnect } from 'wagmi'
+
+const AUTOCONNECTED_CONNECTOR_IDS = ['safe']
+
+export function useAutoConnect() {
+	const { connect, connectors } = useConnect()
+
+	useEffect(() => {
+		AUTOCONNECTED_CONNECTOR_IDS.forEach(connector => {
+			const connectorInstance = connectors.find(
+				c => c.id === connector && c.ready
+			)
+
+			if (connectorInstance) {
+				connect({ connector: connectorInstance })
+			}
+		})
+	}, [connect, connectors])
+}