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 | 13x 213x 213x | import GivePayment from "@assets/icons/GivePayment";
import { Stack } from "@mui/material";
import { LockIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import React from "react";
const CheckoutFooter = ({
isDesktopView,
isBottomsheet,
checkoutPolicyContent,
}: {
isDesktopView: boolean;
isBottomsheet?: boolean;
checkoutPolicyContent?: React.ReactElement;
}) => {
const { palette } = useAppTheme();
return (
<Stack
direction={isDesktopView && !isBottomsheet ? "row" : "column"}
justifyContent={isDesktopView ? "space-between" : "center"}
alignItems="center"
spacing={isDesktopView ? 0 : 2}
borderTop={isDesktopView ? "none" : "1px solid #CCCCC9"}
paddingTop={isDesktopView ? 0 : 3}
gap={2}
>
<Stack direction="row" alignItems="center" spacing={1}>
<LockIcon size={16} color={palette.text.secondary} />
<GiveText variant="bodyS" color="secondary">
Transaction Secured and Encrypted
</GiveText>
</Stack>
<GivePayment />
{checkoutPolicyContent}
</Stack>
);
};
export default CheckoutFooter;
|