-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
329 additions
and
6 deletions.
There are no files selected for viewing
This file contains 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,227 @@ | ||
| import { | ||
| NavigationMenu, | ||
| NavigationMenuItem, | ||
| NavigationMenuList, | ||
| NavigationMenuTrigger, | ||
| NavigationMenuContent, | ||
| NavigationMenuLink, | ||
| } from "@/components/ui/navigation-menu"; | ||
| import Logo from "@/components/Logo"; | ||
| import { IoWalletOutline } from "react-icons/io5"; | ||
| import { BsThreeDots } from "react-icons/bs"; | ||
| import { TiHome } from "react-icons/ti"; | ||
| import { NavLink } from "react-router-dom"; | ||
| import { | ||
| MdDataUsage, | ||
| MdLayers, | ||
| MdRocketLaunch, | ||
| MdSwapCalls, | ||
| MdWaves, | ||
| } from "react-icons/md"; | ||
| import { HiSparkles } from "react-icons/hi"; | ||
| import { AVAILABLE_NETWORKS } from "@/constants"; | ||
| import type { AppContextType, IThemeManager } from "@/types/index"; | ||
| import SelectNetworkNavContent from "./SelectNetworkNavContent"; | ||
| import NavbarSettings from "./NavbarSettings"; | ||
| import { useState } from "react"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from "./ui/dialog"; | ||
| import ConnectWalletDialog from "./ConnectWalletDialog"; | ||
|
|
||
| interface Props { | ||
| appContext: AppContextType; | ||
| themeManager: IThemeManager; | ||
| } | ||
|
|
||
| export default function Navbar({ appContext, ...props }: Props) { | ||
| const { selectedNetwork, setSelectedNetwork } = appContext; | ||
| const [settingsIsVisible, setSettingsIsVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <nav className="hidden lg:flex fixed left-0 right-0 justify-between mx-12 my-2 bg-card/85 px-4 rounded-3xl shadow-md"> | ||
| <NavigationMenu> | ||
| <NavigationMenuList> | ||
| <NavigationMenuItem> | ||
| <NavigationMenuLink href="/intro"> | ||
| <Logo /> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/home" | ||
| className={({ isActive }) => { | ||
| const base = | ||
| "group inline-flex gap-x-1 items-center justify-center py-2 transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent/50 data-[state=open]:bg-accent/50 mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"; | ||
| return (isActive ? "text-primary " : "").concat(base); | ||
| }} | ||
| > | ||
| <TiHome | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| <span>Home</span> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/swap" | ||
| className={({ isActive }) => { | ||
| const base = | ||
| "group inline-flex gap-x-1 items-center justify-center py-2 transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent/50 data-[state=open]:bg-accent/50 mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"; | ||
| return (isActive ? "text-primary " : "").concat(base); | ||
| }} | ||
| > | ||
| <MdSwapCalls | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| <span>Trade</span> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/pool" | ||
| className={({ isActive }) => { | ||
| return (isActive ? "text-primary " : "").concat("group"); | ||
| }} | ||
| > | ||
| <NavigationMenuTrigger className="bg-transparent hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent data-[state=open]:bg-accent mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"> | ||
| <MdWaves | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| Pool | ||
| </NavigationMenuTrigger> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| {selectedNetwork === AVAILABLE_NETWORKS.zkSync && ( | ||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/explore" | ||
| className={({ isActive }) => { | ||
| return (isActive ? "text-primary " : "").concat("group"); | ||
| }} | ||
| > | ||
| <NavigationMenuTrigger className="bg-transparent hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent data-[state=open]:bg-accent mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"> | ||
| <HiSparkles | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| Explore | ||
| </NavigationMenuTrigger> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
| )} | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/launch" | ||
| className={({ isActive }) => { | ||
| const base = | ||
| "group inline-flex gap-x-1 items-center justify-center py-2 transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent/50 data-[state=open]:bg-accent/50 mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"; | ||
| return (isActive ? "text-primary " : "").concat(base); | ||
| }} | ||
| > | ||
| <MdRocketLaunch | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| <span>Launch</span> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/dashboard" | ||
| className={({ isActive }) => { | ||
| const base = | ||
| "group inline-flex gap-x-1 items-center justify-center py-2 transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent/50 data-[state=open]:bg-accent/50 mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"; | ||
| return (isActive ? "text-primary " : "").concat(base); | ||
| }} | ||
| > | ||
| <MdDataUsage | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| <span>Portfolio</span> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavLink | ||
| to="/bridge" | ||
| className={({ isActive }) => { | ||
| return (isActive ? "text-primary " : "").concat("group"); | ||
| }} | ||
| > | ||
| <NavigationMenuTrigger className="bg-transparent hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent data-[state=open]:bg-accent mx-1 w-max h-10 text-card-foreground hover:text-primary px-3 text-sm font-medium rounded-full"> | ||
| <MdLayers | ||
| size={25} | ||
| className="hidden group-[.text-primary]:block text-primary p-1 bg-gray-100 rounded-md" | ||
| /> | ||
| Bridge | ||
| </NavigationMenuTrigger> | ||
| </NavLink> | ||
| </NavigationMenuItem> | ||
| </NavigationMenuList> | ||
| </NavigationMenu> | ||
|
|
||
| <NavigationMenu> | ||
| <NavigationMenuList> | ||
| <NavigationMenuItem> | ||
| <NavigationMenuTrigger className="bg-transparent"> | ||
| <img | ||
| className="w-5" | ||
| src={selectedNetwork.logoUrl} | ||
| alt={`${selectedNetwork.name} logo`} | ||
| /> | ||
| </NavigationMenuTrigger> | ||
| <NavigationMenuContent className="backdrop-blur"> | ||
| <SelectNetworkNavContent | ||
| selectedNetwork={selectedNetwork} | ||
| setSelectedNetwork={setSelectedNetwork} | ||
| /> | ||
| </NavigationMenuContent> | ||
| </NavigationMenuItem> | ||
|
|
||
| <Dialog> | ||
| <DialogTrigger asChild> | ||
| <NavigationMenuItem className="cursor-pointer inline-flex items-center justify-center py-2 transition-all border border-transparent hover:border-border hover:shadow-hover hover:bg-primary/[0.04] active:scale-90 transition-transform mx-1 h-10 text-primary px-5 text-sm font-medium rounded-full"> | ||
| <NavigationMenuLink className="flex"> | ||
| <IoWalletOutline className="mr-1" size={20} /> | ||
| Connect | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
| </DialogTrigger> | ||
| <ConnectWalletDialog /> | ||
| </Dialog> | ||
|
|
||
| <NavigationMenuItem className="relative"> | ||
| <NavigationMenuLink | ||
| onClick={() => setSettingsIsVisible(!settingsIsVisible)} | ||
| className="cursor-pointer inline-flex items-center justify-center py-2 transition-all active:scale-90 hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none data-[isActive]:bg-accent/50 data-[state=open]:bg-accent/50 mx-1 w-max h-10 text-card-foreground hover:text-primary px-2 text-sm font-medium rounded-full" | ||
| > | ||
| <BsThreeDots size={20} /> | ||
| </NavigationMenuLink> | ||
|
|
||
| {settingsIsVisible && ( | ||
| <NavbarSettings | ||
| {...props} | ||
| className="animate-fade-in absolute top-14 right-0" | ||
| /> | ||
| )} | ||
| </NavigationMenuItem> | ||
| </NavigationMenuList> | ||
| </NavigationMenu> | ||
| </nav> | ||
| ); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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,22 @@ | ||
| interface Props { | ||
| name: string; | ||
| logoSrc: string; | ||
| } | ||
|
|
||
| export default function WalletCard({ name, logoSrc }: Props) { | ||
| return ( | ||
| <article className="transition-colors relative overflow-clip bg-accent flex items-center px-4 py-2 border border-transparent hover:border-primary cursor-pointer rounded-lg"> | ||
| <div className="bg-white w-10 h-9 shadow rounded-lg grid place-items-center"> | ||
| <img className="w-6 h-6" src={logoSrc} alt={`${name} logo`} /> | ||
| </div> | ||
| <p className="w-full text-center z-10 font-semibold text-sm text-primary-foreground"> | ||
| {name} | ||
| </p> | ||
| <img | ||
| className="w-16 h-16 absolute right-0 z-0 opacity-15" | ||
| src={logoSrc} | ||
| alt={`${name} logo`} | ||
| /> | ||
| </article> | ||
| ); | ||
| } |
This file contains 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,54 @@ | ||
| import { | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogTitle, | ||
| } from "@/components/ui/dialog"; | ||
| import WalletCard from "./WalletCard"; | ||
| import { FaEye } from "react-icons/fa"; | ||
| import { GrCircleQuestion } from "react-icons/gr"; | ||
| import { FiArrowUpRight } from "react-icons/fi"; | ||
|
|
||
| export default function ConnectWalletDialog() { | ||
| return ( | ||
| <DialogContent className="flex flex-col max-w-[45rem] border-0 gap-1 sm:rounded-2xl"> | ||
| <DialogTitle className="text-2xl">Connect</DialogTitle> | ||
| <DialogDescription> | ||
| Connect wallet in one click to start using SyncSwap | ||
| </DialogDescription> | ||
| <div className="grid grid-cols-wallet-options gap-3 mt-4"> | ||
| <WalletCard | ||
| name="WalletConnect" | ||
| logoSrc="/images/wallets/walletconnect2.png" | ||
| /> | ||
| <WalletCard name="Gate Wallet" logoSrc="/images/wallets/gate.svg" /> | ||
| <WalletCard | ||
| name="Bitget Wallet" | ||
| logoSrc="/images/wallets/bitget_wallet.png" | ||
| /> | ||
| <WalletCard | ||
| name="Token Pocket" | ||
| logoSrc="/images/wallets/tokenpocket_tp.png" | ||
| /> | ||
| </div> | ||
|
|
||
| <article className="mt-14 bg-accent grid gap-y-3 px-4 py-3 rounded-lg text-sm"> | ||
| <p className="inline-flex items-center gap-x-2"> | ||
| <FaEye size={18} className="text-primary" /> | ||
| <span className="text-card-foreground"> | ||
| View only permissions. We cannot do anything without your approval. | ||
| </span> | ||
| </p> | ||
| <p className="inline-flex gap-x-2"> | ||
| <GrCircleQuestion size={18} className="text-primary" /> | ||
| <span className="text-card-foreground">New to Web3? </span> | ||
| <a | ||
| href="#" | ||
| className="transition-opacity text-primary font-medium flex items-center gap-x-1 hover:opacity-75" | ||
| > | ||
| Learn more about wallets <FiArrowUpRight /> | ||
| </a> | ||
| </p> | ||
| </article> | ||
| </DialogContent> | ||
| ); | ||
| } |
This file contains 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 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