@rainbow-me/rainbowkit/dist/components/chunk-FDGUNHHI.js

The best way to connect a wallet

"use client";
import {
  WalletButtonContext
} from "./chunk-GZW2ASFM.js";
import {
  largeScreenMinWidth
} from "./chunk-RFUL46NX.js";

// src/components/RainbowKitProvider/ModalSizeContext.tsx
import React, { createContext, useContext } from "react";

// src/hooks/useWindowSize.ts
import { useEffect, useState } from "react";

// src/utils/debounce.ts
function debounce(fn, ms) {
  let timer = null;
  const debounced = () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      timer = null;
      fn();
    }, ms);
  };
  debounced.cancel = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };
  return debounced;
}

// src/hooks/useWindowSize.ts
var useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    height: void 0,
    width: void 0
  });
  useEffect(() => {
    const handleResize = debounce(() => {
      setWindowSize({
        height: window.innerHeight,
        width: window.innerWidth
      });
    }, 500);
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => {
      handleResize.cancel();
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return windowSize;
};

// src/components/RainbowKitProvider/ModalSizeContext.tsx
var ModalSizeOptions = {
  COMPACT: "compact",
  WIDE: "wide"
};
var ModalSizeContext = createContext(
  ModalSizeOptions.WIDE
);
function ModalSizeProvider({
  children,
  modalSize
}) {
  const { width } = useWindowSize();
  const isSmallScreen = width && width < largeScreenMinWidth;
  const { connector } = useContext(WalletButtonContext);
  return /* @__PURE__ */ React.createElement(
    ModalSizeContext.Provider,
    {
      value: isSmallScreen || connector ? ModalSizeOptions.COMPACT : modalSize
    },
    children
  );
}

export {
  useWindowSize,
  ModalSizeOptions,
  ModalSizeContext,
  ModalSizeProvider
};