@0xsquid/ui 3.2.2-beta.7.0 → 3.2.2-beta.8.1
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.
- package/dist/cjs/index.js +9 -10
- package/dist/esm/index.js +3 -4
- package/package.json +3 -2
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('clsx');
|
|
4
5
|
var require$$0 = require('react');
|
|
5
6
|
|
|
6
7
|
function _interopNamespaceDefault(e) {
|
|
@@ -281,8 +282,6 @@ const themeKeysToCssVariables = {
|
|
|
281
282
|
boxShadow: keysToCssVariables(THEME_BOX_SHADOW_KEYS, "box-shadow"),
|
|
282
283
|
};
|
|
283
284
|
|
|
284
|
-
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
285
|
-
|
|
286
285
|
/**
|
|
287
286
|
* @name toDate
|
|
288
287
|
* @category Common Helpers
|
|
@@ -4178,7 +4177,7 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
|
|
|
4178
4177
|
* @returns The combined class names as a string.
|
|
4179
4178
|
*/
|
|
4180
4179
|
const cn = (...inputs) => {
|
|
4181
|
-
return twMerge(clsx(inputs));
|
|
4180
|
+
return twMerge(clsx.clsx(inputs));
|
|
4182
4181
|
};
|
|
4183
4182
|
function debounce(func, delay) {
|
|
4184
4183
|
let timeoutId;
|
|
@@ -15665,7 +15664,7 @@ const textClassMap = {
|
|
|
15665
15664
|
};
|
|
15666
15665
|
function HeadingText({ children, bold = false, size, className, }) {
|
|
15667
15666
|
const fontWeightClass = bold ? "!tw-font-bold" : "!tw-font-regular";
|
|
15668
|
-
return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass, className), children: children }));
|
|
15667
|
+
return (jsxRuntime.jsx("h6", { className: clsx.clsx(textClassMap[size], fontWeightClass, className), children: children }));
|
|
15669
15668
|
}
|
|
15670
15669
|
|
|
15671
15670
|
function IconLabel({ src, children, rounded }) {
|
|
@@ -16563,7 +16562,7 @@ function AddressButton(_a) {
|
|
|
16563
16562
|
|
|
16564
16563
|
function ArrowButton(_a) {
|
|
16565
16564
|
var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
|
|
16566
|
-
return (jsxRuntime.jsxs(Button, Object.assign({ size: "lg", variant: "tertiary" }, props, { disabled: disabled, children: [jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) }), jsxRuntime.jsx("span", { "aria-disabled": disabled, className: clsx("tw-flex tw-aspect-square tw-h-[52px] tw-w-[52px] tw-items-center tw-justify-center tw-rounded-full tw-bg-royal-500 tw-text-grey-100",
|
|
16565
|
+
return (jsxRuntime.jsxs(Button, Object.assign({ size: "lg", variant: "tertiary" }, props, { disabled: disabled, children: [jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) }), jsxRuntime.jsx("span", { "aria-disabled": disabled, className: clsx.clsx("tw-flex tw-aspect-square tw-h-[52px] tw-w-[52px] tw-items-center tw-justify-center tw-rounded-full tw-bg-royal-500 tw-text-grey-100",
|
|
16567
16566
|
// disabled styles
|
|
16568
16567
|
"aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800"), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
|
|
16569
16568
|
}
|
|
@@ -41825,7 +41824,7 @@ const switchKnobCheckedClassMap = {
|
|
|
41825
41824
|
function Switch({ checked = false, onChange, size, disabled = false, inputProps, }) {
|
|
41826
41825
|
return (
|
|
41827
41826
|
// Switch container
|
|
41828
|
-
jsxRuntime.jsxs("label", { className: clsx("tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors",
|
|
41827
|
+
jsxRuntime.jsxs("label", { className: clsx.clsx("tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors",
|
|
41829
41828
|
// size styles
|
|
41830
41829
|
switchSizeClassMap[size],
|
|
41831
41830
|
// checked styles
|
|
@@ -41837,7 +41836,7 @@ function Switch({ checked = false, onChange, size, disabled = false, inputProps,
|
|
|
41837
41836
|
filter: disabled
|
|
41838
41837
|
? "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.10))"
|
|
41839
41838
|
: "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
|
|
41840
|
-
}, className: clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all",
|
|
41839
|
+
}, className: clsx.clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all",
|
|
41841
41840
|
// size styles
|
|
41842
41841
|
switchKnobSizeClassMap[size],
|
|
41843
41842
|
// checked styles
|
|
@@ -41951,8 +41950,8 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
|
|
|
41951
41950
|
? "tw-cursor-not-allowed"
|
|
41952
41951
|
: "tw-group/assets-button"), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip1", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsxRuntime.jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip2", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsxRuntime.jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between tw-assets-button-mask", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
|
|
41953
41952
|
backgroundImage: bgGradient,
|
|
41954
|
-
}, children: jsxRuntime.jsx("div", { className: clsx(imageWrapperClassName), children: state === AssetsButtonState.CHAIN_ONLY ||
|
|
41955
|
-
state === AssetsButtonState.FULL ? (jsxRuntime.jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxRuntime.jsxs("div", { className: clsx(imageWrapperClassName, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
|
|
41953
|
+
}, children: jsxRuntime.jsx("div", { className: clsx.clsx(imageWrapperClassName), children: state === AssetsButtonState.CHAIN_ONLY ||
|
|
41954
|
+
state === AssetsButtonState.FULL ? (jsxRuntime.jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxRuntime.jsxs("div", { className: clsx.clsx(imageWrapperClassName, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
|
|
41956
41955
|
backgroundColor: tokenBgColor,
|
|
41957
41956
|
} }), isImgLoadError && (token === null || token === void 0 ? void 0 : token.fallbackIconUrl) && (
|
|
41958
41957
|
// fallback image
|
|
@@ -83717,7 +83716,7 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
|
|
|
83717
83716
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83718
83717
|
if (isLoading)
|
|
83719
83718
|
return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83720
|
-
return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["
|
|
83719
|
+
return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: fromChain ? (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: formatHash(fromAddress), label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: formatHash(toAddress), label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83721
83720
|
}
|
|
83722
83721
|
|
|
83723
83722
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import clsx$1, { clsx } from 'clsx';
|
|
2
3
|
import * as require$$0 from 'react';
|
|
3
4
|
import require$$0__default, { useState, createContext, useRef, useLayoutEffect, useEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, forwardRef, Fragment as Fragment$1, createElement, Component, memo as memo$1, cloneElement, useImperativeHandle } from 'react';
|
|
4
5
|
|
|
@@ -261,8 +262,6 @@ const themeKeysToCssVariables = {
|
|
|
261
262
|
boxShadow: keysToCssVariables(THEME_BOX_SHADOW_KEYS, "box-shadow"),
|
|
262
263
|
};
|
|
263
264
|
|
|
264
|
-
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
265
|
-
|
|
266
265
|
/**
|
|
267
266
|
* @name toDate
|
|
268
267
|
* @category Common Helpers
|
|
@@ -39302,7 +39301,7 @@ const AnimationWrapper = (_a) => {
|
|
|
39302
39301
|
setDisplay(true);
|
|
39303
39302
|
}, 250);
|
|
39304
39303
|
}, []);
|
|
39305
|
-
return (jsx("div", { id: "squid-lottie-animation", className: clsx("tw-h-full [&>*]:tw-h-full", "tw-transition-all", display ? "tw-opacity-100" : "tw-opacity-0"), children: showAnimation && (jsx(Lottie, Object.assign({}, playerProps, { animationData: src, autoPlay: playerProps.autoplay }))) }));
|
|
39304
|
+
return (jsx("div", { id: "squid-lottie-animation", className: clsx$1("tw-h-full [&>*]:tw-h-full", "tw-transition-all", display ? "tw-opacity-100" : "tw-opacity-0"), children: showAnimation && (jsx(Lottie, Object.assign({}, playerProps, { animationData: src, autoPlay: playerProps.autoplay }))) }));
|
|
39306
39305
|
};
|
|
39307
39306
|
function AnimationCard({ children }) {
|
|
39308
39307
|
return (jsx("div", { className: "tw-flex tw-h-[130px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-animation-bg tw-py-squid-s tw-text-material-light-thin mobile-xs-height:tw-h-[160px]", style: {
|
|
@@ -83697,7 +83696,7 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
|
|
|
83697
83696
|
function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
|
|
83698
83697
|
if (isLoading)
|
|
83699
83698
|
return jsx(TransactionViewLayout, { isLoading: isLoading });
|
|
83700
|
-
return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["
|
|
83699
|
+
return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: formatHash(fromAddress), label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: formatHash(toAddress), label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: fromToken ? (jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
|
|
83701
83700
|
}
|
|
83702
83701
|
|
|
83703
83702
|
function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
|
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.
|
|
8
|
+
"version": "3.2.2-beta.8.1",
|
|
9
9
|
"author": "",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"resolutions": {
|
|
@@ -123,5 +123,6 @@
|
|
|
123
123
|
"peerDependencies": {
|
|
124
124
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
|
125
125
|
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
126
|
-
}
|
|
126
|
+
},
|
|
127
|
+
"packageManager": "yarn@1.22.22"
|
|
127
128
|
}
|