@orderly.network/ui-transfer 3.0.4 → 3.1.0-alpha.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
-import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, Box, textVariants, Flex, toast, Text, cn, Button, Spinner, Select, Input, inputFormatter, useScreen, modal, Tooltip, Tips, AlertDialog, EditIcon, ArrowLeftRightIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, ChainIcon, Badge, CaretUpIcon, CaretDownIcon, SimpleDialog, CloseRoundFillIcon, ExclamationFillIcon, TokenIcon, WarningIcon, SelectItem, ChevronRightIcon, Checkbox, CloseIcon } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, Box, textVariants, Flex, toast, Text, cn, Button, useDocumentDirection, Spinner, Select, Input, inputFormatter, useScreen, modal, Tooltip, Tips, AlertDialog, EditIcon, ArrowLeftRightIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, ChainIcon, Badge, CaretUpIcon, CaretDownIcon, SimpleDialog, CloseRoundFillIcon, ExclamationFillIcon, TokenIcon, WarningIcon, SelectItem, ChevronRightIcon, Checkbox, CloseIcon } from '@orderly.network/ui';
 import { forwardRef, useState, isValidElement, useMemo, useEffect, useCallback, useRef } from 'react';
 import { useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useTokensInfo, useEventEmitter, usePositionStream, useIndexPricesStream, useOrderlyContext, useDeposit, useAssetsHistory, useChains, useMemoizedFn, useWithdraw, useWalletTopic, useQuery, useSWR, useTokenInfo, useHoldingStream, useInternalTransfer, useDebouncedCallback, usePrivateQuery, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
 import { Decimal, zero, praseChainIdToNumber, int2hex, toNonExponential, formatWithPrecision, isSolana } from '@orderly.network/utils';
@@ -102,7 +102,7 @@ var LtvUI = (props) => {
               ltv_threshold
             }
           ),
-          children: /* @__PURE__ */ jsx(TooltipIcon, { className: "oui-ml-[2px] oui-cursor-pointer oui-text-base-contrast-36" })
+          children: /* @__PURE__ */ jsx(TooltipIcon, { className: "oui-ms-[2px] oui-cursor-pointer oui-text-base-contrast-36" })
         }
       )
     ] }),
@@ -243,6 +243,8 @@ var AvailableQuantity = (props) => {
   const { quantity, maxQuantity, token, loading } = props;
   const { t } = useTranslation();
   const { isMobile } = useScreen();
+  const dir = useDocumentDirection();
+  const isRTL = dir === "rtl";
   const { getIndexPrice } = useIndexPricesStream();
   const name = token?.display_name || token?.symbol || "";
   const dp = token?.precision ?? token?.decimals ?? 2;
@@ -260,84 +262,100 @@ var AvailableQuantity = (props) => {
       "$",
       /* @__PURE__ */ jsx(Text.numeral, { dp: 2, padding: false, rm: Decimal.ROUND_DOWN, children: notional })
     ] }),
-    /* @__PURE__ */ jsxs(Flex, { gapX: 2, itemAlign: "center", className: "oui-ml-auto", children: [
-      /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-        props.tooltipContent ? isMobile ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "oui-p-0",
-            onClick: () => {
-              if (token?.symbol) {
-                const anyToken = token;
-                modal.alert({
-                  title: t("common.tips"),
-                  message: /* @__PURE__ */ jsx(
-                    AvailableTooltipMessage,
-                    {
-                      tokenSymbol: token.symbol,
-                      decimals: anyToken?.token_decimal ?? token.decimals ?? token.precision
-                    }
-                  )
-                });
-              } else {
-                modal.alert({
-                  title: t("common.tips"),
-                  message: props.tooltipContent
-                });
-              }
-            },
-            children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "2xs",
-                intensity: 36,
-                className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
-                children: `${t("common.available")}: `
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: props.tooltipContent,
-            className: "oui-max-w-[274px]",
-            children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "2xs",
-                intensity: 36,
-                className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
-                children: `${t("common.available")}: `
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx(
-          Text.numeral,
-          {
-            size: "2xs",
-            intensity: 36,
-            rm: Decimal.ROUND_DOWN,
-            dp,
-            padding: false,
-            "data-testid": "oui-testid-withdraw_deposit-dialog-available-value",
-            children: maxQuantity
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: ` ${name}` })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: "2xs",
-          color: "primary",
-          className: "oui-cursor-pointer oui-select-none",
-          onClick: props.onClick,
-          children: t("common.max")
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gapX: 2,
+        itemAlign: "center",
+        className: cn("oui-ms-auto", isRTL && "oui-flex-row-reverse"),
+        children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gapX: 1,
+              itemAlign: "center",
+              className: cn(isRTL && "oui-flex-row-reverse"),
+              children: [
+                props.tooltipContent ? isMobile ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "oui-p-0",
+                    onClick: () => {
+                      if (token?.symbol) {
+                        const anyToken = token;
+                        modal.alert({
+                          title: t("common.tips"),
+                          message: /* @__PURE__ */ jsx(
+                            AvailableTooltipMessage,
+                            {
+                              tokenSymbol: token.symbol,
+                              decimals: anyToken?.token_decimal ?? token.decimals ?? token.precision
+                            }
+                          )
+                        });
+                      } else {
+                        modal.alert({
+                          title: t("common.tips"),
+                          message: props.tooltipContent
+                        });
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "2xs",
+                        intensity: 36,
+                        className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                        children: `${t("common.available")}: `
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: props.tooltipContent,
+                    className: "oui-max-w-[274px]",
+                    children: /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "2xs",
+                        intensity: 36,
+                        className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                        children: `${t("common.available")}: `
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
+                loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx(
+                  Text.numeral,
+                  {
+                    size: "2xs",
+                    intensity: 36,
+                    rm: Decimal.ROUND_DOWN,
+                    dp,
+                    padding: false,
+                    "data-testid": "oui-testid-withdraw_deposit-dialog-available-value",
+                    children: maxQuantity
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: ` ${name}` })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "2xs",
+              color: "primary",
+              className: cn("oui-cursor-pointer oui-select-none"),
+              onClick: props.onClick,
+              children: t("common.max")
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 var BrokerWallet = () => {
@@ -411,6 +429,8 @@ var ChainSelect = (props) => {
   const { chains, value, wrongNetwork, loading, disabled } = props;
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
+  const dir = useDocumentDirection();
+  const isRTL = dir === "rtl";
   const selectable = wrongNetwork || chains?.length > 1;
   const chainIcon = wrongNetwork ? /* @__PURE__ */ jsx(
     Flex,
@@ -451,11 +471,19 @@ var ChainSelect = (props) => {
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("transfer.network") }) }),
-          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-            chainIcon,
-            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, children: chainName }),
-            !isCurrentChainSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
-          ] })
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: isRTL ? "rowReverse" : "row",
+              gapX: 1,
+              itemAlign: "center",
+              children: [
+                chainIcon,
+                /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, children: chainName }),
+                !isCurrentChainSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
+              ]
+            }
+          )
         ] }),
         renderRightIcon()
       ]
@@ -470,6 +498,7 @@ var ChainSelect = (props) => {
       {
         px: 2,
         r: "base",
+        direction: isRTL ? "rowReverse" : "row",
         justify: "between",
         itemAlign: "center",
         className: cn(
@@ -485,17 +514,25 @@ var ChainSelect = (props) => {
           await props.onValueChange(chain);
         },
         children: [
-          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsx(
-              ChainIcon,
-              {
-                className: cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
-                chainId: chain.chain_id
-              }
-            ),
-            /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
-            !isSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: isRTL ? "rowReverse" : "row",
+              gapX: 1,
+              itemAlign: "center",
+              children: [
+                /* @__PURE__ */ jsx(
+                  ChainIcon,
+                  {
+                    className: cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
+                    chainId: chain.chain_id
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
+                !isSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
+              ]
+            }
+          ),
           isActive && /* @__PURE__ */ jsx(
             Box,
             {
@@ -516,7 +553,7 @@ var ChainSelect = (props) => {
       DropdownMenuContent,
       {
         onCloseAutoFocus: (e) => e.preventDefault(),
-        align: "start",
+        align: isRTL ? "end" : "start",
         sideOffset: 2,
         className: cn(
           "oui-deposit-token-select-dropdown-menu-content",
@@ -573,7 +610,7 @@ var CollateralRatioUI = (props) => {
   return /* @__PURE__ */ jsxs(Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
     /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", children: [
       /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("portfolio.overview.column.collateralRatio") }),
-      /* @__PURE__ */ jsx(Tooltip, { className: "oui-p-2", content: /* @__PURE__ */ jsx(TooltipContent2, {}), children: /* @__PURE__ */ jsx(TooltipIcon, { className: "oui-ml-[2px] oui-cursor-pointer oui-text-base-contrast-36" }) })
+      /* @__PURE__ */ jsx(Tooltip, { className: "oui-p-2", content: /* @__PURE__ */ jsx(TooltipContent2, {}), children: /* @__PURE__ */ jsx(TooltipIcon, { className: "oui-ms-[2px] oui-cursor-pointer oui-text-base-contrast-36" }) })
     ] }),
     /* @__PURE__ */ jsx(
       Text.numeral,
@@ -715,7 +752,7 @@ var NetworkTokenSelect = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
       /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 36, children: t("common.network") }),
-      /* @__PURE__ */ jsx(Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Box, { className: "oui-ms-auto", children: /* @__PURE__ */ jsx(
         Select,
         {
           size: "xs",
@@ -723,7 +760,7 @@ var NetworkTokenSelect = ({
           onValueChange: onNetworkChange,
           placeholder: t("transfer.exclusiveDeposit.selectNetwork"),
           variant: "text",
-          classNames: { trigger: "oui-pr-0" },
+          classNames: { trigger: "oui-pe-0" },
           maxHeight: 128,
           contentProps: selectContentProps,
           children: networkOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
@@ -735,7 +772,7 @@ var NetworkTokenSelect = ({
     ] }),
     /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
       /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 36, children: t("common.token") }),
-      /* @__PURE__ */ jsx(Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Box, { className: "oui-ms-auto", children: /* @__PURE__ */ jsx(
         Select,
         {
           size: "xs",
@@ -743,7 +780,7 @@ var NetworkTokenSelect = ({
           onValueChange: onTokenChange,
           placeholder: t("transfer.exclusiveDeposit.selectToken"),
           variant: "text",
-          classNames: { trigger: "oui-pr-0" },
+          classNames: { trigger: "oui-pe-0" },
           maxHeight: 128,
           contentProps: selectContentProps,
           children: tokenOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
@@ -1184,12 +1221,15 @@ var TokenOption = (props) => {
   } = props;
   const { symbol, precision, insufficientBalance } = token;
   const { apy } = useYieldAPY(symbol);
+  const dir = useDocumentDirection();
+  const isRTL = dir === "rtl";
   const showAPY = isYieldBearingAsset(symbol) && apy !== null;
   const { t } = useTranslation();
   if (displayType === "vaultBalance" && insufficientBalance) {
     return /* @__PURE__ */ jsx(
       Flex,
       {
+        direction: isRTL ? "rowReverse" : "row",
         itemAlign: "center",
         justify: "between",
         px: 2,
@@ -1202,18 +1242,26 @@ var TokenOption = (props) => {
           props.index !== 0 && "oui-mt-[2px]",
           "oui-cursor-not-allowed"
         ),
-        children: /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
-          /* @__PURE__ */ jsx(
-            TokenIcon,
-            {
-              url: token.logo_uri,
-              name: symbol,
-              className: "oui-size-[16px] oui-opacity-50"
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { intensity: 36, className: "oui-max-w-[200px] oui-truncate", children: token.label }),
-          /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: t("transfer.withdraw.InsufficientVaultBalance") })
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: isRTL ? "rowReverse" : "row",
+            itemAlign: "center",
+            gapX: 1,
+            children: [
+              /* @__PURE__ */ jsx(
+                TokenIcon,
+                {
+                  url: token.logo_uri,
+                  name: symbol,
+                  className: "oui-size-[16px] oui-opacity-50"
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { intensity: 36, className: "oui-max-w-[200px] oui-truncate", children: token.label }),
+              /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: t("transfer.withdraw.InsufficientVaultBalance") })
+            ]
+          }
+        )
       },
       symbol
     );
@@ -1243,6 +1291,7 @@ var TokenOption = (props) => {
   return /* @__PURE__ */ jsxs(
     Flex,
     {
+      direction: isRTL ? "rowReverse" : "row",
       justify: "between",
       px: 2,
       r: "base",
@@ -1258,40 +1307,48 @@ var TokenOption = (props) => {
         onTokenChange?.(token);
       },
       children: [
-        /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-          /* @__PURE__ */ jsx(
-            TokenIcon,
-            {
-              name: symbol,
-              url: token.logo_uri,
-              className: "oui-size-[16px]"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: cn(
-                "oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
-                isActive && "oui-text-base-contrast-80",
-                "oui-max-w-[200px] oui-truncate"
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: isRTL ? "rowReverse" : "row",
+            gapX: 1,
+            itemAlign: "center",
+            children: [
+              /* @__PURE__ */ jsx(
+                TokenIcon,
+                {
+                  name: symbol,
+                  url: token.logo_uri,
+                  className: "oui-size-[16px]"
+                }
               ),
-              children: token.label
-            }
-          ),
-          showAPY && /* @__PURE__ */ jsx(
-            Box,
-            {
-              height: 18,
-              px: 2,
-              r: "sm",
-              className: "oui-rounded-[4px] oui-bg-success/[0.15]",
-              children: /* @__PURE__ */ jsxs(Text, { size: "2xs", className: "oui-text-success", children: [
-                apy.toFixed(1),
-                "% APY"
-              ] })
-            }
-          )
-        ] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: cn(
+                    "oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
+                    isActive && "oui-text-base-contrast-80",
+                    "oui-max-w-[200px] oui-truncate"
+                  ),
+                  children: token.label
+                }
+              ),
+              showAPY && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  height: 18,
+                  px: 2,
+                  r: "sm",
+                  className: "oui-rounded-[4px] oui-bg-success/[0.15]",
+                  children: /* @__PURE__ */ jsxs(Text, { size: "2xs", className: "oui-text-success", children: [
+                    apy.toFixed(1),
+                    "% APY"
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
         renderValue()
       ]
     },
@@ -1322,6 +1379,7 @@ var QuantityInput = (props) => {
     ...rest
   } = props;
   const { t } = useTranslation();
+  const dir = useDocumentDirection();
   const inputRef = useRef(null);
   const [open, setOpen] = useState(false);
   const [width, setWidth] = useState(0);
@@ -1372,7 +1430,7 @@ var QuantityInput = (props) => {
     /* @__PURE__ */ jsx(Box, { className: "oui-absolute oui-top-0", children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: label || t("common.quantity") }) }),
     loading && /* @__PURE__ */ jsx(Box, { className: "oui-absolute oui-bottom-1", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) })
   ] });
-  const suffix = /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-right-0", children: /* @__PURE__ */ jsx(
+  const suffix = /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-end-0", children: /* @__PURE__ */ jsx(
     Select.tokens,
     {
       open: selectOpen,
@@ -1397,7 +1455,7 @@ var QuantityInput = (props) => {
           inputRef.current?.focus();
         },
         style: { width },
-        align: "end",
+        align: dir === "rtl" ? "start" : "end",
         sideOffset: 5,
         className: "oui-border oui-border-line-6"
       }
@@ -1567,7 +1625,7 @@ var Slippage = (props) => {
               "oui-h-[40px] oui-w-[74px]"
             ),
             input: "oui-text-base-contrast",
-            additional: "oui-pl-1",
+            additional: "oui-ps-1",
             suffix: "oui-text-base-contrast-36"
           }
         }
@@ -2187,7 +2245,7 @@ function useChainSelect() {
         }
       });
     },
-    [currentChain, setChain, findByChainId]
+    [connectedChain, currentChain, findByChainId, setChain, t]
   );
   return {
     chains,
@@ -4126,7 +4184,7 @@ var useSwapDeposit = (options2) => {
       toast.error(err.message || t("common.somethingWentWrong"));
       throw err;
     }
-  }, [account2, brokerId, swapData, sourceToken, targetToken, depositFee]);
+  }, [account2, brokerId, depositFee, sourceToken, swapData, t, targetToken]);
   return {
     swapPrice,
     swapQuantity,
@@ -4415,7 +4473,7 @@ var TextAreaInput = (props) => {
       textarea.style.height = `${textarea.scrollHeight}px`;
     }
   }, [value, selectedAccount?.address]);
-  const prefix = /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-left-3 oui-top-0.5 oui-z-[1]", children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: label }) });
+  const prefix = /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-start-3 oui-top-0.5 oui-z-[1]", children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: label }) });
   const message = /* @__PURE__ */ jsxs(Flex, { mb: 1, gapX: 1, px: 1, children: [
     /* @__PURE__ */ jsx(
       Box,
@@ -4498,7 +4556,7 @@ var TextAreaInput = (props) => {
               ]
             }
           ) }),
-          enableAccountLookup && /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "oui-absolute oui-left-0 oui-bottom-0 oui-w-0 oui-h-0" }) })
+          enableAccountLookup && /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "oui-absolute oui-start-0 oui-bottom-0 oui-w-0 oui-h-0" }) })
         ]
       }
     )
@@ -4997,7 +5055,8 @@ var useVaultBalance = (inputs) => {
     crossChainWithdraw,
     chainName,
     sourceToken,
-    chainVaultBalance
+    chainVaultBalance,
+    t
   ]);
   const vaultBalanceListFilterCCTP = useMemo(() => {
     if (cctpSupportedChains.includes(currentChain?.id)) {
@@ -5220,7 +5279,7 @@ var useWithdrawLTV = (params) => {
       }
     }
     return "";
-  }, [nextLTV, ltv_threshold]);
+  }, [ltv_threshold, nextLTV, t]);
   return {
     currentLTV,
     nextLTV,
@@ -5947,9 +6006,9 @@ var AddWalletDialog = ({
               onValueChange: onAddressChange,
               autoFocus: true,
               color: showBorderDanger ? "danger" : void 0,
-              className: cn("oui-bg-base-6 oui-bg-transparent"),
+              className: "oui-bg-base-6",
               classNames: { input: "oui-text-base-contrast" },
-              suffix: address && /* @__PURE__ */ jsx(Box, { className: "oui-ml-2.5 oui-mr-2 oui-cursor-pointer", children: /* @__PURE__ */ jsx(
+              suffix: address && /* @__PURE__ */ jsx(Box, { className: "oui-ms-2.5 oui-me-2 oui-cursor-pointer", children: /* @__PURE__ */ jsx(
                 CloseRoundFillIcon,
                 {
                   size: 16,
@@ -6030,6 +6089,8 @@ var WalletSelector = ({
 }) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
+  const dir = useDocumentDirection();
+  const isRTL = dir === "rtl";
   const currentNetwork = useMemo(() => {
     if (!connectedWallet?.namespace) return void 0;
     const ns = connectedWallet.namespace.toLowerCase();
@@ -6077,7 +6138,7 @@ var WalletSelector = ({
   const dropdownContent = /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
     DropdownMenuContent,
     {
-      align: "end",
+      align: isRTL ? "start" : "end",
       className: "oui-max-h-[240px] oui-overflow-y-auto oui-custom-scrollbar",
       children: [
         showConnectedItem && connectedWallet && /* @__PURE__ */ jsx(
@@ -6131,6 +6192,7 @@ var WalletSelector = ({
             children: /* @__PURE__ */ jsxs(
               Flex,
               {
+                direction: isRTL ? "rowReverse" : "row",
                 itemAlign: "center",
                 gapX: 1,
                 className: "oui-text-primary oui-font-semibold oui-tracking-[0.03em]",
@@ -6148,20 +6210,29 @@ var WalletSelector = ({
   return /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full oui-mb-3", children: [
     /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("common.wallet") }),
     /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast-80", children: [
-        selectedWalletOpt?.name && /* @__PURE__ */ jsx(WalletIcon, { name: selectedWalletOpt.name, size: "3xs" }),
-        /* @__PURE__ */ jsx(Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "2xs",
-            intensity: 54,
-            className: "oui-text-base-contrast-36",
-            children: ` (${getChainLabel(selectedWalletOpt?.network)})`
-          }
-        ),
-        isOpen ? /* @__PURE__ */ jsx(CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 12, className: "oui-text-inherit" })
-      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "oui-flex oui-items-center oui-gap-1 oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
+            isRTL && "oui-flex-row-reverse"
+          ),
+          children: [
+            selectedWalletOpt?.name && /* @__PURE__ */ jsx(WalletIcon, { name: selectedWalletOpt.name, size: "3xs" }),
+            /* @__PURE__ */ jsx(Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "2xs",
+                intensity: 54,
+                className: "oui-text-base-contrast-36",
+                children: ` (${getChainLabel(selectedWalletOpt?.network)})`
+              }
+            ),
+            isOpen ? /* @__PURE__ */ jsx(CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 12, className: "oui-text-inherit" })
+          ]
+        }
+      ) }),
       dropdownContent
     ] })
   ] });
@@ -7023,7 +7094,7 @@ function useInputStatus(options2) {
         setHintMessage("");
       }
     }
-  }, [quantity, maxQuantity]);
+  }, [maxQuantity, quantity, t, unsettledPnL]);
   return { inputStatus, hintMessage };
 }
 var TransferDialogId = "TransferDialogId";