Skip to content

Commit a0bf2e4

Browse files
treasurechictreasurechic
committed
🔀 Merge branch '942-feature-algodex-launchpad-for-creating-and-listing-asas' of https://github.com/algodex/algodex-react into 995-create-new-type-for-an-activewallet-object
2 parents f51c02c + 9c7377b commit a0bf2e4

File tree

5 files changed

+290
-80
lines changed

5 files changed

+290
-80
lines changed

‎components/LaunchPad/Sale/CreateTokenSale.tsx‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* along with this program. If not, see <https://www.gnu.org/licenses/>.
1515
*/
1616

17-
import React, { useContext, useEffect, useRef, useState } from 'react'
17+
import React, { useContext, useEffect, useState } from 'react'
1818
import { CreatorAddress } from '../CreatorAddress'
1919
import { Note } from '../note'
2020

@@ -28,24 +28,25 @@ import Button from '@mui/material/Button'
2828
import OutlinedInput from '@/components/Input/OutlinedInput'
2929
import { styles } from '../styles.css'
3030
import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
31-
import { SearchTable } from './SearchTable'
31+
import { TokenSearchInput } from '../TokenSearchInput'
3232

3333
const columns = [
3434
{
35-
id: 'assetId',
36-
label: 'AssetId'
35+
id: 'symbol',
36+
label: 'Symbol'
3737
},
3838
{
3939
id: 'assetName',
4040
label: 'Name'
4141
},
4242
{
43-
id: 'totalQuantity',
44-
label: 'Quantity'
43+
id: 'assetId',
44+
label: 'AssetId'
4545
},
4646
{
47-
id: 'createdAt',
48-
label: 'Created On'
47+
id: 'availableBalance',
48+
label: 'Available Balance',
49+
format: (value) => value.toLocaleString('en-US')
4950
}
5051
]
5152

@@ -60,8 +61,6 @@ export const CreateTokenSale = () => {
6061
const [loading, setLoading] = useState(false)
6162
const [formData, setFormData] = useState(initialValues)
6263
const [assetList, setAssetList] = useState([])
63-
const [showTable, setShowTable] = useState(false)
64-
const dropdownRef = useRef(null)
6564

6665
const { assetId, quantity, perUnit } = formData
6766

@@ -73,51 +72,51 @@ export const CreateTokenSale = () => {
7372
setAssetList([
7473
{
7574
assetId: 7789624,
76-
assetName: 'BUSD',
77-
totalQuantity: 300000,
78-
createdAt: new Date().toLocaleString()
75+
symbol: 'BUSD',
76+
assetName: 'BUSD Token',
77+
availableBalance: 300000
7978
},
8079
{
8180
assetId: 6789654,
82-
assetName: 'UCDC',
83-
totalQuantity: 200000,
84-
createdAt: new Date().toLocaleString()
81+
symbol: 'UCDC',
82+
assetName: 'UCDC Token',
83+
availableBalance: 200000
8584
},
8685
{
8786
assetId: 3789654,
87+
symbol: 'goBTC',
8888
assetName: 'goBTC',
89-
totalQuantity: 240000,
90-
createdAt: new Date().toLocaleString()
89+
availableBalance: 240000
9190
},
9291
{
9392
assetId: 6789654,
93+
symbol: 'UCDC',
9494
assetName: 'UCDC',
95-
totalQuantity: 100000,
96-
createdAt: new Date().toLocaleString()
95+
availableBalance: 100000
9796
},
9897
{
9998
assetId: 6789654,
99+
symbol: 'UCDC',
100100
assetName: 'UCDC',
101-
totalQuantity: 200000,
102-
createdAt: new Date().toLocaleString()
101+
availableBalance: 200000
103102
},
104103
{
105104
assetId: 6789654,
105+
symbol: 'UCDC',
106106
assetName: 'UCDC',
107-
totalQuantity: 200000,
108-
createdAt: new Date().toLocaleString()
107+
availableBalance: 200000
109108
},
110109
{
111110
assetId: 6789654,
111+
symbol: 'UCDC',
112112
assetName: 'UCDC',
113-
totalQuantity: 200000,
114-
createdAt: new Date().toLocaleString()
113+
availableBalance: 200000
115114
},
116115
{
117116
assetId: 6789654,
117+
symbol: 'UCDC',
118118
assetName: 'UCDC',
119-
totalQuantity: 200000,
120-
createdAt: new Date().toLocaleString()
119+
availableBalance: 200000
121120
}
122121
])
123122
}
@@ -161,24 +160,14 @@ export const CreateTokenSale = () => {
161160
<Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
162161
Choose Asset:
163162
</Typography>
164-
<Box className="mb-4 px-4 relative" ref={dropdownRef}>
165-
<OutlinedInput
166-
type="text"
167-
placeholder="ASA Asset ID"
168-
name="assetId"
169-
value={assetId}
170-
onChange={(e) => onChange(e)}
171-
onFocus={() => setShowTable(true)}
172-
sx={styles.input}
173-
/>
174-
<SearchTable
175-
columns={columns}
176-
rowData={assetList}
177-
showTable={showTable}
178-
setShowTable={setShowTable}
179-
dropdownRef={dropdownRef}
180-
/>
181-
</Box>
163+
<TokenSearchInput
164+
name="assetId"
165+
value={assetId}
166+
placeholder="ASA Asset ID"
167+
onChange={onChange}
168+
columns={columns}
169+
rowData={assetList}
170+
/>
182171
</Box>
183172

184173
<Box className="mb-10">

‎components/LaunchPad/Sale/ManageTokenSale.tsx‎

Lines changed: 89 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* along with this program. If not, see <https://www.gnu.org/licenses/>.
1515
*/
1616

17-
import React, { useContext, useState } from 'react'
17+
import React, { useContext, useEffect, useState } from 'react'
1818
import { CreatorAddress } from '../CreatorAddress'
1919
import { Icon } from '@iconify/react'
2020

@@ -30,6 +30,7 @@ import { styles } from '../styles.css'
3030
import { CopyIcon } from '../copyIcon'
3131
import { LinearProgressWithLabel } from '../progressBar'
3232
import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
33+
import { TokenSearchInput } from '../TokenSearchInput'
3334

3435
const initialValues = {
3536
tokenName: '',
@@ -39,9 +40,30 @@ const initialValues = {
3940
showTotalForSale: false
4041
}
4142

43+
const columns = [
44+
{
45+
id: 'symbol',
46+
label: 'Symbol'
47+
},
48+
{
49+
id: 'assetName',
50+
label: 'Name'
51+
},
52+
{
53+
id: 'assetId',
54+
label: 'AssetId'
55+
},
56+
{
57+
id: 'availableBalance',
58+
label: 'Available Balance',
59+
format: (value) => value.toLocaleString('en-US')
60+
}
61+
]
62+
4263
export const ManageTokenSale = () => {
4364
const { activeWallet } = useContext(WalletReducerContext)
4465
const [formData, setFormData] = useState(initialValues)
66+
const [assetList, setAssetList] = useState([])
4567
const { tokenName, pricePerToken, showPricePerToken, totalForSale, showTotalForSale } = formData
4668

4769
const onChange = (e) => {
@@ -61,6 +83,63 @@ export const ManageTokenSale = () => {
6183
e.preventDefault()
6284
}
6385

86+
const fetchUserAssets = () => {
87+
setAssetList([
88+
{
89+
assetId: 7789624,
90+
symbol: 'BUSD',
91+
assetName: 'BUSD Token',
92+
availableBalance: 300000
93+
},
94+
{
95+
assetId: 6789654,
96+
symbol: 'UCDC',
97+
assetName: 'UCDC Token',
98+
availableBalance: 200000
99+
},
100+
{
101+
assetId: 3789654,
102+
symbol: 'goBTC',
103+
assetName: 'goBTC',
104+
availableBalance: 240000
105+
},
106+
{
107+
assetId: 6789654,
108+
symbol: 'UCDC',
109+
assetName: 'UCDC',
110+
availableBalance: 100000
111+
},
112+
{
113+
assetId: 6789654,
114+
symbol: 'UCDC',
115+
assetName: 'UCDC',
116+
availableBalance: 200000
117+
},
118+
{
119+
assetId: 6789654,
120+
symbol: 'UCDC',
121+
assetName: 'UCDC',
122+
availableBalance: 200000
123+
},
124+
{
125+
assetId: 6789654,
126+
symbol: 'UCDC',
127+
assetName: 'UCDC',
128+
availableBalance: 200000
129+
},
130+
{
131+
assetId: 6789654,
132+
symbol: 'UCDC',
133+
assetName: 'UCDC',
134+
availableBalance: 200000
135+
}
136+
])
137+
}
138+
139+
useEffect(() => {
140+
fetchUserAssets()
141+
}, [])
142+
64143
return (
65144
<>
66145
<Typography variant="subtitle1" sx={styles.title}>
@@ -89,16 +168,15 @@ export const ManageTokenSale = () => {
89168
<Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
90169
Choose Sale to Manage:
91170
</Typography>
92-
<Box className="mb-4 px-4">
93-
<OutlinedInput
94-
type="text"
95-
placeholder="Token Name"
96-
name="tokenName"
97-
value={tokenName}
98-
onChange={(e) => onChange(e)}
99-
sx={styles.input}
100-
/>
101-
</Box>
171+
172+
<TokenSearchInput
173+
name="tokenName"
174+
value={tokenName}
175+
placeholder="Token Name"
176+
onChange={onChange}
177+
columns={columns}
178+
rowData={assetList}
179+
/>
102180
<Typography variant="body1" sx={{ ...styles.body1, marginBottom: '29px' }}>
103181
Search with Asset Name or Asset ID - Only ASAs created by the currently connected wallet
104182
will show as options.

‎components/LaunchPad/Sale/SearchTable.tsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { MutableRefObject, useEffect, useMemo, useState } from 'react'
2+
import Icon from '@/components/Icon'
23

34
//MUI components
45
import Paper from '@mui/material/Paper'
@@ -10,7 +11,6 @@ import TableHead from '@mui/material/TableHead'
1011
import TableRow from '@mui/material/TableRow'
1112
import { styled } from '@mui/material/styles'
1213
import Box from '@mui/material/Box'
13-
import visuallyHidden from '@mui/utils/visuallyHidden'
1414
import TableSortLabel from '@mui/material/TableSortLabel'
1515

1616
const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -20,21 +20,28 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
2020
border: '0.1px solid',
2121
borderColor: theme.palette.primary.light,
2222
fontSize: 10,
23-
textTransform: 'uppercase'
23+
textTransform: 'uppercase',
24+
paddingBlock: '3px'
2425
},
2526
[`&.${tableCellClasses.body}`]: {
2627
fontWeight: 600,
2728
fontSize: 14,
2829
border: '0.1px solid',
29-
borderColor: theme.palette.primary.light
30+
borderColor: theme.palette.primary.light,
31+
paddingBlock: '8px'
3032
}
3133
}))
3234

33-
type columnType = {
35+
const SortIcon = styled(Icon)`
36+
margin-left: 0.25rem;
37+
`
38+
39+
export type TableColumnType = {
3440
id: string
3541
label: string
3642
align?: 'left' | 'center' | 'right' | 'justify' | 'inherit'
3743
minWidth?: number
44+
format?: (val: number) => string
3845
}
3946

4047
export const SearchTable = ({
@@ -44,7 +51,7 @@ export const SearchTable = ({
4451
setShowTable,
4552
dropdownRef
4653
}: {
47-
columns: Array<columnType>
54+
columns: Array<TableColumnType>
4855
rowData: Array<unknown>
4956
showTable: boolean
5057
setShowTable: (v: boolean) => void
@@ -104,20 +111,29 @@ export const SearchTable = ({
104111
{columns.map((col) => (
105112
<StyledTableCell
106113
key={col.id}
107-
align={col.align}
114+
// align={col.align}
108115
sortDirection={orderBy === col.id ? order : false}
109116
>
110117
<TableSortLabel
111118
active={orderBy === col.id}
112119
direction={orderBy === col.id ? order : 'asc'}
113120
onClick={() => createSortHandler(col.id)}
121+
sx={{
122+
'.css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-3l415a-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-s6n6v6, .css-tqymag':
123+
{
124+
display: 'none'
125+
}
126+
}}
114127
>
115128
{col.label}
116-
{orderBy === col.id ? (
117-
<Box component="span" sx={visuallyHidden}>
118-
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
119-
</Box>
120-
) : null}
129+
<Box component="span">
130+
<SortIcon
131+
use={
132+
orderBy !== col.id ? 'sortNone' : order === 'desc' ? 'sortDesc' : 'sortAsc'
133+
}
134+
size={0.625}
135+
/>
136+
</Box>
121137
</TableSortLabel>
122138
</StyledTableCell>
123139
))}
@@ -143,7 +159,9 @@ export const SearchTable = ({
143159
color: 'gray.800'
144160
}}
145161
>
146-
{row[column.id]}
162+
{column.format && typeof row[column.id] === 'number'
163+
? column.format(row[column.id])
164+
: row[column.id]}
147165
</StyledTableCell>
148166
)
149167
})}

0 commit comments

Comments
 (0)