From 6ae5f35116cbf5eeba38916d92d75ae14a837752 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 17:20:32 +0000
Subject: [PATCH 01/14] :lipstick: Reusable ASA search table

---
 components/LaunchPad/Sale/CreateTokenSale.tsx |  59 ++++++++++
 components/LaunchPad/Sale/SearchTable.tsx     | 108 ++++++++++++++++++
 2 files changed, 167 insertions(+)
 create mode 100644 components/LaunchPad/Sale/SearchTable.tsx

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index 6d6e84696..042084782 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -28,6 +28,22 @@ import Button from '@mui/material/Button'
 import OutlinedInput from '@/components/Input/OutlinedInput'
 import { styles } from '../styles.css'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
+import { SearchTable } from './SearchTable'
+
+const columns = [
+  {
+    id: 'assetName',
+    label: 'Asset Name'
+  },
+  {
+    id: 'totalQuantity',
+    label: 'Total Quantity'
+  },
+  {
+    id: 'dateCreated',
+    label: 'Date Created'
+  }
+]
 
 const initialValues = {
   assetId: '',
@@ -39,6 +55,48 @@ export const CreateTokenSale = () => {
   const { activeWallet } = useContext(WalletReducerContext)
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState(initialValues)
+  const [assetList, setAssetList] = useState([
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },  {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    },
+    {
+      assetName: 'UCDC',
+      totalQuantity: 200000,
+      dateCreated: new Date().toLocaleString()
+    }
+  ])
+
   const { assetId, quantity, perUnit } = formData
 
   const onChange = (e) => {
@@ -89,6 +147,7 @@ export const CreateTokenSale = () => {
               onChange={(e) => onChange(e)}
               sx={styles.input}
             />
+            <SearchTable columns={columns} rowData={assetList} />
           </Box>
         </Box>
 
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
new file mode 100644
index 000000000..d259977eb
--- /dev/null
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -0,0 +1,108 @@
+import React from 'react'
+
+//MUI components
+import Paper from '@mui/material/Paper'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell, { tableCellClasses } from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import { styled } from '@mui/material/styles'
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    color: theme.palette.primary.light,
+    border: '0.1px solid',
+    borderColor: theme.palette.primary.light,
+    fontSize: 15,
+    fontWeight: 600
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+    color: theme.palette.secondary.contrastText,
+    border: '0.1px solid',
+    borderColor: theme.palette.primary.light
+  }
+}))
+
+type columnType = {
+  id: string
+  label: string
+  align?: 'left' | 'center' | 'right' | 'justify' | 'inherit'
+  minWidth?: number
+}
+
+export const SearchTable = ({
+  columns,
+  rowData
+}: {
+  columns: Array<columnType>
+  rowData: Array<unknown>
+}) => {
+  if (rowData.length === 0) {
+    return null
+  }
+
+  return (
+    <Paper
+      sx={{
+        width: '100%',
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+        border: '1px solid',
+        borderColor: 'primary.light'
+      }}
+    >
+      <TableContainer sx={{ maxHeight: 400 }}>
+        <Table stickyHeader aria-label="sticky table">
+          <TableHead>
+            <TableRow>
+              {columns.map((item) => (
+                <StyledTableCell
+                  key={item.id}
+                  align={item.align}
+                  sx={{
+                    backgroundColor: 'gray.550'
+                  }}
+                >
+                  {item.label}
+                </StyledTableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rowData.map((row, index) => {
+              return (
+                <TableRow
+                  hover
+                  tabIndex={-1}
+                  key={index}
+                  sx={{
+                    cursor: 'pointer',
+                    '&:nth-of-type(odd)': {
+                      backgroundColor: 'gray.650'
+                    }
+                  }}
+                >
+                  {columns.map((column) => {
+                    const value = row[column.id]
+                    return (
+                      <StyledTableCell
+                        key={column.id}
+                        align={column.align}
+                        data-testid={`column-${column.id}-${value}`}
+                      >
+                        {value}
+                      </StyledTableCell>
+                    )
+                  })}
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Paper>
+  )
+}

From bbe37bb84ae58db4ae2abb0413b5637f431e4061 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 17:29:19 +0000
Subject: [PATCH 02/14] :zap: Update list on page load

---
 components/LaunchPad/Sale/CreateTokenSale.tsx | 90 ++++++++++---------
 components/LaunchPad/Sale/SearchTable.tsx     |  9 +-
 2 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index 042084782..b2a0a78d4 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Note } from '../note'
 
@@ -55,47 +55,7 @@ export const CreateTokenSale = () => {
   const { activeWallet } = useContext(WalletReducerContext)
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState(initialValues)
-  const [assetList, setAssetList] = useState([
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },  {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    },
-    {
-      assetName: 'UCDC',
-      totalQuantity: 200000,
-      dateCreated: new Date().toLocaleString()
-    }
-  ])
+  const [assetList, setAssetList] = useState([])
 
   const { assetId, quantity, perUnit } = formData
 
@@ -110,6 +70,52 @@ export const CreateTokenSale = () => {
     setLoading(false)
   }
 
+  useEffect(() => {
+    //This is just to display the search table pending when the search function will be available to populate the table
+    setAssetList([
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      },
+      {
+        assetName: 'UCDC',
+        totalQuantity: 200000,
+        dateCreated: new Date().toLocaleString()
+      }
+    ])
+  }, [])
+
   return (
     <>
       <Typography variant="subtitle1" sx={styles.title}>
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index d259977eb..b40113b40 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -86,14 +86,9 @@ export const SearchTable = ({
                   }}
                 >
                   {columns.map((column) => {
-                    const value = row[column.id]
                     return (
-                      <StyledTableCell
-                        key={column.id}
-                        align={column.align}
-                        data-testid={`column-${column.id}-${value}`}
-                      >
-                        {value}
+                      <StyledTableCell key={column.id} align={column.align}>
+                        {row[column.id]}
                       </StyledTableCell>
                     )
                   })}

From 801313e9293b2d506d5864e1405ad66ae8ab4b30 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 21:10:59 +0000
Subject: [PATCH 03/14] :zap: Update search table

---
 components/LaunchPad/Sale/CreateTokenSale.tsx | 79 +++++++++++-------
 components/LaunchPad/Sale/SearchTable.tsx     | 82 +++++++++++++------
 2 files changed, 107 insertions(+), 54 deletions(-)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index b2a0a78d4..7e87306a6 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Note } from '../note'
 
@@ -31,17 +31,21 @@ import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
 import { SearchTable } from './SearchTable'
 
 const columns = [
+  {
+    id: 'assetId',
+    label: 'AssetId'
+  },
   {
     id: 'assetName',
-    label: 'Asset Name'
+    label: 'Name'
   },
   {
     id: 'totalQuantity',
-    label: 'Total Quantity'
+    label: 'Quantity'
   },
   {
-    id: 'dateCreated',
-    label: 'Date Created'
+    id: 'createdAt',
+    label: 'Created On'
   }
 ]
 
@@ -56,6 +60,7 @@ export const CreateTokenSale = () => {
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState(initialValues)
   const [assetList, setAssetList] = useState([])
+  const [showTable, setShowTable] = useState(false)
 
   const { assetId, quantity, perUnit } = formData
 
@@ -63,58 +68,70 @@ export const CreateTokenSale = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value })
   }
 
-  const onSubmit = async (e) => {
-    e.preventDefault()
-
-    setLoading(true)
-    setLoading(false)
-  }
-
-  useEffect(() => {
-    //This is just to display the search table pending when the search function will be available to populate the table
+  const onSearchAsset = (e) => {
+    const searchValue = e.target.value
+    setFormData({ ...formData, [e.target.name]: searchValue })
     setAssetList([
       {
-        assetName: 'UCDC',
-        totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        assetId: 7789624,
+        assetName: 'BUSD',
+        totalQuantity: 300000,
+        createdAt: new Date().toLocaleString()
       },
       {
+        assetId: 6789654,
         assetName: 'UCDC',
         totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        createdAt: new Date().toLocaleString()
       },
       {
-        assetName: 'UCDC',
-        totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        assetId: 3789654,
+        assetName: 'goBTC',
+        totalQuantity: 240000,
+        createdAt: new Date().toLocaleString()
       },
       {
+        assetId: 6789654,
         assetName: 'UCDC',
-        totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        totalQuantity: 100000,
+        createdAt: new Date().toLocaleString()
       },
       {
+        assetId: 6789654,
         assetName: 'UCDC',
         totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        createdAt: new Date().toLocaleString()
       },
       {
+        assetId: 6789654,
         assetName: 'UCDC',
         totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        createdAt: new Date().toLocaleString()
       },
       {
+        assetId: 6789654,
         assetName: 'UCDC',
         totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        createdAt: new Date().toLocaleString()
       },
       {
+        assetId: 6789654,
         assetName: 'UCDC',
         totalQuantity: 200000,
-        dateCreated: new Date().toLocaleString()
+        createdAt: new Date().toLocaleString()
       }
     ])
-  }, [])
+    setShowTable(true)
+  }
+
+  const onSubmit = async (e) => {
+    e.preventDefault()
+
+    setLoading(true)
+    setLoading(false)
+  }
+
+
 
   return (
     <>
@@ -144,16 +161,16 @@ export const CreateTokenSale = () => {
           <Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
             Choose Asset:
           </Typography>
-          <Box className="mb-4 px-4">
+          <Box className="mb-4 px-4 relative">
             <OutlinedInput
               type="text"
               placeholder="ASA Asset ID"
               name="assetId"
               value={assetId}
-              onChange={(e) => onChange(e)}
+              onChange={(e) => onSearchAsset(e)}
               sx={styles.input}
             />
-            <SearchTable columns={columns} rowData={assetList} />
+            <SearchTable columns={columns} rowData={assetList} showTable={showTable} />
           </Box>
         </Box>
 
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index b40113b40..917664a60 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo, useState } from 'react'
 
 //MUI components
 import Paper from '@mui/material/Paper'
@@ -9,18 +9,22 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+import visuallyHidden from '@mui/utils/visuallyHidden'
+import TableSortLabel from '@mui/material/TableSortLabel'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  color: 'gray.800',
   [`&.${tableCellClasses.head}`]: {
-    color: theme.palette.primary.light,
+    backgroundColor: 'white',
     border: '0.1px solid',
     borderColor: theme.palette.primary.light,
-    fontSize: 15,
-    fontWeight: 600
+    fontSize: 10,
+    textTransform: 'uppercase'
   },
   [`&.${tableCellClasses.body}`]: {
+    fontWeight: 600,
     fontSize: 14,
-    color: theme.palette.secondary.contrastText,
     border: '0.1px solid',
     borderColor: theme.palette.primary.light
   }
@@ -35,59 +39,91 @@ type columnType = {
 
 export const SearchTable = ({
   columns,
-  rowData
+  rowData,
+  showTable
 }: {
   columns: Array<columnType>
   rowData: Array<unknown>
+  showTable: boolean
 }) => {
-  if (rowData.length === 0) {
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc')
+  const [orderBy, setOrderBy] = useState('assetName')
+
+  const createSortHandler = (property: string) => {
+    const isAsc = orderBy === property && order === 'asc'
+    setOrder(isAsc ? 'desc' : 'asc')
+    setOrderBy(property)
+  }
+
+  const sortedData = useMemo(() => {
+    if (order === 'asc') {
+      return rowData.sort((a, b) => `${a[orderBy]}`.localeCompare(`${b[orderBy]}`))
+    } else {
+      return rowData.sort((a, b) => `${b[orderBy]}`.localeCompare(`${a[orderBy]}`))
+    }
+  }, [rowData, order, orderBy])
+
+  if (rowData.length === 0 || !showTable) {
     return null
   }
 
   return (
     <Paper
       sx={{
-        width: '100%',
         overflow: 'hidden',
-        backgroundColor: 'transparent',
+        backgroundColor: 'white',
         border: '1px solid',
-        borderColor: 'primary.light'
+        borderColor: 'primary.light',
+        position: 'absolute',
+        zIndex: 1
       }}
     >
       <TableContainer sx={{ maxHeight: 400 }}>
         <Table stickyHeader aria-label="sticky table">
           <TableHead>
             <TableRow>
-              {columns.map((item) => (
+              {columns.map((col) => (
                 <StyledTableCell
-                  key={item.id}
-                  align={item.align}
-                  sx={{
-                    backgroundColor: 'gray.550'
-                  }}
+                  key={col.id}
+                  align={col.align}
+                  sortDirection={orderBy === col.id ? order : false}
                 >
-                  {item.label}
+                  <TableSortLabel
+                    active={orderBy === col.id}
+                    direction={orderBy === col.id ? order : 'asc'}
+                    onClick={() => createSortHandler(col.id)}
+                  >
+                    {col.label}
+                    {orderBy === col.id ? (
+                      <Box component="span" sx={visuallyHidden}>
+                        {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                      </Box>
+                    ) : null}
+                  </TableSortLabel>
                 </StyledTableCell>
               ))}
             </TableRow>
           </TableHead>
           <TableBody>
-            {rowData.map((row, index) => {
+            {sortedData.map((row, index) => {
               return (
                 <TableRow
                   hover
                   tabIndex={-1}
                   key={index}
                   sx={{
-                    cursor: 'pointer',
-                    '&:nth-of-type(odd)': {
-                      backgroundColor: 'gray.650'
-                    }
+                    cursor: 'pointer'
                   }}
                 >
                   {columns.map((column) => {
                     return (
-                      <StyledTableCell key={column.id} align={column.align}>
+                      <StyledTableCell
+                        key={column.id}
+                        align={column.align}
+                        sx={{
+                          color: 'gray.800'
+                        }}
+                      >
                         {row[column.id]}
                       </StyledTableCell>
                     )

From 1349ebeea80ced39cc89ccc40936c69543c122b3 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 21:14:06 +0000
Subject: [PATCH 04/14] :lipstick: UI update

---
 components/LaunchPad/Sale/SearchTable.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 917664a60..7d6c37fe2 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -70,6 +70,7 @@ export const SearchTable = ({
   return (
     <Paper
       sx={{
+        width: '95%',
         overflow: 'hidden',
         backgroundColor: 'white',
         border: '1px solid',

From ec71dbb3ad572d3bb247caed1257a75ddf196805 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 21:30:46 +0000
Subject: [PATCH 05/14] :bug: update UI interaction

---
 components/LaunchPad/Sale/CreateTokenSale.tsx | 23 +++++++++++--------
 components/LaunchPad/Sale/SearchTable.tsx     | 21 +++++++++++++++--
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index 7e87306a6..da642fbe8 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Note } from '../note'
 
@@ -68,9 +68,7 @@ export const CreateTokenSale = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value })
   }
 
-  const onSearchAsset = (e) => {
-    const searchValue = e.target.value
-    setFormData({ ...formData, [e.target.name]: searchValue })
+  const fetchUserAssets = () => {
     setAssetList([
       {
         assetId: 7789624,
@@ -121,9 +119,12 @@ export const CreateTokenSale = () => {
         createdAt: new Date().toLocaleString()
       }
     ])
-    setShowTable(true)
   }
 
+  useEffect(() => {
+    fetchUserAssets()
+  }, [])
+
   const onSubmit = async (e) => {
     e.preventDefault()
 
@@ -131,8 +132,6 @@ export const CreateTokenSale = () => {
     setLoading(false)
   }
 
-
-
   return (
     <>
       <Typography variant="subtitle1" sx={styles.title}>
@@ -167,10 +166,16 @@ export const CreateTokenSale = () => {
               placeholder="ASA Asset ID"
               name="assetId"
               value={assetId}
-              onChange={(e) => onSearchAsset(e)}
+              onChange={(e) => onChange(e)}
+              onFocus={() => setShowTable(true)}
               sx={styles.input}
             />
-            <SearchTable columns={columns} rowData={assetList} showTable={showTable} />
+            <SearchTable
+              columns={columns}
+              rowData={assetList}
+              showTable={showTable}
+              setShowTable={setShowTable}
+            />
           </Box>
         </Box>
 
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 7d6c37fe2..30bc168e8 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 
 //MUI components
 import Paper from '@mui/material/Paper'
@@ -40,12 +40,15 @@ type columnType = {
 export const SearchTable = ({
   columns,
   rowData,
-  showTable
+  showTable,
+  setShowTable
 }: {
   columns: Array<columnType>
   rowData: Array<unknown>
   showTable: boolean
+  setShowTable: (v: boolean) => void
 }) => {
+  const dropdownRef = useRef(null)
   const [order, setOrder] = useState<'asc' | 'desc'>('desc')
   const [orderBy, setOrderBy] = useState('assetName')
 
@@ -63,6 +66,20 @@ export const SearchTable = ({
     }
   }, [rowData, order, orderBy])
 
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setShowTable(false)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true)
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   if (rowData.length === 0 || !showTable) {
     return null
   }

From 082fc835f575c69fe477b0d5b129ece6d4364560 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 21:31:14 +0000
Subject: [PATCH 06/14] :bug: update UI interaction

---
 components/LaunchPad/Sale/SearchTable.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 30bc168e8..a13e07714 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -86,6 +86,7 @@ export const SearchTable = ({
 
   return (
     <Paper
+      ref={dropdownRef}
       sx={{
         width: '95%',
         overflow: 'hidden',

From 9b9dcf65d7dbd7108f7172baffa5fe79b0508e8b Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Tue, 28 Feb 2023 21:34:38 +0000
Subject: [PATCH 07/14] :bug: update search interaction

---
 components/LaunchPad/Sale/CreateTokenSale.tsx | 6 ++++--
 components/LaunchPad/Sale/SearchTable.tsx     | 8 ++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index da642fbe8..6357c29bc 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Note } from '../note'
 
@@ -61,6 +61,7 @@ export const CreateTokenSale = () => {
   const [formData, setFormData] = useState(initialValues)
   const [assetList, setAssetList] = useState([])
   const [showTable, setShowTable] = useState(false)
+  const dropdownRef = useRef(null)
 
   const { assetId, quantity, perUnit } = formData
 
@@ -160,7 +161,7 @@ export const CreateTokenSale = () => {
           <Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
             Choose Asset:
           </Typography>
-          <Box className="mb-4 px-4 relative">
+          <Box className="mb-4 px-4 relative" ref={dropdownRef}>
             <OutlinedInput
               type="text"
               placeholder="ASA Asset ID"
@@ -175,6 +176,7 @@ export const CreateTokenSale = () => {
               rowData={assetList}
               showTable={showTable}
               setShowTable={setShowTable}
+              dropdownRef={dropdownRef}
             />
           </Box>
         </Box>
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index a13e07714..72115ea1c 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { MutableRefObject, useEffect, useMemo, useState } from 'react'
 
 //MUI components
 import Paper from '@mui/material/Paper'
@@ -41,14 +41,15 @@ export const SearchTable = ({
   columns,
   rowData,
   showTable,
-  setShowTable
+  setShowTable,
+  dropdownRef
 }: {
   columns: Array<columnType>
   rowData: Array<unknown>
   showTable: boolean
   setShowTable: (v: boolean) => void
+  dropdownRef: MutableRefObject<Element>
 }) => {
-  const dropdownRef = useRef(null)
   const [order, setOrder] = useState<'asc' | 'desc'>('desc')
   const [orderBy, setOrderBy] = useState('assetName')
 
@@ -86,7 +87,6 @@ export const SearchTable = ({
 
   return (
     <Paper
-      ref={dropdownRef}
       sx={{
         width: '95%',
         overflow: 'hidden',

From b431b036031614520f05b9771c12ab5405165367 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Thu, 2 Mar 2023 19:28:33 +0000
Subject: [PATCH 08/14] :zap: Update asset search

---
 components/LaunchPad/Sale/CreateTokenSale.tsx |  81 ++++++--------
 components/LaunchPad/Sale/ManageTokenSale.tsx | 100 ++++++++++++++++--
 components/LaunchPad/Sale/SearchTable.tsx     |   9 +-
 components/LaunchPad/SearchInput.tsx          |  49 +++++++++
 components/LaunchPad/Token/ManageToken.tsx    |  98 +++++++++++++++--
 5 files changed, 266 insertions(+), 71 deletions(-)
 create mode 100644 components/LaunchPad/SearchInput.tsx

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index c799ae2ef..cbb70737e 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Note } from '../note'
 
@@ -28,24 +28,25 @@ import Button from '@mui/material/Button'
 import OutlinedInput from '@/components/Input/OutlinedInput'
 import { styles } from '../styles.css'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
-import { SearchTable } from './SearchTable'
+import { SearchInput } from '../SearchInput'
 
 const columns = [
   {
-    id: 'assetId',
-    label: 'AssetId'
+    id: 'symbol',
+    label: 'Symbol'
   },
   {
     id: 'assetName',
     label: 'Name'
   },
   {
-    id: 'totalQuantity',
-    label: 'Quantity'
+    id: 'assetId',
+    label: 'AssetId'
   },
   {
-    id: 'createdAt',
-    label: 'Created On'
+    id: 'availableBalance',
+    label: 'Available Balance',
+    format: (value) => value.toLocaleString('en-US')
   }
 ]
 
@@ -60,8 +61,6 @@ export const CreateTokenSale = () => {
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState(initialValues)
   const [assetList, setAssetList] = useState([])
-  const [showTable, setShowTable] = useState(false)
-  const dropdownRef = useRef(null)
 
   const { assetId, quantity, perUnit } = formData
 
@@ -73,51 +72,51 @@ export const CreateTokenSale = () => {
     setAssetList([
       {
         assetId: 7789624,
-        assetName: 'BUSD',
-        totalQuantity: 300000,
-        createdAt: new Date().toLocaleString()
+        symbol: 'BUSD',
+        assetName: 'BUSD Token',
+        availableBalance: 300000
       },
       {
         assetId: 6789654,
-        assetName: 'UCDC',
-        totalQuantity: 200000,
-        createdAt: new Date().toLocaleString()
+        symbol: 'UCDC',
+        assetName: 'UCDC Token',
+        availableBalance: 200000
       },
       {
         assetId: 3789654,
+        symbol: 'goBTC',
         assetName: 'goBTC',
-        totalQuantity: 240000,
-        createdAt: new Date().toLocaleString()
+        availableBalance: 240000
       },
       {
         assetId: 6789654,
+        symbol: 'UCDC',
         assetName: 'UCDC',
-        totalQuantity: 100000,
-        createdAt: new Date().toLocaleString()
+        availableBalance: 100000
       },
       {
         assetId: 6789654,
+        symbol: 'UCDC',
         assetName: 'UCDC',
-        totalQuantity: 200000,
-        createdAt: new Date().toLocaleString()
+        availableBalance: 200000
       },
       {
         assetId: 6789654,
+        symbol: 'UCDC',
         assetName: 'UCDC',
-        totalQuantity: 200000,
-        createdAt: new Date().toLocaleString()
+        availableBalance: 200000
       },
       {
         assetId: 6789654,
+        symbol: 'UCDC',
         assetName: 'UCDC',
-        totalQuantity: 200000,
-        createdAt: new Date().toLocaleString()
+        availableBalance: 200000
       },
       {
         assetId: 6789654,
+        symbol: 'UCDC',
         assetName: 'UCDC',
-        totalQuantity: 200000,
-        createdAt: new Date().toLocaleString()
+        availableBalance: 200000
       }
     ])
   }
@@ -161,24 +160,14 @@ export const CreateTokenSale = () => {
           <Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
             Choose Asset:
           </Typography>
-          <Box className="mb-4 px-4 relative" ref={dropdownRef}>
-            <OutlinedInput
-              type="text"
-              placeholder="ASA Asset ID"
-              name="assetId"
-              value={assetId}
-              onChange={(e) => onChange(e)}
-              onFocus={() => setShowTable(true)}
-              sx={styles.input}
-            />
-            <SearchTable
-              columns={columns}
-              rowData={assetList}
-              showTable={showTable}
-              setShowTable={setShowTable}
-              dropdownRef={dropdownRef}
-            />
-          </Box>
+          <SearchInput
+            name="assetId"
+            value={assetId}
+            placeholder="ASA Asset ID"
+            onChange={onChange}
+            columns={columns}
+            rowData={assetList}
+          />
         </Box>
 
         <Box className="mb-10">
diff --git a/components/LaunchPad/Sale/ManageTokenSale.tsx b/components/LaunchPad/Sale/ManageTokenSale.tsx
index 5fc001de6..948bb6f9c 100644
--- a/components/LaunchPad/Sale/ManageTokenSale.tsx
+++ b/components/LaunchPad/Sale/ManageTokenSale.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Icon } from '@iconify/react'
 
@@ -30,6 +30,7 @@ import { styles } from '../styles.css'
 import { CopyIcon } from '../copyIcon'
 import { LinearProgressWithLabel } from '../progressBar'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
+import { SearchInput } from '../SearchInput'
 
 const initialValues = {
   tokenName: '',
@@ -39,9 +40,30 @@ const initialValues = {
   showTotalForSale: false
 }
 
+const columns = [
+  {
+    id: 'symbol',
+    label: 'Symbol'
+  },
+  {
+    id: 'assetName',
+    label: 'Name'
+  },
+  {
+    id: 'assetId',
+    label: 'AssetId'
+  },
+  {
+    id: 'availableBalance',
+    label: 'Available Balance',
+    format: (value) => value.toLocaleString('en-US')
+  }
+]
+
 export const ManageTokenSale = () => {
   const { activeWallet } = useContext(WalletReducerContext)
   const [formData, setFormData] = useState(initialValues)
+  const [assetList, setAssetList] = useState([])
   const { tokenName, pricePerToken, showPricePerToken, totalForSale, showTotalForSale } = formData
 
   const onChange = (e) => {
@@ -61,6 +83,63 @@ export const ManageTokenSale = () => {
     e.preventDefault()
   }
 
+  const fetchUserAssets = () => {
+    setAssetList([
+      {
+        assetId: 7789624,
+        symbol: 'BUSD',
+        assetName: 'BUSD Token',
+        availableBalance: 300000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC Token',
+        availableBalance: 200000
+      },
+      {
+        assetId: 3789654,
+        symbol: 'goBTC',
+        assetName: 'goBTC',
+        availableBalance: 240000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        availableBalance: 100000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        availableBalance: 200000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        availableBalance: 200000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        availableBalance: 200000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        availableBalance: 200000
+      }
+    ])
+  }
+
+  useEffect(() => {
+    fetchUserAssets()
+  }, [])
+
   return (
     <>
       <Typography variant="subtitle1" sx={styles.title}>
@@ -89,16 +168,15 @@ export const ManageTokenSale = () => {
           <Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
             Choose Sale to Manage:
           </Typography>
-          <Box className="mb-4 px-4">
-            <OutlinedInput
-              type="text"
-              placeholder="Token Name"
-              name="tokenName"
-              value={tokenName}
-              onChange={(e) => onChange(e)}
-              sx={styles.input}
-            />
-          </Box>
+
+          <SearchInput
+            name="tokenName"
+            value={tokenName}
+            placeholder="Token Name"
+            onChange={onChange}
+            columns={columns}
+            rowData={assetList}
+          />
           <Typography variant="body1" sx={{ ...styles.body1, marginBottom: '29px' }}>
             Search with Asset Name or Asset ID - Only ASAs created by the currently connected wallet
             will show as options.
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 72115ea1c..76d466014 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -30,11 +30,12 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
   }
 }))
 
-type columnType = {
+export type TableColumnType = {
   id: string
   label: string
   align?: 'left' | 'center' | 'right' | 'justify' | 'inherit'
   minWidth?: number
+  format?: (val: number) => string
 }
 
 export const SearchTable = ({
@@ -44,7 +45,7 @@ export const SearchTable = ({
   setShowTable,
   dropdownRef
 }: {
-  columns: Array<columnType>
+  columns: Array<TableColumnType>
   rowData: Array<unknown>
   showTable: boolean
   setShowTable: (v: boolean) => void
@@ -143,7 +144,9 @@ export const SearchTable = ({
                           color: 'gray.800'
                         }}
                       >
-                        {row[column.id]}
+                        {column.format && typeof row[column.id] === 'number'
+                          ? column.format(row[column.id])
+                          : row[column.id]}
                       </StyledTableCell>
                     )
                   })}
diff --git a/components/LaunchPad/SearchInput.tsx b/components/LaunchPad/SearchInput.tsx
new file mode 100644
index 000000000..a843b8520
--- /dev/null
+++ b/components/LaunchPad/SearchInput.tsx
@@ -0,0 +1,49 @@
+import React, { useRef, useState } from 'react'
+import { SearchTable, TableColumnType } from './Sale/SearchTable'
+import { styles } from './styles.css'
+
+//MUI Components
+import Box from '@mui/material/Box'
+
+// Custom Styled Components
+import OutlinedInput from '@/components/Input/OutlinedInput'
+
+export const SearchInput = ({
+  value,
+  name,
+  onChange,
+  columns,
+  rowData,
+  placeholder
+}: {
+  value: string | number
+  name: string
+  onChange: (e: unknown) => void
+  columns: TableColumnType[]
+  rowData: unknown[]
+  placeholder: string
+}) => {
+  const [showTable, setShowTable] = useState(false)
+  const dropdownRef = useRef(null)
+
+  return (
+    <Box className="mb-4 px-4 relative" ref={dropdownRef}>
+      <OutlinedInput
+        type="text"
+        placeholder={placeholder}
+        name={name}
+        value={value}
+        onChange={(e) => onChange(e)}
+        onFocus={() => setShowTable(true)}
+        sx={styles.input}
+      />
+      <SearchTable
+        columns={columns}
+        rowData={rowData}
+        showTable={showTable}
+        setShowTable={setShowTable}
+        dropdownRef={dropdownRef}
+      />
+    </Box>
+  )
+}
diff --git a/components/LaunchPad/Token/ManageToken.tsx b/components/LaunchPad/Token/ManageToken.tsx
index 14ed4fbdb..e352d4397 100644
--- a/components/LaunchPad/Token/ManageToken.tsx
+++ b/components/LaunchPad/Token/ManageToken.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { ChangeEvent, useContext, useState } from 'react'
+import React, { ChangeEvent, useContext, useEffect, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Icon } from '@iconify/react'
 
@@ -32,6 +32,7 @@ import { CopyIcon } from '../copyIcon'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
 import { isValidAddr, truncatedWalletAddress } from '@/components/helpers'
 import { ErrorMessage } from '../ErrorMessage'
+import { SearchInput } from '../SearchInput'
 
 const initialValues = {
   tokenName: '',
@@ -46,10 +47,30 @@ const initialValues = {
   freezeAddr: 'V537CZGHERY87634WVQCAGFYTRYH'
 }
 
+const columns = [
+  {
+    id: 'symbol',
+    label: 'Symbol'
+  },
+  {
+    id: 'assetName',
+    label: 'Name'
+  },
+  {
+    id: 'assetId',
+    label: 'AssetId'
+  },
+  {
+    id: 'totalQuantity',
+    label: 'Quantity'
+  }
+]
+
 export const ManageToken = () => {
   const { activeWallet } = useContext(WalletReducerContext)
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState(initialValues)
+  const [assetList, setAssetList] = useState([])
   const [error, setError] = useState({})
   const {
     tokenName,
@@ -116,6 +137,62 @@ export const ManageToken = () => {
     setLoading(false)
   }
 
+  const fetchUserAssets = () => {
+    setAssetList([
+      {
+        assetId: 7789624,
+        symbol: 'BUSD',
+        assetName: 'BUSD Token',
+        totalQuantity: 300000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC Token',
+        totalQuantity: 200000
+      },
+      {
+        assetId: 3789654,
+        symbol: 'goBTC',
+        assetName: 'goBTC',
+        totalQuantity: 240000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        totalQuantity: 100000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        totalQuantity: 200000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        totalQuantity: 200000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        totalQuantity: 200000
+      },
+      {
+        assetId: 6789654,
+        symbol: 'UCDC',
+        assetName: 'UCDC',
+        totalQuantity: 200000
+      }
+    ])
+  }
+
+  useEffect(() => {
+    fetchUserAssets()
+  }, [])
   return (
     <>
       <Typography variant="subtitle1" sx={styles.title}>
@@ -144,16 +221,15 @@ export const ManageToken = () => {
           <Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
             Choose Token to Manage:
           </Typography>
-          <Box className="mb-4 px-4">
-            <OutlinedInput
-              type="text"
-              placeholder="Token Name"
-              name="tokenName"
-              value={tokenName}
-              onChange={(e) => onChange(e)}
-              sx={styles.input}
-            />
-          </Box>
+
+          <SearchInput
+            name="tokenName"
+            value={tokenName}
+            placeholder="Token Name"
+            onChange={onchange}
+            columns={columns}
+            rowData={assetList}
+          />
           <Typography variant="body1" sx={{ ...styles.body1, marginBottom: '29px' }}>
             Search with Asset Name or Asset ID - Only ASAs created by the currently connected wallet
             will show as options.

From 616c77937bbcfae2c10954f27c44252e63dad10f Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Thu, 2 Mar 2023 20:19:52 +0000
Subject: [PATCH 09/14] :bug: use the right onchange handler

---
 components/LaunchPad/Sale/SearchTable.tsx  | 3 +--
 components/LaunchPad/Token/ManageToken.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 76d466014..9f82cbd64 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -10,7 +10,6 @@ import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
-import visuallyHidden from '@mui/utils/visuallyHidden'
 import TableSortLabel from '@mui/material/TableSortLabel'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -115,7 +114,7 @@ export const SearchTable = ({
                   >
                     {col.label}
                     {orderBy === col.id ? (
-                      <Box component="span" sx={visuallyHidden}>
+                      <Box component="span">
                         {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                       </Box>
                     ) : null}
diff --git a/components/LaunchPad/Token/ManageToken.tsx b/components/LaunchPad/Token/ManageToken.tsx
index e352d4397..93daddb65 100644
--- a/components/LaunchPad/Token/ManageToken.tsx
+++ b/components/LaunchPad/Token/ManageToken.tsx
@@ -226,7 +226,7 @@ export const ManageToken = () => {
             name="tokenName"
             value={tokenName}
             placeholder="Token Name"
-            onChange={onchange}
+            onChange={onChange}
             columns={columns}
             rowData={assetList}
           />

From 377d341afb55f427d06598b862b10feee819cbc5 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Thu, 2 Mar 2023 21:20:41 +0000
Subject: [PATCH 10/14] :zap: Update asset search

---
 components/LaunchPad/Sale/CreateTokenSale.tsx |  4 +--
 components/LaunchPad/Sale/ManageTokenSale.tsx |  4 +--
 components/LaunchPad/Sale/SearchTable.tsx     | 27 ++++++++++++++-----
 components/LaunchPad/Token/ManageToken.tsx    |  4 +--
 .../{SearchInput.tsx => TokenSearchInput.tsx} |  2 +-
 5 files changed, 27 insertions(+), 14 deletions(-)
 rename components/LaunchPad/{SearchInput.tsx => TokenSearchInput.tsx} (96%)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index cbb70737e..97631819c 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -28,7 +28,7 @@ import Button from '@mui/material/Button'
 import OutlinedInput from '@/components/Input/OutlinedInput'
 import { styles } from '../styles.css'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
-import { SearchInput } from '../SearchInput'
+import { TokenSearchInput } from '../TokenSearchInput'
 
 const columns = [
   {
@@ -160,7 +160,7 @@ export const CreateTokenSale = () => {
           <Typography variant="subtitle2" sx={{ ...styles.subtitle2, mb: '13px' }}>
             Choose Asset:
           </Typography>
-          <SearchInput
+          <TokenSearchInput
             name="assetId"
             value={assetId}
             placeholder="ASA Asset ID"
diff --git a/components/LaunchPad/Sale/ManageTokenSale.tsx b/components/LaunchPad/Sale/ManageTokenSale.tsx
index 948bb6f9c..ae9cdfdc8 100644
--- a/components/LaunchPad/Sale/ManageTokenSale.tsx
+++ b/components/LaunchPad/Sale/ManageTokenSale.tsx
@@ -30,7 +30,7 @@ import { styles } from '../styles.css'
 import { CopyIcon } from '../copyIcon'
 import { LinearProgressWithLabel } from '../progressBar'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
-import { SearchInput } from '../SearchInput'
+import { TokenSearchInput } from '../TokenSearchInput'
 
 const initialValues = {
   tokenName: '',
@@ -169,7 +169,7 @@ export const ManageTokenSale = () => {
             Choose Sale to Manage:
           </Typography>
 
-          <SearchInput
+          <TokenSearchInput
             name="tokenName"
             value={tokenName}
             placeholder="Token Name"
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 9f82cbd64..e8cbf2691 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -1,4 +1,5 @@
 import React, { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import Icon from '@/components/Icon'
 
 //MUI components
 import Paper from '@mui/material/Paper'
@@ -19,16 +20,22 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
     border: '0.1px solid',
     borderColor: theme.palette.primary.light,
     fontSize: 10,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    paddingBlock: '3px'
   },
   [`&.${tableCellClasses.body}`]: {
     fontWeight: 600,
     fontSize: 14,
     border: '0.1px solid',
-    borderColor: theme.palette.primary.light
+    borderColor: theme.palette.primary.light,
+    paddingBlock: '8px'
   }
 }))
 
+const SortIcon = styled(Icon)`
+  margin-left: 0.25rem;
+`
+
 export type TableColumnType = {
   id: string
   label: string
@@ -111,13 +118,19 @@ export const SearchTable = ({
                     active={orderBy === col.id}
                     direction={orderBy === col.id ? order : 'asc'}
                     onClick={() => createSortHandler(col.id)}
+                    sx={{
+                      '.css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-3l415a-MuiSvgIcon-root-MuiTableSortLabel-icon': {
+                        display: 'none'
+                      }
+                    }}
                   >
                     {col.label}
-                    {orderBy === col.id ? (
-                      <Box component="span">
-                        {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                      </Box>
-                    ) : null}
+                    <Box component="span">
+                      <SortIcon
+                        use={orderBy === col.id && order === 'desc' ? 'sortDesc' : 'sortAsc'}
+                        size={0.625}
+                      />
+                    </Box>
                   </TableSortLabel>
                 </StyledTableCell>
               ))}
diff --git a/components/LaunchPad/Token/ManageToken.tsx b/components/LaunchPad/Token/ManageToken.tsx
index 93daddb65..1dd9669af 100644
--- a/components/LaunchPad/Token/ManageToken.tsx
+++ b/components/LaunchPad/Token/ManageToken.tsx
@@ -32,7 +32,7 @@ import { CopyIcon } from '../copyIcon'
 import { WalletReducerContext } from '@/hooks/WalletsReducerProvider'
 import { isValidAddr, truncatedWalletAddress } from '@/components/helpers'
 import { ErrorMessage } from '../ErrorMessage'
-import { SearchInput } from '../SearchInput'
+import { TokenSearchInput } from '../TokenSearchInput'
 
 const initialValues = {
   tokenName: '',
@@ -222,7 +222,7 @@ export const ManageToken = () => {
             Choose Token to Manage:
           </Typography>
 
-          <SearchInput
+          <TokenSearchInput
             name="tokenName"
             value={tokenName}
             placeholder="Token Name"
diff --git a/components/LaunchPad/SearchInput.tsx b/components/LaunchPad/TokenSearchInput.tsx
similarity index 96%
rename from components/LaunchPad/SearchInput.tsx
rename to components/LaunchPad/TokenSearchInput.tsx
index a843b8520..24386646d 100644
--- a/components/LaunchPad/SearchInput.tsx
+++ b/components/LaunchPad/TokenSearchInput.tsx
@@ -8,7 +8,7 @@ import Box from '@mui/material/Box'
 // Custom Styled Components
 import OutlinedInput from '@/components/Input/OutlinedInput'
 
-export const SearchInput = ({
+export const TokenSearchInput = ({
   value,
   name,
   onChange,

From df41a0413821c948221538ddee9d2191dbba40b5 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Thu, 2 Mar 2023 21:27:48 +0000
Subject: [PATCH 11/14] :lipstick: Update search table UI

---
 components/LaunchPad/Sale/CreateTokenSale.tsx |  1 +
 components/LaunchPad/Sale/ManageTokenSale.tsx |  1 +
 components/LaunchPad/Sale/SearchTable.tsx     | 13 +++++++------
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index 97631819c..d443fc579 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -46,6 +46,7 @@ const columns = [
   {
     id: 'availableBalance',
     label: 'Available Balance',
+    align: 'right',
     format: (value) => value.toLocaleString('en-US')
   }
 ]
diff --git a/components/LaunchPad/Sale/ManageTokenSale.tsx b/components/LaunchPad/Sale/ManageTokenSale.tsx
index ae9cdfdc8..ad52dea2f 100644
--- a/components/LaunchPad/Sale/ManageTokenSale.tsx
+++ b/components/LaunchPad/Sale/ManageTokenSale.tsx
@@ -56,6 +56,7 @@ const columns = [
   {
     id: 'availableBalance',
     label: 'Available Balance',
+    align: 'right',
     format: (value) => value.toLocaleString('en-US')
   }
 ]
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index e8cbf2691..7051d426b 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -39,7 +39,7 @@ const SortIcon = styled(Icon)`
 export type TableColumnType = {
   id: string
   label: string
-  align?: 'left' | 'center' | 'right' | 'justify' | 'inherit'
+  align?: string
   minWidth?: number
   format?: (val: number) => string
 }
@@ -111,7 +111,7 @@ export const SearchTable = ({
               {columns.map((col) => (
                 <StyledTableCell
                   key={col.id}
-                  align={col.align}
+                  //                   align={col.align}
                   sortDirection={orderBy === col.id ? order : false}
                 >
                   <TableSortLabel
@@ -119,9 +119,10 @@ export const SearchTable = ({
                     direction={orderBy === col.id ? order : 'asc'}
                     onClick={() => createSortHandler(col.id)}
                     sx={{
-                      '.css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-3l415a-MuiSvgIcon-root-MuiTableSortLabel-icon': {
-                        display: 'none'
-                      }
+                      '.css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-3l415a-MuiSvgIcon-root-MuiTableSortLabel-icon':
+                        {
+                          display: 'none'
+                        }
                     }}
                   >
                     {col.label}
@@ -151,7 +152,7 @@ export const SearchTable = ({
                     return (
                       <StyledTableCell
                         key={column.id}
-                        align={column.align}
+                        align={column.align as 'left' | 'center' | 'right' | 'justify' | 'inherit'}
                         sx={{
                           color: 'gray.800'
                         }}

From c385036258e080ed59f4e89e8ff1833c692fafdc Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Thu, 2 Mar 2023 21:34:47 +0000
Subject: [PATCH 12/14] :lipstick: Hide arrow

---
 components/LaunchPad/Sale/SearchTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 7051d426b..bc53e5596 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -119,7 +119,7 @@ export const SearchTable = ({
                     direction={orderBy === col.id ? order : 'asc'}
                     onClick={() => createSortHandler(col.id)}
                     sx={{
-                      '.css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-3l415a-MuiSvgIcon-root-MuiTableSortLabel-icon':
+                      '.css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-3l415a-MuiSvgIcon-root-MuiTableSortLabel-icon, .css-s6n6v6, .css-tqymag':
                         {
                           display: 'none'
                         }

From c7e933e80f3255bb15a21781236cebb2a4f95998 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Thu, 2 Mar 2023 21:40:48 +0000
Subject: [PATCH 13/14] :lipstick: Hide arrow

---
 components/LaunchPad/Sale/CreateTokenSale.tsx | 1 -
 components/LaunchPad/Sale/ManageTokenSale.tsx | 1 -
 components/LaunchPad/Sale/SearchTable.tsx     | 4 ++--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/LaunchPad/Sale/CreateTokenSale.tsx b/components/LaunchPad/Sale/CreateTokenSale.tsx
index d443fc579..97631819c 100644
--- a/components/LaunchPad/Sale/CreateTokenSale.tsx
+++ b/components/LaunchPad/Sale/CreateTokenSale.tsx
@@ -46,7 +46,6 @@ const columns = [
   {
     id: 'availableBalance',
     label: 'Available Balance',
-    align: 'right',
     format: (value) => value.toLocaleString('en-US')
   }
 ]
diff --git a/components/LaunchPad/Sale/ManageTokenSale.tsx b/components/LaunchPad/Sale/ManageTokenSale.tsx
index ad52dea2f..ae9cdfdc8 100644
--- a/components/LaunchPad/Sale/ManageTokenSale.tsx
+++ b/components/LaunchPad/Sale/ManageTokenSale.tsx
@@ -56,7 +56,6 @@ const columns = [
   {
     id: 'availableBalance',
     label: 'Available Balance',
-    align: 'right',
     format: (value) => value.toLocaleString('en-US')
   }
 ]
diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index bc53e5596..0e62c5c42 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -39,7 +39,7 @@ const SortIcon = styled(Icon)`
 export type TableColumnType = {
   id: string
   label: string
-  align?: string
+  align?: 'left' | 'center' | 'right' | 'justify' | 'inherit'
   minWidth?: number
   format?: (val: number) => string
 }
@@ -152,7 +152,7 @@ export const SearchTable = ({
                     return (
                       <StyledTableCell
                         key={column.id}
-                        align={column.align as 'left' | 'center' | 'right' | 'justify' | 'inherit'}
+                        align={column.align}
                         sx={{
                           color: 'gray.800'
                         }}

From c0f7bd5d562e981091fe6aa02bb12e67c92ddba9 Mon Sep 17 00:00:00 2001
From: Treasurechic <babychic140@gmail.com>
Date: Fri, 3 Mar 2023 16:17:49 +0000
Subject: [PATCH 14/14] :lipstick: Fix sort arrows

---
 components/LaunchPad/Sale/SearchTable.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/LaunchPad/Sale/SearchTable.tsx b/components/LaunchPad/Sale/SearchTable.tsx
index 0e62c5c42..fb9f2dc45 100644
--- a/components/LaunchPad/Sale/SearchTable.tsx
+++ b/components/LaunchPad/Sale/SearchTable.tsx
@@ -128,7 +128,9 @@ export const SearchTable = ({
                     {col.label}
                     <Box component="span">
                       <SortIcon
-                        use={orderBy === col.id && order === 'desc' ? 'sortDesc' : 'sortAsc'}
+                        use={
+                          orderBy !== col.id ? 'sortNone' : order === 'desc' ? 'sortDesc' : 'sortAsc'
+                        }
                         size={0.625}
                       />
                     </Box>