Skip to content

Commit

Permalink
Merge pull request #5341 from nymtech/yana/frontend-fixes
Browse files Browse the repository at this point in the history 
Yana/frontend fixes
  • Loading branch information
@yanok87
yanok87 authored Jan 14, 2025
2 parents d876077 + 9639f08 commit f4a416c
Show file tree
Hide file tree
Showing 28 changed files with 1,337 additions and 229 deletions.
8 changes: 4 additions & 4 deletions explorer-nextjs/src/actions/getNymNodes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type NymNode from "@/app/api/types";
import { NYM_NODES } from "@/app/api/urls";
import type { IObservatoryNode } from "@/app/api/types";
import { DATA_OBSERVATORY_NODES_URL } from "@/app/api/urls";

const getNymNodes = async (): Promise<NymNode[]> => {
const response = await fetch(`${NYM_NODES}`, {
const getNymNodes = async (): Promise<IObservatoryNode[]> => {
const response = await fetch(`${DATA_OBSERVATORY_NODES_URL}`, {
next: {
revalidate: 900,
},
Expand Down
29 changes: 18 additions & 11 deletions explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import type NodeData from "@/app/api/types";
import { NYM_ACCOUNT_ADDRESS, NYM_NODES, NYM_PRICES_API } from "@/app/api/urls";
import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard";
import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard";
import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
import { ContentLayout } from "@/components/contentLayout/ContentLayout";
import SectionHeading from "@/components/headings/SectionHeading";
import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
import { Box, Typography } from "@mui/material";
import Grid2 from "@mui/material/Grid2";
import Grid from "@mui/material/Grid2";

export default async function Account({
params,
Expand Down Expand Up @@ -61,11 +62,11 @@ export default async function Account({

return (
<ContentLayout>
<Grid2 container columnSpacing={5} rowSpacing={5}>
<Grid2 size={6}>
<Grid container columnSpacing={5} rowSpacing={5}>
<Grid size={6}>
<SectionHeading title="Account Details" />
</Grid2>
<Grid2 size={6} justifyContent="flex-end">
</Grid>
<Grid size={6} justifyContent="flex-end">
<Box sx={{ display: "flex", justifyContent: "end" }}>
<ExplorerButtonGroup
options={[
Expand All @@ -84,17 +85,23 @@ export default async function Account({
]}
/>
</Box>
</Grid2>
<Grid2 size={4}>
</Grid>
<Grid size={4}>
<AccountInfoCard accountInfo={nymAccountBalancesData} />
</Grid2>
<Grid2 size={8}>
</Grid>
<Grid size={8}>
<AccountBalancesCard
accountInfo={nymAccountBalancesData}
nymPrice={nymPriceData.usd}
/>
</Grid2>
</Grid2>
</Grid>
</Grid>
<Grid container columnSpacing={5} rowSpacing={5}>
<Grid size={12}>
<SectionHeading title="Onboarding" />
</Grid>
<BlogArticlesCards limit={2} />
</Grid>
</ContentLayout>
);
} catch (error) {
Expand Down
8 changes: 8 additions & 0 deletions explorer-nextjs/src/app/(pages)/explorer/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
import CardSkeleton from "@/components/cards/Skeleton";
import { ContentLayout } from "@/components/contentLayout/ContentLayout";
import SectionHeading from "@/components/headings/SectionHeading";
import NodeTableWithAction from "@/components/nodeTable/NodeTableWithAction";
import { Wrapper } from "@/components/wrapper";
import Grid from "@mui/material/Grid2";
import { Suspense } from "react";

export default function ExplorerPage() {
Expand All @@ -13,6 +15,12 @@ export default function ExplorerPage() {
<Suspense fallback={<CardSkeleton sx={{ mt: 5 }} />}>
<NodeTableWithAction />
</Suspense>
<Grid container columnSpacing={5} rowSpacing={5} mt={10}>
<Grid size={12}>
<SectionHeading title="Onboarding" />
</Grid>
<BlogArticlesCards limit={2} />
</Grid>
</Wrapper>
</ContentLayout>
);
Expand Down
194 changes: 126 additions & 68 deletions explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import type NodeData from "@/app/api/types";
import { NYM_NODES } from "@/app/api/urls";
import type { IObservatoryNode } from "@/app/api/types";
import { DATA_OBSERVATORY_NODES_URL } from "@/app/api/urls";
import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
import ExplorerCard from "@/components/cards/ExplorerCard";
import { ContentLayout } from "@/components/contentLayout/ContentLayout";
import SectionHeading from "@/components/headings/SectionHeading";
import DelegationsTable from "@/components/nodeTable/DelegationsTable";
import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard";
import { NodeChatCard } from "@/components/nymNodePageComponents/ChatCard";
import { NodeMetricsCard } from "@/components/nymNodePageComponents/NodeMetricsCard";
import { NodeProfileCard } from "@/components/nymNodePageComponents/NodeProfileCard";
import { NodeRewardsCard } from "@/components/nymNodePageComponents/NodeRewardsCard";
import { QualityIndicatorsCard } from "@/components/nymNodePageComponents/QualityIndicatorsCard";
import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
import { Box } from "@mui/material";
import Grid2 from "@mui/material/Grid2";
import Grid from "@mui/material/Grid2";

export default async function NymNode({
params,
Expand All @@ -19,7 +23,7 @@ export default async function NymNode({
try {
const id = Number((await params).id);

const response = await fetch(NYM_NODES, {
const observatoryResponse = await fetch(DATA_OBSERVATORY_NODES_URL, {
headers: {
Accept: "application/json",
"Content-Type": "application/json; charset=utf-8",
Expand All @@ -28,87 +32,141 @@ export default async function NymNode({
// refresh event list cache at given interval
});

const nymNodes: NodeData[] = await response.json();
const observatoryNymNodes: IObservatoryNode[] =
await observatoryResponse.json();

if (!nymNodes) {
if (!observatoryNymNodes) {
return null;
}

const nymNode = nymNodes.find((node) => node.node_id === id);
const observatoryNymNode = observatoryNymNodes.find(
(node) => node.node_id === id,
);

if (!nymNode) {
if (!observatoryNymNode) {
return null;
}

const nodeDelegationsResponse = await fetch(
`${DATA_OBSERVATORY_NODES_URL}/${id}/delegations`,
{
headers: {
Accept: "application/json",
"Content-Type": "application/json; charset=utf-8",
},
next: { revalidate: 60 },
// refresh event list cache at given interval
},
);

const delegations = await nodeDelegationsResponse.json();

return (
<ContentLayout>
<Grid2 container columnSpacing={5} rowSpacing={5}>
<Grid2 size={12}>
<Grid container columnSpacing={5} rowSpacing={5}>
<Grid size={12}>
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<SectionHeading title="Nym Node Details" />
<ExplorerButtonGroup
options={[
{ label: "Nym Node", isSelected: true, link: "/nym-node/1" },
{
label: "Account",
isSelected: false,
link: `/account/${nymNode.bond_information.owner}`,
},
]}
/>
{observatoryNymNode.bonding_address && (
<ExplorerButtonGroup
options={[
{
label: "Nym Node",
isSelected: true,
link: `/nym-node/${id}`,
},
{
label: "Account",
isSelected: false,
link: `/account/${observatoryNymNode.bonding_address}`,
},
]}
/>
)}
</Box>
</Grid2>
<Grid2
size={{
xs: 12,
md: 4,
}}
>
<NodeProfileCard
bondInfo={nymNode.bond_information}
nodeDescription={nymNode.description}
/>
</Grid2>
<Grid2
size={{
xs: 12,
md: 4,
}}
>
<BasicInfoCard
bondInfo={nymNode.bond_information}
nodeDescription={nymNode.description}
rewardDetails={nymNode.rewarding_details}
/>
</Grid2>
<Grid2
size={{
xs: 12,
md: 4,
}}
>
<QualityIndicatorsCard nodeDescription={nymNode.description} />
</Grid2>
<Grid2
size={{
xs: 12,
md: 6,
}}
>
<NodeRewardsCard rewardDetails={nymNode.rewarding_details} />
</Grid2>
<Grid2
</Grid>
{observatoryNymNode && (
<Grid
size={{
xs: 12,
md: 4,
}}
>
<NodeProfileCard nodeInfo={observatoryNymNode} />
</Grid>
)}
{observatoryNymNode.rewarding_details && (
<Grid
size={{
xs: 12,
md: 4,
}}
>
<BasicInfoCard
rewardDetails={observatoryNymNode.rewarding_details}
nodeInfo={observatoryNymNode}
/>
</Grid>
)}
{observatoryNymNode && (
<Grid
size={{
xs: 12,
md: 4,
}}
>
<QualityIndicatorsCard nodeInfo={observatoryNymNode} />
</Grid>
)}
{observatoryNymNode.rewarding_details && (
<Grid
size={{
xs: 12,
md: 6,
}}
>
<NodeRewardsCard
rewardDetails={observatoryNymNode.rewarding_details}
nodeInfo={observatoryNymNode}
/>
</Grid>
)}
{observatoryNymNode && (
<Grid
size={{
xs: 12,
md: 6,
}}
>
<NodeMetricsCard nodeInfo={observatoryNymNode} />
</Grid>
)}
{delegations && (
<Grid
size={{
xs: 12,
}}
>
<ExplorerCard label="Delegations" sx={{ height: "100%" }}>
<DelegationsTable delegations={delegations} />
</ExplorerCard>
</Grid>
)}

<Grid
size={{
xs: 12,
md: 6,
}}
>
<NodeMetricsCard
nodeDescription={nymNode.description}
nodeId={nymNode.bond_information.node_id}
/>
</Grid2>
</Grid2>
<NodeChatCard />
</Grid>
</Grid>
<Grid container columnSpacing={5} rowSpacing={5}>
<Grid size={12}>
<SectionHeading title="Onboarding" />
</Grid>
<BlogArticlesCards limit={4} />
</Grid>
</ContentLayout>
);
} catch (error) {
Expand Down
Loading

0 comments on commit f4a416c

Please sign in to comment.