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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +244 -173
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +245 -174
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +14 -14
package/dist/index.js CHANGED
@@ -104,7 +104,7 @@ var LtvUI = (props) => {
104
104
  ltv_threshold
105
105
  }
106
106
  ),
107
- children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIcon, { className: "oui-ml-[2px] oui-cursor-pointer oui-text-base-contrast-36" })
107
+ children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIcon, { className: "oui-ms-[2px] oui-cursor-pointer oui-text-base-contrast-36" })
108
108
  }
109
109
  )
110
110
  ] }),
@@ -245,6 +245,8 @@ var AvailableQuantity = (props) => {
245
245
  const { quantity, maxQuantity, token, loading } = props;
246
246
  const { t } = i18n.useTranslation();
247
247
  const { isMobile } = ui.useScreen();
248
+ const dir = ui.useDocumentDirection();
249
+ const isRTL = dir === "rtl";
248
250
  const { getIndexPrice } = hooks.useIndexPricesStream();
249
251
  const name = token?.display_name || token?.symbol || "";
250
252
  const dp = token?.precision ?? token?.decimals ?? 2;
@@ -262,84 +264,100 @@ var AvailableQuantity = (props) => {
262
264
  "$",
263
265
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 2, padding: false, rm: utils.Decimal.ROUND_DOWN, children: notional })
264
266
  ] }),
265
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 2, itemAlign: "center", className: "oui-ml-auto", children: [
266
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
267
- props.tooltipContent ? isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
268
- "button",
269
- {
270
- type: "button",
271
- className: "oui-p-0",
272
- onClick: () => {
273
- if (token?.symbol) {
274
- const anyToken = token;
275
- ui.modal.alert({
276
- title: t("common.tips"),
277
- message: /* @__PURE__ */ jsxRuntime.jsx(
278
- AvailableTooltipMessage,
279
- {
280
- tokenSymbol: token.symbol,
281
- decimals: anyToken?.token_decimal ?? token.decimals ?? token.precision
282
- }
283
- )
284
- });
285
- } else {
286
- ui.modal.alert({
287
- title: t("common.tips"),
288
- message: props.tooltipContent
289
- });
290
- }
291
- },
292
- children: /* @__PURE__ */ jsxRuntime.jsx(
293
- ui.Text,
294
- {
295
- size: "2xs",
296
- intensity: 36,
297
- className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
298
- children: `${t("common.available")}: `
299
- }
300
- )
301
- }
302
- ) : /* @__PURE__ */ jsxRuntime.jsx(
303
- ui.Tooltip,
304
- {
305
- content: props.tooltipContent,
306
- className: "oui-max-w-[274px]",
307
- children: /* @__PURE__ */ jsxRuntime.jsx(
308
- ui.Text,
309
- {
310
- size: "2xs",
311
- intensity: 36,
312
- className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
313
- children: `${t("common.available")}: `
314
- }
315
- )
316
- }
317
- ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
318
- loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
319
- ui.Text.numeral,
320
- {
321
- size: "2xs",
322
- intensity: 36,
323
- rm: utils.Decimal.ROUND_DOWN,
324
- dp,
325
- padding: false,
326
- "data-testid": "oui-testid-withdraw_deposit-dialog-available-value",
327
- children: maxQuantity
328
- }
329
- ),
330
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: ` ${name}` })
331
- ] }),
332
- /* @__PURE__ */ jsxRuntime.jsx(
333
- ui.Text,
334
- {
335
- size: "2xs",
336
- color: "primary",
337
- className: "oui-cursor-pointer oui-select-none",
338
- onClick: props.onClick,
339
- children: t("common.max")
340
- }
341
- )
342
- ] })
267
+ /* @__PURE__ */ jsxRuntime.jsxs(
268
+ ui.Flex,
269
+ {
270
+ gapX: 2,
271
+ itemAlign: "center",
272
+ className: ui.cn("oui-ms-auto", isRTL && "oui-flex-row-reverse"),
273
+ children: [
274
+ /* @__PURE__ */ jsxRuntime.jsxs(
275
+ ui.Flex,
276
+ {
277
+ gapX: 1,
278
+ itemAlign: "center",
279
+ className: ui.cn(isRTL && "oui-flex-row-reverse"),
280
+ children: [
281
+ props.tooltipContent ? isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
282
+ "button",
283
+ {
284
+ type: "button",
285
+ className: "oui-p-0",
286
+ onClick: () => {
287
+ if (token?.symbol) {
288
+ const anyToken = token;
289
+ ui.modal.alert({
290
+ title: t("common.tips"),
291
+ message: /* @__PURE__ */ jsxRuntime.jsx(
292
+ AvailableTooltipMessage,
293
+ {
294
+ tokenSymbol: token.symbol,
295
+ decimals: anyToken?.token_decimal ?? token.decimals ?? token.precision
296
+ }
297
+ )
298
+ });
299
+ } else {
300
+ ui.modal.alert({
301
+ title: t("common.tips"),
302
+ message: props.tooltipContent
303
+ });
304
+ }
305
+ },
306
+ children: /* @__PURE__ */ jsxRuntime.jsx(
307
+ ui.Text,
308
+ {
309
+ size: "2xs",
310
+ intensity: 36,
311
+ className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
312
+ children: `${t("common.available")}: `
313
+ }
314
+ )
315
+ }
316
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
317
+ ui.Tooltip,
318
+ {
319
+ content: props.tooltipContent,
320
+ className: "oui-max-w-[274px]",
321
+ children: /* @__PURE__ */ jsxRuntime.jsx(
322
+ ui.Text,
323
+ {
324
+ size: "2xs",
325
+ intensity: 36,
326
+ className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
327
+ children: `${t("common.available")}: `
328
+ }
329
+ )
330
+ }
331
+ ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
332
+ loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
333
+ ui.Text.numeral,
334
+ {
335
+ size: "2xs",
336
+ intensity: 36,
337
+ rm: utils.Decimal.ROUND_DOWN,
338
+ dp,
339
+ padding: false,
340
+ "data-testid": "oui-testid-withdraw_deposit-dialog-available-value",
341
+ children: maxQuantity
342
+ }
343
+ ),
344
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: ` ${name}` })
345
+ ]
346
+ }
347
+ ),
348
+ /* @__PURE__ */ jsxRuntime.jsx(
349
+ ui.Text,
350
+ {
351
+ size: "2xs",
352
+ color: "primary",
353
+ className: ui.cn("oui-cursor-pointer oui-select-none"),
354
+ onClick: props.onClick,
355
+ children: t("common.max")
356
+ }
357
+ )
358
+ ]
359
+ }
360
+ )
343
361
  ] });
344
362
  };
345
363
  var BrokerWallet = () => {
@@ -413,6 +431,8 @@ var ChainSelect = (props) => {
413
431
  const { chains, value, wrongNetwork, loading, disabled } = props;
414
432
  const [open, setOpen] = react.useState(false);
415
433
  const { t } = i18n.useTranslation();
434
+ const dir = ui.useDocumentDirection();
435
+ const isRTL = dir === "rtl";
416
436
  const selectable = wrongNetwork || chains?.length > 1;
417
437
  const chainIcon = wrongNetwork ? /* @__PURE__ */ jsxRuntime.jsx(
418
438
  ui.Flex,
@@ -453,11 +473,19 @@ var ChainSelect = (props) => {
453
473
  children: [
454
474
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
455
475
  /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: t("transfer.network") }) }),
456
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
457
- chainIcon,
458
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 80, children: chainName }),
459
- !isCurrentChainSupported && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
460
- ] })
476
+ /* @__PURE__ */ jsxRuntime.jsxs(
477
+ ui.Flex,
478
+ {
479
+ direction: isRTL ? "rowReverse" : "row",
480
+ gapX: 1,
481
+ itemAlign: "center",
482
+ children: [
483
+ chainIcon,
484
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 80, children: chainName }),
485
+ !isCurrentChainSupported && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
486
+ ]
487
+ }
488
+ )
461
489
  ] }),
462
490
  renderRightIcon()
463
491
  ]
@@ -472,6 +500,7 @@ var ChainSelect = (props) => {
472
500
  {
473
501
  px: 2,
474
502
  r: "base",
503
+ direction: isRTL ? "rowReverse" : "row",
475
504
  justify: "between",
476
505
  itemAlign: "center",
477
506
  className: ui.cn(
@@ -487,17 +516,25 @@ var ChainSelect = (props) => {
487
516
  await props.onValueChange(chain);
488
517
  },
489
518
  children: [
490
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
491
- /* @__PURE__ */ jsxRuntime.jsx(
492
- ui.ChainIcon,
493
- {
494
- className: ui.cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
495
- chainId: chain.chain_id
496
- }
497
- ),
498
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
499
- !isSupported && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
500
- ] }),
519
+ /* @__PURE__ */ jsxRuntime.jsxs(
520
+ ui.Flex,
521
+ {
522
+ direction: isRTL ? "rowReverse" : "row",
523
+ gapX: 1,
524
+ itemAlign: "center",
525
+ children: [
526
+ /* @__PURE__ */ jsxRuntime.jsx(
527
+ ui.ChainIcon,
528
+ {
529
+ className: ui.cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
530
+ chainId: chain.chain_id
531
+ }
532
+ ),
533
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
534
+ !isSupported && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
535
+ ]
536
+ }
537
+ ),
501
538
  isActive && /* @__PURE__ */ jsxRuntime.jsx(
502
539
  ui.Box,
503
540
  {
@@ -518,7 +555,7 @@ var ChainSelect = (props) => {
518
555
  ui.DropdownMenuContent,
519
556
  {
520
557
  onCloseAutoFocus: (e) => e.preventDefault(),
521
- align: "start",
558
+ align: isRTL ? "end" : "start",
522
559
  sideOffset: 2,
523
560
  className: ui.cn(
524
561
  "oui-deposit-token-select-dropdown-menu-content",
@@ -575,7 +612,7 @@ var CollateralRatioUI = (props) => {
575
612
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
576
613
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", children: [
577
614
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("portfolio.overview.column.collateralRatio") }),
578
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { className: "oui-p-2", content: /* @__PURE__ */ jsxRuntime.jsx(TooltipContent2, {}), children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIcon, { className: "oui-ml-[2px] oui-cursor-pointer oui-text-base-contrast-36" }) })
615
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { className: "oui-p-2", content: /* @__PURE__ */ jsxRuntime.jsx(TooltipContent2, {}), children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIcon, { className: "oui-ms-[2px] oui-cursor-pointer oui-text-base-contrast-36" }) })
579
616
  ] }),
580
617
  /* @__PURE__ */ jsxRuntime.jsx(
581
618
  ui.Text.numeral,
@@ -717,7 +754,7 @@ var NetworkTokenSelect = ({
717
754
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
718
755
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
719
756
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("common.network") }),
720
- /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
757
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ms-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
721
758
  ui.Select,
722
759
  {
723
760
  size: "xs",
@@ -725,7 +762,7 @@ var NetworkTokenSelect = ({
725
762
  onValueChange: onNetworkChange,
726
763
  placeholder: t("transfer.exclusiveDeposit.selectNetwork"),
727
764
  variant: "text",
728
- classNames: { trigger: "oui-pr-0" },
765
+ classNames: { trigger: "oui-pe-0" },
729
766
  maxHeight: 128,
730
767
  contentProps: selectContentProps,
731
768
  children: networkOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
@@ -737,7 +774,7 @@ var NetworkTokenSelect = ({
737
774
  ] }),
738
775
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
739
776
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("common.token") }),
740
- /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
777
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ms-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
741
778
  ui.Select,
742
779
  {
743
780
  size: "xs",
@@ -745,7 +782,7 @@ var NetworkTokenSelect = ({
745
782
  onValueChange: onTokenChange,
746
783
  placeholder: t("transfer.exclusiveDeposit.selectToken"),
747
784
  variant: "text",
748
- classNames: { trigger: "oui-pr-0" },
785
+ classNames: { trigger: "oui-pe-0" },
749
786
  maxHeight: 128,
750
787
  contentProps: selectContentProps,
751
788
  children: tokenOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
@@ -1186,12 +1223,15 @@ var TokenOption = (props) => {
1186
1223
  } = props;
1187
1224
  const { symbol, precision, insufficientBalance } = token;
1188
1225
  const { apy } = useYieldAPY(symbol);
1226
+ const dir = ui.useDocumentDirection();
1227
+ const isRTL = dir === "rtl";
1189
1228
  const showAPY = isYieldBearingAsset(symbol) && apy !== null;
1190
1229
  const { t } = i18n.useTranslation();
1191
1230
  if (displayType === "vaultBalance" && insufficientBalance) {
1192
1231
  return /* @__PURE__ */ jsxRuntime.jsx(
1193
1232
  ui.Flex,
1194
1233
  {
1234
+ direction: isRTL ? "rowReverse" : "row",
1195
1235
  itemAlign: "center",
1196
1236
  justify: "between",
1197
1237
  px: 2,
@@ -1204,18 +1244,26 @@ var TokenOption = (props) => {
1204
1244
  props.index !== 0 && "oui-mt-[2px]",
1205
1245
  "oui-cursor-not-allowed"
1206
1246
  ),
1207
- children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
1208
- /* @__PURE__ */ jsxRuntime.jsx(
1209
- ui.TokenIcon,
1210
- {
1211
- url: token.logo_uri,
1212
- name: symbol,
1213
- className: "oui-size-[16px] oui-opacity-50"
1214
- }
1215
- ),
1216
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, className: "oui-max-w-[200px] oui-truncate", children: token.label }),
1217
- /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: t("transfer.withdraw.InsufficientVaultBalance") })
1218
- ] })
1247
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1248
+ ui.Flex,
1249
+ {
1250
+ direction: isRTL ? "rowReverse" : "row",
1251
+ itemAlign: "center",
1252
+ gapX: 1,
1253
+ children: [
1254
+ /* @__PURE__ */ jsxRuntime.jsx(
1255
+ ui.TokenIcon,
1256
+ {
1257
+ url: token.logo_uri,
1258
+ name: symbol,
1259
+ className: "oui-size-[16px] oui-opacity-50"
1260
+ }
1261
+ ),
1262
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, className: "oui-max-w-[200px] oui-truncate", children: token.label }),
1263
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: t("transfer.withdraw.InsufficientVaultBalance") })
1264
+ ]
1265
+ }
1266
+ )
1219
1267
  },
1220
1268
  symbol
1221
1269
  );
@@ -1245,6 +1293,7 @@ var TokenOption = (props) => {
1245
1293
  return /* @__PURE__ */ jsxRuntime.jsxs(
1246
1294
  ui.Flex,
1247
1295
  {
1296
+ direction: isRTL ? "rowReverse" : "row",
1248
1297
  justify: "between",
1249
1298
  px: 2,
1250
1299
  r: "base",
@@ -1260,40 +1309,48 @@ var TokenOption = (props) => {
1260
1309
  onTokenChange?.(token);
1261
1310
  },
1262
1311
  children: [
1263
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
1264
- /* @__PURE__ */ jsxRuntime.jsx(
1265
- ui.TokenIcon,
1266
- {
1267
- name: symbol,
1268
- url: token.logo_uri,
1269
- className: "oui-size-[16px]"
1270
- }
1271
- ),
1272
- /* @__PURE__ */ jsxRuntime.jsx(
1273
- ui.Text,
1274
- {
1275
- className: ui.cn(
1276
- "oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
1277
- isActive && "oui-text-base-contrast-80",
1278
- "oui-max-w-[200px] oui-truncate"
1312
+ /* @__PURE__ */ jsxRuntime.jsxs(
1313
+ ui.Flex,
1314
+ {
1315
+ direction: isRTL ? "rowReverse" : "row",
1316
+ gapX: 1,
1317
+ itemAlign: "center",
1318
+ children: [
1319
+ /* @__PURE__ */ jsxRuntime.jsx(
1320
+ ui.TokenIcon,
1321
+ {
1322
+ name: symbol,
1323
+ url: token.logo_uri,
1324
+ className: "oui-size-[16px]"
1325
+ }
1279
1326
  ),
1280
- children: token.label
1281
- }
1282
- ),
1283
- showAPY && /* @__PURE__ */ jsxRuntime.jsx(
1284
- ui.Box,
1285
- {
1286
- height: 18,
1287
- px: 2,
1288
- r: "sm",
1289
- className: "oui-rounded-[4px] oui-bg-success/[0.15]",
1290
- children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", className: "oui-text-success", children: [
1291
- apy.toFixed(1),
1292
- "% APY"
1293
- ] })
1294
- }
1295
- )
1296
- ] }),
1327
+ /* @__PURE__ */ jsxRuntime.jsx(
1328
+ ui.Text,
1329
+ {
1330
+ className: ui.cn(
1331
+ "oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
1332
+ isActive && "oui-text-base-contrast-80",
1333
+ "oui-max-w-[200px] oui-truncate"
1334
+ ),
1335
+ children: token.label
1336
+ }
1337
+ ),
1338
+ showAPY && /* @__PURE__ */ jsxRuntime.jsx(
1339
+ ui.Box,
1340
+ {
1341
+ height: 18,
1342
+ px: 2,
1343
+ r: "sm",
1344
+ className: "oui-rounded-[4px] oui-bg-success/[0.15]",
1345
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", className: "oui-text-success", children: [
1346
+ apy.toFixed(1),
1347
+ "% APY"
1348
+ ] })
1349
+ }
1350
+ )
1351
+ ]
1352
+ }
1353
+ ),
1297
1354
  renderValue()
1298
1355
  ]
1299
1356
  },
@@ -1324,6 +1381,7 @@ var QuantityInput = (props) => {
1324
1381
  ...rest
1325
1382
  } = props;
1326
1383
  const { t } = i18n.useTranslation();
1384
+ const dir = ui.useDocumentDirection();
1327
1385
  const inputRef = react.useRef(null);
1328
1386
  const [open, setOpen] = react.useState(false);
1329
1387
  const [width, setWidth] = react.useState(0);
@@ -1374,7 +1432,7 @@ var QuantityInput = (props) => {
1374
1432
  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-absolute oui-top-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: label || t("common.quantity") }) }),
1375
1433
  loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-absolute oui-bottom-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" }) })
1376
1434
  ] });
1377
- const suffix = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-right-0", children: /* @__PURE__ */ jsxRuntime.jsx(
1435
+ const suffix = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-end-0", children: /* @__PURE__ */ jsxRuntime.jsx(
1378
1436
  ui.Select.tokens,
1379
1437
  {
1380
1438
  open: selectOpen,
@@ -1399,7 +1457,7 @@ var QuantityInput = (props) => {
1399
1457
  inputRef.current?.focus();
1400
1458
  },
1401
1459
  style: { width },
1402
- align: "end",
1460
+ align: dir === "rtl" ? "start" : "end",
1403
1461
  sideOffset: 5,
1404
1462
  className: "oui-border oui-border-line-6"
1405
1463
  }
@@ -1569,7 +1627,7 @@ var Slippage = (props) => {
1569
1627
  "oui-h-[40px] oui-w-[74px]"
1570
1628
  ),
1571
1629
  input: "oui-text-base-contrast",
1572
- additional: "oui-pl-1",
1630
+ additional: "oui-ps-1",
1573
1631
  suffix: "oui-text-base-contrast-36"
1574
1632
  }
1575
1633
  }
@@ -2189,7 +2247,7 @@ function useChainSelect() {
2189
2247
  }
2190
2248
  });
2191
2249
  },
2192
- [currentChain, setChain, findByChainId]
2250
+ [connectedChain, currentChain, findByChainId, setChain, t]
2193
2251
  );
2194
2252
  return {
2195
2253
  chains,
@@ -4128,7 +4186,7 @@ var useSwapDeposit = (options2) => {
4128
4186
  ui.toast.error(err.message || t("common.somethingWentWrong"));
4129
4187
  throw err;
4130
4188
  }
4131
- }, [account2, brokerId, swapData, sourceToken, targetToken, depositFee]);
4189
+ }, [account2, brokerId, depositFee, sourceToken, swapData, t, targetToken]);
4132
4190
  return {
4133
4191
  swapPrice,
4134
4192
  swapQuantity,
@@ -4417,7 +4475,7 @@ var TextAreaInput = (props) => {
4417
4475
  textarea.style.height = `${textarea.scrollHeight}px`;
4418
4476
  }
4419
4477
  }, [value, selectedAccount?.address]);
4420
- const prefix = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-left-3 oui-top-0.5 oui-z-[1]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: label }) });
4478
+ const prefix = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-start-3 oui-top-0.5 oui-z-[1]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: label }) });
4421
4479
  const message = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mb: 1, gapX: 1, px: 1, children: [
4422
4480
  /* @__PURE__ */ jsxRuntime.jsx(
4423
4481
  ui.Box,
@@ -4500,7 +4558,7 @@ var TextAreaInput = (props) => {
4500
4558
  ]
4501
4559
  }
4502
4560
  ) }),
4503
- enableAccountLookup && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-absolute oui-left-0 oui-bottom-0 oui-w-0 oui-h-0" }) })
4561
+ enableAccountLookup && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-absolute oui-start-0 oui-bottom-0 oui-w-0 oui-h-0" }) })
4504
4562
  ]
4505
4563
  }
4506
4564
  )
@@ -4999,7 +5057,8 @@ var useVaultBalance = (inputs) => {
4999
5057
  crossChainWithdraw,
5000
5058
  chainName,
5001
5059
  sourceToken,
5002
- chainVaultBalance
5060
+ chainVaultBalance,
5061
+ t
5003
5062
  ]);
5004
5063
  const vaultBalanceListFilterCCTP = react.useMemo(() => {
5005
5064
  if (cctpSupportedChains.includes(currentChain?.id)) {
@@ -5222,7 +5281,7 @@ var useWithdrawLTV = (params) => {
5222
5281
  }
5223
5282
  }
5224
5283
  return "";
5225
- }, [nextLTV, ltv_threshold]);
5284
+ }, [ltv_threshold, nextLTV, t]);
5226
5285
  return {
5227
5286
  currentLTV,
5228
5287
  nextLTV,
@@ -5949,9 +6008,9 @@ var AddWalletDialog = ({
5949
6008
  onValueChange: onAddressChange,
5950
6009
  autoFocus: true,
5951
6010
  color: showBorderDanger ? "danger" : void 0,
5952
- className: ui.cn("oui-bg-base-6 oui-bg-transparent"),
6011
+ className: "oui-bg-base-6",
5953
6012
  classNames: { input: "oui-text-base-contrast" },
5954
- suffix: address && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ml-2.5 oui-mr-2 oui-cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
6013
+ suffix: address && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ms-2.5 oui-me-2 oui-cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
5955
6014
  ui.CloseRoundFillIcon,
5956
6015
  {
5957
6016
  size: 16,
@@ -6032,6 +6091,8 @@ var WalletSelector = ({
6032
6091
  }) => {
6033
6092
  const { t } = i18n.useTranslation();
6034
6093
  const [isOpen, setIsOpen] = react.useState(false);
6094
+ const dir = ui.useDocumentDirection();
6095
+ const isRTL = dir === "rtl";
6035
6096
  const currentNetwork = react.useMemo(() => {
6036
6097
  if (!connectedWallet?.namespace) return void 0;
6037
6098
  const ns = connectedWallet.namespace.toLowerCase();
@@ -6079,7 +6140,7 @@ var WalletSelector = ({
6079
6140
  const dropdownContent = /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
6080
6141
  ui.DropdownMenuContent,
6081
6142
  {
6082
- align: "end",
6143
+ align: isRTL ? "start" : "end",
6083
6144
  className: "oui-max-h-[240px] oui-overflow-y-auto oui-custom-scrollbar",
6084
6145
  children: [
6085
6146
  showConnectedItem && connectedWallet && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6133,6 +6194,7 @@ var WalletSelector = ({
6133
6194
  children: /* @__PURE__ */ jsxRuntime.jsxs(
6134
6195
  ui.Flex,
6135
6196
  {
6197
+ direction: isRTL ? "rowReverse" : "row",
6136
6198
  itemAlign: "center",
6137
6199
  gapX: 1,
6138
6200
  className: "oui-text-primary oui-font-semibold oui-tracking-[0.03em]",
@@ -6150,20 +6212,29 @@ var WalletSelector = ({
6150
6212
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full oui-mb-3", children: [
6151
6213
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("common.wallet") }),
6152
6214
  /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open: isOpen, onOpenChange: setIsOpen, children: [
6153
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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: [
6154
- selectedWalletOpt?.name && /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { name: selectedWalletOpt.name, size: "3xs" }),
6155
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
6156
- /* @__PURE__ */ jsxRuntime.jsx(
6157
- ui.Text,
6158
- {
6159
- size: "2xs",
6160
- intensity: 54,
6161
- className: "oui-text-base-contrast-36",
6162
- children: ` (${getChainLabel(selectedWalletOpt?.network)})`
6163
- }
6164
- ),
6165
- isOpen ? /* @__PURE__ */ jsxRuntime.jsx(ui.CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, className: "oui-text-inherit" })
6166
- ] }) }),
6215
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
6216
+ "div",
6217
+ {
6218
+ className: ui.cn(
6219
+ "oui-flex oui-items-center oui-gap-1 oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
6220
+ isRTL && "oui-flex-row-reverse"
6221
+ ),
6222
+ children: [
6223
+ selectedWalletOpt?.name && /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { name: selectedWalletOpt.name, size: "3xs" }),
6224
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
6225
+ /* @__PURE__ */ jsxRuntime.jsx(
6226
+ ui.Text,
6227
+ {
6228
+ size: "2xs",
6229
+ intensity: 54,
6230
+ className: "oui-text-base-contrast-36",
6231
+ children: ` (${getChainLabel(selectedWalletOpt?.network)})`
6232
+ }
6233
+ ),
6234
+ isOpen ? /* @__PURE__ */ jsxRuntime.jsx(ui.CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, className: "oui-text-inherit" })
6235
+ ]
6236
+ }
6237
+ ) }),
6167
6238
  dropdownContent
6168
6239
  ] })
6169
6240
  ] });
@@ -7025,7 +7096,7 @@ function useInputStatus(options2) {
7025
7096
  setHintMessage("");
7026
7097
  }
7027
7098
  }
7028
- }, [quantity, maxQuantity]);
7099
+ }, [maxQuantity, quantity, t, unsettledPnL]);
7029
7100
  return { inputStatus, hintMessage };
7030
7101
  }
7031
7102
  var TransferDialogId = "TransferDialogId";