From 711f4de344e2b175d8fae02584049fe5b7316cdc Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Wed, 3 Jul 2024 17:01:43 -0500
Subject: [PATCH 1/7] explore page

---
 src/App.tsx                             |   3 +
 src/containers/Explore/ExplorePage.tsx  | 127 ++++++++++
 src/containers/Explore/ExploreTable.tsx | 293 ++++++++++++++++++++++++
 src/containers/Explore/index.tsx        |  16 ++
 src/utils/helper.ts                     |   2 +-
 yarn.lock                               | 169 ++++++++------
 6 files changed, 533 insertions(+), 77 deletions(-)
 create mode 100644 src/containers/Explore/ExplorePage.tsx
 create mode 100644 src/containers/Explore/ExploreTable.tsx
 create mode 100644 src/containers/Explore/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b79584cc..6a585141 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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 })))
@@ -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
diff --git a/src/containers/Explore/ExplorePage.tsx b/src/containers/Explore/ExplorePage.tsx
new file mode 100644
index 00000000..dcb4f4e1
--- /dev/null
+++ b/src/containers/Explore/ExplorePage.tsx
@@ -0,0 +1,127 @@
+import styled from 'styled-components'
+import { useState, useEffect } from 'react'
+// @ts-ignore
+import { generateSvg } from '@opendollar/svg-generator'
+import ExploreTable from './ExploreTable'
+import { ethers } from 'ethers'
+import { parseRay, formatDataNumber, multiplyRates, transformToAnnualRate } from '~/utils'
+import { GlobalSafeModel } from '~/model/globalSafeModel'
+import { AnalyticsData } from '@opendollar/sdk/lib/virtual/virtualAnalyticsData'
+
+type ExplorePageProps = {
+    globalSafes: GlobalSafeModel
+    analyticsData: AnalyticsData | undefined
+}
+
+const ExplorePage: React.FC<ExplorePageProps> = ({ globalSafes, analyticsData }) => {
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const [tableData, setTableData] = useState([])
+
+    const getSafeData = async () => {
+        setIsLoading(true)
+        const tableRows = []
+
+        if (!globalSafes?.list || !analyticsData?.tokenAnalyticsData) return
+
+        for (const vault of globalSafes.list) {
+            try {
+                const tokenData = analyticsData.tokenAnalyticsData[vault.collateralName]
+
+                if (!tokenData) {
+                    continue
+                }
+
+                const estimatedValue = `${(
+                    +ethers.utils.formatUnits(vault.collateral) * +ethers.utils.formatUnits(tokenData.currentPrice)
+                ).toFixed(2)}`
+
+                const stabilityFee = transformToAnnualRate(
+                    multiplyRates(tokenData.stabilityFee.toString(), vault.currentRedemptionRate) || '0',
+                    27
+                )
+
+                const cratio = (+estimatedValue / +formatDataNumber(vault.debt)) * 100
+
+                const svgData = {
+                    vaultID: vault.id,
+                    stabilityFee,
+                    debtAmount: formatDataNumber(vault.debt) + ' OD',
+                    collateralAmount: formatDataNumber(vault.collateral) + ' ' + vault.collateralType,
+                    collateralizationRatio: cratio ?? '∞',
+                    safetyRatio: parseRay(tokenData.safetyCRatio),
+                    liqRatio: parseRay(tokenData.liquidationCRatio),
+                }
+
+                let svg = null
+                try {
+                    svg = await generateSvg(svgData)
+                } catch (e) {
+                    console.error(e)
+                }
+
+                tableRows.push({
+                    id: vault.id,
+                    assetName: vault.collateralType,
+                    image: svg ? svg : null,
+                })
+            } catch (e) {
+                console.error(e)
+            }
+        }
+        // @ts-ignore
+        setTableData(tableRows)
+        setIsLoading(false)
+    }
+
+    useEffect(() => {
+        getSafeData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [globalSafes.list, analyticsData])
+
+    return (
+        <Container>
+            <Header>
+                <Title>Explore Vaults</Title>
+            </Header>
+            {tableData.length !== 0 && <ExploreTable data={tableData} />}
+            {tableData.length === 0 && isLoading && <p>Loading...</p>}
+            {tableData.length === 0 && !isLoading && <p>No vaults available</p>}
+        </Container>
+    )
+}
+
+export default ExplorePage
+
+const Container = styled.div`
+    max-width: 1362px;
+    margin: 80px auto;
+    padding: 0 15px;
+    @media (max-width: 767px) {
+        margin: 50px auto;
+        display: flex;
+        flex-direction: column;
+    }
+    color: ${(props) => props.theme.colors.accent};
+`
+
+const Title = styled.h2`
+    font-size: 34px;
+    font-weight: 700;
+    font-family: ${(props) => props.theme.family.headers};
+
+    color: ${(props) => props.theme.colors.accent};
+    @media (max-width: 767px) {
+        font-size: 32px;
+    }
+`
+
+const Header = styled.div`
+    display: flex;
+    justify-content: space-between;
+    @media (max-width: 767px) {
+        flex-direction: column;
+        justify-content: left;
+    }
+
+    margin-bottom: 40px;
+`
diff --git a/src/containers/Explore/ExploreTable.tsx b/src/containers/Explore/ExploreTable.tsx
new file mode 100644
index 00000000..be05b2bf
--- /dev/null
+++ b/src/containers/Explore/ExploreTable.tsx
@@ -0,0 +1,293 @@
+import {
+    createColumnHelper,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getSortedRowModel,
+    getFilteredRowModel,
+    SortingState,
+} from '@tanstack/react-table'
+import styled from 'styled-components'
+import Button from '~/components/Button'
+import { useState } from 'react'
+
+type Vault = {
+    id: string
+    assetName: string
+    image?: string | any
+    actions?: any
+}
+
+const columnHelper = createColumnHelper<Vault>()
+const columns = [
+    columnHelper.accessor('image', {
+        header: () => '',
+        cell: (info) => {
+            const image = info.row.original.image
+            return image ? (
+                <SVGContainer>
+                    <SvgWrapper dangerouslySetInnerHTML={{ __html: image }}></SvgWrapper>
+                </SVGContainer>
+            ) : null
+        },
+        enableSorting: false,
+    }),
+    columnHelper.accessor('id', {
+        header: () => 'ID',
+        cell: (info) => info.getValue(),
+        sortingFn: 'alphanumeric',
+    }),
+    columnHelper.accessor('assetName', {
+        header: () => 'Asset Name',
+        cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor('actions', {
+        header: '',
+        cell: (info) => {
+            return (
+                <ButtonFloat>
+                    <Button
+                        secondary
+                        onClick={() =>
+                            window.open(`https://app.opendollar.com/vaults/${info.row.original.id}`, '_blank')
+                        }
+                    >
+                        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 {
+            margin-bottom: 20px;
+            border-bottom: 4px solid #ddd;
+        }
+
+        td {
+            text-align: right;
+            position: relative;
+            padding-left: 40%;
+            text-align: left;
+            &:nth-child(1),
+            &:last-child {
+                padding-left: 0;
+                display: flex;
+                justify-content: center;
+            }
+        }
+
+        td::before {
+            content: attr(data-label);
+            position: absolute;
+            left: 10px;
+            width: calc(50% - 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;
+    }
+`
+
+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;
+    }
+`
diff --git a/src/containers/Explore/index.tsx b/src/containers/Explore/index.tsx
new file mode 100644
index 00000000..f5e6ee70
--- /dev/null
+++ b/src/containers/Explore/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useStoreState } from '~/store'
+import useAnalyticsData from '~/hooks/useAnalyticsData'
+import ExplorePage from './ExplorePage'
+
+const Explore: React.FC = () => {
+    const { globalSafeModel } = useStoreState((state) => state)
+    const analyticsData = useAnalyticsData()
+
+    return (
+        //@ts-ignore
+        <ExplorePage globalSafes={globalSafeModel} analyticsData={analyticsData} />
+    )
+}
+
+export default Explore
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 950692f7..65d42d5e 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -127,7 +127,7 @@ export const toFixedString = (value: string, type: keyof typeof floatsTypes = 'W
     }
 }
 
-const getBytes32String = (collateralType: string, tokensData: { [key: string]: TokenData }): string | null => {
+export const getBytes32String = (collateralType: string, tokensData: { [key: string]: TokenData }): string | null => {
     const token = Object.values(tokensData).find(
         (token) => token.symbol === collateralType || token.bytes32String === collateralType
     )
diff --git a/yarn.lock b/yarn.lock
index a0afed32..b7ed6484 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2912,39 +2912,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.0.0":
-  version: 1.6.3
-  resolution: "@floating-ui/core@npm:1.6.3"
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.4
+  resolution: "@floating-ui/core@npm:1.6.4"
   dependencies:
-    "@floating-ui/utils": ^0.2.3
-  checksum: ae9335ad78563f579d307b72563e1fcd70fe98db04cdf1b63cf8fb5354cf3d49157d51d614c5ae7cd1d825864a7ed0c96be8f801be8b7e3a70fa8b9ae1b7805b
+    "@floating-ui/utils": ^0.2.4
+  checksum: 545684b6f76cda7579b6049bafb9903542d3f9c177300192fe83db19d99b1df285bc33aba3b8ec2978d021151c4168356876e8181002dd2ff4fb93d9e4b7bf71
   languageName: node
   linkType: hard
 
 "@floating-ui/dom@npm:^1.6.1":
-  version: 1.6.6
-  resolution: "@floating-ui/dom@npm:1.6.6"
+  version: 1.6.7
+  resolution: "@floating-ui/dom@npm:1.6.7"
   dependencies:
-    "@floating-ui/core": ^1.0.0
-    "@floating-ui/utils": ^0.2.3
-  checksum: ea7c24510fc1ad5a6a5f511864a8e4b2e51f184589fa1b71c09bf43f3d78433760f3c21bf48008674fc902f4c4aaf7095e3a5360a62f9cbde88c70809ca118d0
+    "@floating-ui/core": ^1.6.0
+    "@floating-ui/utils": ^0.2.4
+  checksum: 5255f522534e0022b554c366b969fa26951677a1cf39ddd58614071a909a340c5e1ffe645501037b221808f01bfac4e7edba14728978ee7e2438e8432c1a163f
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "@floating-ui/utils@npm:0.2.3"
-  checksum: 7a2dac793cd99f05fde2d597cb434f1caa8b59563618453e1b8ac0ebb811e3627aaded16f3efd6d6e535f7448d590d38f9993be37adea258f3b9f826a6c96b2b
+"@floating-ui/utils@npm:^0.2.4":
+  version: 0.2.4
+  resolution: "@floating-ui/utils@npm:0.2.4"
+  checksum: 154924b01157cb45cf305f4835d7f603e931dda8b00bbe52666729bccc5e7b99630e8b951333725e526d4e53d9b342976434ad5750b8b1da58728e3698bdcc2b
   languageName: node
   linkType: hard
 
 "@fuul/sdk@npm:^4.7.1":
-  version: 4.7.4
-  resolution: "@fuul/sdk@npm:4.7.4"
+  version: 4.9.0
+  resolution: "@fuul/sdk@npm:4.9.0"
   dependencies:
     axios: ^1.2.2
     nanoid: ^4.0.0
-  checksum: 0351e5f52733dcc12f1f8f28c75289a36387721b64f7425e2e33c7e6c438e04af56c207e3bded8799c12500a4584be7070e26d559351dbdb8b28072678b16a0f
+  checksum: 9f0a97221de75aebe4ebaeaaa9203538916fac2501cfb6b0f621fa57681055ed39cc45c027fdd90a9648fc3b86356515b1f992257b48546388f2eda93f5a3fb2
   languageName: node
   linkType: hard
 
@@ -3413,12 +3413,12 @@ __metadata:
   linkType: hard
 
 "@metamask/rpc-errors@npm:^6.2.1":
-  version: 6.3.0
-  resolution: "@metamask/rpc-errors@npm:6.3.0"
+  version: 6.3.1
+  resolution: "@metamask/rpc-errors@npm:6.3.1"
   dependencies:
-    "@metamask/utils": ^8.3.0
+    "@metamask/utils": ^9.0.0
     fast-safe-stringify: ^2.0.6
-  checksum: ba11083b1bce84bd3f420a83e28337ce58c7773237558280057eeb19415b83fd7bac5148351f3e56bd8fa0621da3ddad0231a85fc11a5a281820fc0e99cf977a
+  checksum: 0ca1f8b138ef9352310befeae194d248fec75ccdd0442369369fb1003316679088dc142e2766b95e2c181ff6dc8786fd7371123d8860e022ec5e420ce05e7496
   languageName: node
   linkType: hard
 
@@ -3436,7 +3436,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/superstruct@npm:^3.0.0":
+"@metamask/superstruct@npm:^3.0.0, @metamask/superstruct@npm:^3.1.0":
   version: 3.1.0
   resolution: "@metamask/superstruct@npm:3.1.0"
   checksum: 8820e76582b3d735a2142c878ac4830d962f7a9c0776cb31bafdff646ff701657b9be192601d7f96834c3a8edd87677650f5bfa1a29d945e8dbc77a8d788b3fc
@@ -3473,6 +3473,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/utils@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@metamask/utils@npm:9.0.0"
+  dependencies:
+    "@ethereumjs/tx": ^4.2.0
+    "@metamask/superstruct": ^3.1.0
+    "@noble/hashes": ^1.3.1
+    "@scure/base": ^1.1.3
+    "@types/debug": ^4.1.7
+    debug: ^4.3.4
+    pony-cause: ^2.1.10
+    semver: ^7.5.4
+    uuid: ^9.0.1
+  checksum: 916070ed8536b75fb6c5fad3caf8604bd75781db77d899d9d25bbfbd12f4e1fb8471ff87feaf82bcf9e872978ce908e7ec50b755fc68e9ce5e504f3477d305f0
+  languageName: node
+  linkType: hard
+
 "@motionone/animation@npm:^10.15.1, @motionone/animation@npm:^10.18.0":
   version: 10.18.0
   resolution: "@motionone/animation@npm:10.18.0"
@@ -3576,12 +3593,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/curves@npm:1.4.0, @noble/curves@npm:~1.4.0":
-  version: 1.4.0
-  resolution: "@noble/curves@npm:1.4.0"
+"@noble/curves@npm:1.4.2, @noble/curves@npm:~1.4.0":
+  version: 1.4.2
+  resolution: "@noble/curves@npm:1.4.2"
   dependencies:
     "@noble/hashes": 1.4.0
-  checksum: 31fbc370df91bcc5a920ca3f2ce69c8cf26dc94775a36124ed8a5a3faf0453badafd2ee4337061ffea1b43c623a90ee8b286a5a81604aaf9563bdad7ff795d18
+  checksum: 65620c895b15d46e8087939db6657b46a1a15cd4e0e4de5cd84b97a0dfe0af85f33a431bb21ac88267e3dc508618245d4cb564213959d66a84d690fe18a63419
   languageName: node
   linkType: hard
 
@@ -4721,21 +4738,21 @@ __metadata:
   linkType: hard
 
 "@tanstack/react-table@npm:^8.17.3":
-  version: 8.17.3
-  resolution: "@tanstack/react-table@npm:8.17.3"
+  version: 8.19.2
+  resolution: "@tanstack/react-table@npm:8.19.2"
   dependencies:
-    "@tanstack/table-core": 8.17.3
+    "@tanstack/table-core": 8.19.2
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: d1ab321f189f1c7e20336c0516f8155a3d46aea74cc7ec849239b7323cf3e4fe919585489de3512eab36fceb7c4eae245e58235e6fcb5f112379411d801605fd
+  checksum: 6941e12cdb907709d6a2b919efb2daae01348eb3cc964fb437a7725461fc306375604ac83e09ea4dc793e34075b8b69a89b7bfd182b4762b711db2a721c21139
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.17.3":
-  version: 8.17.3
-  resolution: "@tanstack/table-core@npm:8.17.3"
-  checksum: e45f0f74b645689c762dd8c1042726d804726a488130fb2d36e24384bd813a601ed4d20abff3b4ba1bb1a648d14029f65d7fa8728099e0fd9f2702b51dc586c2
+"@tanstack/table-core@npm:8.19.2":
+  version: 8.19.2
+  resolution: "@tanstack/table-core@npm:8.19.2"
+  checksum: f09f1b4860899466f106fd5b89faf465f0d5210416505d0d6a6641025da05dec7f8eb193ca98d204288f05eb2b617497e0cd9e274ead3f504391749696cfcd3f
   languageName: node
   linkType: hard
 
@@ -6422,11 +6439,11 @@ __metadata:
   linkType: hard
 
 "acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
-  version: 8.12.0
-  resolution: "acorn@npm:8.12.0"
+  version: 8.12.1
+  resolution: "acorn@npm:8.12.1"
   bin:
     acorn: bin/acorn
-  checksum: a19f9dead009d3b430fa3c253710b47778cdaace15b316de6de93a68c355507bc1072a9956372b6c990cbeeb167d4a929249d0faeb8ae4bb6911d68d53299549
+  checksum: 51fb26cd678f914e13287e886da2d7021f8c2bc0ccc95e03d3e0447ee278dd3b40b9c57dc222acd5881adcf26f3edc40901a4953403232129e3876793cd17386
   languageName: node
   linkType: hard
 
@@ -7673,9 +7690,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629":
-  version: 1.0.30001638
-  resolution: "caniuse-lite@npm:1.0.30001638"
-  checksum: 33019e0c53ed73f1e728b6f313efed2d7a25710dfa2ad3924d2be9939df10d0991556ac87523d3177d472c246654c9216f03e5532717ed97df58014728c3e798
+  version: 1.0.30001640
+  resolution: "caniuse-lite@npm:1.0.30001640"
+  checksum: d87fce999e52c354029893a23887d2e48ac297e3af55bd14161fcafdd711f97bdb2649c79d2d3049e628603cb59bc4257ca2961644b0b8d206e7b7dd126d37ea
   languageName: node
   linkType: hard
 
@@ -8754,8 +8771,8 @@ __metadata:
   linkType: hard
 
 "cypress@npm:*, cypress@npm:^13.6.4":
-  version: 13.12.0
-  resolution: "cypress@npm:13.12.0"
+  version: 13.13.0
+  resolution: "cypress@npm:13.13.0"
   dependencies:
     "@cypress/request": ^3.0.0
     "@cypress/xvfb": ^1.2.4
@@ -8796,12 +8813,12 @@ __metadata:
     request-progress: ^3.0.0
     semver: ^7.5.3
     supports-color: ^8.1.1
-    tmp: ~0.2.1
+    tmp: ~0.2.3
     untildify: ^4.0.0
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: a9f74ce07b8d9d8058e4909ac3824d3d8a09af6f92eb4b69bce0892765ceeeac77094976e41a2a31e5138b6e43c2e5f1fb6fb54fbf9fa1bab957b465f5517540
+  checksum: 732533a3d783ca98763643307ec519d8006528c38af98be4e3880583a15bd4bb1ccaf5eed5d68f61ecf4d5f887211fec82b25bb3c0fee959707c87bc7a2684a2
   languageName: node
   linkType: hard
 
@@ -9426,9 +9443,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.796":
-  version: 1.4.814
-  resolution: "electron-to-chromium@npm:1.4.814"
-  checksum: 1e757252840a39ebf77b56e2b0adede1fb3f130b8318bdfcc81361b6da9137daeb4c6886a3a63ebfbfdd37fce60ec35795a2adaa250568895784475fba76a446
+  version: 1.4.816
+  resolution: "electron-to-chromium@npm:1.4.816"
+  checksum: 1a84bc42234484cbc5e8b521de57fd3ab9984a2111d8605eab26b3525f382c0c7b83b45bf8b34e5fa4a730cd183fef5dffa4a0627754c7f4fb0aae9cb3c16b37
   languageName: node
   linkType: hard
 
@@ -10328,14 +10345,14 @@ __metadata:
   linkType: hard
 
 "ethereum-cryptography@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "ethereum-cryptography@npm:2.2.0"
+  version: 2.2.1
+  resolution: "ethereum-cryptography@npm:2.2.1"
   dependencies:
-    "@noble/curves": 1.4.0
+    "@noble/curves": 1.4.2
     "@noble/hashes": 1.4.0
     "@scure/bip32": 1.4.0
     "@scure/bip39": 1.3.0
-  checksum: 766939345c39936f32929fae101a91f009f5e28261578d44e7a224dbb70827feebb5135013e81fc39bdcf8d70b321e92b4243670f0947e73add8ae5158717b84
+  checksum: c6c7626d393980577b57f709878b2eb91f270fe56116044b1d7afb70d5c519cddc0c072e8c05e4a335e05342eb64d9c3ab39d52f78bb75f76ad70817da9645ef
   languageName: node
   linkType: hard
 
@@ -10984,9 +11001,9 @@ __metadata:
   linkType: hard
 
 "forge-std@git+https://github.com/foundry-rs/forge-std.git":
-  version: 1.8.2
-  resolution: "forge-std@https://github.com/foundry-rs/forge-std.git#commit=75b3fcf052cc7886327e4c2eac3d1a1f36942b41"
-  checksum: b2d1b2ba0de503564530597975650c8ef455f5f1f271590371d0c8f0b0adc2392eccaff5e999621f1dcb60ab4cdb06c4e4dbf02ca85de9b700287f2a8bed2373
+  version: 1.9.1
+  resolution: "forge-std@https://github.com/foundry-rs/forge-std.git#commit=07263d193d621c4b2b0ce8b4d54af58f6957d97d"
+  checksum: 80c25c66d050bd229ee2256cfa87cdb8952cdd3798c66729ebad8ac6cdeeb0e86981708752fc6678f3f6ae004056f8d696f6ef1df3a7ddfed9e0d6d99806c992
   languageName: node
   linkType: hard
 
@@ -14563,7 +14580,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mlly@npm:^1.6.1, mlly@npm:^1.7.0":
+"mlly@npm:^1.6.1, mlly@npm:^1.7.1":
   version: 1.7.1
   resolution: "mlly@npm:1.7.1"
   dependencies:
@@ -15584,13 +15601,13 @@ __metadata:
   linkType: hard
 
 "pkg-types@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "pkg-types@npm:1.1.1"
+  version: 1.1.3
+  resolution: "pkg-types@npm:1.1.3"
   dependencies:
     confbox: ^0.1.7
-    mlly: ^1.7.0
+    mlly: ^1.7.1
     pathe: ^1.1.2
-  checksum: c7d167935de7207479e5829086040d70bea289f31fc1331f17c83e996a4440115c9deba2aa96de839ea66e1676d083c9ca44b33886f87bffa6b49740b67b6fcb
+  checksum: 4cd2c9442dd5e4ae0c61cbd8fdaa92a273939749b081f78150ce9a3f4e625cca0375607386f49f103f0720b239d02369bf181c3ea6c80cf1028a633df03706ad
   languageName: node
   linkType: hard
 
@@ -16464,20 +16481,20 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.3.5, postcss@npm:^8.4.23, postcss@npm:^8.4.33, postcss@npm:^8.4.4":
-  version: 8.4.38
-  resolution: "postcss@npm:8.4.38"
+  version: 8.4.39
+  resolution: "postcss@npm:8.4.39"
   dependencies:
     nanoid: ^3.3.7
-    picocolors: ^1.0.0
+    picocolors: ^1.0.1
     source-map-js: ^1.2.0
-  checksum: 955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
+  checksum: 16f5ac3c4e32ee76d1582b3c0dcf1a1fdb91334a45ad755eeb881ccc50318fb8d64047de4f1601ac96e30061df203f0f2e2edbdc0bfc49b9c57bc9fb9bedaea3
   languageName: node
   linkType: hard
 
 "preact@npm:^10.16.0, preact@npm:^10.5.9":
-  version: 10.22.0
-  resolution: "preact@npm:10.22.0"
-  checksum: dc5466c5968c56997e917580c00983cec2f6486a89ea9ba29f1bb88dcfd2f9ff67c8d561a69a1b3acdab17f2bb36b311fef0c348b62e89c332d00c674f7871f0
+  version: 10.22.1
+  resolution: "preact@npm:10.22.1"
+  checksum: 9163b97d6fc0ce6b945ed77695d00c4fa07e317d0723e7b9d10c748153d30596abab8b26861ae45591e47bff25515da91406ce7f1c9e66cd9cac7e7f6c927930
   languageName: node
   linkType: hard
 
@@ -17207,15 +17224,15 @@ __metadata:
   linkType: hard
 
 "react-tooltip@npm:^5.21.1":
-  version: 5.27.0
-  resolution: "react-tooltip@npm:5.27.0"
+  version: 5.27.1
+  resolution: "react-tooltip@npm:5.27.1"
   dependencies:
     "@floating-ui/dom": ^1.6.1
     classnames: ^2.3.0
   peerDependencies:
     react: ">=16.14.0"
     react-dom: ">=16.14.0"
-  checksum: 4b105dcef7b3d166e359b97fdbbef9c622de3c91e3c9387f959495c66d4caefb25e38cd75e0258dac104c3814c0ae74b97807382d36f45dfae6200645bafd3a3
+  checksum: 5ffba1bb0e9cf4f0b1576657a4500c911a1a18efc452f0d73e5696ac761968df712ea504d4ac9520159c9f32516305c48830b9767eb93528edd400d64f48c5c4
   languageName: node
   linkType: hard
 
@@ -19217,7 +19234,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tmp@npm:~0.2.1":
+"tmp@npm:~0.2.3":
   version: 0.2.3
   resolution: "tmp@npm:0.2.3"
   checksum: 3e809d9c2f46817475b452725c2aaa5d11985cf18d32a7a970ff25b568438e2c076c2e8609224feef3b7923fa9749b74428e3e634f6b8e520c534eef2fd24125
@@ -19938,8 +19955,8 @@ __metadata:
   linkType: hard
 
 "update-browserslist-db@npm:^1.0.16":
-  version: 1.0.16
-  resolution: "update-browserslist-db@npm:1.0.16"
+  version: 1.1.0
+  resolution: "update-browserslist-db@npm:1.1.0"
   dependencies:
     escalade: ^3.1.2
     picocolors: ^1.0.1
@@ -19947,7 +19964,7 @@ __metadata:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 5995399fc202adbb51567e4810e146cdf7af630a92cc969365a099150cb00597e425cc14987ca7080b09a4d0cfd2a3de53fbe72eebff171aed7f9bb81f9bf405
+  checksum: a7452de47785842736fb71547651c5bbe5b4dc1e3722ccf48a704b7b34e4dcf633991eaa8e4a6a517ffb738b3252eede3773bef673ef9021baa26b056d63a5b9
   languageName: node
   linkType: hard
 
@@ -20925,8 +20942,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.13.0":
-  version: 8.17.1
-  resolution: "ws@npm:8.17.1"
+  version: 8.18.0
+  resolution: "ws@npm:8.18.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -20935,7 +20952,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: f4a49064afae4500be772abdc2211c8518f39e1c959640457dcee15d4488628620625c783902a52af2dd02f68558da2868fd06e6fd0e67ebcd09e6881b1b5bfe
+  checksum: 25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06
   languageName: node
   linkType: hard
 

From 2554859e1983577d0fc34f9ff7e65c4d750d11b4 Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Wed, 3 Jul 2024 21:29:53 -0500
Subject: [PATCH 2/7] explore page more changes

---
 src/containers/Explore/ExplorePage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/containers/Explore/ExplorePage.tsx b/src/containers/Explore/ExplorePage.tsx
index dcb4f4e1..11a0167e 100644
--- a/src/containers/Explore/ExplorePage.tsx
+++ b/src/containers/Explore/ExplorePage.tsx
@@ -32,21 +32,21 @@ const ExplorePage: React.FC<ExplorePageProps> = ({ globalSafes, analyticsData })
                 }
 
                 const estimatedValue = `${(
-                    +ethers.utils.formatUnits(vault.collateral) * +ethers.utils.formatUnits(tokenData.currentPrice)
+                    +ethers.utils.formatUnits(Math.trunc(Number(vault.collateral)).toString()) * +ethers.utils.formatUnits(tokenData.currentPrice)
                 ).toFixed(2)}`
 
                 const stabilityFee = transformToAnnualRate(
-                    multiplyRates(tokenData.stabilityFee.toString(), vault.currentRedemptionRate) || '0',
+                    multiplyRates(tokenData.stabilityFee.toString(), Math.trunc(Number(vault.currentRedemptionRate)).toString()) || '0',
                     27
                 )
 
-                const cratio = (+estimatedValue / +formatDataNumber(vault.debt)) * 100
+                const cratio = (+estimatedValue / +formatDataNumber(Math.trunc(Number(vault.debt)).toString())) * 100
 
                 const svgData = {
                     vaultID: vault.id,
                     stabilityFee,
-                    debtAmount: formatDataNumber(vault.debt) + ' OD',
-                    collateralAmount: formatDataNumber(vault.collateral) + ' ' + vault.collateralType,
+                    debtAmount: formatDataNumber(Number(vault.debt).toString()) + ' OD',
+                    collateralAmount: formatDataNumber(Math.trunc(Number(vault.collateral)).toString()) + ' ' + vault.collateralType,
                     collateralizationRatio: cratio ?? '∞',
                     safetyRatio: parseRay(tokenData.safetyCRatio),
                     liqRatio: parseRay(tokenData.liquidationCRatio),

From d4c5f6fbe3f36484580579e3ca50604079966180 Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Wed, 3 Jul 2024 22:05:32 -0500
Subject: [PATCH 3/7] fix explore page

---
 src/containers/Explore/ExplorePage.tsx  | 35 +++++++++++------------
 src/containers/Explore/ExploreTable.tsx | 26 +++++++++--------
 src/containers/Explore/index.css        | 38 +++++++++++++++++++++++++
 src/containers/Explore/index.tsx        |  9 ++----
 4 files changed, 71 insertions(+), 37 deletions(-)
 create mode 100644 src/containers/Explore/index.css

diff --git a/src/containers/Explore/ExplorePage.tsx b/src/containers/Explore/ExplorePage.tsx
index 11a0167e..9dbf6ee9 100644
--- a/src/containers/Explore/ExplorePage.tsx
+++ b/src/containers/Explore/ExplorePage.tsx
@@ -5,15 +5,8 @@ import { generateSvg } from '@opendollar/svg-generator'
 import ExploreTable from './ExploreTable'
 import { ethers } from 'ethers'
 import { parseRay, formatDataNumber, multiplyRates, transformToAnnualRate } from '~/utils'
-import { GlobalSafeModel } from '~/model/globalSafeModel'
-import { AnalyticsData } from '@opendollar/sdk/lib/virtual/virtualAnalyticsData'
 
-type ExplorePageProps = {
-    globalSafes: GlobalSafeModel
-    analyticsData: AnalyticsData | undefined
-}
-
-const ExplorePage: React.FC<ExplorePageProps> = ({ globalSafes, analyticsData }) => {
+const ExplorePage: React.FC<any> = ({ globalSafes, analyticsData }) => {
     const [isLoading, setIsLoading] = useState<boolean>(true)
     const [tableData, setTableData] = useState([])
 
@@ -21,35 +14,39 @@ const ExplorePage: React.FC<ExplorePageProps> = ({ globalSafes, analyticsData })
         setIsLoading(true)
         const tableRows = []
 
-        if (!globalSafes?.list || !analyticsData?.tokenAnalyticsData) return
+        if (!globalSafes.vaults || !analyticsData?.tokenAnalyticsData) return
 
-        for (const vault of globalSafes.list) {
+        for (const vault of globalSafes.vaults) {
             try {
-                const tokenData = analyticsData.tokenAnalyticsData[vault.collateralName]
+                const tokenData = analyticsData.tokenAnalyticsData[vault.collateralType]
 
                 if (!tokenData) {
                     continue
                 }
 
                 const estimatedValue = `${(
-                    +ethers.utils.formatUnits(Math.trunc(Number(vault.collateral)).toString()) * +ethers.utils.formatUnits(tokenData.currentPrice)
+                    +ethers.utils.formatUnits(vault.collateral) *
+                    +ethers.utils.formatUnits(analyticsData.tokenAnalyticsData[vault.collateralType].currentPrice)
                 ).toFixed(2)}`
 
                 const stabilityFee = transformToAnnualRate(
-                    multiplyRates(tokenData.stabilityFee.toString(), Math.trunc(Number(vault.currentRedemptionRate)).toString()) || '0',
+                    multiplyRates(
+                        analyticsData.tokenAnalyticsData[vault.collateralType].stabilityFee.toString(),
+                        analyticsData.redemptionRate?.toString()
+                    ) || '0',
                     27
                 )
 
-                const cratio = (+estimatedValue / +formatDataNumber(Math.trunc(Number(vault.debt)).toString())) * 100
+                const cratio = (+estimatedValue / +formatDataNumber(vault.debt)) * 100
 
                 const svgData = {
                     vaultID: vault.id,
                     stabilityFee,
-                    debtAmount: formatDataNumber(Number(vault.debt).toString()) + ' OD',
-                    collateralAmount: formatDataNumber(Math.trunc(Number(vault.collateral)).toString()) + ' ' + vault.collateralType,
+                    debtAmount: formatDataNumber(vault.debt) + ' OD',
+                    collateralAmount: formatDataNumber(vault.collateral) + ' ' + vault.collateralType,
                     collateralizationRatio: cratio ?? '∞',
-                    safetyRatio: parseRay(tokenData.safetyCRatio),
-                    liqRatio: parseRay(tokenData.liquidationCRatio),
+                    safetyRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].safetyCRatio),
+                    liqRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].liquidationCRatio),
                 }
 
                 let svg = null
@@ -76,7 +73,7 @@ const ExplorePage: React.FC<ExplorePageProps> = ({ globalSafes, analyticsData })
     useEffect(() => {
         getSafeData()
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [globalSafes.list, analyticsData])
+    }, [globalSafes.vaults, analyticsData])
 
     return (
         <Container>
diff --git a/src/containers/Explore/ExploreTable.tsx b/src/containers/Explore/ExploreTable.tsx
index be05b2bf..3256e995 100644
--- a/src/containers/Explore/ExploreTable.tsx
+++ b/src/containers/Explore/ExploreTable.tsx
@@ -7,6 +7,7 @@ import {
     getFilteredRowModel,
     SortingState,
 } from '@tanstack/react-table'
+import './index.css'
 import styled from 'styled-components'
 import Button from '~/components/Button'
 import { useState } from 'react'
@@ -223,28 +224,22 @@ const TableContainer = styled.div`
         }
 
         tr {
+            display: flex;
+            flex-direction: column;
             margin-bottom: 20px;
             border-bottom: 4px solid #ddd;
         }
 
         td {
-            text-align: right;
-            position: relative;
-            padding-left: 40%;
-            text-align: left;
-            &:nth-child(1),
-            &:last-child {
-                padding-left: 0;
-                display: flex;
-                justify-content: center;
-            }
+            display: flex;
+            justify-content: space-between;
+            padding: 10px;
         }
 
         td::before {
+            display: flex;
             content: attr(data-label);
-            position: absolute;
             left: 10px;
-            width: calc(50% - 10px);
             white-space: nowrap;
             font-weight: bold;
             text-align: left;
@@ -261,15 +256,22 @@ const SVGContainer = styled.div`
     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);
+    background-color: transparent; /* Ensure the background is transparent */
+
     @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;
+    background-color: transparent; /* Ensure the background is transparent */
+
     @media (max-width: 768px) {
         transform: scale(0.7);
     }
diff --git a/src/containers/Explore/index.css b/src/containers/Explore/index.css
new file mode 100644
index 00000000..3978e6d9
--- /dev/null
+++ b/src/containers/Explore/index.css
@@ -0,0 +1,38 @@
+html {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 18px;
+}
+
+table {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 4px;
+
+}
+
+th {
+    padding: 20px;
+    text-align: left;
+    font-family: 'Barlow', sans-serif;
+    text-transform: uppercase;
+    border-bottom: 1px solid #b6c7d3cc;
+    white-space: nowrap;
+
+    &:first-child {
+        /* width: 150px; */
+    }
+
+    &:not(:first-child) {
+        /* text-align: right; */
+    }
+}
+
+td {
+    padding: 20px;
+    text-transform: capitalize;
+    text-decoration: none;
+
+    &:not(:first-child) {
+        /* text-align: right; */
+    }
+}
diff --git a/src/containers/Explore/index.tsx b/src/containers/Explore/index.tsx
index f5e6ee70..aefaaf68 100644
--- a/src/containers/Explore/index.tsx
+++ b/src/containers/Explore/index.tsx
@@ -1,16 +1,13 @@
 import React from 'react'
-import { useStoreState } from '~/store'
 import useAnalyticsData from '~/hooks/useAnalyticsData'
 import ExplorePage from './ExplorePage'
+import { useVaultSubgraph } from '~/hooks/useVaultSubgraph'
 
 const Explore: React.FC = () => {
-    const { globalSafeModel } = useStoreState((state) => state)
+    const allVaults = useVaultSubgraph()
     const analyticsData = useAnalyticsData()
 
-    return (
-        //@ts-ignore
-        <ExplorePage globalSafes={globalSafeModel} analyticsData={analyticsData} />
-    )
+    return <ExplorePage globalSafes={allVaults} analyticsData={analyticsData} />
 }
 
 export default Explore

From e04cc7139b0d081b5324316cc915ef4fa85bc161 Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Fri, 5 Jul 2024 17:45:16 -0500
Subject: [PATCH 4/7] more explore page fixes

---
 src/containers/Explore/ExplorePage.tsx  | 124 ----------------------
 src/containers/Explore/ExploreTable.tsx |  51 +++++++--
 src/containers/Explore/index.tsx        | 132 ++++++++++++++++++++++--
 src/hooks/useVaultSubgraph.ts           |  15 ++-
 4 files changed, 182 insertions(+), 140 deletions(-)
 delete mode 100644 src/containers/Explore/ExplorePage.tsx

diff --git a/src/containers/Explore/ExplorePage.tsx b/src/containers/Explore/ExplorePage.tsx
deleted file mode 100644
index 9dbf6ee9..00000000
--- a/src/containers/Explore/ExplorePage.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import styled from 'styled-components'
-import { useState, useEffect } from 'react'
-// @ts-ignore
-import { generateSvg } from '@opendollar/svg-generator'
-import ExploreTable from './ExploreTable'
-import { ethers } from 'ethers'
-import { parseRay, formatDataNumber, multiplyRates, transformToAnnualRate } from '~/utils'
-
-const ExplorePage: React.FC<any> = ({ globalSafes, analyticsData }) => {
-    const [isLoading, setIsLoading] = useState<boolean>(true)
-    const [tableData, setTableData] = useState([])
-
-    const getSafeData = async () => {
-        setIsLoading(true)
-        const tableRows = []
-
-        if (!globalSafes.vaults || !analyticsData?.tokenAnalyticsData) return
-
-        for (const vault of globalSafes.vaults) {
-            try {
-                const tokenData = analyticsData.tokenAnalyticsData[vault.collateralType]
-
-                if (!tokenData) {
-                    continue
-                }
-
-                const estimatedValue = `${(
-                    +ethers.utils.formatUnits(vault.collateral) *
-                    +ethers.utils.formatUnits(analyticsData.tokenAnalyticsData[vault.collateralType].currentPrice)
-                ).toFixed(2)}`
-
-                const stabilityFee = transformToAnnualRate(
-                    multiplyRates(
-                        analyticsData.tokenAnalyticsData[vault.collateralType].stabilityFee.toString(),
-                        analyticsData.redemptionRate?.toString()
-                    ) || '0',
-                    27
-                )
-
-                const cratio = (+estimatedValue / +formatDataNumber(vault.debt)) * 100
-
-                const svgData = {
-                    vaultID: vault.id,
-                    stabilityFee,
-                    debtAmount: formatDataNumber(vault.debt) + ' OD',
-                    collateralAmount: formatDataNumber(vault.collateral) + ' ' + vault.collateralType,
-                    collateralizationRatio: cratio ?? '∞',
-                    safetyRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].safetyCRatio),
-                    liqRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].liquidationCRatio),
-                }
-
-                let svg = null
-                try {
-                    svg = await generateSvg(svgData)
-                } catch (e) {
-                    console.error(e)
-                }
-
-                tableRows.push({
-                    id: vault.id,
-                    assetName: vault.collateralType,
-                    image: svg ? svg : null,
-                })
-            } catch (e) {
-                console.error(e)
-            }
-        }
-        // @ts-ignore
-        setTableData(tableRows)
-        setIsLoading(false)
-    }
-
-    useEffect(() => {
-        getSafeData()
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [globalSafes.vaults, analyticsData])
-
-    return (
-        <Container>
-            <Header>
-                <Title>Explore Vaults</Title>
-            </Header>
-            {tableData.length !== 0 && <ExploreTable data={tableData} />}
-            {tableData.length === 0 && isLoading && <p>Loading...</p>}
-            {tableData.length === 0 && !isLoading && <p>No vaults available</p>}
-        </Container>
-    )
-}
-
-export default ExplorePage
-
-const Container = styled.div`
-    max-width: 1362px;
-    margin: 80px auto;
-    padding: 0 15px;
-    @media (max-width: 767px) {
-        margin: 50px auto;
-        display: flex;
-        flex-direction: column;
-    }
-    color: ${(props) => props.theme.colors.accent};
-`
-
-const Title = styled.h2`
-    font-size: 34px;
-    font-weight: 700;
-    font-family: ${(props) => props.theme.family.headers};
-
-    color: ${(props) => props.theme.colors.accent};
-    @media (max-width: 767px) {
-        font-size: 32px;
-    }
-`
-
-const Header = styled.div`
-    display: flex;
-    justify-content: space-between;
-    @media (max-width: 767px) {
-        flex-direction: column;
-        justify-content: left;
-    }
-
-    margin-bottom: 40px;
-`
diff --git a/src/containers/Explore/ExploreTable.tsx b/src/containers/Explore/ExploreTable.tsx
index 3256e995..1155a831 100644
--- a/src/containers/Explore/ExploreTable.tsx
+++ b/src/containers/Explore/ExploreTable.tsx
@@ -6,6 +6,7 @@ import {
     getSortedRowModel,
     getFilteredRowModel,
     SortingState,
+    ColumnDef,
 } from '@tanstack/react-table'
 import './index.css'
 import styled from 'styled-components'
@@ -14,20 +15,27 @@ import { useState } from 'react'
 
 type Vault = {
     id: string
-    assetName: string
+    collateral: string
     image?: string | any
+    collateralAmount: string
+    debtAmount: string
     actions?: any
 }
 
+const parseDebtAmount = (value: string): number => {
+    return parseFloat(value.replace(/,/g, '').replace(' OD', ''))
+}
+
 const columnHelper = createColumnHelper<Vault>()
-const columns = [
+const columns: ColumnDef<Vault, any>[] = [
     columnHelper.accessor('image', {
         header: () => '',
         cell: (info) => {
             const image = info.row.original.image
+            const vaultID = info.row.original.id
             return image ? (
-                <SVGContainer>
-                    <SvgWrapper dangerouslySetInnerHTML={{ __html: image }}></SvgWrapper>
+                <SVGContainer key={vaultID}>
+                    <SvgWrapper key={vaultID} dangerouslySetInnerHTML={{ __html: image }}></SvgWrapper>
                 </SVGContainer>
             ) : null
         },
@@ -37,10 +45,39 @@ const columns = [
         header: () => 'ID',
         cell: (info) => info.getValue(),
         sortingFn: 'alphanumeric',
+        enableSorting: false,
+    }),
+    columnHelper.accessor('collateral', {
+        header: () => 'Collateral',
+        cell: (info) => info.getValue(),
+        sortingFn: 'alphanumeric',
+        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('assetName', {
-        header: () => 'Asset Name',
+    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('actions', {
         header: '',
@@ -256,7 +293,6 @@ const SVGContainer = styled.div`
     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);
-    background-color: transparent; /* Ensure the background is transparent */
 
     @media (max-width: 768px) {
         width: 294px;
@@ -270,7 +306,6 @@ const SVGContainer = styled.div`
 const SvgWrapper = styled.div`
     transform: scale(0.33);
     border-radius: 10px;
-    background-color: transparent; /* Ensure the background is transparent */
 
     @media (max-width: 768px) {
         transform: scale(0.7);
diff --git a/src/containers/Explore/index.tsx b/src/containers/Explore/index.tsx
index aefaaf68..23d2a348 100644
--- a/src/containers/Explore/index.tsx
+++ b/src/containers/Explore/index.tsx
@@ -1,13 +1,133 @@
-import React from 'react'
+import styled from 'styled-components'
+import { useState, useEffect } from 'react'
+// @ts-ignore
+import { generateSvg } from '@opendollar/svg-generator'
+import ExploreTable from './ExploreTable'
+import { ethers } from 'ethers'
+import { parseRay, formatDataNumber, multiplyRates, transformToAnnualRate } from '~/utils'
+import { AllVaults, useVaultSubgraph } from '~/hooks/useVaultSubgraph'
 import useAnalyticsData from '~/hooks/useAnalyticsData'
-import ExplorePage from './ExplorePage'
-import { useVaultSubgraph } from '~/hooks/useVaultSubgraph'
+import useGeb from '~/hooks/useGeb'
 
-const Explore: React.FC = () => {
-    const allVaults = useVaultSubgraph()
+const Explore: React.FC<any> = () => {
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const [tableData, setTableData] = useState([])
+    const allVaults: AllVaults = useVaultSubgraph()
+    const geb = useGeb()
     const analyticsData = useAnalyticsData()
 
-    return <ExplorePage globalSafes={allVaults} analyticsData={analyticsData} />
+    const parseNumber = (value: string): number => {
+        return parseFloat(value.replace(/,/g, ''))
+    }
+
+    const getSafeData = async () => {
+        setIsLoading(true)
+        const tableRows = []
+
+        if (!allVaults?.vaults || !analyticsData?.tokenAnalyticsData) return
+
+        for (const vault of allVaults.vaults) {
+            try {
+                const estimatedValue = `${(
+                    +ethers.utils.formatUnits(vault.collateral) *
+                    +ethers.utils.formatUnits(analyticsData.tokenAnalyticsData[vault.collateralType].currentPrice)
+                ).toFixed(2)}`
+
+                const stabilityFee = transformToAnnualRate(
+                    multiplyRates(
+                        analyticsData.tokenAnalyticsData[vault.collateralType].stabilityFee.toString(),
+                        analyticsData.redemptionRate?.toString()
+                    ) || '0',
+                    27
+                )
+
+                const cratio = (+estimatedValue / +formatDataNumber(vault.debt)) * 100
+
+                const svgData = {
+                    vaultID: vault.id,
+                    stabilityFee,
+                    debtAmount: formatDataNumber(vault.debt) + ' OD',
+                    collateralAmount: formatDataNumber(vault.collateral) + ' ' + vault.collateralType,
+                    collateralizationRatio:
+                        Number(cratio) >= 0 && !Number.isNaN(Number(cratio)) && cratio !== Infinity
+                            ? Number(cratio)
+                            : '∞',
+                    liqRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].liquidationCRatio),
+                    safetyRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].safetyCRatio),
+                }
+
+                let svg = null
+                try {
+                    svg = await generateSvg(svgData)
+                } catch (e) {
+                    console.error(e)
+                }
+
+                tableRows.push({
+                    id: vault.id,
+                    collateral: vault.collateralType,
+                    image: svg ? svg : null,
+                    collateralAmount: parseNumber(formatDataNumber(vault.collateral)),
+                    debtAmount: formatDataNumber(vault.debt) + ' OD',
+                })
+            } catch (e) {
+                console.error(e)
+            }
+        }
+        // @ts-ignore
+        setTableData(tableRows)
+        setIsLoading(false)
+    }
+
+    useEffect(() => {
+        getSafeData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allVaults, analyticsData, geb])
+
+    return (
+        <Container>
+            <Header>
+                <Title>Explore Vaults</Title>
+            </Header>
+            {tableData.length !== 0 && <ExploreTable data={tableData} />}
+            {tableData.length === 0 && isLoading && <p>Loading...</p>}
+            {tableData.length === 0 && !isLoading && <p>No vaults available</p>}
+        </Container>
+    )
 }
 
 export default Explore
+
+const Container = styled.div`
+    max-width: 1362px;
+    margin: 80px auto;
+    padding: 0 15px;
+    @media (max-width: 767px) {
+        margin: 50px auto;
+        display: flex;
+        flex-direction: column;
+    }
+    color: ${(props) => props.theme.colors.accent};
+`
+
+const Title = styled.h2`
+    font-size: 34px;
+    font-weight: 700;
+    font-family: ${(props) => props.theme.family.headers};
+
+    color: ${(props) => props.theme.colors.accent};
+    @media (max-width: 767px) {
+        font-size: 32px;
+    }
+`
+
+const Header = styled.div`
+    display: flex;
+    justify-content: space-between;
+    @media (max-width: 767px) {
+        flex-direction: column;
+        justify-content: left;
+    }
+
+    margin-bottom: 40px;
+`
diff --git a/src/hooks/useVaultSubgraph.ts b/src/hooks/useVaultSubgraph.ts
index 6c2420c3..3c1c63ca 100644
--- a/src/hooks/useVaultSubgraph.ts
+++ b/src/hooks/useVaultSubgraph.ts
@@ -28,6 +28,13 @@ export type VaultDetails = {
     collateralType: string
 }
 
+export type AllVaults = {
+    vaults: VaultDetails[]
+    owners: string[]
+    vaultsByOwner: { [key: string]: string[] }
+    vaultsByCollateral: { [key: string]: string[] }
+}
+
 export const fetchAllVaults = async () => {
     const data = await postQuery(
         `
@@ -65,8 +72,12 @@ export const fetchAllVaults = async () => {
 }
 
 export const useVaultSubgraph = () => {
-    const [vaults, setVaults] = useState({ vaults: [] })
-
+    const [vaults, setVaults] = useState<AllVaults>({
+        vaults: [],
+        owners: [],
+        vaultsByOwner: {},
+        vaultsByCollateral: {},
+    })
     const getVaults = async () => {
         const allVaults = await fetchAllVaults()
         setVaults(allVaults)

From dc32ac50af3b1c5bcb6a61766878b70abcc37ddf Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Fri, 5 Jul 2024 17:55:05 -0500
Subject: [PATCH 5/7] revert yarn lock

---
 yarn.lock | 169 ++++++++++++++++++++++++------------------------------
 1 file changed, 76 insertions(+), 93 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b7ed6484..a0afed32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2912,39 +2912,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.6.0":
-  version: 1.6.4
-  resolution: "@floating-ui/core@npm:1.6.4"
+"@floating-ui/core@npm:^1.0.0":
+  version: 1.6.3
+  resolution: "@floating-ui/core@npm:1.6.3"
   dependencies:
-    "@floating-ui/utils": ^0.2.4
-  checksum: 545684b6f76cda7579b6049bafb9903542d3f9c177300192fe83db19d99b1df285bc33aba3b8ec2978d021151c4168356876e8181002dd2ff4fb93d9e4b7bf71
+    "@floating-ui/utils": ^0.2.3
+  checksum: ae9335ad78563f579d307b72563e1fcd70fe98db04cdf1b63cf8fb5354cf3d49157d51d614c5ae7cd1d825864a7ed0c96be8f801be8b7e3a70fa8b9ae1b7805b
   languageName: node
   linkType: hard
 
 "@floating-ui/dom@npm:^1.6.1":
-  version: 1.6.7
-  resolution: "@floating-ui/dom@npm:1.6.7"
+  version: 1.6.6
+  resolution: "@floating-ui/dom@npm:1.6.6"
   dependencies:
-    "@floating-ui/core": ^1.6.0
-    "@floating-ui/utils": ^0.2.4
-  checksum: 5255f522534e0022b554c366b969fa26951677a1cf39ddd58614071a909a340c5e1ffe645501037b221808f01bfac4e7edba14728978ee7e2438e8432c1a163f
+    "@floating-ui/core": ^1.0.0
+    "@floating-ui/utils": ^0.2.3
+  checksum: ea7c24510fc1ad5a6a5f511864a8e4b2e51f184589fa1b71c09bf43f3d78433760f3c21bf48008674fc902f4c4aaf7095e3a5360a62f9cbde88c70809ca118d0
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.4":
-  version: 0.2.4
-  resolution: "@floating-ui/utils@npm:0.2.4"
-  checksum: 154924b01157cb45cf305f4835d7f603e931dda8b00bbe52666729bccc5e7b99630e8b951333725e526d4e53d9b342976434ad5750b8b1da58728e3698bdcc2b
+"@floating-ui/utils@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "@floating-ui/utils@npm:0.2.3"
+  checksum: 7a2dac793cd99f05fde2d597cb434f1caa8b59563618453e1b8ac0ebb811e3627aaded16f3efd6d6e535f7448d590d38f9993be37adea258f3b9f826a6c96b2b
   languageName: node
   linkType: hard
 
 "@fuul/sdk@npm:^4.7.1":
-  version: 4.9.0
-  resolution: "@fuul/sdk@npm:4.9.0"
+  version: 4.7.4
+  resolution: "@fuul/sdk@npm:4.7.4"
   dependencies:
     axios: ^1.2.2
     nanoid: ^4.0.0
-  checksum: 9f0a97221de75aebe4ebaeaaa9203538916fac2501cfb6b0f621fa57681055ed39cc45c027fdd90a9648fc3b86356515b1f992257b48546388f2eda93f5a3fb2
+  checksum: 0351e5f52733dcc12f1f8f28c75289a36387721b64f7425e2e33c7e6c438e04af56c207e3bded8799c12500a4584be7070e26d559351dbdb8b28072678b16a0f
   languageName: node
   linkType: hard
 
@@ -3413,12 +3413,12 @@ __metadata:
   linkType: hard
 
 "@metamask/rpc-errors@npm:^6.2.1":
-  version: 6.3.1
-  resolution: "@metamask/rpc-errors@npm:6.3.1"
+  version: 6.3.0
+  resolution: "@metamask/rpc-errors@npm:6.3.0"
   dependencies:
-    "@metamask/utils": ^9.0.0
+    "@metamask/utils": ^8.3.0
     fast-safe-stringify: ^2.0.6
-  checksum: 0ca1f8b138ef9352310befeae194d248fec75ccdd0442369369fb1003316679088dc142e2766b95e2c181ff6dc8786fd7371123d8860e022ec5e420ce05e7496
+  checksum: ba11083b1bce84bd3f420a83e28337ce58c7773237558280057eeb19415b83fd7bac5148351f3e56bd8fa0621da3ddad0231a85fc11a5a281820fc0e99cf977a
   languageName: node
   linkType: hard
 
@@ -3436,7 +3436,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/superstruct@npm:^3.0.0, @metamask/superstruct@npm:^3.1.0":
+"@metamask/superstruct@npm:^3.0.0":
   version: 3.1.0
   resolution: "@metamask/superstruct@npm:3.1.0"
   checksum: 8820e76582b3d735a2142c878ac4830d962f7a9c0776cb31bafdff646ff701657b9be192601d7f96834c3a8edd87677650f5bfa1a29d945e8dbc77a8d788b3fc
@@ -3473,23 +3473,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/utils@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@metamask/utils@npm:9.0.0"
-  dependencies:
-    "@ethereumjs/tx": ^4.2.0
-    "@metamask/superstruct": ^3.1.0
-    "@noble/hashes": ^1.3.1
-    "@scure/base": ^1.1.3
-    "@types/debug": ^4.1.7
-    debug: ^4.3.4
-    pony-cause: ^2.1.10
-    semver: ^7.5.4
-    uuid: ^9.0.1
-  checksum: 916070ed8536b75fb6c5fad3caf8604bd75781db77d899d9d25bbfbd12f4e1fb8471ff87feaf82bcf9e872978ce908e7ec50b755fc68e9ce5e504f3477d305f0
-  languageName: node
-  linkType: hard
-
 "@motionone/animation@npm:^10.15.1, @motionone/animation@npm:^10.18.0":
   version: 10.18.0
   resolution: "@motionone/animation@npm:10.18.0"
@@ -3593,12 +3576,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/curves@npm:1.4.2, @noble/curves@npm:~1.4.0":
-  version: 1.4.2
-  resolution: "@noble/curves@npm:1.4.2"
+"@noble/curves@npm:1.4.0, @noble/curves@npm:~1.4.0":
+  version: 1.4.0
+  resolution: "@noble/curves@npm:1.4.0"
   dependencies:
     "@noble/hashes": 1.4.0
-  checksum: 65620c895b15d46e8087939db6657b46a1a15cd4e0e4de5cd84b97a0dfe0af85f33a431bb21ac88267e3dc508618245d4cb564213959d66a84d690fe18a63419
+  checksum: 31fbc370df91bcc5a920ca3f2ce69c8cf26dc94775a36124ed8a5a3faf0453badafd2ee4337061ffea1b43c623a90ee8b286a5a81604aaf9563bdad7ff795d18
   languageName: node
   linkType: hard
 
@@ -4738,21 +4721,21 @@ __metadata:
   linkType: hard
 
 "@tanstack/react-table@npm:^8.17.3":
-  version: 8.19.2
-  resolution: "@tanstack/react-table@npm:8.19.2"
+  version: 8.17.3
+  resolution: "@tanstack/react-table@npm:8.17.3"
   dependencies:
-    "@tanstack/table-core": 8.19.2
+    "@tanstack/table-core": 8.17.3
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 6941e12cdb907709d6a2b919efb2daae01348eb3cc964fb437a7725461fc306375604ac83e09ea4dc793e34075b8b69a89b7bfd182b4762b711db2a721c21139
+  checksum: d1ab321f189f1c7e20336c0516f8155a3d46aea74cc7ec849239b7323cf3e4fe919585489de3512eab36fceb7c4eae245e58235e6fcb5f112379411d801605fd
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.19.2":
-  version: 8.19.2
-  resolution: "@tanstack/table-core@npm:8.19.2"
-  checksum: f09f1b4860899466f106fd5b89faf465f0d5210416505d0d6a6641025da05dec7f8eb193ca98d204288f05eb2b617497e0cd9e274ead3f504391749696cfcd3f
+"@tanstack/table-core@npm:8.17.3":
+  version: 8.17.3
+  resolution: "@tanstack/table-core@npm:8.17.3"
+  checksum: e45f0f74b645689c762dd8c1042726d804726a488130fb2d36e24384bd813a601ed4d20abff3b4ba1bb1a648d14029f65d7fa8728099e0fd9f2702b51dc586c2
   languageName: node
   linkType: hard
 
@@ -6439,11 +6422,11 @@ __metadata:
   linkType: hard
 
 "acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
-  version: 8.12.1
-  resolution: "acorn@npm:8.12.1"
+  version: 8.12.0
+  resolution: "acorn@npm:8.12.0"
   bin:
     acorn: bin/acorn
-  checksum: 51fb26cd678f914e13287e886da2d7021f8c2bc0ccc95e03d3e0447ee278dd3b40b9c57dc222acd5881adcf26f3edc40901a4953403232129e3876793cd17386
+  checksum: a19f9dead009d3b430fa3c253710b47778cdaace15b316de6de93a68c355507bc1072a9956372b6c990cbeeb167d4a929249d0faeb8ae4bb6911d68d53299549
   languageName: node
   linkType: hard
 
@@ -7690,9 +7673,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629":
-  version: 1.0.30001640
-  resolution: "caniuse-lite@npm:1.0.30001640"
-  checksum: d87fce999e52c354029893a23887d2e48ac297e3af55bd14161fcafdd711f97bdb2649c79d2d3049e628603cb59bc4257ca2961644b0b8d206e7b7dd126d37ea
+  version: 1.0.30001638
+  resolution: "caniuse-lite@npm:1.0.30001638"
+  checksum: 33019e0c53ed73f1e728b6f313efed2d7a25710dfa2ad3924d2be9939df10d0991556ac87523d3177d472c246654c9216f03e5532717ed97df58014728c3e798
   languageName: node
   linkType: hard
 
@@ -8771,8 +8754,8 @@ __metadata:
   linkType: hard
 
 "cypress@npm:*, cypress@npm:^13.6.4":
-  version: 13.13.0
-  resolution: "cypress@npm:13.13.0"
+  version: 13.12.0
+  resolution: "cypress@npm:13.12.0"
   dependencies:
     "@cypress/request": ^3.0.0
     "@cypress/xvfb": ^1.2.4
@@ -8813,12 +8796,12 @@ __metadata:
     request-progress: ^3.0.0
     semver: ^7.5.3
     supports-color: ^8.1.1
-    tmp: ~0.2.3
+    tmp: ~0.2.1
     untildify: ^4.0.0
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: 732533a3d783ca98763643307ec519d8006528c38af98be4e3880583a15bd4bb1ccaf5eed5d68f61ecf4d5f887211fec82b25bb3c0fee959707c87bc7a2684a2
+  checksum: a9f74ce07b8d9d8058e4909ac3824d3d8a09af6f92eb4b69bce0892765ceeeac77094976e41a2a31e5138b6e43c2e5f1fb6fb54fbf9fa1bab957b465f5517540
   languageName: node
   linkType: hard
 
@@ -9443,9 +9426,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.796":
-  version: 1.4.816
-  resolution: "electron-to-chromium@npm:1.4.816"
-  checksum: 1a84bc42234484cbc5e8b521de57fd3ab9984a2111d8605eab26b3525f382c0c7b83b45bf8b34e5fa4a730cd183fef5dffa4a0627754c7f4fb0aae9cb3c16b37
+  version: 1.4.814
+  resolution: "electron-to-chromium@npm:1.4.814"
+  checksum: 1e757252840a39ebf77b56e2b0adede1fb3f130b8318bdfcc81361b6da9137daeb4c6886a3a63ebfbfdd37fce60ec35795a2adaa250568895784475fba76a446
   languageName: node
   linkType: hard
 
@@ -10345,14 +10328,14 @@ __metadata:
   linkType: hard
 
 "ethereum-cryptography@npm:^2.0.0":
-  version: 2.2.1
-  resolution: "ethereum-cryptography@npm:2.2.1"
+  version: 2.2.0
+  resolution: "ethereum-cryptography@npm:2.2.0"
   dependencies:
-    "@noble/curves": 1.4.2
+    "@noble/curves": 1.4.0
     "@noble/hashes": 1.4.0
     "@scure/bip32": 1.4.0
     "@scure/bip39": 1.3.0
-  checksum: c6c7626d393980577b57f709878b2eb91f270fe56116044b1d7afb70d5c519cddc0c072e8c05e4a335e05342eb64d9c3ab39d52f78bb75f76ad70817da9645ef
+  checksum: 766939345c39936f32929fae101a91f009f5e28261578d44e7a224dbb70827feebb5135013e81fc39bdcf8d70b321e92b4243670f0947e73add8ae5158717b84
   languageName: node
   linkType: hard
 
@@ -11001,9 +10984,9 @@ __metadata:
   linkType: hard
 
 "forge-std@git+https://github.com/foundry-rs/forge-std.git":
-  version: 1.9.1
-  resolution: "forge-std@https://github.com/foundry-rs/forge-std.git#commit=07263d193d621c4b2b0ce8b4d54af58f6957d97d"
-  checksum: 80c25c66d050bd229ee2256cfa87cdb8952cdd3798c66729ebad8ac6cdeeb0e86981708752fc6678f3f6ae004056f8d696f6ef1df3a7ddfed9e0d6d99806c992
+  version: 1.8.2
+  resolution: "forge-std@https://github.com/foundry-rs/forge-std.git#commit=75b3fcf052cc7886327e4c2eac3d1a1f36942b41"
+  checksum: b2d1b2ba0de503564530597975650c8ef455f5f1f271590371d0c8f0b0adc2392eccaff5e999621f1dcb60ab4cdb06c4e4dbf02ca85de9b700287f2a8bed2373
   languageName: node
   linkType: hard
 
@@ -14580,7 +14563,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mlly@npm:^1.6.1, mlly@npm:^1.7.1":
+"mlly@npm:^1.6.1, mlly@npm:^1.7.0":
   version: 1.7.1
   resolution: "mlly@npm:1.7.1"
   dependencies:
@@ -15601,13 +15584,13 @@ __metadata:
   linkType: hard
 
 "pkg-types@npm:^1.1.1":
-  version: 1.1.3
-  resolution: "pkg-types@npm:1.1.3"
+  version: 1.1.1
+  resolution: "pkg-types@npm:1.1.1"
   dependencies:
     confbox: ^0.1.7
-    mlly: ^1.7.1
+    mlly: ^1.7.0
     pathe: ^1.1.2
-  checksum: 4cd2c9442dd5e4ae0c61cbd8fdaa92a273939749b081f78150ce9a3f4e625cca0375607386f49f103f0720b239d02369bf181c3ea6c80cf1028a633df03706ad
+  checksum: c7d167935de7207479e5829086040d70bea289f31fc1331f17c83e996a4440115c9deba2aa96de839ea66e1676d083c9ca44b33886f87bffa6b49740b67b6fcb
   languageName: node
   linkType: hard
 
@@ -16481,20 +16464,20 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.3.5, postcss@npm:^8.4.23, postcss@npm:^8.4.33, postcss@npm:^8.4.4":
-  version: 8.4.39
-  resolution: "postcss@npm:8.4.39"
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
   dependencies:
     nanoid: ^3.3.7
-    picocolors: ^1.0.1
+    picocolors: ^1.0.0
     source-map-js: ^1.2.0
-  checksum: 16f5ac3c4e32ee76d1582b3c0dcf1a1fdb91334a45ad755eeb881ccc50318fb8d64047de4f1601ac96e30061df203f0f2e2edbdc0bfc49b9c57bc9fb9bedaea3
+  checksum: 955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
   languageName: node
   linkType: hard
 
 "preact@npm:^10.16.0, preact@npm:^10.5.9":
-  version: 10.22.1
-  resolution: "preact@npm:10.22.1"
-  checksum: 9163b97d6fc0ce6b945ed77695d00c4fa07e317d0723e7b9d10c748153d30596abab8b26861ae45591e47bff25515da91406ce7f1c9e66cd9cac7e7f6c927930
+  version: 10.22.0
+  resolution: "preact@npm:10.22.0"
+  checksum: dc5466c5968c56997e917580c00983cec2f6486a89ea9ba29f1bb88dcfd2f9ff67c8d561a69a1b3acdab17f2bb36b311fef0c348b62e89c332d00c674f7871f0
   languageName: node
   linkType: hard
 
@@ -17224,15 +17207,15 @@ __metadata:
   linkType: hard
 
 "react-tooltip@npm:^5.21.1":
-  version: 5.27.1
-  resolution: "react-tooltip@npm:5.27.1"
+  version: 5.27.0
+  resolution: "react-tooltip@npm:5.27.0"
   dependencies:
     "@floating-ui/dom": ^1.6.1
     classnames: ^2.3.0
   peerDependencies:
     react: ">=16.14.0"
     react-dom: ">=16.14.0"
-  checksum: 5ffba1bb0e9cf4f0b1576657a4500c911a1a18efc452f0d73e5696ac761968df712ea504d4ac9520159c9f32516305c48830b9767eb93528edd400d64f48c5c4
+  checksum: 4b105dcef7b3d166e359b97fdbbef9c622de3c91e3c9387f959495c66d4caefb25e38cd75e0258dac104c3814c0ae74b97807382d36f45dfae6200645bafd3a3
   languageName: node
   linkType: hard
 
@@ -19234,7 +19217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tmp@npm:~0.2.3":
+"tmp@npm:~0.2.1":
   version: 0.2.3
   resolution: "tmp@npm:0.2.3"
   checksum: 3e809d9c2f46817475b452725c2aaa5d11985cf18d32a7a970ff25b568438e2c076c2e8609224feef3b7923fa9749b74428e3e634f6b8e520c534eef2fd24125
@@ -19955,8 +19938,8 @@ __metadata:
   linkType: hard
 
 "update-browserslist-db@npm:^1.0.16":
-  version: 1.1.0
-  resolution: "update-browserslist-db@npm:1.1.0"
+  version: 1.0.16
+  resolution: "update-browserslist-db@npm:1.0.16"
   dependencies:
     escalade: ^3.1.2
     picocolors: ^1.0.1
@@ -19964,7 +19947,7 @@ __metadata:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: a7452de47785842736fb71547651c5bbe5b4dc1e3722ccf48a704b7b34e4dcf633991eaa8e4a6a517ffb738b3252eede3773bef673ef9021baa26b056d63a5b9
+  checksum: 5995399fc202adbb51567e4810e146cdf7af630a92cc969365a099150cb00597e425cc14987ca7080b09a4d0cfd2a3de53fbe72eebff171aed7f9bb81f9bf405
   languageName: node
   linkType: hard
 
@@ -20942,8 +20925,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.13.0":
-  version: 8.18.0
-  resolution: "ws@npm:8.18.0"
+  version: 8.17.1
+  resolution: "ws@npm:8.17.1"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -20952,7 +20935,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06
+  checksum: f4a49064afae4500be772abdc2211c8518f39e1c959640457dcee15d4488628620625c783902a52af2dd02f68558da2868fd06e6fd0e67ebcd09e6881b1b5bfe
   languageName: node
   linkType: hard
 

From 1e00fc1fc72e861104e619744a3d78bb41bc9ee4 Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Mon, 8 Jul 2024 18:08:29 -0500
Subject: [PATCH 6/7] explore table reorder, external link

---
 src/containers/Explore/ExploreTable.tsx | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/containers/Explore/ExploreTable.tsx b/src/containers/Explore/ExploreTable.tsx
index 1155a831..9394e2e4 100644
--- a/src/containers/Explore/ExploreTable.tsx
+++ b/src/containers/Explore/ExploreTable.tsx
@@ -28,6 +28,12 @@ const parseDebtAmount = (value: string): number => {
 
 const columnHelper = createColumnHelper<Vault>()
 const columns: ColumnDef<Vault, any>[] = [
+    columnHelper.accessor('id', {
+        header: () => 'ID',
+        cell: (info) => info.getValue(),
+        sortingFn: 'alphanumeric',
+        enableSorting: false,
+    }),
     columnHelper.accessor('image', {
         header: () => '',
         cell: (info) => {
@@ -41,18 +47,6 @@ const columns: ColumnDef<Vault, any>[] = [
         },
         enableSorting: false,
     }),
-    columnHelper.accessor('id', {
-        header: () => 'ID',
-        cell: (info) => info.getValue(),
-        sortingFn: 'alphanumeric',
-        enableSorting: false,
-    }),
-    columnHelper.accessor('collateral', {
-        header: () => 'Collateral',
-        cell: (info) => info.getValue(),
-        sortingFn: 'alphanumeric',
-        enableSorting: false,
-    }),
     columnHelper.accessor('collateralAmount', {
         header: () => 'Collateral Amount',
         cell: (info) => info.getValue().toLocaleString(),
@@ -66,6 +60,12 @@ const columns: ColumnDef<Vault, any>[] = [
             return value.toString().includes(filterValue)
         },
     }),
+    columnHelper.accessor('collateral', {
+        header: () => 'Collateral',
+        cell: (info) => info.getValue(),
+        sortingFn: 'alphanumeric',
+        enableSorting: false,
+    }),
     columnHelper.accessor('debtAmount', {
         header: () => 'Debt Amount',
         cell: (info) => info.getValue(),
@@ -87,7 +87,7 @@ const columns: ColumnDef<Vault, any>[] = [
                     <Button
                         secondary
                         onClick={() =>
-                            window.open(`https://app.opendollar.com/vaults/${info.row.original.id}`, '_blank')
+                            window.location.assign(`https://app.opendollar.com/vaults/${info.row.original.id}`)
                         }
                     >
                         View

From b37525ff977e6232c4a62d497f09543d0fb02630 Mon Sep 17 00:00:00 2001
From: jahabeebs <jahgoreds@gmail.com>
Date: Tue, 9 Jul 2024 19:12:03 -0500
Subject: [PATCH 7/7] add risk status, fix bugs

---
 src/containers/Explore/ExploreTable.tsx | 26 ++++++++++++--
 src/containers/Explore/index.tsx        | 47 ++++++++++++++++++++-----
 src/utils/helper.ts                     | 29 +++++++++++++++
 3 files changed, 91 insertions(+), 11 deletions(-)

diff --git a/src/containers/Explore/ExploreTable.tsx b/src/containers/Explore/ExploreTable.tsx
index 9394e2e4..fd509df7 100644
--- a/src/containers/Explore/ExploreTable.tsx
+++ b/src/containers/Explore/ExploreTable.tsx
@@ -19,9 +19,18 @@ type Vault = {
     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', ''))
 }
@@ -32,7 +41,7 @@ const columns: ColumnDef<Vault, any>[] = [
         header: () => 'ID',
         cell: (info) => info.getValue(),
         sortingFn: 'alphanumeric',
-        enableSorting: false,
+        enableSorting: true,
     }),
     columnHelper.accessor('image', {
         header: () => '',
@@ -64,7 +73,7 @@ const columns: ColumnDef<Vault, any>[] = [
         header: () => 'Collateral',
         cell: (info) => info.getValue(),
         sortingFn: 'alphanumeric',
-        enableSorting: false,
+        enableSorting: true,
     }),
     columnHelper.accessor('debtAmount', {
         header: () => 'Debt Amount',
@@ -79,6 +88,19 @@ const columns: ColumnDef<Vault, any>[] = [
             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) => {
diff --git a/src/containers/Explore/index.tsx b/src/containers/Explore/index.tsx
index 23d2a348..f8d64744 100644
--- a/src/containers/Explore/index.tsx
+++ b/src/containers/Explore/index.tsx
@@ -4,7 +4,15 @@ import { useState, useEffect } from 'react'
 import { generateSvg } from '@opendollar/svg-generator'
 import ExploreTable from './ExploreTable'
 import { ethers } from 'ethers'
-import { parseRay, formatDataNumber, multiplyRates, transformToAnnualRate } from '~/utils'
+import {
+    parseRay,
+    formatDataNumber,
+    multiplyRates,
+    transformToAnnualRate,
+    calculateRiskStatusText,
+    ratioChecker,
+    parseFormattedNumber,
+} from '~/utils'
 import { AllVaults, useVaultSubgraph } from '~/hooks/useVaultSubgraph'
 import useAnalyticsData from '~/hooks/useAnalyticsData'
 import useGeb from '~/hooks/useGeb'
@@ -41,21 +49,41 @@ const Explore: React.FC<any> = () => {
                     27
                 )
 
-                const cratio = (+estimatedValue / +formatDataNumber(vault.debt)) * 100
+                const formattedDebt = parseFormattedNumber(formatDataNumber(vault.debt))
+                let cratio = 0
+                if (formattedDebt !== 0) {
+                    cratio = (+estimatedValue / formattedDebt) * 100
+                }
+
+                let correctCollateralizationRatio
+                if (Number(cratio) > 0) {
+                    correctCollateralizationRatio = Number(cratio)
+                } else if (Number(cratio) === 0 && parseFormattedNumber(formatDataNumber(vault.collateral)) > 0) {
+                    correctCollateralizationRatio = '∞'
+                } else if (Number(cratio) === 0 && parseFormattedNumber(formatDataNumber(vault.collateral)) === 0) {
+                    correctCollateralizationRatio = 0
+                }
 
                 const svgData = {
                     vaultID: vault.id,
                     stabilityFee,
-                    debtAmount: formatDataNumber(vault.debt) + ' OD',
+                    debtAmount: formatDataNumber(vault.debt),
                     collateralAmount: formatDataNumber(vault.collateral) + ' ' + vault.collateralType,
-                    collateralizationRatio:
-                        Number(cratio) >= 0 && !Number.isNaN(Number(cratio)) && cratio !== Infinity
-                            ? Number(cratio)
-                            : '∞',
-                    liqRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].liquidationCRatio),
-                    safetyRatio: parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].safetyCRatio),
+                    collateralizationRatio: correctCollateralizationRatio,
+                    liqRatio: Number(
+                        parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].liquidationCRatio)
+                    ),
+                    safetyRatio: Number(parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].safetyCRatio)),
                 }
 
+                const riskStatus = calculateRiskStatusText(
+                    ratioChecker(
+                        Number(cratio),
+                        Number(parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].liquidationCRatio)),
+                        Number(parseRay(analyticsData.tokenAnalyticsData[vault.collateralType].safetyCRatio))
+                    )
+                )
+
                 let svg = null
                 try {
                     svg = await generateSvg(svgData)
@@ -69,6 +97,7 @@ const Explore: React.FC<any> = () => {
                     image: svg ? svg : null,
                     collateralAmount: parseNumber(formatDataNumber(vault.collateral)),
                     debtAmount: formatDataNumber(vault.debt) + ' OD',
+                    riskStatus: riskStatus,
                 })
             } catch (e) {
                 console.error(e)
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 65d42d5e..ef509e36 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -255,6 +255,35 @@ export const safeIsSafe = (totalCollateral: string, totalDebt: string, safetyPri
     return totalDebtBN.lte(totalCollateralBN.mul(safetyPriceBN).div(gebUtils.RAY))
 }
 
+/**
+ * Removes commas from a formatted number
+ * @param value
+ */
+export const parseFormattedNumber = (value: string): number => {
+    return parseFloat(value.replace(/,/g, ''))
+}
+
+/**
+ * Calculate the risk status text given a numeric risk status
+ * @param riskStatusNumeric
+ */
+export const calculateRiskStatusText = (riskStatusNumeric: Number) => {
+    switch (riskStatusNumeric) {
+        case 0:
+            return 'NO'
+        case 1:
+            return 'LOW'
+        case 2:
+            return 'ELEVATED'
+        case 3:
+            return 'HIGH'
+        case 4:
+            return 'LIQUIDATION'
+        default:
+            return 'LOW'
+    }
+}
+
 /**
  * Check the risk state of the current liquidation ratio given a fixed minLiquidationRatio
  * @param currentLiquidationRatio