From ee5770eeeb3fed005aeaa4bc6460c321b221e417 Mon Sep 17 00:00:00 2001 From: Thebora Kompanioni Date: Sun, 17 May 2026 21:38:08 +0200 Subject: [PATCH] chore(ui): improve footer on small screens (#1243) * chore(footer): align blockheight * ui(footer): improve footer on small screens * chore(storybook): add BetaWarningDialog story * review: remove flex container of footer warning --- src/components/layout/AppFooter.tsx | 109 ++++++++++-------- src/components/layout/Layout.tsx | 1 + .../layout/footer/BetaWarningDialog.tsx | 4 +- src/stories/jam/AppFooter.stories.tsx | 28 ++++- .../jam/dialogs/BetaWarningDialog.stories.tsx | 37 ++++++ 5 files changed, 125 insertions(+), 54 deletions(-) create mode 100644 src/stories/jam/dialogs/BetaWarningDialog.stories.tsx diff --git a/src/components/layout/AppFooter.tsx b/src/components/layout/AppFooter.tsx index 0d5b1c26..3201c577 100644 --- a/src/components/layout/AppFooter.tsx +++ b/src/components/layout/AppFooter.tsx @@ -1,16 +1,15 @@ import { useState, type ComponentProps } from 'react' import { BlocksIcon, BookOpenIcon, FileQuestionMarkIcon, ScrollTextIcon } from 'lucide-react' import { useTranslation, Trans } from 'react-i18next' -import { useStore } from 'zustand' import { Button } from '@/components/ui/button' import { JmWebsocketInfo } from '@/components/ui/jam/JmWebsocketInfo' import type { JmWebsocket } from '@/hooks/useJmWebsocket' -import { jmSessionStore } from '@/store/jmSessionStore' import { BetaWarningDialog } from './footer/BetaWarningDialog' type JmWebsocketInfo = Pick type AppFooterProps = Pick, 'jamVersion' | 'joinmarketVersion'> & { + blockHeight?: number websocketInfo?: JmWebsocketInfo onClickCheatsheet: () => void onClickOrderbook: () => void @@ -18,6 +17,7 @@ type AppFooterProps = Pick, 'jamVersion } export function AppFooter({ + blockHeight, websocketInfo, jamVersion, joinmarketVersion, @@ -27,7 +27,6 @@ export function AppFooter({ }: AppFooterProps) { const { t } = useTranslation() - const blockHeight = useStore(jmSessionStore, (state) => state.state?.block_height) const [isShowBetaWarning, setShowBetaWarning] = useState(false) return ( @@ -38,57 +37,65 @@ export function AppFooter({ joinmarketVersion={joinmarketVersion} jamVersion={jamVersion} /> -
-
- - This is pre-alpha software. - - -
-
- - - {onClickLogs && ( - - )} -
- -
- {websocketInfo !== undefined && ( -
- -
- )} -
- {blockHeight && ( - - {blockHeight} - + {onClickLogs && ( + )} - - v{jamVersion?.raw} - +
+ +
+ {websocketInfo !== undefined && ( +
+ +
+ )} +
+ {blockHeight && ( + + + + {blockHeight.toLocaleString()} + + + )} + + v{jamVersion?.raw} + +
+
+
+ + This is pre-alpha software. + +
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index af1dd702..c591c07f 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -90,6 +90,7 @@ export function LayoutInner({ onLogout, onLockWallet, children }: LayoutInnerPro
{children}
cheatsheet.onOpenChange(true)} diff --git a/src/components/layout/footer/BetaWarningDialog.tsx b/src/components/layout/footer/BetaWarningDialog.tsx index 9adf9192..1cede021 100644 --- a/src/components/layout/footer/BetaWarningDialog.tsx +++ b/src/components/layout/footer/BetaWarningDialog.tsx @@ -32,10 +32,10 @@ export const BetaWarningDialog = ({ jamVersion, joinmarketVersion, ...dialogProp
JoinMarket: - v{joinmarketVersion?.raw || '_unknown'} + v{joinmarketVersion?.raw || '_unknown'}
Jam: - v{jamVersion.raw || '_unknown'} + v{jamVersion.raw || '_unknown'}
diff --git a/src/stories/jam/AppFooter.stories.tsx b/src/stories/jam/AppFooter.stories.tsx index ad1788c9..5ae1845a 100644 --- a/src/stories/jam/AppFooter.stories.tsx +++ b/src/stories/jam/AppFooter.stories.tsx @@ -16,7 +16,8 @@ export const Default: Story = { render: () => ( alert('Cheatsheet clicked!')} onClickOrderbook={() => alert('Orderbook clicked!')} @@ -24,3 +25,28 @@ export const Default: Story = { /> ), } + +export const WithoutLogs: Story = { + render: () => ( + alert('Cheatsheet clicked!')} + onClickOrderbook={() => alert('Orderbook clicked!')} + /> + ), +} + +export const Minimal: Story = { + render: () => ( + alert('Cheatsheet clicked!')} + onClickOrderbook={() => alert('Orderbook clicked!')} + /> + ), +} diff --git a/src/stories/jam/dialogs/BetaWarningDialog.stories.tsx b/src/stories/jam/dialogs/BetaWarningDialog.stories.tsx new file mode 100644 index 00000000..3e16bca3 --- /dev/null +++ b/src/stories/jam/dialogs/BetaWarningDialog.stories.tsx @@ -0,0 +1,37 @@ +import { useState } from 'react' +import type { Meta, StoryObj } from '@storybook/react-vite' +import { BetaWarningDialog } from '@/components/layout/footer/BetaWarningDialog' +import { Button } from '@/components/ui/button' +import { APP_DISPLAY_VERSION } from '@/constants/jam' +import { parseSemanticVersion } from '@/lib/utils' + +const meta: Meta = { + title: 'Dialog/BetaWarningDialog', + component: BetaWarningDialog, + tags: ['autodocs'], + render: (args) => { + const [open, setOpen] = useState(args.defaultOpen || false) + return ( + <> + + setOpen(false)} /> + + ) + }, +} +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + jamVersion: APP_DISPLAY_VERSION, + joinmarketVersion: parseSemanticVersion('0.9.12'), + }, +} + +export const UnknownBackendVersion: Story = { + args: { + jamVersion: APP_DISPLAY_VERSION, + }, +}