@embarkai/ui-kit 0.4.121 → 0.4.123

package/dist/index.d.cts

@@ -1256,9 +1256,11 @@ declare class Onboarder {
     /** deferred DOM observer */
     private domObserverTimer;
     private domObserver;
+    private onDomMutation;
     /** deferred resize observer */
     private resizeObserverTimer;
     private resizeObserver;
+    private onResize;
     /** TOUR */
     startTour(tour: TourStep[]): void;
     endTour(): void;

package/dist/index.d.ts

@@ -1256,9 +1256,11 @@ declare class Onboarder {
     /** deferred DOM observer */
     private domObserverTimer;
     private domObserver;
+    private onDomMutation;
     /** deferred resize observer */
     private resizeObserverTimer;
     private resizeObserver;
+    private onResize;
     /** TOUR */
     startTour(tour: TourStep[]): void;
     endTour(): void;

package/dist/index.js

@@ -11745,9 +11745,9 @@ var init_useOnboardingStore = __esm({
     useOnboardingStore = create6((set) => ({
       isTourAvailable: false,
       setIsTourAvailable: (isTourAvailable) => set({ isTourAvailable }),
-      elRect: { x: window.innerWidth / 2, y: window.innerHeight / 2, width: 0, height: 0 },
+      elRect: { x: 0, y: 0, width: 0, height: 0 },
       setElRect: (elRect) => set({ elRect }),
-      mountIntoNode: document.body,
+      mountIntoNode: null,
       setMountIntoNode: (mountIntoNode) => set({ mountIntoNode })
     }));
   }
@@ -11767,7 +11767,8 @@ var init_onboarder = __esm({
       elements = /* @__PURE__ */ new Map();
       /** deferred DOM observer */
       domObserverTimer = null;
-      domObserver = new MutationObserver(([domMutation]) => {
+      domObserver = null;
+      onDomMutation = ([domMutation]) => {
         if (this.domObserverTimer) clearTimeout(this.domObserverTimer);
         this.domObserverTimer = setTimeout(() => {
           const elId = this.tour[this.tourPointer]?.elId;
@@ -11777,10 +11778,11 @@ var init_onboarder = __esm({
           elementRef.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
           useOnboardingStore.getState().setElRect({ x, y, width, height });
         }, 200);
-      });
+      };
       /** deferred resize observer */
       resizeObserverTimer = null;
-      resizeObserver = new ResizeObserver((entries) => {
+      resizeObserver = null;
+      onResize = (entries) => {
         if (this.resizeObserverTimer) clearTimeout(this.resizeObserverTimer);
         this.resizeObserverTimer = setTimeout(() => {
           for (const entry of entries) {
@@ -11797,16 +11799,19 @@ var init_onboarder = __esm({
             useOnboardingStore.getState().setElRect(elRectData);
           }
         }, 200);
-      });
+      };
       /** TOUR */
       startTour(tour) {
         if (!tour || tour.length === 0) return;
         this.tourPointer = 0;
         this.tour = tour;
+        useOnboardingStore.getState().setElRect({ x: window.innerWidth / 2, y: window.innerHeight / 2, width: 0, height: 0 });
         useLayoutDataStore.getInitialState().setIsOnboarding(true);
         useLayoutStore.getInitialState().setIsDialogForced(true);
         const startElRef = this.elements.get(tour[0].elId)?.deref();
         if (!!startElRef) {
+          this.domObserver ??= new MutationObserver(this.onDomMutation);
+          this.resizeObserver ??= new ResizeObserver(this.onResize);
           this.domObserver.observe(startElRef, { childList: true, subtree: true });
           this.resizeObserver.observe(startElRef);
           this.resizeObserver.observe(document.body);
@@ -11815,8 +11820,8 @@ var init_onboarder = __esm({
       endTour() {
         this.tour = null;
         this.tourPointer = 0;
-        this.domObserver.disconnect();
-        this.resizeObserver.disconnect();
+        this.domObserver?.disconnect();
+        this.resizeObserver?.disconnect();
         useOnboardingStore.getState().setElRect({ x: window.innerWidth / 2, y: window.innerHeight / 2, width: 0, height: 0 });
         setTimeout(() => {
           useLayoutDataStore.getInitialState().setIsOnboarding(false);
@@ -11828,14 +11833,16 @@ var init_onboarder = __esm({
         const curStep = this.tour[this.tourPointer];
         curStep?.onNext?.();
         if (this.tourPointer === this.tour.length - 1) return this.endTour();
-        this.resizeObserver.disconnect();
-        this.domObserver.disconnect();
+        this.resizeObserver?.disconnect();
+        this.domObserver?.disconnect();
         setTimeout(() => {
           const nextStepPointer = this.tourPointer + 1;
           this.tourPointer = nextStepPointer;
           const nextStep = this.tour[nextStepPointer];
           const nextElRef = this.elements.get(nextStep.elId)?.deref();
           if (!!nextElRef) {
+            this.domObserver ??= new MutationObserver(this.onDomMutation);
+            this.resizeObserver ??= new ResizeObserver(this.onResize);
             this.domObserver.observe(nextElRef, { childList: true, subtree: true });
             this.resizeObserver.observe(nextElRef);
             this.resizeObserver.observe(document.body);
@@ -22835,32 +22842,98 @@ var init_onboarding_setup5 = __esm({
   }
 });
 
+// src/internal/components/MainMenu/constants.ts
+import { ArrowRightLeftIcon, ChevronLeft, ChevronRight as ChevronRight4, DollarSign as DollarSign2 } from "lucide-react";
+var MAIN_MENU_BUTTONS;
+var init_constants7 = __esm({
+  "src/internal/components/MainMenu/constants.ts"() {
+    MAIN_MENU_BUTTONS = [
+      {
+        id: "send",
+        page: "send" /* SEND */,
+        onboardingId: "mainmenu-send-button" /* sendButton */,
+        label: "passport:main.send",
+        icon: ChevronRight4,
+        pageParams: { sendFlow: "send" }
+      },
+      {
+        id: "bridge",
+        page: "send" /* SEND */,
+        onboardingId: "mainmenu-bridge-button" /* bridgeButton */,
+        label: "passport:main.bridge",
+        icon: ArrowRightLeftIcon,
+        pageParams: { sendFlow: "bridge" }
+      },
+      {
+        id: "receive",
+        page: "receive" /* RECEIVE */,
+        onboardingId: "mainmenu-receive-button" /* receiveButton */,
+        label: "passport:main.receive",
+        icon: ChevronLeft,
+        pageParams: {}
+      },
+      {
+        id: "buy",
+        page: "buy" /* BUY */,
+        onboardingId: "mainmenu-buy-button" /* buyButton */,
+        label: "passport:main.buy",
+        icon: DollarSign2,
+        pageParams: {}
+      }
+    ];
+  }
+});
+
 // src/internal/components/MainMenu/MainMenu.tsx
-import { ArrowRightLeftIcon, ChevronLeft, ChevronRight as ChevronRight4, DollarSign as DollarSign2, ListIcon } from "lucide-react";
+import { ListIcon } from "lucide-react";
 import { jsx as jsx97, jsxs as jsxs88 } from "react/jsx-runtime";
 function MainMenu() {
+  const { config } = useProviderConfig();
   const { t } = useT();
   const { open: openEmbarkAI } = useOpenPage();
   const address = useSession((st) => st.address);
   useOnboardingTourAvailable(true);
   useProvidersList();
+  const menuButtons = MAIN_MENU_BUTTONS.filter(({ id }) => {
+    switch (id) {
+      case "bridge":
+        return !!config.current?.features?.showAssetBridge;
+      default:
+        return true;
+    }
+  });
   return /* @__PURE__ */ jsxs88(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: [
-    /* @__PURE__ */ jsx97("div", { className: "w-full grid grid-cols-4 gap-0 md:gap-[var(--ui-kit-gap)] py-[10px] md:py-1", children: MAIN_MENU_BUTTONS.map(({ page, onboardingId, label, icon: Icon2, pageParams }, btnIdx) => /* @__PURE__ */ jsxs88(
-      Button,
+    /* @__PURE__ */ jsx97(
+      "div",
       {
-        ref: (inst) => onboarder.registerElement(onboardingId, inst),
-        size: "large",
-        variant: "ghost",
-        disabled: !address,
-        className: "flex-col w-full h-fit p-0",
-        onClick: () => openEmbarkAI(page, pageParams),
-        children: [
-          /* @__PURE__ */ jsx97(Icon2, { className: "w-5 h-5 md:w-8 md:h-8" }),
-          /* @__PURE__ */ jsx97("span", { className: "text-xs font-semibold", children: t(label) })
-        ]
-      },
-      `${page}-${btnIdx}`
-    )) }),
+        className: cn(
+          //
+          "grid w-full",
+          "gap-0 md:gap-[var(--ui-kit-gap)]",
+          "py-[10px] md:py-1",
+          {
+            "grid-cols-4": menuButtons.length === 4,
+            "grid-cols-3": menuButtons.length < 4
+          }
+        ),
+        children: menuButtons.map(({ page, onboardingId, label, icon: Icon2, pageParams }, btnIdx) => /* @__PURE__ */ jsxs88(
+          Button,
+          {
+            ref: (inst) => onboarder.registerElement(onboardingId, inst),
+            size: "large",
+            variant: "ghost",
+            disabled: !address,
+            className: cn("flex-col w-full h-fit p-0"),
+            onClick: () => openEmbarkAI(page, pageParams),
+            children: [
+              /* @__PURE__ */ jsx97(Icon2, { className: "w-5 h-5 md:w-8 md:h-8" }),
+              /* @__PURE__ */ jsx97("span", { className: "text-xs font-semibold", children: t(label) })
+            ]
+          },
+          `${page}-${btnIdx}`
+        ))
+      }
+    ),
     /* @__PURE__ */ jsx97("div", { className: "w-full border-b border-[var(--ui-kit-bd)]" }),
     /* @__PURE__ */ jsxs88("div", { className: "w-full flex justify-between items-center", children: [
       /* @__PURE__ */ jsx97("span", { className: "pl-[var(--ui-kit-pd)] text-xl font-semibold", children: t("passport:main.assets") }),
@@ -22881,54 +22954,20 @@ function MainMenu() {
     /* @__PURE__ */ jsx97("div", { ref: (inst) => onboarder.registerElement("mainmenu-portfolio-section" /* portfolioSection */, inst), className: "w-full", children: /* @__PURE__ */ jsx97(PortfolioList, {}) })
   ] });
 }
-var MAIN_MENU_BUTTONS;
 var init_MainMenu = __esm({
   "src/internal/components/MainMenu/MainMenu.tsx"() {
+    init_ProviderContext();
     init_SessionContext();
     init_useOpenPage();
     init_useT();
     init_useLayoutDataStore();
+    init_cn();
     init_Expandable2();
     init_ManageWalletMenu();
     init_Onboarding();
     init_PortfolioMenu2();
     init_button();
-    MAIN_MENU_BUTTONS = [
-      {
-        page: "send" /* SEND */,
-        onboardingId: "mainmenu-send-button" /* sendButton */,
-        label: "passport:main.send",
-        icon: ChevronRight4,
-        pageParams: { sendFlow: "send" }
-      },
-      {
-        page: "send" /* SEND */,
-        onboardingId: "mainmenu-bridge-button" /* bridgeButton */,
-        label: "passport:main.bridge",
-        icon: ArrowRightLeftIcon,
-        pageParams: { sendFlow: "bridge" }
-      },
-      {
-        page: "receive" /* RECEIVE */,
-        onboardingId: "mainmenu-receive-button" /* receiveButton */,
-        label: "passport:main.receive",
-        icon: ChevronLeft,
-        pageParams: {}
-      },
-      {
-        page: "buy" /* BUY */,
-        onboardingId: "mainmenu-buy-button" /* buyButton */,
-        label: "passport:main.buy",
-        icon: DollarSign2,
-        pageParams: {}
-      }
-      // {
-      //   page: PageKey.ASSETS,
-      //   onboardingId: MainMenuOnboardingID.portfolioButton,
-      //   label: 'passport:main.assets',
-      //   icon: Wallet2
-      // }
-    ];
+    init_constants7();
   }
 });
 
@@ -23483,7 +23522,7 @@ var init_nickname_fingerprint = __esm({
 
 // src/internal/components/ReceiveMenu/ReceiveMenu.tsx
 import { useQuery as useQuery21 } from "@tanstack/react-query";
-import { ArrowLeft as ArrowLeft19, AtSignIcon as AtSignIcon2, CheckCircle2 as CheckCircle24, Copy as Copy2, FingerprintIcon, LoaderIcon as LoaderIcon13, Wallet2Icon as Wallet2Icon4 } from "lucide-react";
+import { ArrowLeft as ArrowLeft19, AtSignIcon as AtSignIcon2, CheckCircle2 as CheckCircle24, Copy as Copy2, FingerprintIcon, LoaderIcon as LoaderIcon13, Wallet2Icon as Wallet2Icon3 } from "lucide-react";
 import QRCode from "qrcode";
 import { useEffect as useEffect40, useMemo as useMemo15, useState as useState24 } from "react";
 import { Fragment as Fragment35, jsx as jsx100, jsxs as jsxs91 } from "react/jsx-runtime";
@@ -23554,7 +23593,7 @@ function ReceiveMenu() {
           setTimeout(() => setAddressCopied(false), 2e3);
         },
         children: [
-          /* @__PURE__ */ jsx100(Wallet2Icon4, { className: "h-4 w-4 flex-none" }),
+          /* @__PURE__ */ jsx100(Wallet2Icon3, { className: "h-4 w-4 flex-none" }),
           /* @__PURE__ */ jsxs91("span", { className: cn2("text-[10px] flex-1 block", { "text-[var(--ui-kit-bg-success)]": isAddressCopied }), children: [
             address.slice(0, 10),
             "...",
@@ -23720,7 +23759,7 @@ var init_useSecurityStore = __esm({
 
 // src/internal/components/SecurityMenu/constants.ts
 var KEYSHARE_RECOVERY_STATS_QUERY, CONNECTED_TRUSTED_APPS_QUERY;
-var init_constants7 = __esm({
+var init_constants8 = __esm({
   "src/internal/components/SecurityMenu/constants.ts"() {
     KEYSHARE_RECOVERY_STATS_QUERY = "keyshare-recovery-stats-query";
     CONNECTED_TRUSTED_APPS_QUERY = "connected-trusted-apps-query";
@@ -23749,7 +23788,7 @@ var init_useConnectedApps = __esm({
   "src/internal/components/SecurityMenu/ConnectedApps/useConnectedApps.ts"() {
     init_SessionContext();
     init_httpClient();
-    init_constants7();
+    init_constants8();
   }
 });
 
@@ -23974,7 +24013,7 @@ var init_UntrustApplication = __esm({
     init_iframe_manager();
     init_button();
     init_highlight();
-    init_constants7();
+    init_constants8();
     init_useSecurityStore();
   }
 });
@@ -24130,7 +24169,7 @@ var init_useKeyshareRecoveryStats = __esm({
     init_keyshare();
     init_iframe_manager();
     init_vaultClient();
-    init_constants7();
+    init_constants8();
   }
 });
 
@@ -24646,7 +24685,7 @@ var init_PolicyForm = __esm({
 
 // src/internal/components/SecurityMenu/UserPolicies/constants.ts
 var DEFAULT_POLICY_RULES;
-var init_constants8 = __esm({
+var init_constants9 = __esm({
   "src/internal/components/SecurityMenu/UserPolicies/constants.ts"() {
     DEFAULT_POLICY_RULES = {
       destinations: { allow: [], deny: [] },
@@ -24839,7 +24878,7 @@ var init_UserPolicies = __esm({
     init_button();
     init_highlight();
     init_api4();
-    init_constants8();
+    init_constants9();
     init_usePolicyForm();
     init_useUserAssetsPolicies();
   }
@@ -24853,7 +24892,7 @@ var init_UserPolicies2 = __esm({
     init_useUserAssetsPolicies();
     init_usePolicyForm();
     init_api4();
-    init_constants8();
+    init_constants9();
   }
 });
 
@@ -26348,7 +26387,7 @@ var init_useBridgeBalance = __esm({
 });
 
 // src/internal/components/SendMenu/hyperbridge/steps/SelectStep.tsx
-import { ArrowLeftRightIcon, ArrowRightLeftIcon as ArrowRightLeftIcon2, LoaderIcon as LoaderIcon18, Wallet2Icon as Wallet2Icon5, XIcon as XIcon2 } from "lucide-react";
+import { ArrowLeftRightIcon, ArrowRightLeftIcon as ArrowRightLeftIcon2, LoaderIcon as LoaderIcon18, Wallet2Icon as Wallet2Icon4, XIcon as XIcon2 } from "lucide-react";
 import { Fragment as Fragment39 } from "react";
 import { Fragment as Fragment40, jsx as jsx111, jsxs as jsxs101 } from "react/jsx-runtime";
 function SelectStep(props) {
@@ -26567,7 +26606,7 @@ function SelectStep(props) {
                 disabled: isQuoteEstimating || !originChain || !destinationChain || !hyperRoute,
                 placeholder: t("passport:bridgeMenu.labels.optionalRecipient") + " (ex: 0x...)",
                 value: recipient || "",
-                Icon: Wallet2Icon5,
+                Icon: Wallet2Icon4,
                 onChange: (e) => {
                   useFlowSelectorStore.getState().setError(null);
                   useBridgeStore.getState().setRecipient(e.target.value);
@@ -29836,7 +29875,7 @@ var init_TransactionsMenu2 = __esm({
 // src/internal/components/SettingsMenu/constants.ts
 import { ActivityIcon, ArrowLeftRight, AtSign as AtSign4, DatabaseBackup as DatabaseBackup2, Link2, LockKeyhole, UsersRound } from "lucide-react";
 var NAV_BUTTONS;
-var init_constants9 = __esm({
+var init_constants10 = __esm({
   "src/internal/components/SettingsMenu/constants.ts"() {
     init_icons();
     NAV_BUTTONS = [
@@ -29932,7 +29971,7 @@ var init_SettingsMenu = __esm({
     init_Onboarding();
     init_TransactionsMenu2();
     init_button();
-    init_constants9();
+    init_constants10();
   }
 });
 
@@ -30294,7 +30333,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.121",
+      version: "0.4.123",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embarkai/ui-kit",
-  "version": "0.4.121",
+  "version": "0.4.123",
   "description": "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
   "type": "module",
   "main": "./dist/index.cjs",