diff --git a/app/package.json b/app/package.json index bd6c720b..08a0b918 100644 --- 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 b/app/public/images/arbitrum-logo.svg similarity index 100% rename from app/public/images/arbitrum-circle.svg rename to app/public/images/arbitrum-logo.svg diff --git a/app/public/images/arbitrum-vaults.png b/app/public/images/arbitrum-vaults.png deleted file mode 100644 index da285222..00000000 Binary files a/app/public/images/arbitrum-vaults.png and /dev/null differ diff --git a/app/public/images/newport-optimism.png b/app/public/images/newport-optimism.png new file mode 100644 index 00000000..240b268f Binary files /dev/null and b/app/public/images/newport-optimism.png differ diff --git a/app/public/images/op-logo.svg b/app/public/images/op-logo.svg new file mode 100644 index 00000000..2e5ce310 --- /dev/null +++ b/app/public/images/op-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/public/images/optimism.png b/app/public/images/optimism.png deleted file mode 100644 index 0e0a6df0..00000000 Binary files a/app/public/images/optimism.png and /dev/null differ diff --git a/app/src/PageRoutes.tsx b/app/src/PageRoutes.tsx index 06c66622..e43bc9d5 100644 --- a/app/src/PageRoutes.tsx +++ b/app/src/PageRoutes.tsx @@ -6,6 +6,9 @@ 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' @@ -13,15 +16,9 @@ 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 ( } /> - } /> - } /> } /> } /> } /> - } /> - } /> - } /> } /> {isMainnet() ? ( <> @@ -50,10 +42,12 @@ export default function PageRoutes() { } /> } /> } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> + } /> ) : null} } /> diff --git a/app/src/components/common/PositionsTable/index.tsx b/app/src/components/common/PositionsTable/index.tsx index 05080401..b6b869ae 100644 --- 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) => { - return {formatUSD(props.cell.value)} + return {props.cell.value ? formatUSD(props.cell.value) : '-'} }, }, { @@ -148,12 +148,14 @@ const PositionsTable = ({ positions, onClick, pageSize, ...styleProps }: Props) const { pnlPercentage } = props.row.original return ( - 0 ? 'primaryText' : 'errorText'}> + 0 ? 'primaryText' : 'errorText'}> {formatUSD(props.cell.value, { showSign: true })} - - {formatPercentage(pnlPercentage)} - + {pnlPercentage ? ( + + {formatPercentage(pnlPercentage)} + + ) : null} ) }, diff --git a/app/src/components/common/RowItem/index.tsx b/app/src/components/common/RowItem/index.tsx index f74a4d6f..17de8fe2 100644 --- 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 ( - {typeof label === 'string' ? {label} : label} + {typeof label === 'string' ? ( + + {label} + + ) : ( + label + )} {typeof value === 'string' ? ( - + {value} ) : ( diff --git a/app/src/components/common/TradeEventsTable/index.tsx b/app/src/components/common/TradeEventsTable/index.tsx index 1d3f7f85..4e17a073 100644 --- 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[]>(() => { return filterNulls([ diff --git a/app/src/components/common/VaultSelector/index.tsx b/app/src/components/common/VaultSelector/index.tsx deleted file mode 100644 index 4792d81f..00000000 --- a/app/src/components/common/VaultSelector/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { ButtonSize } from '@lyra/ui/components/Button' -import DropdownButton from '@lyra/ui/components/Button/DropdownButton' -import DropdownButtonListItem from '@lyra/ui/components/Button/DropdownButtonListItem' -import { TextVariant } from '@lyra/ui/components/Text' -import { LayoutProps, MarginProps } from '@lyra/ui/types' -import { Market } from '@lyrafinance/lyra-js' -import React, { useCallback, useState } from 'react' - -type Props = { - selectedVault: Market | null - vaults: Market[] - onChangeVault: (vault: Market) => void - size?: ButtonSize - textVariant?: TextVariant - isTransparent?: boolean -} & LayoutProps & - MarginProps - -const VaultSelector = ({ - onChangeVault, - selectedVault, - vaults, - size = 'sm', - textVariant = 'body', - isTransparent = false, - ...styleProps -}: Props) => { - const [isOpen, setIsOpen] = useState(false) - const onClose = useCallback(() => setIsOpen(false), []) - return ( - setIsOpen(true)} - isOpen={isOpen} - label={`${selectedVault?.name} Vault APY` ?? ''} - size={size} - textVariant={textVariant} - mobileTitle="Select Vault" - > - {vaults.map(market => { - return ( - { - onChangeVault(market) - onClose() - }} - /> - ) - })} - - ) -} - -export default VaultSelector diff --git a/app/src/components/position/PositionHistoryCard/index.tsx b/app/src/components/position/PositionHistoryCard/index.tsx index 39ac9397..be89b258 100644 --- 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 ( - - - - 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 ( + + + History + + 0}> + {!events.length ? ( + + Syncing trade history... + ) : ( window.open(getExplorerUrl(event.lyra.network, event.transactionHash), '_blank')} /> - - - ) - }, - () => { - return ( - -
- -
- - ) - } -) + )} + + + ) +} export default PositionHistoryCard diff --git a/app/src/components/rewards/TradingFeeRebateTable/index.tsx b/app/src/components/rewards/TradingFeeRebateTable/index.tsx deleted file mode 100644 index c40645c7..00000000 --- a/app/src/components/rewards/TradingFeeRebateTable/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import Flex from '@lyra/ui/components/Flex' -import Text from '@lyra/ui/components/Text' -import { LayoutProps, MarginProps } from '@lyra/ui/types' -import formatNumber from '@lyra/ui/utils/formatNumber' -import formatPercentage from '@lyra/ui/utils/formatPercentage' -import { GlobalRewardEpochTradingFeeRebateTier } from '@lyrafinance/lyra-js' -import React from 'react' - -import RowItem from '../../common/RowItem' - -type Props = { - feeRebateTiers: GlobalRewardEpochTradingFeeRebateTier[] - effectiveRebate?: number -} & MarginProps & - LayoutProps - -export function TradingFeeRebateTable({ effectiveRebate, feeRebateTiers, ...styleProps }: Props) { - return ( - - Staked LYRA} - value={Rebate} - /> - - {feeRebateTiers.map(feeRebateTier => ( - - {formatNumber(feeRebateTier.stakedLyraCutoff)} - - } - value={ - - {formatPercentage(feeRebateTier.feeRebate, true)} - - } - /> - ))} - - - ) -} diff --git a/app/src/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx b/app/src/components/trade/TradeBoardTableOrList/TradeBoardTableDesktop.tsx index 11f052f8..c5792ec1 100644 --- 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: ( diff --git a/app/src/components/trade/TradeChainTable/TradeChainPriceButton.tsx b/app/src/components/trade/TradeChainTable/TradeChainPriceButton.tsx index 927d21cb..7541d1ed 100644 --- a/app/src/components/trade/TradeChainTable/TradeChainPriceButton.tsx +++ b/app/src/components/trade/TradeChainTable/TradeChainPriceButton.tsx @@ -37,26 +37,24 @@ export default function TradeChainPriceButton({ onSelected = emptyFunction, ...styleProps }: Props): ButtonElement { - return quote ? ( + return quote && (!quote.disabledReason || (quote.disabledReason && !getIsQuoteHidden(quote.disabledReason))) ? (