Skip to content

I
interface
Commit 09511b06 authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub
Browse files
Options

feat: add selected state for about steps (#5584) 

* refactor: move steps and cards into config

* selected state

* css only
parent 9def6863
Show whitespace changes
Inline Side-by-side
Showing with 62 additions and 34 deletions
src/pages/About/Step.tsx
View file @ 09511b06
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
const StyledStep = styled.div<{ isLast?: boolean }>` const StyledStep = styled.div`
cursor: pointer;
display: flex; display: flex;
gap: 36px; gap: 36px;
padding: 24px 0; padding: 24px 0;
border-bottom: ${({ isLast, theme }) => !isLast && `1px solid ${theme.backgroundOutline}`};
&:not(:last-of-type) {
border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
}
` `
const StepTitle = styled.div` const StepTitle = styled.div`
...@@ -30,19 +34,21 @@ const Step = ({ ...@@ -30,19 +34,21 @@ const Step = ({
index, index,
title, title,
description, description,
isLast, expanded,
onClick,
}: { }: {
index: number index: number
title: string title: string
description: string description: string
isLast?: boolean onClick: () => void
expanded?: boolean
}) => { }) => {
return ( return (
<StyledStep isLast={isLast}> <StyledStep onClick={onClick}>
<StepIndex>{index + 1}</StepIndex> <StepIndex>{index + 1}</StepIndex>
<div> <div>
<StepTitle>{title}</StepTitle> <StepTitle>{title}</StepTitle>
<StepDescription>{description}</StepDescription> {expanded && <StepDescription>{description}</StepDescription>}
</div> </div>
</StyledStep> </StyledStep>
) )
......
src/pages/About/index.tsx
View file @ 09511b06
...@@ -6,7 +6,7 @@ import walletConnectIcon from 'assets/images/walletConnectIcon.svg' ...@@ -6,7 +6,7 @@ import walletConnectIcon from 'assets/images/walletConnectIcon.svg'
import { ButtonOutlined } from 'components/Button' import { ButtonOutlined } from 'components/Button'
import { Box } from 'nft/components/Box' import { Box } from 'nft/components/Box'
import { DiscordIconMenu, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons' import { DiscordIconMenu, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons'
import { ReactNode } from 'react' import { ReactNode, useState } from 'react'
import { useIsDarkMode } from 'state/user/hooks' import { useIsDarkMode } from 'state/user/hooks'
import styled, { useTheme } from 'styled-components/macro' import styled, { useTheme } from 'styled-components/macro'
import { BREAKPOINTS } from 'theme' import { BREAKPOINTS } from 'theme'
...@@ -149,10 +149,47 @@ const GetStarted = styled.div` ...@@ -149,10 +149,47 @@ const GetStarted = styled.div`
margin-bottom: 100px; margin-bottom: 100px;
` `
const CARDS = [
{
to: '/swap',
title: 'Swap tokens',
description: 'Discover and swap top tokens on Ethereum, Polygon, Optimism, and more.',
},
{
to: '/nfts',
title: 'Trade NFTs',
description: 'Buy & sell NFTs across marketplaces to find more listings at better prices.',
},
{
to: '/pool',
title: 'Earn fees',
description: 'Provide liquidity to pools on Uniswap and earn fees on swaps.',
},
{
to: 'https://support.uniswap.org/',
external: true,
title: 'Build dApps',
description: 'Build on the largest DeFi protocol on Ethereum with our tools.',
},
]
const STEPS = [
{
title: 'Connect a wallet',
description: 'Connect your preferred crypto wallet to the Uniswap Interface.',
},
{
title: 'Swap!',
description: 'Trade crypto and NFTs through Uniswap’s platform',
},
]
export default function About() { export default function About() {
const isDarkMode = useIsDarkMode() const isDarkMode = useIsDarkMode()
const theme = useTheme() const theme = useTheme()
const [selectedStepIndex, setSelectedStepIndex] = useState(0)
return ( return (
<Page isDarkMode={isDarkMode}> <Page isDarkMode={isDarkMode}>
<Content> <Content>
...@@ -173,27 +210,9 @@ export default function About() { ...@@ -173,27 +210,9 @@ export default function About() {
</Intro> </Intro>
</Body> </Body>
<CardGrid> <CardGrid>
<Card {CARDS.map((card) => (
to="/swap" <Card key={card.title} {...card} />
title="Swap tokens" ))}
description="Discover and swap top tokens on Ethereum, Polygon, Optimism, and more."
/>
<Card
to="/nfts"
title="Trade NFTs"
description="Buy & sell NFTs across marketplaces to find more listings at better prices."
/>
<Card
to="/pool"
title="Earn fees"
description="Provide liquidity to pools on Uniswap and earn fees on swaps."
/>
<Card
to="https://support.uniswap.org/"
external
title="Build dApps"
description="Build on the largest DeFi protocol on Ethereum with our tools."
/>
</CardGrid> </CardGrid>
<Body> <Body>
<div> <div>
...@@ -214,12 +233,15 @@ export default function About() { ...@@ -214,12 +233,15 @@ export default function About() {
</WalletIconGrid> </WalletIconGrid>
</div> </div>
<StepList> <StepList>
{STEPS.map((step, index) => (
<Step <Step
index={0} expanded={selectedStepIndex === index}
title="Connect a wallet" onClick={() => setSelectedStepIndex(index)}
description="Connect your preferred crypto wallet to the Uniswap Interface." index={index}
key={step.title}
{...step}
/> />
<Step isLast index={1} title="Swap!" description="Trade crypto and NFTs through Uniswap’s platform" /> ))}
</StepList> </StepList>
</Body> </Body>
<IconRow> <IconRow>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment