From ab83fe3c671823f8fe97f1051b6208b9b2cf5836 Mon Sep 17 00:00:00 2001 From: anthony2399 Date: Thu, 7 Nov 2024 17:43:39 +0200 Subject: [PATCH] feat(widget): mobile dialogs --- .../lib/dialogs/JustVerifiedDialog/index.tsx | 1 - .../ui/src/lib/ui/Dialog/Dialog.module.css | 177 ++++---- .../JustWeb3Button/JustWeb3Button.module.css | 17 + .../lib/components/JustWeb3Button/index.tsx | 400 ++++++++++-------- .../src/lib/dialogs/DefaultDialog/index.tsx | 2 +- 5 files changed, 337 insertions(+), 260 deletions(-) create mode 100644 packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css diff --git a/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx b/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx index 4d64c387..aa6d4681 100644 --- a/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx +++ b/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx @@ -124,7 +124,6 @@ export const JustVerifiedDialog: FC = ({ gap: '20px', display: 'flex', flexDirection: 'column', - maxWidth: '500px', }} > diff --git a/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css b/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css index 1d4a0c90..d69666ae 100644 --- a/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css +++ b/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css @@ -1,120 +1,147 @@ /* Overlay styles */ .overlay { - position: fixed; - inset: 0; - transition: backdrop-filter 100ms ease; - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); - animation: overlayShow 700ms cubic-bezier(0.16, 1, 0.3, 1); + position: fixed; + inset: 0; + transition: backdrop-filter 100ms ease; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + animation: overlayShow 700ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes overlayShow { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* Content styles */ .content { - background-color: var(--justweb3-background-color); - box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.33); - position: fixed; - z-index: 9999; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 40px; - transition: all 0.4s ease-in-out; - animation: contentShow 700ms cubic-bezier(0.16, 1, 0.3, 1); - border-radius: 24px; - width: fit-content; - max-width: min(1200px, 90vw); - min-width: 390px; - min-height: 200px; - max-height: 80vh; + background-color: var(--justweb3-background-color); + box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.33); + position: fixed; + z-index: 9999; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 40px; + transition: all 0.4s ease-in-out; + animation: contentShow 700ms cubic-bezier(0.16, 1, 0.3, 1); + border-radius: 24px; + width: fit-content; + max-width: min(1200px, 90vw); + min-width: 390px; + min-height: 200px; + max-height: 80vh; } .content:focus { - outline: none; + outline: none; } @keyframes contentShow { - from { - opacity: 0; - transform: translate(-50%, -50%) scale(0.6); - } - to { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } + from { + opacity: 0; + transform: translate(-50%, -50%) scale(0.6); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } } -@media (max-width: 768px) { - .content { - width: 100vw; - max-width: 100vw; - min-width: 100vw; - max-height: 100vh; - border-radius: 0; - } +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } } -/* Fullscreen modifier */ -.fullScreen { - border-radius: 0; +@keyframes slideDown { + from { + transform: translateY(0); + } + to { + transform: translateY(100%); + } +} + +@media (max-width: 768px) { + .content { width: 100vw; - max-width: 100vw; + max-width: 100vw !important; min-width: 100vw; - min-height: 100vh; max-height: 100vh; + border-radius: 24px 24px 0 0; + bottom: 0; + left: 0; + top: auto; + transform: translateY(0); + animation: slideUp 550ms cubic-bezier(0.16, 1, 0.3, 1); + } + + .content[data-state='closed'] { + animation: slideDown 550ms cubic-bezier(0.16, 1, 0.3, 1); + } +} + +/* Fullscreen modifier */ +.fullScreen { + border-radius: 0; + width: 100vw; + max-width: 100vw; + min-width: 100vw; + min-height: 100vh; + max-height: 100vh; } /* Title styles */ .title { - margin: 0; - font-weight: 500; - font-family: var(--justweb3-font-family), serif; - color: black; - font-size: 17px; + margin: 0; + font-weight: 500; + font-family: var(--justweb3-font-family), serif; + color: black; + font-size: 17px; } /* Description styles */ .description { - margin: 10px 0 20px; - font-family: var(--justweb3-font-family), serif; - color: #6b7280; - font-size: 15px; - line-height: 1.5; + margin: 10px 0 20px; + font-family: var(--justweb3-font-family), serif; + color: #6b7280; + font-size: 15px; + line-height: 1.5; } /* DialogHeader styles */ .dialogHeader { - display: flex; - flex-direction: column; - text-align: center; + display: flex; + flex-direction: column; + text-align: center; } .dialogHeader > * + * { - margin-top: 0.375rem; /* Equivalent to space-y-1.5 in Tailwind CSS */ + margin-top: 0.375rem; /* Equivalent to space-y-1.5 in Tailwind CSS */ } /* DialogFooter styles */ .dialogFooter { - display: flex; - flex-direction: column-reverse; - padding-top: 20px; + display: flex; + flex-direction: column-reverse; + padding-top: 20px; } @media (min-width: 768px) { - .dialogFooter { - flex-direction: row; - justify-content: flex-end; - } - - .dialogFooter > * + * { - margin-left: 8px; /* Equivalent to space-x-2 in Tailwind CSS */ - } + .dialogFooter { + flex-direction: row; + justify-content: flex-end; + } + + .dialogFooter > * + * { + margin-left: 8px; /* Equivalent to space-x-2 in Tailwind CSS */ + } } diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css new file mode 100644 index 00000000..a954adf3 --- /dev/null +++ b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css @@ -0,0 +1,17 @@ +.desktopSection { + display: none; +} + +.mobileSection { + display: block; +} + +@media (min-width: 768px) { + .desktopSection { + display: block; + } + + .mobileSection { + display: none; + } +} diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx index e1d653c4..6428f7d0 100644 --- a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx +++ b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx @@ -31,6 +31,8 @@ import { MAppsDialog } from '../../dialogs/MAppsDialog'; import { getChainIcon } from '../../icons/chain-icons'; import { getTextRecordIcon } from '../../icons/records-icons'; import MetadataCard from '../MetadataCard'; +import { DefaultDialog } from '../../dialogs/DefaultDialog'; +import styles from './JustWeb3Button.module.css'; export interface JustWeb3Buttonrops { children: ReactNode; @@ -45,6 +47,7 @@ export const JustWeb3Button: FC = ({ const { plugins, mApps } = useContext(JustWeb3Context); const { createPluginApi } = useContext(PluginContext); const { address } = useMountedAccount(); + const [mobileDialogOpen, setMobileDialogOpen] = useState(false); const { disconnect } = useDisconnect(); const { connectedEns, @@ -155,203 +158,234 @@ export const JustWeb3Button: FC = ({ return children; } - return ( - <> - - - - { + return ( + + {connectedEns.ens} +

+ } + left={} + style={{ + backgroundColor: 'var(--justweb3-background-color)', + color: 'var(--justweb3-primary-color)', + }} + contentStyle={{ + alignItems: 'start', + }} + onClick={() => { + if (withDialog) { + setMobileDialogOpen(true); + } + }} + // right={ + // + // {address && formatText(address, 4)} + // + // + // } + /> + ) + } + + const connectedEnsProfileContent = ( + + + +

+ Profile Overview +

+ + + {/* Profile */} + + + +

+ {records?.sanitizedRecords.display ?? connectedEns.ens} +

+ {connectedEns.ens} -

- } - left={} + + + + - // {address && formatText(address, 4)} - // - // - // } - /> - + > + + {!!hasTwitterOrX && ( + + )} + {!!records?.sanitizedRecords.email && ( + + )} + + + + + {plugins.map((plugin) => { + const component = plugin.components?.SignInMenu; + if (!component) { + return null; + } - - - - -

- Profile Overview -

- - - {/* Profile */} - - - - -

- {records?.sanitizedRecords.display ?? connectedEns.ens} -

- - {connectedEns.ens} - - - - - - {!!hasTwitterOrX && ( - - )} - {!!records?.sanitizedRecords.email && ( - - )} - - + return ( + + {component(createPluginApi(plugin.name))} + + ); + })} + + } + title={'mApps'} + style={{ + width: '100%', + }} + onClick={() => setOpenMApps(true)} + right={ + + {mAppsToEnable && + canEnableMApps && + mAppsToEnable.length > 0 && ( + + Configuration Required + + )} + - - {plugins.map((plugin) => { - const component = plugin.components?.SignInMenu; - if (!component) { - return null; - } + } + disabled={!canEnableMApps} + loading={isCanEnableMAppsPending} + /> - return ( - - {component(createPluginApi(plugin.name))} - - ); - })} + } + title={'Sign Out'} + onClick={signOut} + right={} + /> + + + ) - } - title={'mApps'} - style={{ - width: '100%', - }} - onClick={() => setOpenMApps(true)} - right={ - - {mAppsToEnable && - canEnableMApps && - mAppsToEnable.length > 0 && ( - - Configuration Required - - )} - - - } - disabled={!canEnableMApps} - loading={isCanEnableMAppsPending} - /> + return ( + <> + +
+ + + {connectedEnsBtn(false)} + + + {connectedEnsProfileContent} + + +
+
+ {connectedEnsBtn(true)} + setMobileDialogOpen(false)} + contentStyle={{ + width: '100%', + }} + header={} + fullScreen={false} - } - title={'Sign Out'} - onClick={signOut} - right={} - /> - - - - + > + {connectedEnsProfileContent} + +
); }; diff --git a/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx b/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx index 56b02f5e..57828e66 100644 --- a/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx +++ b/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx @@ -50,7 +50,7 @@ export const DefaultDialog: FC = ({ transition: 'all 0.4 ease-in-out', display: 'flex', flexDirection: 'column', - borderRadius: fullScreen ? '0' : '24px', + borderRadius: fullScreen ? '0' : undefined, background: 'var(--justweb3-foreground-color-4)', boxSizing: 'content-box', ...contentStyle,