@0xsquid/ui 0.13.3 → 0.13.5
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 +67 -48
- package/dist/cjs/types/components/views/SwapProgressView.d.ts +1 -2
- package/dist/cjs/types/core/constants.d.ts +9 -4
- package/dist/esm/index.js +67 -48
- package/dist/esm/types/components/views/SwapProgressView.d.ts +1 -2
- package/dist/esm/types/core/constants.d.ts +9 -4
- package/dist/index.css +26 -32
- package/dist/index.d.ts +1 -2
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2852,8 +2852,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2852
2852
|
const CSS_VARS = {
|
|
2853
2853
|
MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
|
|
2854
2854
|
DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
|
|
2855
|
-
|
|
2856
|
-
|
|
2855
|
+
COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
|
|
2856
|
+
EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
|
|
2857
2857
|
FADE_IN_DURATION: '--squid-animation-fade-in-duration',
|
|
2858
2858
|
FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
|
|
2859
2859
|
SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
|
|
@@ -2861,10 +2861,15 @@ const CSS_VARS = {
|
|
|
2861
2861
|
TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
|
|
2862
2862
|
};
|
|
2863
2863
|
const ANIMATION_DURATIONS = {
|
|
2864
|
-
|
|
2865
|
-
|
|
2864
|
+
SHOW_ROUTE: 300,
|
|
2865
|
+
HIDE_ROUTE: 300,
|
|
2866
2866
|
CHANGE_SWAP_STEP: 300,
|
|
2867
2867
|
};
|
|
2868
|
+
const ANIMATION_TIMINGS = {
|
|
2869
|
+
EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2870
|
+
COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2871
|
+
CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
|
|
2872
|
+
};
|
|
2868
2873
|
|
|
2869
2874
|
function SearchIcon() {
|
|
2870
2875
|
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 +3427,13 @@ const separatorClassMap = {
|
|
|
3422
3427
|
progress: 'tw-text-grey-600',
|
|
3423
3428
|
pending: 'tw-text-grey-600',
|
|
3424
3429
|
};
|
|
3425
|
-
const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
|
|
3426
3430
|
function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
|
|
3427
|
-
|
|
3431
|
+
// these styles are located here instead of outside the component
|
|
3432
|
+
// so they are updated whenever the animation duration changes
|
|
3433
|
+
const transitionStyle = {
|
|
3434
|
+
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3435
|
+
};
|
|
3436
|
+
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
3437
|
if (type === 'string') {
|
|
3429
3438
|
return (
|
|
3430
3439
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3558,9 +3567,8 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3558
3567
|
const [isRouteVisible, setIsRouteVisible] = React.useState(false);
|
|
3559
3568
|
// handles whether route component is animating to show
|
|
3560
3569
|
const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = React.useState(false);
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
const isFirstStep = currentStepIndex === 0;
|
|
3570
|
+
steps[currentStepIndex];
|
|
3571
|
+
currentStepIndex === steps.length - 1;
|
|
3564
3572
|
React.useEffect(() => {
|
|
3565
3573
|
// we do not want to unmount the route component if the animation to show route is running
|
|
3566
3574
|
if (isShowRouteAnimationRunning)
|
|
@@ -3568,45 +3576,45 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3568
3576
|
// unmount route component when the animation of hiding is done
|
|
3569
3577
|
const timeoutId = setTimeout(() => {
|
|
3570
3578
|
setIsRouteVisible(false);
|
|
3571
|
-
}, ANIMATION_DURATIONS.
|
|
3579
|
+
}, ANIMATION_DURATIONS.HIDE_ROUTE);
|
|
3572
3580
|
return () => {
|
|
3573
3581
|
clearTimeout(timeoutId);
|
|
3574
3582
|
};
|
|
3575
3583
|
}, [isShowRouteAnimationRunning]);
|
|
3576
|
-
const
|
|
3577
|
-
|
|
3578
|
-
|
|
3584
|
+
const handleToggleRouteSteps = () => {
|
|
3585
|
+
if (isRouteVisible) {
|
|
3586
|
+
setIsShowRouteAnimationRunning(false);
|
|
3587
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
3588
|
+
}
|
|
3589
|
+
else {
|
|
3590
|
+
setIsRouteVisible(true);
|
|
3591
|
+
setIsShowRouteAnimationRunning(true);
|
|
3592
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
3593
|
+
}
|
|
3579
3594
|
};
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
: 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: handleCloseRouteSteps, 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", { className: "tw-flex tw-max-h-fit 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", style: {
|
|
3599
|
-
scrollbarGutter: 'stable',
|
|
3600
|
-
}, children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
|
|
3595
|
+
return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-w-[400px]", children: jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-20 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-[536px]' : 'tw-h-[60px]'), children: [jsxRuntime.jsx("div", { style: {
|
|
3596
|
+
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3597
|
+
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3598
|
+
}, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
|
|
3599
|
+
[CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3600
|
+
[CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3601
|
+
}, className: cn('tw-h-[60px] tw-max-h-[536px] 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
|
|
3602
|
+
? 'tw-animate-expand-route'
|
|
3603
|
+
: 'tw-animate-collapse-route'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", style: {
|
|
3604
|
+
transition: isShowRouteAnimationRunning
|
|
3605
|
+
? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3606
|
+
: isRouteVisible
|
|
3607
|
+
? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3608
|
+
: `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
|
|
3609
|
+
transform: isShowRouteAnimationRunning
|
|
3610
|
+
? 'translateY(0)'
|
|
3611
|
+
: `translateY(-${536 - 50 - (newStepIndex + 1) * 50 - 20}px)`,
|
|
3612
|
+
}, children: [jsxRuntime.jsx("div", { className: cn('tw-bg-red- 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", { className: "tw-relative tw-flex tw-min-h-[460px] 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", 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
3613
|
? 'pending'
|
|
3602
|
-
:
|
|
3614
|
+
: newStepIndex > index
|
|
3603
3615
|
? '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" }) })] })
|
|
3616
|
+
: '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" }) })] }) })] }) }));
|
|
3605
3617
|
}
|
|
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
3618
|
|
|
3611
3619
|
function TokenPair({ firstToken, secondToken }) {
|
|
3612
3620
|
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: {
|
|
@@ -38652,12 +38660,19 @@ const swapProgressButtonTexts = {
|
|
|
38652
38660
|
partialSuccess: 'Ok, done',
|
|
38653
38661
|
needsGas: 'Go to Axelarscan',
|
|
38654
38662
|
};
|
|
38655
|
-
function SwapProgressView({ steps,
|
|
38663
|
+
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
|
|
38656
38664
|
const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
|
|
38665
|
+
const isFirstRenderRef = React.useRef(true);
|
|
38657
38666
|
const handleRouteStepsOpen = React.useCallback(() => {
|
|
38667
|
+
if (isFirstRenderRef.current) {
|
|
38668
|
+
isFirstRenderRef.current = false;
|
|
38669
|
+
}
|
|
38658
38670
|
setShowSwapInfoSection(false);
|
|
38659
38671
|
}, []);
|
|
38660
38672
|
const handleRouteStepsClosed = React.useCallback(() => {
|
|
38673
|
+
if (isFirstRenderRef.current) {
|
|
38674
|
+
isFirstRenderRef.current = false;
|
|
38675
|
+
}
|
|
38661
38676
|
setShowSwapInfoSection(true);
|
|
38662
38677
|
}, []);
|
|
38663
38678
|
const animationProgressState = React.useMemo(() => {
|
|
@@ -38681,13 +38696,17 @@ function SwapProgressView({ steps, currentStepIndex, isOpen = true, handleClose,
|
|
|
38681
38696
|
default:
|
|
38682
38697
|
return 'confirm';
|
|
38683
38698
|
}
|
|
38684
|
-
}, [
|
|
38685
|
-
return (jsxRuntime.jsxs(Modal, {
|
|
38686
|
-
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.
|
|
38687
|
-
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.
|
|
38688
|
-
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38689
|
-
|
|
38690
|
-
|
|
38699
|
+
}, [txStatus]);
|
|
38700
|
+
return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
|
|
38701
|
+
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
38702
|
+
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
38703
|
+
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38704
|
+
// do not show animation on first render
|
|
38705
|
+
isFirstRenderRef.current
|
|
38706
|
+
? ''
|
|
38707
|
+
: showSwapInfoSection
|
|
38708
|
+
? 'tw-animate-scale-and-fade-up'
|
|
38709
|
+
: '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: {
|
|
38691
38710
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38692
38711
|
boxShadow: '0 1px 0 currentColor',
|
|
38693
38712
|
}, 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' ||
|
|
@@ -9,9 +9,8 @@ type Token = {
|
|
|
9
9
|
logoUrl: string;
|
|
10
10
|
bgColor: string;
|
|
11
11
|
};
|
|
12
|
-
export declare function SwapProgressView({ steps,
|
|
12
|
+
export declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
|
|
13
13
|
steps: SwapStep[];
|
|
14
|
-
currentStepIndex: number;
|
|
15
14
|
handleClose?: () => void;
|
|
16
15
|
isOpen?: boolean;
|
|
17
16
|
socialLink?: string;
|
|
@@ -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
|
@@ -2832,8 +2832,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2832
2832
|
const CSS_VARS = {
|
|
2833
2833
|
MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
|
|
2834
2834
|
DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
|
|
2835
|
-
|
|
2836
|
-
|
|
2835
|
+
COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
|
|
2836
|
+
EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
|
|
2837
2837
|
FADE_IN_DURATION: '--squid-animation-fade-in-duration',
|
|
2838
2838
|
FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
|
|
2839
2839
|
SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
|
|
@@ -2841,10 +2841,15 @@ const CSS_VARS = {
|
|
|
2841
2841
|
TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
|
|
2842
2842
|
};
|
|
2843
2843
|
const ANIMATION_DURATIONS = {
|
|
2844
|
-
|
|
2845
|
-
|
|
2844
|
+
SHOW_ROUTE: 300,
|
|
2845
|
+
HIDE_ROUTE: 300,
|
|
2846
2846
|
CHANGE_SWAP_STEP: 300,
|
|
2847
2847
|
};
|
|
2848
|
+
const ANIMATION_TIMINGS = {
|
|
2849
|
+
EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2850
|
+
COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2851
|
+
CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
|
|
2852
|
+
};
|
|
2848
2853
|
|
|
2849
2854
|
function SearchIcon() {
|
|
2850
2855
|
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 +3407,13 @@ const separatorClassMap = {
|
|
|
3402
3407
|
progress: 'tw-text-grey-600',
|
|
3403
3408
|
pending: 'tw-text-grey-600',
|
|
3404
3409
|
};
|
|
3405
|
-
const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
|
|
3406
3410
|
function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
|
|
3407
|
-
|
|
3411
|
+
// these styles are located here instead of outside the component
|
|
3412
|
+
// so they are updated whenever the animation duration changes
|
|
3413
|
+
const transitionStyle = {
|
|
3414
|
+
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3415
|
+
};
|
|
3416
|
+
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
3417
|
if (type === 'string') {
|
|
3409
3418
|
return (
|
|
3410
3419
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3538,9 +3547,8 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3538
3547
|
const [isRouteVisible, setIsRouteVisible] = useState(false);
|
|
3539
3548
|
// handles whether route component is animating to show
|
|
3540
3549
|
const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = useState(false);
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
const isFirstStep = currentStepIndex === 0;
|
|
3550
|
+
steps[currentStepIndex];
|
|
3551
|
+
currentStepIndex === steps.length - 1;
|
|
3544
3552
|
useEffect(() => {
|
|
3545
3553
|
// we do not want to unmount the route component if the animation to show route is running
|
|
3546
3554
|
if (isShowRouteAnimationRunning)
|
|
@@ -3548,45 +3556,45 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3548
3556
|
// unmount route component when the animation of hiding is done
|
|
3549
3557
|
const timeoutId = setTimeout(() => {
|
|
3550
3558
|
setIsRouteVisible(false);
|
|
3551
|
-
}, ANIMATION_DURATIONS.
|
|
3559
|
+
}, ANIMATION_DURATIONS.HIDE_ROUTE);
|
|
3552
3560
|
return () => {
|
|
3553
3561
|
clearTimeout(timeoutId);
|
|
3554
3562
|
};
|
|
3555
3563
|
}, [isShowRouteAnimationRunning]);
|
|
3556
|
-
const
|
|
3557
|
-
|
|
3558
|
-
|
|
3564
|
+
const handleToggleRouteSteps = () => {
|
|
3565
|
+
if (isRouteVisible) {
|
|
3566
|
+
setIsShowRouteAnimationRunning(false);
|
|
3567
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
3568
|
+
}
|
|
3569
|
+
else {
|
|
3570
|
+
setIsRouteVisible(true);
|
|
3571
|
+
setIsShowRouteAnimationRunning(true);
|
|
3572
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
3573
|
+
}
|
|
3559
3574
|
};
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
: 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: handleCloseRouteSteps, 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", { className: "tw-flex tw-max-h-fit 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", style: {
|
|
3579
|
-
scrollbarGutter: 'stable',
|
|
3580
|
-
}, children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
|
|
3575
|
+
return (jsx("div", { className: "tw-relative tw-h-[60px] tw-w-[400px]", children: jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-20 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-[536px]' : 'tw-h-[60px]'), children: [jsx("div", { style: {
|
|
3576
|
+
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3577
|
+
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3578
|
+
}, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
|
|
3579
|
+
[CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3580
|
+
[CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3581
|
+
}, className: cn('tw-h-[60px] tw-max-h-[536px] 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
|
|
3582
|
+
? 'tw-animate-expand-route'
|
|
3583
|
+
: 'tw-animate-collapse-route'), children: jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", style: {
|
|
3584
|
+
transition: isShowRouteAnimationRunning
|
|
3585
|
+
? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3586
|
+
: isRouteVisible
|
|
3587
|
+
? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3588
|
+
: `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
|
|
3589
|
+
transform: isShowRouteAnimationRunning
|
|
3590
|
+
? 'translateY(0)'
|
|
3591
|
+
: `translateY(-${536 - 50 - (newStepIndex + 1) * 50 - 20}px)`,
|
|
3592
|
+
}, children: [jsx("div", { className: cn('tw-bg-red- 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", { className: "tw-relative tw-flex tw-min-h-[460px] 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", 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
3593
|
? 'pending'
|
|
3582
|
-
:
|
|
3594
|
+
: newStepIndex > index
|
|
3583
3595
|
? '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" }) })] })
|
|
3596
|
+
: '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" }) })] }) })] }) }));
|
|
3585
3597
|
}
|
|
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
3598
|
|
|
3591
3599
|
function TokenPair({ firstToken, secondToken }) {
|
|
3592
3600
|
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: {
|
|
@@ -38632,12 +38640,19 @@ const swapProgressButtonTexts = {
|
|
|
38632
38640
|
partialSuccess: 'Ok, done',
|
|
38633
38641
|
needsGas: 'Go to Axelarscan',
|
|
38634
38642
|
};
|
|
38635
|
-
function SwapProgressView({ steps,
|
|
38643
|
+
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
|
|
38636
38644
|
const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
|
|
38645
|
+
const isFirstRenderRef = useRef(true);
|
|
38637
38646
|
const handleRouteStepsOpen = useCallback(() => {
|
|
38647
|
+
if (isFirstRenderRef.current) {
|
|
38648
|
+
isFirstRenderRef.current = false;
|
|
38649
|
+
}
|
|
38638
38650
|
setShowSwapInfoSection(false);
|
|
38639
38651
|
}, []);
|
|
38640
38652
|
const handleRouteStepsClosed = useCallback(() => {
|
|
38653
|
+
if (isFirstRenderRef.current) {
|
|
38654
|
+
isFirstRenderRef.current = false;
|
|
38655
|
+
}
|
|
38641
38656
|
setShowSwapInfoSection(true);
|
|
38642
38657
|
}, []);
|
|
38643
38658
|
const animationProgressState = useMemo(() => {
|
|
@@ -38661,13 +38676,17 @@ function SwapProgressView({ steps, currentStepIndex, isOpen = true, handleClose,
|
|
|
38661
38676
|
default:
|
|
38662
38677
|
return 'confirm';
|
|
38663
38678
|
}
|
|
38664
|
-
}, [
|
|
38665
|
-
return (jsxs(Modal, {
|
|
38666
|
-
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.
|
|
38667
|
-
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.
|
|
38668
|
-
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38669
|
-
|
|
38670
|
-
|
|
38679
|
+
}, [txStatus]);
|
|
38680
|
+
return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxs(ModalContent, { style: {
|
|
38681
|
+
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
38682
|
+
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
38683
|
+
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38684
|
+
// do not show animation on first render
|
|
38685
|
+
isFirstRenderRef.current
|
|
38686
|
+
? ''
|
|
38687
|
+
: showSwapInfoSection
|
|
38688
|
+
? 'tw-animate-scale-and-fade-up'
|
|
38689
|
+
: '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: {
|
|
38671
38690
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38672
38691
|
boxShadow: '0 1px 0 currentColor',
|
|
38673
38692
|
}, 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' ||
|
|
@@ -9,9 +9,8 @@ type Token = {
|
|
|
9
9
|
logoUrl: string;
|
|
10
10
|
bgColor: string;
|
|
11
11
|
};
|
|
12
|
-
export declare function SwapProgressView({ steps,
|
|
12
|
+
export declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
|
|
13
13
|
steps: SwapStep[];
|
|
14
|
-
currentStepIndex: number;
|
|
15
14
|
handleClose?: () => void;
|
|
16
15
|
isOpen?: boolean;
|
|
17
16
|
socialLink?: string;
|
|
@@ -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
|
@@ -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
|
}
|
|
@@ -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
|
}
|
|
@@ -1078,6 +1068,10 @@ video {
|
|
|
1078
1068
|
min-height: 30px;
|
|
1079
1069
|
}
|
|
1080
1070
|
|
|
1071
|
+
.tw-min-h-\[460px\] {
|
|
1072
|
+
min-height: 460px;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1081
1075
|
.tw-min-h-button {
|
|
1082
1076
|
min-height: 3.75rem;
|
|
1083
1077
|
}
|
|
@@ -1432,32 +1426,32 @@ video {
|
|
|
1432
1426
|
animation: tw-blur-out 0.2s ease-out both;
|
|
1433
1427
|
}
|
|
1434
1428
|
|
|
1435
|
-
@keyframes tw-
|
|
1429
|
+
@keyframes tw-collapse-route {
|
|
1436
1430
|
0% {
|
|
1437
|
-
|
|
1431
|
+
height: 100%;
|
|
1438
1432
|
}
|
|
1439
1433
|
|
|
1440
1434
|
100% {
|
|
1441
|
-
|
|
1435
|
+
height: 60px;
|
|
1442
1436
|
}
|
|
1443
1437
|
}
|
|
1444
1438
|
|
|
1445
|
-
.tw-animate-
|
|
1446
|
-
animation: tw-
|
|
1439
|
+
.tw-animate-collapse-route {
|
|
1440
|
+
animation: tw-collapse-route var(--squid-animation-collapse-to-bottom-duration, 0s) linear both;
|
|
1447
1441
|
}
|
|
1448
1442
|
|
|
1449
|
-
@keyframes tw-
|
|
1443
|
+
@keyframes tw-expand-route {
|
|
1450
1444
|
0% {
|
|
1451
|
-
|
|
1445
|
+
height: 60px;
|
|
1452
1446
|
}
|
|
1453
1447
|
|
|
1454
1448
|
100% {
|
|
1455
|
-
|
|
1449
|
+
height: 100%;
|
|
1456
1450
|
}
|
|
1457
1451
|
}
|
|
1458
1452
|
|
|
1459
|
-
.tw-animate-
|
|
1460
|
-
animation: tw-
|
|
1453
|
+
.tw-animate-expand-route {
|
|
1454
|
+
animation: tw-expand-route var(--squid-animation-expand-to-top-duration, 0s) linear both;
|
|
1461
1455
|
}
|
|
1462
1456
|
|
|
1463
1457
|
@keyframes tw-hide {
|
|
@@ -1521,7 +1515,7 @@ video {
|
|
|
1521
1515
|
}
|
|
1522
1516
|
|
|
1523
1517
|
.tw-animate-scale-and-fade-down {
|
|
1524
|
-
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;
|
|
1525
1519
|
}
|
|
1526
1520
|
|
|
1527
1521
|
@keyframes tw-scale-and-fade-up {
|
|
@@ -1537,39 +1531,39 @@ video {
|
|
|
1537
1531
|
}
|
|
1538
1532
|
|
|
1539
1533
|
.tw-animate-scale-and-fade-up {
|
|
1540
|
-
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;
|
|
1541
1535
|
}
|
|
1542
1536
|
|
|
1543
1537
|
@keyframes tw-slide-to-bottom {
|
|
1544
1538
|
0% {
|
|
1545
|
-
|
|
1539
|
+
transform: translateY(0);
|
|
1546
1540
|
opacity: 1;
|
|
1547
1541
|
}
|
|
1548
1542
|
|
|
1549
1543
|
100% {
|
|
1550
|
-
|
|
1544
|
+
transform: translateY(120px);
|
|
1551
1545
|
opacity: 0;
|
|
1552
1546
|
}
|
|
1553
1547
|
}
|
|
1554
1548
|
|
|
1555
1549
|
.tw-animate-slide-to-bottom {
|
|
1556
|
-
animation: tw-slide-to-bottom
|
|
1550
|
+
animation: tw-slide-to-bottom 0.2s ease-out both;
|
|
1557
1551
|
}
|
|
1558
1552
|
|
|
1559
1553
|
@keyframes tw-slide-to-top {
|
|
1560
1554
|
0% {
|
|
1561
|
-
|
|
1555
|
+
transform: translateY(120px);
|
|
1562
1556
|
opacity: 0;
|
|
1563
1557
|
}
|
|
1564
1558
|
|
|
1565
1559
|
100% {
|
|
1566
|
-
|
|
1560
|
+
transform: translateY(0);
|
|
1567
1561
|
opacity: 1;
|
|
1568
1562
|
}
|
|
1569
1563
|
}
|
|
1570
1564
|
|
|
1571
1565
|
.tw-animate-slide-to-top {
|
|
1572
|
-
animation: tw-slide-to-top
|
|
1566
|
+
animation: tw-slide-to-top 0.35s ease-out both;
|
|
1573
1567
|
}
|
|
1574
1568
|
|
|
1575
1569
|
@keyframes tw-translate-to-bottom {
|
|
@@ -1583,7 +1577,7 @@ video {
|
|
|
1583
1577
|
}
|
|
1584
1578
|
|
|
1585
1579
|
.tw-animate-translate-to-bottom {
|
|
1586
|
-
animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s)
|
|
1580
|
+
animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s) linear both;
|
|
1587
1581
|
}
|
|
1588
1582
|
|
|
1589
1583
|
@keyframes tw-translate-to-top {
|
|
@@ -1597,7 +1591,7 @@ video {
|
|
|
1597
1591
|
}
|
|
1598
1592
|
|
|
1599
1593
|
.tw-animate-translate-to-top {
|
|
1600
|
-
animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s)
|
|
1594
|
+
animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s) linear both;
|
|
1601
1595
|
}
|
|
1602
1596
|
|
|
1603
1597
|
.tw-cursor-help {
|
|
@@ -2634,8 +2628,8 @@ video {
|
|
|
2634
2628
|
transition-duration: 150ms;
|
|
2635
2629
|
}
|
|
2636
2630
|
|
|
2637
|
-
.tw-duration-
|
|
2638
|
-
transition-duration:
|
|
2631
|
+
.tw-duration-1000 {
|
|
2632
|
+
transition-duration: 1000ms;
|
|
2639
2633
|
}
|
|
2640
2634
|
|
|
2641
2635
|
.tw-duration-150 {
|
package/dist/index.d.ts
CHANGED
|
@@ -493,9 +493,8 @@ type Token = {
|
|
|
493
493
|
logoUrl: string;
|
|
494
494
|
bgColor: string;
|
|
495
495
|
};
|
|
496
|
-
declare function SwapProgressView({ steps,
|
|
496
|
+
declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
|
|
497
497
|
steps: SwapStep[];
|
|
498
|
-
currentStepIndex: number;
|
|
499
498
|
handleClose?: () => void;
|
|
500
499
|
isOpen?: boolean;
|
|
501
500
|
socialLink?: string;
|