Merge with stage

osmosis-labs · Aug 9, 2024 · 1e58d53 · 1e58d53
2 parents c4bb472 + 64943c6
commit 1e58d53
Show file tree

Hide file tree

Showing 31 changed files with 328 additions and 226 deletions.
diff --git a/packages/web/components/assets/highlights-categories.tsx b/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,
   };

diff --git 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 (
-    <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"

diff --git a/packages/web/components/bridge/use-bridge-quotes.ts b/packages/web/components/bridge/use-bridge-quotes.ts
@@ -315,9 +315,7 @@ export const useBridgeQuotes = ({
 
     const bestQuote = quoteResults_
       // only those that have fetched
-      .filter(
-        (quoteResult) => 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
@@ -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 = ({ 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">
@@ -202,7 +224,21 @@ export const HistoricalChartSkeleton = () => {
           </defs>
         </svg>
 
-        <div className="flex w-full flex-row justify-between py-3">
+        {!hideScales && (
+          <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>
+
+      {!hideScales && (
+        <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>
   );
 };