diff --git a/app/(fees)/fees/Header.tsx b/app/(fees)/fees/Header.tsx index 1e113643..9ad50f2c 100644 --- a/app/(fees)/fees/Header.tsx +++ b/app/(fees)/fees/Header.tsx @@ -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"; @@ -96,9 +96,9 @@ export default function Header() { {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, + ) ? ( <> ) : ( <>{/* */} diff --git a/app/(layout)/chains/[chain]/page.tsx b/app/(layout)/chains/[chain]/page.tsx index 30f86783..6cb83ccc 100644 --- a/app/(layout)/chains/[chain]/page.tsx +++ b/app/(layout)/chains/[chain]/page.tsx @@ -178,20 +178,20 @@ const Chain = ({ params }: { params: any }) => { const getGradientColor = useCallback((percentage, weighted = false) => { const colors = !weighted ? [ - { percent: 0, color: "#1DF7EF" }, - { percent: 20, color: "#76EDA0" }, - { percent: 50, color: "#FFDF27" }, - { percent: 70, color: "#FF9B47" }, - { percent: 100, color: "#FE5468" }, - ] + { percent: 0, color: "#1DF7EF" }, + { percent: 20, color: "#76EDA0" }, + { percent: 50, color: "#FFDF27" }, + { percent: 70, color: "#FF9B47" }, + { percent: 100, color: "#FE5468" }, + ] : [ - { percent: 0, color: "#1DF7EF" }, - { percent: 2, color: "#76EDA0" }, - { percent: 10, color: "#FFDF27" }, - { percent: 40, color: "#FF9B47" }, - { percent: 80, color: "#FE5468" }, - { percent: 100, color: "#FE5468" }, // Repeat the final color to ensure upper bound - ]; + { percent: 0, color: "#1DF7EF" }, + { percent: 2, color: "#76EDA0" }, + { percent: 10, color: "#FFDF27" }, + { percent: 40, color: "#FF9B47" }, + { percent: 80, color: "#FE5468" }, + { percent: 100, color: "#FE5468" }, // Repeat the final color to ensure upper bound + ]; let lowerBound = colors[0]; let upperBound = colors[colors.length - 1]; @@ -219,23 +219,23 @@ const Chain = ({ params }: { params: any }) => { const r = Math.floor( parseInt(lowerBound.color.substring(1, 3), 16) + - percentDiff * - (parseInt(upperBound.color.substring(1, 3), 16) - - parseInt(lowerBound.color.substring(1, 3), 16)), + percentDiff * + (parseInt(upperBound.color.substring(1, 3), 16) - + parseInt(lowerBound.color.substring(1, 3), 16)), ); const g = Math.floor( parseInt(lowerBound.color.substring(3, 5), 16) + - percentDiff * - (parseInt(upperBound.color.substring(3, 5), 16) - - parseInt(lowerBound.color.substring(3, 5), 16)), + percentDiff * + (parseInt(upperBound.color.substring(3, 5), 16) - + parseInt(lowerBound.color.substring(3, 5), 16)), ); const b = Math.floor( parseInt(lowerBound.color.substring(5, 7), 16) + - percentDiff * - (parseInt(upperBound.color.substring(5, 7), 16) - - parseInt(lowerBound.color.substring(5, 7), 16)), + percentDiff * + (parseInt(upperBound.color.substring(5, 7), 16) - + parseInt(lowerBound.color.substring(5, 7), 16)), ); return `#${r.toString(16).padStart(2, "0")}${g @@ -295,20 +295,23 @@ const Chain = ({ params }: { params: any }) => { }} >
{
-
+
{
{ Object.keys(master.chains[chainKey].block_explorers) .length > 0 && ( { ? `https://app.rhino.fi/bridge?refId=PG_GrowThePie&token=ETH&chainOut=${master.chains[chainKey].rhino_naming}&chain=ETHEREUM` : "https://app.rhino.fi/bridge/?refId=PG_GrowThePie" } - className={`absolute right-[5px] top-[10px] lg:top-[10px] left-[calc((100%/2)+5px)] ${isSidebarOpen + className={`absolute right-[5px] top-[10px] lg:top-[10px] left-[calc((100%/2)+5px)] ${ + isSidebarOpen ? "lg:left-[140px]" : "2xl:left-[150px] lg:left-[140px]" - }`} + }`} >
@@ -498,10 +504,11 @@ const Chain = ({ params }: { params: any }) => {
)} { title={"Background"} enableDropdown={isMobile} childrenHeight={isMobile ? 200 : 111} - className={`min-w-[100px] transition-all duration-300 min-w-none" lg:hover:min-w-[510px]`} + className={`min-w-[67px] 2xl:min-w-[413px] grow transition-all duration-300 lg:hover:min-w-[415px]`} >
-
+
Background Information
{master.chains[chainKey].description}
@@ -593,9 +601,9 @@ const Chain = ({ params }: { params: any }) => { backgroundColor: chainData ? chainData.ranking[key] ? getGradientColor( - chainData.ranking[key] - .color_scale * 100, - ) + chainData.ranking[key] + .color_scale * 100, + ) : "#5A6462" : "#5A6462", }} @@ -636,9 +644,9 @@ const Chain = ({ params }: { params: any }) => { backgroundColor: chainData ? chainData.ranking[key] ? getGradientColor( - chainData.ranking[key] - .color_scale * 100, - ) + chainData.ranking[key] + .color_scale * 100, + ) : "#5A6462" : "#5A6462", }} @@ -690,21 +698,22 @@ const Chain = ({ params }: { params: any }) => { title={"Usage"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className="hover:min-w-[200px] min-w-[35px] transition-all duration-300" + className="hover:min-w-[222px] min-w-[67px] transition-all duration-300" >
@@ -713,15 +722,17 @@ const Chain = ({ params }: { params: any }) => {
{chainData - ? `${chainData.hottest_contract - ? `${chainData.hottest_contract.data[0] - ? chainData.hottest_contract.data[0][1] + - " - " + - chainData.hottest_contract.data[0][2] - : "N/A" + ? `${ + chainData.hottest_contract + ? `${ + chainData.hottest_contract.data[0] + ? chainData.hottest_contract.data[0][1] + + " - " + + chainData.hottest_contract.data[0][2] + : "N/A" + }` + : "N/A" }` - : "N/A" - }` : "N/A"}
@@ -734,19 +745,20 @@ const Chain = ({ params }: { params: any }) => { title={"Technology"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className={`transition-all duration-300 hover:min-w-[180px] min-w-[35px] hidden lg:block`} + className={`transition-all duration-300 hover:min-w-[200px] min-w-[67px] hidden lg:block`} >
@@ -791,16 +803,17 @@ const Chain = ({ params }: { params: any }) => { title={"Risk"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className={`flex-shrink transition-all duration-300 hover:min-w-[126px] hover:max-w-[126px] min-w-[35px] hidden lg:block`} + className={`flex-shrink transition-all duration-300 hover:min-w-[122px] hover:max-w-[122px] min-w-[67px] hidden lg:block`} >
+
Rollup Stage @@ -897,8 +910,9 @@ const Chain = ({ params }: { params: any }) => { title={"Technology"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className={`transition-all duration-300 ${isMobile ? "flex-1" : " hover:min-w-[190px] min-w-[35px] " - }`} + className={`transition-all duration-300 ${ + isMobile ? "flex-1" : " hover:min-w-[190px] min-w-[35px] " + }`} >
{ title={"Risk"} enableDropdown={isMobile} childrenHeight={isMobile ? 116 : 111} - className={`transition-all duration-300 ${isMobile + className={`transition-all duration-300 ${ + isMobile ? "w-[126px]" : "hover:min-w-[126px] max-w-[126px] min-w-[35px]" - }`} + }`} >
diff --git a/app/(layout)/fundamentals/[metric]/layout.tsx b/app/(layout)/fundamentals/[metric]/layout.tsx index c111eeec..a115470e 100644 --- a/app/(layout)/fundamentals/[metric]/layout.tsx +++ b/app/(layout)/fundamentals/[metric]/layout.tsx @@ -203,33 +203,10 @@ export default async function Layout({

- ) : pageData.title === "Transaction Costs" ? ( -
- -
- {pageData.description} Check out our new - - fees page - - for a more detailed view. -
- -
) : ( pageData.description )} - {pageData.note && ( -
- - Note:{" "} - - {pageData.note} -
- )} + {pageData.tags && (
{pageData.tags.map((tag, i) => ( @@ -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 && ( +
+ + Note:{" "} + + {pageData.note} +
+ ) + } startOpen /> diff --git a/app/(layout)/layout.tsx b/app/(layout)/layout.tsx index 900e607e..28dc50c5 100644 --- a/app/(layout)/layout.tsx +++ b/app/(layout)/layout.tsx @@ -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 ( +