Skip to content

Commit 9c7377b

Browse files
ericsharmaericsharma
authored
Merge pull request #987 from algodex/985-modify-the-choose-asset-input-field-on-token-sale-page
💄 Reusable ASA search table
2 parents 98b8b1f + c0f7bd5 commit 9c7377b

File tree

5 files changed

+490
-33
lines changed

5 files changed

+490
-33
lines changed

‎components/LaunchPad/Sale/CreateTokenSale.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 { Note } from '../note'
2020

@@ -28,6 +28,27 @@ 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 { TokenSearchInput } from '../TokenSearchInput'
32+
33+
const columns = [
34+
{
35+
id: 'symbol',
36+
label: 'Symbol'
37+
},
38+
{
39+
id: 'assetName',
40+
label: 'Name'
41+
},
42+
{
43+
id: 'assetId',
44+
label: 'AssetId'
45+
},
46+
{
47+
id: 'availableBalance',
48+
label: 'Available Balance',
49+
format: (value) => value.toLocaleString('en-US')
50+
}
51+
]
3152

3253
const initialValues = {
3354
assetId: '',
@@ -39,12 +60,71 @@ export const CreateTokenSale = () => {
3960
const { activeWallet } = useContext(WalletReducerContext)
4061
const [loading, setLoading] = useState(false)
4162
const [formData, setFormData] = useState(initialValues)
63+
const [assetList, setAssetList] = useState([])
64+
4265
const { assetId, quantity, perUnit } = formData
4366

4467
const onChange = (e) => {
4568
setFormData({ ...formData, [e.target.name]: e.target.value })
4669
}
4770

71+
const fetchUserAssets = () => {
72+
setAssetList([
73+
{
74+
assetId: 7789624,
75+
symbol: 'BUSD',
76+
assetName: 'BUSD Token',
77+
availableBalance: 300000
78+
},
79+
{
80+
assetId: 6789654,
81+
symbol: 'UCDC',
82+
assetName: 'UCDC Token',
83+
availableBalance: 200000
84+
},
85+
{
86+
assetId: 3789654,
87+
symbol: 'goBTC',
88+
assetName: 'goBTC',
89+
availableBalance: 240000
90+
},
91+
{
92+
assetId: 6789654,
93+
symbol: 'UCDC',
94+
assetName: 'UCDC',
95+
availableBalance: 100000
96+
},
97+
{
98+
assetId: 6789654,
99+
symbol: 'UCDC',
100+
assetName: 'UCDC',
101+
availableBalance: 200000
102+
},
103+
{
104+
assetId: 6789654,
105+
symbol: 'UCDC',
106+
assetName: 'UCDC',
107+
availableBalance: 200000
108+
},
109+
{
110+
assetId: 6789654,
111+
symbol: 'UCDC',
112+
assetName: 'UCDC',
113+
availableBalance: 200000
114+
},
115+
{
116+
assetId: 6789654,
117+
symbol: 'UCDC',
118+
assetName: 'UCDC',
119+
availableBalance: 200000
120+
}
121+
])
122+
}
123+
124+
useEffect(() => {
125+
fetchUserAssets()
126+
}, [])
127+
48128
const onSubmit = async (e) => {
49129
e.preventDefault()
50130

@@ -80,16 +160,14 @@ export const CreateTokenSale = () => {
80160
<Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
81161
Choose Asset:
82162
</Typography>
83-
<Box className="mb-4 px-4">
84-
<OutlinedInput
85-
type="text"
86-
placeholder="ASA Asset ID"
87-
name="assetId"
88-
value={assetId}
89-
onChange={(e) => onChange(e)}
90-
sx={styles.input}
91-
/>
92-
</Box>
163+
<TokenSearchInput
164+
name="assetId"
165+
value={assetId}
166+
placeholder="ASA Asset ID"
167+
onChange={onChange}
168+
columns={columns}
169+
rowData={assetList}
170+
/>
93171
</Box>
94172

95173
<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.

0 commit comments

Comments
 (0)