@edgeandnode/graph-auth-kit 0.2.0 → 0.3.0

package/README.md

@@ -231,6 +231,37 @@ 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.
 
+## Components
+
+- `Connected` -> renders the passed in `children` _only if_ the user is connected.
+
+```tsx
+import { Connected } from '@edgeandnode/graph-auth-kit'
+
+export function ShowMeConnected() {
+  return <Connected>{(account) => <div>Connected Wallet: {account.address}</div>}</Connected>
+}
+```
+
+- `Disconnected` -> renders the passed in `children` _only if_ the user id disconnected. Useful for rendering components like a "Connect Wallet" CTA that should only render if the user is _not_ authenticated.
+
+```tsx
+import { ExperimentalButton as Button } from '@edgeandnode/gds'
+import { Disconnected, useGraphAuthKit } from '@edgeandnode/graph-auth-kit'
+
+export function ShowMeDisconnected() {
+  const authkit = useGraphAuthKit()
+
+  return (
+    <Disconnected>
+      <Button variant="primary" onClick={() => authkit.openConnectModal()}>
+        Connect Wallet
+      </Button>
+    </Disconnected>
+  )
+}
+```
+
 ## References
 
 - [`wagmi`](https://wagmi.sh/)

package/dist/Components/Connected.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type UseGraphAuthKitAccountReturnType } from '../hooks';
+export type ConnectedProps = {
+    children(account: {
+        address: NonNullable<UseGraphAuthKitAccountReturnType['address']>;
+        chain: NonNullable<UseGraphAuthKitAccountReturnType['chain']>;
+    }): ReactNode;
+};
+/**
+ * Utility component that only renders the passed in children if the user is authenticated.
+ * Otherwise, it renders null.
+ * Useful for wrapping components where you want to guarantee that they are only rendered,
+ * if the user is connected.
+ *
+ * @example
+ * ```tsx
+ * import { Connected } from '@edgeandnode/graph-auth-kit'
+ *
+ * export function ShowMeConnected() {
+ *  return (
+ *    <Connected>
+ *      {(account) => <div>Connected Wallet: {account.address}</div>}
+ *    </Connected>
+ *  )
+ * }
+ * ```
+ */
+export declare function Connected({ children }: ConnectedProps): ReactNode;
+//# sourceMappingURL=Connected.d.ts.map

package/dist/Components/Connected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Connected.d.ts","sourceRoot":"","sources":["../../src/Components/Connected.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAA0B,KAAK,gCAAgC,EAAE,MAAM,UAAU,CAAA;AAExF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,OAAO,EAAE;QAChB,OAAO,EAAE,WAAW,CAAC,gCAAgC,CAAC,SAAS,CAAC,CAAC,CAAA;QACjE,KAAK,EAAE,WAAW,CAAC,gCAAgC,CAAC,OAAO,CAAC,CAAC,CAAA;KAC9D,GAAG,SAAS,CAAA;CACd,CAAA;AACD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,cAAc,aAWrD"}

package/dist/Components/Disconnected.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+export type DisconnectedProps = {
+    children: ReactNode;
+};
+/**
+ * Utility component that only renders the passed in children if the user is NOT connected/authenticated.
+ * If the user is connected, this will render null.
+ * Useful for wrapping components where you want to guarantee that they are only rendered,
+ * if the user is NOT connected.
+ * Such as: a connect wallet button, etc
+ *
+ * @example
+ * ```tsx
+ * import { Disconnected, useGraphAuthKit } from '@edgeandnode/graph-auth-kit'
+ *
+ * export function ShowMeDisonnected() {
+ *  const authkit = useGraphAuthKit()
+ *
+ *  return (
+ *    <Disconnected>
+ *      <button onClick={() => authkit.openConnectModal()}>Connect</button>
+ *    </Disconnected>
+ *  )
+ * }
+ * ```
+ */
+export declare function Disconnected({ children }: DisconnectedProps): ReactNode;
+//# sourceMappingURL=Disconnected.d.ts.map

package/dist/Components/Disconnected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disconnected.d.ts","sourceRoot":"","sources":["../../src/Components/Disconnected.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,aAQ3D"}

package/dist/Components/index.d.ts

@@ -0,0 +1,3 @@
+export { Connected, type ConnectedProps } from './Connected';
+export { Disconnected, type DisconnectedProps } from './Disconnected';
+//# sourceMappingURL=index.d.ts.map

package/dist/Components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/hooks.d.ts

@@ -1,6 +1,6 @@
 import { type providers } from 'ethers';
-import { type Address } from 'viem';
-import { type Config, type ResolvedRegister, type UseAccountReturnType, type UseWalletClientReturnType, type UseWriteContractParameters, type UseWriteContractReturnType } from 'wagmi';
+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 { SafeEthersSigner } from './safe/SafeEthersSigner';
 import { type GraphAuthKitConnector } from './types';
 /**
@@ -28,6 +28,23 @@ export type UseGraphAuthKitAccountReturnType = UseAccountReturnType & Readonly<{
  * @see https://wagmi.sh/react/api/hooks/useAccount
  */
 export declare function useGraphAuthKitAccount(): UseGraphAuthKitAccountReturnType;
+export type UseAuthAccountReturnType<config extends Config = Config, chain = Config extends config ? Chain : config['chains'][number]> = {
+    address: Address;
+    addresses: readonly [Address, ...Address[]];
+    chain: chain | undefined;
+    chainId: number;
+    connector: Connector;
+} & Readonly<{
+    /** If the user is connected to a multisig, this is the EoA signer address the user is connected with */
+    eoa?: Address | null;
+}>;
+/**
+ * Hook that returns the authenticated account information.
+ * If the wallet is not connected, an error is thrown.
+ * This hooks is useful to render where you _know_ the wallet is connected,
+ * preventing checks if the `address` is null further down the tree.
+ */
+export declare function useAuthAccount(): UseAuthAccountReturnType;
 /**
  * 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,EAAc,MAAM,MAAM,CAAA;AAC/C,OAAO,EACL,KAAK,MAAM,EACX,KAAK,gBAAgB,EAErB,KAAK,oBAAoB,EAKzB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAChC,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAGpD;;;;GAIG;AACH,wBAAgB,uBAAuB,2DAwBtC;AAED,wBAAgB,wBAAwB,IAAI,qBAAqB,GAAG,IAAI,CAIvE;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;;;;;;;;;;;;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":"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;AAGd,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI1D,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAGpD;;;;GAIG;AACH,wBAAgB,uBAAuB,2DAwBtC;AAED,wBAAgB,wBAAwB,IAAI,qBAAqB,GAAG,IAAI,CAIvE;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"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './client';
+export * from './Components';
 export * from './constants';
 export * from './GraphAuthKit.context';
 export * from './hooks';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { u as useGraphAuthKitInnerContext, e as clientToProvider } from "./GraphAuthKit.context-DBwb2jco.js";
-import { h, B, m, a, l, j, R, k, b, f, g, c, r, o, n, p, q, i } from "./GraphAuthKit.context-DBwb2jco.js";
+import { u as useGraphAuthKitInnerContext, e as clientToProvider } from "./GraphAuthKit.context-B7OJAuEY.js";
+import { h, B, m, a, l, j, R, k, b, f, g, c, r, o, n, p, q, i } from "./GraphAuthKit.context-B7OJAuEY.js";
 import { b as createSafe, c as createApiKit } from "./utils-KuRu9vB-.js";
 import { j as j2, A, D, g as g2, h as h2, L, e, M, a as a2, S, k as k2, l as l2, f as f2, d, i as i2 } from "./utils-KuRu9vB-.js";
 import { useMutation } from "@tanstack/react-query";
@@ -362,6 +362,21 @@ function useGraphAuthKitAccount() {
   }
   return { ...data, eoa: void 0 };
 }
+function useAuthAccount() {
+  const auth = useGraphAuthKitAccount();
+  if (auth.address == null || auth.addresses == null) {
+    throw new Error("Wallet is not connected");
+  }
+  return {
+    address: auth.address,
+    addresses: auth.addresses,
+    // not sure why this type assertion is necessary. but addresses comes across as [string, ...string[]]
+    chain: auth.chain,
+    chainId: auth.chainId,
+    connector: auth.connector,
+    eoa: auth.eoa
+  };
+}
 function useGraphAuthKitWalletClient() {
   const ctx = useGraphAuthKitInnerContext();
   const walletClient = useWalletClient();
@@ -397,12 +412,31 @@ function useGraphAuthKitWriteContract(parameters = {}) {
     writeContractAsync: mutateAsync
   };
 }
+function Connected({ children }) {
+  const account = useGraphAuthKitAccount();
+  if (account.address == null || account.chain == null) {
+    return null;
+  }
+  return children({
+    address: account.address,
+    chain: account.chain
+  });
+}
+function Disconnected({ children }) {
+  const account = useGraphAuthKitAccount();
+  if (account.address == null || account.chain == null) {
+    return children;
+  }
+  return null;
+}
 export {
   j2 as AUTH_STORAGE_KEY,
   A as ApiKitUrlMap,
   h as BuildClientArgs,
   B as BuildPublicClientArgs,
+  Connected,
   D as DefChain,
+  Disconnected,
   m as GraphAuthKitConnector,
   a as GraphAuthKitContext,
   l as GraphAuthKitProps,
@@ -433,6 +467,7 @@ export {
   q as isChainTestnet,
   d as isSafeOwner,
   i2 as isValidSafe,
+  useAuthAccount,
   useClientToEthersSigner,
   i as useGraphAuthKit,
   useGraphAuthKitAccount,

package/dist/test-harness/index.js

@@ -2,7 +2,7 @@ import { jsx } from "@theme-ui/core/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createConfig, createStorage, cookieStorage, cookieToInitialState, WagmiProvider, useDisconnect } from "wagmi";
 import { mock } from "wagmi/connectors";
-import { c as chainIsSupportedChain, b as buildClient, G as GraphAuthKitInnerContext, d as defInnerState, u as useGraphAuthKitInnerContext, a as GraphAuthKitContext } from "../GraphAuthKit.context-DBwb2jco.js";
+import { c as chainIsSupportedChain, b as buildClient, G as GraphAuthKitInnerContext, d as defInnerState, u as useGraphAuthKitInnerContext, a as GraphAuthKitContext } from "../GraphAuthKit.context-B7OJAuEY.js";
 import { L as L2Chain, e as L2ChainTestnet, g as L1Chain, h as L1ChainTestnet, D as DefChain, j as AUTH_STORAGE_KEY } from "../utils-KuRu9vB-.js";
 function MockGraphAuthKitProvider(props) {
   const mockConfig = createConfig({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgeandnode/graph-auth-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "Wallet authentication connect kit in The Graph suite of applications",
   "author": "Edge & Node",
@@ -45,8 +45,8 @@
     "viem": "2.18.6",
     "wagmi": "2.12.1",
     "@edgeandnode/common": "^6.18.0",
-    "@edgeandnode/go": "^6.42.0",
-    "@edgeandnode/gds": "^5.27.0"
+    "@edgeandnode/gds": "^5.27.0",
+    "@edgeandnode/go": "^6.42.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.13",
@@ -59,6 +59,7 @@
     "@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,9 +70,9 @@
     "viem": "2.18.6",
     "wagmi": "2.12.2",
     "@edgeandnode/common": "^6.18.0",
-    "@edgeandnode/test-utils": "^2.0.0",
+    "@edgeandnode/gds": "^5.27.0",
     "@edgeandnode/go": "^6.42.0",
-    "@edgeandnode/gds": "^5.27.0"
+    "@edgeandnode/test-utils": "^2.0.0"
   },
   "dependencies": {
     "zod": "^3.23.8"

package/dist/{GraphAuthKit.context-DBwb2jco.js → GraphAuthKit.context-B7OJAuEY.js}

@@ -282,6 +282,36 @@ function GraphAuthKitInnerContextProvider({ infuraKey, children }) {
     }
   );
 }
+function chainIsSupportedChain(chain) {
+  return SupportedClientChainId.safeParse(chain.id).success;
+}
+function isChainL2(chain) {
+  return chain === L2Chain.id || chain === L2ChainTestnet.id;
+}
+function isChainL1(chain) {
+  return chain === L1Chain.id || chain === L1ChainTestnet.id;
+}
+function isChainMainnet(chain) {
+  return chain === L1Chain.id || chain === L2Chain.id;
+}
+function isChainTestnet(chain) {
+  return chain === L1ChainTestnet.id || chain === L2ChainTestnet.id;
+}
+function clientToProvider(client) {
+  var _a, _b;
+  const { chain, transport } = client;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: (_b = (_a = chain.contracts) == null ? void 0 : _a.ensRegistry) == null ? void 0 : _b.address
+  };
+  const provider = new providers.Web3Provider(transport, network);
+  return provider;
+}
+async function connectedWalletIsEoA(client, address) {
+  const code = await client.getCode({ address });
+  return code == null || code === "0x";
+}
 function ConnectorOption(props) {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -789,36 +819,6 @@ function ConnectModal() {
     }
   );
 }
-function chainIsSupportedChain(chain) {
-  return SupportedClientChainId.safeParse(chain.id).success;
-}
-function isChainL2(chain) {
-  return chain === L2Chain.id || chain === L2ChainTestnet.id;
-}
-function isChainL1(chain) {
-  return chain === L1Chain.id || chain === L1ChainTestnet.id;
-}
-function isChainMainnet(chain) {
-  return chain === L1Chain.id || chain === L2Chain.id;
-}
-function isChainTestnet(chain) {
-  return chain === L1ChainTestnet.id || chain === L2ChainTestnet.id;
-}
-function clientToProvider(client) {
-  var _a, _b;
-  const { chain, transport } = client;
-  const network = {
-    chainId: chain.id,
-    name: chain.name,
-    ensAddress: (_b = (_a = chain.contracts) == null ? void 0 : _a.ensRegistry) == null ? void 0 : _b.address
-  };
-  const provider = new providers.Web3Provider(transport, network);
-  return provider;
-}
-async function connectedWalletIsEoA(client, address) {
-  const code = await client.getCode({ address });
-  return code == null || code === "0x";
-}
 const GraphAuthKitContext = createContext({
   openConnectModal() {
   },