Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #606: Vaults explorer page #611

Merged
merged 7 commits into from
Jul 10, 2024
Merged

Issue #606: Vaults explorer page #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
711f4de
explore page
jahabeebs Jul 3, 2024
2554859
explore page more changes
jahabeebs Jul 4, 2024
d4c5f6f
fix explore page
jahabeebs Jul 4, 2024
e04cc71
more explore page fixes
jahabeebs Jul 5, 2024
dc32ac5
revert yarn lock
jahabeebs Jul 5, 2024
1e00fc1
explore table reorder, external link
jahabeebs Jul 8, 2024
b37525f
add risk status, fix bugs
jahabeebs Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ import { Fuul } from '@fuul/sdk'
import EarnDetails from './containers/Earn/EarnDetails'
import Marketplace from './containers/Marketplace'
import ScreenLoader from '~/components/Modals/ScreenLoader'
import Explore from '~/containers/Explore'

import 'react-loading-skeleton/dist/skeleton.css'

const ToastContainer = lazy(() => import('react-toastify').then((module) => ({ default: module.ToastContainer })))
Expand Down Expand Up @@ -101,6 +103,7 @@ const App = () => {
<Route exact strict component={Marketplace} path={'/marketplace'} />
<Route exact strict component={CreateVault} path={'/vaults/create'} />
<Route exact strict component={Bridge} path={'/bridge'} />
<Route exact strict component={Explore} path={'/explore'} />
<Route
exact
strict
Expand Down
352 changes: 352 additions & 0 deletions src/containers/Explore/ExploreTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
import {
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
getSortedRowModel,
getFilteredRowModel,
SortingState,
ColumnDef,
} from '@tanstack/react-table'
import './index.css'
import styled from 'styled-components'
import Button from '~/components/Button'
import { useState } from 'react'

type Vault = {
id: string
collateral: string
image?: string | any
collateralAmount: string
debtAmount: string
riskStatus: string
actions?: any
}

const riskStatusMapping: { [key: string]: number } = {
NO: 0,
LOW: 1,
ELEVATED: 2,
HIGH: 3,
LIQUIDATION: 4,
}

const parseDebtAmount = (value: string): number => {
return parseFloat(value.replace(/,/g, '').replace(' OD', ''))
}

const columnHelper = createColumnHelper<Vault>()
const columns: ColumnDef<Vault, any>[] = [
columnHelper.accessor('id', {
header: () => 'ID',
cell: (info) => info.getValue(),
sortingFn: 'alphanumeric',
enableSorting: true,
}),
columnHelper.accessor('image', {
header: () => '',
cell: (info) => {
const image = info.row.original.image
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe explorer "row.original"

const vaultID = info.row.original.id
return image ? (
<SVGContainer key={vaultID}>
<SvgWrapper key={vaultID} dangerouslySetInnerHTML={{ __html: image }}></SvgWrapper>
</SVGContainer>
) : null
},
enableSorting: false,
}),
columnHelper.accessor('collateralAmount', {
header: () => 'Collateral Amount',
cell: (info) => info.getValue().toLocaleString(),
sortingFn: (rowA, rowB) => {
const a = rowA.getValue<number>('collateralAmount')
const b = rowB.getValue<number>('collateralAmount')
return a - b
},
filterFn: (row, columnId, filterValue) => {
const value = row.getValue<number>(columnId)
return value.toString().includes(filterValue)
},
}),
columnHelper.accessor('collateral', {
header: () => 'Collateral',
cell: (info) => info.getValue(),
sortingFn: 'alphanumeric',
enableSorting: true,
}),
columnHelper.accessor('debtAmount', {
header: () => 'Debt Amount',
cell: (info) => info.getValue(),
sortingFn: (rowA, rowB) => {
const a = parseDebtAmount(rowA.getValue<string>('debtAmount'))
const b = parseDebtAmount(rowB.getValue<string>('debtAmount'))
return a - b
},
filterFn: (row, columnId, filterValue) => {
const value = parseDebtAmount(row.getValue<string>(columnId))
return value.toString().includes(filterValue)
},
}),
columnHelper.accessor('riskStatus', {
header: () => 'Risk Status',
cell: (info) => info.getValue().toLocaleString(),
sortingFn: (rowA, rowB) => {
const a = riskStatusMapping[rowA.getValue<string>('riskStatus')] || 1
const b = riskStatusMapping[rowB.getValue<string>('riskStatus')] || 1
return a - b
},
filterFn: (row, columnId, filterValue) => {
const value = row.getValue<string>(columnId)
return value.includes(filterValue)
},
}),
columnHelper.accessor('actions', {
header: '',
cell: (info) => {
return (
<ButtonFloat>
<Button
secondary
onClick={() =>
window.location.assign(`https://app.opendollar.com/vaults/${info.row.original.id}`)
}
>
View
</Button>
</ButtonFloat>
)
},
enableSorting: false,
}),
]

const ExploreTable = ({ data }: { data: Vault[] }) => {
const [sorting, setSorting] = useState<SortingState>([])
const [globalFilter, setGlobalFilter] = useState<string>('')

const table = useReactTable({
data: data,
columns,
state: {
sorting,
globalFilter,
},
onSortingChange: setSorting,
onGlobalFilterChange: setGlobalFilter,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
})

return (
<TableContainer>
<input
value={globalFilter ?? ''}
onChange={(e) => setGlobalFilter(String(e.target.value))}
placeholder="Search all columns..."
style={{ marginBottom: '10px', padding: '8px', width: '100%', fontFamily: 'Barlow' }}
/>
<table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder ? null : (
<SortableHeader
onClick={header.column.getToggleSortingHandler()}
style={{ cursor: header.column.getCanSort() ? 'pointer' : 'default' }}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{header.column.getCanSort() ? (
header.column.getIsSorted() ? (
header.column.getIsSorted() === 'asc' ? (
<StyledArrow>▲</StyledArrow>
) : (
<StyledArrow>▼</StyledArrow>
)
) : (
<ArrowUpAndDownIcon>&nbsp;⇅</ArrowUpAndDownIcon>
)
) : null}
</SortableHeader>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => {
const header = cell.column.columnDef.header
let headerText = ''

if (typeof header === 'function') {
// @ts-ignore
const renderedHeader = header(cell.getContext())
if (typeof renderedHeader === 'string') {
headerText = renderedHeader
} else if (
typeof renderedHeader === 'object' &&
renderedHeader.props &&
renderedHeader.props.children
) {
headerText = renderedHeader.props.children
}
} else {
headerText = header ? header.toString() : ''
}

return (
<td key={cell.id} data-label={headerText}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
)
})}
</tr>
))}
</tbody>
</table>
</TableContainer>
)
}

export default ExploreTable

const ArrowUpAndDownIcon = styled.span`
font-size: 15px;
padding-bottom: 4px;
`

const StyledArrow = styled.div`
padding-left: 4px;
`

const SortableHeader = styled.div`
display: flex;
align-items: center;
justify-content: start;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: ${(props) => props.theme.font.xSmall};
`

const TableContainer = styled.div`
overflow-x: auto;
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
padding: 20px;
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
}
th,
td {
padding: 8px 0px;
text-align: left;
}

th {
background-color: #fff;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}

tr {
margin-bottom: 20px;
}

tr:not(:last-child) td {
border-bottom: 1px solid #ddd;
}

@media (max-width: 768px) {
table {
min-width: 100%;
display: block;
overflow-x: auto;
}

thead {
display: none;
}

tbody,
td {
display: block;
width: 100%;
box-sizing: border-box;
}

tr {
display: flex;
flex-direction: column;
margin-bottom: 20px;
border-bottom: 4px solid #ddd;
}

td {
display: flex;
justify-content: space-between;
padding: 10px;
}

td::before {
display: flex;
content: attr(data-label);
left: 10px;
white-space: nowrap;
font-weight: bold;
text-align: left;
}
}
`

const SVGContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 139px;
height: 139px;
position: relative;
margin: 20px 10px 20px 10px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 12px 40px 0 rgba(0, 0, 0, 0.25);

@media (max-width: 768px) {
width: 294px;
height: 294px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
`

const SvgWrapper = styled.div`
transform: scale(0.33);
border-radius: 10px;

@media (max-width: 768px) {
transform: scale(0.7);
}
`

const ButtonFloat = styled.div`
position: relative;
top: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 10px;
border-radius: 5px;
z-index: 2;
button {
margin: 5px;
padding: 5px;
}
`
Loading
Loading