add view counterpart to trade history table

components/shared/TableElements.tsx

@@ -59,7 +59,7 @@ export const Td = ({
 }: {
   children: ReactNode
   className?: string
-}) => <td className={`px-6 py-3 ${className}`}>{children}</td>
+}) => <td className={`px-2 py-3 xl:px-4 ${className}`}>{children}</td>
 
 export const TableDateDisplay = ({
   date,

components/trade/TradeAdvancedPage.tsx

@@ -21,7 +21,7 @@ const TradingChartContainer = dynamic(() => import('./TradingChartContainer'), {
 
 const ResponsiveGridLayout = WidthProvider(Responsive)
 
-const sidebarWidth = 65
+const sidebarWidth = 63
 const totalCols = 24
 const gridBreakpoints = {
   md: breakpoints.md - sidebarWidth,
@@ -117,26 +117,26 @@ const TradeAdvancedPage = () => {
         },
       ],
       lg: [
-        { i: 'market-header', x: 0, y: 0, w: 12, h: marketHeaderHeight },
-        { i: 'tv-chart', x: 0, y: 1, w: 12, h: 488 },
+        { i: 'market-header', x: 0, y: 0, w: 13, h: marketHeaderHeight },
+        { i: 'tv-chart', x: 0, y: 1, w: 13, h: 488 },
         {
           i: 'balances',
           x: 0,
           y: 2,
-          w: 12,
+          w: 13,
           h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
         },
         {
           i: 'orderbook',
-          x: 12,
+          x: 13,
           y: 0,
-          w: 6,
+          w: 5,
           h: getHeight(innerHeight, 0, 0),
         },
         { i: 'trade-form', x: 18, y: 0, w: 6, h: getHeight(innerHeight, 0, 0) },
       ],
       md: [
-        { i: 'market-header', x: 0, y: 0, w: 18, h: marketHeaderHeight },
+        { i: 'market-header', x: 0, y: 0, w: 17, h: marketHeaderHeight },
         { i: 'tv-chart', x: 0, y: 1, w: 17, h: 464 },
         { i: 'balances', x: 0, y: 2, w: 17, h: 428 + marketHeaderHeight },
         { i: 'orderbook', x: 18, y: 2, w: 7, h: 428 + marketHeaderHeight },
@@ -151,6 +151,7 @@ const TradeAdvancedPage = () => {
     <>
       <FavoriteMarketsBar />
       <ResponsiveGridLayout
+        onBreakpointChange={(bp) => console.log('bp: ', bp)}
         // layouts={savedLayouts ? savedLayouts : defaultLayouts}
         layouts={defaultLayouts}
         breakpoints={gridBreakpoints}
@@ -184,7 +185,7 @@ const TradeAdvancedPage = () => {
           <TradeInfoTabs />
         </div>
         <div
-          className="border-l border-b border-th-bkg-3 lg:border-l-0 lg:border-b-0"
+          className="border-l border-b border-th-bkg-3 lg:border-b-0 lg:border-l-0"
           key="trade-form"
         >
           <AdvancedTradeForm />

components/trade/TradeHistory.tsx

@@ -262,6 +262,20 @@ const TradeHistory = () => {
                       'Recent'
                     )}
                   </Td>
+                  <Td className="break-keep w-[0.1%] !py-2">
+                    {market.name.includes('PERP') ? (
+                      <a
+                        className="text-xs text-th-fgd-4 underline underline-offset-4"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={`/?address=${
+                          makerTaker === 'Taker' ? trade.maker : trade.taker
+                        }`}
+                      >
+                        View Counterparty
+                      </a>
+                    ) : null}
+                  </Td>
                 </TrBody>
               )
             })}