3 people 673d5f950d Feat(Hypernative): integration Milestone 1 (#6598) ...

* Feat(Hypernative): add HN banner component (#6583)

- Reusable PromoBanner (`apps/web/src/components/common/PromoBanner/PromoBanner.tsx + styles`): configurable title/description, CTA with tracking, optional image, dismiss button, custom colors.
- HnBanner (`apps/web/src/features/hypernative/components/HnBanner/HnBanner.tsx`): uses PromoBanner, sets copy/CTA, tracking events, custom gradient, icon.
- Add `apps/web/public/images/hypernative/guardian-badge.svg`.
- Storybook story for `HnBanner`.

* Feat(Hypernative): Add guard detection service and hook (#6589)

* Feat(Hypernative): Add guard detection service and hook

Implement functionality to detect if a Safe has a HypernativeGuard installed by comparing the guard contract's bytecode hash against known HypernativeGuard deployments.

Features:
- Service layer with isHypernativeGuard() function to check guard contracts
- React hook useIsHypernativeGuard() that returns { isHypernativeGuard, loading }
- Comprehensive test coverage (18 tests, all passing)
- Utility script to fetch and hash contract bytecode
- Example components showing usage patterns
- Full documentation in README.md

The service fetches the guard contract bytecode, hashes it using keccak256, and compares it against known HypernativeGuard code hashes for the current chain. The hook automatically checks the current Safe's guard from useSafeInfo() and handles all edge cases.

* Refactor: Simplify guard detection to use single code hash

Simplify HypernativeGuard detection based on feedback:
- Remove per-chain hash storage (HypernativeGuard uses same bytecode across all chains)
- Remove chainId parameter from isHypernativeGuard() function
- Remove fetchGuardCodeHash utility script (no longer needed)
- Replace console.error with logError(Errors._809) for proper error tracking
- Update all tests to reflect simplified implementation (17 tests passing)
- Update documentation and examples to remove chain-specific references

The HYPERNATIVE_GUARD_CODE_HASHES is now a simple string array instead of a Record<chainId, hashes[]>, reflecting that HypernativeGuard uses deterministic deployment with the same bytecode on all chains.

* Remove examples folder, move examples to README

- Remove src/features/hypernative/examples/ folder
- Add example code directly to README.md
- Keep documentation in one place for easier maintenance

* Add actual HypernativeGuard bytecode hash

- Fetch bytecode from Sepolia deployment at 0x4784e9bF408F649D04A0a3294e87B0c74C5A3020
- Hash: 0x1e1d445308b347e310f37bba7088b6d0d640faa626e0bbbba35296a1112f9b78
- This hash is valid across all chains (deterministic deployment)
- All 17 tests passing

* Fix race conditions and stale state issues in useIsHypernativeGuard

Fixes four related bugs identified in PR review:

1. Reset guard state when Safe fails to load
   - Now resets isHnGuard to false when !safeLoaded
   - Prevents stale "true" state from previous Safe

2. Reset guard state when provider becomes unavailable
   - Now resets isHnGuard to false when !web3ReadOnly
   - Prevents showing stale results without provider

3. Add async cleanup to prevent updates on unmounted component
   - Implements cancellation flag to prevent setState after unmount
   - Avoids React warnings about setState on unmounted components

4. Prevent race conditions from stale async requests
   - Cancels effect when dependencies change
   - Ensures slow requests from old Safes don't overwrite current state
   - Example: Switch from Safe A → Safe B before A's check completes

Added 3 comprehensive tests:
- Race condition test with controlled promises
- State reset test when Safe unloads
- State reset test when provider unavailable

All 10 tests passing (previously 7).

* Refactor: Make useIsHypernativeGuard more functional with useAsync

Refactor from imperative to functional approach:

Before:
- Manual state management with useState
- Imperative useEffect with async function
- Manual cancellation flag tracking
- 79 lines of imperative code

After:
- Declarative with useAsync hook (existing utility)
- All state management and cleanup handled by useAsync
- Automatic race condition prevention via useAsync's isCurrent flag
- 48 lines of functional code (-31 lines, -39%)

Benefits:
- More functional and declarative
- Easier to read and reason about
- Less error-prone (no manual state management)
- Consistent with codebase patterns (useTxQueue, useTxHistory, etc.)
- useAsync handles cleanup/cancellation automatically
- No flickering (clearData: false parameter)

All 10 tests still passing.

* Replace console.error with logError in hook

- Replace console.error with logError(Errors._809, error)
- Update test to check for logError instead of console.error
- Consistent with service layer error handling
- All 10 tests passing

* Fix prettier and eslint issues

- Format all hypernative files with prettier
- Fix unused variable in test (isHypernativeGuardSpy)
- All checks passing: ✅ prettier ✅ typescript ✅ eslint

---------

* refactor(Hypernative): Add PromoBanner Storybook story and refactor dashboard banners (#6599)

* feat: Add PromoBanner Storybook story and refactor dashboard banners

- Add comprehensive Storybook story for PromoBanner component with 5 variants
- Refactor StakeBanner, SpacesBanner, and EarnBanner to use shared PromoBanner component
- Add min-height (131px) to PromoBanner to prevent page jumping when banners rotate
- Reduce code duplication across NewsCarousel banner components

This improves code maintainability by consolidating banner implementations
into a single, reusable PromoBanner component while preserving all existing
functionality and analytics tracking.

* refactor: Update PromoBanner story to use Spaces illustration and banner color scheme

- Use spaces-illustration.png instead of hypernative badge
- Apply the standard banner gradient (linear-gradient(90deg, #b0ffc9, #d7f6ff))
- Use consistent font color (var(--color-static-light)) across all stories
- Maintain WithCustomColors variant to demonstrate customization options

* feat: Add customTitleColor prop to PromoBanner for light backgrounds

- Add customTitleColor prop to PromoBannerProps interface
- Update PromoBanner component to use customTitleColor with fallback to white
- Update all NewsCarousel banners to use static.main for title (dark text)
- Update story examples to use proper colors for light gradient backgrounds

This ensures the banner text is readable on light gradient backgrounds
while maintaining flexibility for dark backgrounds like HnBanner.

* refactor: Set default PromoBanner styles and move inline styles to CSS

- Set default gradient background and dark text colors in PromoBanner CSS
- Move all inline styles from JSX to CSS classes for better maintainability
- Remove unnecessary custom color props from NewsCarousel banners (use defaults)
- Add custom colors back to HnBanner for dark background compatibility
- Update story file to use component defaults

This makes PromoBanner work out-of-the-box for light backgrounds while
still supporting customization for dark backgrounds like HnBanner.

* fix: Add !important to CTA button styles to override MUI defaults

- Add !important to margin-top to ensure top spacing is preserved
- Add !important to margin-left: 0 to remove unwanted left margin
- Add !important to padding values to prevent MUI overrides
- Add !important to endIcon margin-left

* fix: Fix banner colors with !important and add customCloseIconColor prop

- Add !important to customBackground sx prop to ensure it overrides CSS
- Add !important to customCtaColor sx prop to override CSS defaults
- Add customCloseIconColor prop to allow white close icon on dark backgrounds
- Update HnBanner to use white close icon color
- Fixes default banner background, HnBanner CTA color, and HnBanner close icon color

* fix: Fix default banner background and HnBanner CTA color

- Add !important to default background gradient in CSS to override MUI Card
- Add !important to customTitleColor and customFontColor sx props
- Remove color="static" prop from Button when customCtaColor is provided
- This ensures custom colors properly override defaults in HnBanner

* fix: Use CSS variable for white color in HnBanner

- Change customTitleColor to var(--color-background-paper)
- Change customCtaColor to var(--color-background-paper)
- Change customCloseIconColor to var(--color-background-paper)
- This ensures white color works in both light and dark modes

* feat: Add --color-static-white CSS variable for white text on dark backgrounds

- Add --color-static-white: #ffffff to vars.css for both light and dark modes
- Update HnBanner to use var(--color-static-white) for title, CTA, and close icon
- This provides a consistent white color that works in both themes

* refactor: Rename --color-static-white to --color-static-primary

- Rename CSS variable to follow existing naming convention
- Update HnBanner to use var(--color-static-primary)
- Maintains consistency with --color-static-main and --color-static-light

* fix: Address PR feedback for PromoBanner refactor

- Restore AppRoutes.earn && guard in EarnBanner and StakeBanner
- Make endIcon CSS selector more specific with :has() pseudo-class
- Simplify conditional color prop from spread to ternary expression
- Remove redundant media query that duplicated default padding-right
- Restore mobile column layout (xs: 'column', md: 'row') and remove flex-wrap: nowrap
- Fixes P1: Mobile layouts now stack image above text as in original banners

* style: Run prettier on modified files

---------

* feat(Hypernative): Pending banner (#6602)

* Feat(Hypernative): pending banner draft

* Feat(Hypernative): dark/light theme adjustments

* Refactor(Hypernative): replace haredcoded CSS values with vars

* Feat: multiple UI fixes for smaller screens

* Fix(Hypernative): formatting, linting

* Fix(Hypernative): icon size mismatch

* Fix(Hypernative): closing btn styles

* Fix(Hypernative): UI fixes in PromoBanner to avoid breaking the HnBanner

* Feat(Hypernative): hide the PromoBanner image on mobile screen sizes

* Fix(Hypernative): formatting

* Fix(Hypernative): rm hardcoded css values; formatting

* feat(Hypernative): Add HubSpotForm component (#6601)

* feat(Hypernative): Add HubSpotForm component with Storybook story

Add a new HubSpotForm component that renders a HubSpot form embedded via external script. The component includes a title, description, and the form wrapped in a Paper container with static-primary background to ensure proper display in both light and dark modes.

* fix(Hypernative): Address PR feedback for HubSpotForm component

- Reset scriptLoadedRef in cleanup to allow script reload on remount
- Make region prop configurable with 'eu1' as default value
- Add region to useEffect dependency array

* fix(Hypernative): Use static colors and wrap entire HubSpotForm in Paper

- Wrap entire component (title, paragraph, form) in Paper with static background
- Use var(--color-static-main) for title text
- Use var(--color-static-light) for paragraph text
- Ensures consistent colors across light and dark modes

* Fix: increase margin

---------

* feat(Hypernative): Add HnSignupFlow modal component with stepper (#6604)

* feat(Hypernative): Add HnSignupFlow modal component with stepper

- Create HnModal component with theme-aware styling
- Create HnSignupIntro component (first step) with:
  - Guardian branding and Hypernative logo
  - Three feature highlights with checkmarks
  - Get started and Close action buttons
  - Two-column layout with fixed 288px right side
  - Gradient background with Safe Shield image
- Create HnSignupFlow component with multi-step flow
- Add Storybook stories for all components
- Use CSS modules with CSS variables from design system
- Support light and dark modes automatically
- Add Redux StoreDecorator for Storybook
- Use Grid2 (Grid is deprecated)

* Fix: simplify CSS

* Delete apps/web/public/images/hypernative/hypernative-logo.svg

* refactor(Hypernative): Use Material-UI typography variants in HnSignupIntro

- Replace custom CSS font styles with Material-UI typography variants
- Use h1 for title (32px/700)
- Use body2 for 'powered by' text (14px)
- Use body1 for subtitle and feature titles (16px)
- Use body2 for feature descriptions (14px)
- Remove custom font-size, line-height, and font-weight from CSS
- Keeps only layout and spacing in CSS module

* Fix: fixed modal width

* fix(Hypernative): Close modal on finish instead of resetting to intro

- Rename handleReset to handleFinish for clarity
- Add onClose() call to close modal after completion
- Fixes issue where clicking 'Finish' would show intro step again

* fix(Hypernative): Restore maxWidth prop to HnModal

- Add maxWidth prop back to HnModalProps type
- Pass maxWidth to Dialog component for proper sizing
- Fixes TypeScript errors in HnSignupFlow and stories

* Fix: remove maxWidth prop again

* fix(Hypernative): Address PR review feedback

- Enable scrolling on mobile by changing DialogContent overflow from hidden to auto
- Add top padding to stepper to prevent close button overlap
- Add semi-transparent background to logo in dark mode for better visibility

* feat(Hypernative): Add HnSignupForm as second step in signup flow

- Create HnSignupForm component with HubSpot form embed
- Left column displays form with static white background
- Right column shows the same background as HnSignupIntro
- Remove stepper progress indicator
- Simplify flow to two steps: Introduction and Registration
- Align form content to top to prevent jump when form loads
- Update subtitle text for better clarity

* feat(Hypernative): Use env config for HubSpot and add Cancel button

- Replace hardcoded HubSpot credentials with NEXT_PUBLIC_HUBSPOT_CONFIG env variable
- Add error handling for missing or invalid HubSpot configuration
- Add Cancel button to signup form with negative margin to align with Submit button
- Style Cancel button with static colors for consistency in both light and dark modes

* fix(Hypernative): Remove unused handleFinish function

---------

* Chore: add NEXT_PUBLIC_HUBSPOT_CONFIG to build workflow

* Chore: add NEXT_PUBLIC_HUBSPOT_CONFIG to build-storybook workflow

* Refactor(Hypernative): NoFeeNovemberBanner to use PromoBanner component (#6607)

* Refactor NoFeeNovemberBanner to use PromoBanner component

Consolidates banner implementation to use the reusable PromoBanner component, reducing code duplication and improving maintainability.

## Changes

### PromoBanner Component
- Add support for custom onClick handlers via `onCtaClick` prop
- Add `ctaDisabled` prop for button disabled state
- Change `description` prop to support ReactNode for embedded links
- Make `href` optional (supports both link and onClick patterns)
- Add `.bannerCtaContained` styles for action buttons with static colors
- Add `WithOnClick` Storybook story demonstrating onClick functionality

### NoFeeNovemberBanner
- Refactor to use PromoBanner component
- Maintain CheckWallet wrapper for transaction functionality
- Preserve custom gradient background and styling
- Keep original tracking events and behavior
- Remove unused styles.module.css file

### Button Styling
- Use static color variables for consistent appearance across themes
- Background: `var(--color-static-main)` (always black)
- Text: `var(--color-static-primary)` (always white)
- Proper margin-top spacing with `var(--space-2)`

* Fix PR feedback: make href optional and fix CheckWallet wrapper

- Make href parameter optional and conditionally render link wrapper
- Remove fallback to '#' which created non-functional links
- Fix CheckWallet wrapper blocking close button for ineligible users
- Add JSDoc documentation for description and href props

* Fix banner title font-weight not being bold

Add !important to .bannerTitle font-weight to override MUI inline styles

---------

* Fix: Expose NEXT_PUBLIC_HUBSPOT_CONFIG to Storybook

Added env configuration to Storybook main config to expose the
NEXT_PUBLIC_HUBSPOT_CONFIG environment variable. This ensures that
the HubSpotForm component can access the configuration when Storybook
is deployed from CI.

Without this configuration, Storybook doesn't automatically expose
Next.js environment variables, causing the HubSpotForm to not render
in deployed Storybook builds.

* Feat(Hypernative): Dashboard banner (#6611)

* Feat(Hypernative): Initial DDashboard banner, styles, story

* Refactor(Hypernative): rm obsolete conditional props from the dashboard banner

* Feat(Hypernative): styles adjustments

* Refactor(Hypernative): move some CSS custom properties to vars for a better readability

* Fix(Hypernative): multiple UI fixes (paddings, etc)

* Refactor(Hypernative): rm banner props, put text/images to a config file

* Chore(Hypernative): formatting

* Feat(Hypernative): Add Redux slice for managing HN state per Safe (#6618)

* Feat(Hypernative): Add Redux slice for managing HN state per Safe

- Created hnStateSlice to track banner dismissals and form completion per Safe address
- State is keyed by chainId:safeAddress with three boolean flags: bannerDismissed, formCompleted, pendingBannerDismissed
- Includes individual reducers for each state property and memoized selector for retrieving Safe-specific state
- Automatically persisted to localStorage
- Added comprehensive test suite with 9 passing tests

* Fix: Apply prettier formatting

* Fix: Make git hooks executable

* Feat: Add type-check to pre-commit hook

- Pre-commit now runs type-check on staged TypeScript files
- Prettier already handled by lint-staged configuration
- Hook will fail and prevent commit if type errors are found

* Fix: Remove 'any' types and improve test type safety

- Created getSafeState helper function with proper typing
- Removed all 'any' type assertions from tests
- Updated pre-commit hook to use workspace-specific type-check command
- All tests passing with proper type safety

* Docs: Add pre-commit hook and type safety guidelines to AGENTS.md

- Documented Husky pre-commit and pre-push hooks
- Added guidelines for avoiding 'any' type assertions in tests
- Provided example of proper type-safe test helpers

---------

* Fix(Hypernative): typing

* Feat(Hypernative): Tx Security Review btn (#6613)

* Feat(Hypernative): Create initial HnTxBanner, styles, story

* Feat(Hypernative): link style adjustments; cleanup

* Refactor(Hypernative): rename HnTxBanner to HnSecurityReportBtn for better readability

* Refactor(Hypernative): replace the external link component with an svg icon

* Refactor(Hypernative): replace the component props with a config file

* Fix(Hypernative): fix the btn styles for mobile screens <410px

* Chore(Hypernative): formatting

* Fix(Hypernative): type check

* Fix(Hypernative): styles fixes

* Fix(Hypernative): styles fixes

* Chore(Hypernative): formatting

* Feat(Hypernative): HN link

* Fix(Hypernative): style fixes for the external link wrapper

* Chore(Hypernative): formatting

* Refactor(Hypernative): rm unused svg

* Refactor(Hypernative): move the HN href creation to a helper function

* Refactor(Hypernative): modify the URL setter

* Feat(Hypernative): Higher Order Component (wrapper) for HN banners (#6621)

* Feat(Hypernative): HoC for conditional rendering of HN banner/btn components

* Refactor(Hypernative): rename the HN feature hook for better readability

* Feat(Hypernative): `href` and `isDismissable` props for HnBanner

* Feat(Hypernative): add story for a non-dismissable HnBanner

* Chore(Hypernative): formatting

* Feat(Hypernative): add generic wrapper component that allows importing only one component instead of two; add stories

* Refactor(Hypernative): HnFeatureFlag story: all type-only imports now use import type

* Feat(Hypernative): add dashboard banner with Redux dismiss and env-based thresholds (#6622)

* Feat(Hypernative): create a hook for checking banner conditions;create tests

* Feat(Hypernative): create a upper-level hook with banner conditions

* Feat(Hypernative): create a feature flag hook; add a HN feature to chains

* Refactor(Hypernative): renaming

* Feat9Hypernative): Create a hook to check if HnFeature is enabled

* Refactor(Hypernative): update href in HnBanner

* feat(hypernative): add dashboard banner with Redux dismiss and env-based thresholds

* Chore(Hypernative): formatting, types

* Fix(Hypernative): add Hypernative in the Features enum

* Fix(Hypernative): fix failing tests

* Feat(Hypernative): Add HN banners to the UI (#6623)

* Feat(Hypernative): non-dismissable HnBanner in Settings

* Feat(Hypernative): DashboardBanner (for not activated Safes) in the UI

* Feat(Hypernative): Request form opens on click (Dashboard banner)

* Feat(Hypernative): Request form opens on click (Main promo banner); UI fixes for the banner CTA btn

* Refactor(Hypernative): Add a conditional statement to render the Dashboard banner

* Refactor(Hypernative): Extract common logic into HOCs and rename components

- Create withHnFeature HOC to replace HnFeature component
  - Implements lazy evaluation: checks feature flag before banner visibility
  - Takes bannerType as curried parameter
- Create withHnSignupFlow HOC to extract signup flow logic
  - Provides onHnSignupClick callback and manages HnSignupFlow state
- Rename DashboardBanner → HnDashboardBanner
- Remove HnBannerFlow component
  - Move dismissal logic directly into HnBanner component
- Update HnBanner to handle dismissal and integrate with HOCs
- Export composed HOCs as defaults:
  - HnBanner: withHnFeature(BannerType.Promo)(withHnSignupFlow(HnBanner))
  - HnDashboardBanner: withHnFeature(BannerType.Promo)(withHnSignupFlow(HnDashboardBanner))
- Create HnBannerForCarousel wrapper for dashboard NewsCarousel compatibility
- Update all component imports in SecurityLogin, Dashboard, and FirstSteps
- All tests passing

* Refactor(Hypernative): Rename PendingBanner to HnPendingBanner and apply HOCs

- Rename PendingBanner → HnPendingBanner
- Update HnPendingBanner to extend WithHnSignupFlowProps
- Move dismissal logic into component (using setPendingBannerDismissed)
- Add isDismissable prop (default true)
- Update index to export composed HOCs:
  - withHnFeature(BannerType.Pending)(withHnSignupFlow(HnPendingBanner))
- Export named export for tests/stories
- Update stories with onHnSignupClick prop and NonDismissable story
- All linting and type checks passing

* Refactor(Hypernative): Make banner components pure, extract dismissal logic to wrappers

- Make HnBanner pure component
  - Remove dispatch logic and hooks (useAppDispatch, useChainId, useSafeInfo)
  - Accept onDismiss callback as prop instead of isDismissable
- Make HnPendingBanner pure component
  - Remove dispatch logic and hooks
  - Accept onDismiss callback as prop
- Create HnBannerWithDismissal wrapper
  - Handles Redux store dispatch for setBannerDismissed
  - Provides onDismiss callback to HnBanner based on isDismissable prop
- Create HnPendingBannerWithDismissal wrapper
  - Handles Redux store dispatch for setPendingBannerDismissed
  - Provides onDismiss callback to HnPendingBanner based on isDismissable prop
- Update index files to export wrapped components with HOCs
  - Default exports now wrap the wrapper components (not pure components)
  - withHnFeature(BannerType)(withHnSignupFlow(WrapperComponent))
- Update stories to use pure components with mock callbacks
  - Default story: provides both onHnSignupClick and onDismiss
  - NonDismissable story: onDismiss is undefined
- All tests passing

Benefits:
- Pure components are easier to test and reason about
- Side effects isolated in wrapper components
- Better separation of concerns

* Feat: insert HnPendingBanner and queued txs

---------

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

* feat(Hypernative): add Calendly integration to HubSpot form (#6624)

* feat: add Calendly integration to HubSpot form

Add Calendly widget that displays after HubSpot form submission with region-based URL mapping configured via NEXT_PUBLIC_HYPERNATIVE_CALENDLY environment variable.

Changes:
- HubSpotForm.tsx: Added Calendly integration with dynamic script/CSS loading, region tracking, and widget initialization
- definitions.d.ts: Added TypeScript declarations for window.hbspt and window.Calendly
- HnSignupForm.tsx: Removed duplicate Window interface declaration

The form transitions from HubSpot form to thank you view with embedded Calendly widget, loading the appropriate URL based on the user's selected region (AMERICAS, LATAM, EMEA, APAC).

* feat: add onSubmit callback to HubSpotForm and dispatch formCompleted action

This commit extends the HnSignupFlow to properly track form submissions:

- Add onSubmit prop to HubSpotForm component that gets called when the form is submitted
- Refactor HnSignupForm to use HubSpotForm component instead of embedding the form directly
- Add onSubmit callback to HnSignupForm that passes through to HubSpotForm
- Update HnSignupFlow to dispatch setFormCompleted Redux action when form is submitted
- Add comprehensive test coverage for HubSpotForm, HnSignupForm, and HnSignupFlow components
- All tests pass (24 new tests added)
- TypeScript type checking passes
- Linting passes with proper eslint-disable comments

* feat: add HubSpot and Calendly to CSP and use explicit HTTPS protocol

Update Content Security Policy to include HubSpot and Calendly domains for form and scheduling integrations. Changed HubSpot script loading to use explicit HTTPS protocol instead of protocol-relative URL to match CSP requirements.

---------

* feat(Hypernative): Add security report button to TxDetails (#6625)

* feat(Hypernative): Add security report button to TxDetails

This commit adds the Hypernative security report button to transaction details pages with proper conditional rendering based on feature flags and guard installation.

## Key Changes

### HnSecurityReportBtn Integration
- Added HnSecurityReportBtn to TxDetails above the share link block
- Button only renders for multisig transactions with Hypernative guard installed
- Extracts safeTxHash from transaction details for security report URL

### HoC Refactoring
- Renamed `withHnFeature` → `withHnBannerConditions` (banner-specific visibility)
- Created new `withHnFeature` HoC (simple feature flag check)
- Created `withGuardCheck` HoC (Hypernative guard installation check)
- Updated all banner components to use composed HoCs for clear separation of concerns

### Services & Hooks
- Added `getSafeTxHashFromDetails` service to extract safeTxHash from transaction details
- Created `useSafeTxHash` hook for memoized safeTxHash extraction
- Memoized `isHypernativeGuard` function with lodash to cache RPC results

### Testing
- Added comprehensive tests for `getSafeTxHashFromDetails` (4 tests)
- Added tests for `useSafeTxHash` hook (4 tests)
- Added memoization tests for `isHypernativeGuard` (6 tests)
- All 23 tests passing

## Benefits
- Clear HoC composition with single responsibilities
- Reduced RPC calls via memoization
- Better code organization and reusability
- Comprehensive test coverage

* fix: Use chain shortName instead of chainId for HnSecurityReportBtn

The HnSecurityReportBtn expects a chain shortName parameter, not chainId.
Updated HnSecurityReportBtnWithTxHash to use useCurrentChain() and pass
chain.shortName to the button component.

* fix: Improve Hypernative guard check memoization

- Update cache key to include both chainId and guardAddress to prevent incorrect caching across chains
- Only cache successful lookups; errors are thrown and can be retried to avoid caching transient RPC failures
- Update hook to pass chainId to guard check function
- Update all tests to reflect new memoization behavior

This fixes an issue where transient RPC failures would be permanently cached as "not Hypernative guard", causing the UI to hide banners/buttons until page reload.

* feat(Hypernative): Make security report button full width and queue-only

- Make the HnSecurityReportBtn appear only in transaction queue
- Button is already full width via existing CSS
- Improves UX by showing security reports only for pending transactions

* Fix prettier

---------

* feat(Hypernative): Improve layout and styling of tx report button (#6626)

* feat(TxDetails): Improve layout and styling to match design

- Move share link to top right corner of right-side block
- Remove accordion from share block, leaving only copy link button
- Add tooltip to security report button
- Convert security report button to use actual Button component with ExternalLink
- Make security report button full width with proper spacing
- Position copy link button with negative margin
- Fix Hypernative logo visibility in dark mode
- Add higher z-index to copy link for clickability
- Remove border on hover for report button
- Adjust button height and padding to match design

* feat(Hypernative): Add owner check to security report button

- Create withOwnerCheck HoC to verify user is a Safe owner
- Add owner check before guard check to optimize performance
- Avoids expensive guard hook calls for non-owners
- Only Safe owners can see the security report button

* fix: Remove share block accordion analytics and tests

- Remove TX_LIST_EVENTS.OPEN_SHARE_BLOCK analytics event
- Remove txOpenShareBlock event from Cypress gtag utils
- Remove expandTxShareBlock function and related selectors
- Update Cypress tests to remove accordion expansion calls
- Update analytics test to only check copy deeplink event

The share block accordion has been removed and is now always visible,
so the expansion tracking and related test code is no longer needed.

* feat(Hypernative): Update security report URL to use guardian endpoint

- Update base URL to use /guardian/transaction-risks endpoint
- Use environment-based URL (stage vs production)
- Change from chain shortName to chainId (Chainlist numbers)
- Use useChainId hook instead of useCurrentChain for efficiency
- Update Storybook stories to use chainId

URLs:
- Production: https://app.hypernative.xyz/guardian/transaction-risks
- Stage: https://stage.app.hypernative.xyz/guardian/transaction-risks

---------

* feat(Hypernative): Improve UI styling and fix CSP violations (#6627)

* feat(Hypernative): Improve UI styling and fix CSP violations

- Fix CSP violations for Calendly and HubSpot assets
  - Add https://assets.calendly.com to style-src for stylesheet loading
  - Add https://*.hsforms.net to script-src for HubSpot forms script
- Improve HubSpot form styling
  - Remove bottom padding from Paper component
  - Adjust top padding to space-1 for better layout
  - Set form wrapper min-height to 776px for dynamic iframe
- Fix cancel button positioning
  - Change from negative margin to absolute positioning
  - Position at bottom-left with proper spacing (space-3)
- Enable scrolling for left column only
  - Add overflow-y auto to content and form columns
  - Prevent whole modal from scrolling
  - Keep right background column fixed
- Add Hypernative logo assets
  - Add SVG versions of logos for crisp rendering
  - Include light and dark mode variants

* Remove unused icons

* Form padding

---------

* fix(Hypernative): Prevent signup flow from closing before Calendly widget is shown

- Fix issue where form submission immediately closed the modal by setting formCompleted in Redux
- Delay Redux state update until modal is closed, allowing user to interact with Calendly
- Add inlineMessage and redirectUrl options to prevent HubSpot's default redirect behavior
- Change onFormSubmit to onFormSubmitted for proper callback timing
- Update onFormReady to safely handle jQuery form object
- Update tests to reflect new behavior where formCompleted is set on modal close
- Add type definitions for new HubSpot form options

* Feat(Hypernative): Dashboard banner in UI (#6630)

* Feat(Hypernative): conditional rendering of the Dashboard Banner

* Fix(Hypernative): remove raw component that was used for UI testing (bypassed the HoC that provides the signup flow)

* Fix(Hypernative): Old banners instead of the new PromoBanner (#6633)

* Refactor(Hypernative/Regression): move back SpacesBanner, StakeBanner, EarnBanner instead of PromoBanner

* Refactor(Hypernative/Regression): move back NoFeeNovemberBanner instead of PromoBanner

* refactor(Hypernative): Separate Calendly into dedicated step and fix region bug (#6632)

* refactor(Hypernative): Separate Calendly into dedicated step and fix region bug

- Fix bug where region selection wasn't captured correctly from HubSpot form data
- Extract region value from data.submissionValues.region object structure
- Refactor signup flow to use separate step for Calendly widget
- Create new HnCalendlyStep component for Calendly integration
- Remove Calendly logic from HubSpotForm component (now form-only)
- Update HnSignupFlow to add step 2 for Calendly
- Calendly step spans full height with no column scrolling
- Remove Cancel button visibility when Calendly is shown
- Update tests to reflect component changes

* Fix prettier

* fix: Update HnSignupFlow test mock to pass region parameter

- Fix mock HnSignupForm to call onSubmit with region parameter
- Update type signature to match new onSubmit callback

* feat(Hypernative): Pre-populate safe address field in HubSpot form

- Add safeAddress prop to HubSpotForm component
- Use HubSpot form API to pre-populate safe_address field
- Pass current safe address through HnSignupForm and HnSignupFlow
- Field is automatically filled when form loads

---------

* feat(Hypernative): Add loader to HubSpot form and prevent layout shift

- Add loading state with CircularProgress spinner
- Set minimum height on form wrapper to prevent Cancel button from jumping
- Hide form container during load and show loader instead
- Loading state cleared when HubSpot form is ready

* Feat(Hypernative): HoC for the HnBanner using the local storage; HN banners on multiple pages (NewTx, Accounts) (#6629)

* Feat(Hypernative): conditional HoC wrapper for the HnBanner in Settings

* Refactor(Hypernative): add a SpaceBanner story to test UI changes on old banners (regression)

* Refactor(Hypernative): new HnBanner wrapper on the Security page

* Feat(Hypernative): add a new mini HN component for the New Tx page

* Feat(Hypernative): HoC wrapper for the mini-HN component; style fixes

* Fix(Hypernative): closing btn styles in the pending banner

* Fix(Hypernative): rendring conditions in the dashboard

* Feat(Hypernative): Add new HN HoC for the case when SafeInfo is not available; embed the Hn banner to the Accounts page

* Feat(Hypernative): make the new HnBanner (with LS status) dismissable

* Feat(Hypernative): Add tests for the HN LocalStorage component

* Chore(Hypernative): formatting

* FIx(Hypernative): default non-dismissable Hn banner on the Security page

* Fix(Hypernative): move visibility logic into HnBannerWithLocalStorage

* Fix(Hypernative): move the Box wrapper into HnBannerWithLocalStorage so it only renders when the banner is visible

* Chore(Hypernative): formatting

* Refactor(Hypernative): move LS id for HnBanner from a separate const file to the component

* Refactor(Hypernative): rm the redundant SpacesBannerStory from the storybook

* Fix(Hypernative): fix failing test for HnBannerWithLocalStorage (clear LS before each test)

* Chore(Hypernative): rm obsolete imports

* Fix: add NEXT_PUBLIC_HUBSPOT_CONFIG to the build

* Fix(Hypernative): Styles (#6634)

* Fix(Hypernative): tooltip btn / hover

* Fix(Hypernative): closiong btn / color change on hover

* Fix(Hypernative): svg styles in the pending banner

* Fix(Hypernative): new HN logo in the form

* Fix(Hypernative): paddings in the HN form

* Fix(Hypernative): background color in HN form

* Chore(Hypernative): formatting

* Fix(Hypernative): form styles

* feat(Hypernative): Update TxReportButton visibility conditions (#6635)

* feat(Hypernative): Update TxReportButton visibility conditions

Update the HnSecurityReportBtn in TxDetails to show based on:
- Banner conditions (same as HnBanner with new BannerType.TxReportButton) OR
- Hypernative guard is active

Changes:
- Add BannerType.TxReportButton enum value
- Update useBannerStorage to always return true for TxReportButton (ignores dismissal/completion state)
- Update useBannerVisibility to show TxReportButton if banner conditions are met OR guard is installed
- Simplify HnSecurityReportBtn HOC composition to use withHnBannerConditions with proper typing
- Update withHnBannerConditions to accept generic object props instead of restricting to WithHnBannerConditionsProps

* refactor(Hypernative): Simplify useBannerVisibility and add comprehensive tests

- Simplify banner conditions logic by removing redundant shouldShowBanner check for TxReportButton
- Extract hasSufficientBalance check into a variable to avoid duplication
- Add comprehensive test suite for BannerType.TxReportButton covering:
  - Button shows when banner conditions are met (no guard)
  - Button shows when guard is installed (regardless of other conditions)
  - Button doesn't show when neither conditions nor guard are present
  - Loading states are handled correctly

* refactor(Hypernative): Remove redundant guard check from TxReportButton logic

Remove unnecessary !isHypernativeGuard check from bannerConditionsMet since we OR with isHypernativeGuard at the end. This makes the logic clearer: show button if (banner conditions) OR (guard installed).

---------

* fix(Hypernative): fix View on explorer position + add "neutral" Button variant (#6638)

* feat: Refactor TxDetails button layout and styling

- Move View on explorer button out of ShareBlock component
- Create separate TxExplorerLink component for reusability
- Position View on explorer button after HnSecurityReportBtn
- Update all buttons (Copy link, View on explorer, HnSecurityReportBtn) to use consistent styling:
  - Font size: 14px
  - Background: var(--color-background-main)
  - Full width for explorer and security report buttons
  - Hover effect with transition to var(--color-border-light)
- Add background-color and border-radius to TxDetails container for proper dark mode support
- Ensure proper contrast in both light and dark modes

* refactor: Add neutral button variant to theme

- Add 'neutral' variant to MuiButton in theme configuration
- Update all action buttons to use the new variant:
  - TxShareBlock (Copy link button)
  - TxExplorerLink (View on explorer button)
  - HnSecurityReportBtn (Review security report button)
- Remove redundant CSS styles now handled by the theme variant
- Consolidate button styling in a single location for better maintainability

Benefits:
- Centralized styling in theme
- Type-safe variant usage
- Automatic dark mode support
- Less CSS to maintain
- Consistent button appearance across the app

* Fix prettier

* fix: Adjust neutral button spacing and icon alignment

- Update neutral variant gap from 4px to 8px as per design spec
- Add margin-right: -3px to HnSecurityReportBtn icon to compensate for internal SVG padding
- Add margin-right: -9px to Copy link icon for proper visual alignment

---------

* Feat(Hypernative): New tx report link (#6639)

* Feat(Hypernative): New HN link for tx security check

* Feat(Hypernative): New wording for the HN description

* Fix(Hypernative): new tx security link + `referrer=safe` query parameter

* Fix(Hypernative): Banners' conditional rendering on the Accounts page and First Steps page; new tx security report URL (#6640)

* Fix(Hypernative): Accounts page: banner is shown only when a wallet is connected

* Fix(Hypernative): new tx security link + `referrer=safe` query parameter

* Fix(Hypernative): show dashboard banner without balance condition (cannot be checked for not activated safes)

* Feat(Hypernative): new banner type + `useBannerVisibility` adjustments to skip balance check for the Dashboard banner

* Fix(Hypernative): refactoring for No Balance Check

---------

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

* Fix Copy link button positioning in TxDetails (#6645)

- Add position: relative to .txSigners container for proper absolute positioning context
- Create conditional styling for Copy link button based on transaction type
- For transactions with signers (multisig): Use -53px negative margin overlap positioning
- For incoming transactions without signers: Display full-width without overlap to prevent collision with View on explorer link

* Fix: Fully clickable HN banner (#6647)

* Fix(Hypernative): clickable main banner

* Fix(Hypernative): clickable Dashboard banner

* Chore(Hypernative): formatting

* Fix: "Copy link" z-index

* Refactor(Hypernative): Extract HnSignupFlow layout into shared component (#6648)

* Refactor: Extract HnSignupFlow layout into shared component

Extracted the common Grid2 two-column layout structure from HnSignupIntro, HnSignupForm, and HnCalendlyStep into a new shared HnSignupLayout component. This eliminates code duplication and ensures consistent layout across all signup flow steps.

Changes:
- Created HnSignupLayout.tsx component with reusable two-column layout
- Refactored HnSignupIntro to use HnSignupLayout
- Refactored HnSignupForm to use HnSignupLayout
- Refactored HnCalendlyStep to use HnSignupLayout
- Renamed contentColumn to introColumn for clarity

* Fix: increase modal height to 720px

---------

* Fix: "Copy link" z-index 1

* Fix: increase HnSignupFlow height

* Feat(Hypernative): Tracking events; refactor nested Track components; UI-highlight HN branding (#6650)

* Feat(Hypernative): event categories / sources as consts

* Feat(Hypernative): tracking events for the New Tx banner

* Feat(Hypernative): tracking events for the Get Started btn in the HN form

* Refactor(Hypernative): add GA - Mixpanel mapping for HN

* Feat(Hypernative): Track form submission event

* Feat(Hypernative): track event on Review Security Report click

* Refactor(Hypernative): New naming for tracking events instead of camel case

* Refactor(Hypernative): HnBanner: tracking events obj reneming; rm tracking on close click

* Refactor(Hypernative): Hn tracking category as props in PromoBanner

* Feat(Hypernative): track event for default HnBanner + custom source label depending on the page

* Chore(Hypernative): formatting

* Refactor(Hypernative): Remove nested Track components, use trackEvent directly

- Removed nested Track components from PromoBanner and HnDashboardBanner
- Refactored click handlers to call trackEvent function directly
- Combined banner and CTA click handlers into a single handleClick function
- Added trackingParams prop to support additional event parameters
- Prevents double event tracking when clicking on CTA within clickable banner

* chore: Fix prettier formatting

* Fix(Hypernative): correct label for the Dashboard Banner

* Refactor(Hypernative): Move the tracking label from NewsCarousel to HnBannerForCarousel

* Refactor(Hypernative): color highlight "Hypernative" in thge banner description

* Feat(Hypernative): Add tracking events on banner dismissal

* Chore(Hypernative): formatting

* Fix(Hypernative): rm `any` type in tracking props

* Chore(Hypernative): formatting

---------

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

* Fix(Hypernative): correct naming for tracking events (#6651)

---------

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

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

Co-authored-by: Hanzo Dev <[email protected]>

2025-11-14 14:53:18 +01:00

859 B

Raw Permalink Blame History