import { useAtomSet, useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"; import { connectionsAtom, setSourceCredentialBinding } from "@executor-js/react/api/atoms";import { useScope, useUserScope } from "@executor-js/react/api/scope-context";import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";import { SourceOAuthSignInButton } from "@executor-js/react/plugins/oauth-sign-in";import { slugifyNamespace } from "@executor-js/react/plugins/source-identity";import { secretBackedValuesFromConfiguredCredentialBindings } from "@executor-js/react/plugins/credential-bindings";import { ScopeId } from "@executor-js/sdk/shared"; import { graphqlSourceAtom, graphqlSourceBindingsAtom } from "./atoms"; export default function GraphqlSignInButton(props: { sourceId: string }) {  const scopeId = useScope();  const userScopeId = useUserScope();  const sourceResult = useAtomValue(graphqlSourceAtom(scopeId, props.sourceId));  const source =    AsyncResult.isSuccess(sourceResult) && sourceResult.value ? sourceResult.value : null;  const sourceScope = source ? ScopeId.make(source.scope) : scopeId;  const bindingsResult = useAtomValue(    graphqlSourceBindingsAtom(userScopeId, props.sourceId, sourceScope),  );  const connectionsResult = useAtomValue(connectionsAtom(userScopeId));  const setBinding = useAtomSet(setSourceCredentialBinding, { mode: "promise" });   const oauth2 = source?.auth.kind === "oauth2" ? source.auth : null;  const bindings = AsyncResult.isSuccess(bindingsResult) ? bindingsResult.value : null;  const connectionBinding = bindings?.find(    (binding) => oauth2 !== null && binding.slotKey === oauth2.connectionSlot,  );  const boundConnectionId =    connectionBinding?.value.kind === "connection" ? connectionBinding.value.connectionId : null;  const connections = AsyncResult.isSuccess(connectionsResult) ? connectionsResult.value : null;  const isConnected =    boundConnectionId !== null &&    connections !== null &&    connections.some((c: { readonly id: string }) => c.id === boundConnectionId);   if (!source || !oauth2) return null;  const namespaceSlug = slugifyNamespace(source.namespace) || "graphql";   return (    <SourceOAuthSignInButton      popupName="graphql-oauth"      pluginId="graphql"      namespace={namespaceSlug}      fallbackNamespace="graphql"      endpoint={source.endpoint}      tokenScope={userScopeId}      connectionId={boundConnectionId}      sourceLabel={`${source.name.trim() || source.namespace || "GraphQL"} OAuth`}      headers={secretBackedValuesFromConfiguredCredentialBindings(source.headers, bindings ?? [])}      queryParams={secretBackedValuesFromConfiguredCredentialBindings(        source.queryParams,        bindings ?? [],      )}      isConnected={isConnected}      onConnected={async (connectionId) => {        await setBinding({          params: { scopeId: userScopeId },          payload: {            scope: userScopeId,            source: { id: props.sourceId, scope: sourceScope },            slotKey: oauth2.connectionSlot,            value: { kind: "connection", connectionId },          },          reactivityKeys: [...sourceWriteKeys, ...connectionWriteKeys],        });      }}    />  );}