SOV-5181: base components and layout #6

grinry · 2025-10-08T11:45:12Z

https://sovryn.atlassian.net/browse/SOV-5181
https://sovryn.atlassian.net/browse/SOV-5182

netlify · 2025-10-08T11:45:18Z

✅ Deploy Preview for sovryn-layer ready!

Name	Link
🔨 Latest commit	`fa2b2bf`
🔍 Latest deploy log	https://app.netlify.com/projects/sovryn-layer/deploys/68e7764747eb29000823bd92
😎 Deploy Preview	https://deploy-preview-6--sovryn-layer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull Request Overview

This PR implements base components and layout for the Sovryn web application, introducing a comprehensive design system with theming support and responsive navigation.

Added theme provider with dark/light mode support and persistent theme storage
Created responsive header with navigation, social links, and wallet connection functionality
Implemented base UI components including dropdown menus and enhanced button variants

Reviewed Changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
apps/web-app/src/styles.css	Updated CSS variables for theming and improved font declarations
apps/web-app/src/routes/*.tsx	Added new route pages for stake, lend, convert, and components demo
apps/web-app/src/routes/__root.tsx	Integrated theme provider and layout structure with header/footer
apps/web-app/src/routeTree.gen.ts	Auto-generated route tree updates for new pages
apps/web-app/src/integrations/privy/connector.tsx	Made layout responsive with mobile-first design
apps/web-app/src/components/ui/*.tsx	Added dropdown menu component and enhanced button styling
apps/web-app/src/components/theme-*.tsx	Implemented theme provider and toggle functionality
apps/web-app/src/components/Hero/Hero.tsx	Created reusable hero component for page headers
apps/web-app/src/components/Header/*.tsx	Built responsive navigation with social links and wallet connection
apps/web-app/src/components/Footer/Footer.tsx	Added comprehensive footer with links and branding
apps/web-app/package.json	Added dropdown menu dependency
apps/web-app/index.html	Applied base styling to html and body elements

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/web-app/src/styles.css

apps/web-app/src/components/Footer/Footer.tsx

Copilot

Pull Request Overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/web-app/src/components/Footer/Footer.tsx

Copilot · 2025-10-08T13:35:00Z

apps/web-app/src/routes/components.tsx

+  return <div className='container mx-3'>
+    <div >
+      <h1>Buttons</h1>
+      <div className='flex gap-3 my-3'>


[nitpick] Inconsistent quote style. The file uses single quotes here but double quotes elsewhere. Consider using double quotes consistently.

Suggested change

return <div className='container mx-3'>

<div >

<h1>Buttons</h1>

<div className='flex gap-3 my-3'>

return <div className="container mx-3">

<div >

<h1>Buttons</h1>

<div className="flex gap-3 my-3">

Copilot · 2025-10-08T13:35:00Z

apps/web-app/src/components/Header/Links.tsx

+  const main = useMemo(() => items.slice(0, 3), [items]);
+  const others = useMemo(() => items.slice(3), [items]);


The dependency array [items] is unnecessary since items is a constant defined outside the component. These useMemo calls can be simplified or the dependency array can be removed.

Suggested change

const main = useMemo(() => items.slice(0, 3), [items]);

const others = useMemo(() => items.slice(3), [items]);

const main = items.slice(0, 3);

const others = items.slice(3);

pietro-maximoff

@creed-victor the initial structure looks good, and I believe we will update all of this a bit later.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull Request Overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-09T08:46:44Z

apps/web-app/src/routes/components.tsx

+})
+
+function RouteComponent() {
+  return <div className='container mx-3'>


[nitpick] The container class has inconsistent margin value 'mx-3' compared to other route components which use 'mx-auto my-8 px-4'. Consider using consistent spacing patterns across route components.

Suggested change

return <div className='container mx-3'>

return <div className='container mx-auto my-8 px-4'>

Copilot · 2025-10-09T08:46:44Z

apps/web-app/src/components/Header/Links.tsx

+  const main = useMemo(() => items.slice(0, 3), [items]);
+  const others = useMemo(() => items.slice(3), [items]);


The useMemo dependencies include 'items' which is a constant array defined outside the component. This will cause unnecessary recalculations on every render. Remove the dependency array or move 'items' inside the component if it needs to be memoized.

Suggested change

const main = useMemo(() => items.slice(0, 3), [items]);

const others = useMemo(() => items.slice(3), [items]);

const main = useMemo(() => items.slice(0, 3), []);

const others = useMemo(() => items.slice(3), []);

Copilot · 2025-10-09T08:46:44Z

apps/web-app/src/components/Header/Links.tsx

+          >
+            {item.label}
+            {item.content && (
+              <span className="text-muted text-xs">{item.content}</span>


The class 'text-muted' appears to be a custom class that may not be defined in the CSS. Consider using standard Tailwind classes like 'text-muted-foreground' for consistency with the design system.

Suggested change

<span className="text-muted text-xs">{item.content}</span>

<span className="text-muted-foreground text-xs">{item.content}</span>

grinry added 5 commits October 3, 2025 15:36

chore: add header and footer components

1d556c3

feat: add hero for page

ba33fa5

fix: footer

a736e09

chore: fix footer paddings

c295aec

feat: mobile layout

c279280

grinry requested a review from pietro-maximoff October 8, 2025 11:45

grinry self-assigned this Oct 8, 2025

Copilot AI review requested due to automatic review settings October 8, 2025 11:45

grinry added the enhancement New feature or request label Oct 8, 2025

grinry review requested due to automatic review settings October 8, 2025 11:45

fix: address block

10602e7

Copilot AI review requested due to automatic review settings October 8, 2025 11:56

Copilot AI reviewed Oct 8, 2025

View reviewed changes

apps/web-app/src/styles.css Outdated Show resolved Hide resolved

apps/web-app/src/styles.css Outdated Show resolved Hide resolved

apps/web-app/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved

grinry added 2 commits October 8, 2025 16:31

fix: test runner

ce7f096

fix: duplicated style

69b50c2

Copilot AI review requested due to automatic review settings October 8, 2025 13:34

Merge branch 'develop' into feat/SOV-5181-sovryn-layer-components-part-1

c0cc664

Copilot AI reviewed Oct 8, 2025

View reviewed changes

pietro-maximoff approved these changes Oct 9, 2025

View reviewed changes

Update Footer.tsx

fa2b2bf

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings October 9, 2025 08:45

Copilot AI reviewed Oct 9, 2025

View reviewed changes

grinry merged commit 6ea79e4 into develop Oct 9, 2025
5 checks passed

grinry deleted the feat/SOV-5181-sovryn-layer-components-part-1 branch October 9, 2025 09:28

		const main = useMemo(() => items.slice(0, 3), [items]);
		const others = useMemo(() => items.slice(3), [items]);

	return <div className='container mx-3'>
	return <div className='container mx-auto my-8 px-4'>

	<span className="text-muted text-xs">{item.content}</span>
	<span className="text-muted-foreground text-xs">{item.content}</span>

SOV-5181: base components and layout #6

SOV-5181: base components and layout #6

Uh oh!

Conversation

grinry commented Oct 8, 2025

Uh oh!

netlify bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for sovryn-layer ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Copilot AI Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

pietro-maximoff left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Oct 8, 2025 •

edited

Loading