Skip to content

Commit 51f7239

Browse files
blueoginblueogin
committed
feat: change ui which looks more like professional
1 parent eee0df3 commit 51f7239

File tree

2 files changed

+81
-80
lines changed

2 files changed

+81
-80
lines changed

‎src/app/swap/page.tsx

Lines changed: 56 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -38,79 +38,79 @@ export default function Home() {
3838
}
3939

4040
return (
41-
<Box className="w-full flex flex-col">
41+
<Box className="w-full flex flex-col" fontFamily={'Proto'}>
4242
<Box className="flex justify-center mt-4">
43-
<Box className='block'>
43+
<Box className='block p-4 bg-gray-500/10 rounded-2xl'>
4444
<Flex justifyContent='space-between'>
4545
<Link href="/swap" passHref>
46-
<Box className='p-1 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Swap </Box>
46+
<Box className='p-2 px-4 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Swap </Box>
4747
</Link>
4848
{/* <Link href="/limit" passHref> */}
49-
<Box className='p-1 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Limit </Box>
49+
<Box className='p-2 px-4 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Limit </Box>
5050
{/* </Link> */}
5151
{/* <Link href="/send" passHref> */}
52-
<Box className='p-1 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Send </Box>
52+
<Box className='p-2 px-4 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Send </Box>
5353
{/* </Link> */}
5454
{/* <Link href="/buy" passHref> */}
55-
<Box className='p-1 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Buy </Box>
55+
<Box className='p-2 px-4 m-2 bg-gray-200 dark:bg-gray-800 rounded-lg'> Buy </Box>
5656
{/* </Link> */}
5757
</Flex>
58-
<Box>
59-
<Box className="box-border border-2 p-4 rounded-md ">
60-
<Box>
61-
Sell
58+
<Box className="mb-2">
59+
<Box className="box-border bg-gray-500/20 p-4 rounded-lg mb-2">
60+
<Box fontSize={'0.875rem'} className="mb-2">
61+
SELL
6262
</Box>
63-
<Box>
64-
<Flex justifyContent={'space-between'}>
65-
<InputGroup flexDirection={'column'}>
66-
<NumberInput
67-
step={0.1}
68-
clampValueOnBlur={false}
69-
min={0}
70-
variant={'unstyled'}>
71-
<NumberInputField
72-
border={"none"}
73-
_focus={{ border: "none", boxShadow: "none", outline: "none" }}
74-
fontSize={'3xl'}
75-
placeholder="0"
76-
textAlign={'left'}
77-
/>
78-
</NumberInput>
79-
<Text fontFamily={'Righteous'} fontSize={'sm'}>
80-
81-
</Text>
82-
</InputGroup>
83-
<TokenSelector type={"input"}>
84-
<Button
85-
borderRadius={'full'}
86-
variant={'outline'}
87-
colorScheme="yellow"
88-
display={'inline-flex'}
89-
justifyContent={'space-evenly'}>
90-
<SwampAvatar
91-
boxSize={24}
92-
name = {"ETH"}
93-
src = {null}
94-
// name={token?.name}
95-
// src={token?.logoURI!}
96-
// ml={1}
97-
/>
98-
<Text ml={1} mr={1}>
99-
ETH
100-
{/* {token?.symbol} */}
63+
<Flex justifyContent={'space-between'} className="mb-2">
64+
<InputGroup flexDirection={'column'}>
65+
<NumberInput
66+
fontSize={'1.75rem'}
67+
step={0.1}
68+
clampValueOnBlur={false}
69+
min={0}
70+
variant={'unstyled'}>
71+
<NumberInputField
72+
className="bg-transparent"
73+
border={"none"}
74+
_focus={{ border: "none", boxShadow: "none", outline: "none" }}
75+
fontSize={'3xl'}
76+
placeholder="0"
77+
textAlign={'left'}
78+
/>
79+
</NumberInput>
80+
<Text fontFamily={'Righteous'} fontSize={'sm'}>
81+
10182
</Text>
102-
</Button>
103-
</TokenSelector>
83+
</InputGroup>
84+
<TokenSelector type={"input"}>
85+
<Button
86+
borderRadius={'full'}
87+
variant={'outline'}
88+
colorScheme="yellow"
89+
display={'inline-flex'}
90+
justifyContent={'space-evenly'}>
91+
<SwampAvatar
92+
boxSize={24}
93+
name = {"ETH"}
94+
src = {null}
95+
// name={token?.name}
96+
// src={token?.logoURI!}
97+
// ml={1}
98+
/>
99+
<Text ml={1} mr={1} fontSize={'0.875rem'}>
100+
ETH
101+
{/* {token?.symbol} */}
102+
</Text>
103+
</Button>
104+
</TokenSelector>
104105
</Flex>
105106
<Box>
106107
$0
107108
</Box>
108-
</Box>
109109
</Box>
110-
<Box className="box-border border-2 p-4 rounded-md ">
111-
<Box>Buy</Box>
110+
<Box className="box-border bg-gray-500/20 p-4 rounded-lg ">
111+
<Box fontSize={'0.875rem'}>BUY</Box>
112112
<Box className='flex justify-between'>
113-
<Box>
113+
<Box fontSize={'1.75rem'} className={'text-gray-400'}>
114114
0
115115
</Box>
116116
<TokenSelector type={"output"}>
@@ -128,7 +128,7 @@ export default function Home() {
128128
// src={token?.logoURI!}
129129
// ml={1}
130130
/>
131-
<Text ml={1} mr={1}>
131+
<Text ml={1} mr={1} fontSize={'0.875rem'} fontFamily={'Proto'}>
132132
Select Token
133133
{/* {token?.symbol} */}
134134
</Text>
@@ -137,17 +137,10 @@ export default function Home() {
137137
</Box>
138138
</Box>
139139
</Box>
140-
<Box className='flex justify-center p-2'>
140+
<Box className='flex justify-center bg-gray-500/20 p-4 rounded-lg '>
141141
<SwapButton onClick = {onSwapClick}/>
142142
</Box>
143143
</Box>
144-
145-
{/* <Modal isOpen={true} onClose={()=>{}}>
146-
<ModalOverlay backdropFilter="blur(4px)" />
147-
<ModalContent py={'3'} maxW={'496px'}>
148-
Michael
149-
</ModalContent>
150-
</Modal> */}
151144
</Box>
152145
</Box>
153146
);

‎src/components/uis/TokenSelector.tsx

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import SwampAvatar from '@/components/core/SwampAvatar';
22
// import LocalTokenSupport from '@/components/core/tokenSelector/LocalTokenSupport';
3-
// import { useGetBalances, useSearchToken } from '@/hooks/swap';
4-
// import { Token } from '@/interfaces';
3+
import { useGetBalances, useSearchToken } from '@/hooks/swap';
4+
import { Token } from '@/interfaces';
55
// import { useSwapStore } from '@/store/features/swap/swapStore';
66
import { SearchIcon } from '@chakra-ui/icons';
77
import {
@@ -18,6 +18,7 @@ import {
1818
ModalOverlay,
1919
Stack,
2020
Text,
21+
Box,
2122
useDisclosure,
2223
} from '@chakra-ui/react';
2324
import React, { useEffect } from 'react';
@@ -29,9 +30,9 @@ type TokenSelectorProps = {
2930

3031
const TokenSelector = ({ children, type }: TokenSelectorProps) => {
3132
const { onOpen, isOpen, onClose } = useDisclosure();
32-
// const { tokenList, fixedTokens } = useGetBalances();
33+
const { tokenList, fixedTokens } = useGetBalances();
3334

34-
// const { filteredTokens, search, setSearch } = useSearchToken();
35+
const { filteredTokens, search, setSearch } = useSearchToken();
3536

3637
// const handleOnClick = (token: Token): void => {
3738
// // setAsset(token.address, type);
@@ -49,16 +50,21 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
4950
{React.cloneElement(children, {
5051
onClick: () => onOpen(),
5152
})}
52-
<Modal isOpen={isOpen} onClose={onClose} isCentered={true} >
53+
<Modal isOpen={isOpen} onClose={onClose} isCentered={true}>
5354
<ModalOverlay backdropFilter="blur(4px)" />
54-
<ModalContent py={'3'} maxW={480} mx="auto" my={80}
55+
<ModalContent p={'1rem'} maxW={480} mx="auto" my={80}
5556
mt={{ base: "10%", md: "15%" }}
5657
borderRadius="12"
5758
border="1px solid"
59+
className={'dark:bg-customDark bg-white'}
5860
>
5961
<ModalHeader>
62+
<Box fontSize={'1.25rem'} className='mb-2'>
63+
Select a token
64+
</Box>
6065
<InputGroup>
6166
<Input
67+
className="bg-transparent"
6268
placeholder={"ETH, USDT..."}
6369
_focus={{ border: "none", boxShadow: "none", outline: "none" }}
6470
py={'6'}
@@ -78,7 +84,7 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
7884
/>
7985
</InputGroup>
8086
<Stack direction={'row'} justifyContent={'space-around'} py={'8'}>
81-
{/* {fixedTokens?.map((token: Token, index) => {
87+
{fixedTokens?.map((token: Token, index) => {
8288
return (
8389
<Button
8490
key={index}
@@ -91,7 +97,8 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
9197
color: 'yellow.500',
9298
}}
9399
value={token.address}
94-
onClick={() => handleOnClick(token)}>
100+
// onClick={() => handleOnClick(token)}
101+
>
95102
<SwampAvatar
96103
size={'sm'}
97104
name={token.name}
@@ -101,7 +108,7 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
101108
<Text>{token.symbol}</Text>
102109
</Button>
103110
);
104-
})} */}
111+
})}
105112
</Stack>
106113
<Divider />
107114
</ModalHeader>
@@ -116,18 +123,19 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
116123
display: 'none',
117124
},
118125
}}>
119-
{/* {(search && search != '' ? filteredTokens : tokenList)?.map(
126+
{(search && search != '' ? filteredTokens : tokenList)?.map(
120127
(token: Token, index) => {
121128
return (
122-
<TokenEntry
123-
key={index}
124-
token={token}
125-
type={type}
126-
onClose={onClose}
127-
/>
129+
<div>{token.name}</div>
130+
// <TokenEntry
131+
// key={index}
132+
// token={token}
133+
// type={type}
134+
// onClose={onClose}
135+
// />
128136
);
129137
}
130-
)} */}
138+
)}
131139
</Stack>
132140
</ModalBody>
133141

0 commit comments

Comments
 (0)