show position details on trade page when viewing mngo accts

components/AccountInfo.tsx

@@ -30,6 +30,7 @@ import useMangoAccount from '../hooks/useMangoAccount'
 import Loading from './Loading'
 import CreateAlertModal from './CreateAlertModal'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { useRouter } from 'next/router'
 
 const I80F48_100 = I80F48.fromString('100')
 
@@ -48,6 +49,8 @@ export default function AccountInfo() {
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
   const [showAlertsModal, setShowAlertsModal] = useState(false)
+  const router = useRouter()
+  const { pubkey } = router.query
 
   const canWithdraw =
     mangoAccount?.owner && publicKey
@@ -154,7 +157,9 @@ export default function AccountInfo() {
   return (
     <>
       <div
-        className={!connected && !isMobile ? 'blur-sm filter' : undefined}
+        className={
+          !connected && !isMobile && !pubkey ? 'blur-sm filter' : undefined
+        }
         id="account-details-tip"
       >
         {!isMobile ? (

components/FloatingElement.tsx

@@ -6,6 +6,7 @@ import EmptyState from './EmptyState'
 import { useTranslation } from 'next-i18next'
 import { handleWalletConnect } from 'components/ConnectWalletButton'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { useRouter } from 'next/router'
 
 interface FloatingElementProps {
   className?: string
@@ -21,6 +22,8 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
   const { wallet, connected } = useWallet()
   const { uiLocked } = useMangoStore((s) => s.settings)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const router = useRouter()
+  const { pubkey } = router.query
 
   const handleConnect = useCallback(() => {
     if (wallet) {
@@ -32,7 +35,7 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
     <div
       className={`thin-scroll relative overflow-auto overflow-x-hidden rounded-lg bg-th-bkg-2 p-2.5 md:p-4 ${className}`}
     >
-      {!connected && showConnect ? (
+      {!connected && showConnect && !pubkey ? (
         <div className="absolute top-0 left-0 z-10 h-full w-full">
           <div className="relative z-10 flex h-full flex-col items-center justify-center">
             <EmptyState

components/MarketBalances.tsx

@@ -7,6 +7,7 @@ import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
 import { useTranslation } from 'next-i18next'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { useRouter } from 'next/router'
 
 export default function MarketBalances() {
   const { t } = useTranslation('common')
@@ -23,6 +24,8 @@ export default function MarketBalances() {
   const baseSymbol = marketConfig.baseSymbol
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.sm : false
+  const router = useRouter()
+  const { pubkey } = router.query
 
   const handleSizeClick = (size, symbol) => {
     if (!selectedMarket || !mangoGroup || !mangoGroupCache) return
@@ -63,7 +66,7 @@ export default function MarketBalances() {
   if (!mangoGroup || !selectedMarket || !mangoGroupCache) return null
 
   return (
-    <div className={!connected ? 'blur filter' : ''}>
+    <div className={!connected && !pubkey ? 'blur filter' : ''}>
       {!isMobile ? (
         <ElementTitle className="hidden 2xl:flex">{t('balances')}</ElementTitle>
       ) : null}

components/MarketPosition.tsx

@@ -21,6 +21,7 @@ import { breakpoints } from './TradePageGrid'
 import { useTranslation } from 'next-i18next'
 import useMangoAccount from '../hooks/useMangoAccount'
 import { useWallet, Wallet } from '@solana/wallet-adapter-react'
+import { useRouter } from 'next/router'
 
 export const settlePosPnl = async (
   perpMarkets: PerpMarket[],
@@ -154,6 +155,8 @@ export default function MarketPosition() {
   const perpAccounts = useMangoStore((s) => s.selectedMangoAccount.perpAccounts)
   const baseSymbol = marketConfig.baseSymbol
   const marketName = marketConfig.name
+  const router = useRouter()
+  const { pubkey } = router.query
 
   const [showMarketCloseModal, setShowMarketCloseModal] = useState(false)
   const [settling, setSettling] = useState(false)
@@ -230,7 +233,7 @@ export default function MarketPosition() {
   return (
     <>
       <div
-        className={!connected && !isMobile ? 'blur-sm filter' : ''}
+        className={!connected && !isMobile && !pubkey ? 'blur-sm filter' : ''}
         id="perp-positions-tip"
       >
         {!isMobile ? (