@roochnetwork/rooch-sdk-kit/dist/esm/components/switch-network-modal/SwitchNetworkModal.js

Rooch SDK Kit

// src/components/switch-network-modal/SwitchNetworkModal.tsx
import { useEffect as useEffect2, useState as useState5 } from "react";

// src/components/ui/Modal.tsx
import { useState as useState2 } from "react";
import * as Dialog from "@radix-ui/react-dialog";

// src/components/ui/Modal.css.ts
var closeButtonContainer = "Modal_closeButtonContainer__1c5z17f2";
var content = "Modal_content__1c5z17f1";
var overlay = "Modal_overlay__1c5z17f0";

// src/components/styling/StyleMarker.tsx
import { Slot } from "@radix-ui/react-slot";
import { forwardRef } from "react";

// src/constants/styleDataAttribute.ts
var styleDataAttributeName = "data-sdk-kit";
var styleDataAttributeSelector = `[${styleDataAttributeName}]`;
var styleDataAttribute = { [styleDataAttributeName]: "" };

// src/components/styling/StyleMarker.tsx
import { jsx } from "react/jsx-runtime";
var StyleMarker = forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Slot, { ref: forwardedRef, ...props, ...styleDataAttribute, children }));
StyleMarker.displayName = "StyleMarker";

// src/components/ProgressProvider.tsx
import { createContext, useCallback, useContext, useState } from "react";

// src/components/fauct-modal/views/FaucetView.css.ts
var progressBar = "FaucetView_progressBar__1ff62y03";

// src/components/ui/Progress.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
function Progress() {
  const { progress } = useProgress();
  return /* @__PURE__ */ jsx2("div", { className: progressBar, style: { width: `${progress}%` } });
}

// src/components/ProgressProvider.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var ProgressProviderContext = createContext(null);
var ProgressProvider = ({ children }) => {
  const [progress, setProgress] = useState(0);
  const [loading, setLoading] = useState(false);
  const start = useCallback(() => {
    setLoading(true);
    setProgress(0);
    const interval = setInterval(() => {
      setProgress((prev) => {
        const nextProgress = prev + 10;
        if (nextProgress >= 70) {
          clearInterval(interval);
        }
        return Math.min(nextProgress, 70);
      });
    }, 100);
  }, []);
  const finish = useCallback((callback) => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        const nextProgress = prev + 5;
        if (nextProgress >= 100) {
          clearInterval(interval);
          setTimeout(() => {
            setLoading(false);
            if (callback) {
              callback();
            }
          }, 300);
        }
        return Math.min(nextProgress, 100);
      });
    }, 50);
  }, []);
  return /* @__PURE__ */ jsxs(ProgressProviderContext.Provider, { value: { loading, progress, start, finish }, children: [
    children,
    loading && /* @__PURE__ */ jsx3(Progress, {})
  ] });
};
var useProgress = () => {
  const ctx = useContext(ProgressProviderContext);
  if (!ctx) {
    throw new Error("useSubscribeToError must be used within a GlobalProvider");
  }
  return ctx;
};

// src/components/ui/IconButton.tsx
import { Slot as Slot2 } from "@radix-ui/react-slot";
import clsx from "clsx";
import { forwardRef as forwardRef2 } from "react";

// src/components/ui/IconButton.css.ts
var container = "IconButton_container__5zr4fg0";

// src/components/ui/IconButton.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var IconButton = forwardRef2(
  ({ className, asChild = false, ...props }, forwardedRef) => {
    const Comp = asChild ? Slot2 : "button";
    return /* @__PURE__ */ jsx4(Comp, { ...props, className: clsx(container, className), ref: forwardedRef });
  }
);
IconButton.displayName = "Button";

// src/components/icons/CloseIcon.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
function CloseIcon(props) {
  return /* @__PURE__ */ jsx5("svg", { width: 10, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx5(
    "path",
    {
      d: "M9.708.292a.999.999 0 0 0-1.413 0l-3.289 3.29L1.717.291A.999.999 0 0 0 .305 1.705l3.289 3.289-3.29 3.289a.999.999 0 1 0 1.413 1.412l3.29-3.289 3.288 3.29a.999.999 0 0 0 1.413-1.413l-3.29-3.29 3.29-3.288a.999.999 0 0 0 0-1.413Z",
      fill: "currentColor"
    }
  ) });
}

// src/components/ui/Modal.tsx
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
function Modal({ trigger, children, open, defaultOpen, onOpenChange }) {
  const [isModalOpen, setModalOpen] = useState2(open ?? defaultOpen);
  const handleOpenChange = (open2) => {
    setModalOpen(open2);
    onOpenChange?.(open2);
  };
  return /* @__PURE__ */ jsxs2(Dialog.Root, { open: open ?? isModalOpen, onOpenChange: handleOpenChange, children: [
    /* @__PURE__ */ jsx6(Dialog.Trigger, { asChild: true, children: trigger }),
    /* @__PURE__ */ jsx6(Dialog.Portal, { children: /* @__PURE__ */ jsx6(StyleMarker, { children: /* @__PURE__ */ jsx6(Dialog.Overlay, { className: overlay, children: /* @__PURE__ */ jsxs2(Dialog.Content, { className: content, "aria-describedby": void 0, children: [
      /* @__PURE__ */ jsx6(ProgressProvider, { children }),
      /* @__PURE__ */ jsx6(Dialog.Close, { className: closeButtonContainer, asChild: true, children: /* @__PURE__ */ jsx6(IconButton, { type: "button", "aria-label": "Close", children: /* @__PURE__ */ jsx6(CloseIcon, {}) }) })
    ] }) }) }) })
  ] });
}

// src/components/util/wallet.ts
var NETWORK_MAP = {
  mainnet: "livenet",
  testnet: "testnet",
  devnet: void 0,
  localnet: void 0
};
var checkWalletNetwork = async (wallet, roochNetwork) => {
  try {
    const walletNetwork = await wallet.getNetwork();
    const target = NETWORK_MAP[roochNetwork];
    if (target && walletNetwork !== target) {
      return target;
    }
  } catch (_) {
  }
  return void 0;
};

// src/components/ui/Button.tsx
import { Slot as Slot3 } from "@radix-ui/react-slot";
import clsx2 from "clsx";
import { forwardRef as forwardRef3 } from "react";

// src/components/ui/Button.css.ts
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
var buttonVariants = _7a468({ defaultClassName: "Button_buttonVariants__1vdhm2g0", variantClassNames: { variant: { primary: "Button_buttonVariants_variant_primary__1vdhm2g1", outline: "Button_buttonVariants_variant_outline__1vdhm2g2" }, size: { md: "Button_buttonVariants_size_md__1vdhm2g3", lg: "Button_buttonVariants_size_lg__1vdhm2g4" } }, defaultVariants: { variant: "primary", size: "md" }, compoundVariants: [] });

// src/components/ui/Button.tsx
import { jsx as jsx7 } from "react/jsx-runtime";
var Button = forwardRef3(
  ({ className, variant, size, asChild = false, ...props }, forwardedRef) => {
    const Comp = asChild ? Slot3 : "button";
    return /* @__PURE__ */ jsx7(
      Comp,
      {
        ...props,
        className: clsx2(buttonVariants({ variant, size }), className),
        ref: forwardedRef
      }
    );
  }
);
Button.displayName = "Button";

// src/components/ui/Heading.tsx
import { Slot as Slot4 } from "@radix-ui/react-slot";
import clsx3 from "clsx";
import { forwardRef as forwardRef4 } from "react";

// src/components/ui/Heading.css.ts
import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
var headingVariants = _7a4682({ defaultClassName: "Heading__1v58k1t0", variantClassNames: { size: { sm: "Heading_headingVariants_size_sm__1v58k1t1", md: "Heading_headingVariants_size_md__1v58k1t2", lg: "Heading_headingVariants_size_lg__1v58k1t3", xl: "Heading_headingVariants_size_xl__1v58k1t4" }, weight: { normal: "Heading_headingVariants_weight_normal__1v58k1t5", bold: "Heading_headingVariants_weight_bold__1v58k1t6" }, truncate: { true: "Heading_headingVariants_truncate_true__1v58k1t7" } }, defaultVariants: { size: "lg", weight: "bold" }, compoundVariants: [] });

// src/components/ui/Heading.tsx
import { jsx as jsx8 } from "react/jsx-runtime";
var Heading = forwardRef4(
  ({
    children,
    className,
    asChild = false,
    as: Tag = "h1",
    size,
    weight,
    truncate,
    ...headingProps
  }, forwardedRef) => {
    return /* @__PURE__ */ jsx8(
      Slot4,
      {
        ...headingProps,
        ref: forwardedRef,
        className: clsx3(headingVariants({ size, weight, truncate }), className),
        children: asChild ? children : /* @__PURE__ */ jsx8(Tag, { children })
      }
    );
  }
);
Heading.displayName = "Heading";

// src/components/ui/Text.tsx
import { Slot as Slot5 } from "@radix-ui/react-slot";
import clsx4 from "clsx";
import { forwardRef as forwardRef5 } from "react";

// src/components/ui/Text.css.ts
import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
var textVariants = _7a4683({ defaultClassName: "Text__1utg4wj0", variantClassNames: { size: { sm: "Text_textVariants_size_sm__1utg4wj1" }, weight: { normal: "Text_textVariants_weight_normal__1utg4wj2", medium: "Text_textVariants_weight_medium__1utg4wj3", bold: "Text_textVariants_weight_bold__1utg4wj4" }, color: { muted: "Text_textVariants_color_muted__1utg4wj5", danger: "Text_textVariants_color_danger__1utg4wj6", warning: "Text_textVariants_color_warning__1utg4wj7" }, mono: { true: "Text_textVariants_mono_true__1utg4wj8" } }, defaultVariants: { size: "sm", weight: "normal" }, compoundVariants: [] });

// src/components/ui/Text.tsx
import { jsx as jsx9 } from "react/jsx-runtime";
var Text = forwardRef5(
  ({
    children,
    className,
    asChild = false,
    as: Tag = "div",
    size,
    weight,
    color,
    mono,
    ...textProps
  }, forwardedRef) => {
    return /* @__PURE__ */ jsx9(
      Slot5,
      {
        ...textProps,
        ref: forwardedRef,
        className: clsx4(textVariants({ size, weight, color, mono }), className),
        children: asChild ? children : /* @__PURE__ */ jsx9(Tag, { children })
      }
    );
  }
);
Text.displayName = "Text";

// src/components/switch-network-modal/views/SwitchNetworkView.css.ts
var connectionStatus = "SwitchNetworkView_connectionStatus__e4ayqy3";
var container2 = "SwitchNetworkView_container__e4ayqy0";
var retryButtonContainer = "SwitchNetworkView_retryButtonContainer__e4ayqy4";
var title = "SwitchNetworkView_title__e4ayqy2";
var walletIcon = "SwitchNetworkView_walletIcon__e4ayqy1";

// src/components/switch-network-modal/views/SwitchNetworkView.tsx
import { useState as useState4 } from "react";

// src/hooks/client/useCurrentNetwork.ts
function useCurrentNetwork() {
  return useRoochContext().network;
}

// src/hooks/client/useRoochContext.ts
import { useContext as useContext3 } from "react";

// src/provider/clientProvider.tsx
import { createContext as createContext3, useMemo, useState as useState3 } from "react";
import {
  getRoochNodeUrl,
  RoochClient
} from "@roochnetwork/rooch-sdk";

// src/provider/walletProvider.tsx
import { useCallback as useCallback2, createContext as createContext2, useEffect, useRef } from "react";
import { BitcoinAddress } from "@roochnetwork/rooch-sdk";

// src/hooks/wallet/useWalletStore.ts
import { useContext as useContext2 } from "react";
import { useStore } from "zustand";
function useWalletStore(selector) {
  const store = useContext2(WalletContext);
  if (!store) {
    throw new Error("Could not find WalletContext. Ensure that you have set up the WalletProvider.");
  }
  return useStore(store, selector);
}

// src/provider/walletProvider.tsx
import { jsx as jsx10 } from "react/jsx-runtime";
var WalletContext = createContext2(null);

// src/provider/clientProvider.tsx
import { jsx as jsx11 } from "react/jsx-runtime";
var ClientContext = createContext3(null);
var DEFAULT_NETWORKS = {
  localnet: { url: getRoochNodeUrl("localnet") }
};

// src/hooks/client/useRoochContext.ts
function useRoochContext() {
  const context = useContext3(ClientContext);
  if (!context) {
    throw new Error(
      "Could not find RoochClientContext. Ensure that you have set up the RoochClientProvider."
    );
  }
  return context;
}

// src/hooks/wallet/useCurrentAddress.ts
function useCurrentAddress() {
  return useWalletStore((state) => state.currentAddress);
}

// src/hooks/wallet/useCurrentWallet.ts
function useCurrentWallet() {
  const currentWallet = useWalletStore((state) => state.currentWallet);
  const connectionStatus2 = useWalletStore((state) => state.connectionStatus);
  switch (connectionStatus2) {
    case "connecting":
      return {
        status: connectionStatus2,
        wallet: currentWallet,
        isDisconnected: false,
        isConnecting: true,
        isConnected: false
      };
    case "disconnected":
      return {
        status: connectionStatus2,
        wallet: currentWallet,
        isDisconnected: true,
        isConnecting: false,
        isConnected: false
      };
    case "connected": {
      return {
        status: connectionStatus2,
        wallet: currentWallet,
        isDisconnected: false,
        isConnecting: false,
        isConnected: true
      };
    }
  }
}

// src/components/switch-network-modal/views/SwitchNetworkView.tsx
import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
function SwitchNetworkView({
  wallet,
  onSuccess,
  targetNetWork,
  switchNetwork
}) {
  const { start, finish, loading } = useProgress();
  const [error, setError] = useState4(false);
  const [support, setSupport] = useState4(true);
  const roochNetwork = useCurrentNetwork();
  const switch2Network = () => {
    start();
    switchNetwork(wallet, targetNetWork).catch((e) => {
      if ("message" in e && e.message.includes("not support")) {
        setSupport(false);
      }
      setError(true);
    }).finally(() => {
      finish();
    });
  };
  const refresh = () => {
    start();
    checkWalletNetwork(wallet, roochNetwork).then((result) => {
      if (!result) {
        onSuccess();
      }
    }).finally(() => finish());
  };
  return /* @__PURE__ */ jsxs3("div", { className: container2, children: [
    wallet.getName() && /* @__PURE__ */ jsx12(
      "img",
      {
        className: walletIcon,
        src: wallet.getIcon(),
        alt: `${wallet.getName()} logo`
      }
    ),
    /* @__PURE__ */ jsx12("div", { className: title, children: /* @__PURE__ */ jsxs3(Heading, { as: "h2", size: "xl", children: [
      "Check ",
      wallet.getName()
    ] }) }),
    /* @__PURE__ */ jsxs3("div", { className: connectionStatus, children: [
      /* @__PURE__ */ jsx12(Text, { color: "danger", children: !loading ? `${error ? "Switch failed" : `Wallet network is not ${targetNetWork}`}` : "being processed..." }),
      /* @__PURE__ */ jsx12(Text, { color: "muted", children: !loading ? `Please ${error ? "manually" : ""} switch the wallet network to ${targetNetWork}` : "" })
    ] }),
    /* @__PURE__ */ jsx12("div", { className: retryButtonContainer, children: /* @__PURE__ */ jsx12(
      Button,
      {
        disabled: loading,
        type: "button",
        variant: "outline",
        onClick: () => support ? switch2Network() : refresh(),
        children: support ? error ? "Retry Switch" : "Switch" : "Refresh"
      }
    ) })
  ] });
}

// src/components/switch-network-modal/SwitchNetworkModal.tsx
import { Fragment, jsx as jsx13 } from "react/jsx-runtime";
function SwitchNetworkModal() {
  const { wallet } = useCurrentWallet();
  const roochNetwork = useCurrentNetwork();
  const [open, setOpen] = useState5(false);
  const currentAddr = useCurrentAddress();
  const [targetNetwork, setTargetNetwork] = useState5();
  useEffect2(() => {
    if (!wallet) {
      return;
    }
    checkWalletNetwork(wallet, roochNetwork).then((r) => {
      setOpen(r !== void 0);
      setTargetNetwork(r);
    });
  }, [wallet, currentAddr, roochNetwork]);
  const switchNetwork = async (wallet2, target) => {
    return wallet2?.switchNetwork(target);
  };
  return wallet && /* @__PURE__ */ jsx13(Modal, { trigger: /* @__PURE__ */ jsx13(Fragment, {}), open, defaultOpen: false, onOpenChange: (v) => setOpen(v), children: /* @__PURE__ */ jsx13(
    SwitchNetworkView,
    {
      wallet,
      onSuccess: () => {
      },
      targetNetWork: targetNetwork,
      switchNetwork
    }
  ) });
}
export {
  SwitchNetworkModal
};
//# sourceMappingURL=SwitchNetworkModal.js.map