Skip to content

Commit

Permalink
Merge branch 'dev' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed May 30, 2024
2 parents c9d19d2 + 7de099a commit d4023b2
Show file tree
Hide file tree
Showing 12 changed files with 239 additions and 136 deletions.
8 changes: 4 additions & 4 deletions app/(fees)/fees/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from "next/link";
import Sidebar from "@/components/layout/Sidebar";
import Icon from "@/components/layout/Icon";
import EthUsdSwitch from "@/components/layout/EthUsdSwitch";
import DarkModeSwitch from "@/components/layout/DarkModeSwitch";

import Banner from "@/components/Banner";
import Notification from "@/components/Notification";
import HeaderLinks from "@/components/layout/HeaderLinks";
Expand Down Expand Up @@ -96,9 +96,9 @@ export default function Header() {
</div>
</div>
{process.env.NEXT_PUBLIC_VERCEL_ENV !== undefined &&
["development", "preview"].includes(
process.env.NEXT_PUBLIC_VERCEL_ENV,
) ? (
["development", "preview"].includes(
process.env.NEXT_PUBLIC_VERCEL_ENV,
) ? (
<> </>
) : (
<>{/* <SupportUsBanner /> */}</>
Expand Down
181 changes: 98 additions & 83 deletions app/(layout)/chains/[chain]/page.tsx
View file

Large diffs are not rendered by default.

35 changes: 11 additions & 24 deletions app/(layout)/fundamentals/[metric]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,33 +203,10 @@ export default async function Layout({
</a>
</p>
</div>
) : pageData.title === "Transaction Costs" ? (
<div className="flex flex-col sm:flex-row space-x-1">
<span className="inline-flex gap-x-1">
<div>
{pageData.description} Check out our new
<a
href="https://fees.growthepie.xyz/"
target="_blank"
className="underline mx-0.5"
>
fees page
</a>
for a more detailed view.
</div>
</span>
</div>
) : (
pageData.description
)}
{pageData.note && (
<div className="text-xs">
<span className="font-semibold text-forest-200 dark:text-forest-400">
Note:{" "}
</span>
{pageData.note}
</div>
)}

{pageData.tags && (
<div className="flex items-center mt-[5px]">
{pageData.tags.map((tag, i) => (
Expand All @@ -253,6 +230,16 @@ export default async function Layout({
className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[63px] py-[23px] flex flex-col"
question={`What does ${pageData.title} tell you?`}
answer={pageData.why}
note={
pageData.note && (
<div className="text-xs">
<span className="font-semibold text-forest-200 dark:text-forest-400">
Note:{" "}
</span>
{pageData.note}
</div>
)
}
startOpen
/>
</Container>
Expand Down
14 changes: 14 additions & 0 deletions app/(layout)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,15 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
const script = `
(function() {
// Set dark theme
document.documentElement.classList.add('dark');
// Optionally, set dark theme in local storage
localStorage.setItem('theme', 'dark');
})();
`;

return (
<html
lang="en"
Expand All @@ -153,6 +162,11 @@ export default function RootLayout({
>
<Head />
<body className="bg-forest-50 dark:bg-[#1F2726] text-forest-900 dark:text-forest-500 font-raleway !overflow-x-hidden overflow-y-scroll">
<script
dangerouslySetInnerHTML={{
__html: script,
}}
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
Expand Down
2 changes: 1 addition & 1 deletion app/providers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function Providers({ children, forcedTheme }: ProvidersProps) {
<ThemeProvider
attribute="class"
defaultTheme="dark"
forcedTheme={forcedTheme}
forcedTheme={"dark"}
disableTransitionOnChange
>
<SWRConfig
Expand Down
6 changes: 2 additions & 4 deletions components/BottomBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import Link from "next/link";
import DarkModeSwitch from "@/components/layout/DarkModeSwitch";

import { track } from "@vercel/analytics";
import Icon from "@/components/layout/Icon";

Expand Down Expand Up @@ -92,9 +92,7 @@ export default function BottomBanner() {
© {new Date().getFullYear()} growthepie 🥧📏
</div>
</div>
<div className="hidden md:flex justify-end">
<DarkModeSwitch />
</div>
<div className="hidden md:flex justify-end"></div>
</div>
</div>
);
Expand Down
94 changes: 84 additions & 10 deletions components/layout/CategoryMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1142,26 +1142,51 @@ export default function CategoryMetrics({
<div id="content-container">
{IS_PREVIEW || IS_DEVELOPMENT ? (
<Container>
<div className="border-forest-400 dark:border-forest-800 flex border-[0.5px] mx-[2px] mt-[30px] rounded-2xl min-h-[65px] bg-forest-1000 ">
<div
className={`border-forest-400 dark:border-forest-800 flex border-[0.5px] mx-[2px] mt-[30px] rounded-2xl transition-all duration-300 ease-in-out overflow-hidden bg-forest-1000 ${
openSub ? "h-[130px]" : "h-[65px]"
}`}
>
{Object.keys(categories).map((category, i) =>
categories[category] !== "Categories" ? (
<div
key={category}
className="w-full hover:cursor-pointer hover:bg-forest-500 dark:hover:bg-white/5 items-center justify-between flex flex-col border-forest-50 border-dotted border-l-[1px] pt-2 pb-0.5 text-[12px] font-semibold "
className={`w-full hover:cursor-pointer overflow-hidden items-center transition-transform duration-1000 justify-between flex flex-col border-forest-50 border-dotted border-l-[1px] pt-2 pb-0.5 text-[12px] font-semibold ${
selectedCategory === category
? "bg-forest-600"
: "hover:bg-forest-500 dark:hover:bg-white/5"
} `}
onClick={() => {
if (selectedCategory === category) {
handleOpen(category);
setOpenSub(!openSub);
}

setSelectedCategory(category);
}}
style={{
transition: "min-width 0.5s",
minWidth:
selectedCategory === category && openSub
? "500px"
: "10px",
}}
>
<div>{categories[category]}</div>
<div
className={`flex items-center h-[25px] min-w-[100px] justify-center ${
selectedCategory === category
? "text-sm font-bold"
: "text-xs font-medium"
}`}
>
<h1>{categories[category]}</h1>
</div>
<div
key={i}
className="relative flex items-center mb-2.5 top-[8px] h-[24px] w-full"
className={`relative transition-transform duration-100 flex min-w-[24px] min-h-[24px] items-center mb-2.5 top-[8px] h-[24px] w-full ${
openSub ? "rotate-180 " : "rotate-0"
}`}
onClick={() => {
handleOpen(category);
setOpenSub(!openSub);
}}
>
<Icon
Expand Down Expand Up @@ -1268,13 +1293,62 @@ export default function CategoryMetrics({
}}
>
<div
className={`flex items-center h-[25px] mt-1 ${
key={"label" + category}
className={`flex self-center min-w-[100px] justify-center mx-auto pb-8 pt-2 h-[30px] ${
selectedCategory === category
? "text-sm font-bold"
: "text-xs font-medium"
? "text-base font-bold "
: `text-base font-medium truncate hover:text-ellipsis ${
isCategoryHovered[category]
? category === "native_transfers" ||
category === "token_transfers"
? "pl-[0px] w-full"
: "w-full pl-0"
: category === "native_transfers" ||
category === "token_transfers"
? "w-full "
: "w-full pl-0"
}`
}`}
style={{
background:
selectedCategory === category
? "#5A6462"
: "none",
backgroundClip:
selectedCategory === category
? "initial"
: "text",
WebkitBackgroundClip:
selectedCategory === category
? "initial"
: "text",
WebkitTextFillColor:
selectedCategory === category
? "inherit"
: theme === "light"
? "initial"
: "transparent",
backgroundImage:
selectedCategory === category
? "none"
: theme === "light"
? "none"
: `radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%), linear-gradient(90deg, rgba(16, 20, 19, ${
0.4 +
(i /
(Object.keys(categories).length -
1)) *
0.4
}) 0%, #101413 15.10%, rgba(16, 20, 19, 0.00) 48.96%, #101413 86.98%, rgba(16, 20, 19, ${
0.4 +
(i /
(Object.keys(categories).length -
1)) *
0.4
}) 100%)`,
}}
>
<h1>{categories[category]}</h1>
{categories[category]}
</div>

<div
Expand Down
13 changes: 9 additions & 4 deletions components/layout/ChainSectionHead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,23 @@ const ChainSectionHead = ({
} ${
title === "Background"
? isSidebarOpen
? "opacity-100"
: "2xl:opacity-0 md:opacity-100"
? "lg:opacity-0 md:opacity-100"
: "xl:opacity-0 md:opacity-100"
: title === "Risk"
? " xl:opacity-0 md:opacity-100 "
: title === "Usage" || title === "Technology"
: title === "Usage"
? isSidebarOpen
? "2xl:opacity-0 md:opacity-100 "
: "xl:opacity-0 md:opacity-100"
: title === "Technology"
? isSidebarOpen
? "xl:opacity-0 md:opacity-100 "
: "lg:opacity-0 md:opacity-100"
: ""
}`}
style={{
boxShadow: "-62.5px 0px 10px rgba(22, 28, 27, 0.35) inset",
background:
"linear-gradient(to right, rgba(0, 0, 0, 0) 10%, rgba(22, 28, 27, 0.76) 100%)",
}}
></div>
<div className="bg-white dark:bg-forest-1000 rounded-full w-[24px] h-[24px] p-1 flex items-center justify-center relative">
Expand Down
2 changes: 1 addition & 1 deletion components/layout/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from "next/link";
import Sidebar from "./Sidebar";
import Icon from "./Icon";
import EthUsdSwitch from "./EthUsdSwitch";
import DarkModeSwitch from "./DarkModeSwitch";

import Banner from "@/components/Banner";
import SupportUsBanner from "./SupportUsBanner";
import Notification from "@/components/Notification";
Expand Down
15 changes: 13 additions & 2 deletions components/layout/QuestionAnswer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import { useElementSizeObserver } from "@/hooks/useElementSizeObserver";
export default function QuestionAnswer({
question,
answer,
note,
className = "",
startOpen = false,
}: {
question: string | React.ReactNode;
answer: string | React.ReactNode;
note?: string | React.ReactNode;
className?: string;
startOpen?: boolean;
}) {
Expand All @@ -26,10 +28,11 @@ export default function QuestionAnswer({
onClick={() => setOpen(!open)}
>
<div className="flex w-[13px] h-[13px] items-center justify-center">

<Icon
icon="feather:arrow-right-circle"
className={`w-[13px] h-[13px] transform rotate-0 transition-transform duration-300 ${open ? "rotate-90" : "rotate-0"}`}
className={`w-[13px] h-[13px] transform rotate-0 transition-transform duration-300 ${
open ? "rotate-90" : "rotate-0"
}`}
/>
</div>
<div className="font-semibold text-sm leading-snug">{question}</div>
Expand All @@ -44,6 +47,14 @@ export default function QuestionAnswer({
{answer}
</div>
</div>
<div
className={`transition-height duration-300 overflow-hidden text-base`}
style={{
height: open ? 25 : 0,
}}
>
{note && <div className="pt-[10px]">{note}</div>}
</div>
</div>
);
}
3 changes: 1 addition & 2 deletions components/layout/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import { useUIContext } from "@/contexts/UIContext";
import { Icon } from "@iconify/react";
import EthUsdSwitch from "./EthUsdSwitch";
import DarkModeSwitch from "./DarkModeSwitch";

import Image from "next/image";
import { usePathname, useSearchParams } from "next/navigation";
import Backgrounds from "./Backgrounds";
Expand Down Expand Up @@ -230,7 +230,6 @@ export default function Sidebar({ isMobile = false }: SidebarProps) {
</Link>
</div>
<div className="items-end justify-center z-[999] flex space-x-[15px] mt-[2px] mb-[17px]">
<DarkModeSwitch isMobile />
<EthUsdSwitch isMobile />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/layout/SwiperContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function SwiperContainer({ ariaId }: { ariaId?: string }) {
perPage: 3,
},
6000: {
perPage: isSidebarOpen ? 3 : 4,
perPage: 3,
},
},
}}
Expand Down

0 comments on commit d4023b2

Please sign in to comment.