Release- bug fixes, Marketplace POC (#563)

* Fix fuul crashing the app * lint cleanup * Bolts page (#521) * scaffold bolts page * fix input on mobile * Fix stroke-width * setup quest blocks * cleanup blocks * Fetching fuul data * cleanup * lint * Marketplace: Data Fetching (#518) * marketplace data fetching * fixed * listings data * data * all data * account flag * fix array * fixes * cleanup (#529) * add fuul sendPageview * fix bolts page styles (#531) * Issue #451. HAI warning Banner (#516) * banner for hai user * prettier * make height fixed and border-bottom * height 60 * Issue #510. Marketplace: NFV Listing Card (#527) * header * fix id * add cards component * basic data and styles * card right side style * data we need * Add Table Co-authored-by: Iana <[email protected]> * basic styles * clean up * mock data * change background * add image column * cleanup * cleanup * hook everything up * fix svg size * fix svg size * data fetchingf * Add subgraph query * hooked up with most data * fix * fix * liq data * got all data * add dollar size * add scroll * scale svg and headers one line * fix table ids * mobile fixes * Update titles * styling mobile changes * add filtering, sorting * svg change * svg center * ui tweaks --------- Co-authored-by: Patrick Gallagher <[email protected]> Co-authored-by: Iana <[email protected]> Co-authored-by: jahabeebs <[email protected]> Co-authored-by: Sero <[email protected]> * index.html * cleanup * Issue #541: Redundant fetchAnalyticsData (#545) * useAnalyticsData * more useAnalyticsData refactoring * Issue #409: Reduce redundant RPC calls (#554) * remove initgeb, fix unneeded step2 setting, fix invalid bn error * memoize * more fixes * change sidenote color and fweight (#558) --------- Co-authored-by: Sero <[email protected]> Co-authored-by: Jacob Habib <[email protected]> Co-authored-by: Iana <[email protected]> Co-authored-by: Iana <[email protected]> Co-authored-by: jahabeebs <[email protected]>
open-dollar · Jun 5, 2024 · cefbb01 · cefbb01
1 parent 2288d77
commit cefbb01
Show file tree

Hide file tree

Showing 44 changed files with 1,425 additions and 420 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
         "@sentry/integrations": "^7.112.2",
         "@sentry/react": "^7.112.2",
         "@sentry/webpack-plugin": "^2.16.1",
+        "@tanstack/react-table": "^8.17.3",
         "@types/node": "^12.0.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",

diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
       script-src 'self' blob: http://cdn.matomo.cloud/usekeyp.matomo.cloud/matomo.js https://cdn.matomo.cloud/usekeyp.matomo.cloud/matomo.js https://cdn.matomo.cloud/matomo.js https://usekeyp.matomo.cloud/matomo.js;
       media-src 'self';
       img-src 'self' data: blob: https://explorer-api.walletconnect.com https://usekeyp.matomo.cloud https://app.opendollar.com;
-      connect-src 'self' blob:  https://api.opensea.io https://api.fuul.xyz https://api.camelot.exchange https://opt-mainnet.g.alchemy.com https://arb-mainnet.g.alchemy.com https://mainnet.optimism.io/ https://holy-damp-firefly.arbitrum-mainnet.quiknode.pro https://api.studio.thegraph.com https://od-subgraph-node-image.onrender.com https://usekeyp.matomo.cloud https://o1016103.ingest.us.sentry.io/api/4507153379295232/envelope/ https://o1016103.ingest.us.sentry.io/api/4507153379295232/security/ https://arbitrum-sepolia.infura.io https://arbitrum-sepolia.blockpi.network/v1/rpc/public https://arbitrum.blockpi.network/v1/rpc/public https://optimism.blockpi.network wss://relay.walletconnect.com/ https://verify.walletconnect.org wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com https://chain-proxy.wallet.coinbase.com https://rpc.walletconnect.com https://bot.opendollar.com https://bot.dev.opendollar.com https://subgraph.reflexer.finance/subgraphs/name/reflexer-labs/rai https://api.country.is/ ;
+      connect-src 'self' blob: https://api.opensea.io https://api.fuul.xyz https://api.camelot.exchange https://opt-mainnet.g.alchemy.com https://arb-mainnet.g.alchemy.com https://mainnet.optimism.io/ https://holy-damp-firefly.arbitrum-mainnet.quiknode.pro https://api.studio.thegraph.com https://od-subgraph-node-image.onrender.com https://usekeyp.matomo.cloud https://o1016103.ingest.us.sentry.io/api/4507153379295232/envelope/ https://o1016103.ingest.us.sentry.io/api/4507153379295232/security/ https://arbitrum-sepolia.infura.io https://arbitrum-sepolia.blockpi.network/v1/rpc/public https://arbitrum.blockpi.network/v1/rpc/public https://optimism.blockpi.network wss://relay.walletconnect.com/ https://verify.walletconnect.org wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com https://chain-proxy.wallet.coinbase.com https://rpc.walletconnect.com https://bot.opendollar.com https://bot.dev.opendollar.com https://subgraph.reflexer.finance/subgraphs/name/reflexer-labs/rai https://api.country.is/ ;
       object-src 'self' blob:;
       form-action 'self';
       font-src 'self' data: https://fonts.gstatic.com;

diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -81,6 +81,12 @@ const GlobalStyle = createGlobalStyle`
       border-right-color:${(props: any) => props.theme.colors.foreground} !important
     }
   }
+
+  .Toastify__toast-container {
+    padding: 0;
+    margin: 0;
+    height: 60px;
+  }
 .__react_component_tooltip {
     max-width: 250px;
     padding-top: 20px;

diff --git a/src/components/AuctionsOperations/AuctionsTransactions.tsx b/src/components/AuctionsOperations/AuctionsTransactions.tsx
@@ -101,13 +101,15 @@ const AuctionsTransactions = () => {
                         haiAmount: amount,
                         collateral: tokenSymbol,
                         collateralAmount: collateralAmount,
+                        geb,
                     })
                 } else if (isSettle) {
                     await auctionsActions.auctionClaim({
                         signer,
                         auctionId,
                         title: handleWaitingTitle,
                         auctionType,
+                        geb,
                     })
                 } else if (isClaim) {
                     await auctionsActions.auctionClaimInternalBalance({
@@ -125,6 +127,7 @@ const AuctionsTransactions = () => {
                         title: handleWaitingTitle,
                         auctionType,
                         bid: amount,
+                        geb,
                     })
                 }
             }

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -13,8 +13,6 @@ import Button from './Button'
 import Brand from './Brand'
 import ArrowDown from './Icons/ArrowDown'
 import Camelot from './Icons/Camelot'
-import { fetchPoolData } from '@opendollar/sdk'
-import { fetchAnalyticsData } from '@opendollar/sdk/lib/virtual/virtualAnalyticsData'
 import useGeb from '~/hooks/useGeb'
 import { BigNumber, ethers } from 'ethers'
 import BlockBodyContainer from './BlockBodyContainer'
@@ -24,6 +22,8 @@ import walletIcon from '../assets/wallet-icon.svg'
 import od from '../assets/od-logo.svg'
 import odg from '../assets/odg.svg'
 import Loader from './Loader'
+import useAnalyticsData from '~/hooks/useAnalyticsData'
+import usePoolData from '~/hooks/usePoolData'
 
 const Navbar = () => {
     const theme = useTheme()
@@ -50,6 +50,8 @@ const Navbar = () => {
     const [isTokenPopupVisible, setTokenPopupVisibility] = useState(false)
     const [isTestTokenPopupVisible, setTestTokenPopupVisibility] = useState(false)
     const signer = provider ? provider.getSigner(account) : undefined
+    const poolData = usePoolData()
+    const analyticsData = useAnalyticsData()
 
     const handleTokenClick = () => {
         setTokenPopupVisibility(!isTokenPopupVisible)
@@ -149,32 +151,33 @@ const Navbar = () => {
 
     useEffect(() => {
         if (chainId !== 421614 && chainId !== 42161 && chainId !== 10) return
-        async function fetchData() {
-            if (geb) {
-                try {
-                    const [poolData, analyticsData] = await Promise.all([fetchPoolData(geb), fetchAnalyticsData(geb)])
-
-                    const formattedLiquidity = formatDataNumber(
-                        ethers.utils
-                            .parseEther(BigNumber.from(Math.floor(Number(poolData?.totalLiquidityUSD))).toString())
-                            .toString(),
-                        18,
-                        0,
-                        true
-                    ).toString()
-
-                    setState((prevState) => ({
-                        ...prevState,
-                        odPrice: formatDataNumber(analyticsData.marketPrice, 18, 3, true, undefined, 2),
-                        totalLiquidity: formattedLiquidity,
-                    }))
-                } catch (error) {
-                    console.error('Error fetching data:', error)
-                }
-            }
+        if (poolData && analyticsData) {
+            const formattedLiquidity = formatDataNumber(
+                ethers.utils
+                    .parseEther(
+                        BigNumber.from(
+                            Math.floor(Number(poolData?.totalLiquidityUSD ? poolData.totalLiquidityUSD : '0'))
+                        ).toString()
+                    )
+                    .toString(),
+                18,
+                0,
+                true
+            ).toString()
+
+            setState({
+                odPrice: formatDataNumber(
+                    analyticsData?.marketPrice ? analyticsData.marketPrice : '0',
+                    18,
+                    3,
+                    true,
+                    undefined,
+                    2
+                ),
+                totalLiquidity: formattedLiquidity,
+            })
         }
 
-        fetchData()
         document.addEventListener('mousedown', handleClickOutsideOdRef)
         document.addEventListener('mousedown', handleClickOutsideTestToken)
         document.addEventListener('mousedown', handleClickOutsideOdWallet)
@@ -184,7 +187,7 @@ const Navbar = () => {
             document.removeEventListener('mousedown', handleClickOutsideTestToken)
             document.removeEventListener('mousedown', handleClickOutsideOdWallet)
         }
-    }, [geb, chainId]) // eslint-disable-line react-hooks/exhaustive-deps
+    }, [poolData, chainId, analyticsData, geb])
 
     return (
         <ContainerShadowWrapper>

diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
@@ -11,11 +11,11 @@ import Button from './Button'
 
 import ArrowDown from '~/components/Icons/ArrowDown'
 import Camelot from '~/components/Icons/Camelot'
-import { fetchPoolData } from '@opendollar/sdk'
-import { fetchAnalyticsData } from '@opendollar/sdk/lib/virtual/virtualAnalyticsData'
 import useGeb from '~/hooks/useGeb'
 import { BigNumber, ethers } from 'ethers'
 import { X } from 'react-feather'
+import useAnalyticsData from '~/hooks/useAnalyticsData'
+import usePoolData from '~/hooks/usePoolData'
 
 const SideMenu = () => {
     const nodeRef = React.useRef(null)
@@ -40,6 +40,8 @@ const SideMenu = () => {
         connectWalletModel: connectWalletState,
         popupsModel: popupsState,
     } = useStoreState((state) => state)
+    const poolData = usePoolData()
+    const analyticsData = useAnalyticsData()
 
     const handleWalletConnect = () => popupsActions.setIsConnectorsWalletOpen(true)
 
@@ -95,7 +97,6 @@ const SideMenu = () => {
             await ethereum.request({
                 method: 'wallet_watchAsset',
                 params: {
-                    // @ts-ignore
                     type: 'ERC20',
                     options: {
                         address: connectWalletModel.tokensData.OD.address,
@@ -116,7 +117,6 @@ const SideMenu = () => {
             await ethereum.request({
                 method: 'wallet_watchAsset',
                 params: {
-                    // @ts-ignore
                     type: 'ERC20',
                     options: {
                         address: connectWalletModel.tokensData.ODG.address,
@@ -132,32 +132,33 @@ const SideMenu = () => {
 
     useEffect(() => {
         if (chainId !== 421614 && chainId !== 42161 && chainId !== 10) return
-        async function fetchData() {
-            if (geb) {
-                try {
-                    const [poolData, analyticsData] = await Promise.all([fetchPoolData(geb), fetchAnalyticsData(geb)])
-
-                    const formattedLiquidity = formatDataNumber(
-                        ethers.utils
-                            .parseEther(BigNumber.from(Math.floor(Number(poolData?.totalLiquidityUSD))).toString())
-                            .toString(),
-                        18,
-                        0,
-                        true
-                    ).toString()
-
-                    setState((prevState) => ({
-                        ...prevState,
-                        odPrice: formatDataNumber(analyticsData.marketPrice, 18, 3, true, undefined, 2),
-                        totalLiquidity: formattedLiquidity,
-                    }))
-                } catch (error) {
-                    console.error('Error fetching data:', error)
-                }
-            }
+        if (poolData && analyticsData) {
+            const formattedLiquidity = formatDataNumber(
+                ethers.utils
+                    .parseEther(
+                        BigNumber.from(
+                            Math.floor(Number(poolData?.totalLiquidityUSD ? poolData.totalLiquidityUSD : '0'))
+                        ).toString()
+                    )
+                    .toString(),
+                18,
+                0,
+                true
+            ).toString()
+
+            setState({
+                odPrice: formatDataNumber(
+                    analyticsData?.marketPrice ? analyticsData.marketPrice : '0',
+                    18,
+                    3,
+                    true,
+                    undefined,
+                    2
+                ),
+                totalLiquidity: formattedLiquidity,
+            })
         }
 
-        fetchData()
         document.addEventListener('mousedown', handleClickOutsideOdRef)
         document.addEventListener('mousedown', handleClickOutsideTestToken)
         document.addEventListener('mousedown', handleClickOutsidePrice)
@@ -168,7 +169,7 @@ const SideMenu = () => {
             document.removeEventListener('mousedown', handleClickOutsideTestToken)
             document.removeEventListener('mousedown', handleClickOutsidePrice)
         }
-    }, [geb, chainId])
+    }, [geb, chainId, analyticsData, poolData])
 
     useEffect(() => {
         setIsOpen(popupsState.showSideMenu)

diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
@@ -1,7 +1,13 @@
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
-import { useActiveWeb3React, handleTransactionError, useTransactionAdder, use10BlocksConfirmations } from '~/hooks'
+import {
+    useActiveWeb3React,
+    handleTransactionError,
+    useTransactionAdder,
+    use10BlocksConfirmations,
+    handlePreTxGasEstimate,
+} from '~/hooks'
 import { useStoreActions, useStoreState } from '~/store'
 import StepsContent from './StepsContent'
 import { COIN_TICKER } from '~/utils'
@@ -47,7 +53,8 @@ const Steps = () => {
                 hint: 'Confirm this transaction in your wallet',
                 status: 'loading',
             })
-            const txResponse = await signer.sendTransaction(txData)
+            const tx = await handlePreTxGasEstimate(signer, txData)
+            const txResponse = await signer.sendTransaction(tx)
             connectWalletActions.setCtHash(txResponse.hash)
             addTransaction({ ...txResponse, blockNumber: blockNumber[chainId] }, 'Creating an account')
             popupsActions.setWaitingPayload({

diff --git a/src/components/ToastBannerNetwork.tsx b/src/components/ToastBannerNetwork.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+const ToastBannerNetwork = () => {
+    return (
+        <Container>
+            <Text>
+                NOTE: This UI is provided as a convenience for HAI users. Open Dollar makes no guarantees of service.
+            </Text>
+        </Container>
+    )
+}
+
+export default ToastBannerNetwork
+
+const Container = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+    background-color: #1a74ec;
+    border-bottom: 3px solid white;
+    height: 60px;
+`
+
+const Text = styled.div<{ color?: string }>`
+    font-size: ${(props) => props.theme.font.small};
+    color: ${(props) => (props.color ? props.color : props.theme.colors.neutral)};
+`
diff --git a/src/components/VaultStats.tsx b/src/components/VaultStats.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { Info } from 'react-feather'
@@ -47,7 +47,6 @@ const VaultStats = ({ isModifying, isDeposit }: { isModifying: boolean; isDeposi
         10
     )
     const ODPrice = singleSafe ? formatNumber(singleSafe.currentRedemptionPrice, 3) : '0'
-    const [svg, setSvg] = useState('')
 
     const statsForSVG = useMemo(
         () => ({
@@ -68,9 +67,7 @@ const VaultStats = ({ isModifying, isDeposit }: { isModifying: boolean; isDeposi
         [singleSafe, totalDebt, collateral, collateralName, safeState.liquidationData]
     )
 
-    useEffect(() => {
-        setSvg(generateSvg(statsForSVG))
-    }, [singleSafe, totalDebt, collateral, collateralName, safeState.liquidationData, statsForSVG])
+    const svg = useMemo(() => generateSvg(statsForSVG), [statsForSVG])
 
     const returnRedRate = () => {
         const currentRedemptionRate = singleSafe ? getRatePercentage(singleSafe.currentRedemptionRate, 10) : '0'
@@ -322,6 +319,8 @@ const StatsGrid = styled.div`
 
     .sideNote {
         font-size: 12px;
+        font-weight: 700;
+        color: ${(props) => props.theme.colors.primary};
         span {
             &.green {
                 color: ${(props) => props.theme.colors.blueish};
@@ -420,6 +419,7 @@ const Left = styled.div`
         padding-right: 0;
     }
 `
+
 const Right = styled.div`
     background: white;
     border-radius: 4px;
@@ -467,6 +467,8 @@ const SideTitle = styled.div`
     margin-right: 4px;
     .sideNote {
         font-size: 12px;
+        font-weight: 700;
+        color: ${(props) => props.theme.colors.primary};
         span {
             &.green {
                 color: ${(props) => props.theme.colors.blueish};
@@ -477,6 +479,7 @@ const SideTitle = styled.div`
         }
     }
 `
+
 const SideValue = styled.div`
     margin-left: auto;
     text-align: right;