diff --git a/packages/web/components/assets/highlights-categories.tsx b/packages/web/components/assets/highlights-categories.tsx index 0e2296c229..1df3b10971 100644 --- a/packages/web/components/assets/highlights-categories.tsx +++ b/packages/web/components/assets/highlights-categories.tsx @@ -104,6 +104,7 @@ function highlightPrice24hChangeAsset(asset: PriceChange24hAsset) { ) : null, }; diff --git a/packages/web/components/assets/price.tsx b/packages/web/components/assets/price.tsx index 626c9c8903..63b543c783 100644 --- a/packages/web/components/assets/price.tsx +++ b/packages/web/components/assets/price.tsx @@ -38,7 +38,7 @@ export const PriceChange: FunctionComponent< value !== undefined ? `(${priceChangeDisplay})` : priceChangeDisplay; return ( -
+
{isBullish && ( Boolean(quoteResult.isFetched) && !quoteResult.isError - ) + .filter((quoteResult) => Boolean(quoteResult.isFetched)) // Sort by response time. The fastest and highest quality quote will be first. .sort((a, b) => { // This means the quote is for a basic IBC transfer: diff --git a/packages/web/components/chart/historical-chart.tsx b/packages/web/components/chart/historical-chart.tsx index 3bf26fd2ef..1dda33947b 100644 --- a/packages/web/components/chart/historical-chart.tsx +++ b/packages/web/components/chart/historical-chart.tsx @@ -36,9 +36,9 @@ const getSeriesOpt = (config: Style): DeepPartial => { break; case "neutral": default: - lineColor = theme.colors.wosmongton[300]; - topColor = theme.colors.osmoverse[700]; - bottomColor = theme.colors.osmoverse[850]; + lineColor = theme.colors.wosmongton[400]; + topColor = "rgba(70, 42, 223, 0.2)"; + bottomColor = "rgba(165, 19, 153, 0.01)"; crosshairMarkerBorderColor = theme.colors.osmoverse[900]; break; } @@ -70,14 +70,36 @@ interface HistoricalChartProps { onPointerHover?: (price: number, time: Time) => void; onPointerOut?: () => void; style?: Style; + hideScales?: boolean; } export const HistoricalChart = memo((props: HistoricalChartProps) => { - const { data = [], onPointerHover, onPointerOut, style = "neutral" } = props; + const { + data = [], + onPointerHover, + onPointerOut, + style = "neutral", + hideScales = false, + } = props; + + const options = hideScales + ? { + rightPriceScale: { + visible: false, + }, + leftPriceScale: { + visible: false, + }, + timeScale: { + visible: false, + }, + } + : {}; return ( { +export const HistoricalChartSkeleton = ({ hideScales = false }) => { return (
@@ -202,7 +224,21 @@ export const HistoricalChartSkeleton = () => { -
+ {!hideScales && ( +
+ + + + + + + +
+ )} +
+ + {!hideScales && ( +
@@ -211,17 +247,7 @@ export const HistoricalChartSkeleton = () => {
-
- -
- - - - - - - -
+ )}
); }; diff --git a/packages/web/components/complex/portfolio/assets-overview.tsx b/packages/web/components/complex/portfolio/assets-overview.tsx index 0fb9fff984..0860f2a17e 100644 --- a/packages/web/components/complex/portfolio/assets-overview.tsx +++ b/packages/web/components/complex/portfolio/assets-overview.tsx @@ -1,3 +1,4 @@ +import { Transition } from "@headlessui/react"; import { PricePretty } from "@keplr-wallet/unit"; import { Dec, RatePretty } from "@keplr-wallet/unit"; import { DEFAULT_VS_CURRENCY } from "@osmosis-labs/server"; @@ -14,7 +15,10 @@ import { FunctionComponent, useState } from "react"; import { Icon } from "~/components/assets"; import { CreditCardIcon } from "~/components/assets/credit-card-icon"; import { GetStartedWithOsmosis } from "~/components/complex/portfolio/get-started-with-osmosis"; -import { PortfolioHistoricalChart } from "~/components/complex/portfolio/historical-chart"; +import { + PortfolioHistoricalChart, + PortfolioHistoricalChartMinimized, +} from "~/components/complex/portfolio/historical-chart"; import { PortfolioPerformance } from "~/components/complex/portfolio/performance"; import { DataPoint } from "~/components/complex/portfolio/types"; import { SkeletonLoader } from "~/components/loaders/skeleton-loader"; @@ -26,6 +30,8 @@ import { useBridge } from "~/hooks/bridge"; import { useStore } from "~/stores"; import { api } from "~/utils/trpc"; +const CHART_CONTAINER_HEIGHT = 468; + const calculatePortfolioPerformance = ( data: ChartPortfolioOverTimeResponse[] | undefined, dataPoint: DataPoint @@ -107,106 +113,168 @@ export const AssetsOverview: FunctionComponent< } ); - const { - selectedDifferencePricePretty, - selectedPercentageRatePretty, - totalPriceChange, - } = calculatePortfolioPerformance(portfolioOverTimeData, dataPoint); + const { selectedDifferencePricePretty, selectedPercentageRatePretty } = + calculatePortfolioPerformance(portfolioOverTimeData, dataPoint); const formattedDate = dataPoint.time ? formatDate(dayjs.unix(dataPoint.time as number).format("YYYY-MM-DD")) : undefined; - if (isWalletLoading) return null; - const totalDisplayValue = new PricePretty(DEFAULT_VS_CURRENCY, new Dec(dataPoint.value || 0)) || totalValue?.toString(); + const [isChartMinimized, setIsChartMinimized] = useState(true); + + if (isWalletLoading) return null; + return ( -
+
{wallet && wallet.isWalletConnected && wallet.address ? ( <> -
- - {t("assets.totalBalance")} - - - - {isMobile ? ( -
{totalDisplayValue?.toString()}
- ) : ( -

{totalDisplayValue?.toString()}

- )} - - - - -
-
- - - + +
- -
- - []} - isFetched={isPortfolioOverTimeDataIsFetched} - setDataPoint={setDataPoint} - range={range} - setRange={setRange} - totalPriceChange={totalPriceChange} - error={error} - setShowDate={setShowDate} - resetDataPoint={() => { - setDataPoint({ - time: dayjs().unix() as Time, - value: +totalValue.toDec().toString(), - }); - setShowDate(false); - }} - /> +
+ + + + + + + []} + isFetched={isPortfolioOverTimeDataIsFetched} + setDataPoint={setDataPoint} + range={range} + setRange={setRange} + error={error} + setShowDate={setShowDate} + resetDataPoint={() => { + setDataPoint({ + time: dayjs().unix() as Time, + value: +totalValue.toDec().toString(), + }); + setShowDate(false); + }} + /> + ) : ( diff --git a/packages/web/components/complex/portfolio/historical-chart.tsx b/packages/web/components/complex/portfolio/historical-chart.tsx index 25a5a28667..721fc19a59 100644 --- a/packages/web/components/complex/portfolio/historical-chart.tsx +++ b/packages/web/components/complex/portfolio/historical-chart.tsx @@ -1,31 +1,29 @@ -import { Dec } from "@keplr-wallet/unit"; import { Range } from "@osmosis-labs/server/src/queries/complex/portfolio/portfolio"; import { AreaData, Time } from "lightweight-charts"; -// import { Icon } from "~/components/assets"; +import { Icon } from "~/components/assets"; import { HistoricalChart, HistoricalChartSkeleton, } from "~/components/chart/historical-chart"; import { PortfolioHistoricalRangeButtonGroup } from "~/components/complex/portfolio/historical-range-button-group"; import { DataPoint } from "~/components/complex/portfolio/types"; +import { IconButton } from "~/components/ui/button"; import { EventName } from "~/config"; import { useAmplitudeAnalytics } from "~/hooks"; -// import { IconButton } from "~/components/ui/button"; import { useTranslation } from "~/hooks"; -const getChartStyle = ( - difference: number -): "bullish" | "bearish" | "neutral" => { - const percentageDec = new Dec(difference); - if (percentageDec.isPositive()) { - return "bullish"; - } else if (percentageDec.isNegative()) { - return "bearish"; - } else { - return "neutral"; - } -}; +interface PortfolioHistoricalChartProps { + data?: AreaData