@edgeandnode/graph-auth-kit 0.2.0

package/dist/GraphAuthKit.context-DBwb2jco.js

@@ -0,0 +1,936 @@
+import { jsx, jsxs, Fragment } from "@theme-ui/core/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createContext, useContext, useRef, useState, useReducer, useEffect } from "react";
+import { useConfig, useConnect, useDisconnect, useAccountEffect, createConfig, createStorage, cookieStorage, cookieToInitialState, WagmiProvider } from "wagmi";
+import { coinbaseWallet, injected, walletConnect } from "wagmi/connectors";
+import { Icon, ExperimentalButton, Alert, Divider, Link, ExperimentalSelect, ExperimentalInput, List, ExperimentalModal, ExperimentalLoadingIndicator } from "@edgeandnode/gds";
+import { http, createPublicClient, createClient, isAddress } from "viem";
+import { z } from "zod";
+import { k as SupportedClientChainId, D as DefChain, e as L2ChainTestnet, h as L1ChainTestnet, g as L1Chain, S as SafeSupportedNetworks, M as MULTISIG_AUTH_STORAGE_KEY, L as L2Chain, d as isSafeOwner, a as SafeSupportedNetworkNames, i as isValidSafe, j as AUTH_STORAGE_KEY } from "./utils-KuRu9vB-.js";
+import { addrShortener } from "@edgeandnode/common";
+import { providers } from "ethers";
+import { NetworkIcon } from "@edgeandnode/go";
+const RequiredInfuraKey = z.object({
+  infuraKey: z.string({ required_error: "The Infura Key is required" }).min(1).readonly()
+});
+const RequiredWalletConnectProjectId = z.object({
+  walletConnectProjectID: z.string({ required_error: "The WalletConnect Project ID is required" }).min(1).readonly()
+});
+const GraphAuthKitProps = RequiredInfuraKey.merge(RequiredWalletConnectProjectId).extend({
+  meta: z.object({
+    name: z.union([z.literal("Graph Explorer"), z.literal("Subgraph Studio")]).readonly(),
+    url: z.string().url().optional().nullable().readonly()
+  }).readonly(),
+  chains: z.union([z.literal("ALL"), z.literal("MAINNET"), z.literal("TESTNET")]).default("ALL").readonly()
+});
+const GraphAuthKitConnector = z.union([
+  z.literal(coinbaseWallet.type),
+  z.literal(injected.type),
+  z.literal("multisig"),
+  z.literal(walletConnect.type)
+]).readonly();
+RequiredInfuraKey.extend({
+  chain: SupportedClientChainId.optional().nullable().default(DefChain.id)
+});
+function buildInfuraHttpTransport({
+  chain = DefChain.id,
+  infuraKey
+}) {
+  switch (chain) {
+    case L1Chain.id: {
+      return http(`https://mainnet.infura.io/v3/${infuraKey}`);
+    }
+    case L1ChainTestnet.id: {
+      return http(`https://sepolia.infura.io/v3/${infuraKey}`);
+    }
+    case L2ChainTestnet.id: {
+      return http(`https://arbitrum-sepolia.infura.io/v3/${infuraKey}`);
+    }
+    default: {
+      return http(`https://arbitrum-mainnet.infura.io/v3/${infuraKey}`);
+    }
+  }
+}
+const BuildPublicClientArgs = RequiredInfuraKey.extend({
+  chain: z.custom().optional().default(DefChain)
+});
+function buildPublicClient({ chain = DefChain, infuraKey }) {
+  const transport = buildInfuraHttpTransport({
+    chain: chain.id,
+    infuraKey
+  });
+  return createPublicClient({
+    chain,
+    transport
+  });
+}
+const BuildClientArgs = RequiredInfuraKey.extend({
+  chain: z.custom().optional().default(DefChain)
+});
+function buildClient({ chain = DefChain, infuraKey }) {
+  const transport = buildInfuraHttpTransport({
+    chain: chain.id,
+    infuraKey
+  });
+  return createClient({
+    chain,
+    transport
+  });
+}
+const MultisigErrorMap = {
+  INVALID_SIGNER: {
+    title: "Signer Wallet is Invalid",
+    description: "This wallet is not a valid signing wallet for the Multisig. You can try again with a different wallet using the options below."
+  },
+  INVALID_NETWORK: {
+    title: "Invalid network",
+    description: "The signing wallet must be connected to the same network as the Multisig."
+  }
+};
+const MultisigSchema = z.object({
+  network: z.custom(
+    (val) => val != null && typeof val === "number" && SafeSupportedNetworks.safeParse(val).success
+  ),
+  address: z.string().min(42),
+  enteredSafeIsValid: z.boolean().optional()
+});
+const defInnerState = {
+  _infuraKey: "",
+  _connectModalOpen: false,
+  _setConnectModalOpen() {
+  },
+  _modalTitle: "Connect your wallet",
+  _setModalTitle() {
+  },
+  _setModalSubtitle() {
+  },
+  _modalState: "primary",
+  _setModalState() {
+  },
+  _setSafeInfo() {
+  },
+  _authenticating: false,
+  _setAuthenticating() {
+  },
+  _connect() {
+  },
+  _connectMultisig() {
+  },
+  _reset() {
+  }
+};
+const GraphAuthKitInnerContext = createContext(defInnerState);
+function useGraphAuthKitInnerContext() {
+  return useContext(GraphAuthKitInnerContext);
+}
+function GraphAuthKitInnerContextProvider({ infuraKey, children }) {
+  const config = useConfig();
+  const { connect, connectors } = useConnect();
+  const { disconnectAsync } = useDisconnect();
+  const firstConnectCheckRef = useRef();
+  const [_connectModalOpen, setConnectModalOpen] = useState(false);
+  const [_modalTitle, setModalTitle] = useState();
+  const [_modalSubtitle, setModalSubtitle] = useState();
+  const [_authenticating, setAuthenticating] = useState(false);
+  const [_connector, setConnector] = useState();
+  const [_connectFailureMessage, setConnectFailureMessage] = useState();
+  const [_modalState, setModalState] = useState("primary");
+  const [_enteredMultisigInfo, setEnteredMultisigInfo] = useState();
+  useAccountEffect({
+    async onConnect(data) {
+      var _a;
+      if (!firstConnectCheckRef.current) {
+        const multisigCookie = await ((_a = config.storage) == null ? void 0 : _a.getItem(MULTISIG_AUTH_STORAGE_KEY));
+        if (multisigCookie) {
+          const parsedMultisigSchema = MultisigSchema.safeParse(
+            typeof multisigCookie === "string" ? JSON.parse(multisigCookie) : multisigCookie
+          );
+          if (parsedMultisigSchema.success && isAddress(parsedMultisigSchema.data.address)) {
+            setEnteredMultisigInfo(parsedMultisigSchema.data);
+            setConnector("multisig");
+          }
+        } else {
+          const parsedConnector = GraphAuthKitConnector.safeParse(data.connector.type);
+          const connector = parsedConnector.success ? parsedConnector.data : "injected";
+          setConnector(connector);
+        }
+        firstConnectCheckRef.current = true;
+      }
+    }
+  });
+  const _connect = async (connector) => {
+    setAuthenticating(true);
+    setConnector(void 0);
+    setConnectFailureMessage(void 0);
+    const conn = connectors.find((c) => c.type === connector) ?? injected();
+    connect(
+      { connector: conn },
+      {
+        onSuccess() {
+          setConnector(connector);
+          setConnectModalOpen(false);
+          setModalTitle("Connect your wallet");
+          setModalSubtitle(void 0);
+          setEnteredMultisigInfo(void 0);
+          setModalState("primary");
+        },
+        onError(err) {
+          if (err.code === 4001) {
+            return;
+          }
+          console.error("GraphAuthKit.connect - failure connecting wallet", { err });
+          setConnectFailureMessage({ title: err.name, description: err.message });
+        },
+        onSettled() {
+          setAuthenticating(false);
+        }
+      }
+    );
+  };
+  const _connectMultisig = async (params) => {
+    setAuthenticating(true);
+    setConnector(void 0);
+    setConnectFailureMessage(void 0);
+    const conn = connectors.find((c) => c.type === params.connector) ?? injected();
+    connect(
+      { connector: conn },
+      {
+        async onSuccess(data) {
+          var _a;
+          if (data.chainId !== params.network) {
+            await disconnectAsync({ connector: typeof conn === "function" ? void 0 : conn }).then(() => {
+              var _a2;
+              void ((_a2 = config.storage) == null ? void 0 : _a2.removeItem(MULTISIG_AUTH_STORAGE_KEY));
+              setConnectFailureMessage(MultisigErrorMap["INVALID_NETWORK"]);
+            });
+            return;
+          }
+          const [eoa] = data.accounts;
+          const client = buildPublicClient({
+            infuraKey,
+            chain: params.network === L2Chain.id ? L2Chain : params.network === L1Chain.id ? L1Chain : L1ChainTestnet
+          });
+          const eoaIsSafeOwner = await isSafeOwner({
+            client,
+            chain: params.network,
+            safeAddress: params.address,
+            eoa
+          });
+          if (!eoaIsSafeOwner) {
+            await disconnectAsync({ connector: typeof conn === "function" ? void 0 : conn }).then(() => {
+              var _a2;
+              void ((_a2 = config.storage) == null ? void 0 : _a2.removeItem(MULTISIG_AUTH_STORAGE_KEY));
+              setConnectFailureMessage(MultisigErrorMap["INVALID_SIGNER"]);
+            });
+            return;
+          }
+          setConnector("multisig");
+          void ((_a = config.storage) == null ? void 0 : _a.setItem(MULTISIG_AUTH_STORAGE_KEY, _enteredMultisigInfo));
+          setConnectModalOpen(false);
+          setModalTitle("Connect your wallet");
+          setModalSubtitle(void 0);
+          setModalState("primary");
+        },
+        onError(err) {
+          var _a;
+          if (err.code === 4001) {
+            return;
+          }
+          void ((_a = config.storage) == null ? void 0 : _a.removeItem(MULTISIG_AUTH_STORAGE_KEY));
+          setConnectFailureMessage({ title: err.name, description: err.message });
+        },
+        onSettled() {
+          setAuthenticating(false);
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    GraphAuthKitInnerContext.Provider,
+    {
+      value: {
+        _infuraKey: infuraKey,
+        _connectModalOpen,
+        _setConnectModalOpen: setConnectModalOpen,
+        _modalTitle,
+        _setModalTitle: setModalTitle,
+        _modalSubtitle,
+        _setModalSubtitle: setModalSubtitle,
+        _modalState,
+        _setModalState: setModalState,
+        _enteredMultisigInfo,
+        _setSafeInfo: setEnteredMultisigInfo,
+        _authenticating,
+        _setAuthenticating: setAuthenticating,
+        _connector,
+        _connectFailureMessage,
+        _connect,
+        _connectMultisig,
+        _reset() {
+          var _a;
+          setAuthenticating(false);
+          setConnector(void 0);
+          setConnectFailureMessage(void 0);
+          setModalTitle("Connect your wallet");
+          setModalSubtitle(void 0);
+          setEnteredMultisigInfo(void 0);
+          setModalState("primary");
+          void ((_a = config.storage) == null ? void 0 : _a.removeItem(MULTISIG_AUTH_STORAGE_KEY));
+        }
+      },
+      children
+    }
+  );
+}
+function ConnectorOption(props) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "flex w-full cursor-pointer items-center gap-x-2 rounded-4 border border-white/4 bg-white/4 p-4 text-white/48 hover:border-white/16 hover:bg-white/8 hover:text-white aria-selected:border-white/16 aria-selected:bg-white/8 aria-selected:text-white",
+      style: {
+        WebkitBackfaceVisibility: "hidden"
+      },
+      onClick: props.onClick,
+      disabled: props.disabled,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx(props.Image, { size: "24px" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("h6", { className: "text-h16 whitespace-nowrap text-inherit", children: props.title }) }),
+          props.description ? /* @__PURE__ */ jsx("div", { className: "text-p14 flex text-white/48", children: props.description }) : null
+        ] })
+      ]
+    }
+  );
+}
+const multisigConnectOptions = [
+  {
+    connector: "injected",
+    title: "MetaMask",
+    Image: Icon.LogoMetaMaskColor
+  },
+  {
+    connector: "walletConnect",
+    title: "WalletConnect",
+    Image: Icon.LogoWalletConnectColor
+  },
+  {
+    connector: "coinbaseWallet",
+    title: "Coinbase Wallet",
+    Image: Icon.LogoCoinbaseWallet
+  }
+];
+function MultisigSignerOptions() {
+  const authKit = useGraphAuthKit();
+  const ctx = useGraphAuthKitInnerContext();
+  const [selectedConnector, setSelectedConnector] = useState(null);
+  if (ctx._enteredMultisigInfo == null || !ctx._enteredMultisigInfo.address) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-y-24", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-3", children: /* @__PURE__ */ jsx("span", { className: "text-c12 hidden text-white/64 md:inline", children: "Multisig Connection" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "text-h24", children: "No Safe address entered." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        /* @__PURE__ */ jsx(ExperimentalButton, { variant: "primary", iconBefore: /* @__PURE__ */ jsx(Icon.ArrowLeft, {}), onClick: () => ctx._setModalState("safe_entry"), children: "Enter Safe" }),
+        /* @__PURE__ */ jsx(ExperimentalButton, { variant: "tertiary", className: "hidden md:inline", onClick: () => authKit.closeConnectModal(), children: "Cancel" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-c12 hidden text-white/64 md:inline", children: "Multisig Connection" }),
+        /* @__PURE__ */ jsx("div", { className: "hidden h-[10px] w-px bg-white/64 md:inline" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx(Icon.LogoSafeColor, { size: "16px" }),
+          /* @__PURE__ */ jsx("p", { className: "text-p12 text-white/64", children: addrShortener(ctx._enteredMultisigInfo.address) }),
+          /* @__PURE__ */ jsx(
+            ExperimentalButton,
+            {
+              variant: "tertiary",
+              size: "xsmall",
+              onClick: () => {
+                ctx._setSafeInfo(void 0);
+                ctx._setModalState("safe_entry");
+              },
+              children: "Change"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: "text-h24", children: "Select a signing wallet" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-8", children: [
+      ctx._connectFailureMessage ? /* @__PURE__ */ jsx(
+        Alert,
+        {
+          severity: "error",
+          title: ctx._connectFailureMessage.title,
+          description: ctx._connectFailureMessage.description
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-y-2", children: multisigConnectOptions.map((opt) => /* @__PURE__ */ jsx(
+        ConnectorOption,
+        {
+          ...opt,
+          selected: selectedConnector != null && selectedConnector === opt.connector,
+          onClick: () => {
+            if (ctx._enteredMultisigInfo == null || !isAddress(ctx._enteredMultisigInfo.address)) {
+              return;
+            }
+            setSelectedConnector(opt.connector);
+            void ctx._connectMultisig({
+              connector: opt.connector,
+              network: ctx._enteredMultisigInfo.network,
+              address: ctx._enteredMultisigInfo.address
+            });
+          }
+        },
+        opt.connector
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-p14", children: "Wallet didn't open?" }),
+        /* @__PURE__ */ jsxs(
+          Link.Secondary,
+          {
+            size: "14px",
+            onClick: () => {
+              if (selectedConnector == null || ctx._enteredMultisigInfo == null || !isAddress(ctx._enteredMultisigInfo.address)) {
+                return;
+              }
+              void ctx._connectMultisig({
+                connector: selectedConnector,
+                network: ctx._enteredMultisigInfo.network,
+                address: ctx._enteredMultisigInfo.address
+              });
+            },
+            children: [
+              "Try again ",
+              /* @__PURE__ */ jsx(Icon.RotateLeft, { size: "14px" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ExperimentalButton, { variant: "tertiary", className: "hidden md:inline", onClick: () => authKit.closeConnectModal(), children: "Cancel" })
+    ] })
+  ] });
+}
+const primaryConnectOptions = [
+  {
+    connector: "injected",
+    title: "MetaMask",
+    Image: Icon.LogoMetaMaskColor
+  },
+  {
+    connector: "walletConnect",
+    title: "WalletConnect",
+    Image: Icon.LogoWalletConnectColor
+  },
+  {
+    connector: "coinbaseWallet",
+    title: "Coinbase Wallet",
+    Image: Icon.LogoCoinbaseWallet
+  },
+  {
+    connector: "multisig",
+    title: "Safe",
+    Image: Icon.LogoSafeColor
+  }
+];
+function PrimaryConnectOptions() {
+  const ctx = useGraphAuthKitInnerContext();
+  const [selectedConnector, setSelectedConnector] = useState(null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      ctx._modalSubtitle ? /* @__PURE__ */ jsx("p", { className: "text-c12 text-white/64", children: ctx._modalSubtitle }) : null,
+      /* @__PURE__ */ jsx("h3", { className: "text-h24", children: ctx._modalTitle })
+    ] }),
+    ctx._connectFailureMessage ? /* @__PURE__ */ jsx(
+      Alert,
+      {
+        severity: "error",
+        title: ctx._connectFailureMessage.title,
+        description: ctx._connectFailureMessage.description
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: primaryConnectOptions.map((opt) => /* @__PURE__ */ jsx(
+      ConnectorOption,
+      {
+        ...opt,
+        disabled: ctx._authenticating,
+        selected: selectedConnector != null && selectedConnector === opt.connector,
+        onClick: () => {
+          setSelectedConnector(opt.connector);
+          if (opt.connector === "multisig") {
+            ctx._setModalState("safe_entry");
+          } else {
+            void ctx._connect(opt.connector);
+          }
+        }
+      },
+      opt.connector
+    )) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-p12 text-white/64", children: [
+      "By connecting a wallet, you agree to The Graph's",
+      " ",
+      /* @__PURE__ */ jsx(Link.Inline, { href: "https://thegraph.com/terms-of-service/", target: "_blank", children: "Terms of Service" }),
+      " ",
+      "and acknowledge that you have read and understood the disclaimers therein."
+    ] })
+  ] });
+}
+z.union([
+  z.object({
+    action: z.literal("SET_NETWORK"),
+    payload: z.custom(
+      (val) => val != null && typeof val === "number" && SafeSupportedNetworks.safeParse(val).success
+    )
+  }),
+  z.object({
+    action: z.literal("SET_SAFE_ADDRESS"),
+    payload: z.string().min(42)
+  }),
+  z.object({
+    action: z.literal("SET_SAFE_VALID"),
+    payload: z.boolean().optional()
+  }),
+  z.object({
+    action: z.literal("RESET")
+  })
+]);
+function SafeInputFormReducer(state, action) {
+  switch (action.action) {
+    case "SET_NETWORK": {
+      return {
+        ...state,
+        network: action.payload
+      };
+    }
+    case "SET_SAFE_VALID": {
+      return {
+        ...state,
+        enteredSafeIsValid: action.payload
+      };
+    }
+    case "SET_SAFE_ADDRESS": {
+      return {
+        ...state,
+        address: action.payload
+      };
+    }
+    default: {
+      return {
+        ...state,
+        enteredSafeIsValid: void 0,
+        network: L2Chain.id,
+        address: "0x"
+      };
+    }
+  }
+}
+function SafeInputForm() {
+  const ctx = useGraphAuthKitInnerContext();
+  const previouslyUsedSafes = usePreviouslyUsedSafes();
+  const [state, dispatch] = useReducer(SafeInputFormReducer, {
+    network: L2Chain.id,
+    address: ""
+  });
+  async function validateMultisigSchema(_state) {
+    if (!isAddress(_state.address)) {
+      return dispatch({ action: "SET_SAFE_VALID", payload: false });
+    }
+    const client = buildPublicClient({
+      chain: _state.network === L2Chain.id ? L2Chain : _state.network === L1Chain.id ? L1Chain : L1ChainTestnet,
+      infuraKey: ctx._infuraKey
+    });
+    const valid = await isValidSafe({
+      client,
+      chain: _state.network,
+      safeAddress: _state.address
+    });
+    dispatch({ action: "SET_SAFE_VALID", payload: valid });
+  }
+  const handleMultisigAddressChange = (entered) => {
+    var _a;
+    let networkId = void 0;
+    if (entered.includes(":")) {
+      const [shortName, address] = entered.split(":");
+      networkId = (_a = Object.values(SafeSupportedNetworkNames).find((supported) => supported.shortName === shortName)) == null ? void 0 : _a.id;
+      entered = address;
+      if (networkId) {
+        dispatch({ action: "SET_NETWORK", payload: networkId });
+      }
+    }
+    dispatch({ action: "SET_SAFE_ADDRESS", payload: entered });
+    void validateMultisigSchema({ ...state, network: networkId || state.network, address: entered });
+  };
+  const isSubmitDisabled = !state.address || !state.enteredSafeIsValid;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      noValidate: true,
+      className: "flex flex-col gap-y-6",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (state.enteredSafeIsValid && state.address) {
+          previouslyUsedSafes.save(state.network, state.address);
+        }
+        ctx._setSafeInfo(state);
+        ctx._setModalState("safe_eoa_signer");
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+          ctx._modalSubtitle ? /* @__PURE__ */ jsx("p", { className: "text-c12 text-white/64", children: ctx._modalSubtitle }) : null,
+          /* @__PURE__ */ jsx("h3", { className: "text-h24", children: "Safe Multisig" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-4", children: [
+            /* @__PURE__ */ jsx(
+              ExperimentalSelect,
+              {
+                placeholder: "Select Safe Network",
+                value: state.network,
+                onChange: (selected) => {
+                  dispatch({ action: "SET_NETWORK", payload: selected });
+                  void validateMultisigSchema({ ...state, network: selected });
+                },
+                valueLabel: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+                  /* @__PURE__ */ jsx(NetworkIcon, { chain: `evm-${state.network}` }),
+                  SafeSupportedNetworkNames[state.network].name
+                ] }),
+                children: Object.values(SafeSupportedNetworkNames).sort((a, b) => {
+                  if (a.id === L2Chain.id) {
+                    return -1;
+                  } else if (b.id === L2Chain.id) {
+                    return 1;
+                  }
+                  return a.id - b.id;
+                }).map((n) => /* @__PURE__ */ jsx(ExperimentalSelect.Option, { value: n.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+                  /* @__PURE__ */ jsx(NetworkIcon, { chain: `evm-${n.id}` }),
+                  n.name
+                ] }) }, n.id))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ExperimentalInput,
+              {
+                id: "multisigAddress",
+                name: "multisigAddress",
+                label: "Multisig Address",
+                value: state.address || "",
+                onChange: handleMultisigAddressChange,
+                placeholder: "0x...",
+                status: state.enteredSafeIsValid !== void 0 && !state.enteredSafeIsValid && state.address ? "error" : state.enteredSafeIsValid ? "success" : void 0,
+                message: state.enteredSafeIsValid !== void 0 && !state.enteredSafeIsValid && state.address ? "Invalid Safe Adrress" : state.enteredSafeIsValid ? "Valid Safe Address" : void 0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-4", children: [
+            /* @__PURE__ */ jsx(
+              ExperimentalButton,
+              {
+                type: "submit",
+                variant: "primary",
+                disabled: isSubmitDisabled,
+                iconAfter: /* @__PURE__ */ jsx(Icon.ArrowRight, { size: "16px" }),
+                children: "Continue"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ExperimentalButton,
+              {
+                variant: "tertiary",
+                onClick: () => {
+                  dispatch({ action: "RESET" });
+                  ctx._setModalState("primary");
+                },
+                children: "Back"
+              }
+            )
+          ] })
+        ] }),
+        previouslyUsedSafes.values.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-c12 text-white/64", children: " Previously used:" }),
+            /* @__PURE__ */ jsx(List.Bullets, { sx: { mt: "8px" }, children: previouslyUsedSafes.values.map((safeAddress) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                size: "12px",
+                autoIcon: false,
+                sx: { transform: "translateY(-2.5px)" },
+                onClick: () => {
+                  var _a;
+                  const [shortName, address] = safeAddress.address.split(":");
+                  const networkId = (_a = Object.values(SafeSupportedNetworkNames).find(
+                    (supported) => supported.shortName === shortName
+                  )) == null ? void 0 : _a.id;
+                  if (networkId) {
+                    ctx._setSafeInfo({ network: networkId, address, enteredSafeIsValid: true });
+                    ctx._setModalState("safe_eoa_signer");
+                  } else {
+                    handleMultisigAddressChange(safeAddress.address);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "inline md:hidden", children: shortenMultisigAddress(safeAddress.address) }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: safeAddress.address })
+                ]
+              }
+            ) }, `${safeAddress.address}__${safeAddress.timestamp}`)) })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function shortenMultisigAddress(multisig) {
+  const [shortName, address] = multisig.split(":");
+  return `${shortName}:${addrShortener(address)}`;
+}
+function usePreviouslyUsedSafes() {
+  const SIZE = 3;
+  function safesDb(onSuccess) {
+    const openRequest = window.indexedDB.open("previouslyUsedSafes", 1);
+    openRequest.onerror = () => {
+    };
+    openRequest.onupgradeneeded = function() {
+      const db = this.result;
+      const store = db.createObjectStore("previouslyUsedSafes", { keyPath: "address" });
+      store.createIndex("timestamp", "timestamp", { unique: false });
+    };
+    openRequest.onsuccess = onSuccess;
+  }
+  const [previouslyUsedSafes, setPreviouslyUsedSafes] = useState([]);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.indexedDB) return;
+    safesDb(function() {
+      const db = this.result;
+      if (!db) return;
+      const transaction = db.transaction("previouslyUsedSafes", "readonly");
+      const objectStore = transaction.objectStore("previouslyUsedSafes");
+      const index = objectStore.index("timestamp");
+      const cursorRequest = index.openCursor(null, "prev");
+      const entries = [];
+      cursorRequest.onsuccess = function() {
+        const cursor = this.result;
+        if (cursor && entries.length < SIZE) {
+          entries.push(cursor.value);
+          cursor.continue();
+        }
+      };
+      transaction.oncomplete = function() {
+        setPreviouslyUsedSafes(entries);
+      };
+    });
+  }, []);
+  return {
+    values: [...new Set(previouslyUsedSafes)],
+    save(network, safeAddress) {
+      if (typeof window === "undefined" || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      !window.indexedDB || previouslyUsedSafes.some((entry2) => entry2.address === safeAddress)) {
+        return;
+      }
+      const shortName = SafeSupportedNetworkNames[network].shortName;
+      const entry = {
+        address: `${shortName}:${safeAddress}`,
+        timestamp: (/* @__PURE__ */ new Date()).getTime()
+      };
+      setPreviouslyUsedSafes((prev) => [...prev, entry].slice(0, SIZE));
+      safesDb(function() {
+        const db = this.result;
+        if (!db) {
+          return;
+        }
+        const transaction = db.transaction("previouslyUsedSafes", "readwrite");
+        const objectStore = transaction.objectStore("previouslyUsedSafes");
+        objectStore.put(entry);
+      });
+    }
+  };
+}
+function ConnectModal() {
+  const ctx = useGraphAuthKitInnerContext();
+  return /* @__PURE__ */ jsx(
+    ExperimentalModal,
+    {
+      open: ctx._connectModalOpen,
+      onClose: () => {
+        ctx._setConnectModalOpen(false);
+        ctx._reset();
+      },
+      suppressHydrationWarning: true,
+      className: "[--gds-modal-max-width:550px]",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full grow items-center justify-center", children: [
+        ctx._authenticating ? /* @__PURE__ */ jsx(ExperimentalLoadingIndicator, { className: "absolute -top-10 left-0 size-4" }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex w-full grow flex-col aria-busy:pointer-events-none aria-busy:opacity-64",
+            "aria-busy": ctx._authenticating ? "true" : void 0,
+            children: /* @__PURE__ */ jsx(ExperimentalModal.Steps, { currentStep: ctx._modalState, children: (step) => {
+              switch (step) {
+                case "safe_entry": {
+                  return /* @__PURE__ */ jsx(SafeInputForm, {});
+                }
+                case "safe_eoa_signer": {
+                  return /* @__PURE__ */ jsx(MultisigSignerOptions, {});
+                }
+                default: {
+                  return /* @__PURE__ */ jsx(PrimaryConnectOptions, {});
+                }
+              }
+            } })
+          }
+        )
+      ] })
+    }
+  );
+}
+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() {
+  },
+  closeConnectModal() {
+  },
+  disconnect() {
+  }
+});
+function useGraphAuthKit() {
+  return useContext(GraphAuthKitContext);
+}
+function GraphAuthKitProvider(props) {
+  const image = props.meta.name === "Graph Explorer" ? "https://storage.googleapis.com/graph-website/seo/graph-explorer.jpg" : "https://storage.googleapis.com/graph-website/seo/subgraph-studio.jpg";
+  const description = props.meta.name === "Graph Explorer" ? `See what’s happening on The Graph Network and participate as a Delegator, Curator, Indexer, or Developer.` : "Use the Subgraph Studio to test, deploy, and publish your subgraphs to the decentralized network.";
+  const url = props.meta.url || (props.meta.name === "Graph Explorer" ? "https://thegraph.com/explorer" : "https://thegraph.com/studio");
+  const chains = props.chains === "ALL" ? [L2Chain, L2ChainTestnet, L1Chain, L1ChainTestnet] : props.chains === "MAINNET" ? [L2Chain, L1Chain] : [L2ChainTestnet, L1ChainTestnet];
+  const queryClient = props.queryClient ?? new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1e3
+      }
+    }
+  });
+  const config = createConfig({
+    chains,
+    ssr: typeof window !== "undefined",
+    client(params) {
+      const chain = chainIsSupportedChain(params.chain) ? params.chain : DefChain;
+      return buildClient({ chain, infuraKey: props.infuraKey });
+    },
+    connectors: [
+      injected(),
+      coinbaseWallet({
+        appName: props.meta.name,
+        appLogoUrl: image
+      }),
+      walletConnect({
+        projectId: props.walletConnectProjectID,
+        metadata: {
+          name: props.meta.name,
+          description,
+          url,
+          icons: [image]
+        },
+        qrModalOptions: {
+          themeMode: "dark"
+        }
+      })
+    ],
+    storage: createStorage({
+      storage: cookieStorage,
+      key: AUTH_STORAGE_KEY
+    })
+  });
+  const initialState = cookieToInitialState(config, props.initialStateCookie);
+  return /* @__PURE__ */ jsx(WagmiProvider, { config, initialState, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(GraphAuthKitInnerContextProvider, { infuraKey: props.infuraKey, children: /* @__PURE__ */ jsx(GraphAuthKitContent, { children: props.children }) }) }) });
+}
+function GraphAuthKitContent({ children }) {
+  const { disconnect } = useDisconnect();
+  const innerContext = useGraphAuthKitInnerContext();
+  return /* @__PURE__ */ jsxs(
+    GraphAuthKitContext.Provider,
+    {
+      value: {
+        openConnectModal(props) {
+          innerContext._setConnectModalOpen(true);
+          innerContext._setModalTitle((props == null ? void 0 : props.title) ?? "Connect your wallet");
+          innerContext._setModalSubtitle(props == null ? void 0 : props.subtitle);
+        },
+        closeConnectModal() {
+          innerContext._setConnectModalOpen(false);
+          innerContext._reset();
+        },
+        disconnect() {
+          disconnect(
+            {},
+            {
+              onSettled() {
+                innerContext._reset();
+              }
+            }
+          );
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(ConnectModal, {}),
+        children
+      ]
+    }
+  );
+}
+export {
+  BuildPublicClientArgs as B,
+  GraphAuthKitInnerContext as G,
+  RequiredInfuraKey as R,
+  GraphAuthKitContext as a,
+  buildClient as b,
+  chainIsSupportedChain as c,
+  defInnerState as d,
+  clientToProvider as e,
+  buildInfuraHttpTransport as f,
+  buildPublicClient as g,
+  BuildClientArgs as h,
+  useGraphAuthKit as i,
+  GraphAuthKitProvider as j,
+  RequiredWalletConnectProjectId as k,
+  GraphAuthKitProps as l,
+  GraphAuthKitConnector as m,
+  isChainL2 as n,
+  isChainL1 as o,
+  isChainMainnet as p,
+  isChainTestnet as q,
+  connectedWalletIsEoA as r,
+  useGraphAuthKitInnerContext as u
+};