expand trading view component by reducing padding

components/FeeDiscountsTable.tsx

@@ -17,6 +17,7 @@ import { useState } from 'react'
 const FeeDiscountsTable = () => {
   const { t } = useTranslation('common')
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const connected = useMangoStore((s) => s.wallet.connected)
   const walletTokens = useMangoStore((s) => s.wallet.tokens)
   const { totalSrm, totalMsrm, rates } = useSrmAccount()
   const [showDeposit, setShowDeposit] = useState(false)
@@ -78,7 +79,7 @@ const FeeDiscountsTable = () => {
             </div>
           </div>
         </div>
-        {mangoAccount ? (
+        {connected && mangoAccount ? (
           <div className="flex justify-center mt-6">
             <Button
               onClick={() => setShowDeposit(true)}

components/TradeHistoryTable.tsx

@@ -83,6 +83,7 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
         <div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
           {tradeHistory && tradeHistory.length ? (
             !isMobile ? (
+              <>
                 <Table>
                   <thead>
                     <TrHead>
@@ -250,7 +251,8 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
                           </Td>
                           <Td>{trade.size}</Td>
                           <Td>
-                          ${new Intl.NumberFormat('en-US').format(trade.price)}
+                            $
+                            {new Intl.NumberFormat('en-US').format(trade.price)}
                           </Td>
                           <Td>{formatUsdValue(trade.value)}</Td>
                           <Td>{trade.liquidity}</Td>
@@ -267,6 +269,25 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
                     })}
                   </tbody>
                 </Table>
+                {numTrades && items.length > numTrades ? (
+                  <div className="flex items-center justify-center mt-4">
+                    <Link href="/account" shallow={true}>
+                      {t('view-all-trades')}
+                    </Link>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-end">
+                    <Pagination
+                      page={page}
+                      totalPages={totalPages}
+                      nextPage={nextPage}
+                      lastPage={lastPage}
+                      firstPage={firstPage}
+                      previousPage={previousPage}
+                    />
+                  </div>
+                )}
+              </>
             ) : (
               paginatedData.map((trade: any, index) => (
                 <ExpandableRow
@@ -356,24 +377,6 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
               ) : null}
             </div>
           )}
-          {numTrades && items.length > numTrades ? (
-            <div className="flex items-center justify-center mt-4">
-              <Link href="/account" shallow={true}>
-                {t('view-all-trades')}
-              </Link>
-            </div>
-          ) : (
-            <div className="flex items-center justify-end">
-              <Pagination
-                page={page}
-                totalPages={totalPages}
-                nextPage={nextPage}
-                lastPage={lastPage}
-                firstPage={firstPage}
-                previousPage={previousPage}
-              />
-            </div>
-          )}
         </div>
       </div>
     </div>

components/TradePageGrid.tsx

@@ -138,7 +138,7 @@ const TradePageGrid = () => {
         useCSSTransforms={false}
       >
         <div key="tvChart">
-          <FloatingElement className="h-full pl-0">
+          <FloatingElement className="h-full pl-0 md:pl-0 md:pr-1 md:pb-1 md:pt-3">
             <TVChartContainer />
           </FloatingElement>
         </div>
@@ -154,7 +154,7 @@ const TradePageGrid = () => {
           </FloatingElement>
         </div>
         <div key="userInfo">
-          <FloatingElement className="h-full" showConnect>
+          <FloatingElement className="h-full">
             <UserInfo />
           </FloatingElement>
         </div>

components/TradingView/index.tsx

@@ -81,7 +81,7 @@ const TVChartContainer = () => {
   const tvWidgetRef = useRef<IChartingLibraryWidget | null>(null)
 
   useEffect(() => {
-    if (tvWidgetRef.current) {
+    if (tvWidgetRef.current instanceof widget && selectedMarketConfig.name) {
       tvWidgetRef.current.setSymbol(
         selectedMarketConfig.name,
         defaultProps.interval,

components/UserInfo.tsx

@@ -74,7 +74,6 @@ const TabContent = ({ activeTab }) => {
 const UserInfo = () => {
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const isPerpMarket = marketConfig.kind === 'perp'
-  const connected = useMangoStore((s) => s.wallet.connected)
   const [activeTab, setActiveTab] = useState('')
 
   useEffect(() => {
@@ -82,7 +81,7 @@ const UserInfo = () => {
   }, [isPerpMarket])
 
   return (
-    <div className={!connected ? 'filter blur-sm' : null}>
+    <div>
       <UserInfoTabs activeTab={activeTab} setActiveTab={setActiveTab} />
       <TabContent activeTab={activeTab} />
     </div>

public/tradingview-chart.css

@@ -78,6 +78,7 @@ html .group-wWM3zP_M {
 
 .group-wWM3zP_M:last-child {
   border-bottom-right-radius: 50%;
+  margin-right: 6px;
 }
 
 /* Spacer between header buttons */
@@ -86,6 +87,11 @@ html .group-wWM3zP_M {
   background-color: transparent !important;
 }
 
+/* Tooltip bottom center */
+.container-2yI8A9Vu {
+  display: none
+}
+
 /* menu items category label */
 
 html .summary-3_6tmh1R {