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

The best way to connect a wallet

"use client";
import {
  AppContext
} from "./chunk-FKYDNCKF.js";
import {
  DisclaimerText
} from "./chunk-S4UEOOUP.js";
import {
  DisclaimerLink
} from "./chunk-JYW4WTWH.js";
import {
  LoginIcon
} from "./chunk-5FYRUKTJ.js";
import {
  AssetsIcon
} from "./chunk-2CO7DG5E.js";
import {
  ActionButton
} from "./chunk-7P76HI55.js";
import {
  I18nContext
} from "./chunk-E5IRXM5F.js";
import {
  Text
} from "./chunk-32RBZPUM.js";
import {
  touchableStyles
} from "./chunk-2W63IDAD.js";
import {
  Box
} from "./chunk-ZKEPQLOV.js";

// src/components/ConnectModal/ConnectModalIntro.tsx
import React, { useContext } from "react";
function ConnectModalIntro({
  compactModeEnabled = false,
  getWallet
}) {
  const { disclaimer: Disclaimer, learnMoreUrl } = useContext(AppContext);
  const { i18n } = useContext(I18nContext);
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    Box,
    {
      alignItems: "center",
      color: "accentColor",
      display: "flex",
      flexDirection: "column",
      height: "full",
      justifyContent: "space-around"
    },
    /* @__PURE__ */ React.createElement(Box, { marginBottom: "10" }, !compactModeEnabled && /* @__PURE__ */ React.createElement(Text, { color: "modalText", size: "18", weight: "heavy" }, i18n.t("intro.title"))),
    /* @__PURE__ */ React.createElement(
      Box,
      {
        display: "flex",
        flexDirection: "column",
        gap: "32",
        justifyContent: "center",
        marginY: "20",
        style: { maxWidth: 312 }
      },
      /* @__PURE__ */ React.createElement(Box, { alignItems: "center", display: "flex", flexDirection: "row", gap: "16" }, /* @__PURE__ */ React.createElement(Box, { borderRadius: "6", height: "48", minWidth: "48", width: "48" }, /* @__PURE__ */ React.createElement(AssetsIcon, null)), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React.createElement(Text, { color: "modalText", size: "14", weight: "bold" }, i18n.t("intro.digital_asset.title")), /* @__PURE__ */ React.createElement(Text, { color: "modalTextSecondary", size: "14", weight: "medium" }, i18n.t("intro.digital_asset.description")))),
      /* @__PURE__ */ React.createElement(Box, { alignItems: "center", display: "flex", flexDirection: "row", gap: "16" }, /* @__PURE__ */ React.createElement(Box, { borderRadius: "6", height: "48", minWidth: "48", width: "48" }, /* @__PURE__ */ React.createElement(LoginIcon, null)), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React.createElement(Text, { color: "modalText", size: "14", weight: "bold" }, i18n.t("intro.login.title")), /* @__PURE__ */ React.createElement(Text, { color: "modalTextSecondary", size: "14", weight: "medium" }, i18n.t("intro.login.description"))))
    ),
    /* @__PURE__ */ React.createElement(
      Box,
      {
        alignItems: "center",
        display: "flex",
        flexDirection: "column",
        gap: "12",
        justifyContent: "center",
        margin: "10"
      },
      /* @__PURE__ */ React.createElement(ActionButton, { label: i18n.t("intro.get.label"), onClick: getWallet }),
      /* @__PURE__ */ React.createElement(
        Box,
        {
          as: "a",
          className: touchableStyles({ active: "shrink", hover: "grow" }),
          display: "block",
          href: learnMoreUrl,
          paddingX: "12",
          paddingY: "4",
          rel: "noreferrer",
          style: { willChange: "transform" },
          target: "_blank",
          transition: "default"
        },
        /* @__PURE__ */ React.createElement(Text, { color: "accentColor", size: "14", weight: "bold" }, i18n.t("intro.learn_more.label"))
      )
    ),
    Disclaimer && !compactModeEnabled && /* @__PURE__ */ React.createElement(Box, { marginBottom: "8", marginTop: "12", textAlign: "center" }, /* @__PURE__ */ React.createElement(Disclaimer, { Link: DisclaimerLink, Text: DisclaimerText }))
  ));
}

export {
  ConnectModalIntro
};