Improvements (#196)

* chore: upgrade dependencies

* fix: improve token input and asset withdraw token

* feat: add OverlaysManager

package.json

@@ -40,8 +40,9 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@builder.io/eslint-plugin-mitosis": "^0.0.15",
-    "@builder.io/mitosis-cli": "0.1.6",
+    "@builder.io/eslint-plugin-mitosis": "^0.0.16",
+    "@builder.io/mitosis": "0.3.11",
+    "@builder.io/mitosis-cli": "0.3.11",
     "@formkit/auto-animate": "^0.8.2",
     "@parcel/packager-ts": "^2.12.0",
     "@parcel/transformer-typescript-types": "^2.12.0",

packages/react/.storybook/WithThemeDecorator.tsx

@@ -8,6 +8,7 @@ import {
   ThemeProvider,
   Select,
   SelectOption,
+  OverlaysManager,
   useTheme,
 } from "../src";
 import { DEFAULT_ACCENTS, Accent } from "../src/styles/tokens";
@@ -109,6 +110,7 @@ const WithThemeDecorator = (props) => {
       // }}
     >
       <ThemeShell {...props} />
+      <OverlaysManager />
     </ThemeProvider>
   );
 };

packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx

@@ -20,11 +20,11 @@ import {
 import Box from "@/ui/box";
 import ChainSwapInput from "@/ui/chain-swap-input";
 import ChainListItem from "@/ui/chain-list-item";
-import { closestBodyElement } from "@/helpers/platform";
 
 import * as styles from "./chain-swap-combobox.css";
 import type { ChainListItemProps } from "@/ui/chain-list-item/chain-list-item.types";
 import type { Sprinkles } from "@/styles/rainbow-sprinkles.css";
+import { overlays } from "@/ui/overlays-manager/overlays";
 import useTheme from "@/ui/hooks/use-theme";
 
 interface ItemProps {
@@ -212,7 +212,7 @@ export default function ChainSwapCombobox(props: ChainSwapComboboxProps) {
       return setMountRoot(props.rootNode);
     }
 
-    setMountRoot(closestBodyElement(containerRef.current));
+    setMountRoot(overlays.getOrCreateOverlayRoot(containerRef.current));
   }, []);
 
   return (

packages/react/scaffolds/modal/modal.tsx

@@ -14,6 +14,7 @@ import {
 import clx from "clsx";
 import React, { cloneElement, forwardRef } from "react";
 import useTheme from "../hooks/use-theme";
+import { overlays } from "@/ui/overlays-manager/overlays";
 import * as styles from "./modal.css";
 
 interface DialogOptions {
@@ -149,6 +150,10 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>((props, forwardedRef) => {
     childrenClassName,
   } = props;
 
+  const [defaultRoot, setDefaultRoot] = React.useState<HTMLElement | null>(
+    null,
+  );
+
   const dialog = useDialog({
     initialOpen,
     open: isOpen,
@@ -166,6 +171,16 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>((props, forwardedRef) => {
 
   const { styles: transitionStyles } = useTransitionStyles(dialog.context);
 
+  React.useEffect(() => {
+    // User-provided root
+    if (root) {
+      return;
+    }
+
+    // Default lib root
+    setDefaultRoot(overlays.getOrCreateOverlayRoot(window.document));
+  }, []);
+
   React.useEffect(() => {
     dialog.setLabelId(id);
     return () => dialog.setLabelId(undefined);
@@ -186,7 +201,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>((props, forwardedRef) => {
       {typeof renderTrigger === "function" ? renderTrigger(triggerProps) : null}
 
       {dialog.open && (
-        <FloatingPortal root={root}>
+        <FloatingPortal root={root ? root : defaultRoot}>
           <FloatingOverlay
             className={clx(themeClassName)}
             lockScroll={preventScroll}

packages/react/scaffolds/select/select.tsx

@@ -28,6 +28,7 @@ import {
   selectFullWidth,
 } from "./select.css";
 import { Item, SelectContext, SelectContextValue } from "./select.context";
+import { overlays } from "@/ui/overlays-manager/overlays";
 
 const DEFAULT_LIST_WIDTH = "220";
 
@@ -142,6 +143,15 @@ export default function Select(props: SelectProps) {
     [elementsRef, handleSelect],
   );
 
+  const [defaultRoot, setDefaultRoot] = React.useState<HTMLElement | null>(
+    null,
+  );
+
+  React.useEffect(() => {
+    // Default lib root
+    setDefaultRoot(overlays.getOrCreateOverlayRoot(window.document));
+  }, []);
+
   React.useEffect(() => {
     if (!!props.defaultSelectedItem) {
       handleSelect(props.defaultSelectedItem);
@@ -235,7 +245,7 @@ export default function Select(props: SelectProps) {
       </div>
 
       <SelectContext.Provider value={selectContext}>
-        <FloatingPortal>
+        <FloatingPortal root={defaultRoot}>
           <div
             ref={refs.setFloating}
             tabIndex={-1}

packages/react/stories/TokenInput.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { asset_list, assets } from "@chain-registry/osmosis";
-import { getAssetByDenom } from "@chain-registry/utils";
 import { Asset as OsmosisAsset } from "@chain-registry/types";
 
 import TokenInput from "../src/ui/token-input";
@@ -18,14 +17,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const osmosisAssets: OsmosisAsset[] = [...assets.assets, ...asset_list.assets];
-const OSMO = getAssetByDenom(osmosisAssets, "uosmo");
+const OSMO = osmosisAssets.find((asset) => asset.symbol === "OSMO")!;
 
 /* This is primary TokenInput */
 export const Primary: Story = {
   args: {
     symbol: OSMO.symbol,
     name: OSMO.name,
-    available: 0.71263,
+    available: 23345.44,
     priceDisplayAmount: 0.5,
     tokenIcon: OSMO.logo_URIs?.png,
     onAmountChange: (value) => {
@@ -34,14 +33,20 @@ export const Primary: Story = {
   },
   render: (props) => {
     const [progress, setProgress] = useState(50);
+    const [amount, setAmount] = useState(0);
 
     const onProgressChange = (value) => {
       console.log("onProgressChange", value);
       setProgress(value);
     };
+
     return (
       <TokenInput
         {...props}
+        amount={amount}
+        onAmountChange={(value) => {
+          setAmount(value);
+        }}
         progress={progress}
         onProgressChange={onProgressChange}
       />

packages/react/stories/asset/AssetDeposit.stories.tsx

@@ -33,7 +33,7 @@ export const DepositAsset: Story = {
     available: 25.89,
     amount: "",
     priceDisplayAmount: 0.5,
-    timeEstimateLabel: "20 seconds",
+    timeEstimateLabel: "30 seconds",
     onChange: (value) => {
       console.log("onChange", value);
     },
@@ -104,7 +104,7 @@ export const DepositModalView: Story = {
     available: 25.89,
     amount: "",
     priceDisplayAmount: 0.5,
-    timeEstimateLabel: "20 seconds",
+    timeEstimateLabel: "30 seconds",
     onChange: (value) => {
       console.log("onChange", value);
     },