Feature: Setup multi-seller auction table

packages/explorable-explanations/src/protectedAudience/modules/auctions/setUpAdUnitCode.js

@@ -41,13 +41,13 @@ const setUpAdUnitCode = (steps, index) => {
         },
         {
           title: 'adunit-code',
-          description: 'div-200-1',
+          description: 'div-200-2',
           type: 'box',
           color: colors.box.browser,
         },
         {
           title: 'adunit-code',
-          description: 'div-200-1',
+          description: 'div-200-3',
           type: 'box',
           color: colors.box.browser,
         },

packages/explorable-explanations/src/protectedAudience/modules/auctions/setupBranches.js

@@ -28,18 +28,18 @@ const setupBranches = (steps, index) => {
       currentIndex: index,
       branches: [
         {
-          date: '2024-10-02',
-          time: '10:00:22PM',
+          date: 'Sun, 01 October 2023',
+          time: '6:30:00 GMT',
           type: 'datetime',
         },
         {
-          date: '2024-10-03',
-          time: '11:00:22PM',
+          date: 'Sun, 01 October 2023',
+          time: '6:31:00 GMT',
           type: 'datetime',
         },
         {
-          date: '2024-10-03',
-          time: '11:00:22PM',
+          date: 'Sun, 01 October 2023',
+          time: '6:32:00 GMT',
           type: 'datetime',
         },
       ],

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/container.tsx

@@ -29,7 +29,7 @@ import React from 'react';
  */
 import AuctionPanel from './panel';
 import type { AuctionEventsType } from '../../../../stateProviders/protectedAudience/context';
-import type { AdUnitLiteral } from '../explorableExplanation';
+import type { AdUnitLiteral } from '../explorableExplanation/auctionEventTransformers';
 
 interface AuctionsContainerProps {
   auctionEvents: {

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/index.tsx

@@ -16,7 +16,7 @@
 /**
  * External dependencies.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   SIDEBAR_ITEMS_KEYS,
   useSidebar,
@@ -65,6 +65,12 @@ const Auctions = () => {
     updateSelectedItemKey: actions.updateSelectedItemKey,
   }));
 
+  const auctionData = useMemo(() => {
+    return {
+      auctionData: auctionEvents,
+    };
+  }, [auctionEvents]);
+
   if (!isUsingCDP) {
     return (
       <div className="w-full h-full flex items-center justify-center">
@@ -102,9 +108,7 @@ const Auctions = () => {
       <Breakpoints />
       <div className="overflow-auto flex-1">
         <AuctionsContainer
-          auctionEvents={{
-            auctionData: auctionEvents,
-          }}
+          auctionEvents={auctionData}
           sidebarData={sidebarData}
           setSidebarData={setSidebarData}
         />

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/auctions/panel/index.tsx

@@ -36,7 +36,7 @@ import type { AuctionEventsType } from '../../../../../stateProviders/protectedA
 import AuctionTable from '../table';
 import AdunitPanel from '../adunitPanel';
 import AdunitSubPanel from '../adunitPanel/panel';
-import type { AdUnitLiteral } from '../../explorableExplanation';
+import type { AdUnitLiteral } from '../../explorableExplanation/auctionEventTransformers';
 
 interface AuctionPanelProps {
   auctionEvents: {
@@ -78,7 +78,6 @@ const AuctionPanel = ({
             ...adUnitChildren[time]?.children,
           } as SidebarItems;
           const sellerUrl = Object.keys(auctionEventsData[adUnit][time])[0];
-
           const entries = Object.entries(
             auctionEventsData[adUnit][time][sellerUrl]
           )