Add safe connection with Rainbow

src/wagmi.ts

@@ -1,6 +1,8 @@
 import { getDefaultConfig } from "@rainbow-me/rainbowkit";
+import { injectedWallet, walletConnectWallet } from "@rainbow-me/rainbowkit/wallets";
 import { http } from "wagmi";
 import { gnosis } from "wagmi/chains";
+import { safeWallet } from "./wallets/safeWallet";
 
 const projectId = "02e652f4cb3974c4c3a822aa56ec09f6";
 
@@ -17,6 +19,14 @@ export const wagmiConfig = getDefaultConfig({
   appIcon: "https://gnosispay.com/favicon.ico",
   projectId,
   chains: [gnosis],
+  // Mirror RainbowKit's default wallet lineup, but swap its option-less Safe
+  // wallet for our configured one (restores the AppKit-era Safe App config).
+  wallets: [
+    {
+      groupName: "Popular",
+      wallets: [injectedWallet, safeWallet, walletConnectWallet],
+    },
+  ],
   transports: {
     [gnosis.id]: http(gnosisRpcUrl),
   },

src/wallets/safeWallet.ts

@@ -0,0 +1,35 @@
+import type { Wallet, WalletDetailsParams } from "@rainbow-me/rainbowkit";
+import { createConnector } from "wagmi";
+import { safe } from "wagmi/connectors";
+
+// Safe logo (mirrors the icon RainbowKit ships for its built-in Safe wallet).
+const safeIcon =
+  "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22%2312FF80%22%2F%3E%0A%3Cpath%20d%3D%22M22.5151%2013.9979H20.4244C19.7981%2013.9979%2019.2945%2014.5058%2019.2945%2015.128V18.163C19.2945%2018.7894%2018.7866%2019.2931%2018.1645%2019.2931H9.8398C9.21344%2019.2931%208.70981%2019.8011%208.70981%2020.4233V22.5185C8.70981%2023.145%209.21767%2023.6487%209.8398%2023.6487H18.6427C19.2691%2023.6487%2019.7642%2023.1407%2019.7642%2022.5185V20.8423C19.7642%2020.2159%2020.2721%2019.7757%2020.8942%2019.7757H22.5151C23.1415%2019.7757%2023.6451%2019.2677%2023.6451%2018.6455V15.1196C23.6451%2014.4889%2023.1373%2013.9979%2022.5151%2013.9979Z%22%20fill%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M8.7098%209.84127C8.7098%209.21481%209.21766%208.71111%209.83978%208.71111H18.156C18.7823%208.71111%2019.286%208.20317%2019.286%207.58095V5.48995C19.286%204.86349%2018.7781%204.35979%2018.156%204.35979H9.35732C8.73096%204.35979%208.22733%204.86772%208.22733%205.48995V7.10264C8.22733%207.7291%207.71947%208.2328%207.09734%208.2328H5.48912C4.86276%208.2328%204.35913%208.74074%204.35913%209.36296V12.8931C4.35913%2013.5196%204.86699%2013.9979%205.49335%2013.9979H7.58404C8.2104%2013.9979%208.71403%2013.4899%208.71403%2012.8677L8.7098%209.84127Z%22%20fill%3D%22black%22%2F%3E%0A%3Cpath%20d%3D%22M13.0139%2011.8011H15.0242C15.6802%2011.8011%2016.2092%2012.3344%2016.2092%2012.9862V14.9968C16.2092%2015.6529%2015.6759%2016.182%2015.0242%2016.182H13.0139C12.3579%2016.182%2011.8289%2015.6487%2011.8289%2014.9968V12.9862C11.8289%2012.3302%2012.3621%2011.8011%2013.0139%2011.8011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A";
+
+/**
+ * Custom RainbowKit Safe wallet.
+ *
+ * RainbowKit's built-in `safeWallet` calls wagmi's `safe()` connector with no
+ * options, which drops the security configuration we relied on with AppKit.
+ * This mirrors RainbowKit's Safe wallet but restores the original connector
+ * options: only auto-connect when embedded within the official Safe interfaces.
+ */
+export const safeWallet = (): Wallet => ({
+  id: "safe",
+  name: "Safe",
+  iconAccent: "#12ff80",
+  iconBackground: "#fff",
+  iconUrl: async () => safeIcon,
+  // Only surfaced when running inside an iframe (i.e. as a Safe App).
+  installed: typeof window !== "undefined" && window?.parent !== window,
+  downloadUrls: {},
+  createConnector: (walletDetails: WalletDetailsParams) =>
+    createConnector((config) => ({
+      ...safe({
+        allowedDomains: [/gnosis-safe\.io$/, /app\.safe\.global$/],
+        debug: false,
+        shimDisconnect: false,
+      })(config),
+      ...walletDetails,
+    })),
+});