Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import { NoConnection } from "@assets/emptyStatesIcons";
import { Button } from "@common/Button";
import { BaseModal } from "@common/Modal";
import { Text } from "@common/Text";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import NiceModal, { muiDialogV5, useModal } from "@ebay/nice-modal-react";
import { Stack } from "@mui/material";
import { palette } from "@palette";
import { getUser } from "@services/api/onboarding/user";
import { useState } from "react";
const ConnectionErrorModal = NiceModal.create(() => {
const [isConnecting, setIsConnecting] = useState<boolean>(false);
const modal = useModal();
const handleClick = async () => {
setIsConnecting(true);
try {
await getUser();
setIsConnecting(false);
modal.hide();
} catch (error) {
const t = setTimeout(() => {
setIsConnecting(false);
clearTimeout(t);
}, 700);
}
};
return (
<BaseModal
{...muiDialogV5(modal)}
sx={{
"& .MuiDialog-paper": {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
backgroundColor: palette.neutral.white,
borderRadius: "16px",
padding: "16px",
userSelect: "none",
height: "max-content",
width: "80%",
"@media (min-width: 600px)": {
maxWidth: "300px",
},
"@media (max-width: 600px)": {
top: "40%",
},
},
"& .MuiDialogContent-root": {
padding: 0,
},
"& .MuiDialogActions-root": {
display: "none",
},
}}
onClose={() => undefined}
>
<Stack direction="column" gap={6} alignItems="stretch">
<Stack direction="column" gap={2} alignItems="center">
<NoConnection width={74} height={74} />
<Stack width="100%" direction="column" gap={1}>
<Text
color={palette.black[300]}
variant="h6"
lineHeight="21.6px"
letterSpacing="-0.18px"
align="center"
>
No connection
</Text>
<Text
lineHeight="16.8px"
fontWeight="book"
color={palette.black[100]}
align="center"
>
Please check your internet connection
</Text>
</Stack>
</Stack>
<Button
background="primary"
size="medium"
onClick={handleClick}
disabled={isConnecting}
sx={{
fontSize: "18px",
textAlign: "center",
"&:disabled": {
"& span": {
opacity: 0.9,
},
},
}}
>
Reconnect{" "}
{isConnecting && <Loader />}
</Button>
</Stack>
</BaseModal>
);
});
const Loader = () => {
return (
<LoadingSpinner
sx={{ height: "18px", maxWidth: "20px" }}
spinnerProps={{ size: "14px", thickness: 4 }}
color={palette.gray[300]}
/>
)
}
export default ConnectionErrorModal;
|