Skip to content

Commit

Permalink
Merge pull request #1401 from oasisprotocol/csillag/metavers-consensu…
Browse files Browse the repository at this point in the history
…s-update

Improve Consensus on the metaverse graph
csillag authored May 9, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents f41035a + e49dd09 commit a74bc66
Showing 3 changed files with 27 additions and 12 deletions.
1 change: 1 addition & 0 deletions .changelog/1401.trivial.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Handle the consensus layer in the metaverse graph the same way as other layers
23 changes: 15 additions & 8 deletions src/app/pages/HomePage/Graph/Graph/index.tsx
Original file line number Diff line number Diff line change
@@ -159,7 +159,7 @@ const handleHover: (
},
})

const GraphParaTimeStatus: FC<
const GraphLayerStatus: FC<
PropsWithChildren<{
fillText: string
iconX: number
@@ -303,7 +303,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
const enabledLayers: Layer[] = useMemo(() => RouteUtils.getAllLayersForNetwork(network).enabled, [network])

const onSelectLayer = (layer: Layer) => {
if (isMobile && isZoomedIn) {
if (isMobile && (isZoomedIn || layer === Layer.consensus)) {
setSelectedLayer(layer)
setActiveMobileGraphTooltip({ current: layer })

@@ -565,7 +565,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
{...handleHover(Layer.emerald, setHoveredLayer)}
>
{(isMobile || hoveredLayer !== Layer.emerald) && (
<GraphParaTimeStatus
<GraphLayerStatus
iconX={201}
iconY={102}
textX={174}
@@ -574,7 +574,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
outOfDate={outOfDateMap.emerald}
>
{t('common.emerald')}
</GraphParaTimeStatus>
</GraphLayerStatus>
)}

{!isMobile && hoveredLayer === Layer.emerald && !disabledMap[Layer.emerald] && (
@@ -622,7 +622,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
{...handleHover(Layer.sapphire, setHoveredLayer)}
>
{(isMobile || hoveredLayer !== Layer.sapphire) && (
<GraphParaTimeStatus
<GraphLayerStatus
iconX={130}
iconY={310}
textX={100}
@@ -631,7 +631,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
outOfDate={outOfDateMap.sapphire}
>
{t('common.sapphire')}
</GraphParaTimeStatus>
</GraphLayerStatus>
)}
{!isMobile && hoveredLayer === Layer.sapphire && !disabledMap[Layer.sapphire] && (
<text x="109.5" y="307" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">
@@ -699,9 +699,16 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
{...handleHover(Layer.consensus, setHoveredLayer)}
>
{(isMobile || hoveredLayer !== Layer.consensus) && (
<text x="161" y="212" fill={graphTheme.text} fontSize="12px">
<GraphLayerStatus
iconX={201}
iconY={216}
textX={159}
textY={212}
fillText={graphTheme.text}
outOfDate={outOfDateMap.consensus}
>
{t('common.consensus')}
</text>
</GraphLayerStatus>
)}
{!isMobile && hoveredLayer === Layer.consensus && !disabledMap[Layer.consensus] && (
<text x="173" y="214" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">
15 changes: 11 additions & 4 deletions src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
import { TFunction } from 'i18next'
import { Layer } from '../../../../../oasis-nexus/api'
import { Network } from '../../../../../types/network'
import { useRuntimeFreshness } from '../../../../components/OfflineBanner/hook'
import { useConsensusFreshness, useRuntimeFreshness } from '../../../../components/OfflineBanner/hook'
import { getNetworkIcons } from '../../../../utils/content'
import { useNavigate } from 'react-router-dom'
import { RouteUtils } from '../../../../utils/route-utils'
@@ -54,7 +54,7 @@ const GraphTooltipIcon = styled(Box, {
flex: '0 0 120px',
height: '100%',
borderRight: `2px solid ${COLORS.aqua}`,
backgroundColor: COLORS.brandExtraDark + (isMobile ? '7a' : ''),
backgroundColor: COLORS.brandExtraDark + (isMobile ? 'c0' : ''),
borderRadius: isMobile ? '12px 0 0 12px' : '0 0 0 0',
color: COLORS.white,
}))
@@ -75,7 +75,7 @@ const GraphTooltipText = styled(Box, {
justifyContent: 'space-between',
flex: '0 1 100%',
padding: theme.spacing(4),
backgroundColor: (disabled ? COLORS.shadowBlue : COLORS.brandExtraDark) + (isMobile ? '7a' : ''),
backgroundColor: (disabled ? COLORS.shadowBlue : COLORS.brandExtraDark) + (isMobile ? 'c0' : ''),
borderRadius: isMobile ? '0 12px 0 0' : '0 12px 12px 0',
}))

@@ -148,6 +148,7 @@ const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo

const isEmeraldOutOfDate = useRuntimeFreshness({ network, layer: Layer.emerald }).outOfDate
const isSapphireOutOfDate = useRuntimeFreshness({ network, layer: Layer.sapphire }).outOfDate
const isConsensusOutOfDate = useConsensusFreshness(network).outOfDate
return {
[Layer.sapphire]: {
disabled: !isSapphireEnabled,
@@ -189,9 +190,15 @@ const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo
disabled: !isConsensusEnabled,
body: {
title: (t: TFunction) => t('common.consensus'),
caption: (t: TFunction) => layerTooltipBodyCaption(t, Layer.consensus, isConsensusEnabled),
caption: (t: TFunction) =>
layerTooltipBodyCaption(t, Layer.consensus, isConsensusEnabled, isConsensusOutOfDate),
body: (t: TFunction) => t('home.tooltip.consensusDesc'),
},
...(isConsensusEnabled
? {
failing: isConsensusOutOfDate,
}
: {}),
},
}
}

0 comments on commit a74bc66

Please sign in to comment.