diff --git a/packages/widget/src/Widget.tsx b/packages/widget/src/Widget.tsx index 9cacb450..b96faa41 100644 --- a/packages/widget/src/Widget.tsx +++ b/packages/widget/src/Widget.tsx @@ -24,6 +24,7 @@ import { AnimatedActivityPage } from "./pages/details/activity-page/activity.pag import { Details } from "./pages/details/details-page/details.page"; import { AnimatedEarnPage } from "./pages/details/earn-page/earn.page"; import { AnimatedPositionsPage } from "./pages/details/positions-page/positions.page"; +import { KycGatePage } from "./pages/kyc/kyc-gate.page"; import { PositionDetailsPage } from "./pages/position-details"; import { StakeReviewPage } from "./pages/review"; import { ActionReviewPage } from "./pages/review/pages/action-review.page"; @@ -133,6 +134,7 @@ export const Widget = () => { {/* Stake flow */} + } /> } /> } /> } /> diff --git a/packages/widget/src/components/atoms/icons/shield-check.tsx b/packages/widget/src/components/atoms/icons/shield-check.tsx new file mode 100644 index 00000000..e41faae4 --- /dev/null +++ b/packages/widget/src/components/atoms/icons/shield-check.tsx @@ -0,0 +1,34 @@ +import { vars } from "../../../styles/theme/contract.css"; + +export const ShieldCheckIcon = ({ + width, + height, + color = "text", +}: { + width?: number; + height?: number; + color?: Exclude; +}) => ( + + + + +); diff --git a/packages/widget/src/components/molecules/kyc-iframe-modal/index.tsx b/packages/widget/src/components/molecules/kyc-iframe-modal/index.tsx new file mode 100644 index 00000000..0fb6f598 --- /dev/null +++ b/packages/widget/src/components/molecules/kyc-iframe-modal/index.tsx @@ -0,0 +1,70 @@ +import { Content, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog"; +import { useContext } from "react"; +import { useTranslation } from "react-i18next"; +import { SettingsContext } from "../../../providers/settings"; +import { id } from "../../../styles/theme/ids"; +import { Box } from "../../atoms/box"; +import { XIcon } from "../../atoms/icons/x-icon"; +import { Text } from "../../atoms/typography/text"; +import { container, content, iframe, overlay } from "./styles.css"; + +type KycIframeModalProps = { + open: boolean; + onOpenChange: (open: boolean) => void; + url: string; + title: string; +}; + +export const KycIframeModal = ({ + open, + onOpenChange, + url, + title, +}: KycIframeModalProps) => { + const portalContainer = useContext(SettingsContext)?.portalContainer; + const { t } = useTranslation(); + + return ( + + + + onOpenChange(false)} className={overlay} /> + + + + + <Text variant={{ weight: "bold", size: "large" }}>{title}</Text> + + + onOpenChange(false)} + aria-label={t("kyc.close")} + > + + + + +