@graphprotocol/graph-auth-kit 7.8.1

package/README.md

@@ -0,0 +1,303 @@
+# @graphprotocol/graph-auth-kit
+
+Authentication Kit for connecting The Graph apps/dapps to a wallet.
+
+Relies on/requires [`wagmi`](https://wagmi.sh/) + [`viem`](https://viem.sh/) for allowing users to connect their wallets and interact with the connected auth state context.
+
+Exposes a simple `useGraphAuthKit` hook that lets the app open the connect modal, letting users connect to their wallet of choice (one of: injected/MetaMask, coinbase, WalletConnect, Safe). See integration example below.
+
+## Install
+
+Currently, `graph-auth-kit` has a lot of peer deps needed to interact with the library. But this may change after testing. At the very least, `wagmi, viem, @tanstack/react-query` will be needed.
+
+```bash
+# with bun
+bun add @graphprotocol/graph-auth-kit \
+  @graphprotocol/common \
+  @graphprotocol/gds \
+  @graphprotocol/go \
+  @emotion/react \
+  @tanstack/react-query \
+  cookies-next \
+  ethers@5.7.2 \
+  theme-ui \
+  viem@2.x \
+  wagmi
+
+# with pnpm
+pnpm add @graphprotocol/graph-auth-kit \
+  @graphprotocol/common \
+  @graphprotocol/gds \
+  @graphprotocol/go \
+  @emotion/react \
+  @tanstack/react-query \
+  cookies-next \
+  ethers@5.7.2 \
+  theme-ui \
+  viem@2.x \
+  wagmi
+```
+
+## Usage
+
+Properties:
+
+- `config` -> [REQUIRED]. The instantiated [wagmi config](https://wagmi.sh/react/api/createConfig) instance.
+- `queryClient` -> [OPTIONAL]. The `GraphAuthKitProvider` renders a `QueryClientProvider` instance. Pass in an instantiated `QueryClient` to use, otherwise, `GraphAuthKit` will instantiate its own.
+- `infuraKey` -> [REQUIRED]
+- `gatewayApiKey` -> [OPTIONAL]. A The Graph Gateway API key used to query Subgraphs published on the Graph Network. Used for ENS name resolution
+
+### Example
+
+- Setup the `GraphAuthKitProvider`.
+  - **Note** you do not need to add the `ConnectModal` component, the `GraphAuthKitProvider` renders it for us
+  - **Note** you do not need to add the `QueryClientProvider` as `GraphAuthKitProvider` instantiates and renders it
+    - you can pass a `QueryClient` instance to the `GraphAuthKitProvider`, otherwise, it will instantiate its own
+
+```tsx
+// _app.tsx
+
+import { QueryClient } from '@tanstack/react-query'
+import { AppProps } from 'next'
+import { useRef } from 'react'
+import { createClient } from 'viem'
+import { cookieStorage, createConfig, createStorage } from 'wagmi'
+import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
+
+import { AnalyticsProvider, GDSProvider } from '@graphprotocol/gds'
+import {
+  AUTH_STORAGE_KEY,
+  buildInfuraHttpTransport,
+  chainIsSupportedChain,
+  DefChain,
+  GraphAuthKitProvider,
+  L1Chain,
+  L1ChainTestnet,
+  L2Chain,
+  L2ChainTestnet,
+} from '@graphprotocol/graph-auth-kit'
+
+import { FutureNextLink } from '../components/FutureNextLink'
+import { Layout } from '../components/Layout'
+
+const infuraKey = process.env.INFURA_KEY!
+const walletConnectProjectID = process.env.WALLETCONNECT_PROJECT_ID!
+const gatewayApiKey = process.env.GATEWAY_API_KEY
+
+import '@graphprotocol/gds/style.css'
+import '../app.css'
+
+const config = createConfig({
+  chains: [L2Chain, L2ChainTestnet, L1Chain, L1ChainTestnet] as const,
+  ssr: typeof window !== 'undefined',
+  client(params) {
+    const chain = chainIsSupportedChain(params.chain) ? params.chain : DefChain
+    const transport = buildInfuraHttpTransport({
+      chain: chain.id,
+      infuraKey,
+    })
+
+    return createClient({
+      chain,
+      transport,
+    })
+  },
+  connectors: [
+    injected(),
+    coinbaseWallet({
+      appName: 'Boom',
+    }),
+    walletConnect({
+      projectId: env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+      qrModalOptions: {
+        themeMode: 'dark',
+      },
+    }),
+  ],
+  storage: createStorage({
+    storage: cookieStorage,
+    key: AUTH_STORAGE_KEY,
+  }),
+})
+
+declare module 'wagmi' {
+  interface Register {
+    config: typeof config
+  }
+}
+
+export default function App({ Component, router, pageProps }: AppProps) {
+  const queryClient = useRef<QueryClient>()
+  if (!queryClient.current) {
+    queryClient.current = new QueryClient({
+      defaultOptions: {
+        queries: {
+          // With SSR, we usually want to set some default staleTime
+          // above 0 to avoid refetching immediately on the client
+          staleTime: 60 * 1000,
+        },
+      },
+    })
+  }
+
+  return (
+    <GDSProvider clientRouter={router} clientLink={FutureNextLink} useThemeUI>
+      <AnalyticsProvider
+        app="EXPLORER"
+        clientRouter={router}
+        mixpanel={{
+          sdk: mixpanel,
+          token: process.env.MIXPANEL_TOKEN ?? null,
+        }}
+        googleAnalytics={{
+          sdk: googleAnalytics,
+          measurementId: process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID ?? null,
+        }}
+      >
+        <GraphAuthKitProvider
+          config={config}
+          queryClient={queryClient.current}
+          infuraKey={infuraKey}
+          gatewayApiKey={gatewayApiKey}
+        >
+          <Layout>
+            <DefaultSeo {...defaultSEO} />
+            <Component {...pageProps} />
+          </Layout>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </GraphAuthKitProvider>
+      </AnalyticsProvider>
+    </GDSProvider>
+  )
+}
+```
+
+- Usage in a component
+
+```tsx
+// components/Layout.tsx
+
+import { ReactNode } from 'react'
+import { useAccountEffect, useEnsName } from 'wagmi'
+
+import { Layout as GDSLayout, UserProfile } from '@graphprotocol/gds'
+import { GlobalFooter, GlobalHeader, NPSForm } from '@graphprotocol/go'
+import { L1Chain, useGraphAuthKitConnector, useGraphAuthKit, useGraphAuthKitAccount } from '@graphprotocol/graph-auth-kit/hooks'
+
+import { NavDropDownMenu } from './NavDropDownMenu'
+
+export function Layout({ children }: Readonly<{ children: ReactNode }>) {
+  const authkit = useGraphAuthKit()
+  const { address } = useGraphAuthKitAccount()
+  const { data: ens } = useEnsName({ address, blockTag: 'latest', chainId: L1Chain.id })
+  const connector = useGraphAuthKitConnector()
+
+  const walletConnected = Boolean(address)
+
+  useAccountEffect({
+    onConnect(data) {
+      console.log('user connected wallet', {data})
+    },
+    onDisconnect() {
+      console.log('user disconnected wallet')
+    },
+  })
+
+  return (
+    <GDSLayout
+      header={
+        <GlobalHeader
+          activeProduct="EXPLORER"
+          basePath="/explorer"
+          showSupportButton={walletConnected}
+          rigtContent={(defaultContent) => (
+            <>
+              {!walletConnected ?
+                <GlobalHeader.ConnectButton onClick={() => authkit.openConnectModal()} />
+              ) : (
+                <UserProfile
+                  ethereumAccount={address}
+                  graphAccount={...}
+                  ens={ens}
+                  profileUrl={`/profile/${address}?view=Overview`}
+                  profileUrlAs={`/profile/${address}?view=Overview`}
+                  onConnect={() => authkit.openConnectModal()}
+                  onDisconnect={() => authkit.disconnect()}
+                  userDropDownMenu={<NavDropDownMenu />}
+                  accountTag={connector === 'safe' ? 'multisig' : undefined}
+                />
+              )}
+            </>
+          )}
+        />
+      }
+      footer={
+        <>
+          <NPSForm sx={{ mb: Spacing['64px'] }} />
+          <GlobalFooter />
+        </>
+      }
+    >
+      {children}
+    </GDSLayout>
+  )
+}
+```
+
+## Hooks
+
+- `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
+
+- `Connected` -> renders the passed in `children` _only if_ the user is connected.
+
+```tsx
+import { Connected } from '@graphprotocol/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 '@graphprotocol/gds'
+import { Disconnected, useGraphAuthKit } from '@graphprotocol/graph-auth-kit'
+
+export function ShowMeDisconnected() {
+  const authkit = useGraphAuthKit()
+
+  return (
+    <Disconnected>
+      <Button variant="primary" onClick={() => authkit.openConnectModal()}>
+        Connect Wallet
+      </Button>
+    </Disconnected>
+  )
+}
+```
+
+- `SwitchChain` -> Similar to the `SwitchNetwork` component from GDS, but uses the [wagmi useSwitchChain hook](https://wagmi.sh/react/api/hooks/useSwitchChain).
+
+```tsx
+import { ExperimentalButton as Button } from '@graphprotocol/gds'
+import { L2Chain, SwitchChain } from '@graphprotocol/graph-auth-kit'
+
+export function LetMeSwitchChain() {
+  return <SwitchChain requestedChain={L2Chain} />
+}
+```
+
+## References
+
+- [`wagmi`](https://wagmi.sh/)
+- [`viem`](https://viem.sh/)
+- [Engineering Plan](https://www.notion.so/edgeandnode/Replace-Wallet-Connection-Library-0e4c5e1e015b428dbb52b1f627b712f0)

package/dist/Components/ConnectModal.d.ts

@@ -0,0 +1,2 @@
+export declare function ConnectModal(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectModal.d.ts","sourceRoot":"","sources":["../../src/Components/ConnectModal.tsx"],"names":[],"mappings":"AASA,wBAAgB,YAAY,4CA4B3B"}

package/dist/Components/Connected.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { UseGraphAuthKitAccountReturnType } from '../hooks';
+import { GraphAuthKitConnector } from '../types';
+export type ConnectedAccountReturn = Readonly<{
+    address: NonNullable<UseGraphAuthKitAccountReturnType['address']>;
+    chain: NonNullable<UseGraphAuthKitAccountReturnType['chain']>;
+    connector: GraphAuthKitConnector;
+    connectedWithMultisig: UseGraphAuthKitAccountReturnType['connectedWithMultisig'];
+}>;
+export type ConnectedProps = {
+    children(account: ConnectedAccountReturn): 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 '@graphprotocol/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":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAA0B,KAAK,gCAAgC,EAA4B,MAAM,UAAU,CAAA;AAClH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAErD,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC5C,OAAO,EAAE,WAAW,CAAC,gCAAgC,CAAC,SAAS,CAAC,CAAC,CAAA;IACjE,KAAK,EAAE,WAAW,CAAC,gCAAgC,CAAC,OAAO,CAAC,CAAC,CAAA;IAC7D,SAAS,EAAE,qBAAqB,CAAA;IAChC,qBAAqB,EAAE,gCAAgC,CAAC,uBAAuB,CAAC,CAAA;CACjF,CAAC,CAAA;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,OAAO,EAAE,sBAAsB,GAAG,SAAS,CAAA;CACrD,CAAA;AACD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,cAAc,aAcrD"}

package/dist/Components/ConnectorOption.d.ts

@@ -0,0 +1,7 @@
+import { GraphAuthKitConnectorOpt } from '../types';
+export type ConnectorOptionProps = GraphAuthKitConnectorOpt & {
+    selected?: boolean;
+    disabled?: boolean;
+};
+export declare function ConnectorOption(props: ConnectorOptionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectorOption.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorOption.d.ts","sourceRoot":"","sources":["../../src/Components/ConnectorOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAExD,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GAAG;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAiB1D"}

package/dist/Components/Disconnected.d.ts

@@ -0,0 +1,28 @@
+import { 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 '@graphprotocol/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":"AACA,OAAO,KAAK,EAAE,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/MultisigSignerOptions.d.ts

@@ -0,0 +1,2 @@
+export declare function MultisigSignerOptions(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultisigSignerOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultisigSignerOptions.d.ts","sourceRoot":"","sources":["../../src/Components/MultisigSignerOptions.tsx"],"names":[],"mappings":"AAYA,wBAAgB,qBAAqB,4CAgHpC"}

package/dist/Components/PrimaryConnectOptions.d.ts

@@ -0,0 +1,2 @@
+export declare function PrimaryConnectOptions(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrimaryConnectOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryConnectOptions.d.ts","sourceRoot":"","sources":["../../src/Components/PrimaryConnectOptions.tsx"],"names":[],"mappings":"AASA,wBAAgB,qBAAqB,4CAuDpC"}

package/dist/Components/SafeInputForm.d.ts

@@ -0,0 +1,2 @@
+export declare function SafeInputForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SafeInputForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SafeInputForm.d.ts","sourceRoot":"","sources":["../../src/Components/SafeInputForm.tsx"],"names":[],"mappings":"AA0EA,wBAAgB,aAAa,4CAqL5B"}

package/dist/Components/SafeSelection.d.ts

@@ -0,0 +1,2 @@
+export declare function SafeSelection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SafeSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SafeSelection.d.ts","sourceRoot":"","sources":["../../src/Components/SafeSelection.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,aAAa,4CA+F5B"}

package/dist/Components/SwitchChain.d.ts

@@ -0,0 +1,24 @@
+import { Compute, ExactPartial } from '@wagmi/core/internal';
+import { AddEthereumChainParameter } from 'viem';
+import { Config, Connector, ResolvedRegister } from 'wagmi';
+export type SwitchChainProps<config extends Config = ResolvedRegister['config']> = {
+    /** The chain to switch to. Must be one of the available chains in the registered config */
+    requestedChain: config['chains'][number];
+    /**
+     * Listens to the switchChain success event and emits.
+     * Useful for updating the UI when the chain switches.
+     */
+    onSuccess?(data: {
+        [key in keyof Extract<config['chains'][number], {
+            id: Config extends config ? number : config['chains'][number]['id'];
+        }>]: Extract<config['chains'][number], {
+            id: Config extends config ? number : config['chains'][number]['id'];
+        }>[key];
+    }, variables: {
+        connector?: Connector | undefined;
+        chainId: config['chains'][number]['id'];
+        addEthereumChainParameter?: Compute<ExactPartial<Omit<AddEthereumChainParameter, 'chainId'>>> | undefined;
+    }): Promise<void> | void;
+};
+export declare function SwitchChain<const config extends Config = ResolvedRegister['config']>(props: SwitchChainProps<config>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SwitchChain.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchChain.d.ts","sourceRoot":"","sources":["../../src/Components/SwitchChain.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,MAAM,CAAA;AACrD,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,gBAAgB,EAA6B,MAAM,OAAO,CAAA;AAIrG,MAAM,MAAM,gBAAgB,CAAC,MAAM,SAAS,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI;IACjF,2FAA2F;IAC3F,cAAc,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;IACxC;;;OAGG;IACH,SAAS,CAAC,CACR,IAAI,EAAE;SACH,GAAG,IAAI,MAAM,OAAO,CACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EACxB;YAAE,EAAE,EAAE,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;SAAE,CACxE,GAAG,OAAO,CACT,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EACxB;YAAE,EAAE,EAAE,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;SAAE,CACxE,CAAC,GAAG,CAAC;KACP,EACD,SAAS,EAAE;QACT,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;QACjC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;QACvC,yBAAyB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;KAC1G,GACA,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxB,CAAA;AACD,wBAAgB,WAAW,CAAC,KAAK,CAAC,MAAM,SAAS,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,kDAuCpH"}

package/dist/Components/index.d.ts

@@ -0,0 +1,4 @@
+export { Connected, type ConnectedAccountReturn, type ConnectedProps } from './Connected';
+export { Disconnected, type DisconnectedProps } from './Disconnected';
+export { SwitchChain, type SwitchChainProps } from './SwitchChain';
+//# 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,sBAAsB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/GraphAuthKit.context.d.ts

@@ -0,0 +1,130 @@
+import { QueryClient } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { Config, ResolvedRegister } from 'wagmi';
+import { GraphAuthKitProps } from './types';
+export type GraphAuthKitState = {
+    /** Opens the GraphAuthKit connect modal to allow user to go through wallet connect flow */
+    openConnectModal(props?: {
+        title?: ReactNode;
+        subtitle?: ReactNode;
+        afterConnectUrl?: string;
+    }): void;
+    /** Closes the GraphAuthKit connect modal */
+    closeConnectModal(): void;
+    /** Disconnect the GraphAuthKit state. Wraps the disconnect from the useDisconnect() hook */
+    disconnect(): void | Promise<void>;
+};
+export declare const GraphAuthKitContext: import('react').Context<GraphAuthKitState>;
+export declare function useGraphAuthKit(): GraphAuthKitState;
+export type GraphAuthKitProviderProps<config extends Config = ResolvedRegister['config']> = GraphAuthKitProps & {
+    /**
+     * [Required]. The instantiated wagmi config instance.
+     */
+    config: config;
+    /**
+     * [Optional]. An instantiated @tanstack/react-query `QueryClient` instance.
+     * If null, will instantiate a `QueryClient` and pass to the `QueryClientProvider`.
+     */
+    queryClient?: QueryClient;
+    safeApiKey?: string;
+} & Readonly<{
+    children: ReactNode;
+}>;
+/**
+ * Builds and renders a wagmi config instance wrapped in a `WagmiProvider` context.
+ * This then wraps the `GraphAuthKitContext.Provider` which provides the connect modal state for app users to connect their wallet.
+ *
+ * @example <caption>Configure and render the GraphAuthKit for explorer</caption>
+ * ```tsx
+ * // _app.tsx
+ *
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { AppProps } from 'next'
+ * import { useRef } from 'react'
+ * import { createClient } from 'viem'
+ * import { cookieStorage, createConfig, createStorage } from 'wagmi'
+ * import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
+ *
+ * import {
+ *  AUTH_STORAGE_KEY,
+ *  buildInfuraHttpTransport,
+ *  chainIsSupportedChain,
+ *  DefChain,
+ *  GraphAuthKitProvider,
+ *  L1Chain,
+ *  L2Chain,
+ * } from '@graphprotocol/graph-auth-kit'
+ *
+ * const infuraKey = process.env.INFURA_KEY!
+ * const walletConnectProjectID = process.env.WALLETCONNECT_PROJECT_ID!
+ * const gatewayApiKey = process.env.GATEWAY_API_KEY
+ * const safeApiKey = process.env.SAFE_API_KEY
+ *
+ * const config = createConfig({
+ *  chains: [L2Chain, L1Chain] as const,
+ *  ssr: typeof window !== 'undefined',
+ *  client(params) {
+ *    const chain = chainIsSupportedChain(params.chain) ? params.chain : DefChain
+ *    const transport = buildInfuraHttpTransport({
+ *      chain: chain.id,
+ *      infuraKey
+ *    })
+ *
+ *    return createClient({ chain, transport })
+ *  },
+ *  connectors: [
+ *    injected(),
+ *    coinbaseWallet({
+ *      appName: 'The Graph Explorer',
+ *      appLogoUrl: 'https://storage.googleapis.com/graph-website/seo/graph-explorer.jpg'
+ *    }),
+ *    walletConnect({
+ *      projectId: walletConnectProjectID,
+ *      metadata: {
+ *        name: 'The Graph Explorer',
+ *        description: `See what’s happening on The Graph Network and participate as a Delegator, Curator, Indexer, or Developer.`,
+ *        url: 'https://thegraph.com/explorer',
+ *        icons: ['https://storage.googleapis.com/graph-website/seo/graph-explorer.jpg'],
+ *      },
+ *      qrModalOptions: {
+ *        themeMode: 'dark'
+ *      }
+ *    })
+ *  ],
+ *  storage: createStorage({ storage: cookieStorage, key: AUTH_STORAGE_KEY })
+ * })
+ *
+ * export default function App({ Component, router, pageProps }: AppProps) {
+ *  const queryClient = useRef<QueryClient>()
+ *  if (!queryClient.current) {
+ *    queryClient.current = new QueryClient({
+ *      defaultOptions: {
+ *        queries: {
+ *          staleTime: 60 * 1000
+ *        }
+ *      }
+ *    })
+ *  }
+ *
+ *  declare module 'wagmi' {
+ *    interface Register {
+ *      config: typeof config
+ *    }
+ *  }
+ *
+ *  return (
+ *    <GraphAuthKitProvider
+ *      config={config}
+ *      queryClient={queryClient.current}
+ *      infuraKey={infuraKey}
+ *      gatewayApiKey={gatewayApiKey}
+ *      safeApiKey={safeApiKey}
+ *     >
+ *       <Component {...pageProps} />
+ *     </GraphAuthKitProvider>
+ *  )
+ * }
+ * ```
+ */
+export declare function GraphAuthKitProvider<const config extends Config = ResolvedRegister['config']>(props: GraphAuthKitProviderProps<config>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GraphAuthKit.context.d.ts.map

package/dist/GraphAuthKit.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphAuthKit.context.d.ts","sourceRoot":"","sources":["../src/GraphAuthKit.context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAuB,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,gBAAgB,EAAgC,MAAM,OAAO,CAAA;AAIxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,2FAA2F;IAC3F,gBAAgB,CAAC,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,eAAe,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACrG,4CAA4C;IAC5C,iBAAiB,IAAI,IAAI,CAAA;IACzB,4FAA4F;IAC5F,UAAU,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,mBAAmB,4CAI9B,CAAA;AAEF,wBAAgB,eAAe,sBAE9B;AAED,MAAM,MAAM,yBAAyB,CAAC,MAAM,SAAS,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,iBAAiB,GAAG;IAC9G;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,QAAQ,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC,CAAA;AACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,CAAC,MAAM,SAAS,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,EAC3F,KAAK,EAAE,yBAAyB,CAAC,MAAM,CAAC,2CA0BzC"}