@kodiak-finance/orderly-ui-scaffold 2.8.22-beta.0 → 2.8.22

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React6, { forwardRef, createContext, useCallback, useRef, useEffect, useMemo, useState, cloneElement, useContext, isValidElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslation, i18n, useLocaleContext, Trans } from '@kodiak-finance/orderly-i18n';
-import { installExtension, ExtensionPositionEnum, tv, Flex, Text, Tooltip, useScreen, Button, cn, modal, toast, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, EVMAvatar, Divider, DropdownMenuItem, ChevronDownIcon, Box, PopoverRoot, PopoverAnchor, PopoverContent, SimpleDialog, Checkbox, useObserverElement, SimpleSheet, Logo, VectorIcon, PeopleIcon, SwapHorizIcon, Sheet, SheetContent, ChevronLeftIcon, Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, Spinner, ChainIcon, ScrollArea, formatAddress, Popover, Grid, CopyIcon, TextField, inputFormatter, ExtensionSlot, EyeIcon, EyeCloseIcon, SimpleDialogFooter, TooltipProvider, TooltipRoot, TooltipTrigger, BellIcon, TooltipContent, PopoverTrigger, PopupUnionIcon, CloseRoundFillIcon, SpotIcon, PerpsIcon, SelectedChoicesFillIcon } from '@kodiak-finance/orderly-ui';
+import { installExtension, ExtensionPositionEnum, tv, Flex, Text, Tooltip, useScreen, Button, cn, modal, toast, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, EVMAvatar, Divider, DropdownMenuItem, ChevronDownIcon, Box, PopoverRoot, PopoverAnchor, PopoverContent, SimpleDialog, Checkbox, useObserverElement, SimpleSheet, Logo, VectorIcon, PeopleIcon, SwapHorizIcon, Sheet, SheetContent, ChevronLeftIcon, Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, Spinner, ChainIcon, ScrollArea, formatAddress, CopyIcon, Popover, Grid, TextField, inputFormatter, ExtensionSlot, EyeIcon, EyeCloseIcon, SimpleDialogFooter, TooltipProvider, TooltipRoot, TooltipTrigger, BellIcon, TooltipContent, PopoverTrigger, PopupUnionIcon, CloseRoundFillIcon, SpotIcon, PerpsIcon, SelectedChoicesFillIcon } from '@kodiak-finance/orderly-ui';
 import { useWalletConnector, useAccount, useChains, useLocalStorage, useConfig, useTrack, useIndexPricesStream, WsNetworkStatus, useSubAccountQuery, useWsStatus, OrderlyContext, useMemoizedFn, useCollateral, usePositionStream, useMarginRatio, useLeverage, useMaintenanceStatus, useEventEmitter } from '@kodiak-finance/orderly-hooks';
 import { useAppContext, useAppConfig } from '@kodiak-finance/orderly-react-app';
 import { AccountStatusEnum, ABSTRACT_CHAIN_ID_MAP, EMPTY_LIST, TrackerEventName, EMPTY_OBJECT } from '@kodiak-finance/orderly-types';
@@ -1853,6 +1853,16 @@ var AccountIdForCopy = (props) => {
 };
 var AccountItem = (props) => {
   const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const copyAccountId = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      navigator.clipboard.writeText(props.accountId);
+      toast.success(t("common.copy.copied"));
+    },
+    [props.accountId, t]
+  );
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -1917,10 +1927,37 @@ var AccountItem = (props) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(AccountIdForCopy, { accountId: props.accountId }), children: /* @__PURE__ */ jsxs(Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 hover:oui-text-base-contrast", children: [
-                "ID: ",
-                formatAddress(props.accountId)
-              ] }) })
+              isMobile ? /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, className: "oui-group", children: [
+                /* @__PURE__ */ jsxs(
+                  Text,
+                  {
+                    className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 oui-transition-colors group-hover:oui-text-base-contrast",
+                    onClick: copyAccountId,
+                    children: [
+                      "ID: ",
+                      formatAddress(props.accountId)
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CopyIcon,
+                  {
+                    size: 12,
+                    onClick: copyAccountId,
+                    className: "oui-cursor-pointer oui-text-base-contrast-36 oui-transition-colors group-hover:oui-text-base-contrast"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(AccountIdForCopy, { accountId: props.accountId }), children: /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 hover:oui-text-base-contrast",
+                  onClick: copyAccountId,
+                  children: [
+                    "ID: ",
+                    formatAddress(props.accountId)
+                  ]
+                }
+              ) })
             ]
           },
           props.accountId