Skip to content

Commit

Permalink
chore: improve networks ui and add guides
Browse files Browse the repository at this point in the history
  • Loading branch information
@icfor
icfor committed Nov 17, 2023
1 parent fd46f5d commit a62a2bf
Show file tree
Hide file tree
Showing 9 changed files with 581 additions and 561 deletions.
11 changes: 0 additions & 11 deletions src/components/layout_val/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,6 @@ const LayoutVal = ({
</Head>
<Box
sx={{
// backgroundImage: homeAnimation
// ? ''
// : 'url(/images/assets/image_val_BG_desktop.png)',
// background: 'url(/images/assets/image_BG_FVH.png)',
background: "transparent",
}}
>
Expand All @@ -126,13 +122,6 @@ const LayoutVal = ({
display: "flex",
flexDirection: "column",
minHeight: "100vh",
// background: waveBG
// ? 'rgba(37, 35, 69, 1)'
// : theme.palette.mode === 'dark'
// ? 'url(/images/assets/image_BG.png)'
// : theme.palette.primary.main,
// backgroundImage: 'url(/images/assets/image_BG_staking_mobile.png)',
// background: theme.palette.primary.main,
background: stakingGuide
? "url(/images/assets/image_BG_FVH_guide.png)"
: "url(/images/assets/bg_mobile.webp)",
Expand Down
61 changes: 32 additions & 29 deletions src/screens/network_guides/components/guide/components/guide_details/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Box, Button, useTheme } from "@mui/material";
import DOMPurify from "isomorphic-dompurify";
import useTranslation from "next-translate/useTranslation";

import { getNetworkInfo } from "@src/utils/network_info";

Expand All @@ -8,6 +9,7 @@ import { GuideContentBox, GuideContentCSS } from "./styles";
const GuideDetails = ({ post }: any) => {
const theme = useTheme();
const { tags } = post;
const { t } = useTranslation("staking");

const networkData =
// eslint-disable-next-line no-nested-ternary
Expand Down Expand Up @@ -48,40 +50,41 @@ const GuideDetails = ({ post }: any) => {
dangerouslySetInnerHTML={{ __html: sanitize(post.html) }}
/>
</GuideContentCSS>
<Box
sx={{
paddingTop: theme.spacing(6),
display: "flex",
justifyContent: "flex-start",
[theme.breakpoints.up("laptop")]: {
justifyContent: "center",
},
}}
>
<Button
disabled={!networkData?.delegate}
href={networkData?.delegate ? networkData.delegate : ""}
{!!networkData?.delegate && (
<Box
sx={{
width: "97px",
height: "32px",
lineHeight: "17px",
fontWeight: 600,
padding: 0,
background:
"linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
borderRadius: theme.spacing(3),
color: "primary.main",
boxShadow: "none",
paddingTop: theme.spacing(6),
display: "flex",
justifyContent: "flex-start",
[theme.breakpoints.up("laptop")]: {
width: "111px",
height: "45px",
justifyContent: "center",
},
}}
variant="contained"
>
Stake Now
</Button>
</Box>
<Button
href={networkData?.delegate ? networkData.delegate : ""}
sx={{
width: "97px",
height: "32px",
lineHeight: "17px",
fontWeight: 600,
padding: 0,
background:
"linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
borderRadius: theme.spacing(3),
color: "primary.main",
boxShadow: "none",
[theme.breakpoints.up("laptop")]: {
width: "111px",
height: "45px",
},
}}
variant="contained"
>
{t("stake_now")}
</Button>
</Box>
)}
</Box>
</Box>
);
Expand Down
157 changes: 86 additions & 71 deletions src/screens/network_guides/components/network_info/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import { InfoCard } from "./components";
import { useNetworkGuidesHook } from "./hooks";
import { ContentBox, ContentCSS } from "./styles";

const excludedNetworks = ["solana", "coreum", "gitopia", "sui"];

const NetworkInfo = ({ post }: any) => {
const theme = useTheme();
const { t } = useTranslation("staking");
Expand Down Expand Up @@ -56,9 +58,10 @@ const NetworkInfo = ({ post }: any) => {
},
[networkData],
);
const coverImage = networkData
? `/images/guides/how_to_stake_${networkData.graphql}.png`
: featureImage;
const coverImage =
networkData?.graphql && !excludedNetworks.includes(networkData?.graphql)
? `/images/guides/how_to_stake_${networkData.graphql}.png`
: featureImage;

return (
<Box
Expand Down Expand Up @@ -127,25 +130,34 @@ const NetworkInfo = ({ post }: any) => {
},
}}
>
<Image
alt={title}
height={onlyLargeScreen ? "90" : "52"}
loader={cmsLoader}
objectFit="contain"
quality={100}
src={
!networkData?.image
? "/images/assets/blog-placeholder.png"
: networkData.image
}
width={onlyLargeScreen ? "90" : "52"}
/>
{networkData?.image ? (
<Image
alt={title}
height={onlyLargeScreen ? "90" : "52"}
loader={cmsLoader}
objectFit="contain"
quality={100}
src={networkData.image}
width={onlyLargeScreen ? "90" : "52"}
/>
) : (
<Box
id="foo"
style={{
height: onlyLargeScreen ? 90 : 52,
width: onlyLargeScreen ? 90 : 52,
}}
/>
)}
</Box>
<Box pl={onlyLargeScreen ? 2 : 1}>
<Box pl={onlyLargeScreen && networkData?.address ? 2 : 1}>
<Typography
sx={{
fontWeight: 600,
background: "rgba(255, 255, 255, 0.7)",
borderRadius: theme.spacing(1),
fontSize: theme.spacing(2),
fontWeight: 600,
padding: theme.spacing(1),
paddingBottom: theme.spacing(1),
}}
variant="h3"
Expand Down Expand Up @@ -179,33 +191,34 @@ const NetworkInfo = ({ post }: any) => {
)}
</Box>
</Box>
<Box>
<Button
disabled={!networkData?.delegate}
href={networkData?.delegate ? networkData.delegate : ""}
sx={{
display: "none",
width: "97px",
height: "32px",
lineHeight: "17px",
fontWeight: 600,
padding: 0,
background:
"linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
borderRadius: theme.spacing(3),
color: "primary.main",
boxShadow: "none",
[theme.breakpoints.up("laptop")]: {
width: "111px",
height: "45px",
display: "inline-flex",
},
}}
variant="contained"
>
Stake Now
</Button>
</Box>
{!!networkData?.delegate && (
<Box>
<Button
href={networkData?.delegate ? networkData.delegate : ""}
sx={{
display: "none",
width: "97px",
height: "32px",
lineHeight: "17px",
fontWeight: 600,
padding: 0,
background:
"linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
borderRadius: theme.spacing(3),
color: "primary.main",
boxShadow: "none",
[theme.breakpoints.up("laptop")]: {
width: "111px",
height: "45px",
display: "inline-flex",
},
}}
variant="contained"
>
{t("stake_now")}
</Button>
</Box>
)}
</CardContent>
<CardContent>
<Box
Expand Down Expand Up @@ -263,32 +276,34 @@ const NetworkInfo = ({ post }: any) => {
/>
</ContentCSS>
)}
<Box
sx={{
display: "grid",
padding: "12px 8px",
gridGap: theme.spacing(2),
gridTemplateColumns: "repeat(1, 1fr)",
paddingTop: theme.spacing(3),
width: "100%",
[theme.breakpoints.up("laptop")]: {
gridTemplateRows: "repeat(2, 1fr)",
gridTemplateColumns: "1fr 1fr",
paddingTop: 0,
width: "50%",
},
}}
>
{networkStats.map((info, i) => (
<InfoCard
key={i}
info={networkData?.key}
stats={info.stats}
title={info.title}
type={info.type}
/>
))}
</Box>
{!!networkStats?.length && (
<Box
sx={{
display: "grid",
padding: "12px 8px",
gridGap: theme.spacing(2),
gridTemplateColumns: "repeat(1, 1fr)",
paddingTop: theme.spacing(3),
width: "100%",
[theme.breakpoints.up("laptop")]: {
gridTemplateRows: "repeat(2, 1fr)",
gridTemplateColumns: "1fr 1fr",
paddingTop: 0,
width: "50%",
},
}}
>
{networkStats.map((info, i) => (
<InfoCard
key={i}
info={networkData?.key}
stats={info.stats}
title={info.title}
type={info.type}
/>
))}
</Box>
)}
</Box>
</CardContent>
</Card>
Expand Down
2 changes: 1 addition & 1 deletion src/screens/network_guides/components/network_info/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const ContentCSS = styled.div<ContentProps>`
-webkit-box-orient: vertical;
@media only screen and (min-width: 1024px) {
-webkit-line-clamp: 5;
width: 50%;
flex: 1;
font-size: 16px;
line-height: 22px;
margin: inherit;
Expand Down
38 changes: 19 additions & 19 deletions src/screens/staking/components/calculate_rewards/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,48 +20,48 @@ const baseState = {

// sample data
const stakingParams: NetworkProps = {
agoric: baseState,
akash: baseState,
assetmantle: baseState,
axelar: baseState,
band: baseState,
bitcanna: baseState,
bitsong: baseState,
cheqd: baseState,
chihuahua: baseState,
comdex: baseState,
cosmos: {
inflation: 0.1273,
stakingRatio: 0.6693,
commissionRate: 0.095,
bondedToken: 197693300,
totalSupply: 292586164,
},
agoric: baseState,
akash: baseState,
axelar: baseState,
bitcanna: baseState,
bitsong: baseState,
fetchai: baseState,
crescent: baseState,
cro: baseState,
evmos: baseState,
comdex: baseState,
cheqd: baseState,
chihuahua: baseState,
terra_classic: baseState,
persistence: baseState,
crescent: baseState,
ixo: baseState,
fetchai: baseState,
gravity_bridge: baseState,
injective: baseState,
ixo: baseState,
jackal: baseState,
juno: baseState,
kava: baseState,
band: baseState,
likecoin: baseState,
assetmantle: baseState,
osmosis: baseState,
persistence: baseState,
provenance: baseState,
regen: baseState,
secret: baseState,
sentinelhub: baseState,
shentu: baseState,
sommelier: baseState,
stafihub: baseState,
stride: baseState,
gravity_bridge: baseState,
jackal: baseState,
terra: baseState,
stargaze: baseState,
stride: baseState,
teritori: baseState,
terra: baseState,
terra_classic: baseState,
};

export const getStakingParams = (key: string) => stakingParams[key] ?? {};
Loading

0 comments on commit a62a2bf

Please sign in to comment.