v1.1.0

Kwenta · May 25, 2023 · f53f3c7 · f53f3c7
2 parents a4b170b + 4647e81
commit f53f3c7
Show file tree

Hide file tree

Showing 242 changed files with 27,067 additions and 5,745 deletions.
diff --git a/app/package.json b/app/package.json
@@ -26,7 +26,7 @@
     "@spindl-xyz/attribution-lite": "^0.0.7",
     "copy-to-clipboard": "^3.3.1",
     "nullthrows": "^1.1.1",
-    "posthog-js": "^1.28.0",
+    "posthog-js": "^1.57.2",
     "react": "18.2.0",
     "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",

diff --git a/app/public/images/arbitrum-circle.svg → app/public/images/arbitrum-logo.svg b/app/public/images/arbitrum-circle.svg → app/public/images/arbitrum-logo.svg
diff --git a/app/public/images/arbitrum-vaults.png b/app/public/images/arbitrum-vaults.png
diff --git a/app/public/images/newport-optimism.png b/app/public/images/newport-optimism.png
diff --git a/app/public/images/op-logo.svg b/app/public/images/op-logo.svg
diff --git a/app/public/images/optimism.png b/app/public/images/optimism.png
diff --git a/app/src/PageRoutes.tsx b/app/src/PageRoutes.tsx
@@ -6,22 +6,19 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import useNetwork from './hooks/account/useNetwork'
 import AdminBoardPage from './pages/AdminBoardPage'
 import AdminMarketPage from './pages/AdminPage'
+import EarnArrakisPage from './pages/EarnArrakisPage'
+import EarnIndexPage from './pages/EarnIndexPage'
+import EarnVaultsPage from './pages/EarnVaultsPage'
 import EscrowPage from './pages/EscrowPage'
 import FaucetPage from './pages/FaucetPage'
 import LeaderboardHistoryPage from './pages/LeaderboardHistoryPage'
 import LeaderboardPage from './pages/LeaderboardPage'
 import NotFoundPage from './pages/NotFoundPage'
 import PositionPage from './pages/PositionPage'
 import ReferralsPage from './pages/ReferralsPage'
-import RewardsArrakisPage from './pages/RewardsArrakisPage'
-import RewardsIndexPage from './pages/RewardsIndexPage'
-import RewardsVaultsPage from './pages/RewardsVaultsPage'
 import StoryBookPage from './pages/StoryBookPage'
 import TradeHistoryPage from './pages/TradeHistoryPage'
 import TradePage from './pages/TradePage'
-import VaultsHistoryPage from './pages/VaultsHistoryPage'
-import VaultsIndexPage from './pages/VaultsIndexPage'
-import VaultsPage from './pages/VaultsPage'
 import VoteIndexPage from './pages/VoteIndexPage'
 import VoteProposalCreatePage from './pages/VoteProposalCreatePage'
 import VoteProposalDetailsPage from './pages/VoteProposalDetailsPage'
@@ -33,14 +30,9 @@ export default function PageRoutes() {
   return (
     <Routes>
       <Route index element={<Navigate to="/trade" />} />
-      <Route path="/portfolio" element={<Navigate to="/trade" />} />
-      <Route path="/portfolio/history" element={<Navigate to="/trade/history" />} />
       <Route path="/trade" element={<Navigate to={`/trade/${network}/${getDefaultMarket(network)}`} />} />
       <Route path="/trade/:network/:marketAddressOrName" element={<TradePage />} />
       <Route path="/trade/history" element={<TradeHistoryPage />} />
-      <Route path="/vaults" element={<VaultsIndexPage />} />
-      <Route path="/vaults/:network/:marketAddressOrName" element={<VaultsPage />} />
-      <Route path="/vaults/history" element={<VaultsHistoryPage />} />
       <Route path="/position/:network/:marketAddressOrName/:positionId" element={<PositionPage />} />
       {isMainnet() ? (
         <>
@@ -50,10 +42,12 @@ export default function PageRoutes() {
           <Route path="/airdrop" element={<Navigate to={`/leaderboard/${network}`} />} />
           <Route path="/airdrop/:network" element={<LeaderboardPage />} />
           <Route path="/airdrop/history" element={<LeaderboardHistoryPage />} />
-          <Route path="/rewards/referrals/:network" element={<ReferralsPage />} />
-          <Route path="/rewards" element={<RewardsIndexPage />} />
-          <Route path="/rewards/vaults/:network/:marketAddressOrName" element={<RewardsVaultsPage />} />
-          <Route path="/rewards/arrakis" element={<RewardsArrakisPage />} />
+          <Route path="/earn/referrals/:network" element={<ReferralsPage />} />
+          <Route path="/earn" element={<EarnIndexPage />} />
+          <Route path="/earn/vaults/:network/:marketAddressOrName" element={<EarnVaultsPage />} />
+          <Route path="/earn/arrakis" element={<EarnArrakisPage />} />
+          <Route path="/vaults" element={<EarnIndexPage />} />
+          <Route path="/rewards" element={<EarnIndexPage />} />
         </>
       ) : null}
       <Route path="/vote" element={<VoteIndexPage />} />

diff --git a/app/src/components/common/PositionsTable/index.tsx b/app/src/components/common/PositionsTable/index.tsx
@@ -130,7 +130,7 @@ const PositionsTable = ({ positions, onClick, pageSize, ...styleProps }: Props)
         accessor: 'averageCostPerOption',
         Header: 'Average Cost',
         Cell: (props: TableCellProps<PositionTableData>) => {
-          return <Text>{formatUSD(props.cell.value)}</Text>
+          return <Text>{props.cell.value ? formatUSD(props.cell.value) : '-'}</Text>
         },
       },
       {
@@ -148,12 +148,14 @@ const PositionsTable = ({ positions, onClick, pageSize, ...styleProps }: Props)
           const { pnlPercentage } = props.row.original
           return (
             <Box>
-              <Text color={pnlPercentage > 0 ? 'primaryText' : 'errorText'}>
+              <Text color={pnlPercentage === 0 ? 'text' : pnlPercentage > 0 ? 'primaryText' : 'errorText'}>
                 {formatUSD(props.cell.value, { showSign: true })}
               </Text>
-              <Text variant="small" color="secondaryText">
-                {formatPercentage(pnlPercentage)}
-              </Text>
+              {pnlPercentage ? (
+                <Text variant="small" color="secondaryText">
+                  {formatPercentage(pnlPercentage)}
+                </Text>
+              ) : null}
             </Box>
           )
         },

diff --git a/app/src/components/common/RowItem/index.tsx b/app/src/components/common/RowItem/index.tsx
@@ -7,15 +7,22 @@ type Props = {
   label: string | React.ReactNode
   value: string | React.ReactNode
   valueColor?: TextColor
+  variant?: 'small' | 'body'
 } & MarginProps &
   LayoutProps
 
-export default function RowItem({ label, value, valueColor = 'text', ...styleProps }: Props) {
+export default function RowItem({ label, value, variant, valueColor = 'text', ...styleProps }: Props) {
   return (
     <Flex justifyContent="space-between" alignItems="center" {...styleProps}>
-      {typeof label === 'string' ? <Text color="secondaryText">{label}</Text> : label}
+      {typeof label === 'string' ? (
+        <Text variant={variant} color="secondaryText">
+          {label}
+        </Text>
+      ) : (
+        label
+      )}
       {typeof value === 'string' ? (
-        <Text textAlign="right" color={valueColor}>
+        <Text variant={variant} textAlign="right" color={valueColor}>
           {value}
         </Text>
       ) : (

diff --git a/app/src/components/common/TradeEventsTable/index.tsx b/app/src/components/common/TradeEventsTable/index.tsx
@@ -6,7 +6,7 @@ import formatBalance from '@lyra/ui/utils/formatBalance'
 import formatNumber from '@lyra/ui/utils/formatNumber'
 import formatTruncatedDuration from '@lyra/ui/utils/formatTruncatedDuration'
 import formatUSD from '@lyra/ui/utils/formatUSD'
-import { AccountRewardEpoch, CollateralUpdateEvent, Position, SettleEvent, TradeEvent } from '@lyrafinance/lyra-js'
+import { CollateralUpdateEvent, Position, SettleEvent, TradeEvent } from '@lyrafinance/lyra-js'
 import React, { useMemo } from 'react'
 
 import filterNulls from '@/app/utils/filterNulls'
@@ -19,7 +19,6 @@ type Props = {
   events: { event: TradeEvent | CollateralUpdateEvent | SettleEvent; position: Position }[]
   onClick?: (event: TradeEvent | CollateralUpdateEvent | SettleEvent) => void
   pageSize?: number
-  accountRewardEpochs?: AccountRewardEpoch[]
 } & MarginProps
 
 export type TradeEventTableData = TableData<{
@@ -39,16 +38,13 @@ export type TradeEventTableData = TableData<{
   isBaseCollateral: boolean
 }>
 
-const TradeEventsTable = ({ events, accountRewardEpochs, onClick, pageSize = 10 }: Props) => {
+const TradeEventsTable = ({ events, onClick, pageSize = 10 }: Props) => {
   const rows: TradeEventTableData[] = useMemo(() => {
     return events.map(({ event, position }) => {
       const marketName = event.marketName
       const strikePrice = fromBigNumber(event.strikePrice)
       const isCall = event.isCall
       const expiryTimestamp = event.expiryTimestamp
-      const accountRewardEpoch = accountRewardEpochs?.find(
-        epoch => epoch.globalEpoch.startTimestamp < event.timestamp && epoch.globalEpoch.endTimestamp >= event.timestamp
-      )
 
       let collateralValue = 0
       let collateralAmount = 0
@@ -95,7 +91,7 @@ const TradeEventsTable = ({ events, accountRewardEpochs, onClick, pageSize = 10
         onClick: onClick ? () => onClick(event) : undefined,
       }
     })
-  }, [events, accountRewardEpochs, onClick])
+  }, [events, onClick])
 
   const columns = useMemo<TableColumn<TradeEventTableData>[]>(() => {
     return filterNulls([

diff --git a/app/src/components/common/VaultSelector/index.tsx b/app/src/components/common/VaultSelector/index.tsx
diff --git a/app/src/components/position/PositionHistoryCard/index.tsx b/app/src/components/position/PositionHistoryCard/index.tsx
@@ -1,13 +1,9 @@
 import Card, { CardElement } from '@lyra/ui/components/Card'
-import CardBody from '@lyra/ui/components/Card/CardBody'
-import Center from '@lyra/ui/components/Center'
-import Spinner from '@lyra/ui/components/Spinner'
+import CardSection from '@lyra/ui/components/Card/CardSection'
 import Text from '@lyra/ui/components/Text'
 import { Position } from '@lyrafinance/lyra-js'
 import React, { useMemo } from 'react'
 
-import withSuspense from '@/app/hooks/data/withSuspense'
-import useAccountRewardEpochs from '@/app/hooks/rewards/useAccountRewardEpochs'
 import filterNulls from '@/app/utils/filterNulls'
 import getExplorerUrl from '@/app/utils/getExplorerUrl'
 
@@ -17,46 +13,39 @@ type Props = {
   position: Position
 }
 
-const PositionHistoryCard = withSuspense(
-  ({ position }: Props): CardElement => {
-    const accountRewardEpochs = useAccountRewardEpochs()
-    const events = useMemo(() => {
-      if (position) {
-        return filterNulls([
-          ...position.trades(),
-          ...position.collateralUpdates().filter(c => c.isAdjustment),
-          position.settle(),
-        ])
-          .sort((a, b) => b.blockNumber - a.blockNumber)
-          .map(event => ({ event, position }))
-      } else {
-        return []
-      }
-    }, [position])
-    return (
-      <Card>
-        <CardBody noPadding>
-          <Text variant="cardHeading" mx={6} my={4}>
-            History
+const PositionHistoryCard = ({ position }: Props): CardElement => {
+  const events = useMemo(() => {
+    if (position) {
+      return filterNulls([
+        ...position.trades(),
+        ...position.collateralUpdates().filter(c => c.isAdjustment),
+        position.settle(),
+      ])
+        .sort((a, b) => b.blockNumber - a.blockNumber)
+        .map(event => ({ event, position }))
+    } else {
+      return []
+    }
+  }, [position])
+  return (
+    <Card>
+      <CardSection noSpacing>
+        <Text variant="cardHeading">History</Text>
+      </CardSection>
+      <CardSection noPadding={events.length > 0}>
+        {!events.length ? (
+          <Text variant="small" color="secondaryText">
+            Syncing trade history...
           </Text>
+        ) : (
           <TradeEventsTable
             events={events}
-            accountRewardEpochs={accountRewardEpochs}
             onClick={event => window.open(getExplorerUrl(event.lyra.network, event.transactionHash), '_blank')}
           />
-        </CardBody>
-      </Card>
-    )
-  },
-  () => {
-    return (
-      <Card height={200}>
-        <Center height="100%" width="100%">
-          <Spinner />
-        </Center>
-      </Card>
-    )
-  }
-)
+        )}
+      </CardSection>
+    </Card>
+  )
+}
 
 export default PositionHistoryCard
diff --git a/app/src/components/rewards/TradingFeeRebateTable/index.tsx b/app/src/components/rewards/TradingFeeRebateTable/index.tsx
diff --git a/app/src/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx b/app/src/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx
@@ -142,7 +142,7 @@ const TradeBoardTableDesktop = ({
       0
     )
     return {
-      rowIdx: rows.length,
+      rowIdx: spotPriceRowIdx,
       content: (
         <Flex sx={{ position: 'relative' }} alignItems="center" width="100%">
           <Box sx={{ position: 'absolute', right: 0, left: 0, top: '18px', height: '4px', bg: 'cardHoverBg' }} />