-
Notifications
You must be signed in to change notification settings - Fork 0
SOV-5181: base components and layout #6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
1d556c3
chore: add header and footer components
grinry ba33fa5
feat: add hero for page
grinry a736e09
fix: footer
grinry c295aec
chore: fix footer paddings
grinry c279280
feat: mobile layout
grinry 10602e7
fix: address block
grinry ce7f096
fix: test runner
grinry 69b50c2
fix: duplicated style
grinry c0cc664
Merge branch 'develop' into feat/SOV-5181-sovryn-layer-components-part-1
creed-victor fa2b2bf
Update Footer.tsx
pietro-maximoff File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| export const Footer = () => { | ||
| return ( | ||
| <footer className="w-full pt-9 pb-12 mt-10 px-4 flex flex-col lg:flex-row gap-4 justify-start text-center text-sm text-black dark:text-slate-500 border-t border-t-stone-200 dark:border-t-stone-800 z-[1000]"> | ||
| <div className="flex flex-row flex-wrap justify-between items-start gap-8 lg:w-1/3 lg:flex-row lg:flex-nowrap"> | ||
| <div className="text-left"> | ||
| <h3 className="font-medium dark:text-gray-50 mb-3"> | ||
| Help & Feedback | ||
| </h3> | ||
| <ul className="flex flex-col gap-2"> | ||
| <li> | ||
| <a href="#">Contact Support</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">X</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Discord</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Telegram</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div className="text-left"> | ||
| <h3 className="font-medium dark:text-gray-50 mb-3">Resources</h3> | ||
| <ul className="flex flex-col gap-2"> | ||
| <li> | ||
| <a href="#">Getting started</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Fees</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Blog</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">FAQ</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div className="text-left"> | ||
| <h3 className="font-medium dark:text-gray-50 mb-3">Legal</h3> | ||
| <ul className="flex flex-col gap-2"> | ||
| <li> | ||
| <a href="#">Terms of Service</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Privacy Policy</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Disclaimer</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-row mt-8 justify-start items-center gap-4 lg:items-start lg:order-first lg:w-1/3 lg:mt-0 lg:flex-col lg:justify-between"> | ||
| <div className="shrink-0 grow-0 flex items-center justify-center"> | ||
| <svg | ||
| width="32" | ||
| height="30" | ||
| viewBox="0 0 32 30" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M32 19.733C32 20.6167 31.2837 21.333 30.4 21.333H22.933C22.0494 21.333 21.333 22.0494 21.333 22.933V28.2662C21.333 29.1499 20.6167 29.8662 19.733 29.8662H1.6C0.716345 29.8662 0 29.1499 0 28.2662V10.1332C0 9.24955 0.716344 8.5332 1.6 8.5332H9.06699C9.95065 8.5332 10.667 7.81686 10.667 6.9332V1.6C10.667 0.716344 11.3833 0 12.267 0H30.4C31.2837 0 32 0.716344 32 1.6V19.733Z" | ||
| fill="#FF4500" | ||
| /> | ||
| </svg> | ||
| </div> | ||
|
|
||
| <div className="shrink-0 flex flex-col items-start justify-center"> | ||
| <div className="lg:hidden">Sovryn Dex</div> | ||
| <div className="text-xs lg:text-sm">Copyright {new Date().getFullYear()}</div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { usePrivy } from '@privy-io/react-auth'; | ||
| import { Link } from '@tanstack/react-router'; | ||
| import { Power, PowerOff } from 'lucide-react'; | ||
| import { useAccount, useDisconnect } from 'wagmi'; | ||
| import { ModeToggle } from '../theme-toggle'; | ||
| import { Button } from '../ui/button'; | ||
| import { Links } from './Links'; | ||
| import { SocialLinks } from './SocialLinks'; | ||
|
|
||
| export default function Header() { | ||
| return ( | ||
| <> | ||
| <header className="z-50 sticky top-0 bg-background w-full px-4 py-4 lg:py-6 flex gap-4 flex-row items-center justify-between border-b border-b-stone-200 dark:border-b-stone-800"> | ||
| <div className="flex flex-row items-center justify-start gap-8"> | ||
| <Link | ||
| to="/" | ||
| className="flex flex-row items-center justify-start gap-4" | ||
| > | ||
| <svg | ||
| width="32" | ||
| height="30" | ||
| viewBox="0 0 32 30" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M32 19.7999C32 20.6836 31.2837 21.3999 30.4 21.3999H22.933C22.0494 21.3999 21.333 22.1162 21.333 22.9999V28.3331C21.333 29.2168 20.6167 29.9331 19.733 29.9331H1.6C0.716345 29.9331 0 29.2168 0 28.3331V10.2001C0 9.31644 0.716344 8.6001 1.6 8.6001H9.06699C9.95065 8.6001 10.667 7.88375 10.667 7.0001V1.66689C10.667 0.783239 11.3833 0.0668945 12.267 0.0668945H30.4C31.2837 0.0668945 32 0.783239 32 1.66689V19.7999Z" | ||
| fill="#FF4500" | ||
| /> | ||
| </svg> | ||
| <span className="hidden lg:block text-base text-black dark:text-white"> | ||
| Sovryn Dex | ||
| </span> | ||
| </Link> | ||
|
|
||
| <div className="hidden lg:block"> | ||
| <SocialLinks /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <Links /> | ||
|
|
||
| <div className="flex flex-row items-center justify-end gap-4"> | ||
| <ModeToggle /> | ||
| <ConnectButton /> | ||
| </div> | ||
| </header> | ||
| {/* <div className="h-16 lg:hidden bg-background" /> */} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function ConnectButton() { | ||
| const { ready, authenticated, login, logout } = usePrivy(); | ||
|
|
||
| const { address } = useAccount(); | ||
| const { disconnect } = useDisconnect(); | ||
|
|
||
| const handleDisconnect = () => { | ||
| disconnect(); | ||
| logout(); | ||
| }; | ||
|
|
||
| if (!authenticated) { | ||
| return ( | ||
| <Button onClick={login} disabled={!ready}> | ||
| <Power className="lg:hidden" /> | ||
| <span className="hidden lg:block">Connect Wallet</span> | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| if (authenticated) { | ||
| return ( | ||
| <div className="flex flex-row gap-4 items-center"> | ||
| <div className="hidden lg:block"> | ||
| {address?.substring(0, 6)}...{address?.substring(address.length - 4)} | ||
| </div> | ||
| <Button | ||
| variant="outline" | ||
| onClick={handleDisconnect} | ||
| disabled={!ready} | ||
| size="icon" | ||
| > | ||
| <PowerOff /> | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return <></>; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,159 @@ | ||||||||||
| import { cn } from '@/lib/utils'; | ||||||||||
| import { Link, linkOptions } from '@tanstack/react-router'; | ||||||||||
| import { ChevronDown, Menu, X } from 'lucide-react'; | ||||||||||
| import { useMemo, useReducer, type MouseEvent } from 'react'; | ||||||||||
| import { Button } from '../ui/button'; | ||||||||||
| import { | ||||||||||
| DropdownMenu, | ||||||||||
| DropdownMenuContent, | ||||||||||
| DropdownMenuItem, | ||||||||||
| DropdownMenuTrigger, | ||||||||||
| } from '../ui/dropdown-menu'; | ||||||||||
|
|
||||||||||
| const items = linkOptions([ | ||||||||||
| // { | ||||||||||
| // to: '/', | ||||||||||
| // label: 'Home', | ||||||||||
| // activeOptions: { exact: true }, | ||||||||||
| // }, | ||||||||||
| { | ||||||||||
| to: '/convert', | ||||||||||
| label: 'Convert', | ||||||||||
| content: 'Convert assets instantly', | ||||||||||
| }, | ||||||||||
| { | ||||||||||
| to: '/lend', | ||||||||||
| label: 'Lend', | ||||||||||
| content: 'Lend assets to earn yield', | ||||||||||
| }, | ||||||||||
| { | ||||||||||
| to: '/stake', | ||||||||||
| label: 'Stake', | ||||||||||
| content: 'Stake assets to earn rewards', | ||||||||||
| }, | ||||||||||
| { | ||||||||||
| to: '/demo/tanstack-query', | ||||||||||
| label: 'TanStack Query', | ||||||||||
| content: 'Demo of TanStack Query', | ||||||||||
| }, | ||||||||||
| { | ||||||||||
| to: '/demo/form/simple', | ||||||||||
| label: 'Simple form', | ||||||||||
| content: 'Demo of Simple form', | ||||||||||
| }, | ||||||||||
| { | ||||||||||
| to: '/demo/form/address', | ||||||||||
| label: 'Address form', | ||||||||||
| content: 'Demo of Address form', | ||||||||||
| }, | ||||||||||
| ]); | ||||||||||
|
|
||||||||||
| export const Links = () => { | ||||||||||
| const main = useMemo(() => items.slice(0, 3), [items]); | ||||||||||
| const others = useMemo(() => items.slice(3), [items]); | ||||||||||
|
Comment on lines
+52
to
+53
|
||||||||||
| 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
AI
Oct 9, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The dependency array
[items]is unnecessary sinceitemsis a constant defined outside the component. These useMemo calls can be simplified or the dependency array can be removed.