@0xsquid/ui 3.2.2-beta.1.0 → 3.2.2-beta.2.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/cjs/index.js +8 -2
  2. package/dist/cjs/types/components/lists/TransactionItem.d.ts +1 -1
  3. package/dist/esm/index.js +8 -2
  4. package/dist/esm/types/components/lists/TransactionItem.d.ts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -40142,7 +40142,13 @@ function useMediaQuery(query, { defaultValue = false, initializeWithValue = true
40142
40142
  }
40143
40143
 
40144
40144
  const useTimer = ({ startTime: _startTime, immediateStart = true, }) => {
40145
- const [timer, setTimer] = require$$0.useState("0s");
40145
+ const initialDuration = require$$0.useMemo(() => {
40146
+ if (!_startTime)
40147
+ return "0s";
40148
+ const elapsedTime = Date.now() - _startTime;
40149
+ return formatDuration(elapsedTime);
40150
+ }, []);
40151
+ const [timer, setTimer] = require$$0.useState(initialDuration);
40146
40152
  const intervalRef = require$$0.useRef(null);
40147
40153
  const startTimer = () => {
40148
40154
  if (intervalRef.current !== null)
@@ -40793,7 +40799,7 @@ function TransactionAction({ type, props }) {
40793
40799
 
40794
40800
  const TransactionItem = (props) => {
40795
40801
  const { status, hash, type, fromToken, toToken, fromChain, toChain, fromAmount, toAmount, timestamp, timeToComplete, } = props;
40796
- return (jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-5 tw-px-2.5 tw-py-2.5", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-[5px]", children: [jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-700" }), jsxRuntime.jsx(TransactionState, { status: status, variant: "compact" }), jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-b tw-from-grey-700" })] }), jsxRuntime.jsx("div", { className: "tw-w-8", children: jsxRuntime.jsx(OrderMedia, Object.assign({}, props)) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-grow tw-flex-col tw-gap-[5px]", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-[5px]", children: [jsxRuntime.jsx(OrderType, { type: type }), jsxRuntime.jsx("div", { className: "tw-h-2.5 tw-w-0.5 tw-rounded-full tw-bg-grey-600" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatHash(hash) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-text-grey-400", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1 tw-pt-[1px]", children: fromChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoURI, alt: fromChain.name }), jsxRuntime.jsx(CaptionText, { children: fromChain.name })] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsxRuntime.jsx(ChevronRightSmallIcon, { className: "tw-text-grey-600" }), jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1", children: toChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { src: toChain.logoURI, alt: toChain.name }), jsxRuntime.jsx(CaptionText, { children: toChain.name })] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx("div", { className: "tw-text-grey-300", children: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [fromAmount, " ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-600" }), jsxRuntime.jsx("div", { className: "tw-text-grey-300", children: toToken ? (jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [toAmount, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) })] })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-text-right", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: formatRelativeTime(timestamp) }), jsxRuntime.jsxs("div", { className: "tw-mt-0.5 tw-flex tw-flex tw-items-center tw-justify-end tw-gap-0.5 tw-text-right tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { children: timeToComplete }), " ", jsxRuntime.jsx(TimeFliesSolidIcon, {})] })] })] }));
40802
+ return (jsxRuntime.jsxs("div", { className: "tw-flex tw-gap-5 tw-px-2.5 tw-py-2.5", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-[5px]", children: [jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-700" }), jsxRuntime.jsx(TransactionState, { status: status, variant: "compact" }), jsxRuntime.jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-b tw-from-grey-700" })] }), jsxRuntime.jsx("div", { className: "tw-w-8", children: jsxRuntime.jsx(OrderMedia, Object.assign({}, props)) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-grow tw-flex-col tw-gap-[5px]", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-[5px]", children: [jsxRuntime.jsx(OrderType, { type: type }), jsxRuntime.jsx("div", { className: "tw-h-2.5 tw-w-0.5 tw-rounded-full tw-bg-grey-600" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatHash(hash) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-text-grey-400", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1 tw-pt-[1px]", children: fromChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoURI, alt: fromChain.name }), jsxRuntime.jsx(CaptionText, { children: fromChain.name })] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsxRuntime.jsx(ChevronRightSmallIcon, { className: "tw-text-grey-600" }), jsxRuntime.jsx("div", { className: "tw-flex tw-gap-1", children: toChain ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { src: toChain.logoURI, alt: toChain.name }), jsxRuntime.jsx(CaptionText, { children: toChain.name })] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx("div", { className: "tw-text-grey-300", children: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [fromAmount, " ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-600" }), jsxRuntime.jsx("div", { className: "tw-text-grey-300", children: toToken ? (jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [toAmount, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) })] })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-text-right", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: formatRelativeTime(timestamp) }), timeToComplete && (jsxRuntime.jsxs("div", { className: "tw-mt-0.5 tw-flex tw-flex tw-items-center tw-justify-end tw-gap-0.5 tw-text-right tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { children: timeToComplete }), " ", jsxRuntime.jsx(TimeFliesSolidIcon, {})] }))] })] }));
40797
40803
  };
40798
40804
  const OrderType = ({ type }) => {
40799
40805
  switch (type) {
package/dist/cjs/types/components/lists/TransactionItem.d.ts CHANGED
@@ -25,7 +25,7 @@ interface BaseTransactionItemProps {
25
25
  fromAmount: string;
26
26
  toAmount: string;
27
27
  timestamp: number;
28
- timeToComplete: string;
28
+ timeToComplete?: string;
29
29
  }
30
30
  interface SwapTransactionProps extends BaseTransactionItemProps {
31
31
  type: "swap";
package/dist/esm/index.js CHANGED
@@ -40122,7 +40122,13 @@ function useMediaQuery(query, { defaultValue = false, initializeWithValue = true
40122
40122
  }
40123
40123
 
40124
40124
  const useTimer = ({ startTime: _startTime, immediateStart = true, }) => {
40125
- const [timer, setTimer] = useState("0s");
40125
+ const initialDuration = useMemo(() => {
40126
+ if (!_startTime)
40127
+ return "0s";
40128
+ const elapsedTime = Date.now() - _startTime;
40129
+ return formatDuration(elapsedTime);
40130
+ }, []);
40131
+ const [timer, setTimer] = useState(initialDuration);
40126
40132
  const intervalRef = useRef(null);
40127
40133
  const startTimer = () => {
40128
40134
  if (intervalRef.current !== null)
@@ -40773,7 +40779,7 @@ function TransactionAction({ type, props }) {
40773
40779
 
40774
40780
  const TransactionItem = (props) => {
40775
40781
  const { status, hash, type, fromToken, toToken, fromChain, toChain, fromAmount, toAmount, timestamp, timeToComplete, } = props;
40776
- return (jsxs("div", { className: "tw-flex tw-gap-5 tw-px-2.5 tw-py-2.5", children: [jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-[5px]", children: [jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-700" }), jsx(TransactionState, { status: status, variant: "compact" }), jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-b tw-from-grey-700" })] }), jsx("div", { className: "tw-w-8", children: jsx(OrderMedia, Object.assign({}, props)) }), jsxs("div", { className: "tw-flex tw-grow tw-flex-col tw-gap-[5px]", children: [jsxs("div", { className: "tw-flex tw-items-center tw-gap-[5px]", children: [jsx(OrderType, { type: type }), jsx("div", { className: "tw-h-2.5 tw-w-0.5 tw-rounded-full tw-bg-grey-600" }), jsx(CaptionText, { className: "tw-text-grey-500", children: formatHash(hash) })] }), jsxs("div", { className: "tw-flex tw-items-center tw-text-grey-400", children: [jsx("div", { className: "tw-flex tw-gap-1 tw-pt-[1px]", children: fromChain ? (jsxs(Fragment, { children: [jsx(Image$1, { src: fromChain.logoURI, alt: fromChain.name }), jsx(CaptionText, { children: fromChain.name })] })) : (jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsx(ChevronRightSmallIcon, { className: "tw-text-grey-600" }), jsx("div", { className: "tw-flex tw-gap-1", children: toChain ? (jsxs(Fragment, { children: [jsx(Image$1, { src: toChain.logoURI, alt: toChain.name }), jsx(CaptionText, { children: toChain.name })] })) : (jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) })] }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx("div", { className: "tw-text-grey-300", children: fromToken ? (jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [fromAmount, " ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsx(ChevronLargeRightIcon, { className: "tw-text-grey-600" }), jsx("div", { className: "tw-text-grey-300", children: toToken ? (jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [toAmount, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) })] })] }), jsxs("div", { className: "tw-flex tw-flex-col tw-text-right", children: [jsx(CaptionText, { className: "tw-text-grey-600", children: formatRelativeTime(timestamp) }), jsxs("div", { className: "tw-mt-0.5 tw-flex tw-flex tw-items-center tw-justify-end tw-gap-0.5 tw-text-right tw-text-grey-500", children: [jsx(CaptionText, { children: timeToComplete }), " ", jsx(TimeFliesSolidIcon, {})] })] })] }));
40782
+ return (jsxs("div", { className: "tw-flex tw-gap-5 tw-px-2.5 tw-py-2.5", children: [jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-[5px]", children: [jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-700" }), jsx(TransactionState, { status: status, variant: "compact" }), jsx("div", { className: "tw-to-grey-700/0 tw-h-5 tw-w-0.5 tw-rounded-full tw-bg-gradient-to-b tw-from-grey-700" })] }), jsx("div", { className: "tw-w-8", children: jsx(OrderMedia, Object.assign({}, props)) }), jsxs("div", { className: "tw-flex tw-grow tw-flex-col tw-gap-[5px]", children: [jsxs("div", { className: "tw-flex tw-items-center tw-gap-[5px]", children: [jsx(OrderType, { type: type }), jsx("div", { className: "tw-h-2.5 tw-w-0.5 tw-rounded-full tw-bg-grey-600" }), jsx(CaptionText, { className: "tw-text-grey-500", children: formatHash(hash) })] }), jsxs("div", { className: "tw-flex tw-items-center tw-text-grey-400", children: [jsx("div", { className: "tw-flex tw-gap-1 tw-pt-[1px]", children: fromChain ? (jsxs(Fragment, { children: [jsx(Image$1, { src: fromChain.logoURI, alt: fromChain.name }), jsx(CaptionText, { children: fromChain.name })] })) : (jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsx(ChevronRightSmallIcon, { className: "tw-text-grey-600" }), jsx("div", { className: "tw-flex tw-gap-1", children: toChain ? (jsxs(Fragment, { children: [jsx(Image$1, { src: toChain.logoURI, alt: toChain.name }), jsx(CaptionText, { children: toChain.name })] })) : (jsx(LoadingSkeleton, { width: "80", className: "tw-bg-grey-700 tw-text-transparent" })) })] }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx("div", { className: "tw-text-grey-300", children: fromToken ? (jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [fromAmount, " ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) }), jsx(ChevronLargeRightIcon, { className: "tw-text-grey-600" }), jsx("div", { className: "tw-text-grey-300", children: toToken ? (jsxs(BodyText, { size: "small", tight: true, className: "tw-whitespace-nowrap", children: [toAmount, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { width: "120", className: "tw-bg-grey-700 tw-text-transparent" })) })] })] }), jsxs("div", { className: "tw-flex tw-flex-col tw-text-right", children: [jsx(CaptionText, { className: "tw-text-grey-600", children: formatRelativeTime(timestamp) }), timeToComplete && (jsxs("div", { className: "tw-mt-0.5 tw-flex tw-flex tw-items-center tw-justify-end tw-gap-0.5 tw-text-right tw-text-grey-500", children: [jsx(CaptionText, { children: timeToComplete }), " ", jsx(TimeFliesSolidIcon, {})] }))] })] }));
40777
40783
  };
40778
40784
  const OrderType = ({ type }) => {
40779
40785
  switch (type) {
package/dist/esm/types/components/lists/TransactionItem.d.ts CHANGED
@@ -25,7 +25,7 @@ interface BaseTransactionItemProps {
25
25
  fromAmount: string;
26
26
  toAmount: string;
27
27
  timestamp: number;
28
- timeToComplete: string;
28
+ timeToComplete?: string;
29
29
  }
30
30
  interface SwapTransactionProps extends BaseTransactionItemProps {
31
31
  type: "swap";
package/dist/index.d.ts CHANGED
@@ -2131,7 +2131,7 @@ interface BaseTransactionItemProps {
2131
2131
  fromAmount: string;
2132
2132
  toAmount: string;
2133
2133
  timestamp: number;
2134
- timeToComplete: string;
2134
+ timeToComplete?: string;
2135
2135
  }
2136
2136
  interface SwapTransactionProps extends BaseTransactionItemProps {
2137
2137
  type: "swap";
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "3.2.2-beta.1.0",
8
+ "version": "3.2.2-beta.2.0",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {