Merge pull request #4020 from osmosis-labs/stage

Publish stage
osmosis-labs · Dec 18, 2024 · e330157 · e330157
2 parents dfd55ca + 4d338e4
commit e330157
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 50 deletions.
diff --git a/packages/server/src/queries/complex/assets/market.ts b/packages/server/src/queries/complex/assets/market.ts
@@ -31,14 +31,13 @@ const marketInfoCache = new LRUCache<string, CacheEntry>(DEFAULT_LRU_OPTIONS);
 /** Cached function that returns an asset with market info included. */
 export async function getMarketAsset<TAsset extends MinimalAsset>({
   asset,
-  extended = false,
+  includeTotalSupply = false,
   ...params
 }: {
   assetLists: AssetList[];
   chainList: Chain[];
   asset: TAsset;
-  /** Include total supply. */
-  extended?: boolean;
+  includeTotalSupply?: boolean;
 }): Promise<TAsset & AssetMarketInfo> {
   const assetMarket = await cachified({
     cache: marketInfoCache,
@@ -49,7 +48,7 @@ export async function getMarketAsset<TAsset extends MinimalAsset>({
         getAssetMarketActivity(asset).catch((e) =>
           captureErrorAndReturn(e, undefined)
         ),
-        extended
+        includeTotalSupply
           ? querySupplyTotal({
               ...params,
               denom: asset.coinMinimalDenom,

diff --git a/packages/trpc/src/assets.ts b/packages/trpc/src/assets.ts
@@ -213,7 +213,7 @@ export const assetsRouter = createTRPCRouter({
       });
       const userMarketAsset = await getMarketAsset({
         ...ctx,
-        extended: true,
+        includeTotalSupply: true,
         asset: userAsset,
       });
 

diff --git a/packages/web/components/bridge/amount-and-review-screen.tsx b/packages/web/components/bridge/amount-and-review-screen.tsx
@@ -139,6 +139,9 @@ export const AmountAndReviewScreen = observer(
     const { supportedAssetsByChainId: counterpartySupportedAssetsByChainId } =
       supportedAssets;
 
+    const hasSupportedChains =
+      !supportedAssets.isLoading && supportedAssets.supportedChains.length > 0;
+
     /** Filter for bridges for the current to/from chain/asset selection. */
     const supportedBridgeInfo = useMemo<SupportedBridgeInfo>(() => {
       if (!fromAsset || !toAsset || !fromChain || !toChain)
@@ -283,6 +286,7 @@ export const AmountAndReviewScreen = observer(
               isLoadingAssetsInOsmosis={isLoadingAssetsInOsmosis}
               bridgesSupportedAssets={supportedAssets}
               supportedBridgeInfo={supportedBridgeInfo}
+              hasSupportedChains={hasSupportedChains}
               fromChain={fromChain}
               setFromChain={setFromChain}
               toChain={toChain}

diff --git a/packages/web/components/bridge/amount-screen.tsx b/packages/web/components/bridge/amount-screen.tsx
@@ -84,6 +84,7 @@ interface AmountScreenProps {
 
   bridgesSupportedAssets: ReturnType<typeof useBridgesSupportedAssets>;
   supportedBridgeInfo: SupportedBridgeInfo;
+  hasSupportedChains: boolean;
 
   fromChain: BridgeChainWithDisplayInfo | undefined;
   setFromChain: (chain: BridgeChainWithDisplayInfo) => void;
@@ -125,6 +126,7 @@ export const AmountScreen = observer(
       isLoading: isLoadingSupportedAssets,
     },
     supportedBridgeInfo,
+    hasSupportedChains,
 
     fromChain,
     setFromChain,
@@ -664,9 +666,13 @@ export const AmountScreen = observer(
       isLoadingAssetsInOsmosis ||
       !canonicalAsset ||
       !canonicalAssetPrice ||
-      (direction === "withdraw"
-        ? !fromChain || !fromAsset
-        : !toChain || !toAsset);
+      // If we don't have supported chains, we won't have a fromAsset or toAsset
+      // so we can't consider the loading state.
+      // therefore we only consider the loading state if we have supported chains.
+      (hasSupportedChains &&
+        (direction === "withdraw"
+          ? !fromChain || !fromAsset
+          : !toChain || !toAsset));
 
     const shouldShowAssetDropdown = useMemo(() => {
       return direction === "deposit"
@@ -830,7 +836,8 @@ export const AmountScreen = observer(
      */
     if (
       !isLoading &&
-      (areAssetTransfersDisabled ||
+      (!hasSupportedChains ||
+        areAssetTransfersDisabled ||
         !fromChain ||
         !fromAsset ||
         !toChain ||
@@ -840,11 +847,22 @@ export const AmountScreen = observer(
     ) {
       return (
         <>
-          {chainSelection}
+          {hasSupportedChains && chainSelection}
           <OnlyExternalBridgeSuggest
             direction={direction}
             toChain={toChain}
-            toAsset={toAsset}
+            toAsset={
+              // If we haven't supported a chain, we can't suggest an asset
+              // so we use the canonical asset as a fallback
+              canonicalAsset && !toAsset && !hasSupportedChains
+                ? {
+                    address: canonicalAsset?.coinMinimalDenom,
+                    decimals: canonicalAsset?.coinDecimals,
+                    denom: canonicalAsset?.coinDenom,
+                    coinGeckoId: canonicalAsset?.coinGeckoId,
+                  }
+                : toAsset
+            }
             canonicalAssetDenom={canonicalAsset?.coinDenom}
             fromChain={fromChain}
             fromAsset={fromAsset}

diff --git a/packages/web/components/chart/asset-breakdown.tsx b/packages/web/components/chart/asset-breakdown.tsx
@@ -19,7 +19,13 @@ export const AssetBreakdownChart: FunctionComponent<{
   }[];
   totalWeight: IntPretty;
   colorCycle?: typeof ColorCycle;
-}> = ({ assets, totalWeight, colorCycle = ColorCycle }) => {
+  hideWeights?: boolean;
+}> = ({
+  assets,
+  totalWeight,
+  colorCycle = ColorCycle,
+  hideWeights = false,
+}) => {
   const { isMobile, width } = useWindowSize();
 
   const assetPercentages = assets.map(({ weight }) =>
@@ -55,8 +61,8 @@ export const AssetBreakdownChart: FunctionComponent<{
                 className="subtitle1 md:body2 text-osmoverse-400"
                 title={amount.currency.coinDenom}
               >
-                {truncate(amount.currency.coinDenom, isMobile ? 6 : 12)}:{" "}
-                {assetPercentages[index].toString()}%
+                {truncate(amount.currency.coinDenom, isMobile ? 6 : 12)}
+                {!hideWeights && <>: {assetPercentages[index].toString()}%</>}
               </span>
             </div>
             <h6 className="md:subtitle2 text-osmoverse-100">

diff --git a/packages/web/components/navbar-osmo-price.tsx b/packages/web/components/navbar-osmo-price.tsx
@@ -1,4 +1,3 @@
-import { makeMinimalAsset } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
@@ -9,18 +8,13 @@ import { CreditCardIcon } from "~/components/assets/credit-card-icon";
 import { Sparkline } from "~/components/chart/sparkline";
 import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { Button } from "~/components/ui/button";
-import { AssetLists } from "~/config/generated/asset-lists";
 import { useFeatureFlags, useTranslation } from "~/hooks";
 import { useBridgeStore } from "~/hooks/bridge";
 import { useStore } from "~/stores";
 import { theme } from "~/tailwind.config";
+import { formatPretty } from "~/utils/formatter";
 import { api } from "~/utils/trpc";
 
-const osmoAsset = AssetLists.flatMap(({ assets }) => assets).find(
-  (asset) => asset.symbol === "OSMO"
-);
-const osmoCurrency = makeMinimalAsset(osmoAsset!);
-
 export const NavbarOsmoPrice = observer(() => {
   const { accountStore, chainStore } = useStore();
   const { t } = useTranslation();
@@ -29,30 +23,33 @@ export const NavbarOsmoPrice = observer(() => {
   const { chainId } = chainStore.osmosis;
   const wallet = accountStore.getWallet(chainId);
 
-  const { data: osmoPrice } = api.edge.assets.getAssetPrice.useQuery(
-    { coinMinimalDenom: osmoCurrency?.coinMinimalDenom ?? "" },
-    { enabled: Boolean(osmoCurrency) }
-  );
+  const { data: osmo } = api.edge.assets.getMarketAsset.useQuery({
+    findMinDenomOrSymbol: "OSMO",
+  });
 
-  if (!osmoPrice || !osmoCurrency) return null;
+  if (!osmo || !osmo.currentPrice) return null;
 
   return (
     <div className="flex flex-col gap-6 px-2">
       <div className="flex items-center justify-between px-2">
-        <SkeletonLoader isLoaded={osmoPrice.isReady} className="min-w-[70px]">
+        <SkeletonLoader
+          isLoaded={osmo.currentPrice.isReady}
+          className="min-w-[70px]"
+        >
           <div className="flex items-center gap-1">
             <div className="h-[20px] w-[20px]">
               <Image
-                src={osmoCurrency.coinImageUrl!}
+                src={osmo.coinImageUrl!}
                 alt="Osmo icon"
                 width={20}
                 height={20}
               />
             </div>
 
             <p className="mt-[3px]">
-              {osmoPrice.fiatCurrency.symbol}
-              {Number(osmoPrice.toDec().toString()).toFixed(2)}
+              {formatPretty(osmo.currentPrice, {
+                maxDecimals: 2,
+              })}
             </p>
           </div>
         </SkeletonLoader>
@@ -61,7 +58,7 @@ export const NavbarOsmoPrice = observer(() => {
       </div>
 
       {wallet?.isWalletConnected && (
-        <SkeletonLoader isLoaded={osmoPrice.isReady}>
+        <SkeletonLoader isLoaded={osmo.currentPrice.isReady}>
           <Button
             variant="outline"
             className="button group relative flex w-full items-center justify-center gap-2 overflow-hidden !rounded-full border-osmoverse-700 font-bold text-osmoverse-100 transition-all duration-300 ease-in-out hover:border-none hover:bg-gradient-positive hover:text-osmoverse-1000"

diff --git a/packages/web/components/pool-detail/base-pool.tsx b/packages/web/components/pool-detail/base-pool.tsx
@@ -95,6 +95,7 @@ export const BasePoolDetails: FunctionComponent<{
                   amount: coin,
                 }))}
                 totalWeight={new IntPretty(pool.reserveCoins.length)}
+                hideWeights={pool.type === "concentrated"}
               />
             </div>
           </div>

diff --git a/packages/web/hooks/one-click-trading/use-one-click-trading-swap-review.ts b/packages/web/hooks/one-click-trading/use-one-click-trading-swap-review.ts
@@ -40,9 +40,9 @@ const use1CTSwapReviewStore = create<{
 }));
 
 export function useOneClickTradingSwapReview({
-  isModalOpen,
+  enabled,
 }: {
-  isModalOpen: boolean;
+  enabled: boolean;
 }) {
   const [previousIsOneClickEnabled, setPreviousIsOneClickEnabled] =
     useLocalStorage("previous-one-click-enabled", true);
@@ -76,36 +76,36 @@ export function useOneClickTradingSwapReview({
   const isLoading = isLoadingInfo;
 
   useEffect(() => {
-    if (isModalOpen) {
+    if (enabled) {
       use1CTSwapReviewStore
         .getState()
         .setTransaction1CTParams(transactionParams);
     }
-  }, [transactionParams, isModalOpen]);
+  }, [transactionParams, enabled]);
 
   useEffect(() => {
-    if (isModalOpen) {
+    if (enabled) {
       use1CTSwapReviewStore
         .getState()
         .setSpendLimitTokenDecimals(spendLimitTokenDecimals);
     }
-  }, [isModalOpen, spendLimitTokenDecimals]);
+  }, [enabled, spendLimitTokenDecimals]);
 
   useEffect(() => {
-    if (isModalOpen) {
+    if (enabled) {
       use1CTSwapReviewStore.getState().setChanges(changes);
     }
-  }, [isModalOpen, changes]);
+  }, [enabled, changes]);
 
   useEffect(() => {
-    if (!isModalOpen) {
+    if (!enabled) {
       const state = use1CTSwapReviewStore.getState();
       resetParams();
       state.setTransaction1CTParams(undefined);
       state.setSpendLimitTokenDecimals(undefined);
       state.setChanges(undefined);
     }
-  }, [isModalOpen, resetParams]);
+  }, [enabled, resetParams]);
 
   return {
     isEnabled,

diff --git a/packages/web/modals/review-order.tsx b/packages/web/modals/review-order.tsx
@@ -131,7 +131,7 @@ export function ReviewOrder({
     setTransactionParams: setTransaction1CTParams,
     resetParams: reset1CTParams,
     setPreviousIsOneClickEnabled,
-  } = useOneClickTradingSwapReview({ isModalOpen: isOpen });
+  } = useOneClickTradingSwapReview({ enabled: isOpen && show1CT });
 
   const wouldExceedSpendLimit = useMemo(() => {
     if (!is1CTEnabled) return false;

diff --git a/packages/web/pages/assets/index.tsx b/packages/web/pages/assets/index.tsx
@@ -1,11 +1,19 @@
 import type { NextPage } from "next";
 
 import { AssetsInfoTable } from "~/components/table/asset-info";
+import { EventName } from "~/config";
+import { useAmplitudeAnalytics } from "~/hooks";
 
-const Assets: NextPage = () => (
-  <main className="mx-auto max-w-container p-8 pt-4 md:p-4">
-    <AssetsInfoTable tableTopPadding={16} />
-  </main>
-);
+const Assets: NextPage = () => {
+  useAmplitudeAnalytics({
+    onLoadEvent: [EventName.Assets.pageViewed],
+  });
+
+  return (
+    <main className="mx-auto max-w-container p-8 pt-4 md:p-4">
+      <AssetsInfoTable tableTopPadding={16} />
+    </main>
+  );
+};
 
 export default Assets;
diff --git a/packages/web/pages/earn/index.tsx b/packages/web/pages/earn/index.tsx
@@ -70,7 +70,9 @@ function Earn() {
     unclaimedRewards,
   } = useGetEarnStrategies(userOsmoAddress, isWalletConnected);
 
-  const { logEvent } = useAmplitudeAnalytics();
+  useAmplitudeAnalytics({
+    onLoadEvent: [EventName.EarnPage.pageViewed],
+  });
 
   const defaultFilters: Filters = useMemo(
     () => ({
@@ -99,8 +101,7 @@ function Earn() {
     if (!earnPage && _isInitialized) {
       router.push("/");
     }
-    logEvent([EventName.EarnPage.pageViewed]);
-  }, [earnPage, router, _isInitialized, logEvent]);
+  }, [earnPage, router, _isInitialized]);
 
   return (
     <div className="relative mx-auto flex max-w-[1508px] flex-col gap-10 py-10 pl-8 pr-9">
-Original file line number
+Diff line change
@@ Expand Up / @@ -95,6 +95,7 @@ export const BasePoolDetails: FunctionComponent<{ @@
                       amount: coin,
                     }))}
                     totalWeight={new IntPretty(pool.reserveCoins.length)}
+                    hideWeights={pool.type === "concentrated"}
                   />
                 </div>
               </div>
@@ Expand Down @@