Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/wallet-landing-page' into wallet…
Browse files Browse the repository at this point in the history
…-gradient-numbers
  • Loading branch information
DiogoSoaress committed Oct 29, 2024
2 parents db99193 + a1b6ecb commit df26662
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 27 deletions.
28 changes: 28 additions & 0 deletions src/components/Wallet/BigCardsGrid/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Container, Grid } from '@mui/material'
import type { BaseBlock } from '@/components/Home/types'
import layoutCss from '@/components/common/styles.module.css'
import getComponentByName from '@/lib/getComponentByName'

const BigCardsGrid = ({ items }: { items: Array<BaseBlock['items'] & { component: string }> }) => {
if (!items || !items.length) return null

return (
<Container className={layoutCss.containerShort}>
<Grid container spacing={{ xs: '30px', xl: '50px' }}>
{items.map((item, index) => {
const { component } = item

const CardComponent = getComponentByName(component, () => <></>)

return (
<Grid key={index} item xs={12} md={6}>
<CardComponent {...item} />
</Grid>
)
})}
</Grid>
</Container>
)
}

export default BigCardsGrid
19 changes: 19 additions & 0 deletions src/components/Wallet/BigImageCard/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Typography } from '@mui/material'
import type { BaseBlock } from '@/components/Home/types'
import css from './styles.module.css'

const BigImageCard = ({ caption, title, text, image }: BaseBlock) => (
<div className={css.card}>
<Typography variant="caption">{caption}</Typography>

<img {...image} className={css.image} />

<Typography variant="h4" className={css.title}>
{title}
</Typography>

{text ? <Typography color="primary.light">{text}</Typography> : null}
</div>
)

export default BigImageCard
26 changes: 26 additions & 0 deletions src/components/Wallet/BigImageCard/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.card {
outline: 1px solid var(--mui-palette-border-light);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
height: 100%;
}

.image {
width: 240px;
}

.title {
width: 80%;
margin-bottom: 24px;
}

@media (min-width: 600px) {
.card {
padding: 32px;
}
}
9 changes: 1 addition & 8 deletions src/components/Wallet/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import walletContent from '@/content/wallet.json'
import type { getStaticProps } from '@/pages/wallet'
import type { InferGetStaticPropsType } from 'next'
import ChainsContext from '@/contexts/ChainsContext'
import PageContent from '../common/PageContent'

export const Wallet = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
<ChainsContext.Provider value={props.chainsData}>
<PageContent content={walletContent} path="wallet.json" />
</ChainsContext.Provider>
)
export const Wallet = () => <PageContent content={walletContent} path="wallet.json" />
33 changes: 29 additions & 4 deletions src/content/wallet.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
}
},
{
"component": "common/TitleSlidingIcons",
"title": "Available on 15+ networks",
"text": "including testnets",
"reverse": true,
Expand All @@ -75,10 +76,35 @@
{ "name": "Ethereum Mainnet", "src": "/images/chainsLogos/EthereumLogo.png" },
{ "name": "Polygon", "src": "/images/chainsLogos/PolygonLogo.png" },
{ "name": "Aurora", "src": "/images/chainsLogos/AuroraLogo.png" }
],
"component": "common/TitleSlidingIcons"
]
},
{
"component": "Wallet/BigCardsGrid",
"items": [
{
"caption": "Individual users",
"title": "Secure Your Savings Beyond a Seed Phrase",
"text": "Protect your assets with multi-signature security, giving you peace of mind without relying solely on a seed phrase.",
"image": {
"src": "/images/Home/safe-shield.png",
"alt": "Safe Smart Account shield"
},
"component": "Wallet/BigImageCard"
},
{
"caption": "Organizations",
"title": "Manage Assets Together, Securely",
"text": "Collaboratively manage your organization's assets with multi-signature approvals, ensuring security and transparency every step of the way.",
"image": {
"src": "/images/Home/safe-shield.png",
"alt": "Safe Smart Account shield"
},
"component": "Wallet/BigImageCard"
}
]
},
{
"component": "Wallet/GradientNumbers",
"title": "<i>Safe</i> accounts",
"items": [
{
Expand All @@ -102,8 +128,7 @@
"href": "https://dune.com/queries/2459401/4044167"
}
}
],
"component": "Wallet/GradientNumbers"
]
},
{
"title": "Introducing<br>Native Swaps",
Expand Down
17 changes: 2 additions & 15 deletions src/pages/wallet.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
import type { InferGetStaticPropsType, NextPage } from 'next'
import type { NextPage } from 'next'
import { Wallet } from '@/components/Wallet'
import { loadChainsData } from '@/lib/loadChainsData'

const WalletPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (props) => {
return <Wallet {...props} />
}

export async function getStaticProps() {
const chainsData = await loadChainsData()

return {
props: {
chainsData,
},
}
}
const WalletPage: NextPage = () => <Wallet />

export default WalletPage

0 comments on commit df26662

Please sign in to comment.