diff --git a/packages/server/src/queries/complex/assets/market.ts b/packages/server/src/queries/complex/assets/market.ts index 7f54da58a5..a1336a0eb4 100644 --- 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(DEFAULT_LRU_OPTIONS); /** Cached function that returns an asset with market info included. */ export async function getMarketAsset({ asset, - extended = false, + includeTotalSupply = false, ...params }: { assetLists: AssetList[]; chainList: Chain[]; asset: TAsset; - /** Include total supply. */ - extended?: boolean; + includeTotalSupply?: boolean; }): Promise { const assetMarket = await cachified({ cache: marketInfoCache, @@ -49,7 +48,7 @@ export async function getMarketAsset({ 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 index 9be03650cd..58da91f0ab 100644 --- 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 index 2f4e565286..c619858441 100644 --- 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(() => { 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 index 3bb2dc80a5..a2215a3a88 100644 --- a/packages/web/components/bridge/amount-screen.tsx +++ b/packages/web/components/bridge/amount-screen.tsx @@ -84,6 +84,7 @@ interface AmountScreenProps { bridgesSupportedAssets: ReturnType; 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} = ({ 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()}%}
diff --git a/packages/web/components/navbar-osmo-price.tsx b/packages/web/components/navbar-osmo-price.tsx index 786e6e7647..ae3084e1ce 100644 --- 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,21 +23,23 @@ 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 (
- +
Osmo icon {

- {osmoPrice.fiatCurrency.symbol} - {Number(osmoPrice.toDec().toString()).toFixed(2)} + {formatPretty(osmo.currentPrice, { + maxDecimals: 2, + })}

@@ -61,7 +58,7 @@ export const NavbarOsmoPrice = observer(() => {
{wallet?.isWalletConnected && ( - +
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 index 9a525575ed..8db595e6a4 100644 --- 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 index d484e347a6..9cc211564a 100644 --- 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 index f7919943cc..bddc813e5c 100644 --- 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 = () => ( -
- -
-); +const Assets: NextPage = () => { + useAmplitudeAnalytics({ + onLoadEvent: [EventName.Assets.pageViewed], + }); + + return ( +
+ +
+ ); +}; export default Assets; diff --git a/packages/web/pages/earn/index.tsx b/packages/web/pages/earn/index.tsx index d023b3a0cf..32025db9bc 100644 --- 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 (