@edgeandnode/graph-auth-kit 0.2.0

package/README.md

@@ -0,0 +1,238 @@
+# @edgeandnode/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 @edgeandnode/graph-auth-kit \
+  @edgeandnode/common \
+  @edgeandnode/gds \
+  @edgeandnode/go \
+  @emotion/react \
+  @safe-global/api-kit \
+  @safe-global/protocol-kit \
+  @safe-global/safe-core-sdk-types \
+  @tanstack/react-query \
+  cookies-next \
+  ethers@5.7.2 \
+  theme-ui \
+  viem@2.x \
+  wagmi
+
+# with pnpm
+pnpm add @edgeandnode/graph-auth-kit \
+  @edgeandnode/common \
+  @edgeandnode/gds \
+  @edgeandnode/go \
+  @emotion/react \
+  @safe-global/api-kit \
+  @safe-global/protocol-kit \
+  @safe-global/safe-core-sdk-types \
+  @tanstack/react-query \
+  cookies-next \
+  ethers@5.7.2 \
+  theme-ui \
+  viem@2.x \
+  wagmi
+```
+
+## Usage
+
+Properties:
+
+- `queryClient` -> [OPTIONAL]. The `GraphAuthKitProvider` renders a `QueryClientProvider` instance. Pass in an instantiated `QueryClient` to use, otherwise, `GraphAuthKit` will instantiate its own.
+- `initialStateCookie` -> [OPTIONAL] wagmi auth state cookie. passed to the `GraphAuthKitProvider` -> `WagmiProvider`
+  - we use the exported `AUTH_STORAGE_KEY` from `@edgeandnode/graph-auth-kit` for our wagmi cookie storage.
+- `infuraKey` -> [REQUIRED]
+- `walletConnectProjectID` -> [REQUIRED]
+- `meta` -> [REQUIRED]. information about the app using the lib
+  - `meta.name` -> [REQUIRED]. either `Graph Explorer` or `Subgraph Studio`
+  - `meta.url` -> the app URL.
+    - defaults to: https://thegraph.com/explorer or https://thegraph.com/studio
+    - replace with local, staging, dev/testnet as needed
+- `chains` -> the allowed chains/networks for the given app. default is `ALL`
+  - `ALL` allowed to connect to: L2 Mainnet (arbitrum-one), L2 Testnet (arbitrum-sepolia), L1 Mainnet (ethereum), L1 Testnet (sepolia)
+  - `MAINNET` -> only allowed to connect to L2 Mainnet and L1 Mainnet
+  - `TESTNET` -> only allowed to connect to L2 Testnet and L1 Testnet
+
+### 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 { getCookie } from 'cookies-next'
+import { AppProps } from 'next'
+import { useRef } from 'react'
+
+import { AnalyticsProvider, GDSProvider } from '@edgeandnode/gds'
+import { AUTH_STORAGE_KEY, GraphAuthKitProvider } from '@edgeandnode/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!
+
+import '@edgeandnode/gds/style.css'
+import '../app.css'
+
+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,
+        },
+      },
+    })
+  }
+  const cookies = getCookies()
+  const initialStateCookie =
+    // The nextjs pages router does not make it trivial to retrieve the cookies (app router does though).
+    // But, `getServerSideProps` _can_ be used to retrieve the cookies from the request headers,
+    // and then passed down as props, which would be available here as `pageProps.cookies`.
+    // Otherwise, can parse the cookies uing `getCookies`.
+    pageProps.cookies ||
+    Object.entries(cookies)
+      .filter(([key]) => key.toLowerCase().startsWith(AUTH_STORAGE_KEY.toLowerCase()))
+      .reduce<string>(
+        (accum, [key, val], idx) => (val == null ? accum : idx === 0 ? `${key}=${val}` : `${accum}; ${key}=${val}`),
+        '',
+      )
+
+  return (
+    <GDSProvider clientRouter={router} clientLink={FutureNextLink} useLegacyTheme>
+      <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
+          queryClient={queryClient.current}
+          initialStateCookie={initialStateCookie}
+          infuraKey={infuraKey}
+          walletConnectProjectID={walletConnectProjectID}
+          meta={{
+            name: 'Graph Explorer',
+            url: 'https://thegraph.com/explorer',
+          }}
+          chains="MAINNET"
+        >
+          <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 '@edgeandnode/gds'
+import { GlobalFooter, GlobalHeader, NPSForm } from '@edgeandnode/go'
+import { L1Chain, useGraphAuthKitConnector, useGraphAuthKit, useGraphAuthKitAccount } from '@edgeandnode/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.
+
+## 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.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":"AAQA,wBAAgB,YAAY,gCAsC3B"}

package/dist/Components/ConnectorOption.d.ts

@@ -0,0 +1,13 @@
+import { type ElementType, type ReactNode } from 'react';
+import { type GraphAuthKitConnector } from '../types';
+export type ConnectorOptionProps = {
+    connector: GraphAuthKitConnector;
+    title: ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    description?: ReactNode;
+    Image: ElementType;
+    onClick(): void;
+};
+export declare function ConnectorOption(props: ConnectorOptionProps): import("react").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":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,qBAAqB,CAAA;IAChC,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,IAAI,IAAI,CAAA;CAChB,CAAA;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAqB1D"}

package/dist/Components/MultisigSignerOptions.d.ts

@@ -0,0 +1,2 @@
+export declare function MultisigSignerOptions(): import("react").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":"AA8BA,wBAAgB,qBAAqB,gCAuHpC"}

package/dist/Components/PrimaryConnectOptions.d.ts

@@ -0,0 +1,2 @@
+export declare function PrimaryConnectOptions(): import("react").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":"AAgCA,wBAAgB,qBAAqB,gCAiDpC"}

package/dist/Components/SafeInputForm.d.ts

@@ -0,0 +1,2 @@
+export declare function SafeInputForm(): import("react").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":"AAyEA,wBAAgB,aAAa,gCA2L5B"}

package/dist/Components/SafeSelection.d.ts

@@ -0,0 +1,2 @@
+export declare function SafeSelection(): import("react").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":"AAkBA,wBAAgB,aAAa,gCA+F5B"}