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 | 2x 2x 2x 2x 2x 4x 4x 4x 4x 4x | import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import NiceModal from "@ebay/nice-modal-react";
import { Box } from "@mui/material";
import GiveLink from "@shared/Link/GiveLink";
import GivePopup from "@shared/Popup/GivePopup";
import GiveText from "@shared/Text/GiveText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { getDocsDomain } from "../utils";
import ApiInputItem from "../components/ApiKeyInput";
const CREATE_MODAL_TITLE = "API Key Created Successfully";
const CREATE_MODAL_DESCRIPTION =
"Your API key has been successfully generated.";
const ROLL_MODAL_TITLE = "API Key Rolled Successfully";
const ROLL_MODAL_DESCRIPTION = "Your API key has been successfully rolled.";
const DeveloperApiSuccessModal = NiceModal.create(
({
apiKey,
isSandbox,
isCreate,
}: {
apiKey: string;
isSandbox: boolean;
isCreate?: boolean;
}) => {
const { open, onClose } = useNiceModal();
const baseUrl = isSandbox
? process.env.VITE_SANDBOX_API_URL
: process.env.VITE_DEVELOPER_API_URL;
const docsLink = getDocsDomain();
const { isMobileView } = useCustomThemeV2();
return (
<GivePopup
title={isCreate ? CREATE_MODAL_TITLE : ROLL_MODAL_TITLE}
description={
isCreate ? CREATE_MODAL_DESCRIPTION : ROLL_MODAL_DESCRIPTION
}
type="success"
open={open}
onClose={onClose}
isMobile={isMobileView}
paperSx={{
...(isMobileView && {
maxHeight: "fit-content !important",
}),
}}
sx={{
...(isMobileView && {
".MuiDialogActions-root": {
alignItems: "flex-end !important",
},
}),
}}
buttons={[
{
label: "Close",
onClick: onClose,
variant: "filled",
sxButton: {
maxWidth: "77px",
},
},
]}
inputNodes={[
{
element: (
<ApiInputItem title="Key" value={apiKey} tooltipText="Key" />
),
},
{
element: isCreate ? (
<ApiInputItem
title="Base URL"
value={baseUrl || ""}
tooltipText="Base URL"
/>
) : (
<></>
),
},
{
element: (
<Box>
<GiveText
variant="bodyS"
color="secondary"
data-testid="success-modal-text"
>
For further guidance on how to get started, check out our{" "}
<GiveLink
color="secondary"
link={docsLink}
target="_blank"
sx={{
display: "inline-flex",
}}
>
Documentation.
</GiveLink>
</GiveText>
</Box>
),
},
]}
/>
);
},
);
export default DeveloperApiSuccessModal;
|