feat(trading): highlight row and update data on pinned asset

libs/accounts/src/lib/accounts-manager.tsx

@@ -10,7 +10,8 @@ import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
 import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
-import type { RowHeightParams } from 'ag-grid-community';
+import type { RowClassParams, RowHeightParams } from 'ag-grid-community';
+import classNames from 'classnames';
 
 interface AccountManagerProps {
   partyId: string;
@@ -30,11 +31,15 @@ export const AccountManager = ({
   pinnedAsset,
 }: AccountManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const variables = useMemo(() => ({ partyId }), [partyId]);
+  const variables = useMemo(
+    () => ({ partyId, pinnedAsset }),
+    [partyId, pinnedAsset]
+  );
   const { data, loading, error, reload } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
     variables,
   });
+
   const setId = useCallback(
     (data: AccountFields) => ({
       ...data,
@@ -51,11 +56,24 @@ export const AccountManager = ({
     (params: RowHeightParams) => (params.node.rowPinned ? 32 : 22),
     []
   );
+
+  const getRowClass = useCallback(
+    ({ data: rowData }: RowClassParams) => {
+      const currentPinnedAssetRow = data?.find(
+        (row) => row.asset.id === pinnedAsset?.id
+      );
+      const shouldHighlight =
+        rowData?.asset.id === pinnedAsset?.id && currentPinnedAssetRow;
+      return classNames({ '!bg-vega-yellow !text-black': shouldHighlight });
+    },
+    [pinnedAsset?.id, data]
+  );
+
   return (
     <div className="relative h-full">
       <AccountTable
         ref={gridRef}
-        rowData={error ? [] : data}
+        rowData={error ? [] : data ?? []}
         onClickAsset={onClickAsset}
         onClickDeposit={onClickDeposit}
         onClickWithdraw={onClickWithdraw}
@@ -63,6 +81,7 @@ export const AccountManager = ({
         suppressLoadingOverlay
         suppressNoRowsOverlay
         pinnedAsset={pinnedAsset}
+        getRowClass={getRowClass}
         getRowHeight={getRowHeight}
         {...bottomPlaceholderProps}
       />

libs/accounts/src/lib/accounts-table.tsx

@@ -91,11 +91,10 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
   ({ onClickAsset, onClickWithdraw, onClickDeposit, ...props }, ref) => {
     const [openBreakdown, setOpenBreakdown] = useState(false);
     const [row, setRow] = useState<AccountFields>();
-    const pinnedAssetId = props.pinnedAsset?.id;
 
     const pinnedAssetRow = useMemo(() => {
       const currentPinnedAssetRow = props.rowData?.find(
-        (row) => row.asset.id === pinnedAssetId
+        (row) => row.asset.id === props.pinnedAsset?.id
       );
       if (!currentPinnedAssetRow) {
         if (props.pinnedAsset) {
@@ -109,7 +108,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
         }
       }
       return undefined;
-    }, [pinnedAssetId, props.pinnedAsset, props.rowData]);
+    }, [props.pinnedAsset, props.rowData]);
 
     return (
       <>
@@ -245,7 +244,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                 if (!data) return null;
                 else {
                   if (
-                    data.asset.id === pinnedAssetId &&
+                    data.asset.id === props.pinnedAsset?.id &&
                     new BigNumber(data.total).isLessThanOrEqualTo(0)
                   ) {
                     return (

nx.json

@@ -23,7 +23,8 @@
           "echo $NX_TENDERMINT_URL",
           "echo $NX_TENDERMINT_WEBSOCKET_URL",
           "echo $NX_USE_ENV_OVERRIDES",
-          "echo $NX_ETHEREUM_PROVIDER_URL"
+          "echo $NX_ETHEREUM_PROVIDER_URL",
+          "echo %NX_VEGA_CONFIG_URL"
         ]
       }
     }