Files
4cb02214b4 feat(web): Epic: Spaces (#7168)
* feat: add shadcn/ui setup and infrastructure

Configuration:
- Add PostCSS config for Tailwind CSS v4
- Add cn utility for className merging (clsx + tailwind-merge)

Dependencies:
- Add @base-ui/react, tailwindcss, @tailwindcss/postcss
- Add shadcn component dependencies (class-variance-authority, clsx, lucide-react, etc.)
- Add shadcn CLI tool for component management
- Update lodash version

Infrastructure:
- Update globals.css with CSS variables and Tailwind imports
- Add use-mobile hook for responsive sidebar behavior
- Update _document.tsx to support dark mode via HTML class

* feat: add shadcn/ui component library

- Add components.json with base-vega style configuration
- Add 48 shadcn/ui components including:
  - Core: button, card, input, label, select, textarea
  - Layout: sidebar, separator, scroll-area, resizable
  - Feedback: alert, alert-dialog, badge, progress, skeleton, spinner, sonner
  - Navigation: breadcrumb, navigation-menu, pagination, tabs
  - Overlay: dropdown-menu, context-menu, popover, hover-card, tooltip, sheet, drawer
  - Form: checkbox, radio-group, switch, slider, combobox, input-otp, native-select, field, input-group
  - Data: table, avatar, accordion, collapsible
  - Misc: aspect-ratio, empty, kbd, toggle
  - Stories: button.stories.tsx, card.stories.tsx, avatar.stories.tsx

* chore: add design system AI skills and update documentation

Add AI skills for Figma design workflow:
- design.figma-to-code: Convert Figma designs to React code
- design.sync-component: Sync components from Figma
- design.sync-variables: Sync CSS variables from Figma
- design.verify: Verify pixel-perfect implementation
- design.prototype: Create Storybook prototypes

Add Figma component mapping documentation and remove autodocs tag
from Storybook examples in AGENTS.md to align with project standards.

* docs: improve JSDoc documentation for UI components

- Add comprehensive JSDoc comments to all UI components
- Include usage examples and key props documentation
- Verify and update examples against shadcn/ui Base UI documentation
- Improve examples for checkbox, collapsible, slider, alert, progress, select, tabs, accordion, switch, and radio-group components

* fix: rewrite story files to use Base UI patterns instead of Radix

- Replace asChild prop with render prop pattern (Base UI)
- Fix unused imports and unescaped entities
- Add required args property for stories with render functions
- All story files now work correctly with Base UI components

* chore: update skills

* refactor: move stories to stories dir

* fix(web): use bare imports for CSS files so they are inlined in production build

@import url(./vars.css) and @import url(./onboard.css) were silently
dropped during next build because @tailwindcss/postcss only resolves
bare @import specifiers, not url() imports. In dev mode the dev server
resolved them at request time, causing a visual mismatch between dev
and production builds.

* fix(web): preserve DM Sans font over Tailwind default

The @theme inline block had --font-sans: var(--font-sans), a circular
self-reference that resolved to Tailwind's default sans-serif stack
instead of the legacy DM Sans font.

* fix(web): inline DM Sans font-face imports in globals CSS

* chore: update yarn.lock after merging dev

* chore: exclude shadcn UI components from CodeScene analysis

- Add .codescene.yml to exclude apps/web/src/components/ui/** from analysis
- Add README explaining shadcn components are semi-auto generated
- Prevents false positives for code duplication and complexity in generated code

* fix: isolate shadcn/Tailwind CSS to prevent conflicts with MUI

PROBLEM:
- shadcn/Tailwind CSS was imported globally in globals.css
- This caused visual regressions and conflicts with MUI design system
- Icons, spacing, and components were affected

SOLUTION:
- Remove all Tailwind/shadcn imports from globals.css
- Remove shadcn CSS variables and theme configuration from globals.css
- Create separate shadcn.css file with isolated styles
- shadcn.css is scoped to .shadcn-scope class
- shadcn components remain available for Storybook/future migration

RESULT:
- MUI design system is now active and unaffected
- shadcn system isolated for future migration only
- No visual regressions from CSS conflicts

* chore: start epic branch for Spaces storybook

* fix: shadcn imports for Storybook preview

* fix: shadcn imports for Storybook preview

* fix: add missing shadcn CSS and scope decorator to Vite Storybook

The Vite Storybook preview was missing the shadcn.css import and
ShadcnScopeDecorator, causing shadcn/ui components to render unstyled.

* chore: update snapshots

* feat(web/Spaces): Storybook stories for the new header (#7175)

* feat: new Header Navigation + story

* chore: update snapshots

* chore: rm comments

* feat(web): Spaces SIWE flow (#7176)

* feat(spaces): setup SIWE on the home page

* feat(spaces): redirect user to welcome page when he disconnects his wallet

* feat(web): create onboarding flow

* feat(web): redirect user to the onboarding or spaces dashboard after he is connected

* feat(web): add guard to protect internal routes

* fix(web): refresh issue in the onboarding flow

* fix(web): change onboarding urls

* feat(web): add routes guard on application root level

* chore(web): refactor guard complexity

* fix(web): guard redirects

* fix(web): lint & prettier errors

* fix(web): unit tests

* fix(web): improve readability in SIWE authentication

* feat(web): cover main flow hooks with unit tests

* feat(web): redirect user to space creation workflow when clicking in the create space link in the sidebar

* feat(web/Spaces): Storybook stories for the new Sidebar (#7166)

* feat: initial sidebar UI + stories

* refactor: styling cleanup

* fix: UI fixes for the top bar

* refactor: styles and props adjustments

* chore: update snapshots

* refactor: add sidebar variants

* feat: add a new SpaceCard component + the story

* feat(web/Spaces): Safe Selector dropdown (#7156)

* feat: initial SafeSelector dropdown + story

* feat: update chain and safe based on user selection

* fix: minor UI fixes

* fix: chosen Safe is not in dropdown anymore

* refactor: types

* fix: chain logo size

* fix: chain logo size

* refactor: improve code readability

* refactor: balance formatting

* fix: shadcn imports for Storybook preview

* refactor: simplify files structure for better readability

* chore: formatting

* feat: Single Safe Single Chain UI

* refactor: simplify hooks

* refactor: simplify hooks for the safe selector dropdown

* chore: update snapshots

* refactor: new atomic subcomponents, remove all hook dependencies

* refactor: cleanup

* refactor: divide bigger components into atomic ones

* refactor: move some selector logic into a hook

* refactor: hook refactoring to reduce cyclomatic complexity

* feat: nested safes in the dropdown

* feat(web): Create accounts and pending tx widgets to add on spaces dashboard later (#7187)

* feat(web): create SafeWidget compouded component to allow layout flexibility and have a better separation of concerns

* feat(web): create storybook for SafeAccountWidget

* feat(web): create storybook for the widget of the pending transactions

* feat(web): add loading state and skeleton components to Accounts and Pending Transactions widgets

* feat(web): remove accounts and pending tx stories from storybook

* fix(web): remove storybook title to show the components under its folder level on storybook

* chore(web): generated snapshots

* feat: add dashboard header component (#7188)

* chore(web): update storybook snapshots after dev merge

* fix(web): add RouterDecorator to stories using EthHashInfo after Spaces migration (#7230)

* feat(web): Integrate onboarding components on spaces flow (#7223)

* feat(web): add address book onboarding step and step indicator component

* refactor(web): move onboarding components into spaces feature directory

* fix(web): fix spaces onboarding component imports and props

* feat(web): restructure invite members form

* chore(web): restructure invite members component

* feat(web): increase wrapper container width

* feat(web): add storybook stories for onboarding components

Add missing stories for SelectSafesOnboarding and StepIndicator.
Fix CORS errors in existing onboarding stories by adding spaceId
query param and mocking spaces API endpoints (owned safes, safe
overviews, members, mutations) via MSW handlers.

* feat(web): adjust types import

* fix(web): fix type import and UseGuard type errors

Replace inline `import()` type annotations with proper UseFormReturn import
and remove unused parameter from UseGuard type to match implementation.

---------

* feat(web/Spaces): New sidebar - Spaces level (#7226)

* feat: initial Spaces sidebar built into the UI

* feat: extended props and hooks for the spaces selection dropdown

* feat: Spaces selector dropdown

* feat: navigation in the Spaces sidebar

* fix: minor UI fixes for the Spaces sidebad

* fix: UI fixes for minimized sidebar and the Help section

* feat: sidebar for mobile

* feat: remember sidebar state

* fix: Space selector dropdown on mobile; formatting

* fix: z-index for sidebar on mobile

* fix: remove tx number

* fix: disabled Security + Settings btns for non-members

* fix: stories UI for the Spaces-level sidebar

* refactor: remove nested buttons

* chore: linting

* test: add tests for the Spaces Sidebar

* chore: named imports and import updates for better readability

* tests: update tests

* refactor: rename useIsActiceMember to useIsActiveMember

* feat: add aria labels for accessibility

* refactor: separate file and tests for utils functions

* test: add test ids to Tx; extract the id getter to utils

* refactor: adjust tests; move consts in a separate file

* chore: linting

* feat(web): replace spaces dashboard balance card with action header (#7224)

* feat(web): add address book onboarding step and step indicator component

* refactor(web): move onboarding components into spaces feature directory

* fix(web): fix spaces onboarding component imports and props

* feat(web): restructure invite members form

* chore(web): restructure invite members component

* feat(web): increase wrapper container width

* feat(web): add storybook stories for onboarding components

Add missing stories for SelectSafesOnboarding and StepIndicator.
Fix CORS errors in existing onboarding stories by adding spaceId
query param and mocking spaces API endpoints (owned safes, safe
overviews, members, mutations) via MSW handlers.

* feat(web): adjust types import

* fix(web): fix type import and UseGuard type errors

Replace inline `import()` type annotations with proper UseFormReturn import
and remove unused parameter from UseGuard type to match implementation.

* feat(web): add aggregated balance header with actions to spaces dashboard

Replace the chain-breakdown balance card with a new DashboardHeader
that shows total value and quick-action buttons (send, swap, build tx).

* fix: fix action buttons wrap in mobile browser

---------

Co-authored-by: Tong Yao <[email protected]>

* Redesign accounts component (#7246)

* feat(web): add address book onboarding step and step indicator component

* refactor(web): move onboarding components into spaces feature directory

* fix(web): fix spaces onboarding component imports and props

* feat(web): restructure invite members form

* chore(web): restructure invite members component

* feat(web): increase wrapper container width

* feat(web): add storybook stories for onboarding components

Add missing stories for SelectSafesOnboarding and StepIndicator.
Fix CORS errors in existing onboarding stories by adding spaceId
query param and mocking spaces API endpoints (owned safes, safe
overviews, members, mutations) via MSW handlers.

* feat(web): adjust types import

* fix(web): fix type import and UseGuard type errors

Replace inline `import()` type annotations with proper UseFormReturn import
and remove unused parameter from UseGuard type to match implementation.

* feat(web): redesign spaces dashboard AccountsWidget

Integrate AccountItem.Balance, AccountItem.ChainBadge, and useSpaceAccountsData
hook into the AccountsWidget. Replace MUI components with shadcn equivalents in
AccountItemChainBadge. Add clickable account items with router.push navigation,
hover states, and unit tests.

* refactor(web): use AccountItemChainBadge in SafeCardLayout and polish widget

Replace ChainLogo with AccountItem.ChainBadge in the SafeCardLayout
onboarding component. Adjust dashboard grid and list limit, and minor
widget layout tweaks.

* fix(web): only render AccountsWidget footer when remainingCount is defined

* fix(web): remove conditional margin on WidgetFooter text

* fix(web): use correct shadcn Button variant in AddAccounts dialog

* refactor(web): split AccountsWidget item into separate components

Extract AccountWidgetItem (single-chain), ExpandableAccountItem (multi-chain),
and AccountItemContent (shared row layout) into separate files. Hide threshold
badge when account has subAccounts.

* chore: fix prettier formatting in chromatic workflow

* fix(web): add Redux provider to AccountsWidget stories

FiatValue uses useAppSelector which requires a Redux context.

* fix(web): resolve nested button hydration error in AccountItemChainBadge

Render TooltipTrigger as a <span> instead of <button> to avoid
invalid HTML nesting when used inside CollapsibleTrigger.

* refactor(web): move AccountsWidget to feature architecture pattern

* fix(web): add data-testid back

* fix(web): unit tests for the account widget

---------

* refactor: refactor dashboard header (#7252)

* feat(web): add address book onboarding step and step indicator component

* refactor(web): move onboarding components into spaces feature directory

* fix(web): fix spaces onboarding component imports and props

* feat(web): restructure invite members form

* chore(web): restructure invite members component

* feat(web): increase wrapper container width

* feat(web): add storybook stories for onboarding components

Add missing stories for SelectSafesOnboarding and StepIndicator.
Fix CORS errors in existing onboarding stories by adding spaceId
query param and mocking spaces API endpoints (owned safes, safe
overviews, members, mutations) via MSW handlers.

* feat(web): adjust types import

* fix(web): fix type import and UseGuard type errors

Replace inline `import()` type annotations with proper UseFormReturn import
and remove unused parameter from UseGuard type to match implementation.

* feat(web): add aggregated balance header with actions to spaces dashboard

Replace the chain-breakdown balance card with a new DashboardHeader
that shows total value and quick-action buttons (send, swap, build tx).

* fix: fix action buttons wrap in mobile browser

* refactor: refactor dashboard header

---------

Co-authored-by: Clovis da Silva Neto <[email protected]>

* feat(web/Spaces): New sidebar - Safe level (#7251)

* feat: initial Spaces sidebar built into the UI

* feat: extended props and hooks for the spaces selection dropdown

* feat: Spaces selector dropdown

* feat: navigation in the Spaces sidebar

* fix: minor UI fixes for the Spaces sidebad

* fix: UI fixes for minimized sidebar and the Help section

* feat: sidebar for mobile

* feat: remember sidebar state

* fix: Space selector dropdown on mobile; formatting

* fix: z-index for sidebar on mobile

* fix: remove tx number

* fix: disabled Security + Settings btns for non-members

* fix: stories UI for the Spaces-level sidebar

* refactor: remove nested buttons

* chore: linting

* test: add tests for the Spaces Sidebar

* chore: named imports and import updates for better readability

* tests: update tests

* refactor: rename useIsActiceMember to useIsActiveMember

* feat: add aria labels for accessibility

* refactor: separate file and tests for utils functions

* test: add test ids to Tx; extract the id getter to utils

* refactor: adjust tests; move consts in a separate file

* chore: linting

* feat: initial Safe sidebar

* fix: remove overlapping tooltip to make sidebar links clickable

* fix: dark theme for shadcn

* fix: minor UI fixes for the toggled sidebar

---------

Co-authored-by: Clóvis Neto <[email protected]>

* tests: update storybook snapshots for chain/network logo min-width (#7258)

* fix(web/Spaces): UI fixes; Receive btn fixes (#7260)

* fix: UI fixes; Receive btn in Space opens the QR code modal for the 1st safe

* fix: Sidebar styles

* fix: Sidebar Tx btn stays active on both /transactions/history and /transactions/queue

* fix(web): remove flaking test

* feat(web): move accounts widget to be part of MyAccounts feature (#7264)

* feat: create new safe account overview (#7262)

* fix(web/Spaces): hydration guard for the sidebar + stories adjustments (#7274)

* feat: hydration guard for the sidebar; adjust stories; add sidebar skeleton

* tests: add tests for the hydration guard and for stories

* fix(web/Spaces): multiple fixes for the Safe-level dashboard (#7278)

* chore: remove deprecated mark from components that are not deprecated

* fix: every tx in the Pending Tx widget is clickable

* fix: show View All Assets btn in case if N Assets >0; adjust styles for the widget footer

* fix: makwe the entire Assets widget clickable

* fix: show "No tx / No assets" text when no tx or no assets for the account

* fix: Manage Safe btn styles

* fix: UI fixes across new compoennts

* fix: loading spinner when balances loading instead of 0

* fix: hide Tx and Security links in the Spaces Sidebar

* fix: styles for the Pending Tx description

* fix: CTA styles

* fix: CTA styles

* refactor: use existing formatting function for hte Pending TX

* test(web/Spaces): extend Sidebar test suite (#7298)

* tests: add new Sidebar tests; adjust existing ones; remove redundant

* tests: add tests for Geoblocking for the sidebar

* fix: checkbox / toggle border

* chore: typing

* chore: minor cleanup

* chore: remove redundant mock

* feat(web): add topbar with wallet and notifications popovers (#7290)

* feat(web): add topbar with wallet and notifications popovers

Introduce a new Topbar component replacing the old Header, with wallet
popover as a lazy-loaded feature and notifications popover. Update
HeaderNavigation to accept mouse events and refine button sizing.

* fix(web): restore missing data-testid attrs and renewal hook in NotificationsPopover

Add back useShowNotificationsRenewalMessage() call and data-testid
attributes that existed in the old NotificationCenter component.

* fix(web): read unread count from Redux instead of stale ref

The notification badge never updated because unreadCount was read from
a ref during render, which doesn't trigger re-renders. Now Topbar reads
directly from the Redux store so the badge updates reactively.

* tests(web): add unit tests for Topbar, NotificationsPopover and useNotificationsPopover

Cover the notification badge reactive update from Redux, data-testid
attributes, push notifications settings visibility, unread count display,
chronological sorting, expand limit, clear all, and the renewal hook call.

* fix(web): remove wallet feature flag

---------

* chore(design): fix design systems, wrap all Storybook stories with ShadcnProvider (#7307)

* chore: align shadcn design system with dev branch

Remove CSS workarounds from epicSpaces that were superseded by the
scoped Tailwind preflight merged to dev (#7227). Reset globals.css,
shadcn.css, and Storybook preview configs to match dev while keeping
the popover color and sidebar z-index customizations needed by Spaces.

* fix: wrap all Storybook stories with ShadcnProvider

Non-UI stories (e.g. Spaces) that use shadcn components need the
.shadcn-scope CSS variables for proper rendering, especially in dark
mode. The real app wraps everything with ShadcnProvider — Storybook
should match that.

* fix: make ShadcnProvider opt-in for Storybook stories

Remove global ShadcnProvider wrapping from preview.tsx. Instead:
- fullPage/withSidebar layouts auto-wrap with ShadcnProvider (sidebar needs it)
- Stories opt in via `shadcn: true` on withMockProvider/createMockStory
- UI/ stories still get ShadcnProvider globally (unchanged)

* fix: move shadcn CSS import out of global Storybook preview

Move shadcn.css and shadcn-stories.css imports from preview.tsx into
a dedicated .storybook/shadcn.ts module that co-locates the CSS with
ShadcnProvider. This keeps the global preview clean while ensuring
shadcn stories still get their CSS (scoped to .shadcn-scope).

Also removes a duplicate shadcn.css import in _app.tsx.

---------

* fix(web): use previous queue logic in the new pendingTx list (#7302)

* fix(web): use previous queue logic in the new pendingTx list

* chore(web): fix prettier formatting in SafeWidgetRoot and PendingTxList

---------

* fix: bring back the old dashboard safe view (#7310)

* fix: bring back the old dashboard safe view

* fix: add new overview to route

* fix: undeprecate the old files

* fix: resolve spaces dashboard refresh issue (#7311)

Await connectLastWallet to ensure wallet is ready before setting
walletReady flag, fix router guard to only check SIWE authentication
(not wallet connection), add loading state for AccountsWidget, and
remove debug console.log statements.

* fix(web): storybook build (#7317)

* fix(web): remove SIWE requirement on home screen and clean up flow guard (#7314)

* fix: add back the old topbar and sidebar for safe view (#7318)

* fix: add back the old topbar and sidebar for safe view

* fix: fix prettire and fix the tests failing caused by PR #7314

* chore: update snapshots (#7325)

* feat(web/Spaces): Remove the Addressbook step and CTA buttons from the Spaces UI (#7324)

* feat: remove the CTA buttons from Spaces Dashboard UI

* feat: no Address Book step in the Onboarding flow

* chore: remove redundant Addressbook

* fix: Create Space btn redirects to the new Onboarding flow instead of old modal (#7332)

* feat(web): add empty, error, and identicon states to AccountsWidget (#7340)

* feat(web): add empty, error, and identicon states to AccountsWidget

Add SafeWidget.EmptyState and SafeWidget.ErrorState compound components
for reusable widget states. Wire them into AccountsWidget with identicon
avatars using blo, and cover with unit tests and Storybook stories.

* tests(web): fix useFlowActivationGuard tests after SIWE guard refactor

Mock useIsSpaceRoute and use space routes in tests that verify redirect
behavior, since non-space routes are now intentionally public.

* tests(web): fix remaining useFlowActivationGuard test assertions

Update 3 tests to expect redirect to /welcome for space routes that are
not public: unauthenticated users and invalid spaceId scenarios.

---------

* fix(web): allow unselecting already-added safes in onboarding (#7347)

* feat(web): pass spaceId to create-space page for editing existing spaces

When navigating back from select-safes to create-space, the spaceId is
now passed as a query parameter. The create-space page fetches the
existing space name, shows a loading spinner, and uses the update API
instead of create when editing.

* fix(web): allow unselecting already-added safes in onboarding and fix skip navigation

- Remove alreadyAdded guard so users can unselect pre-checked safes
- Pre-populate form with already-added safes as initial checked state
- Add remove API call for unselected safes on submit
- Only call add/remove APIs when there are actual changes (fixes empty array validation error)
- Fix skip button to navigate to invite members step instead of dashboard

* feat(web): adjust code complexity

* tests(web): add unit tests for useOnboardingSubmit hook

* fix(web): fix type error in useSpaceSubmit catch block

Replace @ts-ignore with proper type assertion for error object.

* refactor(web): replace ts-ignore with getRtkQueryErrorMessage

Use the existing getRtkQueryErrorMessage utility instead of @ts-ignore
or manual type casts for RTK Query error handling in space hooks.

* tests(web): fix useOnboardingSubmit error mock shapes

Add missing `status` property to RTK Query error mocks so
getRtkQueryErrorMessage treats them as FetchBaseQueryError
instead of SerializedError.

* refactor(web): reduce complexity in useOnboardingSubmit and fix ts-ignore in SafeCard

Extract processSelectedSafes helper to reduce onSubmit complexity.
Replace @ts-ignore with proper type assertion for watch() overload.

---------

* feat: Add dropdown list to safe view (#7354)

* feat(web/Spaces): API component in the sidebar (#7369)

* feat: initial API Sidebar component + story

* feat: remove the Prod CGW toggle from the sidebar

* fix: styles for minimized sidebar

* feat: invert SVG colors when in dark mode

* fix: UI fixes for the API Sidebar

* test: add tests for the new API Sidebar component

* feat: sidebar on mobile screens + tests

* refactor: reduce conditional complexity

* feat: color marking for spaces

* refactor: replace inline calls with var

* fix: spaces input fields sanitization and address validation (#7368)

* fix: remove console.log

* fix: input validations

* fix: onboarding on dark mode

* fix(web): wait until useRouter is ready

* fix(web): do not allow user to select duplicated address

* refactor: extract address validation and fix debounced error display

Extract validateEthereumAddress into a standalone function to reduce
cyclomatic complexity. Fix debounce logic to operate on the error
message string directly instead of the error object.

---------

* feat(web): add back to space button and mobile responsive fixes (#7380)

* feat: add Typography component and migrate epicSpaces to use it (#7384)

* feat: add Typography component to design system

- Add Typography component with variant, align, color props
- Map Figma typography styles to component variants
- Add m-0 to reset default margins on block elements
- Add design.figma-to-code reference for Typography mapping

* chore: add motion resolution for Storybook

Force [email protected].0 to fix motion/react import resolution in Vite Storybook

* feat: migrate epicSpaces components to Typography

Replace raw Tailwind/MUI typography with Typography component in:
- spaces: SafeWidget, SafeSelectorDropdown, onboarding, Sidebar, SpaceCardNew, TotalValueElement
- myAccounts: AccountItemBalance, AccountItemContent

* feat(web): implement trusted safe and similar address detection in onboarding flow (#7389)

* feat(web/Spaces): Dark theme adjustments (#7398)

* feat: adjust shadcn tokens for dark mode; adjust dark mode view in Spaces

* feat: Safe logo changes color depending on theme

* fix: sidebar elements colors in dark mode

* test: adjust unit tests

* feat: adjust font weight for Add Accounts btn

* refactor: add a mask for SVG color swap (dark mode) to decrease the bundle

* fix: remove autofill so the browser does not apply white bg in dark theme automatically

* fix(web/Spaces): redirect to `/welcome/spaces` when not SIWE-authenticated (#7383)

* fix: redirect user to the welcome page if auth is expired

* refactor: move the redirect logic to the Flow Activation Guard to avoid having multiple hooks

* test: add tests for the redirection logic

* fix: remove redundant isStoreHydrated check as it was duplicated

* refactor: rm redundant code; feat: go to /welcome/spaces (not /welcome) when redirected from Spaces route

* fix(web/Spaces): UI fixes for layout shift and border raduis (#7419)

* fix: layout shift fixes which were introduced after design system upgrade

* fix: Address Book layout

* fix: btn radius sm (8px) instead of md or lg

* chore: formatting

* feat(web): pending transactions widget for spaces dashboard (#7408)

* feat(web): add subtitle prop to WidgetEmptyState

Support an optional subtitle below the main text, using paragraph-bold
for the title and paragraph-small for the subtitle.

* feat(web): redesign WidgetErrorState to match Figma

Update icon from TriangleAlert to CircleAlert, add subtitle text,
change default message to "Unable to load content", and switch
reload button to primary variant with "Reload page" label.

* feat(mobile): redesign ErrorWidget to match Figma

Add alert icon badge, configurable message prop, subtitle text,
and optional reload button. Include unit tests covering all states.

* fix: accounts appearance

* feat(web): fetches queued transactions across all safes in a space. Adds the
  useSpacePendingTransactions hook with tests, updates PendingTxWidget to
  render actual transaction data, and exports getTransactionQueue cursor
  option.

* fix(web): accounts widget font and topbar spacement

* feat(web): fix assets widget unit tests

* feat(web): add navigation to transaction detail from pending tx widget

Link each pending transaction item in the spaces dashboard to its
detail page using the safe query param (shortName:address).

* fix: fix knip-export by claude

* fix: import pendingTxWidget by useLoadFeature

---------

Co-authored-by: Tong Yao <[email protected]>

* fix(web/Spaces): consistent colors for Space avatars across the app (#7429)

* fix: deterministic avatar color for Spaces on all pages

* fix: UI: Spaces avatars shape in the dropdown

* refactor: move classes to the css module

* feat: add ident icon and bold address (#7411)

* fix(web/Spaces): remove obsolete buttons (#7430)

* feat: remove obsolete buttons

* fix: add mock provider for Storybook stories to enable correct story rendering

* fix(web): add special characters validation to space name field (#7432)

Adds a pattern validation to the space name input that only allows
letters, numbers, and spaces. Also updates maxLength from 50 to 30.

* fix(web/Spaces): remove accounts counter (#7434)

* feat: remove accpounts counter; add new prop to define the View All layout in the custom widget

* fix: show identicon for multichain Safes

* fix: revert back the address fix to avoid conflicts

* tests(web): fix flaky visual tests and add spaces welcome screenshot (#7431)

Remove enableChainFeature() calls from visual tests — the feature flags
are already in the chains fixture, and enableChainFeature uses
req.continue() which bypasses fixture mocks and hits the real staging
server, causing flaky failures.

Also add visual test coverage for the /welcome/spaces page.

* fix(web): refactor AccountWidgetItem to use shared WidgetItem component (#7435)

* fix(web): refactor AccountWidgetItem to use WidgetItem component

Align AccountWidgetItem with the shared WidgetItem layout used by
PendingTxWidget. Add hover effect to WidgetFooter for consistency.

* fix(web): pass full address instead of shortened in account data

Remove id field from Account type and pass the full address so
components can use it for Identicon rendering and shorten as needed.

* fix(web): remove id from Account type, fix references to use address

Update tests and stories to use full-length addresses now that
components handle shortening internally.

---------

* fix(web/Spaces): UI fixes for the sidebar and the dark mode (#7445)

* fix: sidebar UI fixes

* fix: UI foxes for the Sidebar footer

* fix: theme-dependent colors foer icons in Pending Tx Widget

* feat: expand layout when sidebar is collapsed

* feat: primary and secondary btns adjustments; badge for API CTA

* test: adjust tests

* fix: decrease sidebar z-index

* test: add tests; refactor: rm hardcoded css values

* fix: API CTA text; background color in dark mode (#7451)

* feat(web): implement chain selector and fix ui styling (#7442)

* feat: chain selector

* refactor: remove unused hasChains variable from useSafeSelectorState

* fix: fix the height of account selector

* fix: adjust the hover background color and the position of dropdown list

* fix: remove the boarder color of dropdown list

* fix: adjust shadow and padding of logo

* fix: delete the vertical line between fiat value and chevron

* fix: only show SpaceSafeBar in home page

* fix: fix the storybook component

* feat: add display naming hook

* fix: fix claude comment

* fix: skip infura api call when the name existing

* fix: disable the ens name for selectorDropDowb

* fix: fix the chain selector story

* fix: fix the black border of the chain selector block

---------

* fix(web): onboarding design QA improvements (#7443)

* fix(web): refactor AccountWidgetItem to use WidgetItem component

Align AccountWidgetItem with the shared WidgetItem layout used by
PendingTxWidget. Add hover effect to WidgetFooter for consistency.

* chore: change copy

* fix(web): onboarding design QA improvements

- Fix role dropdown positioning to open below and left-aligned
- Reduce gap between submit and skip buttons to 20px
- Add chain prefix stripping on paste for address inputs
- Extract SafeCardLayout component and fix shortened address test

* chore: fix type-only import in SafeCardLayout

* fix(web): remove undefined property

---------

* fix(web): fix PageLayout CSS module purity error and space dashboard UI fixes (#7446)

Fix CSS module selector purity error by removing :global(:root) and using
@reference for Tailwind utilities. Adjust topbar positioning, notification
badge styling, and popover anchor offsets for spaces dashboard.

* fix(web): remove redirect to welcome screen on wallet disconnect (#7447)

* fix(web): add animations and back button to CreateSpaceOnboarding (#7449)

Add staggered entry animations, animated background orbs, floating
Safe logo, and inline back button matching SelectSafesOnboarding pattern.

* fix(web): redirect new users to create space after sign-in on spaces list (#7458)

Refactor useSignInRedirect to be driven by reactive spaces data instead
of imperative lazy queries. After signing in, new users (no spaces, no
invites) are redirected to the create-space page. The hook now receives
spacesAmount, inviteAmount, isSpacesLoading, and error as props from
SpacesList, and uses a hasSignedIn flag to trigger the redirect effect.

* fix(web/Spaces): UI fixes for the Safes list in the Onboarding flow (#7454)

* fix(web): refactor AccountWidgetItem to use WidgetItem component

Align AccountWidgetItem with the shared WidgetItem layout used by
PendingTxWidget. Add hover effect to WidgetFooter for consistency.

* chore: change copy

* fix(web): onboarding design QA improvements

- Fix role dropdown positioning to open below and left-aligned
- Reduce gap between submit and skip buttons to 20px
- Add chain prefix stripping on paste for address inputs
- Extract SafeCardLayout component and fix shortened address test

* chore: fix type-only import in SafeCardLayout

* fix(web): remove undefined property

* fix: no vertical scrolling on the Add Safes page

* fix: theme-dependent scrollbar

* refactor: move too long tailwind classes in separate css modules for better readability

---------

Co-authored-by: Clovis da Silva Neto <[email protected]>

* fix(web/Spaces): fix issues in the Onboarding flow (#7470)

* fix: onboarding flow flickering and back btn on the 1st step

* fix: add back inline css instead of modules

* fix(web): avoid rate limiting in space pending transactions (#7466)

* fix(web): avoid rate limiting in space pending transactions

Use Safe overview endpoint to pre-filter safes with queued
transactions before fetching individual queues. Adds sequential
requests with delay to prevent CGW rate limiting.

- Extract useSpaceSafesWithQueue hook using overview endpoint
- Serialize queue fetches with 300ms delay between requests
- Update SKELETON_COUNT to 4 for better loading UX
- Update tests to mock new hook

* refactor(web): optimize space pending transactions fetching and improve loading UX

* fix(web): align test mock with isFetching used in useSpaceSafesWithQueue

The hook uses `isFetching` for the space safes query but the test mock
was returning `isLoading`, causing the isLoading assertion to fail.

---------

* fix: sanity check (#7477)

* feat(web/Spaces): Tracking events (#7388)

* feat: mapping of new Spaces events

* feat: tracking events for SIWE + tests

* fix: SIWE tracking events are firing for both GA and MP

* feat: add tracking events for Space creation

* feat: add events for Spaces Invites (sent / accepted / declined)

* test: add tests for tracking events to add member / accept / decline invite

* feat: add tracking events for Accounts Widget

* test: add a test for Accounts Widget tracking events

* feat: add tracking events (safe + chain) for the Safe Selector Dropdown

* test: add tests for Safe selection and chain change events

* feat: add tracking events fro Pending Tx Widget

* test: add tests for tracking eventa for Pending Tx Widget

* feat: tracking event for Spaces Entry view + tests for this event

* feat: add tracking events for wallet switch / wallet disconnected btn clicks on Spaces level

* fix: linting

* test: add a test to ensure event firing on spaceId change

* fix: wallet events should be tracked only in Spaces

* refactor: remove rediundant type check for undefined spaceId

* refactor: update imports, add mixpanel enum to events

* test: fix tests

* feat: upgrade network selector dropdown (#7468)

* fix(web/Spaces): multiple UI fixes for Spaces for small screens (#7479)

* fix: no overlap on mobile screens in the widget

* fix: topbar fixes for mobile screens

* fix: Account Widget styles on mobile screens

* fix: toggle switch styles for light mode

* fix: restore NFTs Feature export (#7478)

* fix: storybook typing

* fix(web/Spaces): main header redirect (#7481)

* fix: header redirect to /welcome/accounts instead of Spaces

* fix: impotrts

* fix: logo in the header redirects to /welcome/accounts always

* fix(web): fix white screen on onboarding flow (#7476)

* fix(web): fix white screen on onboarding flow

Remove wallet and authentication guard checks from onboarding
components that were causing white screen flashes. These checks
are redundant as the routing layer already handles auth guards.

* fix(web): add outline variant for add account button in light mode

Also clean up unused wallet/auth imports in CreateSpaceOnboarding.

* fix(web): show connect wallet prompt when no wallet connected in onboarding

When no wallet is connected, the onboarding safe selection screen now
shows a connect wallet button instead of an empty safes list.

---------

* fix: fix button margin and drop down (#7482)

* fix: fix styling of safespacebar

* fix: fix the component height

* fix: adjust No Assets layout for Safes with TVL 0 (#7484)

* fix: correct copy for Spaces Onboarding

* fix: delete the z-index (#7487)

---------

Co-authored-by: valleXYZ <[email protected]>

Co-authored-by: Clóvis Neto <[email protected]>
Co-authored-by: Tong Yao <[email protected]>
Co-authored-by: katspaugh <[email protected]>
Co-authored-by: Tong Yao <[email protected]>

Co-authored-by: Hanzo Dev <[email protected]>
2026-03-19 15:44:20 +01:00

12 lines
410 B
YAML

# CodeScene Configuration
# https://docs.enterprise.codescene.io/latest/configuration/code-health-configuration.html
version: 2
# Exclude paths from code health analysis
exclude:
- pattern: 'apps/web/src/components/ui/**'
reason: 'shadcn UI components are semi-auto generated from templates'
- pattern: 'apps/web/src/components/ui/stories/**'
reason: 'Storybook stories for shadcn UI components'