@iota/dapp-kit 0.2.0 → 0.3.0

package/dist/cjs/components/ConnectButton.js

@@ -33,9 +33,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=#H4sIAAAAAAAAA51US4/TMBC+91fMcYtiqYXCIT0iIe6LxHkSe2Orrm2NJyRZxH9HtrttmrAL4hLJ4+8xL6cetCL18G4LPzcAjR9FNM/GdTU0nqQi0fjxuAFovfVUww+kByEkhiBOhkWORtF4OW0T6sk7Fk94NnZaYXkKviMMehIJ9iWjbqxontWKk26+K9NpjsJ5OqOdEXiya8bC5TGBbpwha/2rjTVOCf1nyswnwb5mVGEpZkUiBmxzH98gZuRjAW6Pm1+bukyj6Zm9KyPBEBQSulbV4LxTyaLB9tSR750Ul7kwoYsBSTledNQ4rcjwajqz+F2d8/iiktnVxXYWKetSwy4dAkqZKfl0RuqMy4driViqYzWykKr1hGy8u5W4NvA9p0RfIFclbyvobZGzJl4X40Vp5n6f2FVB7yvQ7yvQHyrQhwr0xwr0p6L4RieHdcfuK63FoJo089iSt7ZBypKDkaxr2B/C+ApMMGF7urzI/AoJpenjaplS2IjRInVly/+yGa+46f7c3N6/RumHVFZUDDvYwX4XxvJZ2N/cPpcfQdH8lvS2x//I/rJDhzBC9NbIRfa/AfAolD6tBAAA
-var init_ = __esm({
-  "vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=#H4sIAAAAAAAAA51US4/TMBC+91fMcYtiqYXCIT0iIe6LxHkSe2Orrm2NJyRZxH9HtrttmrAL4hLJ4+8xL6cetCL18G4LPzcAjR9FNM/GdTU0nqQi0fjxuAFovfVUww+kByEkhiBOhkWORtF4OW0T6sk7Fk94NnZaYXkKviMMehIJ9iWjbqxontWKk26+K9NpjsJ5OqOdEXiya8bC5TGBbpwha/2rjTVOCf1nyswnwb5mVGEpZkUiBmxzH98gZuRjAW6Pm1+bukyj6Zm9KyPBEBQSulbV4LxTyaLB9tSR750Ul7kwoYsBSTledNQ4rcjwajqz+F2d8/iiktnVxXYWKetSwy4dAkqZKfl0RuqMy4driViqYzWykKr1hGy8u5W4NvA9p0RfIFclbyvobZGzJl4X40Vp5n6f2FVB7yvQ7yvQHyrQhwr0xwr0p6L4RieHdcfuK63FoJo089iSt7ZBypKDkaxr2B/C+ApMMGF7urzI/AoJpenjaplS2IjRInVly/+yGa+46f7c3N6/RumHVFZUDDvYwX4XxvJZ2N/cPpcfQdH8lvS2x//I/rJDhzBC9NbIRfa/AfAolD6tBAAA"() {
+// vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=OndoZXJlKCopIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGNvbG9yOiB2YXIoLS1kYXBwLWtpdC1jb2xvcnMtYm9keSk7CiAgZm9udC1mYW1pbHk6IHZhcigtLWRhcHAta2l0LXR5cG9ncmFwaHktZm9udEZhbWlseSk7CiAgZm9udC1zaXplOiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1ub3JtYWwpOwogIGZvbnQtc3R5bGU6IHZhcigtLWRhcHAta2l0LXR5cG9ncmFwaHktZm9udFN0eWxlKTsKICBmb250LXdlaWdodDogdmFyKC0tZGFwcC1raXQtZm9udFdlaWdodHMtbm9ybWFsKTsKICBsaW5lLWhlaWdodDogdmFyKC0tZGFwcC1raXQtdHlwb2dyYXBoeS1saW5lSGVpZ2h0KTsKICBsZXR0ZXItc3BhY2luZzogdmFyKC0tZGFwcC1raXQtdHlwb2dyYXBoeS1sZXR0ZXJTcGFjaW5nKTsKfQo6d2hlcmUoYnV0dG9uKSB7CiAgYXBwZWFyYW5jZTogbm9uZTsKICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBmb250LXNpemU6IGluaGVyaXQ7CiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7CiAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7CiAgbGV0dGVyLXNwYWNpbmc6IGluaGVyaXQ7CiAgY29sb3I6IGluaGVyaXQ7CiAgYm9yZGVyOiAwOwogIHBhZGRpbmc6IDA7CiAgbWFyZ2luOiAwOwp9Cjp3aGVyZShhKSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7Cn0KOndoZXJlKG9sLCB1bCkgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7Cn0KOndoZXJlKGgxLCBoMiwgaDMsIGg0LCBoNSwgaDYpIHsKICBmb250LXNpemU6IGluaGVyaXQ7CiAgZm9udC13ZWlnaHQ6IGluaGVyaXQ7CiAgbWFyZ2luOiAwOwp9
+var init_StyleMarker_css_ts_vanilla = __esm({
+  "vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=OndoZXJlKCopIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGNvbG9yOiB2YXIoLS1kYXBwLWtpdC1jb2xvcnMtYm9keSk7CiAgZm9udC1mYW1pbHk6IHZhcigtLWRhcHAta2l0LXR5cG9ncmFwaHktZm9udEZhbWlseSk7CiAgZm9udC1zaXplOiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1ub3JtYWwpOwogIGZvbnQtc3R5bGU6IHZhcigtLWRhcHAta2l0LXR5cG9ncmFwaHktZm9udFN0eWxlKTsKICBmb250LXdlaWdodDogdmFyKC0tZGFwcC1raXQtZm9udFdlaWdodHMtbm9ybWFsKTsKICBsaW5lLWhlaWdodDogdmFyKC0tZGFwcC1raXQtdHlwb2dyYXBoeS1saW5lSGVpZ2h0KTsKICBsZXR0ZXItc3BhY2luZzogdmFyKC0tZGFwcC1raXQtdHlwb2dyYXBoeS1sZXR0ZXJTcGFjaW5nKTsKfQo6d2hlcmUoYnV0dG9uKSB7CiAgYXBwZWFyYW5jZTogbm9uZTsKICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBmb250LXNpemU6IGluaGVyaXQ7CiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7CiAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7CiAgbGV0dGVyLXNwYWNpbmc6IGluaGVyaXQ7CiAgY29sb3I6IGluaGVyaXQ7CiAgYm9yZGVyOiAwOwogIHBhZGRpbmc6IDA7CiAgbWFyZ2luOiAwOwp9Cjp3aGVyZShhKSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7Cn0KOndoZXJlKG9sLCB1bCkgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7Cn0KOndoZXJlKGgxLCBoMiwgaDMsIGg0LCBoNSwgaDYpIHsKICBmb250LXNpemU6IGluaGVyaXQ7CiAgZm9udC13ZWlnaHQ6IGluaGVyaXQ7CiAgbWFyZ2luOiAwOwp9"() {
   }
 });
 
@@ -43,7 +43,7 @@ var init_ = __esm({
 var require_StyleMarker_css = __commonJS({
   "src/components/styling/StyleMarker.css.ts"() {
     "use strict";
-    init_();
+    init_StyleMarker_css_ts_vanilla();
   }
 });
 
@@ -98,9 +98,10 @@ var walletMutationKeys = {
   autoconnectWallet: formMutationKeyFn("autoconnect-wallet"),
   disconnectWallet: formMutationKeyFn("disconnect-wallet"),
   signPersonalMessage: formMutationKeyFn("sign-personal-message"),
-  signTransactionBlock: formMutationKeyFn("sign-transaction-block"),
-  signAndExecuteTransactionBlock: formMutationKeyFn("sign-and-execute-transaction-block"),
-  switchAccount: formMutationKeyFn("switch-account")
+  signTransaction: formMutationKeyFn("sign-transaction"),
+  signAndExecuteTransaction: formMutationKeyFn("sign-and-execute-transaction"),
+  switchAccount: formMutationKeyFn("switch-account"),
+  reportTransactionEffects: formMutationKeyFn("report-transaction-effects")
 };
 function formMutationKeyFn(baseEntity) {
   return function mutationKeyFn(additionalKeys = []) {
@@ -117,31 +118,35 @@ var WalletAccountNotFoundError = class extends Error {
 // src/hooks/wallet/useCurrentWallet.ts
 function useCurrentWallet() {
   const currentWallet = useWalletStore((state) => state.currentWallet);
-  const connectionStatus = useWalletStore((state) => state.connectionStatus);
-  switch (connectionStatus) {
+  const connectionStatus2 = useWalletStore((state) => state.connectionStatus);
+  const supportedIntents = useWalletStore((state) => state.supportedIntents);
+  switch (connectionStatus2) {
     case "connecting":
       return {
-        connectionStatus,
+        connectionStatus: connectionStatus2,
         currentWallet: null,
         isDisconnected: false,
         isConnecting: true,
-        isConnected: false
+        isConnected: false,
+        supportedIntents: []
       };
     case "disconnected":
       return {
-        connectionStatus,
+        connectionStatus: connectionStatus2,
         currentWallet: null,
         isDisconnected: true,
         isConnecting: false,
-        isConnected: false
+        isConnected: false,
+        supportedIntents: []
       };
     case "connected": {
       return {
-        connectionStatus,
+        connectionStatus: connectionStatus2,
         currentWallet,
         isDisconnected: false,
         isConnecting: false,
-        isConnected: true
+        isConnected: true,
+        supportedIntents
       };
     }
   }
@@ -204,12 +209,11 @@ function useSwitchAccount({
 
 // src/components/AccountDropdownMenu.css.ts
 var connectedAccount = "AccountDropdownMenu_connectedAccount__1x0gmpf0";
-var icon = "AccountDropdownMenu_icon__1x0gmpf2";
 var menuContainer = "AccountDropdownMenu_menuContainer__1x0gmpf1";
-var menuContent = "AccountDropdownMenu_menuContent__1x0gmpf3";
-var menuItem = "AccountDropdownMenu_menuItem__1x0gmpf4";
-var separator = "AccountDropdownMenu_separator__1x0gmpf6";
-var switchAccountMenuItem = "AccountDropdownMenu_switchAccountMenuItem__1x0gmpf5";
+var menuContent = "AccountDropdownMenu_menuContent__1x0gmpf2";
+var menuItem = "AccountDropdownMenu_menuItem__1x0gmpf3";
+var separator = "AccountDropdownMenu_separator__1x0gmpf5";
+var switchAccountMenuItem = "AccountDropdownMenu_switchAccountMenuItem__1x0gmpf4";
 
 // src/components/icons/CheckIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -286,7 +290,7 @@ var import_react5 = require("react");
 
 // src/components/ui/Text.css.ts
 var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
-var textVariants = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "Text__aprhbd0", variantClassNames: { size: { sm: "Text_textVariants_size_sm__aprhbd1" }, weight: { normal: "Text_textVariants_weight_normal__aprhbd2", medium: "Text_textVariants_weight_medium__aprhbd3", bold: "Text_textVariants_weight_bold__aprhbd4" }, color: { body: "Text_textVariants_color_body__aprhbd5", muted: "Text_textVariants_color_muted__aprhbd6", danger: "Text_textVariants_color_danger__aprhbd7" }, mono: { true: "Text_textVariants_mono_true__aprhbd8" } }, defaultVariants: { size: "sm", weight: "normal" }, compoundVariants: [] });
+var textVariants = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "Text__aprhbd0", variantClassNames: { size: { sm: "Text_textVariants_size_sm__aprhbd1" }, weight: { normal: "Text_textVariants_weight_normal__aprhbd2", medium: "Text_textVariants_weight_medium__aprhbd3", bold: "Text_textVariants_weight_bold__aprhbd4" }, color: { muted: "Text_textVariants_color_muted__aprhbd5", danger: "Text_textVariants_color_danger__aprhbd6" }, mono: { true: "Text_textVariants_mono_true__aprhbd7" } }, defaultVariants: { size: "sm", weight: "normal" }, compoundVariants: [] });
 
 // src/components/ui/Text.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -317,13 +321,13 @@ Text.displayName = "Text";
 
 // src/components/AccountDropdownMenu.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function AccountDropdownMenu({ currentAccount }) {
+function AccountDropdownMenu({ currentAccount, size = "lg" }) {
   const { mutate: disconnectWallet } = useDisconnectWallet();
   const accounts = useAccounts();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu.Root, { modal: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { size: "md", className: connectedAccount, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: currentAccount.label ?? (0, import_utils.formatAddress)(currentAccount.address) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronIcon, { className: icon })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { size, className: connectedAccount, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { mono: true, weight: "bold", children: currentAccount.label ?? (0, import_utils.formatAddress)(currentAccount.address) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronIcon, {})
     ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyleMarker, { className: menuContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu.Content, { className: menuContent, children: [
       accounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -357,7 +361,7 @@ function AccountDropdownMenuItem({
       className: (0, import_clsx3.default)(menuItem, switchAccountMenuItem),
       onSelect: () => switchAccount({ account }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: account.label ?? (0, import_utils.formatAddress)(account.address) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { mono: true, children: account.label ?? (0, import_utils.formatAddress)(account.address) }),
         active ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) : null
       ]
     }
@@ -366,12 +370,78 @@ function AccountDropdownMenuItem({
 
 // src/components/connect-modal/ConnectModal.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
-var import_react9 = require("react");
+var import_clsx7 = __toESM(require("clsx"));
+var import_react8 = require("react");
 
-// src/components/icons/CloseIcon.tsx
+// src/hooks/wallet/useConnectWallet.ts
+var import_wallet_standard = require("@iota/wallet-standard");
+var import_react_query3 = require("@tanstack/react-query");
+function useConnectWallet({
+  mutationKey,
+  ...mutationOptions
+} = {}) {
+  const setWalletConnected = useWalletStore((state) => state.setWalletConnected);
+  const setConnectionStatus = useWalletStore((state) => state.setConnectionStatus);
+  return (0, import_react_query3.useMutation)({
+    mutationKey: walletMutationKeys.connectWallet(mutationKey),
+    mutationFn: async ({ wallet, accountAddress, ...connectArgs }) => {
+      try {
+        setConnectionStatus("connecting");
+        const connectResult = await wallet.features["standard:connect"].connect(connectArgs);
+        const connectedIotaAccounts = connectResult.accounts.filter(
+          (account) => account.chains.some(import_wallet_standard.isSupportedChain)
+        );
+        const selectedAccount = getSelectedAccount(connectedIotaAccounts, accountAddress);
+        setWalletConnected(
+          wallet,
+          connectedIotaAccounts,
+          selectedAccount,
+          connectResult.supportedIntents
+        );
+        return { accounts: connectedIotaAccounts };
+      } catch (error) {
+        setConnectionStatus("disconnected");
+        throw error;
+      }
+    },
+    ...mutationOptions
+  });
+}
+function getSelectedAccount(connectedAccounts, accountAddress) {
+  if (connectedAccounts.length === 0) {
+    return null;
+  }
+  if (accountAddress) {
+    const selectedAccount = connectedAccounts.find(
+      (account) => account.address === accountAddress
+    );
+    return selectedAccount ?? connectedAccounts[0];
+  }
+  return connectedAccounts[0];
+}
+
+// src/utils/walletUtils.ts
+var import_wallet_standard2 = require("@iota/wallet-standard");
+function getWalletUniqueIdentifier(wallet) {
+  return wallet?.id ?? wallet?.name;
+}
+
+// src/components/icons/BackIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function BackIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "path",
+    {
+      d: "M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
+// src/components/icons/CloseIcon.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CloseIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: 10, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: 10, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "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",
@@ -390,7 +460,7 @@ var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn"
 var headingVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "Heading__12b5l8i0", variantClassNames: { size: { sm: "Heading_headingVariants_size_sm__12b5l8i1", md: "Heading_headingVariants_size_md__12b5l8i2", lg: "Heading_headingVariants_size_lg__12b5l8i3", xl: "Heading_headingVariants_size_xl__12b5l8i4" }, weight: { normal: "Heading_headingVariants_weight_normal__12b5l8i5", bold: "Heading_headingVariants_weight_bold__12b5l8i6" }, truncate: { true: "Heading_headingVariants_truncate_true__12b5l8i7" } }, defaultVariants: { size: "lg", weight: "bold" }, compoundVariants: [] });
 
 // src/components/ui/Heading.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Heading = (0, import_react6.forwardRef)(
   ({
     children,
@@ -402,13 +472,13 @@ var Heading = (0, import_react6.forwardRef)(
     truncate,
     ...headingProps
   }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_slot4.Slot,
       {
         ...headingProps,
         ref: forwardedRef,
         className: (0, import_clsx4.default)(headingVariants({ size, weight, truncate }), className),
-        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tag, { children })
+        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { children })
       }
     );
   }
@@ -424,139 +494,179 @@ var import_react7 = require("react");
 var container = "IconButton_container__ap1qll0";
 
 // src/components/ui/IconButton.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var IconButton = (0, import_react7.forwardRef)(
   ({ className, asChild = false, ...props }, forwardedRef) => {
     const Comp = asChild ? import_react_slot5.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Comp, { ...props, className: (0, import_clsx5.default)(container, className), ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Comp, { ...props, className: (0, import_clsx5.default)(container, className), ref: forwardedRef });
   }
 );
 IconButton.displayName = "Button";
 
 // src/components/connect-modal/ConnectModal.css.ts
-var closeButtonContainer = "ConnectModal_closeButtonContainer__17mljma5";
-var content = "ConnectModal_content__17mljma3";
+var backButtonContainer = "ConnectModal_backButtonContainer__17mljma6";
+var closeButtonContainer = "ConnectModal_closeButtonContainer__17mljma7";
+var content = "ConnectModal_content__17mljma2";
 var overlay = "ConnectModal_overlay__17mljma0";
-var separator2 = "ConnectModal_separator__17mljma2";
+var selectedViewContainer = "ConnectModal_selectedViewContainer__17mljma5";
 var title = "ConnectModal_title__17mljma1";
-var walletListContent = "ConnectModal_walletListContent__17mljma6";
+var viewContainer = "ConnectModal_viewContainer__17mljma4";
+var walletListContainer = "ConnectModal_walletListContainer__17mljma9";
+var walletListContainerWithViewSelected = "ConnectModal_walletListContainerWithViewSelected__17mljmaa";
+var walletListContent = "ConnectModal_walletListContent__17mljma8";
+var whatIsAWalletButton = "ConnectModal_whatIsAWalletButton__17mljma3";
+
+// src/components/connect-modal/views/ConnectionStatus.css.ts
+var connectionStatus = "ConnectionStatus_connectionStatus__c5q1ll3";
+var container2 = "ConnectionStatus_container__c5q1ll0";
+var retryButtonContainer = "ConnectionStatus_retryButtonContainer__c5q1ll4";
+var title2 = "ConnectionStatus_title__c5q1ll2";
+var walletIcon = "ConnectionStatus_walletIcon__c5q1ll1";
+
+// src/components/connect-modal/views/ConnectionStatus.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ConnectionStatus({
+  selectedWallet,
+  hadConnectionError,
+  onRetryConnection
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: container2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "img",
+      {
+        className: walletIcon,
+        src: selectedWallet.icon,
+        alt: `${selectedWallet.name} logo`
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: title2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Heading, { as: "h2", size: "xl", children: [
+      "Opening ",
+      selectedWallet.name
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: connectionStatus, children: hadConnectionError ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: "danger", children: "Connection failed" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: "muted", children: "Confirm connection in the wallet..." }) }),
+    hadConnectionError ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: retryButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        onClick: () => onRetryConnection(selectedWallet),
+        children: "Retry Connection"
+      }
+    ) }) : null
+  ] });
+}
 
-// src/hooks/wallet/useWallets.ts
-function useWallets() {
-  return useWalletStore((state) => state.wallets);
+// src/components/connect-modal/InfoSection.css.ts
+var container3 = "InfoSection_container__1d1nrmt0";
+
+// src/components/connect-modal/InfoSection.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function InfoSection({ title: title3, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: container3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { as: "h3", size: "sm", weight: "normal", children: title3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { weight: "medium", color: "muted", children })
+  ] });
 }
 
-// src/components/connect-modal/views/WalletConnect.tsx
-var import_react8 = require("react");
+// src/components/connect-modal/views/GettingStarted.css.ts
+var container4 = "GettingStarted_container__qu36t90";
+var content2 = "GettingStarted_content__qu36t91";
+var installButtonContainer = "GettingStarted_installButtonContainer__qu36t92";
 
-// src/utils/walletUtils.ts
-var import_wallet_standard = require("@iota/wallet-standard");
-function getWalletUniqueIdentifier(wallet) {
-  return wallet?.id ?? wallet?.name;
+// src/components/connect-modal/views/GettingStarted.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function GettingStarted() {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: container4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { as: "h2", children: "Get Started with IOTA" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: content2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InfoSection, { title: "Install the IOTA Wallet Extension", children: "We recommend pinning IOTA Wallet to your taskbar for quicker access." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InfoSection, { title: "Create or Import a Wallet", children: "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InfoSection, { title: "Refresh Your Browser", children: "Once you set up your wallet, refresh this window browser to load up the extension." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: installButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "a",
+        {
+          href: "https://chrome.google.com/webstore/detail/iota-wallet/opcgpfmipidbgpenhmajoajpbobppdil",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Install Wallet Extension"
+        }
+      ) }) })
+    ] })
+  ] });
 }
 
-// src/hooks/wallet/useConnectWallet.ts
-var import_wallet_standard2 = require("@iota/wallet-standard");
-var import_react_query3 = require("@tanstack/react-query");
-function useConnectWallet({
-  mutationKey,
-  ...mutationOptions
-} = {}) {
-  const setWalletConnected = useWalletStore((state) => state.setWalletConnected);
-  const setConnectionStatus = useWalletStore((state) => state.setConnectionStatus);
-  return (0, import_react_query3.useMutation)({
-    mutationKey: walletMutationKeys.connectWallet(mutationKey),
-    mutationFn: async ({ wallet, accountAddress, ...connectArgs }) => {
-      try {
-        setConnectionStatus("connecting");
-        const connectResult = await wallet.features["standard:connect"].connect(connectArgs);
-        const connectedIotaAccounts = connectResult.accounts.filter(
-          (account) => account.chains.some(import_wallet_standard2.isSupportedChain)
-        );
-        const selectedAccount = getSelectedAccount(connectedIotaAccounts, accountAddress);
-        setWalletConnected(wallet, connectedIotaAccounts, selectedAccount);
-        return { accounts: connectedIotaAccounts };
-      } catch (error) {
-        setConnectionStatus("disconnected");
-        throw error;
-      }
-    },
-    ...mutationOptions
-  });
+// src/components/connect-modal/views/WhatIsAWallet.css.ts
+var container5 = "WhatIsAWallet_container__1kdcimq0";
+var content3 = "WhatIsAWallet_content__1kdcimq1";
+
+// src/components/connect-modal/views/WhatIsAWallet.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function WhatIsAWallet() {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: container5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading, { as: "h2", children: "What is a Wallet" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: content3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InfoSection, { title: "Easy Login", children: "No need to create new accounts and passwords for every website. Just connect your wallet and get going." }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InfoSection, { title: "Store your Digital Assets", children: "Send, receive, store, and display your digital assets like NFTs & coins." })
+    ] })
+  ] });
 }
-function getSelectedAccount(connectedAccounts, accountAddress) {
-  if (connectedAccounts.length === 0) {
-    return null;
-  }
-  if (accountAddress) {
-    const selectedAccount = connectedAccounts.find(
-      (account) => account.address === accountAddress
-    );
-    return selectedAccount ?? connectedAccounts[0];
-  }
-  return connectedAccounts[0];
+
+// src/hooks/wallet/useWallets.ts
+function useWallets() {
+  return useWalletStore((state) => state.wallets);
+}
+
+// src/components/icons/IotaIcon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function IotaIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { width: 28, height: 28, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: 28, height: 28, rx: 6, fill: "#6FBCF0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7.942 20.527A6.875 6.875 0 0 0 13.957 24c2.51 0 4.759-1.298 6.015-3.473a6.875 6.875 0 0 0 0-6.945l-5.29-9.164a.837.837 0 0 0-1.45 0l-5.29 9.164a6.875 6.875 0 0 0 0 6.945Zm4.524-11.75 1.128-1.953a.418.418 0 0 1 .725 0l4.34 7.516a5.365 5.365 0 0 1 .449 4.442 4.675 4.675 0 0 0-.223-.73c-.599-1.512-1.954-2.68-4.029-3.47-1.426-.54-2.336-1.336-2.706-2.364-.476-1.326.021-2.77.316-3.44Zm-1.923 3.332L9.255 14.34a5.373 5.373 0 0 0 0 5.43 5.373 5.373 0 0 0 4.702 2.714 5.38 5.38 0 0 0 3.472-1.247c.125-.314.51-1.462.034-2.646-.44-1.093-1.5-1.965-3.15-2.594-1.864-.707-3.076-1.811-3.6-3.28a4.601 4.601 0 0 1-.17-.608Z",
+        fill: "#fff"
+      }
+    )
+  ] });
 }
 
 // src/components/connect-modal/wallet-list/WalletList.css.ts
-var container2 = "WalletList_container__1tkdegw0";
+var container6 = "WalletList_container__1tkdegw0";
 
 // src/components/connect-modal/wallet-list/WalletListItem.tsx
 var import_clsx6 = require("clsx");
 
 // src/components/connect-modal/wallet-list/WalletListItem.css.ts
-var container3 = "WalletListItem_container__1vrvezk0";
+var container7 = "WalletListItem_container__1vrvezk0";
 var selectedWalletItem = "WalletListItem_selectedWalletItem__1vrvezk2";
-var walletIcon = "WalletListItem_walletIcon__1vrvezk4";
+var walletIcon2 = "WalletListItem_walletIcon__1vrvezk3";
 var walletItem = "WalletListItem_walletItem__1vrvezk1";
-var walletName = "WalletListItem_walletName__1vrvezk3";
-
-// src/components/icons/ArrowRightIcon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function ArrowRightIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "path",
-        {
-          fill: "currentColor",
-          d: "m10.707 6.293 5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L13.586 12 9.293 7.707a1 1 0 0 1 1.414-1.414Z"
-        }
-      )
-    }
-  );
-}
 
 // src/components/connect-modal/wallet-list/WalletListItem.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function WalletListItem({ name, icon: icon3, onClick, isSelected = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: container3, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function WalletListItem({ name, icon, onClick, isSelected = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: container7, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "button",
     {
       className: (0, import_clsx6.clsx)(walletItem, { [selectedWalletItem]: isSelected }),
       type: "button",
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_clsx6.clsx)(walletName), children: [
-          typeof icon3 === "string" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { className: walletIcon, src: icon3, alt: `${name} logo` }) : icon3,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Heading, { size: "md", truncate: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: name }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowRightIcon, {})
+        typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { className: walletIcon2, src: icon, alt: `${name} logo` }) : icon,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading, { size: "md", truncate: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: name }) })
       ]
     }
   ) });
 }
 
 // src/components/connect-modal/wallet-list/WalletList.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function WalletList({ selectedWalletName, onSelect, wallets }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: container2, children: wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }) {
+  const wallets = useWallets();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: container6, children: wallets.length > 0 ? wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     WalletListItem,
     {
       name: wallet.name,
@@ -565,577 +675,142 @@ function WalletList({ selectedWalletName, onSelect, wallets }) {
       onClick: () => onSelect(wallet)
     },
     getWalletUniqueIdentifier(wallet)
-  )) });
+  )) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    WalletListItem,
+    {
+      name: "IOTA Wallet",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IotaIcon, {}),
+      onClick: onPlaceholderClick,
+      isSelected: true
+    }
+  ) });
 }
 
-// src/components/connect-modal/views/WalletConnect.css.ts
-var confirmText = "WalletConnect_confirmText__uo0o3s6";
-var errorContainer = "WalletConnect_errorContainer__uo0o3s2";
-var errorMessage = "WalletConnect_errorMessage__uo0o3s3";
-var openingText = "WalletConnect_openingText__uo0o3s5";
-var separator3 = "WalletConnect_separator__uo0o3s7";
-var successContainer = "WalletConnect_successContainer__uo0o3s4";
-var walletConnectContainer = "WalletConnect_walletConnectContainer__uo0o3s0";
-var walletConnectFooter = "WalletConnect_walletConnectFooter__uo0o3s1";
-
-// src/components/connect-modal/views/WalletConnect.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function WalletConnectListView({ wallets, onOpenChange }) {
+// src/components/connect-modal/ConnectModal.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ConnectModal({ trigger, open, defaultOpen, onOpenChange }) {
+  const [isModalOpen, setModalOpen] = (0, import_react8.useState)(open ?? defaultOpen);
+  const [currentView, setCurrentView] = (0, import_react8.useState)();
   const [selectedWallet, setSelectedWallet] = (0, import_react8.useState)();
   const { mutate, isError } = useConnectWallet();
-  function handleSelectWallet(wallet) {
-    if (getWalletUniqueIdentifier(selectedWallet) !== getWalletUniqueIdentifier(wallet)) {
-      setSelectedWallet(wallet);
-      connectWallet(wallet);
-    }
-  }
-  function resetSelection() {
+  const resetSelection = () => {
     setSelectedWallet(void 0);
-  }
-  function handleOpenChange(open) {
-    if (!open) {
+    setCurrentView(void 0);
+  };
+  const handleOpenChange = (open2) => {
+    if (!open2) {
       resetSelection();
     }
-    onOpenChange(open);
-  }
-  function connectWallet(wallet) {
+    setModalOpen(open2);
+    onOpenChange?.(open2);
+  };
+  const connectWallet = (wallet) => {
+    setCurrentView("connection-status");
     mutate(
       { wallet },
       {
         onSuccess: () => handleOpenChange(false)
       }
     );
+  };
+  let modalContent;
+  switch (currentView) {
+    case "what-is-a-wallet":
+      modalContent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(WhatIsAWallet, {});
+      break;
+    case "getting-started":
+      modalContent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GettingStarted, {});
+      break;
+    case "connection-status":
+      modalContent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ConnectionStatus,
+        {
+          selectedWallet,
+          hadConnectionError: isError,
+          onRetryConnection: connectWallet
+        }
+      );
+      break;
+    default:
+      modalContent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(WhatIsAWallet, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: walletConnectContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      WalletList,
-      {
-        selectedWalletName: getWalletUniqueIdentifier(selectedWallet),
-        onSelect: handleSelectWallet,
-        wallets
-      }
-    ) }),
-    selectedWallet && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: walletConnectFooter, children: isError ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: errorContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: errorMessage, children: "Connection failed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog.Root, { open: open ?? isModalOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Overlay, { className: overlay, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog.Content, { className: content, "aria-describedby": void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "div",
         {
-          size: "md",
-          variant: "outline",
-          onClick: () => connectWallet(selectedWallet),
-          children: "Retry"
+          className: (0, import_clsx7.default)(walletListContainer, {
+            [walletListContainerWithViewSelected]: !!currentView
+          }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: walletListContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Title, { className: title, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Heading, { as: "h2", children: "Connect a Wallet" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                WalletList,
+                {
+                  selectedWalletName: getWalletUniqueIdentifier(
+                    selectedWallet
+                  ),
+                  onPlaceholderClick: () => setCurrentView("getting-started"),
+                  onSelect: (wallet) => {
+                    if (getWalletUniqueIdentifier(selectedWallet) !== getWalletUniqueIdentifier(wallet)) {
+                      setSelectedWallet(wallet);
+                      connectWallet(wallet);
+                    }
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                className: whatIsAWalletButton,
+                onClick: () => setCurrentView("what-is-a-wallet"),
+                type: "button",
+                children: "What is a Wallet?"
+              }
+            )
+          ]
         }
-      )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: successContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: openingText, children: [
-        "Opening ",
-        selectedWallet.name,
-        "..."
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: separator3 }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: confirmText, children: "Please confirm the connection in your wallet" })
-    ] }) })
-  ] });
-}
-
-// src/utils/stateStorage.ts
-function createInMemoryStore() {
-  const store = /* @__PURE__ */ new Map();
-  return {
-    getItem(key) {
-      return store.get(key);
-    },
-    setItem(key, value) {
-      store.set(key, value);
-    },
-    removeItem(key) {
-      store.delete(key);
-    }
-  };
-}
-
-// src/constants/walletDefaults.ts
-var DEFAULT_STORAGE = typeof window !== "undefined" && window.localStorage ? localStorage : createInMemoryStore();
-var WALLET_CHROME_EXTENSION_ID = "TODO";
-var WALLET_DOWNLOAD_URL = "https://chromewebstore.google.com/detail/" + WALLET_CHROME_EXTENSION_ID;
-
-// src/components/icons/ArrowTopRightIcon.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function ArrowTopRightIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "path",
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "div",
         {
-          d: "M17.4825 6.29014C17.3873 6.19563 17.2778 6.12421 17.161 6.07588C17.0431 6.02699 16.9138 6 16.7782 6L8.70711 6C8.15482 6 7.70711 6.44772 7.70711 7C7.70711 7.55228 8.15482 8 8.70711 8L14.364 8L6.29289 16.0711C5.90237 16.4616 5.90237 17.0948 6.29289 17.4853C6.68342 17.8758 7.31658 17.8758 7.70711 17.4853L15.7782 9.41421V15.0711C15.7782 15.6234 16.2259 16.0711 16.7782 16.0711C17.3305 16.0711 17.7782 15.6234 17.7782 15.0711L17.7782 7.0008C17.7782 6.86458 17.7509 6.73391 17.7016 6.61556C17.6531 6.49895 17.5816 6.38966 17.487 6.29464L17.4853 6.29289L17.4825 6.29014Z",
-          fill: "currentColor"
+          className: (0, import_clsx7.default)(viewContainer, {
+            [selectedViewContainer]: !!currentView
+          }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: backButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              IconButton,
+              {
+                type: "button",
+                "aria-label": "Back",
+                onClick: () => resetSelection(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BackIcon, {})
+              }
+            ) }),
+            modalContent
+          ]
         }
-      )
-    }
-  );
-}
-
-// src/components/icons/IotaIcon.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function IotaIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M18.2698 2.25899C18.2698 2.95431 17.7023 3.51797 17.0023 3.51797C16.3024 3.51797 15.7349 2.95431 15.7349 2.25899C15.7349 1.56367 16.3024 1 17.0023 1C17.7023 1 18.2698 1.56367 18.2698 2.25899Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M19.6946 20.0436C19.6946 20.7389 19.1272 21.3026 18.4272 21.3026C17.7272 21.3026 17.1598 20.7389 17.1598 20.0436C17.1598 19.3483 17.7272 18.7846 18.4272 18.7846C19.1272 18.7846 19.6946 19.3483 19.6946 20.0436Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M17.3647 6.66519C17.952 6.66519 18.4282 6.19222 18.4282 5.60878C18.4282 5.02534 17.952 4.55236 17.3647 4.55236C16.7773 4.55236 16.3012 5.02534 16.3012 5.60878C16.3012 6.19222 16.7773 6.66519 17.3647 6.66519Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M21.2564 6.01379C21.2564 6.59723 20.7802 7.0702 20.1929 7.0702C19.6055 7.0702 19.1294 6.59723 19.1294 6.01379C19.1294 5.43034 19.6055 4.95737 20.1929 4.95737C20.7802 4.95737 21.2564 5.43034 21.2564 6.01379Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M17.0027 9.34312C17.5028 9.34312 17.9083 8.94036 17.9083 8.44353C17.9083 7.9467 17.5028 7.54394 17.0027 7.54394C16.5026 7.54394 16.0971 7.9467 16.0971 8.44353C16.0971 8.94036 16.5026 9.34312 17.0027 9.34312Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M20.7373 8.82346C20.7373 9.32029 20.3318 9.72305 19.8317 9.72305C19.3315 9.72305 18.9261 9.32029 18.9261 8.82346C18.9261 8.32663 19.3315 7.92388 19.8317 7.92388C20.3318 7.92388 20.7373 8.32663 20.7373 8.82346Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M22.0944 10.6007C22.5945 10.6007 23 10.1979 23 9.70111C23 9.20428 22.5945 8.80152 22.0944 8.80152C21.5942 8.80152 21.1888 9.20428 21.1888 9.70111C21.1888 10.1979 21.5942 10.6007 22.0944 10.6007Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M19.7849 11.0954C19.7849 11.5297 19.4305 11.8817 18.9933 11.8817C18.5562 11.8817 18.2018 11.5297 18.2018 11.0954C18.2018 10.6611 18.5562 10.3091 18.9933 10.3091C19.4305 10.3091 19.7849 10.6611 19.7849 11.0954Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M16.1651 11.4988C16.6023 11.4988 16.9567 11.1467 16.9567 10.7124C16.9567 10.2782 16.6023 9.92612 16.1651 9.92612C15.7279 9.92612 15.3735 10.2782 15.3735 10.7124C15.3735 11.1467 15.7279 11.4988 16.1651 11.4988Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M22.0722 11.9708C22.0722 12.405 21.7178 12.7571 21.2806 12.7571C20.8434 12.7571 20.489 12.405 20.489 11.9708C20.489 11.5365 20.8434 11.1845 21.2806 11.1845C21.7178 11.1845 22.0722 11.5365 22.0722 11.9708Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M17.8618 13.5243C18.2372 13.5243 18.5415 13.222 18.5415 12.849C18.5415 12.4761 18.2372 12.1738 17.8618 12.1738C17.4864 12.1738 17.182 12.4761 17.182 12.849C17.182 13.222 17.4864 13.5243 17.8618 13.5243Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M20.8296 13.7024C20.8296 14.0753 20.5252 14.3776 20.1498 14.3776C19.7744 14.3776 19.4701 14.0753 19.4701 13.7024C19.4701 13.3294 19.7744 13.0271 20.1498 13.0271C20.5252 13.0271 20.8296 13.3294 20.8296 13.7024Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M15.0558 13.12C15.4312 13.12 15.7356 12.8177 15.7356 12.4448C15.7356 12.0719 15.4312 11.7695 15.0558 11.7695C14.6804 11.7695 14.3761 12.0719 14.3761 12.4448C14.3761 12.8177 14.6804 13.12 15.0558 13.12Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M17.1825 14.0625C17.1825 14.3729 16.9292 14.6245 16.6168 14.6245C16.3043 14.6245 16.0511 14.3729 16.0511 14.0625C16.0511 13.7521 16.3043 13.5005 16.6168 13.5005C16.9292 13.5005 17.1825 13.7521 17.1825 14.0625Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M17.59 16.1771C17.8649 16.1771 18.0878 15.9557 18.0878 15.6826C18.0878 15.4095 17.8649 15.1882 17.59 15.1882C17.3151 15.1882 17.0923 15.4095 17.0923 15.6826C17.0923 15.9557 17.3151 16.1771 17.59 16.1771Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M16.7985 16.0872C16.7985 16.311 16.6159 16.4924 16.3906 16.4924C16.1654 16.4924 15.9828 16.311 15.9828 16.0872C15.9828 15.8635 16.1654 15.6821 16.3906 15.6821C16.6159 15.6821 16.7985 15.8635 16.7985 16.0872Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M15.3273 15.3222C15.6022 15.3222 15.825 15.1008 15.825 14.8278C15.825 14.5547 15.6022 14.3333 15.3273 14.3333C15.0524 14.3333 14.8295 14.5547 14.8295 14.8278C14.8295 15.1008 15.0524 15.3222 15.3273 15.3222Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M14.3535 13.6818C14.3535 13.9922 14.1003 14.2438 13.7878 14.2438C13.4754 14.2438 13.2221 13.9922 13.2221 13.6818C13.2221 13.3714 13.4754 13.1198 13.7878 13.1198C14.1003 13.1198 14.3535 13.3714 14.3535 13.6818Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M13.7663 10.0159C14.0788 10.0159 14.3321 9.76428 14.3321 9.45391C14.3321 9.14355 14.0788 8.89194 13.7663 8.89194C13.4539 8.89194 13.2006 9.14355 13.2006 9.45391C13.2006 9.76428 13.4539 10.0159 13.7663 10.0159Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M14.5115 7.54296C14.5115 7.81603 14.2886 8.03741 14.0137 8.03741C13.7388 8.03741 13.516 7.81603 13.516 7.54296C13.516 7.26988 13.7388 7.04851 14.0137 7.04851C14.2886 7.04851 14.5115 7.26988 14.5115 7.54296Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M14.5576 6.41961C14.7828 6.41961 14.9654 6.23823 14.9654 6.01447C14.9654 5.79072 14.7828 5.60933 14.5576 5.60933C14.3323 5.60933 14.1497 5.79072 14.1497 6.01447C14.1497 6.23823 14.3323 6.41961 14.5576 6.41961Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M14.1056 5.16003C14.1056 5.4331 13.8827 5.65448 13.6078 5.65448C13.3329 5.65448 13.1101 5.4331 13.1101 5.16003C13.1101 4.88695 13.3329 4.66558 13.6078 4.66558C13.8827 4.66558 14.1056 4.88695 14.1056 5.16003Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M18.8818 15.4808C19.1943 15.4808 19.4475 15.2292 19.4475 14.9189C19.4475 14.6085 19.1943 14.3569 18.8818 14.3569C18.5694 14.3569 18.3161 14.6085 18.3161 14.9189C18.3161 15.2292 18.5694 15.4808 18.8818 15.4808Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M12.8827 4.43881C12.8827 4.74918 12.6294 5.00078 12.3169 5.00078C12.0045 5.00078 11.7512 4.74918 11.7512 4.43881C11.7512 4.12845 12.0045 3.87684 12.3169 3.87684C12.6294 3.87684 12.8827 4.12845 12.8827 4.43881Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M12.7029 7.38447C13.0153 7.38447 13.2686 7.13287 13.2686 6.8225C13.2686 6.51214 13.0153 6.26053 12.7029 6.26053C12.3904 6.26053 12.1371 6.51214 12.1371 6.8225C12.1371 7.13287 12.3904 7.38447 12.7029 7.38447Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M12.7485 8.98132C12.7485 9.35424 12.4442 9.65656 12.0688 9.65656C11.6934 9.65656 11.389 9.35424 11.389 8.98132C11.389 8.6084 11.6934 8.30609 12.0688 8.30609C12.4442 8.30609 12.7485 8.6084 12.7485 8.98132Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M10.0077 9.65685C10.4448 9.65685 10.7992 9.3048 10.7992 8.87053C10.7992 8.43626 10.4448 8.08421 10.0077 8.08421C9.57049 8.08421 9.21609 8.43626 9.21609 8.87053C9.21609 9.3048 9.57049 9.65685 10.0077 9.65685Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M8.51443 9.29686C8.51443 9.79369 8.10898 10.1964 7.60883 10.1964C7.10868 10.1964 6.70323 9.79369 6.70323 9.29686C6.70323 8.80003 7.10868 8.39727 7.60883 8.39727C8.10898 8.39727 8.51443 8.80003 8.51443 9.29686Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M4.98453 11.4774C5.57188 11.4774 6.04801 11.0044 6.04801 10.421C6.04801 9.83755 5.57188 9.36458 4.98453 9.36458C4.39719 9.36458 3.92105 9.83755 3.92105 10.421C3.92105 11.0044 4.39719 11.4774 4.98453 11.4774Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M3.53481 12.3773C3.53481 13.0726 2.96737 13.6363 2.2674 13.6363C1.56744 13.6363 1 13.0726 1 12.3773C1 11.682 1.56744 11.1183 2.2674 11.1183C2.96737 11.1183 3.53481 11.682 3.53481 12.3773Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M3.92108 8.846C4.50842 8.846 4.98455 8.37303 4.98455 7.78959C4.98455 7.20614 4.50842 6.73317 3.92108 6.73317C3.33373 6.73317 2.8576 7.20614 2.8576 7.78959C2.8576 8.37303 3.33373 8.846 3.92108 8.846Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M7.45097 6.66545C7.45097 7.16228 7.04552 7.56504 6.54537 7.56504C6.04522 7.56504 5.63977 7.16228 5.63977 6.66545C5.63977 6.16862 6.04522 5.76586 6.54537 5.76586C7.04552 5.76586 7.45097 6.16862 7.45097 6.66545Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M6.16173 5.18211C6.66188 5.18211 7.06733 4.77935 7.06733 4.28252C7.06733 3.78569 6.66188 3.38293 6.16173 3.38293C5.66158 3.38293 5.25613 3.78569 5.25613 4.28252C5.25613 4.77935 5.66158 5.18211 6.16173 5.18211Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M9.35214 3.85619C9.35214 4.29046 8.99774 4.64251 8.56057 4.64251C8.12339 4.64251 7.76899 4.29046 7.76899 3.85619C7.76899 3.42192 8.12339 3.06987 8.56057 3.06987C8.99774 3.06987 9.35214 3.42192 9.35214 3.85619Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M10.6194 4.64374C10.9948 4.64374 11.2991 4.34143 11.2991 3.9685C11.2991 3.59558 10.9948 3.29327 10.6194 3.29327C10.244 3.29327 9.93964 3.59558 9.93964 3.9685C9.93964 4.34143 10.244 4.64374 10.6194 4.64374Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M11.6828 6.3522C11.6828 6.72512 11.3784 7.02743 11.003 7.02743C10.6276 7.02743 10.3233 6.72512 10.3233 6.3522C10.3233 5.97927 10.6276 5.67696 11.003 5.67696C11.3784 5.67696 11.6828 5.97927 11.6828 6.3522Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M8.94421 7.04748C9.38139 7.04748 9.73579 6.69543 9.73579 6.26116C9.73579 5.82688 9.38139 5.47484 8.94421 5.47484C8.50703 5.47484 8.15263 5.82688 8.15263 6.26116C8.15263 6.69543 8.50703 7.04748 8.94421 7.04748Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M7.1115 12.6253C7.1115 12.849 6.9289 13.0304 6.70365 13.0304C6.4784 13.0304 6.2958 12.849 6.2958 12.6253C6.2958 12.4015 6.4784 12.2201 6.70365 12.2201C6.9289 12.2201 7.1115 12.4015 7.1115 12.6253Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M8.33273 12.8261C8.60763 12.8261 8.83048 12.6047 8.83048 12.3316C8.83048 12.0585 8.60763 11.8372 8.33273 11.8372C8.05782 11.8372 7.83497 12.0585 7.83497 12.3316C7.83497 12.6047 8.05782 12.8261 8.33273 12.8261Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M10.6874 11.5899C10.6874 11.9003 10.4342 12.1519 10.1217 12.1519C9.80928 12.1519 9.55599 11.9003 9.55599 11.5899C9.55599 11.2795 9.80928 11.0279 10.1217 11.0279C10.4342 11.0279 10.6874 11.2795 10.6874 11.5899Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M10.5519 13.9513C10.9273 13.9513 11.2316 13.649 11.2316 13.2761C11.2316 12.9031 10.9273 12.6008 10.5519 12.6008C10.1764 12.6008 9.87212 12.9031 9.87212 13.2761C9.87212 13.649 10.1764 13.9513 10.5519 13.9513Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M8.94418 13.8163C8.94418 14.1267 8.69089 14.3783 8.37845 14.3783C8.06601 14.3783 7.81272 14.1267 7.81272 13.8163C7.81272 13.5059 8.06601 13.2543 8.37845 13.2543C8.69089 13.2543 8.94418 13.5059 8.94418 13.8163Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M6.45595 14.3542C6.73085 14.3542 6.9537 14.1328 6.9537 13.8597C6.9537 13.5866 6.73085 13.3653 6.45595 13.3653C6.18105 13.3653 5.95819 13.5866 5.95819 13.8597C5.95819 14.1328 6.18105 14.3542 6.45595 14.3542Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M7.04361 15.3451C7.04361 15.6555 6.79033 15.9071 6.47788 15.9071C6.16544 15.9071 5.91216 15.6555 5.91216 15.3451C5.91216 15.0348 6.16544 14.7832 6.47788 14.7832C6.79033 14.7832 7.04361 15.0348 7.04361 15.3451Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M8.78634 16.1997C9.16176 16.1997 9.46609 15.8974 9.46609 15.5245C9.46609 15.1516 9.16176 14.8493 8.78634 14.8493C8.41093 14.8493 8.10659 15.1516 8.10659 15.5245C8.10659 15.8974 8.41093 16.1997 8.78634 16.1997Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M12.2709 15.1196C12.2709 15.5539 11.9165 15.906 11.4793 15.906C11.0421 15.906 10.6877 15.5539 10.6877 15.1196C10.6877 14.6854 11.0421 14.3333 11.4793 14.3333C11.9165 14.3333 12.2709 14.6854 12.2709 15.1196Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M13.0642 17.8635C13.5644 17.8635 13.9698 17.4607 13.9698 16.9639C13.9698 16.4671 13.5644 16.0643 13.0642 16.0643C12.5641 16.0643 12.1586 16.4671 12.1586 16.9639C12.1586 17.4607 12.5641 17.8635 13.0642 17.8635Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M10.5276 17.3445C10.5276 17.7788 10.1732 18.1308 9.73605 18.1308C9.29887 18.1308 8.94447 17.7788 8.94447 17.3445C8.94447 16.9103 9.29887 16.5582 9.73605 16.5582C10.1732 16.5582 10.5276 16.9103 10.5276 17.3445Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M7.8585 19.6612C8.29568 19.6612 8.65008 19.3092 8.65008 18.8749C8.65008 18.4406 8.29568 18.0886 7.8585 18.0886C7.42132 18.0886 7.06692 18.4406 7.06692 18.8749C7.06692 19.3092 7.42132 19.6612 7.8585 19.6612Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M10.3252 20.7404C10.3252 21.2372 9.91977 21.64 9.41962 21.64C8.91947 21.64 8.51402 21.2372 8.51402 20.7404C8.51402 20.2436 8.91947 19.8408 9.41962 19.8408C9.91977 19.8408 10.3252 20.2436 10.3252 20.7404Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M13.5843 22C14.1716 22 14.6477 21.527 14.6477 20.9436C14.6477 20.3601 14.1716 19.8872 13.5843 19.8872C12.9969 19.8872 12.5208 20.3601 12.5208 20.9436C12.5208 21.527 12.9969 22 13.5843 22Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M12.2051 19.2123C12.2051 19.7091 11.7996 20.1119 11.2995 20.1119C10.7993 20.1119 10.3939 19.7091 10.3939 19.2123C10.3939 18.7155 10.7993 18.3127 11.2995 18.3127C11.7996 18.3127 12.2051 18.7155 12.2051 19.2123Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M15.3275 19.7516C15.9149 19.7516 16.391 19.2786 16.391 18.6951C16.391 18.1117 15.9149 17.6387 15.3275 17.6387C14.7402 17.6387 14.2641 18.1117 14.2641 18.6951C14.2641 19.2786 14.7402 19.7516 15.3275 19.7516Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "path",
-          {
-            d: "M7.58701 17.0534C7.58701 17.4263 7.28268 17.7286 6.90726 17.7286C6.53185 17.7286 6.22751 17.4263 6.22751 17.0534C6.22751 16.6804 6.53185 16.3781 6.90726 16.3781C7.28268 16.3781 7.58701 16.6804 7.58701 17.0534Z",
-            fill: "currentColor"
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/connect-modal/views/GetTheWallet.css.ts
-var button = "GetTheWallet_button__1iomrym3";
-var container4 = "GetTheWallet_container__1iomrym0";
-var content2 = "GetTheWallet_content__1iomrym1";
-var icon2 = "GetTheWallet_icon__1iomrym4";
-var text = "GetTheWallet_text__1iomrym2";
-
-// src/components/connect-modal/views/GetTheWallet.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function GetTheWalletView() {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: container4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: content2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IotaIcon, { className: icon2, width: 48, height: 48 }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: text, children: "Don't have a wallet yet?" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: WALLET_DOWNLOAD_URL, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Button, { size: "md", variant: "primary", className: button, children: [
-      "Get the IOTA wallet",
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArrowTopRightIcon, { width: 16, height: 16 })
-    ] }) })
-  ] });
-}
-
-// src/components/connect-modal/ConnectModal.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function ConnectModal({ trigger, open, defaultOpen, onOpenChange }) {
-  const wallets = useWallets();
-  const [isModalOpen, setModalOpen] = (0, import_react9.useState)(open ?? defaultOpen);
-  const handleOpenChange = (open2) => {
-    setModalOpen(open2);
-    onOpenChange?.(open2);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dialog.Root, { open: open ?? isModalOpen, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Overlay, { className: overlay, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dialog.Content, { className: content, "aria-describedby": void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: walletListContent, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Title, { className: title, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading, { as: "h2", children: "Connect a Wallet" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: separator2 }),
-        wallets?.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          WalletConnectListView,
-          {
-            wallets,
-            onOpenChange: handleOpenChange
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GetTheWalletView, {})
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog.Close, { className: closeButtonContainer, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { type: "button", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, {}) }) })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Close, { className: closeButtonContainer, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { type: "button", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseIcon, {}) }) })
     ] }) }) }) })
   ] });
 }
 
 // src/components/ConnectButton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function ConnectButton({ connectText = "Connect", ...buttonProps }) {
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ConnectButton({
+  connectText = "Connect Wallet",
+  size,
+  ...buttonProps
+}) {
   const currentAccount = useCurrentAccount();
-  return currentAccount ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AccountDropdownMenu, { currentAccount }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return currentAccount ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AccountDropdownMenu, { currentAccount, size }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     ConnectModal,
     {
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { ...buttonProps, children: connectText }) })
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { ...buttonProps, size, children: connectText }) })
     }
   );
 }