Fix layout shift when nav to Portfolio page w collapsed chart (#3926)

* silence remote patterns warning * invalidate portfolio query on tx * mobile, prevent animation, format date on chart hover * improve mobile table * less padding around table * adjust
osmosis-labs · Oct 31, 2024 · b8012ce · b8012ce
1 parent 5277eab
commit b8012ce
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 35 deletions.
diff --git a/packages/web/components/complex/portfolio/assets-overview.tsx b/packages/web/components/complex/portfolio/assets-overview.tsx
@@ -24,7 +24,6 @@ import {
 import { PortfolioPerformance } from "~/components/complex/portfolio/performance";
 import { DataPoint } from "~/components/complex/portfolio/types";
 import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
-import { useFormatDate } from "~/components/transactions/transaction-utils";
 import { CustomClasses } from "~/components/types";
 import { Button } from "~/components/ui/button";
 import {
@@ -148,7 +147,6 @@ export const AssetsOverview: FunctionComponent<
   );
   const { isLoading: isWalletLoading } = useWalletSelect();
   const { isMobile, width } = useWindowSize();
-  const formatDate = useFormatDate();
 
   const address = wallet?.address ?? "";
 
@@ -187,21 +185,23 @@ export const AssetsOverview: FunctionComponent<
   const { selectedDifferencePricePretty, selectedPercentageRatePretty } =
     calculatePortfolioPerformance(portfolioOverTimeData, dataPoint);
 
-  const formattedDate = dataPoint.time
-    ? formatDate(dayjs.unix(dataPoint.time as number).format("YYYY-MM-DD"))
-    : undefined;
+  const formattedDate =
+    dataPoint.time && typeof dataPoint.time === "number"
+      ? dayjs(dataPoint.time * 1000).format(
+          range === "1d" || range === "7d" || range === "1mo" ? "lll" : "ll"
+        )
+      : undefined;
 
   const totalDisplayValue =
     dataPoint.value !== undefined
       ? new PricePretty(DEFAULT_VS_CURRENCY, new Dec(dataPoint.value))
       : totalValue?.toString();
 
-  const [_isChartMinimized, setIsChartMinimized] = useLocalStorage(
+  const [isChartMinimized_, setIsChartMinimized] = useLocalStorage(
     "is-portfolio-chart-minimized",
     true
   );
-
-  const isChartMinimized = width < Breakpoint.lg ? false : _isChartMinimized;
+  const isChartMinimized = isChartMinimized_ || width < Breakpoint.lg;
 
   const localizedPortfolioOverTimeData = useMemo(
     () => getLocalizedPortfolioOverTimeData(portfolioOverTimeData),
@@ -265,40 +265,51 @@ export const AssetsOverview: FunctionComponent<
               showDate={showDate}
             />
           </SkeletonLoader>
-          <div className="flex items-center gap-3 pt-6">
+          <div className="flex items-center gap-2 pt-6 lg:gap-1">
             <Button
-              className="flex h-[48px] !w-[125px] items-center gap-2 !rounded-full !p-0"
+              className="flex h-[48px] items-center gap-2 !rounded-full md:gap-1"
+              size={isMobile ? "xsm" : undefined}
               onClick={() => startBridge({ direction: "deposit" })}
             >
-              <Icon id="deposit" height={16} width={16} />
-              <div className="subtitle1">{t("assets.table.depositButton")}</div>
+              <Icon
+                id="deposit"
+                height={isMobile ? 12 : 16}
+                width={isMobile ? 12 : 16}
+              />
+              <div className="subtitle1 md:subtitle2">
+                {t("assets.table.depositButton")}
+              </div>
             </Button>
             <Button
-              className="group flex h-[48px] !w-[94px] items-center gap-2 !rounded-full !bg-osmoverse-825 !p-0 text-wosmongton-200 hover:bg-gradient-positive hover:text-black hover:shadow-[0px_0px_30px_4px_rgba(57,255,219,0.2)]"
+              className="group flex h-[48px] 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)] md:gap-1"
+              size={isMobile ? "xsm" : undefined}
               onClick={fiatRampSelection}
             >
               <CreditCardIcon
                 isAnimated
                 classes={{
+                  container: isMobile ? "!h-4 !w-4" : undefined,
                   backCard: "group-hover:stroke-[2]",
                   frontCard:
                     "group-hover:fill-[#71B5EB] group-hover:stroke-[2]",
                 }}
               />
-              <span className="subtitle1">{t("portfolio.buy")}</span>
+              <span className="subtitle1 md:subtitle2">
+                {t("portfolio.buy")}
+              </span>
             </Button>
             <Button
-              className="flex h-[48px] !w-[141px] items-center gap-2 !rounded-full !bg-osmoverse-825 !p-0 text-wosmongton-200 hover:!bg-osmoverse-800"
+              className="flex h-[48px] items-center gap-2 !rounded-full !bg-osmoverse-825 text-wosmongton-200 hover:!bg-osmoverse-800 md:gap-1"
+              size={isMobile ? "xsm" : undefined}
               onClick={() => startBridge({ direction: "withdraw" })}
               disabled={totalValue && totalValue?.toDec()?.isZero()}
             >
               <Icon
                 id="withdraw"
-                height={16}
-                width={16}
-                className="!h-4 !w-4"
+                height={isMobile ? 12 : 16}
+                width={isMobile ? 12 : 16}
               />
-              <div className="subtitle1">
+              <div className="subtitle1 md:subtitle2">
                 {t("assets.table.withdrawButton")}
               </div>
             </Button>
@@ -313,7 +324,7 @@ export const AssetsOverview: FunctionComponent<
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
           className={classNames(
-            "mt-auto flex h-[156px] w-full flex-col items-end",
+            "mt-auto flex h-[156px] w-full flex-col items-end lg:hidden",
             "w-full max-w-[344px]",
             "xl:w-[383px] xl:max-w-[383px]",
             "lg:w-[312px] lg:max-w-[312px]"
@@ -353,11 +364,11 @@ export const AssetsOverview: FunctionComponent<
         enterTo="opacity-100"
         leave="ease-out duration-[250ms] transition-opacity"
         leaveFrom="opacity-100"
-        leaveTo=" opacity-0"
+        leaveTo="opacity-0"
         as="div"
         unmount={false}
         appear={true}
-        className="absolute top-full w-full"
+        className="absolute top-full w-full lg:hidden"
       >
         <PortfolioHistoricalChart
           setIsChartMinimized={setIsChartMinimized}

diff --git a/packages/web/components/complex/portfolio/portfolio-page.tsx b/packages/web/components/complex/portfolio/portfolio-page.tsx
@@ -93,11 +93,14 @@ export const PortfolioPage: FunctionComponent = observer(() => {
                     }}
                   >
                     {({ selected }) => (
-                      <h6
-                        className={!selected ? "text-osmoverse-500" : undefined}
+                      <div
+                        className={classNames(
+                          !selected ? "text-osmoverse-500" : undefined,
+                          "h6 md:subtitle1"
+                        )}
                       >
                         {t("portfolio.yourBalances")}
-                      </h6>
+                      </div>
                     )}
                   </Tab>
                   <Tab
@@ -111,11 +114,14 @@ export const PortfolioPage: FunctionComponent = observer(() => {
                     }}
                   >
                     {({ selected }) => (
-                      <h6
-                        className={!selected ? "text-osmoverse-500" : undefined}
+                      <div
+                        className={classNames(
+                          !selected ? "text-osmoverse-500" : undefined,
+                          "h6 md:subtitle1"
+                        )}
                       >
                         {t("portfolio.yourPositions")}
-                      </h6>
+                      </div>
                     )}
                   </Tab>
                 </TabList>

diff --git a/packages/web/components/table/portfolio-asset-balances.tsx b/packages/web/components/table/portfolio-asset-balances.tsx
@@ -325,7 +325,7 @@ export const PortfolioAssetBalancesTable: FunctionComponent<{
         }}
       />
       <SearchBox
-        className="my-3 !w-[33.25rem] xl:!w-96"
+        className="my-3 !w-[33.25rem] xl:!w-96 md:!w-full"
         currentValue={searchQuery?.query ?? ""}
         onInput={onSearchInput}
         placeholder={t("portfolio.searchBalances")}
@@ -338,7 +338,7 @@ export const PortfolioAssetBalancesTable: FunctionComponent<{
             "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress"
         )}
       >
-        <thead>
+        <thead className="sm:hidden">
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header, index, headers) => (

diff --git a/packages/web/components/transactions/transaction-utils.tsx b/packages/web/components/transactions/transaction-utils.tsx
@@ -2,13 +2,13 @@ import { FormattedTransaction } from "@osmosis-labs/server";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import isYesterday from "dayjs/plugin/isYesterday";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { useTranslation } from "hooks";
 
-dayjs.extend(relativeTime);
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
 
+// TODO: move this to formatter or colocate with transactions files. Can import `t` directly. Then delete this file
+
 export const groupTransactionsByDate = (
   transactions: FormattedTransaction[]
 ): Record<string, FormattedTransaction[]> => {

diff --git a/packages/web/next.config.js b/packages/web/next.config.js
@@ -7,7 +7,20 @@ const path = require("path");
 const config = {
   reactStrictMode: true,
   images: {
-    domains: ["app.osmosis.zone", "raw.githubusercontent.com", "pbs.twimg.com"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "app.osmosis.zone",
+      },
+      {
+        protocol: "https",
+        hostname: "raw.githubusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "pbs.twimg.com",
+      },
+    ],
   },
   async headers() {
     return [

diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import duration from "dayjs/plugin/duration";
 import isBetween from "dayjs/plugin/isBetween";
+import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
 import utc from "dayjs/plugin/utc";
@@ -62,6 +63,7 @@ dayjs.extend(duration);
 dayjs.extend(utc);
 dayjs.extend(updateLocale);
 dayjs.extend(isBetween);
+dayjs.extend(localizedFormat);
 dayjs.updateLocale("es", dayjsLocaleEs);
 dayjs.updateLocale("ko", dayjsLocaleKo);
 enableStaticRendering(typeof window === "undefined");

diff --git a/packages/web/stores/index.tsx b/packages/web/stores/index.tsx
@@ -29,6 +29,7 @@ export function refetchUserQueries(apiUtils: ReturnType<typeof api.useUtils>) {
   apiUtils.local.bridgeTransfer.getSupportedAssetsBalances.invalidate();
   apiUtils.edge.assets.getImmersiveBridgeAssets.invalidate();
   apiUtils.local.orderbooks.getAllOrdersSQS.invalidate();
+  apiUtils.local.portfolio.getAllocation.invalidate();
 }
 
 const EXCEEDS_1CT_NETWORK_FEE_LIMIT_TOAST_ID = "exceeds-1ct-network-fee-limit";

diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css
@@ -103,7 +103,7 @@
   /* Global table style */
 
   table {
-    @apply w-full table-fixed border-collapse text-left md:w-full;
+    @apply w-full table-fixed border-collapse bg-osmoverse-1000 text-left md:w-full;
   }
 
   thead > tr {
@@ -123,7 +123,7 @@
   }
 
   tbody > tr > td {
-    @apply p-4 text-right;
+    @apply p-4 text-right md:px-1;
   }
 
   tbody > tr > td:first-child {