Skip to content

Commit

Permalink
Enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Roberts authored and Adam Roberts committed Apr 26, 2024
1 parent 6f2e269 commit 6791cd7
Show file tree
Hide file tree
Showing 10 changed files with 179 additions and 57 deletions.
15 changes: 0 additions & 15 deletions app/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,6 @@ import React from 'react';
import Header from '@parts/Header';
import Hero from '@parts/Hero';
import Form from '@parts/Form';
// import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr';
// import { gql } from '@apollo/client';

// GraphQL
// ------------
// Tells the age how to cache content
// export const dynamic = 'force-dynamic';

// const query = gql`
// query {
// launchLatest {
// mission_name
// }
// }
// `;

// Component
// ------------
Expand Down
4 changes: 2 additions & 2 deletions src/parts/Button/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import { Jacket } from './styles';
const Button = ({ label, onClick, icon, icoL, icoR, disabled }) => {
return (
<Jacket onClick={onClick} disabled={disabled}>
{icon && icoL && (<span><Icon type={icon} /></span>)}
{icon && icoL && (<Icon type={icon} />)}
<span>{label}</span>
{icon && icoR && (<span><Icon type={icon} /></span>)}
{icon && icoR && (<Icon type={icon} />)}
</Jacket>
);
}
Expand Down
8 changes: 7 additions & 1 deletion src/parts/Button/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const Jacket = styled.button(
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 1.2rem;
width: max-content;
border-radius: 3.6rem;
Expand All @@ -21,10 +22,15 @@ export const Jacket = styled.button(
transition: all .4s ${props.theme.easing.bezzy};
&:hover {
cursor: pointer;
cursor: pointer !important;
transform: scale(0.95);
}
svg {
width: 1.6rem;
height: 1.6rem;
}
span {
${pStyles}
text-transform: uppercase;
Expand Down
3 changes: 2 additions & 1 deletion src/parts/Contexts/Contexts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@ import { GlobalContext } from './';
const Contexts = ({ children }) => {
// NOTE • States
const [isLoaded, setIsLoaded] = React.useState(false);
const [begin, setBegin] = React.useState(false);

// NOTE • Refs
const scrollProxy = React.useRef();

return (
<GlobalContext.Provider value={{ isLoaded, setIsLoaded, scrollProxy }}>
<GlobalContext.Provider value={{ isLoaded, setIsLoaded, scrollProxy, begin, setBegin }}>
{children}
</GlobalContext.Provider>
);
Expand Down
65 changes: 41 additions & 24 deletions src/parts/Form/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,26 @@

// Imports
// ------------
import React, { useState, useEffect, use } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import init, { Node, NodeConfig } from '@package/lumina-node-wasm';
import Input from './Input';
import Button from '@parts/Button';
import Icon from '@icon';
import Visualisation from '@parts/Visualisation';
import { Grid } from '@waffl';
import { GlobalContext } from '@parts/Contexts';

// Styles
// ------------
import { Blanket, Jacket, ImageContainer, Container, Title, NetworkList, NetworkItem, StatsItem, PeerList, Col, } from './styles';
import { Blanket, Jacket, ImageContainer, Container, Header, Title, Progress, NetworkList, NetworkItem, StatsItem, PeerList, Col, FieldGroup, ButtonJacket } from './styles';

// Component
// ------------
const Form = () => {
const { begin, setBegin } = useContext(GlobalContext);

const [node, setNode] = useState(null);
const [config, setConfig] = useState({});
const [begin, setBegin] = useState(false);
const [go, setGo] = useState(false);
const [modalOpen, setModalOpen] = useState({
modal1: false,
Expand Down Expand Up @@ -165,6 +167,10 @@ const Form = () => {
}
};

const handleReload = () => {
window.location.reload();
};

return (
<Blanket>
<ImageContainer $active={begin}>
Expand Down Expand Up @@ -221,7 +227,17 @@ const Form = () => {
<Container $go $activated={go}>
<Grid $noPadding>
<Col $small="1/3" $medium="1/7" $large="1/7">
<Title $dark>Status</Title>
<Grid $noPadding>
<Col $small="1/3" $medium="1/7" $large="1/13">
<Header>
<Title $dark>Status</Title>
<Progress>
<Icon type="logoGrad" />
<span>in progress&hellip;</span>
</Progress>
</Header>
</Col>
</Grid>

<Grid $noPadding>
<Col $small="1/3" $medium="1/7" $large="1/13">
Expand All @@ -231,16 +247,12 @@ const Form = () => {
<Input name="peerId" value={stats.peerId} onChange={(e) => handleInput(e)} placeholder="..." light />
</label>
</StatsItem>
</Col>
<Col $small="1/3" $medium="1/7" $large="1/13">
<StatsItem>
<label>
<span>Synchronizing headers:</span>
<Input name="syncInfo" value={stats.syncInfo} onChange={(e) => handleInput(e)} placeholder="..." light />
</label>
</StatsItem>
</Col>
<Col $small="1/3" $medium="1/7" $large="1/13">
<StatsItem $block>
<label>
<span>Peers:</span>
Expand All @@ -255,23 +267,21 @@ const Form = () => {
</Grid>

<Grid $noPadding>
<Col $small="1/3" $medium="1/7" $large="1/7">
<StatsItem>
<label>
<span>Height:</span>
<Input name="networkHeadHeight" value={stats.networkHeadHeight} onChange={(e) => handleInput(e)} placeholder="..." light />
</label>
</StatsItem>
</Col>
<Col $small="1/3" $medium="1/7" $large="7/13">
<StatsItem>
<label>
<span>Data square size:</span>
<Input name="networkHeadDataSquare" value={stats.networkHeadDataSquare} onChange={(e) => handleInput(e)} placeholder="..." light />
</label>
</StatsItem>
</Col>
<Col $small="1/3" $medium="1/7" $large="1/13">
<FieldGroup>
<StatsItem>
<label>
<span>Height:</span>
<Input name="networkHeadHeight" value={stats.networkHeadHeight} onChange={(e) => handleInput(e)} placeholder="..." light />
</label>
</StatsItem>
<StatsItem>
<label>
<span>Data square size:</span>
<Input name="networkHeadDataSquare" value={stats.networkHeadDataSquare} onChange={(e) => handleInput(e)} placeholder="..." light />
</label>
</StatsItem>
</FieldGroup>
<StatsItem>
<label>
<span>Hash:</span>
Expand All @@ -285,6 +295,13 @@ const Form = () => {
<Visualisation data={stats} />
</Col>
</Grid>
<Grid $noPadding>
<Col $small="1/3" $medium="1/7" $large="1/13">
<ButtonJacket>
<Button icoL icon="back" label="Restart" onClick={handleReload} />
</ButtonJacket>
</Col>
</Grid>
</Container>
</Jacket>
</Blanket>
Expand Down
55 changes: 52 additions & 3 deletions src/parts/Form/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,37 @@ export const Container = styled(Div)(props => css`
`}
`);

export const Header = styled.div(props => css`
display: flex;
flex-direction: row;
align-items: center;
gap: 1.2rem;
margin-bottom: 3.6rem;
`);

export const Title = styled(H3)(props => css`
color: ${props.$dark ? props.theme.colors.global.black : props.theme.colors.global.white};
`);

export const Progress = styled.div(props => css`
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: .6rem;
svg {
width: 1.6rem;
height: 1.6rem;
}
${props.$dark && css` margin-bottom: 3.6rem; `}
span {
text-transform: uppercase;
font-size: 1.3rem;
font-weight: 700;
color: ${props.theme.colors.brand.bc4};
}
`);

export const NetworkList = styled.ul(props => css`
Expand Down Expand Up @@ -187,6 +214,7 @@ export const NetworkItem = styled.li(props => css`
${props.$disabled && css`
opacity: .5;
pointer-events: none;
cursor: not-allowed;
`}
`);

Expand All @@ -197,8 +225,16 @@ export const StatsItem = styled.div(props => css`
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 1.2rem;
${props.$block && css` margin-bottom: 3.6rem; `}
${props.$block && css`
margin-top: 2.4rem;
margin-bottom: 3.6rem;
label {
gap: 1.2rem;
}
`}
label {
display: flex;
Expand All @@ -222,6 +258,7 @@ export const PeerList = styled.ul(props => css`
justify-content: flex-start;
gap: .3rem;
min-height: 8rem;
max-height: 15rem;
overflow: hidden;
overflow-y: scroll;
Expand All @@ -241,4 +278,16 @@ export const PeerList = styled.ul(props => css`
}
`);

export const Col = styled(Div)(props => css``);
export const Col = styled(Div)(props => css``);

export const FieldGroup = styled(Div)(props => css`
display: flex;
flex-direction: row;
gap: 2.4rem;
`);

export const ButtonJacket = styled(Div)(props => css`
position: relative;
border-top: 1px solid ${props.theme.colors.global.black10};
padding-top: 2.4rem;
`);
8 changes: 6 additions & 2 deletions src/parts/Hero/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// Imports
// ------------
import React from 'react';
import React, { useContext } from 'react';
import { Grid } from '@waffl';
import { GlobalContext } from '@parts/Contexts';

// Styles
// ------------
Expand All @@ -10,10 +11,13 @@ import { Jacket, Title } from './styles';
// Component
// ------------
const Hero = () => {
// NOTE • Contexts
const { begin } = useContext(GlobalContext);

return (
<Grid>
<Jacket $small="1/3" $medium="1/7" $large="1/13">
<Title>Verify the availability of block data by sampling the Celestia network for shares</Title>
<Title $isHidden={begin}>Verify the availability of block data by sampling the Celestia network for shares</Title>
</Jacket>
</Grid>
);
Expand Down
3 changes: 3 additions & 0 deletions src/parts/Hero/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,7 @@ export const Jacket = styled(Section)(

export const Title = styled(H1)(props => css`
color: ${props.theme.colors.global.white};
transition: all 1s ${props.theme.easing.bezzy};
opacity: ${props.$isHidden ? 0 : 1};
`);
38 changes: 38 additions & 0 deletions src/parts/Icon/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,44 @@ const Icon = ({ type, className, onClick }) => {
</Jacket>
);

if (type === 'back')
return (
<Jacket
xmlns='http://www.w3.org/2000/svg'
width='16'
height='16'
viewBox='0 0 16 16'>
<path d="M15.584,7.44A12.98,12.98,0,0,0,2.848,6.07l.763-2.154a1,1,0,1,0-1.884-.668L.058,7.961A1,1,0,0,0,.666,9.238l4.713,1.668a1,1,0,0,0,.668-1.885L3.305,8.05A11.011,11.011,0,0,1,14.416,9.064,1,1,0,1,0,15.584,7.44Z" />
</Jacket>
);

if (type === 'logoGrad')
return (
<Jacket
xmlns='http://www.w3.org/2000/svg'
width='16'
height='16'
viewBox='0 0 16 16'>
<path d="M0 8C0 5.8383 0.857389 3.87685 2.25066 2.43716C2.4058 2.27685 2.66667 2.39127 2.66667 2.61436V10.314C2.66667 10.5088 2.82457 10.6667 3.01935 10.6667H4.93333C5.06667 10.6778 5.33333 10.7733 5.33333 11.0667V12.9806C5.33333 13.1754 5.49124 13.3333 5.68602 13.3333H10.314C10.5088 13.3333 10.6667 13.1754 10.6667 12.9806V11.0667C10.6667 10.7733 10.9333 10.6778 11.0667 10.6667H12.9806C13.1754 10.6667 13.3333 10.5088 13.3333 10.314V8.35269C13.3333 8.1579 13.1754 8 12.9806 8H11.0194C10.8246 8 10.6667 8.1579 10.6667 8.35269V10.2669C10.6665 10.56 10.4 10.6556 10.2667 10.6667H5.73333C5.60003 10.6556 5.33345 10.56 5.33333 10.2669V0.782796C5.33333 0.583333 5.43235 0.416667 5.70833 0.333333C5.71186 0.332269 5.75 0.320752 5.75 0.320752C6.46373 0.111975 7.21879 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="url(#paint0_linear_60_9298)"/>
<path d="M10.314 10.6667C10.3144 10.6667 10.3148 10.6667 10.3152 10.6667L10.4086 10.6667C10.5511 10.6667 10.6667 10.7822 10.6667 10.9247L10.6667 11.0182C10.6667 11.0186 10.6667 11.019 10.6667 11.0194V10.9247C10.6667 10.7822 10.5511 10.6667 10.4086 10.6667H10.314Z" fill="url(#paint1_linear_60_9298)"/>
<path d="M5.33334 10.9247C5.33334 10.7822 5.44887 10.6667 5.5914 10.6667L5.68602 10.6667L5.68483 10.6667H5.5914C5.44887 10.6667 5.33334 10.7822 5.33334 10.9247V11.0182L5.33333 11.0194L5.33334 10.9247Z" fill="url(#paint2_linear_60_9298)"/>
<defs>
<linearGradient id="paint0_linear_60_9298" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
<stop stopColor="#CDB4DB"/>
<stop offset="1" stopColor="#A2D2FF"/>
</linearGradient>
<linearGradient id="paint1_linear_60_9298" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
<stop stopColor="#CDB4DB"/>
<stop offset="1" stopColor="#A2D2FF"/>
</linearGradient>
<linearGradient id="paint2_linear_60_9298" x1="8" y1="0" x2="8" y2="16" gradientUnits="userSpaceOnUse">
<stop stopColor="#CDB4DB"/>
<stop offset="1" stopColor="#A2D2FF"/>
</linearGradient>
</defs>
</Jacket>
);


console.error(
`You've not added the correct 'type' prop to your <Icon /> component`
Expand Down
Loading

0 comments on commit 6791cd7

Please sign in to comment.