Skip to content

Commit a214ecc

Browse files
buberddsbuberdds
committed
Update ecosystem cards
1 parent 5767d63 commit a214ecc

File tree

4 files changed

+104
-56
lines changed

4 files changed

+104
-56
lines changed

‎src/app/pages/HomePage/EcosystemCard.tsx‎

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { FC, ReactNode } from 'react'
2-
import { Link } from 'react-router-dom'
32
import { useTranslation } from 'react-i18next'
43
import { ArrowRight } from 'lucide-react'
4+
import { Link as RouterLink } from 'react-router-dom'
5+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
56
import {
67
Card,
78
CardContent,
@@ -13,6 +14,8 @@ import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
1314
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
1415
import { Badge } from '@oasisprotocol/ui-library/src/components/badge'
1516
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
17+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
18+
import { Network } from '../../../types/network'
1619
import { RouteUtils } from '../../utils/route-utils'
1720

1821
type EcosystemCardProps = {
@@ -26,6 +29,7 @@ type EcosystemCardProps = {
2629
title: ReactNode
2730
description: ReactNode
2831
legacy?: boolean
32+
network?: Network
2933
}
3034

3135
export const EcosystemCard: FC<EcosystemCardProps> = ({
@@ -39,6 +43,7 @@ export const EcosystemCard: FC<EcosystemCardProps> = ({
3943
title,
4044
description,
4145
legacy,
46+
network = 'mainnet',
4247
}) => {
4348
const { t } = useTranslation()
4449

@@ -51,23 +56,30 @@ export const EcosystemCard: FC<EcosystemCardProps> = ({
5156
>
5257
<CardHeader>
5358
<CardTitle className="mb-2 text-lg items-center gap-2">
54-
{title}
55-
56-
{legacy && (
57-
<Badge variant="warning" className="h-5">
58-
{t('common.legacy')}
59-
</Badge>
60-
)}
59+
<div className="flex items-center gap-2">
60+
<RouterLink className="text-lg" to={RouteUtils.getDashboardRoute({ network, layer })}>
61+
{title}
62+
</RouterLink>
63+
{legacy && (
64+
<Tooltip title={t('home.ecosystem.legacyTooltip')}>
65+
<div className="-mt-1">
66+
<Badge variant="outline" className="rounded-[4px]">
67+
{t('common.legacy')}
68+
</Badge>
69+
</div>
70+
</Tooltip>
71+
)}
72+
</div>
6173

62-
{!outOfDate && !legacy && !isLoading && (
63-
<Badge variant="success" className="h-5">
64-
{t('common.online')}
65-
</Badge>
74+
{!outOfDate && !isLoading && (
75+
<Tooltip title={t('common.online')}>
76+
<div className="w-[10px] h-[10px] rounded-full bg-success" />
77+
</Tooltip>
6678
)}
67-
{outOfDate && !legacy && !isLoading && (
68-
<Badge variant="error" className="h-5">
69-
{t('common.outdated')}
70-
</Badge>
79+
{outOfDate && !isLoading && (
80+
<Tooltip title={t('common.outdated')}>
81+
<div className="w-[10px] h-[10px] rounded-full bg-destructive" />
82+
</Tooltip>
7183
)}
7284
</CardTitle>
7385
<Typography textColor="muted" variant="p" className="text-pretty">
@@ -80,28 +92,53 @@ export const EcosystemCard: FC<EcosystemCardProps> = ({
8092
<div className="w-full grid grid-cols-2 gap-4 font-medium">
8193
<div>{t('home.blockNumber')}</div>
8294
<div className="text-right text-primary">
83-
{latestBlock !== undefined && latestBlock !== null ? latestBlock.toLocaleString() : '-'}
95+
{latestBlock !== undefined && latestBlock !== null ? (
96+
<>
97+
<Link asChild className="font-medium">
98+
<RouterLink to={RouteUtils.getBlockRoute({ network, layer }, latestBlock)}>
99+
{latestBlock.toLocaleString()}
100+
</RouterLink>
101+
</Link>
102+
</>
103+
) : (
104+
'-'
105+
)}
84106
</div>
85107
<div>{t('home.activeNodes')}</div>
86108
<div className="text-right text-primary">
87-
{activeNodes !== undefined && activeNodes !== null ? activeNodes.toLocaleString() : '-'}
109+
{activeNodes !== undefined && activeNodes !== null ? (
110+
<>
111+
{layer === 'consensus' ? (
112+
<Link asChild className="font-medium">
113+
<RouterLink to={RouteUtils.getValidatorsRoute(network)}>
114+
{activeNodes.toLocaleString()}
115+
</RouterLink>
116+
</Link>
117+
) : (
118+
// Link to runtime nodes when available
119+
activeNodes.toLocaleString()
120+
)}
121+
</>
122+
) : (
123+
'-'
124+
)}
88125
</div>
89126
</div>
90127
)}
91128
</CardContent>
92129
<CardFooter>
93130
{footer || (
94131
<>
95-
<Button variant="link" size="lg" className="flex-1">
96-
<Link to={RouteUtils.getDashboardRoute({ network: 'testnet', layer })}>
132+
<Button variant="link" size="lg" className="flex-1" asChild>
133+
<RouterLink to={RouteUtils.getDashboardRoute({ network: 'testnet', layer })}>
97134
{t('common.testnet')}
98-
</Link>
135+
</RouterLink>
99136
</Button>
100-
<Button variant="secondary" size="lg" className="flex-1">
101-
<Link to={RouteUtils.getDashboardRoute({ network: 'mainnet', layer })}>
137+
<Button size="lg" className="flex-1" asChild>
138+
<RouterLink to={RouteUtils.getDashboardRoute({ network: 'mainnet', layer })}>
102139
{t('common.mainnet')}
103-
</Link>
104-
<ArrowRight />
140+
<ArrowRight />
141+
</RouterLink>
105142
</Button>
106143
</>
107144
)}

‎src/app/pages/HomePage/EmeraldCard.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { useGetRuntimeStatus } from '../../../oasis-nexus/api'
4+
import { useRuntimeFreshness } from '../../components/OfflineBanner/hook'
45
import { EcosystemCard } from './EcosystemCard'
56
import emeraldBg from './images/emerald-bg.svg'
67

78
export const EmeraldCard: FC = () => {
89
const { t } = useTranslation()
910
const emeraldStatusQuery = useGetRuntimeStatus('mainnet', 'emerald')
11+
const { outOfDate: emeraldOutOfDate } = useRuntimeFreshness({
12+
network: 'mainnet',
13+
layer: 'emerald',
14+
})
1015

1116
return (
1217
<EcosystemCard
@@ -15,6 +20,7 @@ export const EmeraldCard: FC = () => {
1520
title={t('common.emerald')}
1621
background={emeraldBg}
1722
layer="emerald"
23+
outOfDate={emeraldOutOfDate}
1824
legacy
1925
latestBlock={emeraldStatusQuery?.data?.data?.latest_block}
2026
activeNodes={emeraldStatusQuery?.data?.data?.active_nodes}

‎src/app/pages/HomePage/PontusXCard.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const PontusXCard: FC = () => {
2222

2323
return (
2424
<EcosystemCard
25+
network="testnet"
2526
isLoading={pontusxStatusQuery.isLoading}
2627
description={
2728
<>
@@ -32,25 +33,28 @@ export const PontusXCard: FC = () => {
3233
<span>
3334
{t('common.pontusx')}{' '}
3435
<span className="text-sm text-muted-foreground font-normal">
35-
{t('home.ecosystem.by')}
36-
<Tooltip
37-
title={
38-
<>
39-
{t('home.ecosystem.deltaDAODescription')}{' '}
40-
<Link
41-
textColor="inherit"
42-
variant="underline"
43-
href={pontusx.homepage}
44-
rel="noopener noreferrer"
45-
target="_blank"
46-
>
47-
{t('home.ecosystem.visitSite')}
48-
</Link>
49-
</>
50-
}
51-
>
52-
<span className="italic underline">{t('home.ecosystem.deltaDAO')}</span>
53-
</Tooltip>
36+
<span>
37+
{t('home.ecosystem.by')}{' '}
38+
<Tooltip
39+
title={
40+
<>
41+
{t('home.ecosystem.deltaDAODescription')}{' '}
42+
<Link
43+
textColor="inherit"
44+
variant="underline"
45+
href={pontusx.homepage}
46+
rel="noopener noreferrer"
47+
target="_blank"
48+
onClick={e => e.stopPropagation()}
49+
>
50+
{t('home.ecosystem.visitSite')}
51+
</Link>
52+
</>
53+
}
54+
>
55+
<span className="underline">{t('home.ecosystem.deltaDAO')}</span>
56+
</Tooltip>
57+
</span>
5458
</span>
5559
</span>
5660
}
@@ -61,17 +65,17 @@ export const PontusXCard: FC = () => {
6165
activeNodes={pontusxStatusQuery?.data?.data?.active_nodes}
6266
footer={
6367
<>
64-
<Button variant="secondary" size="lg" className="flex-1">
65-
<RouterLink to={RouteUtils.getDashboardRoute({ network: 'testnet', layer: 'pontusxtest' })}>
66-
{t('common.testnet')}
67-
</RouterLink>
68-
<ArrowRight />
69-
</Button>
70-
<Button variant="link" size="lg" className="flex-1">
68+
<Button variant="link" size="lg" className="flex-1" asChild>
7169
<RouterLink to={RouteUtils.getDashboardRoute({ network: 'testnet', layer: 'pontusxdev' })}>
7270
{t('common.devnet')}
7371
</RouterLink>
7472
</Button>
73+
<Button size="lg" className="flex-1" asChild>
74+
<RouterLink to={RouteUtils.getDashboardRoute({ network: 'testnet', layer: 'pontusxtest' })}>
75+
{t('common.testnet')}
76+
<ArrowRight />
77+
</RouterLink>
78+
</Button>
7579
</>
7680
}
7781
/>

‎src/locales/en/translation.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -688,15 +688,16 @@
688688
"enabled": "enabled",
689689
"ecosystem": {
690690
"title": "Ecosystem",
691-
"sapphire": "Sapphire is the only confidential EVM that empowers Web3 & AI with Smart Privacy.",
692-
"consensus": "Oasis Core is designed around the principle of modularity.",
693-
"pontusx": "Pontus-X provides full visibility and control over how your data is used and shared.",
691+
"sapphire": "Oasis main EVM-compatible chain. Supports encrypted contract state and end-to-end encrypted transactions and calls.",
692+
"consensus": "Oasis Layer 1 chain providing scalable, high-throughput, secure, proof-of-stake consensus run by a decentralized set of validator nodes.",
693+
"pontusx": "Confidential EVM-Compatible chain offering smart contract development environment focused on building Decentralized data economy.",
694694
"comingSoon": "(Mainnet coming soon)",
695-
"emerald": "Emerald is our official ParaTime which executes smart contracts inside the EVM.",
695+
"emerald": "Oasis original EVM-compatible chain launched in 2021. Superseded by Oasis Sapphire which supports confidential state and encrypted transactions.",
696696
"by": "by",
697697
"deltaDAO": "deltaDAO",
698698
"deltaDAODescription": "DeltaDAO forms the foundation for the AI & Data economy of tomorrow.",
699-
"visitSite": "Visit their site for more info"
699+
"visitSite": "Visit their site for more info",
700+
"legacyTooltip": "New EVM dApps and contracts should be deployed on Sapphire."
700701
},
701702
"activeNodes": "Active nodes",
702703
"blockNumber": "Block number",

0 commit comments

Comments
 (0)