add custom gnosis wagmi connector (#33)

* first pass at custom gnosis wagmi connector

* arguments, clean up code

* update docs

* add address map

* implement disconnect

* fix url

* make gnosis safe re-connect to previous connector

* fix package version?

* fix package version?

* v2.2.0-0

* patch gnosis connector to work reliably in the browser

* v2.2.0-1

* enable minify again

* v2.2.0-2

* update build again

* v2.2.0-3

Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: joaquim-verges

docs/react.md

@@ -27,13 +27,18 @@ import { useCoinbaseWallet } from "@thirdweb-dev/react"
 |  [useContractPublishMetadata(contractAddress)](./react.usecontractpublishmetadata.md) | <b><i>(BETA)</i></b> Use this to get the publish metadata for a deployed contract. |
 |  [useContractType(contractAddress)](./react.usecontracttype.md) | <b><i>(BETA)</i></b> Use this to get the contract type for a (built-in or custom) contract. |
 |  [useCustomContract(contractAddress)](./react.usecustomcontract.md) | <b><i>(BETA)</i></b> Use this resolve a contract address to a thirdweb (built-in / custom) contract instance. |
-|  [useDisconnect()](./react.usedisconnect.md) | Hook for disconnecting the currently connected wallet
+|  [useDisconnect(options)](./react.usedisconnect.md) | Hook for disconnecting the currently connected wallet
 ```javascript
 import { useDisconnect } from "@thirdweb-dev/react"
 ```
  |
 |  [useEdition(contractAddress)](./react.useedition.md) | Hook for getting an instance of an <code>Edition</code> contract. This contract is used to interface with ERC1155 compliant NFTs. |
 |  [useEditionDrop(contractAddress)](./react.useeditiondrop.md) | Hook for getting an instance of an <code>EditionDrop</code> contract. This conract is used to interface with ERC1155 compliant NFTs that can be lazily minted. |
+|  [useGnosis()](./react.usegnosis.md) | Hook for connecting to a Gnosis Safe. This enables multisig wallets to connect to your application and sing transactions.
+```javascript
+import { useGnosis } from "@thirdweb-dev/react"
+```
+ |
 |  [useMagic()](./react.usemagic.md) | Hook for connecting to an email wallet using magic link. This enables users without their own wallets to connect to your application and sign transactions securely using their email.
 ```javascript
 import { useMagic } from "@thirdweb-dev/react"

docs/react.usedisconnect.md

@@ -13,11 +13,23 @@ import { useDisconnect } from "@thirdweb-dev/react"
 <b>Signature:</b>
 
 ```typescript
-declare function useDisconnect(): () => void;
+declare function useDisconnect(options?: {
+    reconnectAfterGnosis?: boolean;
+}): () => Promise<void | {
+    data?: wagmi.ConnectorData<any> | undefined;
+    error?: Error | undefined;
+}>;
 ```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  options | { reconnectAfterGnosis?: boolean; } | <i>(Optional)</i> |
+
 <b>Returns:</b>
 
-() =&gt; void
+() =&gt; Promise&lt;void \| { data?: wagmi.ConnectorData&lt;any&gt; \| undefined; error?: Error \| undefined; }&gt;
 
 ## Example
 

docs/react.usegnosis.md

@@ -0,0 +1,41 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@thirdweb-dev/react](./react.md) &gt; [useGnosis](./react.usegnosis.md)
+
+## useGnosis() function
+
+Hook for connecting to a Gnosis Safe. This enables multisig wallets to connect to your application and sing transactions.
+
+```javascript
+import { useGnosis } from "@thirdweb-dev/react"
+```
+
+<b>Signature:</b>
+
+```typescript
+declare function useGnosis(): (config: GnosisConnectorArguments) => Promise<{
+    data?: wagmi_core.ConnectorData<any> | undefined;
+    error?: Error | undefined;
+}>;
+```
+<b>Returns:</b>
+
+(config: GnosisConnectorArguments) =&gt; Promise&lt;{ data?: wagmi\_core.ConnectorData&lt;any&gt; \| undefined; error?: Error \| undefined; }&gt;
+
+## Example
+
+
+```javascript
+import { useGnosis } from "@thirdweb-dev/react"
+
+const App = () => {
+  const connectWithGnosis = useGnosis()
+
+  return (
+    <button onClick={() => connectWithGnosis({ safeAddress: "0x...", safeChainId: 1 })}>
+      Connect Gnosis Safe
+    </button>
+  )
+}
+```
+

etc/react.api.md

@@ -151,6 +151,14 @@ export { defaultL2Chains }
 // @internal (undocumented)
 export function detectErc721Instance(contract?: ValidContractInstance | CustomContract | null): Erc721<any> | undefined;
 
+// Warning: (ae-internal-missing-underscore) The name "GnosisConnectorType" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export type GnosisConnectorType = "gnosis" | {
+    name: "gnosis";
+    options: GnosisConnectorArguments;
+};
+
 // Warning: (ae-internal-missing-underscore) The name "InjectedConnectorType" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
@@ -419,14 +427,25 @@ export function useCustomContract(contractAddress?: string): {
 export function useDesiredChainId(): number;
 
 // @public
-export function useDisconnect(): () => void;
+export function useDisconnect(options?: {
+    reconnectAfterGnosis?: boolean;
+}): () => Promise<void | {
+    data?: wagmi.ConnectorData<any> | undefined;
+    error?: Error | undefined;
+}>;
 
 // @public
 export function useEdition(contractAddress?: string): Edition | undefined;
 
 // @public
 export function useEditionDrop(contractAddress?: string): EditionDrop | undefined;
 
+// @public
+export function useGnosis(): (config: GnosisConnectorArguments) => Promise<{
+    data?: wagmi_core.ConnectorData<any> | undefined;
+    error?: Error | undefined;
+}>;
+
 // @public
 export function useMagic(): (configuration: LoginWithMagicLinkConfiguration) => Promise<{
     data?: wagmi_core.ConnectorData<any> | undefined;
@@ -574,7 +593,7 @@ export type WalletConnectConnectorType = "walletConnect" | {
 // Warning: (ae-internal-missing-underscore) The name "WalletConnector" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export type WalletConnector = InjectedConnectorType | WalletConnectConnectorType | WalletLinkConnectorType | MagicConnectorType;
+export type WalletConnector = InjectedConnectorType | WalletConnectConnectorType | WalletLinkConnectorType | MagicConnectorType | GnosisConnectorType;
 
 // Warning: (ae-internal-missing-underscore) The name "WalletLinkConnectorType" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -586,8 +605,9 @@ export type WalletLinkConnectorType = "walletLink" | "coinbase" | {
 
 // Warnings were encountered during analysis:
 //
-// dist/index.d.ts:391:5 - (ae-forgotten-export) The symbol "MagicConnectorArguments" needs to be exported by the entry point index.d.ts
-// dist/index.d.ts:960:5 - (ae-forgotten-export) The symbol "wagmi_core" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:396:5 - (ae-forgotten-export) The symbol "MagicConnectorArguments" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:403:5 - (ae-forgotten-export) The symbol "GnosisConnectorArguments" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:977:5 - (ae-forgotten-export) The symbol "wagmi_core" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "2.1.0",
+  "version": "2.2.0-3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com:thirdweb-dev/react.git"
@@ -18,7 +18,7 @@
   ],
   "private": false,
   "scripts": {
-    "build:lib": "tsup --env.NODE_ENV production --minify --format esm,cjs --dts-resolve",
+    "build:lib": "tsup --dts-resolve",
     "lint": "eslint src/",
     "fix": "eslint src/ --fix",
     "extract-api": "api-extractor run --local",
@@ -54,8 +54,9 @@
     "vitest": "^0.10.0"
   },
   "dependencies": {
-    "@gnosis.pm/safe-apps-provider": "^0.11.0",
-    "@gnosis.pm/safe-apps-sdk": "^7.3.0",
+    "@gnosis.pm/safe-core-sdk": "^2.1.0",
+    "@gnosis.pm/safe-ethers-adapters": "^0.1.0-alpha.9",
+    "@gnosis.pm/safe-ethers-lib": "^1.1.0",
     "magic-sdk": "^8.1.1",
     "mime": "^3.0.0",
     "react-cool-dimensions": "^2.0.7",
@@ -72,14 +73,5 @@
   "resolutions": {
     "ansi-regex": "^6.0.1",
     "typescript": "^4.6.2"
-  },
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "splitting": false,
-    "sourcemap": true,
-    "clean": true,
-    "dtsRollup": true
   }
 }

src/Provider.tsx

@@ -1,3 +1,7 @@
+import {
+  GnosisConnectorArguments,
+  GnosisSafeConnector,
+} from "./connectors/gnosis-safe";
 import { MagicConnector, MagicConnectorArguments } from "./connectors/magic";
 import {
   Chain,
@@ -61,14 +65,25 @@ export type MagicConnectorType =
       options: Omit<MagicConnectorArguments, "network">;
     };
 
+/**
+ * @internal
+ */
+export type GnosisConnectorType =
+  | "gnosis"
+  | {
+      name: "gnosis";
+      options: GnosisConnectorArguments;
+    };
+
 /**
  * @internal
  */
 export type WalletConnector =
   | InjectedConnectorType
   | WalletConnectConnectorType
   | WalletLinkConnectorType
-  | MagicConnectorType;
+  | MagicConnectorType
+  | GnosisConnectorType;
 
 /**
  * @internal
@@ -333,6 +348,14 @@ export const ThirdwebProvider = <
                 },
               });
             }
+            if (
+              (typeof connector === "string" && connector === "gnosis") ||
+              (typeof connector === "object" && connector.name === "gnosis")
+            ) {
+              return new GnosisSafeConnector({
+                chains: _supporrtedChains,
+              });
+            }
             return null;
           })
           .filter((c) => c !== null);