Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Feat/background walletsidebar #129

Merged
merged 6 commits into from
Feb 20, 2024
Merged

Feat/background walletsidebar #129

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ea4436c
create sidebar component
eduramme Feb 17, 2024
9509d60
apply blur on background
eduramme Feb 17, 2024
a9d1877
fix blur
eduramme Feb 17, 2024
a9bf2af
remove console log
eduramme Feb 17, 2024
3bc454c
Merge branch 'develop' into feat/background-walletsidebar
eduramme Feb 20, 2024
454b9cd
resolve requested changes
eduramme Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions components/01-atoms/WalletSidebarTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from "react";
import cc from "classcat";
import { useTheme } from "next-themes";

interface WalletSidebarTemplateProps {
isOpen: boolean;
isMobile: boolean;
}

export const WalletSidebarTemplate = ({
isOpen,
isMobile,
}: WalletSidebarTemplateProps) => {
const { systemTheme, theme } = useTheme();
const currentTheme = theme === "system" ? systemTheme : theme;
const isDark = currentTheme === "dark";

return (
<>
<div
className={cc([
"fixed left-0 top-0 w-full h-full z-30 backdrop-blur-sm transition-all duration-300",
isOpen ? "opacity-100 inset-0" : "opacity-0 z-[-1]",
])}
/>

<div
className={cc([
"z-50 h-full absolute right-0 top-0 rounded-tl-[20px] border-l border-t transition-transform duration-300 ease-in-out",
isDark
? "bg-[#212322] border-[#353836] shadow-sidebarDark"
: "bg-[#F6F6F6] border-[#F0EEEE] shadow-sidebarLight",
isOpen ? "translate-x-0" : "translate-x-full",
isMobile ? "w-full" : "w-[400px]",
])}
></div>
</>
);
};
6 changes: 5 additions & 1 deletion components/01-atoms/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,9 @@ export * from "./icons/SwappingIcon";
export * from "./icons/XMarkIcon";
export * from "./icons/WalletIcon";
export * from "./icons/SunIcon";
export * from "./icons/PaperPlane";
eduramme marked this conversation as resolved.
Show resolved Hide resolved
export * from "./icons/MagnifyingGlassIcon";
export * from "./icons/SelectUserIcon";
export * from "./WalletSidebarTemplate";
export * from "./icons/MoonIcon";
export * from "./SwapAddManuallyModalLayout";
export * from "./SwapAddManuallyModalLayout";
169 changes: 92 additions & 77 deletions components/02-molecules/TheHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
SwaplaceIcon,
SwappingIcons,
Tooltip,
WalletSidebarTemplate,
} from "@/components/01-atoms";
import React, { useEffect, useState } from "react";
import { useTheme } from "next-themes";
Expand All @@ -20,6 +21,11 @@ export const TheHeader = () => {
const [showFullNav, setShowFullNav] = useState(
!isDesktop && !!authenticatedUserAddress?.address,
);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);

const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};

const { isWideScreen } = useScreenSize();

Expand All @@ -39,85 +45,94 @@ export const TheHeader = () => {
const isDark = currentTheme === "dark";

return (
<header className="bg-[#F2F2F2] dark:bg-[#212322] z-40 w-screen h-auto xl:w-[62px] xl:h-screen py-6 flex xl:flex-col justify-between items-center xl:items-center xl:px-0 md:px-8 xl:pt-5 xl:pb-4 font-medium shadow-lg absolute left-0 top-0">
<div className="flex">
<Link href="https://swaplace.xyz/">
<SwaplaceIcon
className="w-10 mt-5"
fill={cc([theme == "dark" ? "#DDF23D" : "#4F4F4F"])}
/>
</Link>
<div className={cc([showFullNav ? "block" : "hidden"])}>
<ConnectWallet />
<>
<header className="bg-[#F2F2F2] dark:bg-[#212322] z-40 w-screen h-auto xl:w-[62px] xl:h-screen py-6 flex xl:flex-col justify-between items-center xl:items-center xl:px-0 md:px-8 xl:pt-5 xl:pb-4 font-medium shadow-lg absolute left-0 top-0">
<div className="flex">
<Link href="https://swaplace.xyz/">
<SwaplaceIcon
className="w-10 mt-5"
fill={cc([theme == "dark" ? "#DDF23D" : "#4F4F4F"])}
/>
</Link>
<div className={cc([showFullNav ? "block" : "hidden"])}>
<ConnectWallet />
</div>
</div>
</div>
<div className="xl:flex-col flex-row flex">
<SwappingIcons />
</div>
<div className="flex md:flex-col gap-[16px]">
<div className="flex justify-center">
{isDark ? (
<Tooltip position={"right"} content={"Light Mode"}>
<button
className="cursor-pointer bg-black-500 hover:bg-[#353836] transition-colors duration-200 rounded-[10px]"
onClick={() => setTheme("light")}
>
<SunIcon className="w-10 p-2 text-[#f6f6f6]" />
</button>
</Tooltip>
) : (
<Tooltip position={"right"} content={"Dark Mode"}>
<button
className="bg-black-500 outline-none hover:bg-[#E4E4E4] transition-colors duration-200 rounded-[10px]"
onClick={() => setTheme("dark")}
>
<MoonIcon className="w-10 p-2 text-black" />
</button>
</Tooltip>
)}
<div className="xl:flex-col flex-row flex">
<SwappingIcons />
</div>
<div className="h-10 w-10">
{isWideScreen ? (
<>
{!!authenticatedUserAddress ? (
<Tooltip position={"right"} content={"Your wallet"}>
<button className="rounded-[10px] bg-[#DDF23D] flex items-center justify-center">
<ENSAvatar avatarENSAddress={authenticatedUserAddress} />
</button>
</Tooltip>
) : (
<Tooltip position={"right"} content={"Connect a Wallet"}>
<div className="h-10 w-10 rounded-[10px] bg-[#DDF23D] flex items-center justify-center">
<ConnectWallet
customStyle="w-full flex justify-center items-center"
walletIcon={true}
/>
</div>
</Tooltip>
)}
</>
) : (
<>
{!!authenticatedUserAddress ? (
<Tooltip position={"right"} content={"Your wallet"}>
<button className="rounded-[10px] bg-[#DDF23D] flex items-center justify-center">
<ENSAvatar avatarENSAddress={authenticatedUserAddress} />
</button>
</Tooltip>
) : (
<Tooltip position={"left"} content={"Connect a Wallet"}>
<div className="h-10 w-10 rounded-[10px] bg-[#DDF23D] flex items-center justify-center">
<ConnectWallet
customStyle="w-full flex justify-center items-center"
walletIcon={true}
/>
</div>
</Tooltip>
)}
</>
)}
<div className="flex md:flex-col gap-[16px]">
<div className="flex justify-center">
{isDark ? (
<Tooltip position={"right"} content={"Light Mode"}>
<button
className="cursor-pointer bg-black-500 hover:bg-[#353836] transition-colors duration-200 rounded-[10px]"
onClick={() => setTheme("light")}
>
<SunIcon className="w-10 p-2 text-[#f6f6f6]" />
</button>
</Tooltip>
) : (
<Tooltip position={"right"} content={"Dark Mode"}>
<button
className="bg-black-500 outline-none hover:bg-[#E4E4E4] transition-colors duration-200 rounded-[10px]"
onClick={() => setTheme("dark")}
>
<MoonIcon className="w-10 p-2 text-black" />
</button>
</Tooltip>
)}
</div>
<div className="h-10 w-10">
{isWideScreen ? (
<>
{!!authenticatedUserAddress ? (
<Tooltip position={"right"} content={"Your wallet"}>
<button
onClick={toggleSidebar}
className="rounded-[10px] bg-[#DDF23D] flex items-center justify-center"
>
<ENSAvatar avatarENSAddress={authenticatedUserAddress} />
</button>
</Tooltip>
) : (
<Tooltip position={"right"} content={"Connect a Wallet"}>
<div className="h-10 w-10 rounded-[10px] bg-[#DDF23D] flex items-center justify-center">
<ConnectWallet
customStyle="w-full flex justify-center items-center"
walletIcon={true}
/>
</div>
</Tooltip>
)}
</>
) : (
<>
{!!authenticatedUserAddress ? (
<Tooltip position={"right"} content={"Your wallet"}>
<button
onClick={toggleSidebar}
className="rounded-[10px] bg-[#DDF23D] flex items-center justify-center"
>
<ENSAvatar avatarENSAddress={authenticatedUserAddress} />
</button>
</Tooltip>
) : (
<Tooltip position={"left"} content={"Connect a Wallet"}>
<div className="h-10 w-10 rounded-[10px] bg-[#DDF23D] flex items-center justify-center">
<ConnectWallet
customStyle="w-full flex justify-center items-center"
walletIcon={true}
/>
</div>
</Tooltip>
)}
</>
)}
</div>
</div>
</div>
</header>
</header>
<WalletSidebarTemplate isOpen={isSidebarOpen} isMobile={!isWideScreen} />
</>
);
};
5 changes: 4 additions & 1 deletion tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@ const config: Config = {
fontFamily: {
onest: ["var(--font-onest)"],
},
boxShadow: {
sidebarLight: "0px 0px 6px 1px rgba(0, 0, 0, 0.30)",
sidebarDark: "0px 0px 12px 1px rgba(0, 0, 0, 0.40)"
},
},
},

plugins: [],
};
export default config;