@0xsquid/ui 0.13.4 → 0.13.6
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 +70 -52
- package/dist/cjs/types/core/constants.d.ts +9 -4
- package/dist/esm/index.js +70 -52
- package/dist/esm/types/core/constants.d.ts +9 -4
- package/dist/index.css +31 -92
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2682,10 +2682,11 @@ const roundedClassMap = {
|
|
|
2682
2682
|
md: 'tw-rounded-squid-m',
|
|
2683
2683
|
lg: 'tw-rounded-squid-xxl',
|
|
2684
2684
|
};
|
|
2685
|
+
const buttonBorderClassName = 'tw-border-material-light-thin hover:tw-border-material-light-average';
|
|
2685
2686
|
const buttonVariantClassMap = {
|
|
2686
|
-
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100
|
|
2687
|
-
secondary: 'tw-bg-grey-100 tw-text-grey-800
|
|
2688
|
-
tertiary: 'tw-bg-grey-800 tw-text-grey-300
|
|
2687
|
+
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100',
|
|
2688
|
+
secondary: 'tw-bg-grey-100 tw-text-grey-800',
|
|
2689
|
+
tertiary: 'tw-bg-grey-800 tw-text-grey-300',
|
|
2689
2690
|
};
|
|
2690
2691
|
// right now all variants have the same disabled styles
|
|
2691
2692
|
// in the future, we can add more disabled styles for different variants
|
|
@@ -2699,7 +2700,7 @@ function Button(_a) {
|
|
|
2699
2700
|
icon) : (
|
|
2700
2701
|
// icon and label
|
|
2701
2702
|
jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
|
|
2702
|
-
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], roundedClassMap[size],
|
|
2703
|
+
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], buttonBorderClassName, roundedClassMap[size],
|
|
2703
2704
|
// disabled styles
|
|
2704
2705
|
disabled && buttonDisabledClass,
|
|
2705
2706
|
// custom classes from props
|
|
@@ -2852,8 +2853,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2852
2853
|
const CSS_VARS = {
|
|
2853
2854
|
MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
|
|
2854
2855
|
DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
|
|
2855
|
-
|
|
2856
|
-
|
|
2856
|
+
COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
|
|
2857
|
+
EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
|
|
2857
2858
|
FADE_IN_DURATION: '--squid-animation-fade-in-duration',
|
|
2858
2859
|
FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
|
|
2859
2860
|
SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
|
|
@@ -2861,10 +2862,15 @@ const CSS_VARS = {
|
|
|
2861
2862
|
TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
|
|
2862
2863
|
};
|
|
2863
2864
|
const ANIMATION_DURATIONS = {
|
|
2864
|
-
|
|
2865
|
-
|
|
2865
|
+
SHOW_ROUTE: 300,
|
|
2866
|
+
HIDE_ROUTE: 300,
|
|
2866
2867
|
CHANGE_SWAP_STEP: 300,
|
|
2867
2868
|
};
|
|
2869
|
+
const ANIMATION_TIMINGS = {
|
|
2870
|
+
EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2871
|
+
COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2872
|
+
CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
|
|
2873
|
+
};
|
|
2868
2874
|
|
|
2869
2875
|
function SearchIcon() {
|
|
2870
2876
|
return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
@@ -3422,9 +3428,13 @@ const separatorClassMap = {
|
|
|
3422
3428
|
progress: 'tw-text-grey-600',
|
|
3423
3429
|
pending: 'tw-text-grey-600',
|
|
3424
3430
|
};
|
|
3425
|
-
const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
|
|
3426
3431
|
function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
|
|
3427
|
-
|
|
3432
|
+
// these styles are located here instead of outside the component
|
|
3433
|
+
// so they are updated whenever the animation duration changes
|
|
3434
|
+
const transitionStyle = {
|
|
3435
|
+
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3436
|
+
};
|
|
3437
|
+
return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) })), jsxRuntime.jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: status === 'pending' ? null : status === 'executed' ? (jsxRuntime.jsx(Checkmark1Icon, {})) : typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
|
|
3428
3438
|
if (type === 'string') {
|
|
3429
3439
|
return (
|
|
3430
3440
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3558,9 +3568,8 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3558
3568
|
const [isRouteVisible, setIsRouteVisible] = React.useState(false);
|
|
3559
3569
|
// handles whether route component is animating to show
|
|
3560
3570
|
const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = React.useState(false);
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
const isFirstStep = currentStepIndex === 0;
|
|
3571
|
+
steps[currentStepIndex];
|
|
3572
|
+
currentStepIndex === steps.length - 1;
|
|
3564
3573
|
React.useEffect(() => {
|
|
3565
3574
|
// we do not want to unmount the route component if the animation to show route is running
|
|
3566
3575
|
if (isShowRouteAnimationRunning)
|
|
@@ -3568,45 +3577,51 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3568
3577
|
// unmount route component when the animation of hiding is done
|
|
3569
3578
|
const timeoutId = setTimeout(() => {
|
|
3570
3579
|
setIsRouteVisible(false);
|
|
3571
|
-
}, ANIMATION_DURATIONS.
|
|
3580
|
+
}, ANIMATION_DURATIONS.HIDE_ROUTE);
|
|
3572
3581
|
return () => {
|
|
3573
3582
|
clearTimeout(timeoutId);
|
|
3574
3583
|
};
|
|
3575
3584
|
}, [isShowRouteAnimationRunning]);
|
|
3576
|
-
const
|
|
3577
|
-
|
|
3578
|
-
|
|
3585
|
+
const handleToggleRouteSteps = () => {
|
|
3586
|
+
if (isRouteVisible) {
|
|
3587
|
+
setIsShowRouteAnimationRunning(false);
|
|
3588
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
3589
|
+
}
|
|
3590
|
+
else {
|
|
3591
|
+
setIsRouteVisible(true);
|
|
3592
|
+
setIsShowRouteAnimationRunning(true);
|
|
3593
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
3594
|
+
}
|
|
3579
3595
|
};
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3596
|
+
return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsxRuntime.jsx("div", { style: {
|
|
3597
|
+
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3598
|
+
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3599
|
+
}, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsxRuntime.jsx("div", { style: {
|
|
3600
|
+
zIndex: 20,
|
|
3601
|
+
display: isRouteVisible ? 'none' : 'block',
|
|
3602
|
+
}, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
|
|
3603
|
+
[CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3604
|
+
[CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3605
|
+
}, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
|
|
3606
|
+
? 'tw-animate-expand-route'
|
|
3607
|
+
: 'tw-animate-collapse-route'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-[535px] tw-flex-col tw-gap-squid-xxs", style: {
|
|
3608
|
+
transition: isShowRouteAnimationRunning
|
|
3609
|
+
? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3610
|
+
: isRouteVisible
|
|
3611
|
+
? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3612
|
+
: `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
|
|
3613
|
+
transform: isShowRouteAnimationRunning
|
|
3614
|
+
? 'translateY(0)'
|
|
3615
|
+
: `translateY(-${535 - 50 - (newStepIndex + 1) * 50 - 30}px)`,
|
|
3616
|
+
}, children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { style: {
|
|
3617
|
+
zIndex: isRouteVisible ? 0 : -10,
|
|
3618
|
+
scrollbarWidth: 'none',
|
|
3619
|
+
}, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
|
|
3601
3620
|
? 'pending'
|
|
3602
|
-
:
|
|
3621
|
+
: newStepIndex > index
|
|
3603
3622
|
? 'executed'
|
|
3604
|
-
: 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })
|
|
3623
|
+
: 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-absolute tw-bottom-0 tw-flex tw-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
|
|
3605
3624
|
}
|
|
3606
|
-
const CurrentStep = (_a) => {
|
|
3607
|
-
var { currentStep, isFirstStep, isLastStep, className } = _a, props = __rest(_a, ["currentStep", "isFirstStep", "isLastStep", "className"]);
|
|
3608
|
-
return (jsxRuntime.jsxs("div", Object.assign({}, props, { className: cn('tw-relative tw-z-10 tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-px-squid-xs tw-text-grey-300', className), children: [!isLastStep && (jsxRuntime.jsx("span", { className: "tw-absolute -tw-top-1.5 tw-z-0", children: jsxRuntime.jsx(SwapStepSeparator, {}) })), currentStep && (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent, status: "progress" })), !isFirstStep && (jsxRuntime.jsx("span", { className: "tw-absolute -tw-bottom-1.5 tw-z-0", children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] })));
|
|
3609
|
-
};
|
|
3610
3625
|
|
|
3611
3626
|
function TokenPair({ firstToken, secondToken }) {
|
|
3612
3627
|
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxRuntime.jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsxRuntime.jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxRuntime.jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
|
|
@@ -38655,15 +38670,16 @@ const swapProgressButtonTexts = {
|
|
|
38655
38670
|
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
|
|
38656
38671
|
const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
|
|
38657
38672
|
const isFirstRenderRef = React.useRef(true);
|
|
38658
|
-
React.
|
|
38673
|
+
const handleRouteStepsOpen = React.useCallback(() => {
|
|
38659
38674
|
if (isFirstRenderRef.current) {
|
|
38660
38675
|
isFirstRenderRef.current = false;
|
|
38661
38676
|
}
|
|
38662
|
-
}, []);
|
|
38663
|
-
const handleRouteStepsOpen = React.useCallback(() => {
|
|
38664
38677
|
setShowSwapInfoSection(false);
|
|
38665
38678
|
}, []);
|
|
38666
38679
|
const handleRouteStepsClosed = React.useCallback(() => {
|
|
38680
|
+
if (isFirstRenderRef.current) {
|
|
38681
|
+
isFirstRenderRef.current = false;
|
|
38682
|
+
}
|
|
38667
38683
|
setShowSwapInfoSection(true);
|
|
38668
38684
|
}, []);
|
|
38669
38685
|
const animationProgressState = React.useMemo(() => {
|
|
@@ -38689,13 +38705,15 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
|
|
|
38689
38705
|
}
|
|
38690
38706
|
}, [txStatus]);
|
|
38691
38707
|
return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
|
|
38692
|
-
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.
|
|
38693
|
-
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.
|
|
38708
|
+
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
38709
|
+
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
38694
38710
|
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38695
38711
|
// do not show animation on first render
|
|
38696
|
-
isFirstRenderRef.current
|
|
38697
|
-
? '
|
|
38698
|
-
:
|
|
38712
|
+
isFirstRenderRef.current
|
|
38713
|
+
? ''
|
|
38714
|
+
: showSwapInfoSection
|
|
38715
|
+
? 'tw-animate-scale-and-fade-up'
|
|
38716
|
+
: 'tw-animate-scale-and-fade-down'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
|
|
38699
38717
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38700
38718
|
boxShadow: '0 1px 0 currentColor',
|
|
38701
38719
|
}, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[animationProgressState], hideAnimations: false, animReplacement: jsxRuntime.jsx(Loader, { size: "60" }) }) }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: animationProgressState === 'completed' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(CircleCheckIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", icon: jsxRuntime.jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : animationProgressState === 'error' ||
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const CSS_VARS: {
|
|
2
2
|
MOVE_WITH_SPRING_BOUNCE_DURATION: string;
|
|
3
3
|
DISPLAY_DELAYED_DURATION: string;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
COLLAPSE_ROUTE_DURATION: string;
|
|
5
|
+
EXPAND_ROUTE_DURATION: string;
|
|
6
6
|
FADE_IN_DURATION: string;
|
|
7
7
|
FADE_OUT_DURATION: string;
|
|
8
8
|
SCALE_AND_FADE_UP_DURATION: string;
|
|
@@ -10,7 +10,12 @@ export declare const CSS_VARS: {
|
|
|
10
10
|
TRANSLATE_TOP_OR_BOTTOM: string;
|
|
11
11
|
};
|
|
12
12
|
export declare const ANIMATION_DURATIONS: {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
SHOW_ROUTE: number;
|
|
14
|
+
HIDE_ROUTE: number;
|
|
15
15
|
CHANGE_SWAP_STEP: number;
|
|
16
16
|
};
|
|
17
|
+
export declare const ANIMATION_TIMINGS: {
|
|
18
|
+
EXPAND_ROUTE: string;
|
|
19
|
+
COLLAPSE_ROUTE: string;
|
|
20
|
+
CHANGE_SWAP_STEP: string;
|
|
21
|
+
};
|
package/dist/esm/index.js
CHANGED
|
@@ -2662,10 +2662,11 @@ const roundedClassMap = {
|
|
|
2662
2662
|
md: 'tw-rounded-squid-m',
|
|
2663
2663
|
lg: 'tw-rounded-squid-xxl',
|
|
2664
2664
|
};
|
|
2665
|
+
const buttonBorderClassName = 'tw-border-material-light-thin hover:tw-border-material-light-average';
|
|
2665
2666
|
const buttonVariantClassMap = {
|
|
2666
|
-
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100
|
|
2667
|
-
secondary: 'tw-bg-grey-100 tw-text-grey-800
|
|
2668
|
-
tertiary: 'tw-bg-grey-800 tw-text-grey-300
|
|
2667
|
+
primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100',
|
|
2668
|
+
secondary: 'tw-bg-grey-100 tw-text-grey-800',
|
|
2669
|
+
tertiary: 'tw-bg-grey-800 tw-text-grey-300',
|
|
2669
2670
|
};
|
|
2670
2671
|
// right now all variants have the same disabled styles
|
|
2671
2672
|
// in the future, we can add more disabled styles for different variants
|
|
@@ -2679,7 +2680,7 @@ function Button(_a) {
|
|
|
2679
2680
|
icon) : (
|
|
2680
2681
|
// icon and label
|
|
2681
2682
|
jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
|
|
2682
|
-
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], roundedClassMap[size],
|
|
2683
|
+
const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], buttonBorderClassName, roundedClassMap[size],
|
|
2683
2684
|
// disabled styles
|
|
2684
2685
|
disabled && buttonDisabledClass,
|
|
2685
2686
|
// custom classes from props
|
|
@@ -2832,8 +2833,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2832
2833
|
const CSS_VARS = {
|
|
2833
2834
|
MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
|
|
2834
2835
|
DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
|
|
2835
|
-
|
|
2836
|
-
|
|
2836
|
+
COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
|
|
2837
|
+
EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
|
|
2837
2838
|
FADE_IN_DURATION: '--squid-animation-fade-in-duration',
|
|
2838
2839
|
FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
|
|
2839
2840
|
SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
|
|
@@ -2841,10 +2842,15 @@ const CSS_VARS = {
|
|
|
2841
2842
|
TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
|
|
2842
2843
|
};
|
|
2843
2844
|
const ANIMATION_DURATIONS = {
|
|
2844
|
-
|
|
2845
|
-
|
|
2845
|
+
SHOW_ROUTE: 300,
|
|
2846
|
+
HIDE_ROUTE: 300,
|
|
2846
2847
|
CHANGE_SWAP_STEP: 300,
|
|
2847
2848
|
};
|
|
2849
|
+
const ANIMATION_TIMINGS = {
|
|
2850
|
+
EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2851
|
+
COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2852
|
+
CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
|
|
2853
|
+
};
|
|
2848
2854
|
|
|
2849
2855
|
function SearchIcon() {
|
|
2850
2856
|
return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
@@ -3402,9 +3408,13 @@ const separatorClassMap = {
|
|
|
3402
3408
|
progress: 'tw-text-grey-600',
|
|
3403
3409
|
pending: 'tw-text-grey-600',
|
|
3404
3410
|
};
|
|
3405
|
-
const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
|
|
3406
3411
|
function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
|
|
3407
|
-
|
|
3412
|
+
// these styles are located here instead of outside the component
|
|
3413
|
+
// so they are updated whenever the animation duration changes
|
|
3414
|
+
const transitionStyle = {
|
|
3415
|
+
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3416
|
+
};
|
|
3417
|
+
return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsx(SwapStepSeparator, {}) })), jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: status === 'pending' ? null : status === 'executed' ? (jsx(Checkmark1Icon, {})) : typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
|
|
3408
3418
|
if (type === 'string') {
|
|
3409
3419
|
return (
|
|
3410
3420
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3538,9 +3548,8 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3538
3548
|
const [isRouteVisible, setIsRouteVisible] = useState(false);
|
|
3539
3549
|
// handles whether route component is animating to show
|
|
3540
3550
|
const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = useState(false);
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
const isFirstStep = currentStepIndex === 0;
|
|
3551
|
+
steps[currentStepIndex];
|
|
3552
|
+
currentStepIndex === steps.length - 1;
|
|
3544
3553
|
useEffect(() => {
|
|
3545
3554
|
// we do not want to unmount the route component if the animation to show route is running
|
|
3546
3555
|
if (isShowRouteAnimationRunning)
|
|
@@ -3548,45 +3557,51 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3548
3557
|
// unmount route component when the animation of hiding is done
|
|
3549
3558
|
const timeoutId = setTimeout(() => {
|
|
3550
3559
|
setIsRouteVisible(false);
|
|
3551
|
-
}, ANIMATION_DURATIONS.
|
|
3560
|
+
}, ANIMATION_DURATIONS.HIDE_ROUTE);
|
|
3552
3561
|
return () => {
|
|
3553
3562
|
clearTimeout(timeoutId);
|
|
3554
3563
|
};
|
|
3555
3564
|
}, [isShowRouteAnimationRunning]);
|
|
3556
|
-
const
|
|
3557
|
-
|
|
3558
|
-
|
|
3565
|
+
const handleToggleRouteSteps = () => {
|
|
3566
|
+
if (isRouteVisible) {
|
|
3567
|
+
setIsShowRouteAnimationRunning(false);
|
|
3568
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
3569
|
+
}
|
|
3570
|
+
else {
|
|
3571
|
+
setIsRouteVisible(true);
|
|
3572
|
+
setIsShowRouteAnimationRunning(true);
|
|
3573
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
3574
|
+
}
|
|
3559
3575
|
};
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3576
|
+
return (jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: [!isRouteVisible && (jsxs(Fragment, { children: [jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsx("div", { style: {
|
|
3577
|
+
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3578
|
+
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3579
|
+
}, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsx("div", { style: {
|
|
3580
|
+
zIndex: 20,
|
|
3581
|
+
display: isRouteVisible ? 'none' : 'block',
|
|
3582
|
+
}, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
|
|
3583
|
+
[CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3584
|
+
[CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3585
|
+
}, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
|
|
3586
|
+
? 'tw-animate-expand-route'
|
|
3587
|
+
: 'tw-animate-collapse-route'), children: jsxs("div", { className: "tw-flex tw-h-[535px] tw-flex-col tw-gap-squid-xxs", style: {
|
|
3588
|
+
transition: isShowRouteAnimationRunning
|
|
3589
|
+
? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3590
|
+
: isRouteVisible
|
|
3591
|
+
? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3592
|
+
: `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
|
|
3593
|
+
transform: isShowRouteAnimationRunning
|
|
3594
|
+
? 'translateY(0)'
|
|
3595
|
+
: `translateY(-${535 - 50 - (newStepIndex + 1) * 50 - 30}px)`,
|
|
3596
|
+
}, children: [jsx("div", { className: cn('tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { style: {
|
|
3597
|
+
zIndex: isRouteVisible ? 0 : -10,
|
|
3598
|
+
scrollbarWidth: 'none',
|
|
3599
|
+
}, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
|
|
3581
3600
|
? 'pending'
|
|
3582
|
-
:
|
|
3601
|
+
: newStepIndex > index
|
|
3583
3602
|
? 'executed'
|
|
3584
|
-
: 'progress' }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })
|
|
3603
|
+
: 'progress' }, index))) }), jsx("footer", { className: "tw-absolute tw-bottom-0 tw-flex tw-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
|
|
3585
3604
|
}
|
|
3586
|
-
const CurrentStep = (_a) => {
|
|
3587
|
-
var { currentStep, isFirstStep, isLastStep, className } = _a, props = __rest(_a, ["currentStep", "isFirstStep", "isLastStep", "className"]);
|
|
3588
|
-
return (jsxs("div", Object.assign({}, props, { className: cn('tw-relative tw-z-10 tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-px-squid-xs tw-text-grey-300', className), children: [!isLastStep && (jsx("span", { className: "tw-absolute -tw-top-1.5 tw-z-0", children: jsx(SwapStepSeparator, {}) })), currentStep && (jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent, status: "progress" })), !isFirstStep && (jsx("span", { className: "tw-absolute -tw-bottom-1.5 tw-z-0", children: jsx(SwapStepSeparator, {}) }))] })));
|
|
3589
|
-
};
|
|
3590
3605
|
|
|
3591
3606
|
function TokenPair({ firstToken, secondToken }) {
|
|
3592
3607
|
return (jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
|
|
@@ -38635,15 +38650,16 @@ const swapProgressButtonTexts = {
|
|
|
38635
38650
|
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
|
|
38636
38651
|
const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
|
|
38637
38652
|
const isFirstRenderRef = useRef(true);
|
|
38638
|
-
|
|
38653
|
+
const handleRouteStepsOpen = useCallback(() => {
|
|
38639
38654
|
if (isFirstRenderRef.current) {
|
|
38640
38655
|
isFirstRenderRef.current = false;
|
|
38641
38656
|
}
|
|
38642
|
-
}, []);
|
|
38643
|
-
const handleRouteStepsOpen = useCallback(() => {
|
|
38644
38657
|
setShowSwapInfoSection(false);
|
|
38645
38658
|
}, []);
|
|
38646
38659
|
const handleRouteStepsClosed = useCallback(() => {
|
|
38660
|
+
if (isFirstRenderRef.current) {
|
|
38661
|
+
isFirstRenderRef.current = false;
|
|
38662
|
+
}
|
|
38647
38663
|
setShowSwapInfoSection(true);
|
|
38648
38664
|
}, []);
|
|
38649
38665
|
const animationProgressState = useMemo(() => {
|
|
@@ -38669,13 +38685,15 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
|
|
|
38669
38685
|
}
|
|
38670
38686
|
}, [txStatus]);
|
|
38671
38687
|
return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxs(ModalContent, { style: {
|
|
38672
|
-
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.
|
|
38673
|
-
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.
|
|
38688
|
+
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
38689
|
+
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
38674
38690
|
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38675
38691
|
// do not show animation on first render
|
|
38676
|
-
isFirstRenderRef.current
|
|
38677
|
-
? '
|
|
38678
|
-
:
|
|
38692
|
+
isFirstRenderRef.current
|
|
38693
|
+
? ''
|
|
38694
|
+
: showSwapInfoSection
|
|
38695
|
+
? 'tw-animate-scale-and-fade-up'
|
|
38696
|
+
: 'tw-animate-scale-and-fade-down'), children: [jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
|
|
38679
38697
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38680
38698
|
boxShadow: '0 1px 0 currentColor',
|
|
38681
38699
|
}, children: jsx("div", { children: jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[animationProgressState], hideAnimations: false, animReplacement: jsx(Loader, { size: "60" }) }) }) }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: animationProgressState === 'completed' ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(CircleCheckIcon, {}) }), jsx(Button, { size: "md", variant: "secondary", icon: jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : animationProgressState === 'error' ||
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const CSS_VARS: {
|
|
2
2
|
MOVE_WITH_SPRING_BOUNCE_DURATION: string;
|
|
3
3
|
DISPLAY_DELAYED_DURATION: string;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
COLLAPSE_ROUTE_DURATION: string;
|
|
5
|
+
EXPAND_ROUTE_DURATION: string;
|
|
6
6
|
FADE_IN_DURATION: string;
|
|
7
7
|
FADE_OUT_DURATION: string;
|
|
8
8
|
SCALE_AND_FADE_UP_DURATION: string;
|
|
@@ -10,7 +10,12 @@ export declare const CSS_VARS: {
|
|
|
10
10
|
TRANSLATE_TOP_OR_BOTTOM: string;
|
|
11
11
|
};
|
|
12
12
|
export declare const ANIMATION_DURATIONS: {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
SHOW_ROUTE: number;
|
|
14
|
+
HIDE_ROUTE: number;
|
|
15
15
|
CHANGE_SWAP_STEP: number;
|
|
16
16
|
};
|
|
17
|
+
export declare const ANIMATION_TIMINGS: {
|
|
18
|
+
EXPAND_ROUTE: string;
|
|
19
|
+
COLLAPSE_ROUTE: string;
|
|
20
|
+
CHANGE_SWAP_STEP: string;
|
|
21
|
+
};
|
package/dist/index.css
CHANGED
|
@@ -633,10 +633,6 @@ video {
|
|
|
633
633
|
top: -55px;
|
|
634
634
|
}
|
|
635
635
|
|
|
636
|
-
.-tw-top-full {
|
|
637
|
-
top: -100%;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
636
|
.tw-bottom-0 {
|
|
641
637
|
bottom: 0px;
|
|
642
638
|
}
|
|
@@ -753,8 +749,8 @@ video {
|
|
|
753
749
|
top: 1.75rem;
|
|
754
750
|
}
|
|
755
751
|
|
|
756
|
-
.tw-top
|
|
757
|
-
top:
|
|
752
|
+
.tw-top-\[52px\] {
|
|
753
|
+
top: 52px;
|
|
758
754
|
}
|
|
759
755
|
|
|
760
756
|
.tw-top-squid-xxs {
|
|
@@ -952,6 +948,10 @@ video {
|
|
|
952
948
|
height: 52px;
|
|
953
949
|
}
|
|
954
950
|
|
|
951
|
+
.tw-h-\[535px\] {
|
|
952
|
+
height: 535px;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
955
|
.tw-h-\[536px\] {
|
|
956
956
|
height: 536px;
|
|
957
957
|
}
|
|
@@ -984,11 +984,6 @@ video {
|
|
|
984
984
|
height: 680px;
|
|
985
985
|
}
|
|
986
986
|
|
|
987
|
-
.tw-h-fit {
|
|
988
|
-
height: -moz-fit-content;
|
|
989
|
-
height: fit-content;
|
|
990
|
-
}
|
|
991
|
-
|
|
992
987
|
.tw-h-full {
|
|
993
988
|
height: 100%;
|
|
994
989
|
}
|
|
@@ -1029,12 +1024,12 @@ video {
|
|
|
1029
1024
|
max-height: 205px;
|
|
1030
1025
|
}
|
|
1031
1026
|
|
|
1032
|
-
.tw-max-h-\[
|
|
1033
|
-
max-height:
|
|
1027
|
+
.tw-max-h-\[413px\] {
|
|
1028
|
+
max-height: 413px;
|
|
1034
1029
|
}
|
|
1035
1030
|
|
|
1036
|
-
.tw-max-h-\[
|
|
1037
|
-
max-height:
|
|
1031
|
+
.tw-max-h-\[535px\] {
|
|
1032
|
+
max-height: 535px;
|
|
1038
1033
|
}
|
|
1039
1034
|
|
|
1040
1035
|
.tw-max-h-\[540px\] {
|
|
@@ -1053,11 +1048,6 @@ video {
|
|
|
1053
1048
|
max-height: 80px;
|
|
1054
1049
|
}
|
|
1055
1050
|
|
|
1056
|
-
.tw-max-h-fit {
|
|
1057
|
-
max-height: -moz-fit-content;
|
|
1058
|
-
max-height: fit-content;
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
1051
|
.tw-max-h-list-item-small {
|
|
1062
1052
|
max-height: 2.5rem;
|
|
1063
1053
|
}
|
|
@@ -1305,6 +1295,10 @@ video {
|
|
|
1305
1295
|
min-width: 30px;
|
|
1306
1296
|
}
|
|
1307
1297
|
|
|
1298
|
+
.tw-min-w-\[400px\] {
|
|
1299
|
+
min-width: 400px;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1308
1302
|
.tw-min-w-\[60px\] {
|
|
1309
1303
|
min-width: 60px;
|
|
1310
1304
|
}
|
|
@@ -1432,64 +1426,32 @@ video {
|
|
|
1432
1426
|
animation: tw-blur-out 0.2s ease-out both;
|
|
1433
1427
|
}
|
|
1434
1428
|
|
|
1435
|
-
@keyframes tw-collapse-
|
|
1429
|
+
@keyframes tw-collapse-route {
|
|
1436
1430
|
0% {
|
|
1437
1431
|
height: 100%;
|
|
1438
|
-
opacity: 1;
|
|
1439
1432
|
}
|
|
1440
1433
|
|
|
1441
1434
|
100% {
|
|
1442
1435
|
height: 60px;
|
|
1443
|
-
opacity: 0;
|
|
1444
1436
|
}
|
|
1445
1437
|
}
|
|
1446
1438
|
|
|
1447
|
-
.tw-animate-collapse-
|
|
1448
|
-
animation: tw-collapse-
|
|
1439
|
+
.tw-animate-collapse-route {
|
|
1440
|
+
animation: tw-collapse-route var(--squid-animation-collapse-to-bottom-duration, 0s) linear both;
|
|
1449
1441
|
}
|
|
1450
1442
|
|
|
1451
|
-
@keyframes tw-expand-
|
|
1443
|
+
@keyframes tw-expand-route {
|
|
1452
1444
|
0% {
|
|
1453
1445
|
height: 60px;
|
|
1454
|
-
opacity: 0;
|
|
1455
1446
|
}
|
|
1456
1447
|
|
|
1457
1448
|
100% {
|
|
1458
1449
|
height: 100%;
|
|
1459
|
-
opacity: 1;
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
|
|
1463
|
-
.tw-animate-expand-to-top {
|
|
1464
|
-
animation: tw-expand-to-top var(--squid-animation-expand-to-top-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
|
|
1465
|
-
}
|
|
1466
|
-
|
|
1467
|
-
@keyframes tw-fade-in {
|
|
1468
|
-
0% {
|
|
1469
|
-
opacity: 0;
|
|
1470
|
-
}
|
|
1471
|
-
|
|
1472
|
-
100% {
|
|
1473
|
-
opacity: 1;
|
|
1474
1450
|
}
|
|
1475
1451
|
}
|
|
1476
1452
|
|
|
1477
|
-
.tw-animate-
|
|
1478
|
-
animation: tw-
|
|
1479
|
-
}
|
|
1480
|
-
|
|
1481
|
-
@keyframes tw-fade-out {
|
|
1482
|
-
0% {
|
|
1483
|
-
opacity: 1;
|
|
1484
|
-
}
|
|
1485
|
-
|
|
1486
|
-
100% {
|
|
1487
|
-
opacity: 0;
|
|
1488
|
-
}
|
|
1489
|
-
}
|
|
1490
|
-
|
|
1491
|
-
.tw-animate-fade-out {
|
|
1492
|
-
animation: tw-fade-out var(--squid-animation-fade-out-duration, 0s) ease-out both;
|
|
1453
|
+
.tw-animate-expand-route {
|
|
1454
|
+
animation: tw-expand-route var(--squid-animation-expand-to-top-duration, 0s) linear both;
|
|
1493
1455
|
}
|
|
1494
1456
|
|
|
1495
1457
|
@keyframes tw-hide {
|
|
@@ -1553,7 +1515,7 @@ video {
|
|
|
1553
1515
|
}
|
|
1554
1516
|
|
|
1555
1517
|
.tw-animate-scale-and-fade-down {
|
|
1556
|
-
animation: tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration, 0s)
|
|
1518
|
+
animation: tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration, 0s) linear both;
|
|
1557
1519
|
}
|
|
1558
1520
|
|
|
1559
1521
|
@keyframes tw-scale-and-fade-up {
|
|
@@ -1569,7 +1531,7 @@ video {
|
|
|
1569
1531
|
}
|
|
1570
1532
|
|
|
1571
1533
|
.tw-animate-scale-and-fade-up {
|
|
1572
|
-
animation: tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration, 0s)
|
|
1534
|
+
animation: tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration, 0s) linear both;
|
|
1573
1535
|
}
|
|
1574
1536
|
|
|
1575
1537
|
@keyframes tw-slide-to-bottom {
|
|
@@ -1604,34 +1566,6 @@ video {
|
|
|
1604
1566
|
animation: tw-slide-to-top 0.35s ease-out both;
|
|
1605
1567
|
}
|
|
1606
1568
|
|
|
1607
|
-
@keyframes tw-translate-to-bottom {
|
|
1608
|
-
0% {
|
|
1609
|
-
transform: translateY(0);
|
|
1610
|
-
}
|
|
1611
|
-
|
|
1612
|
-
100% {
|
|
1613
|
-
transform: translateY(100%);
|
|
1614
|
-
}
|
|
1615
|
-
}
|
|
1616
|
-
|
|
1617
|
-
.tw-animate-translate-to-bottom {
|
|
1618
|
-
animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s) cubic-bezier(.165,.84,.44,1) both;
|
|
1619
|
-
}
|
|
1620
|
-
|
|
1621
|
-
@keyframes tw-translate-to-top {
|
|
1622
|
-
0% {
|
|
1623
|
-
transform: translateY(0);
|
|
1624
|
-
}
|
|
1625
|
-
|
|
1626
|
-
100% {
|
|
1627
|
-
transform: translateY(-100%);
|
|
1628
|
-
}
|
|
1629
|
-
}
|
|
1630
|
-
|
|
1631
|
-
.tw-animate-translate-to-top {
|
|
1632
|
-
animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s) cubic-bezier(.165,.84,.44,1) both;
|
|
1633
|
-
}
|
|
1634
|
-
|
|
1635
1569
|
.tw-cursor-help {
|
|
1636
1570
|
cursor: help;
|
|
1637
1571
|
}
|
|
@@ -2177,6 +2111,11 @@ video {
|
|
|
2177
2111
|
padding-bottom: 0.5rem;
|
|
2178
2112
|
}
|
|
2179
2113
|
|
|
2114
|
+
.tw-py-\[15px\] {
|
|
2115
|
+
padding-top: 15px;
|
|
2116
|
+
padding-bottom: 15px;
|
|
2117
|
+
}
|
|
2118
|
+
|
|
2180
2119
|
.tw-py-squid-s {
|
|
2181
2120
|
padding-top: 0.9375rem;
|
|
2182
2121
|
padding-bottom: 0.9375rem;
|
|
@@ -2666,8 +2605,8 @@ video {
|
|
|
2666
2605
|
transition-duration: 150ms;
|
|
2667
2606
|
}
|
|
2668
2607
|
|
|
2669
|
-
.tw-duration-
|
|
2670
|
-
transition-duration:
|
|
2608
|
+
.tw-duration-1000 {
|
|
2609
|
+
transition-duration: 1000ms;
|
|
2671
2610
|
}
|
|
2672
2611
|
|
|
2673
2612
|
.tw-duration-150 {
|
|
@@ -2802,8 +2741,8 @@ input[type='number'] {
|
|
|
2802
2741
|
animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
|
|
2803
2742
|
}
|
|
2804
2743
|
|
|
2805
|
-
.hover\:tw-
|
|
2806
|
-
|
|
2744
|
+
.hover\:tw-border-material-light-average:hover {
|
|
2745
|
+
border-color: var(--squid-theme-material-light-average);
|
|
2807
2746
|
}
|
|
2808
2747
|
|
|
2809
2748
|
.hover\:tw-bg-material-light-thin:hover {
|