@edgeandnode/graph-auth-kit 0.2.0 → 0.3.1

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"}