@kodiak-finance/orderly-ui-transfer 2.9.2 → 2.9.3

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 +11 -11
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 } = orderlyI18n.useTranslation();
247
247
  const { isMobile } = orderlyUi.useScreen();
248
+ const dir = orderlyUi.useDocumentDirection();
249
+ const isRTL = dir === "rtl";
248
250
  const { getIndexPrice } = orderlyHooks.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(orderlyUi.Text.numeral, { dp: 2, padding: false, rm: orderlyUtils.Decimal.ROUND_DOWN, children: notional })
264
266
  ] }),
265
- /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 2, itemAlign: "center", className: "oui-ml-auto", children: [
266
- /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.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
- orderlyUi.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
- orderlyUi.modal.alert({
287
- title: t("common.tips"),
288
- message: props.tooltipContent
289
- });
290
- }
291
- },
292
- children: /* @__PURE__ */ jsxRuntime.jsx(
293
- orderlyUi.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
- orderlyUi.Tooltip,
304
- {
305
- content: props.tooltipContent,
306
- className: "oui-max-w-[274px]",
307
- children: /* @__PURE__ */ jsxRuntime.jsx(
308
- orderlyUi.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(orderlyUi.Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
318
- loading ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Spinner, { size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
319
- orderlyUi.Text.numeral,
320
- {
321
- size: "2xs",
322
- intensity: 36,
323
- rm: orderlyUtils.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(orderlyUi.Text, { size: "2xs", intensity: 36, children: ` ${name}` })
331
- ] }),
332
- /* @__PURE__ */ jsxRuntime.jsx(
333
- orderlyUi.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
+ orderlyUi.Flex,
269
+ {
270
+ gapX: 2,
271
+ itemAlign: "center",
272
+ className: orderlyUi.cn("oui-ms-auto", isRTL && "oui-flex-row-reverse"),
273
+ children: [
274
+ /* @__PURE__ */ jsxRuntime.jsxs(
275
+ orderlyUi.Flex,
276
+ {
277
+ gapX: 1,
278
+ itemAlign: "center",
279
+ className: orderlyUi.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
+ orderlyUi.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
+ orderlyUi.modal.alert({
301
+ title: t("common.tips"),
302
+ message: props.tooltipContent
303
+ });
304
+ }
305
+ },
306
+ children: /* @__PURE__ */ jsxRuntime.jsx(
307
+ orderlyUi.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
+ orderlyUi.Tooltip,
318
+ {
319
+ content: props.tooltipContent,
320
+ className: "oui-max-w-[274px]",
321
+ children: /* @__PURE__ */ jsxRuntime.jsx(
322
+ orderlyUi.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(orderlyUi.Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
332
+ loading ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Spinner, { size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
333
+ orderlyUi.Text.numeral,
334
+ {
335
+ size: "2xs",
336
+ intensity: 36,
337
+ rm: orderlyUtils.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(orderlyUi.Text, { size: "2xs", intensity: 36, children: ` ${name}` })
345
+ ]
346
+ }
347
+ ),
348
+ /* @__PURE__ */ jsxRuntime.jsx(
349
+ orderlyUi.Text,
350
+ {
351
+ size: "2xs",
352
+ color: "primary",
353
+ className: orderlyUi.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 } = orderlyI18n.useTranslation();
434
+ const dir = orderlyUi.useDocumentDirection();
435
+ const isRTL = dir === "rtl";
416
436
  const selectable = wrongNetwork || chains?.length > 1;
417
437
  const chainIcon = wrongNetwork ? /* @__PURE__ */ jsxRuntime.jsx(
418
438
  orderlyUi.Flex,
@@ -453,11 +473,19 @@ var ChainSelect = (props) => {
453
473
  children: [
454
474
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
455
475
  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 54, children: t("transfer.network") }) }),
456
- /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 1, itemAlign: "center", children: [
457
- chainIcon,
458
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "sm", intensity: 80, children: chainName }),
459
- !isCurrentChainSupported && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
460
- ] })
476
+ /* @__PURE__ */ jsxRuntime.jsxs(
477
+ orderlyUi.Flex,
478
+ {
479
+ direction: isRTL ? "rowReverse" : "row",
480
+ gapX: 1,
481
+ itemAlign: "center",
482
+ children: [
483
+ chainIcon,
484
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "sm", intensity: 80, children: chainName }),
485
+ !isCurrentChainSupported && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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: orderlyUi.cn(
@@ -487,17 +516,25 @@ var ChainSelect = (props) => {
487
516
  await props.onValueChange(chain);
488
517
  },
489
518
  children: [
490
- /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 1, itemAlign: "center", children: [
491
- /* @__PURE__ */ jsxRuntime.jsx(
492
- orderlyUi.ChainIcon,
493
- {
494
- className: orderlyUi.cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
495
- chainId: chain.chain_id
496
- }
497
- ),
498
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
499
- !isSupported && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
500
- ] }),
519
+ /* @__PURE__ */ jsxRuntime.jsxs(
520
+ orderlyUi.Flex,
521
+ {
522
+ direction: isRTL ? "rowReverse" : "row",
523
+ gapX: 1,
524
+ itemAlign: "center",
525
+ children: [
526
+ /* @__PURE__ */ jsxRuntime.jsx(
527
+ orderlyUi.ChainIcon,
528
+ {
529
+ className: orderlyUi.cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
530
+ chainId: chain.chain_id
531
+ }
532
+ ),
533
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
534
+ !isSupported && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
535
+ ]
536
+ }
537
+ ),
501
538
  isActive && /* @__PURE__ */ jsxRuntime.jsx(
502
539
  orderlyUi.Box,
503
540
  {
@@ -518,7 +555,7 @@ var ChainSelect = (props) => {
518
555
  orderlyUi.DropdownMenuContent,
519
556
  {
520
557
  onCloseAutoFocus: (e) => e.preventDefault(),
521
- align: "start",
558
+ align: isRTL ? "end" : "start",
522
559
  sideOffset: 2,
523
560
  className: orderlyUi.cn(
524
561
  "oui-deposit-token-select-dropdown-menu-content",
@@ -575,7 +612,7 @@ var CollateralRatioUI = (props) => {
575
612
  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
576
613
  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "start", itemAlign: "center", children: [
577
614
  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 36, children: t("portfolio.overview.column.collateralRatio") }),
578
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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(orderlyUi.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
  orderlyUi.Text.numeral,
@@ -717,7 +754,7 @@ var NetworkTokenSelect = ({
717
754
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
718
755
  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
719
756
  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 36, children: t("common.network") }),
720
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
757
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ms-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
721
758
  orderlyUi.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(orderlyUi.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", children: [
@@ -737,7 +774,7 @@ var NetworkTokenSelect = ({
737
774
  ] }),
738
775
  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
739
776
  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 36, children: t("common.token") }),
740
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
777
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ms-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
741
778
  orderlyUi.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(orderlyUi.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.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 = orderlyUi.useDocumentDirection();
1227
+ const isRTL = dir === "rtl";
1189
1228
  const showAPY = isYieldBearingAsset(symbol) && apy !== null;
1190
1229
  const { t } = orderlyI18n.useTranslation();
1191
1230
  if (displayType === "vaultBalance" && insufficientBalance) {
1192
1231
  return /* @__PURE__ */ jsxRuntime.jsx(
1193
1232
  orderlyUi.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(orderlyUi.Flex, { itemAlign: "center", gapX: 1, children: [
1208
- /* @__PURE__ */ jsxRuntime.jsx(
1209
- orderlyUi.TokenIcon,
1210
- {
1211
- url: token.logo_uri,
1212
- name: symbol,
1213
- className: "oui-size-[16px] oui-opacity-50"
1214
- }
1215
- ),
1216
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 36, className: "oui-max-w-[200px] oui-truncate", children: token.label }),
1217
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { color: "neutral", size: "xs", children: t("transfer.withdraw.InsufficientVaultBalance") })
1218
- ] })
1247
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1248
+ orderlyUi.Flex,
1249
+ {
1250
+ direction: isRTL ? "rowReverse" : "row",
1251
+ itemAlign: "center",
1252
+ gapX: 1,
1253
+ children: [
1254
+ /* @__PURE__ */ jsxRuntime.jsx(
1255
+ orderlyUi.TokenIcon,
1256
+ {
1257
+ url: token.logo_uri,
1258
+ name: symbol,
1259
+ className: "oui-size-[16px] oui-opacity-50"
1260
+ }
1261
+ ),
1262
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 36, className: "oui-max-w-[200px] oui-truncate", children: token.label }),
1263
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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
  orderlyUi.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(orderlyUi.Flex, { gapX: 1, itemAlign: "center", children: [
1264
- /* @__PURE__ */ jsxRuntime.jsx(
1265
- orderlyUi.TokenIcon,
1266
- {
1267
- name: symbol,
1268
- url: token.logo_uri,
1269
- className: "oui-size-[16px]"
1270
- }
1271
- ),
1272
- /* @__PURE__ */ jsxRuntime.jsx(
1273
- orderlyUi.Text,
1274
- {
1275
- className: orderlyUi.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
+ orderlyUi.Flex,
1314
+ {
1315
+ direction: isRTL ? "rowReverse" : "row",
1316
+ gapX: 1,
1317
+ itemAlign: "center",
1318
+ children: [
1319
+ /* @__PURE__ */ jsxRuntime.jsx(
1320
+ orderlyUi.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
- orderlyUi.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(orderlyUi.Text, { size: "2xs", className: "oui-text-success", children: [
1291
- apy.toFixed(1),
1292
- "% APY"
1293
- ] })
1294
- }
1295
- )
1296
- ] }),
1327
+ /* @__PURE__ */ jsxRuntime.jsx(
1328
+ orderlyUi.Text,
1329
+ {
1330
+ className: orderlyUi.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
+ orderlyUi.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(orderlyUi.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 } = orderlyI18n.useTranslation();
1384
+ const dir = orderlyUi.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(orderlyUi.Box, { className: "oui-absolute oui-top-0", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 36, children: label || t("common.quantity") }) }),
1375
1433
  loading && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-absolute oui-bottom-1", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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
  orderlyUi.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
  orderlyUi.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(orderlyUi.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(orderlyUi.Text, { size: "2xs", intensity: 36, children: label }) });
4421
4479
  const message = /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { mb: 1, gapX: 1, px: 1, children: [
4422
4480
  /* @__PURE__ */ jsxRuntime.jsx(
4423
4481
  orderlyUi.Box,
@@ -4500,7 +4558,7 @@ var TextAreaInput = (props) => {
4500
4558
  ]
4501
4559
  }
4502
4560
  ) }),
4503
- enableAccountLookup && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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(orderlyUi.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
  )
@@ -4988,7 +5046,8 @@ var useVaultBalance = (inputs) => {
4988
5046
  crossChainWithdraw,
4989
5047
  chainName,
4990
5048
  sourceToken,
4991
- chainVaultBalance
5049
+ chainVaultBalance,
5050
+ t
4992
5051
  ]);
4993
5052
  const vaultBalanceListFilterCCTP = react.useMemo(() => {
4994
5053
  if (cctpSupportedChains.includes(currentChain?.id)) {
@@ -5211,7 +5270,7 @@ var useWithdrawLTV = (params) => {
5211
5270
  }
5212
5271
  }
5213
5272
  return "";
5214
- }, [nextLTV, ltv_threshold]);
5273
+ }, [ltv_threshold, nextLTV, t]);
5215
5274
  return {
5216
5275
  currentLTV,
5217
5276
  nextLTV,
@@ -5938,9 +5997,9 @@ var AddWalletDialog = ({
5938
5997
  onValueChange: onAddressChange,
5939
5998
  autoFocus: true,
5940
5999
  color: showBorderDanger ? "danger" : void 0,
5941
- className: orderlyUi.cn("oui-bg-base-6 oui-bg-transparent"),
6000
+ className: "oui-bg-base-6",
5942
6001
  classNames: { input: "oui-text-base-contrast" },
5943
- suffix: address && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ml-2.5 oui-mr-2 oui-cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
6002
+ suffix: address && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ms-2.5 oui-me-2 oui-cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
5944
6003
  orderlyUi.CloseRoundFillIcon,
5945
6004
  {
5946
6005
  size: 16,
@@ -6021,6 +6080,8 @@ var WalletSelector = ({
6021
6080
  }) => {
6022
6081
  const { t } = orderlyI18n.useTranslation();
6023
6082
  const [isOpen, setIsOpen] = react.useState(false);
6083
+ const dir = orderlyUi.useDocumentDirection();
6084
+ const isRTL = dir === "rtl";
6024
6085
  const currentNetwork = react.useMemo(() => {
6025
6086
  if (!connectedWallet?.namespace) return void 0;
6026
6087
  const ns = connectedWallet.namespace.toLowerCase();
@@ -6068,7 +6129,7 @@ var WalletSelector = ({
6068
6129
  const dropdownContent = /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
6069
6130
  orderlyUi.DropdownMenuContent,
6070
6131
  {
6071
- align: "end",
6132
+ align: isRTL ? "start" : "end",
6072
6133
  className: "oui-max-h-[240px] oui-overflow-y-auto oui-custom-scrollbar",
6073
6134
  children: [
6074
6135
  showConnectedItem && connectedWallet && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6122,6 +6183,7 @@ var WalletSelector = ({
6122
6183
  children: /* @__PURE__ */ jsxRuntime.jsxs(
6123
6184
  orderlyUi.Flex,
6124
6185
  {
6186
+ direction: isRTL ? "rowReverse" : "row",
6125
6187
  itemAlign: "center",
6126
6188
  gapX: 1,
6127
6189
  className: "oui-text-primary oui-font-semibold oui-tracking-[0.03em]",
@@ -6139,20 +6201,29 @@ var WalletSelector = ({
6139
6201
  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full oui-mb-3", children: [
6140
6202
  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 36, children: t("common.wallet") }),
6141
6203
  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.DropdownMenuRoot, { open: isOpen, onOpenChange: setIsOpen, children: [
6142
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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: [
6143
- selectedWalletOpt?.name && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.WalletIcon, { name: selectedWalletOpt.name, size: "2xs" }),
6144
- /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
6145
- /* @__PURE__ */ jsxRuntime.jsx(
6146
- orderlyUi.Text,
6147
- {
6148
- size: "2xs",
6149
- intensity: 54,
6150
- className: "oui-text-base-contrast-36",
6151
- children: ` (${getChainLabel(selectedWalletOpt?.network)})`
6152
- }
6153
- ),
6154
- isOpen ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.CaretDownIcon, { size: 12, className: "oui-text-inherit" })
6155
- ] }) }),
6204
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
6205
+ "div",
6206
+ {
6207
+ className: orderlyUi.cn(
6208
+ "oui-flex oui-items-center oui-gap-1 oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
6209
+ isRTL && "oui-flex-row-reverse"
6210
+ ),
6211
+ children: [
6212
+ selectedWalletOpt?.name && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.WalletIcon, { name: selectedWalletOpt.name, size: "3xs" }),
6213
+ /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
6214
+ /* @__PURE__ */ jsxRuntime.jsx(
6215
+ orderlyUi.Text,
6216
+ {
6217
+ size: "2xs",
6218
+ intensity: 54,
6219
+ className: "oui-text-base-contrast-36",
6220
+ children: ` (${getChainLabel(selectedWalletOpt?.network)})`
6221
+ }
6222
+ ),
6223
+ isOpen ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.CaretDownIcon, { size: 12, className: "oui-text-inherit" })
6224
+ ]
6225
+ }
6226
+ ) }),
6156
6227
  dropdownContent
6157
6228
  ] })
6158
6229
  ] });
@@ -7014,7 +7085,7 @@ function useInputStatus(options2) {
7014
7085
  setHintMessage("");
7015
7086
  }
7016
7087
  }
7017
- }, [quantity, maxQuantity]);
7088
+ }, [maxQuantity, quantity, t, unsettledPnL]);
7018
7089
  return { inputStatus, hintMessage };
7019
7090
  }
7020
7091
  var TransferDialogId = "TransferDialogId";