remove type on offers home page table and change info to offer->match

l2beat · Nov 3, 2023 · 8d121ab · 8d121ab
1 parent 00f9120
commit 8d121ab
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git a/packages/frontend/src/view/components/tables/OffersTable.tsx b/packages/frontend/src/view/components/tables/OffersTable.tsx
@@ -22,7 +22,8 @@ interface OffersTableProps {
   offers: OfferEntry[]
   isHomePage?: boolean
   showRole?: boolean
-  showInfoColumn?: boolean
+  showOfferMatchColumn?: boolean
+  showTypeColumn?: boolean
 }
 
 export interface OfferEntry {
@@ -41,18 +42,24 @@ export interface OfferEntry {
     | 'INCLUDED'
     | 'EXPIRED'
     | 'REVERTED'
-  type: 'BUY' | 'SELL'
+  type?: 'BUY' | 'SELL'
   role?: 'MAKER' | 'TAKER'
 }
 
 export function OffersTable(props: OffersTableProps) {
   const columns: Column[] = [
     { header: 'Id', className: classNames(props.isHomePage && 'w-[130px]') },
-    { header: 'Type' },
-    ...(props.showInfoColumn
+    ...(props.showTypeColumn ? [{ header: 'Type' }] : []),
+    ...(props.showOfferMatchColumn
       ? [
           {
-            header: 'Info',
+            header: (
+              <span className="flex items-center justify-center">
+                OFFER
+                <ArrowRightIcon className="flex-inline mx-1" />
+                MATCH
+              </span>
+            ),
             align: 'center' as const,
             className: classNames(props.isHomePage && 'w-max'),
           },
@@ -65,19 +72,19 @@ export function OffersTable(props: OffersTableProps) {
     },
     { header: 'Age', className: classNames(props.isHomePage && 'w-[90px]') },
   ]
-  if (props.showInfoColumn) {
-    props.offers
-  }
+
   return (
     <Table
       columns={columns}
       rows={props.offers.map((offer) => {
         const cells: ReactNode[] = [
           <Link>#{offer.id}</Link>,
-          <span className="capitalize">{offer.type.toLowerCase()}</span>,
-          ...(props.showInfoColumn
+          ...(props.showTypeColumn
+            ? [<span className="capitalize">{offer.type?.toLowerCase()}</span>]
+            : []),
+          ...(props.showOfferMatchColumn
             ? [
-                <InfoColumn
+                <OfferMatchColumn
                   offer={offer}
                   collateralAsset={props.context.collateralAsset}
                 />,
@@ -106,7 +113,7 @@ interface Props {
   collateralAsset: CollateralAsset
 }
 
-function InfoColumn({ offer, collateralAsset }: Props) {
+function OfferMatchColumn({ offer, collateralAsset }: Props) {
   const trade =
     offer.type === 'SELL'
       ? {

diff --git a/packages/frontend/src/view/pages/home/HomeAvailableOffersPage.tsx b/packages/frontend/src/view/pages/home/HomeAvailableOffersPage.tsx
@@ -38,7 +38,7 @@ function HomeAvailableOffersPage(props: HomeOffersPageProps) {
           <OffersTable
             offers={props.offers}
             context={props.context}
-            showInfoColumn
+            showOfferMatchColumn
           />
         </TableWithPagination>
       </ContentWrapper>

diff --git a/packages/frontend/src/view/pages/home/HomePage.tsx b/packages/frontend/src/view/pages/home/HomePage.tsx
@@ -139,6 +139,7 @@ function Tables(props: HomePageProps) {
             <OffersTable
               offers={props.offers}
               context={props.context}
+              showTypeColumn
               isHomePage
             />
           </TablePreview>,

diff --git a/packages/frontend/src/view/pages/user/UserOffersPage.tsx b/packages/frontend/src/view/pages/user/UserOffersPage.tsx
@@ -44,7 +44,7 @@ function UserOffersPage(props: UserOffersPageProps) {
             offers={props.offers}
             context={props.context}
             showRole
-            showInfoColumn
+            showOfferMatchColumn
           />
         </TableWithPagination>
       </ContentWrapper>

diff --git a/packages/frontend/src/view/pages/user/UserPage.tsx b/packages/frontend/src/view/pages/user/UserPage.tsx
@@ -211,9 +211,10 @@ function UserPage(props: UserPageProps) {
                         {...offerTablePropsWithoutTitle}
                       >
                         <OffersTable
-                          showRole
                           offers={props.offers}
                           context={props.context}
+                          showTypeColumn
+                          showRole
                         />
                       </TablePreview>
                     ),