diff --git a/frontend/app.tsx b/frontend/app.tsx index 54faf0d..af65115 100644 --- a/frontend/app.tsx +++ b/frontend/app.tsx @@ -8,6 +8,22 @@ export default function App({ Page, pageProps }: { Page: ComponentType; pag + + + ); diff --git a/frontend/components/Content.ts b/frontend/components/Content.ts index 1d19a20..42204d6 100644 --- a/frontend/components/Content.ts +++ b/frontend/components/Content.ts @@ -2,6 +2,6 @@ import styled from "https://esm.sh/styled-components"; export const Content = styled.div` flex-direction: row; - width: 80%; + width: 90%; max-width: 1462px; `; diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 6c2f947..fe2c9b8 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -27,6 +27,12 @@ const Text = styled.p` text-align: center; `; +const TopSection = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + const CurrentPeriod = styled.h2` font-size: 24px; margin-bottom: 10px; @@ -34,6 +40,13 @@ const CurrentPeriod = styled.h2` text-shadow: #000 3px 3px 0px; `; +const LockinInfo = styled.h2` + font-size: 16px; + margin-bottom: 10px; + color: #ff9b20; + text-shadow: #000 3px 3px 0px; +`; + const BlockContainer = styled.div` display: flex; flex-direction: row; @@ -76,7 +89,7 @@ function Block({ height, signals }: IBlockProps) { } export default function Blocks() { - const [blocks, setBlocks] = useState(undefined); + const [blocks, setBlocks] = useState([]); useEffect(() => { (async () => { @@ -91,19 +104,50 @@ export default function Blocks() { return <>; } + const forkName = config.fork.name; + + const treshhold = Math.floor(2016 * 0.9); + const currentNumberOfSignallingBlocks = blocks.reduce( + (prev, currentBlock) => prev + +(currentBlock.signals ?? false), + 0 + ); + const blocksLeftForActivation = treshhold - currentNumberOfSignallingBlocks; + const lockedIn = currentNumberOfSignallingBlocks >= treshhold; + const blocksLeftInThisPeriod = blocks.reduce((prev, currentBlock) => prev + +(currentBlock.signals === undefined), 0); + const currentPeriodFailed = blocksLeftForActivation > blocksLeftInThisPeriod; + return ( - {config.fork.name} activation + {forkName} activation - {config.fork.name} activation + {forkName} activation {config.fork.info.map((text, index) => ( {text} ))} - Current signalling period of 2016 blocks + + Current signalling period of 2016 blocks + + {!lockedIn && ( + <> + {blocksLeftForActivation} {forkName} blocks left until softfork is locked in. +
+ {!currentPeriodFailed && <>90% of the blocks within the period has to signal.} + {currentPeriodFailed && ( + <> + {forkName} cannot be locked in within this period +
+ (90% of the blocks has to signal). + + )} + + )} + {lockedIn && <>{forkName.toUpperCase()} IS LOCKED IN FOR DEPLOYMENT!} + + {blocks.map((block, i) => ( diff --git a/frontend/style/site.css b/frontend/style/site.css index e4c219a..a798558 100644 --- a/frontend/style/site.css +++ b/frontend/style/site.css @@ -9,3 +9,38 @@ body { "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #242424; } + +/* GitHib corner button */ +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; +} +@keyframes octocat-wave { + 0%, + 100% { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +@media (max-width: 500px) { + .github-corner:hover .octo-arm { + animation: none; + } + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } +} +.github-corner-svg { + fill: #e5eaea; + color: #242424; + position: absolute; + top: 0; + border: 0; + right: 0; +}