@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
51 lines (50 loc) • 1.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import styled from "../../../styles/styled";
import usePayContext from "../../contexts/pay";
import { PageContent } from "../../ui/Modal/styles";
import OptionsList from "../../ui/OptionsList";
import PoweredByFooter from "../../ui/PoweredByFooter";
import { Skeleton } from "../../ui/Skeleton";
export default function PreparingPayment() {
const { triggerResize } = usePayContext();
useEffect(() => {
triggerResize();
}, [triggerResize]);
return (_jsxs(PageContent, { children: [_jsxs(HeaderSkeleton, { children: [_jsx(AmountSkeleton, {}), _jsxs(SubtitleSkeletonRow, { children: [_jsxs(LogoSkeletonStack, { children: [_jsx(LogoSkeleton, {}), _jsx(LogoSkeleton, { "$overlap": true }), _jsx(LogoSkeleton, { "$overlap": true }), _jsx(LogoSkeleton, { "$overlap": true })] }), _jsx(SubtitleSkeleton, {})] })] }), _jsx(OptionsList, { options: [], isLoading: true, requiredSkeletons: 3 }), _jsx(PoweredByFooter, {})] }));
}
const HeaderSkeleton = styled.div `
display: flex;
flex-direction: column;
align-items: center;
`;
const BaseSkeleton = styled(Skeleton) `
background-color: rgba(0, 0, 0, 0.1);
`;
const AmountSkeleton = styled(BaseSkeleton) `
width: 184px;
height: 50px;
border-radius: 16px;
`;
const SubtitleSkeletonRow = styled.div `
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px 0;
`;
const LogoSkeletonStack = styled.div `
display: flex;
align-items: center;
`;
const LogoSkeleton = styled(BaseSkeleton) `
width: 24px;
height: 24px;
border-radius: 9999px;
margin-left: ${(props) => (props.$overlap ? -8 : 0)}px;
`;
const SubtitleSkeleton = styled(BaseSkeleton) `
width: 160px;
height: 18px;
border-radius: 9999px;
`;