Mattupham/fe 944 portfolio add chart expand minimize

packages/web/components/assets/highlights-categories.tsx

@@ -104,6 +104,7 @@ function highlightPrice24hChangeAsset(asset: PriceChange24hAsset) {
       <PriceChange
         priceChange={asset.priceChange24h}
         overrideTextClasses="body2"
+        className="h-fit"
       />
     ) : null,
   };

packages/web/components/assets/price.tsx

@@ -38,7 +38,7 @@ export const PriceChange: FunctionComponent<
     value !== undefined ? `(${priceChangeDisplay})` : priceChangeDisplay;
 
   return (
-    <div className={classNames("flex h-fit items-center gap-1", className)}>
+    <div className={classNames("flex items-center gap-1", className)}>
       {isBullish && (
         <Icon
           id="triangle-down"

packages/web/components/chart/historical-chart.tsx

@@ -36,9 +36,9 @@ const getSeriesOpt = (config: Style): DeepPartial<AreaSeriesOptions> => {
       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 (
     <Chart
       Controller={AreaChartController}
+      options={options}
       series={[
         {
           type: "Area",
@@ -155,7 +177,7 @@ export const HistoricalChartHeader: FunctionComponent<{
   );
 };
 
-export const HistoricalChartSkeleton = () => {
+export const HistoricalChartSkeleton = ({ showScales = true }) => {
   return (
     <div className="flex h-full w-full flex-1 flex-row gap-3">
       <div className="flex flex-1 flex-col items-end justify-end">
@@ -202,7 +224,21 @@ export const HistoricalChartSkeleton = () => {
           </defs>
         </svg>
 
-        <div className="flex w-full flex-row justify-between py-3">
+        {showScales && (
+          <div className="flex w-full flex-row justify-between py-3">
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+            <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
+          </div>
+        )}
+      </div>
+
+      {showScales && (
+        <div className="flex flex-col justify-between pb-7 pt-2">
           <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
           <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
           <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
@@ -211,17 +247,7 @@ export const HistoricalChartSkeleton = () => {
           <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
           <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
         </div>
-      </div>
-
-      <div className="flex flex-col justify-between pb-7 pt-2">
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-        <Skeleton className="h-[14px] w-11 rounded-xl bg-osmoverse-825" />
-      </div>
+      )}
     </div>
   );
 };

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";
@@ -9,12 +10,15 @@ import classNames from "classnames";
 import dayjs from "dayjs";
 import { AreaData, Time } from "lightweight-charts";
 import { observer } from "mobx-react-lite";
-import { FunctionComponent, useState } from "react";
+import { Fragment, 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
@@ -117,96 +123,164 @@ export const AssetsOverview: FunctionComponent<
     ? 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 [isHovering, setIsHovering] = useState(false);
+  const [isChartMinimized, setIsChartMinimized] = useState(true);
+
+  if (isWalletLoading) return null;
+
   return (
-    <div className="flex w-full flex-col gap-4">
+    <div
+      className={classNames(
+        "relative flex w-full flex-col transition-all duration-[250ms]",
+        { "delay-[250ms]": isChartMinimized }
+      )}
+      style={{
+        marginBottom: isChartMinimized ? "" : `${CHART_CONTAINER_HEIGHT}px`,
+      }}
+    >
       {wallet && wallet.isWalletConnected && wallet.address ? (
         <>
-          <div className="flex flex-col gap-2">
-            <span className="body1 md:caption text-osmoverse-300">
-              {t("assets.totalBalance")}
-            </span>
-
-            <SkeletonLoader
-              className={classNames(isTotalValueFetched ? null : "h-14 w-48")}
-              isLoaded={isTotalValueFetched}
-            >
-              {isMobile ? (
-                <h5>{totalDisplayValue?.toString()}</h5>
-              ) : (
-                <h3>{totalDisplayValue?.toString()}</h3>
-              )}
-            </SkeletonLoader>
-            <SkeletonLoader
-              className={classNames(
-                isPortfolioOverTimeDataIsFetched ? null : "h-6 w-16"
-              )}
-              isLoaded={isPortfolioOverTimeDataIsFetched}
-            >
-              <PortfolioPerformance
-                selectedDifference={selectedDifferencePricePretty}
-                selectedPercentage={selectedPercentageRatePretty}
-                formattedDate={formattedDate}
-                showDate={showDate}
-              />
-            </SkeletonLoader>
-          </div>
-          <div className="flex items-center gap-3 py-3">
-            <Button
-              className="flex items-center gap-2 !rounded-full"
-              onClick={() => startBridge({ direction: "deposit" })}
-            >
-              <Icon id="deposit" className=" h-4 w-4" height={16} width={16} />
-              <div className="subtitle1">{t("assets.table.depositButton")}</div>
-            </Button>
-            <Button
-              className="group flex items-center gap-2 !rounded-full !bg-osmoverse-825 text-wosmongton-200 hover:bg-gradient-positive hover:text-black hover:shadow-[0px_0px_30px_4px_rgba(57,255,219,0.2)]"
-              onClick={fiatRampSelection}
-            >
-              <CreditCardIcon
-                isAnimated
-                classes={{
-                  backCard: "group-hover:stroke-[2]",
-                  frontCard:
-                    "group-hover:fill-[#71B5EB] group-hover:stroke-[2]",
-                }}
-              />
-              <span className="subtitle1">{t("portfolio.buy")}</span>
-            </Button>
-            <Button
-              className="flex items-center gap-2 !rounded-full !bg-osmoverse-825 text-wosmongton-200"
-              onClick={() => startBridge({ direction: "withdraw" })}
-              disabled={totalValue && totalValue.toDec().isZero()}
-            >
-              <Icon id="withdraw" height={16} width={16} />
-              <div className="subtitle1">
-                {t("assets.table.withdrawButton")}
+          <header className="flex justify-between">
+            <div className="mr-6 flex flex-col">
+              <span className="body1 md:caption text-osmoverse-300">
+                {t("assets.totalBalance")}
+              </span>
+
+              <SkeletonLoader
+                className={classNames(
+                  `mt-2 ${isTotalValueFetched ? "" : "h-14 w-48"}`
+                )}
+                isLoaded={isTotalValueFetched}
+              >
+                {isMobile ? (
+                  <h5>{totalDisplayValue?.toString()}</h5>
+                ) : (
+                  <h3>{totalDisplayValue?.toString()}</h3>
+                )}
+              </SkeletonLoader>
+              <SkeletonLoader
+                className={classNames(
+                  isPortfolioOverTimeDataIsFetched ? "mt-2" : "mt-2 h-6 w-16"
+                )}
+                isLoaded={isPortfolioOverTimeDataIsFetched}
+              >
+                <PortfolioPerformance
+                  selectedDifference={selectedDifferencePricePretty}
+                  selectedPercentage={selectedPercentageRatePretty}
+                  formattedDate={formattedDate}
+                  showDate={showDate}
+                />
+              </SkeletonLoader>
+              <div className="flex items-center gap-3 pt-6">
+                <Button
+                  className="flex items-center gap-2 !rounded-full"
+                  onClick={() => startBridge({ direction: "deposit" })}
+                >
+                  <Icon
+                    id="deposit"
+                    className=" h-4 w-4"
+                    height={16}
+                    width={16}
+                  />
+                  <div className="subtitle1">
+                    {t("assets.table.depositButton")}
+                  </div>
+                </Button>
+                <Button
+                  className="group flex items-center gap-2 !rounded-full !bg-osmoverse-825 text-wosmongton-200 hover:bg-gradient-positive hover:text-black hover:shadow-[0px_0px_30px_4px_rgba(57,255,219,0.2)]"
+                  onClick={fiatRampSelection}
+                >
+                  <CreditCardIcon
+                    isAnimated
+                    classes={{
+                      backCard: "group-hover:stroke-[2]",
+                      frontCard:
+                        "group-hover:fill-[#71B5EB] group-hover:stroke-[2]",
+                    }}
+                  />
+                  <span className="subtitle1">{t("portfolio.buy")}</span>
+                </Button>
+                <Button
+                  className="flex items-center gap-2 !rounded-full !bg-osmoverse-825 text-wosmongton-200 hover:!bg-osmoverse-800"
+                  onClick={() => startBridge({ direction: "withdraw" })}
+                  disabled={totalValue && totalValue.toDec().isZero()}
+                >
+                  <Icon id="withdraw" height={16} width={16} />
+                  <div className="subtitle1">
+                    {t("assets.table.withdrawButton")}
+                  </div>
+                </Button>
               </div>
-            </Button>
-          </div>
-
-          <PortfolioHistoricalChart
-            data={portfolioOverTimeData as AreaData<Time>[]}
-            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);
-            }}
-          />
+            </div>
+            <Transition
+              show={isChartMinimized}
+              enter="transition ease-out duration-500"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition ease-out duration-500"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+              className="max-w-[20rem] grow"
+              as="div"
+            >
+              <button
+                className="group relative flex h-[12.5rem] w-full cursor-pointer flex-col overflow-hidden rounded-[1.25rem] bg-opacity-10 pt-3 hover:bg-osmoverse-900"
+                onMouseEnter={() => setIsHovering(true)}
+                onMouseLeave={() => setIsHovering(false)}
+                onClick={() => setIsChartMinimized(false)}
+              >
+                <PortfolioHistoricalChartMinimized
+                  data={portfolioOverTimeData as AreaData<Time>[]}
+                  isFetched={isPortfolioOverTimeDataIsFetched}
+                  error={error}
+                />
+                <div className="absolute z-50 h-full w-full">
+                  <Icon
+                    id="resize-expand"
+                    className="absolute top-4 right-4 text-osmoverse-200 opacity-0 transition-opacity duration-100 group-hover:opacity-100"
+                    height={16}
+                    width={16}
+                  />
+                </div>
+              </button>
+            </Transition>
+          </header>
+
+          <Transition
+            show={!isChartMinimized}
+            enter="ease-out duration-500 transition-opacity delay-[250ms]"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-out duration-[250ms] transition-opacity"
+            leaveFrom="opacity-100"
+            leaveTo=" opacity-0"
+            as="div"
+            unmount={false}
+            appear={true}
+            className="absolute top-full w-full"
+          >
+            <PortfolioHistoricalChart
+              setIsChartMinimized={setIsChartMinimized}
+              data={portfolioOverTimeData as AreaData<Time>[]}
+              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);
+              }}
+            />
+          </Transition>
         </>
       ) : (
         <GetStartedWithOsmosis />