diff --git a/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.scss b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.scss new file mode 100644 index 00000000..f897151b --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.scss @@ -0,0 +1,23 @@ +.fullscreen-notice { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1000; + + &__back { + border: none; + background: none; + + &:hover { + background: none !important; + } + } + + &__content { + padding: 0 rem(24px); + overflow: auto; + height: calc(100% - 7.4rem); + } +} diff --git a/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.stories.tsx b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.stories.tsx new file mode 100644 index 00000000..d50c9386 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.stories.tsx @@ -0,0 +1,106 @@ +/* eslint-disable react/function-component-definition, react/destructuring-assignment */ +import React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import FullscreenNotice from './FullscreenNotice'; +import Page from '../Page'; +import Button from '../Button'; + +export default { + title: 'X/Shared/FullscreenNotice', + component: FullscreenNotice, + beforeEach: () => { + const body = document.getElementsByTagName('body').item(0); + body?.classList.add('popup-x'); + + return () => { + body?.classList.remove('popup-x'); + }; + }, + tags: ['!autodocs'], +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + children: ( + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in. + Tristique sollicitudin nibh sit amet commodo nulla facilisi. Eget nullam non nisi est sit amet. At + lectus urna duis convallis. Consequat semper viverra nam libero. Gravida rutrum quisque non tellus + orci ac auctor. Mattis aliquam faucibus purus in massa tempor nec feugiat. Consectetur adipiscing + elit duis tristique sollicitudin. Sit amet est placerat in egestas erat imperdiet sed euismod. + Ornare massa eget egestas purus viverra. Viverra maecenas accumsan lacus vel facilisis. Malesuada + fames ac turpis egestas integer eget aliquet nibh. Non diam phasellus vestibulum lorem sed risus. + Tincidunt vitae semper quis lectus nulla. Cursus euismod quis viverra nibh cras pulvinar mattis nunc + sed. +

+ + + + + ), + open: true, + }, +}; + +export const WallOfText: Story = { + args: { + children: ( + <> +

Lorem ipsum!

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in. + Tristique sollicitudin nibh sit amet commodo nulla facilisi. Eget nullam non nisi est sit amet. At + lectus urna duis convallis. Consequat semper viverra nam libero. Gravida rutrum quisque non tellus + orci ac auctor. Mattis aliquam faucibus purus in massa tempor nec feugiat. Consectetur adipiscing + elit duis tristique sollicitudin. Sit amet est placerat in egestas erat imperdiet sed euismod. + Ornare massa eget egestas purus viverra. Viverra maecenas accumsan lacus vel facilisis. Malesuada + fames ac turpis egestas integer eget aliquet nibh. Non diam phasellus vestibulum lorem sed risus. + Tincidunt vitae semper quis lectus nulla. Cursus euismod quis viverra nibh cras pulvinar mattis nunc + sed. +

+

+ Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vitae congue mauris rhoncus + aenean vel elit scelerisque mauris pellentesque. Nec feugiat in fermentum posuere urna. Lobortis + scelerisque fermentum dui faucibus in ornare quam. Sit amet est placerat in egestas erat imperdiet + sed euismod. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Arcu risus quis varius + quam. Ullamcorper a lacus vestibulum sed arcu non odio. Eu mi bibendum neque egestas. Duis at + consectetur lorem donec. +

+

+ Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Dignissim sodales ut eu sem. Tellus + molestie nunc non blandit massa enim nec. Amet nulla facilisi morbi tempus iaculis urna. Metus + vulputate eu scelerisque felis imperdiet proin. Mauris ultrices eros in cursus turpis massa + tincidunt dui ut. Praesent tristique magna sit amet purus gravida quis blandit turpis. Turpis nunc + eget lorem dolor sed viverra ipsum. Et egestas quis ipsum suspendisse ultrices gravida. Egestas diam + in arcu cursus euismod quis. Egestas purus viverra accumsan in. Convallis convallis tellus id + interdum. Donec pretium vulputate sapien nec sagittis. Consectetur adipiscing elit ut aliquam purus + sit amet luctus venenatis. +

+

+ Eget gravida cum sociis natoque penatibus et. Tincidunt eget nullam non nisi est. Amet mattis + vulputate enim nulla. Eget mi proin sed libero enim sed faucibus turpis in. Mattis ullamcorper velit + sed ullamcorper. Nunc vel risus commodo viverra. At tellus at urna condimentum mattis. At elementum + eu facilisis sed odio. Egestas dui id ornare arcu. Proin libero nunc consequat interdum varius. + Scelerisque eleifend donec pretium vulputate sapien nec. +

+

+ Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Sapien eget mi proin sed + libero enim. Eget velit aliquet sagittis id consectetur. Est placerat in egestas erat. Diam maecenas + ultricies mi eget mauris pharetra et ultrices neque. Ut sem nulla pharetra diam sit amet nisl + suscipit adipiscing. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. Adipiscing at in + tellus integer feugiat scelerisque varius. Ultrices mi tempus imperdiet nulla malesuada pellentesque + elit eget. Quisque sagittis purus sit amet volutpat. Dignissim diam quis enim lobortis scelerisque + fermentum dui. At lectus urna duis convallis convallis tellus id. Ultrices dui sapien eget mi proin + sed. +

+ + ), + open: true, + }, +}; diff --git a/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.tsx b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.tsx new file mode 100644 index 00000000..e5e9fca5 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.tsx @@ -0,0 +1,93 @@ +import React, { PropsWithChildren, useCallback, useEffect, useMemo } from 'react'; +import clsx from 'clsx'; +import { Portal, noOp } from 'wallet-common-helpers'; +import Back from '@assets/svgX/arrow-left.svg'; +import { Connection, Fullscreen } from '@popup/popupX/page-layouts/MainLayout/Header/components'; +import Button from '../Button'; + +type HeaderProps = { + isScrolling: boolean; + onBack(): void; +}; + +function Header({ isScrolling, onBack }: HeaderProps) { + return ( +
+
+ + +
+
+ } onClick={() => onBack()} /> +
+
+ ); +} + +const htmlElement = document.getElementsByTagName('html')[0]!; +const bodyElement = document.getElementsByTagName('body')[0]!; + +type Props = { + /** Control whether notice is shown or not */ + open: boolean; + /** Invoked when the notice is closed */ + onClose(): void; +}; + +/** + * @description + * Opens content in a modal overlay on top of the current wallet window. + * + * @example + * setIsOpen(false)}> + * + * + * This is the body + * + * Some action + * + * + * This content is shown in a modal! + * + */ +export default function FullscreenNotice({ open, onClose, children }: PropsWithChildren): JSX.Element | null { + const [scroll, setScroll] = React.useState(0); + const isScrolling = useMemo(() => scroll > 0, [!!scroll]); + const close = useCallback(() => { + onClose(); + }, [onClose]); + + useEffect(() => { + if (open) { + htmlElement.classList.add('modal-open'); + + // Prevent modal from stretching window height + htmlElement.style.height = bodyElement.style.height; + + return () => { + htmlElement.classList.remove('modal-open'); + // Reset to initial value + htmlElement.style.height = '100%'; + }; + } + return noOp; + }, [open]); + + if (!open) { + return null; + } + + return ( + +
+
{ + setScroll(e.currentTarget.scrollTop); + }} + > + {children} +
+ + ); +} diff --git a/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/index.ts b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/index.ts new file mode 100644 index 00000000..6301de42 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/index.ts @@ -0,0 +1 @@ +export { default } from './FullscreenNotice'; diff --git a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss index 1cb16045..ade36157 100644 --- a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss +++ b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss @@ -43,3 +43,4 @@ @import '../shared/Carousel/Carousel'; @import '../shared/Form/Form'; @import '../shared/Form/TokenAmount/TokenAmount'; +@import '../shared/FullscreenNotice/FullscreenNotice'; diff --git a/packages/browser-wallet/src/popup/shared/Modal/Modal.stories.tsx b/packages/browser-wallet/src/popup/shared/Modal/Modal.stories.tsx index 6cc9a200..b5a97619 100644 --- a/packages/browser-wallet/src/popup/shared/Modal/Modal.stories.tsx +++ b/packages/browser-wallet/src/popup/shared/Modal/Modal.stories.tsx @@ -6,6 +6,7 @@ import Modal from './Modal'; export default { title: 'Shared/Modal', component: Modal, + tags: ['!autodocs'], } as Meta; type Story = StoryObj;