Skip to content

Commit a1298ba

Browse files
toshiSattoshiSat
committed
add valid check component + better routing
1 parent fa124a4 commit a1298ba

15 files changed

+145
-19
lines changed

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
"framer-motion": "^10.16.5",
1717
"react": "^18.2.0",
1818
"react-dom": "^18.2.0",
19-
"react-router-dom": "^6.19.0"
19+
"react-middle-ellipsis": "^1.2.2",
20+
"react-router-dom": "^6.19.0",
21+
"react-truncate": "^2.4.0"
2022
},
2123
"devDependencies": {
2224
"@types/react": "^18.2.37",

‎src/App.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
11
import * as React from 'react';
2-
import { BrowserRouter, Route, Routes } from 'react-router-dom';
2+
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
33
import { Flex, Image } from '@chakra-ui/react';
44
import BackgroundImage from './assets/planet.jpeg';
55
import Logo from './assets/arkeo-logo.svg';
66
import { Section } from './components/Section';
7-
import { Check } from './pages/Check/Check';
7+
import { Check, ValidCheck } from './pages/Check';
88
import { Claim } from './pages/Claim/Claim';
99

1010
function App() {
1111
return (
1212
<Flex direction="column" flex="1" overflow="hidden" height="100vh">
13-
<Section
14-
id="app"
15-
textAlign="center"
16-
containerProps={{ maxWidth: 'container.lg', display: 'flex', flexDir: 'column', gap: 2, height: '100vh' }}
17-
>
13+
<Section id="app" textAlign="center" containerProps={{ maxWidth: 'container.lg', display: 'flex', flexDir: 'column', gap: 2, height: '100vh' }}>
1814
<Image src={BackgroundImage} position="absolute" top={0} bottom="auto" zIndex="-1" />
1915
<Image src={Logo} position="absolute" top={10} />
2016
<BrowserRouter>
2117
<Routes>
22-
<Route>
23-
<Route path="/" element={<Check />} />
24-
<Route path="claim" element={<Claim />} />
25-
</Route>
18+
<Route path="/check" element={<Check />} />
19+
<Route path="/check/valid" element={<ValidCheck />} />
20+
<Route path="/claim" element={<Claim />} />
21+
<Route path="*" element={<Navigate to="/check" />} />
2622
</Routes>
2723
</BrowserRouter>
2824
</Section>

‎src/assets/arkeo-symbol.svg

+5
Loading

‎src/components/Account.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { Flex, Container, Text, Image } from '@chakra-ui/react';
3+
import { MiddleEllipsis } from './MiddleEllipsis';
4+
import Symbol from '../assets/arkeo-symbol.svg';
5+
6+
type Props = {
7+
amount: string;
8+
symbol: string;
9+
account: string;
10+
};
11+
12+
export const Account: React.FC<Props> = ({ amount, symbol, account, ...rest }) => (
13+
<Flex flex="1" flexDir="column" {...rest}>
14+
<Container
15+
borderRadius="24px"
16+
border="1px solid"
17+
borderColor="grey.200"
18+
boxShadow="0px 0px 150px 0px rgba(0, 0, 0, 0.25)"
19+
backgroundColor="grey.300"
20+
backdropFilter="blur(50px)"
21+
textAlign="left"
22+
my="32px"
23+
p="16px"
24+
color="white"
25+
>
26+
<MiddleEllipsis text={'0x1234567898123450923840923fBc'} maxLength={14} fontSize="16px" fontWeight={500} lineHeight="24px" pb="16px" />
27+
<Flex flexDir="row" alignItems="center" gap={2}>
28+
<Image w="40px" h="40px" src={Symbol} />
29+
<Text fontSize="24px" fontWeight="900" textAlign="center">
30+
100 ARKEO
31+
</Text>
32+
</Flex>
33+
</Container>
34+
</Flex>
35+
);

‎src/components/MiddleEllipsis.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { Text, TextProps } from '@chakra-ui/react';
3+
4+
type Props = {
5+
text: string;
6+
maxLength: number;
7+
} & TextProps;
8+
9+
export const MiddleEllipsis: React.FC<Props> = ({ text, maxLength, ...rest }) => {
10+
if (text.length <= maxLength) {
11+
return <span>{text}</span>;
12+
}
13+
14+
const firstHalf = text.slice(0, maxLength / 2);
15+
const secondHalf = text.slice(-maxLength / 2);
16+
17+
return (
18+
<Text {...rest}>
19+
{firstHalf}
20+
{'...'}
21+
{secondHalf}
22+
</Text>
23+
);
24+
};

‎src/components/styles/Button.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defineStyleConfig } from '@chakra-ui/react';
2+
3+
export const Button = defineStyleConfig({
4+
baseStyle: {
5+
color: 'black',
6+
backgroundColor: 'teal',
7+
width: '100%',
8+
borderRadius: '8px',
9+
},
10+
variants: {
11+
solid: {
12+
backgroundColor: 'teal',
13+
color: 'black',
14+
},
15+
},
16+
defaultProps: {
17+
size: 'md',
18+
variant: 'solid',
19+
colorScheme: 'teal',
20+
},
21+
});

‎src/components/Input.tsx ‎src/components/styles/Input.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export const Input = defineStyleConfig({
1717
},
1818
},
1919
},
20-
// The default size and variant values
2120
defaultProps: {
2221
size: 'md',
2322
variant: 'filled',

‎src/components/Link.tsx ‎src/components/styles/Link.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ export const Link = defineStyleConfig({
66
fontWeight: 400,
77
lineHeight: '28px',
88
},
9-
10-
// The default size and variant values
119
defaultProps: {
1210
size: 'md',
1311
},

‎src/pages/Check/Check.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Box, Input, Link, Text } from '@chakra-ui/react';
1+
import { Box, Input, Link } from '@chakra-ui/react';
2+
import { Link as ReactRouterLink } from 'react-router-dom';
23
import { Panel } from '../../components/Panel';
34
import React from 'react';
45

@@ -8,7 +9,9 @@ export const Check = () => {
89
<Box my="44px">
910
<Input variant="filled" placeholder="Paste Address" />
1011
</Box>
11-
<Link>Learn more about Arkeo</Link>
12+
<Link as={ReactRouterLink} to="valid">
13+
Learn more about Arkeo
14+
</Link>
1215
</Panel>
1316
);
1417
};

‎src/pages/Check/components/InvalidCheck.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Box, Input, Link, Text } from '@chakra-ui/react';
2+
import { Panel } from '../../../components/Panel';
3+
import React from 'react';
4+
5+
export const InvalidCheck = () => {
6+
return (
7+
<Panel header="No Airdrop" desc="This account is not eligible for the Arkeo airdrop.">
8+
<Box my="44px">
9+
<Input variant="filled" placeholder="Paste Address" />
10+
</Box>
11+
<Link>Learn more about Arkeo</Link>
12+
</Panel>
13+
);
14+
};

‎src/pages/Check/components/ValidCheck.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Box, Button, Input, Link, Text } from '@chakra-ui/react';
2+
import { Panel } from '../../../components/Panel';
3+
import React from 'react';
4+
import { Account } from '../../../components/Account';
5+
6+
export const ValidCheck = () => {
7+
// redirect on invalid info
8+
return (
9+
<Panel header="Congrats!" desc="You are eligible for the Arkeo airdrop!">
10+
<Account/>
11+
<Button>Claim Arkeo</Button>
12+
</Panel>
13+
);
14+
};

‎src/pages/Check/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./Check";
2+
export * from "./components/ValidCheck";

‎src/theme.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { extendTheme } from '@chakra-ui/react';
2-
import { Input } from './components/Input';
3-
import { Link } from './components/Link';
2+
import { Input } from './components/styles/Input';
3+
import { Link } from './components/styles/Link';
4+
import { Button } from './components/styles/Button';
45

56
export const theme = extendTheme({
67
styles: {
@@ -31,6 +32,7 @@ export const theme = extendTheme({
3132
letterSpacing: '-0.03em',
3233
fontWeight: 'black',
3334
},
35+
Button,
3436
Input,
3537
Link,
3638
// Styles for the size variations

‎yarn.lock

+10
Original file line numberDiff line numberDiff line change
@@ -3357,6 +3357,11 @@ react-is@^16.13.1, react-is@^16.7.0:
33573357
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
33583358
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
33593359

3360+
react-middle-ellipsis@^1.2.2:
3361+
version "1.2.2"
3362+
resolved "https://registry.yarnpkg.com/react-middle-ellipsis/-/react-middle-ellipsis-1.2.2.tgz#e1676fe2fbc864ea7e2fc25bedc53db2635bb2a9"
3363+
integrity sha512-tTsyS/hOjT3C5WjpueAx1/WsYUVnNlUnDRCKSffGT1ns7b0NbSi6FGVVPDLTxn207B0sVjNTbMnk1HFGWd5hzA==
3364+
33603365
react-refresh@^0.14.0:
33613366
version "0.14.0"
33623367
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -3405,6 +3410,11 @@ react-style-singleton@^2.2.1:
34053410
invariant "^2.2.4"
34063411
tslib "^2.0.0"
34073412

3413+
react-truncate@^2.4.0:
3414+
version "2.4.0"
3415+
resolved "https://registry.yarnpkg.com/react-truncate/-/react-truncate-2.4.0.tgz#3cf5ff09ab86f93e3c078d359f4de6d75aa60510"
3416+
integrity sha512-3QW11/COYwi6iPUaunUhl06DW5NJBJD1WkmxW5YxqqUu6kvP+msB3jfoLg8WRbu57JqgebjVW8Lknw6T5/QZdA==
3417+
34083418
react@^18.2.0:
34093419
version "18.2.0"
34103420
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"

0 commit comments

Comments
 (0)