Set 1d, update loading skeleton

osmosis-labs · Aug 13, 2024 · 0892973 · 0892973
1 parent 1224db8
commit 0892973
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/packages/web/components/chart/historical-chart.tsx b/packages/web/components/chart/historical-chart.tsx
@@ -179,8 +179,8 @@ export const HistoricalChartHeader: FunctionComponent<{
 
 export const HistoricalChartSkeleton = ({ hideScales = false }) => {
   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">
+    <div className="flex h-full w-full grow flex-row gap-3">
+      <div className="flex grow flex-col items-end justify-end">
         <svg
           className="h-auto w-full animate-pulse"
           viewBox="0 0 700 346"

diff --git a/packages/web/components/complex/portfolio/assets-overview.tsx b/packages/web/components/complex/portfolio/assets-overview.tsx
@@ -74,8 +74,8 @@ export const AssetsOverview: FunctionComponent<
   const { accountStore } = useStore();
   const wallet = accountStore.getWallet(accountStore.osmosisChainId);
   const { t } = useTranslation();
-  const { startBridge, fiatRampSelection } = useBridge();
   const { isLoading: isWalletLoading } = useWalletSelect();
+  const { startBridge, fiatRampSelection } = useBridge();
   const { isMobile } = useWindowSize();
   const formatDate = useFormatDate();
 
@@ -88,7 +88,7 @@ export const AssetsOverview: FunctionComponent<
     value: 0,
   });
 
-  const [range, setRange] = useState<Range>("1mo");
+  const [range, setRange] = useState<Range>("1d");
 
   const {
     data: portfolioOverTimeData,
@@ -124,7 +124,8 @@ export const AssetsOverview: FunctionComponent<
     new PricePretty(DEFAULT_VS_CURRENCY, new Dec(dataPoint.value || 0)) ||
     totalValue?.toString();
 
-  const [isChartMinimized, setIsChartMinimized] = useState(true);
+  // const [isChartMinimized, setIsChartMinimized] = useState(true);
+  const [isChartMinimized, setIsChartMinimized] = useState(false);
 
   if (isWalletLoading) return null;
 

diff --git a/packages/web/components/complex/portfolio/historical-chart.tsx b/packages/web/components/complex/portfolio/historical-chart.tsx
@@ -40,15 +40,15 @@ export const PortfolioHistoricalChart = ({
   const { logEvent } = useAmplitudeAnalytics();
 
   return (
-    <section className="relative flex h-[468px] flex-col justify-between">
-      <div className="w-full grow pt-4">
-        {error ? (
-          <div className="error-message flex h-full items-center justify-center">
-            {t("errors.generic")}
-          </div>
-        ) : !isFetched ? (
-          <HistoricalChartSkeleton />
-        ) : (
+    <section className="relative flex h-[468px] max-h-[468px] flex-col justify-between">
+      {error ? (
+        <div className="error-message flex h-full items-center justify-center">
+          {t("errors.generic")}
+        </div>
+      ) : !isFetched ? (
+        <HistoricalChartSkeleton />
+      ) : (
+        <>
           <HistoricalChart
             data={data as AreaData<Time>[]}
             onPointerHover={(value, time) => {
@@ -58,27 +58,27 @@ export const PortfolioHistoricalChart = ({
             }}
             onPointerOut={resetDataPoint}
           />
-        )}
-      </div>
-      <div className="my-3 flex justify-between">
-        <PortfolioHistoricalRangeButtonGroup
-          priceRange={range}
-          setPriceRange={setRange}
-        />
-        <IconButton
-          className="border border-osmoverse-700 py-0"
-          aria-label="Open main menu dropdown"
-          icon={
-            <Icon
-              id="resize-minimize"
-              className="text-osmoverse-200"
-              height={16}
-              width={16}
+          <div className="my-3 flex justify-between">
+            <PortfolioHistoricalRangeButtonGroup
+              priceRange={range}
+              setPriceRange={setRange}
+            />
+            <IconButton
+              className="border border-osmoverse-700 py-0"
+              aria-label="Open main menu dropdown"
+              icon={
+                <Icon
+                  id="resize-minimize"
+                  className="text-osmoverse-200"
+                  height={16}
+                  width={16}
+                />
+              }
+              onClick={() => setIsChartMinimized(true)}
             />
-          }
-          onClick={() => setIsChartMinimized(true)}
-        />
-      </div>
+          </div>
+        </>
+      )}
     </section>
   );
 };