Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history 
# Conflicts:
#	components/layout/Header.tsx
  • Loading branch information
@manishiwa
manishiwa committed Sep 15, 2023
2 parents 6521fd0 + c22b9c6 commit cf00805
Show file tree
Hide file tree
Showing 23 changed files with 1,346 additions and 233 deletions.
2 changes: 2 additions & 0 deletions app/blockspace/category-comparison/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
import Heading from "@/components/layout/Heading";
import Container from "@/components/layout/Container";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { useSessionStorage } from "usehooks-ts";
import CategoryMetrics from "@/components/layout/CategoryMetrics";
import { BlockspaceURLs } from "@/lib/urls";
Expand Down Expand Up @@ -50,6 +51,7 @@ const CategoryComparison = () => {
</h1>
</div>
</Container>

{usageData && (
<CategoryMetrics
showEthereumMainnet={showEthereumMainnet}
Expand Down
4 changes: 2 additions & 2 deletions app/fundamentals/[metric]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { MetricsResponse } from "@/types/api/MetricsResponse";
import Heading from "@/components/layout/Heading";
import Subheading from "@/components/layout/Subheading";
import ComparisonChart from "@/components/layout/ComparisonChart";
import { useSessionStorage } from "usehooks-ts";
import { useLocalStorage, useSessionStorage } from "usehooks-ts";
import useSWR from "swr";
import MetricsTable from "@/components/layout/MetricsTable";
import { MetricsURLs } from "@/lib/urls";
Expand All @@ -18,7 +18,7 @@ import Container from "@/components/layout/Container";
import ShowLoading from "@/components/layout/ShowLoading";

const Chain = ({ params }: { params: any }) => {
const [showUsd, setShowUsd] = useSessionStorage("showUsd", true);
const [showUsd, setShowUsd] = useLocalStorage("showUsd", true);
const [errorCode, setErrorCode] = useState<number | null>(null);

const {
Expand Down
9 changes: 9 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@
shape-rendering: crispEdges;
}

.highcharts-selection-marker {
fill: rgba(205, 216, 211, 0.2);
/* stroke: rgba(205, 216, 211, 1);
stroke-width: 1px;
stroke-linejoin: round;
stroke-dasharray: 2, 2;
shape-rendering: crispEdges; */
}

.scroller::-webkit-scrollbar-button:end:increment {
width: 50px;
display: block;
Expand Down
106 changes: 104 additions & 2 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ import LoadingAnimation from "@/components/layout/LoadingAnimation";
import { useSessionStorage } from "usehooks-ts";
import Container from "@/components/layout/Container";
import ShowLoading from "@/components/layout/ShowLoading";
import ChainComponent from "@/components/charts/ChainComponent";
import { ChainURLs, BlockspaceURLs } from "@/lib/urls";
import ContractCard from "@/components/layout/ContractCard";
import { ChainResponse } from "@/types/api/ChainResponse";
import { ChainOverviewResponse } from "@/types/api/ChainOverviewResponse";

export default function Home() {
const isLargeScreen = useMediaQuery("(min-width: 768px)");
Expand All @@ -43,6 +48,20 @@ export default function Home() {
isValidating: masterValidating,
} = useSWR<MasterResponse>(MasterURL);

// const {
// data: chainData,
// error: chainError,
// isValidating: chainValidating,
// isLoading: chainLoading,
// } = useSWR<ChainResponse>(ChainURLs["arbitrum"]);

// const {
// data: blockspaceData,
// error: blockspaceError,
// isValidating: blockspaceValidating,
// isLoading: blockspaceLoading,
// } = useSWR<any>(BlockspaceURLs["chain-overview"]);

const [data, setData] = useState<any>(null);

const [selectedTimeInterval, setSelectedTimeInterval] = useState("weekly");
Expand Down Expand Up @@ -83,15 +102,67 @@ export default function Home() {
/>
{/* )} */}
<Container className="flex flex-col flex-1 w-full mt-[65px]">
<Heading className="font-bold text-[30px] leading-snug md:text-[36px] mb-[28px] lg:mb-[30px]">
<Heading className="font-bold text-[30px] leading-snug md:text-[36px] mb-[28px] lg:mb-[30px] max-w-[900px]">
Growing Ethereum’s Ecosystem Together
</Heading>
{/* <Heading className="font-bold text-[30px] leading-snug md:text-[36px] mb-[28px] lg:mb-[30px] max-w-[900px]">
Mastering Ethereum Layer-2s: Your Gateway to Curated Analytics and
Knowledge
</Heading> */}
</Container>
{/* <Container className="flex flex-col flex-1 w-full">
<div className="flex space-x-2 mt-[30px] items-center">
<Icon
icon="gtp:fundamentals"
className="w-[30px] h-[30px] md:w-9 md:h-9"
/>
<Heading className="text-[20px] md:text-[30px] leading-snug font-bold">
Most Recent Metrics
</Heading>
</div>
</Container>
{chainData && (
<Container className="mt-[30px] relative">
<div className="grid grid-flow-col grid-rows-1 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-x-[10px] overflow-y-hidden overflow-x-hidden 2xl:overflow-x-hidden w-full p-0 pb-9 scrollbar-thin scrollbar-thumb-forest-900 scrollbar-track-forest-500/5 scrollbar-thumb-rounded-full scrollbar-track-rounded-full">
<ChainComponent
data={chainData.data}
chain={"arbitrum"}
category={"txcount"}
selectedTimespan={"90d"}
selectedScale="linear"
/>
<ChainComponent
data={chainData.data}
chain={"arbitrum"}
category={"stables_mcap"}
selectedTimespan={"90d"}
selectedScale="linear"
/>
<ChainComponent
data={chainData.data}
chain={"arbitrum"}
category={"fees"}
selectedTimespan={"90d"}
selectedScale="linear"
/>
</div>
<div className="absolute bottom-2 2xl:bottom-2 left-[40px] md:left-[70px]">
<Link
className="flex space-x-2 items-center"
href="/chains/arbitrum"
>
Compare <Icon icon="feather:chevron-right" className="w-6 h-6" />{" "}
</Link>
</div>
</Container>
)} */}
<Container className="flex flex-col flex-1 w-full">
{data && landing && master && <TopAnimation />}
{/* <Subheading className="text-sm leading-snug">
Compare Ethereum&apos;s Layer-2 solutions and better understand
the metrics to grow the ecosystem.
</Subheading> */}
<div className="flex mt-0 lg:mt-[100px] mb-[25px] md:mb-[32px] space-x-2 items-center">
<div className="flex mt-[25px] lg:mt-[70px] mb-[25px] md:mb-[32px] space-x-2 items-center">
<Icon
icon="gtp:gtp-pie"
className="w-[30px] h-[30px] md:w-9 md:h-9"
Expand Down Expand Up @@ -143,6 +214,37 @@ export default function Home() {
</Container>
</>
)}
{/* <Container className="flex flex-col flex-1 w-full">
<div className="flex space-x-2 mt-[30px] items-center">
<Icon
icon="gtp:package"
className="w-[30px] h-[30px] md:w-9 md:h-9"
/>
<Heading className="text-[20px] md:text-[30px] leading-snug font-bold">
Blockspace
</Heading>
</div>
<Subheading className="text-base leading-normal md:leading-snug mt-[30px] mb-[15px] px-[5px] lg:px-[45px]">
Top 6 gas-consuming contracts across all tracked Layer-2s.
</Subheading>
{blockspaceData && (
<div className="grid grid-rows-6 grid-cols-1 lg:grid-rows-3 lg:grid-cols-2 xl:grid-rows-2 xl:grid-cols-3 gap-x-[10px] gap-y-[15px]">
{new Array(6).fill(0).map((_, i) => (
<ContractCard
key={i}
data={
blockspaceData.data.chains.all_l2s.overview.max.defi.contracts
.data[i]
}
types={
blockspaceData.data.chains.all_l2s.overview.max.defi.contracts
.types
}
/>
))}
</div>
)}
</Container> */}
<Container>
<div className="flex gap-x-0 md:gap-x-12 w-full ml-0 mt-[15px] md:mt-[90px]">
<div className="flex flex-col md:w-1/2 lg:w-2/3">
Expand Down
54 changes: 39 additions & 15 deletions components/charts/ChainComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import d3 from "d3";
import { AllChainsByKeys } from "@/lib/chains";
import { debounce, forEach } from "lodash";

import { navigationItems } from "@/lib/navigation";
import { navigationItems, navigationCategories } from "@/lib/navigation";
import { useUIContext } from "@/contexts/UIContext";
import { useMediaQuery } from "usehooks-ts";
import ChartWatermark from "@/components/layout/ChartWatermark";
Expand Down Expand Up @@ -319,6 +319,36 @@ export default function ChainComponent({
[selectedTimespan],
);

const getNavIcon = useCallback(
(key: string) => {
const navItem = navigationItems[1].options.find(
(item) => item.key === key,
);

if (!navItem || !navItem.category) return null;

return navigationCategories[navItem.category]
? navigationCategories[navItem.category].icon
: null;
},
[navigationItems],
);

const getNavLabel = useCallback(
(key: string) => {
const navItem = navigationItems[1].options.find(
(item) => item.key === key,
);

if (!navItem || !navItem.category) return null;

return navigationCategories[navItem.category]
? navigationCategories[navItem.category].label
: null;
},
[navigationItems],
);

const displayValues = useMemo(() => {
const p: {
[key: string]: {
Expand Down Expand Up @@ -867,7 +897,7 @@ export default function ChainComponent({

return (
<div key={category} className="w-full h-fit relative">
<div className="w-[431px] h-[176px] relative">
<div className="w-full h-[176px] relative">
<div className="absolute w-full h-full bg-forest-50 dark:bg-[#1F2726] rounded-[15px]"></div>
<div className="absolute w-full h-[142px] top-[49px]">
<HighchartsReact
Expand Down Expand Up @@ -1004,9 +1034,6 @@ export default function ChainComponent({
}
}}
/>
<div className="absolute bottom-[48.5%] left-0 right-0 flex items-center justify-center pointer-events-none z-0 opacity-40 mix-blend-lighten">
<ChartWatermark className="w-[102.936px] h-[24.536px]" />
</div>
</div>
<div className="absolute top-[14px] w-full flex justify-between items-center px-[26px]">
<div className="text-[20px] leading-snug font-bold">
Expand All @@ -1032,18 +1059,15 @@ export default function ChainComponent({
className={`absolute top-[calc(50% - 0.5px)] right-[20px] w-[4px] h-[4px] rounded-full bg-forest-900 dark:bg-forest-50`}
></div>
</div>
<div>
<Icon
icon={
navigationItems[1].options.find((o) => o.key === category)
?.icon ?? ""
}
className="absolute h-[64px] w-[64px] top-[55px] right-[26px] dark:text-[#CDD8D3] opacity-5 pointer-events-none"
/>
<div className="flex absolute h-[40px] w-[320px] top-[120px] left-[36px] items-center gap-x-[6px] dark:text-[#CDD8D3] opacity-20 pointer-events-none">
<Icon icon={getNavIcon(category)} className="w-[40px] h-[40px] " />
<div className="text-[30px] font-bold text-forest-200">
{getNavLabel(category).toUpperCase()}
</div>
</div>
</div>

{!zoomed
{/* {!zoomed
? (category === "stables_mcap" || category === "txcosts") && (
<div
className={`w-full h-[15px] absolute -bottom-[15px] text-[10px] text-forest-600/80 dark:text-forest-500/80 ${
Expand Down Expand Up @@ -1098,7 +1122,7 @@ export default function ChainComponent({
})}
</div>
</div>
)}
)} */}
</div>
);
}
Loading

0 comments on commit cf00805

Please sign in to comment.