@edgeandnode/graph-auth-kit 0.4.2 → 0.4.3-feat-useGraphAuthKitAccountEffect-hook-1723603598026-07ebb8b825ae109ee0ed9d2795fdd44ebe4deafc

package/README.md

@@ -230,6 +230,11 @@ export function Layout({ children }: Readonly<{ children: ReactNode }>) {
 
 - `useGraphAuthKitAccount` -> This is an override of the [wagmi useAccount hook](https://wagmi.sh/react/api/hooks/useAccount). The reason is, if the user connects with a multisig, the wagmi context is connected with the user-selected EoA, so all of the wagmi context hooks reference this EoA and not the Safe. This returns the wagmi `UseAccountReturnType` but the `address` and `addresses` values include the entered Safe address. It also adds an `eoa` property that is the connected EoA address.
 - `useGraphAuthKitConnector` -> The user selected wallet/connector option.
+- `useClientToEthersSigner` -> Returns the ethers@5.x.x JsonRpcSigner or SafeEthersSigner if the user is connected via a multisig
+- `useAuthAccount` -> similar to the `useGraphAuthKitAccount` but requires the user to be authenticated and throws an error if not
+- `useGraphAuthKitAccountEffect` -> Override of the [wagmi useAccountEffect hook](https://wagmi.sh/react/api/hooks/useAccountEffect) that listens to account changes and the `_enteredMultisigInfo` on the inner context instance. If the account data changes, emits a `onConnect` or `onDisconnect` event, but in the `onConnect` also checks the `useGraphAuthKitInnerContext()._enteredMultisigInfo` value and if the user has connected via a multisig, returns the mutlsig as the `address` value and the connected EoA as the `eoa` value.
+- `useGraphAuthKitWalletClient` -> Override of the [wagmi useWalletClient hook](https://wagmi.sh/react/api/hooks/useWalletClient) that returns the extended Safe viem actions if the user is connected to a multisig.
+- `useGraphAuthKitWriteContract` -> Override of the [wagmi useWriteContract hook](https://wagmi.sh/react/api/hooks/useWriteContract) that creates the transaction on the Safe if the user is connected via multisig; otherwise, returns the `useWriteContract` mutation hook.
 
 ## Components
 

package/dist/hooks.d.ts

@@ -1,6 +1,7 @@
+import { type Compute } from '@wagmi/core/internal';
 import { type providers } from 'ethers';
 import { type Address, type Chain } from 'viem';
-import { type Config, type Connector, type ResolvedRegister, type UseAccountReturnType, type UseWalletClientReturnType, type UseWriteContractParameters, type UseWriteContractReturnType } from 'wagmi';
+import { type Config, type Connector, type ResolvedRegister, type UseAccountReturnType, type UseConfigParameters, type UseWalletClientReturnType, type UseWriteContractParameters, type UseWriteContractReturnType } from 'wagmi';
 import { SafeEthersSigner } from './safe/SafeEthersSigner';
 import { GraphAuthKitConnector } from './types';
 /**
@@ -45,6 +46,23 @@ export type UseAuthAccountReturnType<config extends Config = Config, chain = Con
  * preventing checks if the `address` is null further down the tree.
  */
 export declare function useAuthAccount(): UseAuthAccountReturnType;
+export type UseGraphAuthKitAccountEffectArgs = Compute<{
+    onConnect?(data: Compute<Pick<Extract<UseGraphAuthKitAccountReturnType, {
+        status: 'connected';
+    }>, 'address' | 'addresses' | 'chain' | 'chainId' | 'connector' | 'eoa'> & {
+        isReconnected: boolean;
+    }>): void;
+    onDisconnect?(): void;
+} & UseConfigParameters>;
+/**
+ * Override hook of the wagmi `useAccountEffect` that listens to changes derived from the `useGraphAuthKitAccount` hook.
+ * Listening to the `useAccountEffect` hook does not work when the user connects via a multisig in the graph-auth-kit
+ * as the connected account is the EoA and not the Safe address.
+ * This hooks listens on account changes, but checks if the user has connected through a multisig.
+ *
+ * @see https://wagmi.sh/react/api/hooks/useAccountEffect
+ */
+export declare function useGraphAuthKitAccountEffect(args?: UseGraphAuthKitAccountEffectArgs): void;
 /**
  * Override hook of wagmi `useWalletClient`.
  * The GraphAuthKit lets users connect to a Safe by entering the Safe information in,

package/dist/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,MAAM,CAAA;AAC3D,OAAO,EACL,KAAK,MAAM,EACX,KAAK,SAAS,EACd,KAAK,gBAAgB,EAErB,KAAK,oBAAoB,EAKzB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAChC,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAG1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG/C;;;;GAIG;AACH,wBAAgB,uBAAuB,2DAuBtC;AAED,wBAAgB,wBAAwB,IAAI,qBAAqB,GAAG,IAAI,CAcvE;AAED,MAAM,MAAM,gCAAgC,GAAG,oBAAoB,GACjE,QAAQ,CAAC;IACP,wGAAwG;IACxG,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACrB,CAAC,CAAA;AACJ;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,IAAI,gCAAgC,CAiCzE;AAED,MAAM,MAAM,wBAAwB,CAClC,MAAM,SAAS,MAAM,GAAG,MAAM,EAE9B,KAAK,GAAG,MAAM,SAAS,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAC9D;IACF,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC,CAAA;IAC3C,KAAK,EAAE,KAAK,GAAG,SAAS,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;CACrB,GAAG,QAAQ,CAAC;IACX,wGAAwG;IACxG,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACrB,CAAC,CAAA;AACF;;;;;GAKG;AACH,wBAAgB,cAAc,IAAI,wBAAwB,CAczD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,IAAI,yBAAyB,CAgBvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,SAAS,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,EAChH,UAAU,GAAE,0BAA0B,CAAC,MAAM,EAAE,OAAO,CAAM,GAC3D,0BAA0B,CAAC,MAAM,EAAE,OAAO,CAAC,CA8B7C"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,MAAM,CAAA;AAC3D,OAAO,EACL,KAAK,MAAM,EACX,KAAK,SAAS,EACd,KAAK,gBAAgB,EAErB,KAAK,oBAAoB,EAGzB,KAAK,mBAAmB,EAGxB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAChC,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAG1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG/C;;;;GAIG;AACH,wBAAgB,uBAAuB,2DAuBtC;AAED,wBAAgB,wBAAwB,IAAI,qBAAqB,GAAG,IAAI,CAcvE;AAED,MAAM,MAAM,gCAAgC,GAAG,oBAAoB,GACjE,QAAQ,CAAC;IACP,wGAAwG;IACxG,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACrB,CAAC,CAAA;AACJ;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,IAAI,gCAAgC,CAiCzE;AAED,MAAM,MAAM,wBAAwB,CAClC,MAAM,SAAS,MAAM,GAAG,MAAM,EAE9B,KAAK,GAAG,MAAM,SAAS,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAC9D;IACF,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC,CAAA;IAC3C,KAAK,EAAE,KAAK,GAAG,SAAS,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;CACrB,GAAG,QAAQ,CAAC;IACX,wGAAwG;IACxG,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACrB,CAAC,CAAA;AACF;;;;;GAKG;AACH,wBAAgB,cAAc,IAAI,wBAAwB,CAczD;AAED,MAAM,MAAM,gCAAgC,GAAG,OAAO,CACpD;IACE,SAAS,CAAC,CACR,IAAI,EAAE,OAAO,CACX,IAAI,CACF,OAAO,CAAC,gCAAgC,EAAE;QAAE,MAAM,EAAE,WAAW,CAAA;KAAE,CAAC,EAClE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,KAAK,CACpE,GAAG;QACF,aAAa,EAAE,OAAO,CAAA;KACvB,CACF,GACA,IAAI,CAAA;IACP,YAAY,CAAC,IAAI,IAAI,CAAA;CACtB,GAAG,mBAAmB,CACxB,CAAA;AACD;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,IAAI,GAAE,gCAAqC,QAkDvF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,IAAI,yBAAyB,CAgBvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,SAAS,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,EAChH,UAAU,GAAE,0BAA0B,CAAC,MAAM,EAAE,OAAO,CAAM,GAC3D,0BAA0B,CAAC,MAAM,EAAE,OAAO,CAAC,CA8B7C"}

package/dist/index.js

@@ -6,9 +6,10 @@ import { k, A, p, B, D, s, g, h, L, e, M, R, r, a, S, l, q, j, m, o, f, n, d, i
 import { u as useGraphAuthKitInnerContext, b as clientToProvider } from "./GraphAuthKit.context-DzwGnUfB.js";
 import { a as a2, f as f2, c, k as k2, g as g2, i as i2, h as h2, j as j2, e as e2 } from "./GraphAuthKit.context-DzwGnUfB.js";
 import { useMutation } from "@tanstack/react-query";
-import { useMemo } from "react";
+import { watchAccount } from "@wagmi/core";
+import { useMemo, useEffect } from "react";
 import { encodeFunctionData, getAddress } from "viem";
-import { useChainId, useConnectorClient, useAccount, useWalletClient, useConfig, useSwitchChain } from "wagmi";
+import { useChainId, useConnectorClient, useAccount, useConfig, useWalletClient, useSwitchChain } from "wagmi";
 import { writeContractMutationOptions } from "wagmi/query";
 import { VoidSigner } from "@ethersproject/abstract-signer";
 import { OperationType } from "@safe-global/safe-core-sdk-types";
@@ -387,6 +388,43 @@ function useAuthAccount() {
     eoa: auth.eoa
   };
 }
+function useGraphAuthKitAccountEffect(args = {}) {
+  const { onConnect, onDisconnect } = args;
+  const config = useConfig(args);
+  const { _enteredMultisigInfo } = useGraphAuthKitInnerContext();
+  useEffect(() => {
+    return watchAccount(config, {
+      onChange(account, prevAccount) {
+        if ((prevAccount.status === "reconnecting" || prevAccount.status === "connecting" && prevAccount.address === void 0) && account.status === "connected" || account.status === "connected" && (_enteredMultisigInfo == null ? void 0 : _enteredMultisigInfo.address) != null && _enteredMultisigInfo.address !== account.address) {
+          let { address, addresses, chain, chainId, connector } = account;
+          let eoa = void 0;
+          console.log("account status has changed.firing onConnect", _enteredMultisigInfo ?? {});
+          if (_enteredMultisigInfo != null) {
+            const [, ...rest] = addresses;
+            const multisigAddress = getAddress(_enteredMultisigInfo.address);
+            eoa = address;
+            address = multisigAddress;
+            addresses = [multisigAddress, eoa, ...rest];
+          }
+          const isReconnected = prevAccount.status === "reconnecting" || // if `previousAccount.status` is `undefined`, the connector connected immediately.
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          prevAccount.status === void 0;
+          onConnect == null ? void 0 : onConnect({
+            address,
+            addresses,
+            eoa,
+            chain,
+            chainId,
+            connector,
+            isReconnected
+          });
+        } else if (prevAccount.status === "connected" && account.status === "disconnected") {
+          onDisconnect == null ? void 0 : onDisconnect();
+        }
+      }
+    });
+  }, [config, _enteredMultisigInfo, onConnect, onDisconnect]);
+}
 function useGraphAuthKitWalletClient() {
   const ctx = useGraphAuthKitInnerContext();
   const walletClient = useWalletClient();
@@ -518,6 +556,7 @@ export {
   useClientToEthersSigner,
   e2 as useGraphAuthKit,
   useGraphAuthKitAccount,
+  useGraphAuthKitAccountEffect,
   useGraphAuthKitConnector,
   useGraphAuthKitWalletClient,
   useGraphAuthKitWriteContract

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgeandnode/graph-auth-kit",
-  "version": "0.4.2",
+  "version": "0.4.3-feat-useGraphAuthKitAccountEffect-hook-1723603598026-07ebb8b825ae109ee0ed9d2795fdd44ebe4deafc",
   "private": false,
   "description": "Wallet authentication connect kit in The Graph suite of applications",
   "author": "Edge & Node",
@@ -59,7 +59,6 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "@wagmi/core": "^2.13.4",
     "autoprefixer": "^10.4.19",
     "ethers": "5.7.2",
     "postcss": "^8.4.40",
@@ -69,12 +68,13 @@
     "ts-node": "^10.9.2",
     "viem": "2.19.3",
     "wagmi": "2.12.5",
-    "@edgeandnode/gds": "^5.27.0",
     "@edgeandnode/common": "^6.18.0",
     "@edgeandnode/go": "^6.42.0",
+    "@edgeandnode/gds": "^5.27.0",
     "@edgeandnode/test-utils": "^2.0.0"
   },
   "dependencies": {
+    "@wagmi/core": "^2.13.4",
     "zod": "^3.23.8"
   },
   "scripts": {