feat: safe connector (#1028)

* Added Safe (Gnosis) connector. * fix: amended default wallet list order * fix: linting issues * fix: renamed safe icon * fix: removed gnosis from name * fix: added Safe App manifest * fix: added manifest iconPath and favicon * fix: updated safeWallet logo * chore: added changeset * fix: cleaned up safe connector options and installed logic * fix: removed shimDisconnect in favor of options passthrough --------- Co-authored-by: Stas SUȘCOV <stas@nerd.ro>
rainbow-me · Mar 23, 2023 · 9b93f56 · 9b93f56 · vercel · Mar 23, 2023
1 parent 021c4e0
commit 9b93f56
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 0 deletions.
diff --git a/.changeset/cold-camels-visit.md b/.changeset/cold-camels-visit.md
@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Added `safeWallet` connector to support Safe Apps. dApps that rely on `getDefaultWallets` will adopt this behavior automatically. dApps that rely on the Custom Wallet List should add `safeWallet` alongside `injectedWallet`.
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -548,6 +548,7 @@ export default function App(appProps: AppProps) {
     <>
       <Head>
         <title>RainbowKit Example</title>
+        <link href="/favicon.ico" rel="icon" />
       </Head>
       <SessionProvider refetchInterval={0} session={appProps.pageProps.session}>
         <WagmiConfig client={wagmiClient}>

diff --git a/packages/example/public/favicon.ico b/packages/example/public/favicon.ico
diff --git a/packages/example/public/manifest.json b/packages/example/public/manifest.json
@@ -0,0 +1,5 @@
+{
+  "name": "RainbowKit Example",
+  "description": "Test dApp deployment of RainbowKit",
+  "iconPath": "rainbow.svg"
+}
diff --git a/packages/example/public/rainbow.svg b/packages/example/public/rainbow.svg
diff --git a/packages/rainbowkit/src/wallets/getDefaultWallets.ts b/packages/rainbowkit/src/wallets/getDefaultWallets.ts
@@ -6,6 +6,7 @@ import { coinbaseWallet } from './walletConnectors/coinbaseWallet/coinbaseWallet
 import { injectedWallet } from './walletConnectors/injectedWallet/injectedWallet';
 import { metaMaskWallet } from './walletConnectors/metaMaskWallet/metaMaskWallet';
 import { rainbowWallet } from './walletConnectors/rainbowWallet/rainbowWallet';
+import { safeWallet } from './walletConnectors/safeWallet/safeWallet';
 import { walletConnectWallet } from './walletConnectors/walletConnectWallet/walletConnectWallet';
 
 export const getDefaultWallets = ({
@@ -23,6 +24,7 @@ export const getDefaultWallets = ({
       groupName: 'Popular',
       wallets: [
         injectedWallet({ chains }),
+        safeWallet({ chains }),
         rainbowWallet({ chains }),
         coinbaseWallet({ appName, chains }),
         metaMaskWallet({ chains }),

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -9,6 +9,7 @@ import { metaMaskWallet } from './metaMaskWallet/metaMaskWallet';
 import { mewWallet } from './mewWallet/mewWallet';
 import { omniWallet } from './omniWallet/omniWallet';
 import { rainbowWallet } from './rainbowWallet/rainbowWallet';
+import { safeWallet } from './safeWallet/safeWallet';
 import { trustWallet } from './trustWallet/trustWallet';
 import { walletConnectWallet } from './walletConnectWallet/walletConnectWallet';
 
@@ -24,6 +25,7 @@ export {
   mewWallet,
   omniWallet,
   rainbowWallet,
+  safeWallet,
   trustWallet,
   walletConnectWallet,
 };
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/safeWallet/safeWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/safeWallet/safeWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/safeWallet/safeWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/safeWallet/safeWallet.ts
@@ -0,0 +1,33 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import type { SafeConnectorOptions } from 'wagmi/connectors/safe';
+import { SafeConnector } from 'wagmi/connectors/safe';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { Wallet } from '../../Wallet';
+
+export interface SafeWalletOptions {
+  chains: Chain[];
+}
+
+export const safeWallet = ({
+  chains,
+  ...options
+}: SafeWalletOptions & SafeConnectorOptions): Wallet => ({
+  id: 'safe',
+  name: 'Safe',
+  iconAccent: '#12ff80',
+  iconBackground: '#fff',
+  iconUrl: async () => (await import('./safeWallet.svg')).default,
+  installed:
+    // Only allowed in iframe context
+    // borrowed from wagmi safe connector
+    !(typeof window === 'undefined') && window?.parent !== window,
+  downloadUrls: {
+    // We're opting not to provide a download prompt if Safe isn't the current
+    // browser since it's unlikely to be a desired behavior for users. It's
+    // more of a convenience for users who are already using Brave rather than
+    // an explicit wallet choice for users coming from other browsers.
+  },
+  createConnector: () => ({
+    connector: new SafeConnector({ chains, options }),
+  }),
+});