feat: add to offers table instead of events table

blockchain · May 4, 2022 · 01079be · 01079be
1 parent d5737b2
commit 01079be
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 64 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Asset/Asset.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Asset/Asset.tsx
@@ -835,9 +835,10 @@ const NftAsset: React.FC<Props> = ({
               {Tab === 'activity' && (
                 <div style={{ maxHeight: '300px', overflow: 'auto' }}>
                   <Events
-                    columns={['event_type', 'price', 'from', 'date', 'cancel_offer']}
+                    columns={['event_type', 'price', 'from', 'date']}
                     isFetchingParent={false}
                     filters={[{ field: EventFilterFields.AssetId, value: currentAsset.id }]}
+                    bidsAndOffers={bidsAndOffers}
                     key='events'
                   />
                 </div>
@@ -846,7 +847,7 @@ const NftAsset: React.FC<Props> = ({
                 bidsAndOffers.length > 0 ? (
                   <div style={{ maxHeight: '300px', overflow: 'auto' }}>
                     <Offers
-                      columns={['price', 'amount', 'from', 'expiration']}
+                      columns={['price', 'amount', 'from', 'expiration', 'cancel_offer']}
                       bidsAndOffers={bidsAndOffers}
                     />
                   </div>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/Events.table.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/Events.table.tsx
@@ -3,6 +3,7 @@ import { useSortBy, useTable } from 'react-table'
 import { Icon } from '@blockchain-com/constellation'
 import { IconChevronDownV2, IconChevronUpV2 } from '@blockchain-com/icons'
 
+import { RawOrder } from '@core/network/api/nfts/types'
 import { HeaderText, HeaderToggle, StickyTableHeader } from 'components/Table'
 import { EventsQuery } from 'generated/graphql.types'
 
@@ -11,25 +12,24 @@ import {
   getEventTypeColumn,
   getFromColumn,
   getItemColumn,
-  getOfferCancelColumn,
   getPriceColumn,
   getToColumn
 } from './EventsTableColumns'
 
 const getTableColumns = (
-  columns: ('event_type' | 'item' | 'price' | 'from' | 'to' | 'date' | 'cancel_offer')[]
+  columns: ('event_type' | 'item' | 'price' | 'from' | 'to' | 'date')[],
+  bidsAndOffers: RawOrder[] | undefined
 ) =>
   [
     columns.includes('event_type') ? getEventTypeColumn() : null,
     columns.includes('item') ? getItemColumn() : null,
     columns.includes('price') ? getPriceColumn() : null,
     columns.includes('from') ? getFromColumn() : null,
     columns.includes('to') ? getToColumn() : null,
-    columns.includes('date') ? getDateColumn() : null,
-    columns.includes('cancel_offer') ? getOfferCancelColumn() : null
+    columns.includes('date') ? getDateColumn() : null
   ].filter(Boolean)
 
-const CollectionEventsTable: React.FC<Props> = ({ columns, events }) => {
+const CollectionEventsTable: React.FC<Props> = ({ bidsAndOffers, columns, events }) => {
   const { getTableBodyProps, getTableProps, headerGroups, prepareRow, rows } = useTable(
     {
       autoResetExpanded: false,
@@ -39,7 +39,7 @@ const CollectionEventsTable: React.FC<Props> = ({ columns, events }) => {
       autoResetRowState: false,
       autoResetSelectedRows: false,
       autoResetSortBy: false,
-      columns: useMemo(() => getTableColumns(columns), [columns]),
+      columns: useMemo(() => getTableColumns(columns, bidsAndOffers), [columns]),
       data: useMemo(() => events, [events]),
       disableMultiSort: true,
       disableSortRemove: true,
@@ -91,6 +91,8 @@ const CollectionEventsTable: React.FC<Props> = ({ columns, events }) => {
       </StickyTableHeader>
       <div {...getTableBodyProps()}>
         {rows.map((row) => {
+          // eslint-disable-next-line no-console
+          console.log(row)
           prepareRow(row)
           return (
             <div key={`row-${row.id}`} {...row.getRowProps()} className='tr'>
@@ -112,7 +114,8 @@ const CollectionEventsTable: React.FC<Props> = ({ columns, events }) => {
 }
 
 type Props = {
-  columns: ('event_type' | 'item' | 'price' | 'from' | 'to' | 'date' | 'cancel_offer')[]
+  bidsAndOffers: RawOrder[] | undefined
+  columns: ('event_type' | 'item' | 'price' | 'from' | 'to' | 'date')[]
   events: EventsQuery['events']
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/Events.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/Events.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { CombinedError } from 'urql'
 
+import { RawOrder } from '@core/network/api/nfts/types'
 import { SpinningLoader } from 'blockchain-info-components'
 import LazyLoadContainer from 'components/LazyLoadContainer'
 import { TableWrapper } from 'components/Table'
@@ -11,7 +12,7 @@ import NftError from '../components/NftError'
 import EventsResults from './Events.results'
 import EventsTable from './Events.table'
 
-const Events: React.FC<Props> = ({ columns, filters, isFetchingParent }) => {
+const Events: React.FC<Props> = ({ bidsAndOffers, columns, filters, isFetchingParent }) => {
   const [events, setEvents] = useState([] as EventsQuery['events'])
   const [pageVariables, setPageVariables] = useState([{ page: 0 }])
   const [isFetchingNextPage, setIsFetchingNextPage] = useState(true)
@@ -54,10 +55,9 @@ const Events: React.FC<Props> = ({ columns, filters, isFetchingParent }) => {
       <TableWrapper height='auto'>
         {events.length ? (
           <EventsTable
-            columns={
-              columns || ['event_type', 'item', 'price', 'from', 'to', 'date', 'cancel_offer']
-            }
+            columns={columns || ['event_type', 'item', 'price', 'from', 'to', 'date']}
             events={events}
+            bidsAndOffers={bidsAndOffers}
           />
         ) : null}
         <Centered>
@@ -73,7 +73,8 @@ const Events: React.FC<Props> = ({ columns, filters, isFetchingParent }) => {
 
 type Props = {
   address?: never
-  columns?: ('event_type' | 'item' | 'price' | 'from' | 'to' | 'date' | 'cancel_offer')[]
+  bidsAndOffers?: RawOrder[]
+  columns?: ('event_type' | 'item' | 'price' | 'from' | 'to' | 'date')[]
   filters: InputMaybe<InputMaybe<EventFilter> | InputMaybe<EventFilter>[]> | undefined
   isFetchingParent: boolean
 }

diff --git a/...tend/src/scenes/Nfts/Events/EventsTableColumns/EventsTableColumns.cancel_offer.column.tsx b/...tend/src/scenes/Nfts/Events/EventsTableColumns/EventsTableColumns.cancel_offer.column.tsx
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/EventsTableColumns/index.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/EventsTableColumns/index.ts
@@ -1,4 +1,3 @@
-import { getOfferCancelColumn } from './EventsTableColumns.cancel_offer.column'
 import { getDateColumn } from './EventsTableColumns.date.column'
 import { getEventTypeColumn } from './EventsTableColumns.event_type.column'
 import { getFromColumn } from './EventsTableColumns.from.column'
@@ -11,7 +10,6 @@ export {
   getEventTypeColumn,
   getFromColumn,
   getItemColumn,
-  getOfferCancelColumn,
   getPriceColumn,
   getToColumn
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Offers/Offers.table.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Offers/Offers.table.tsx
@@ -10,15 +10,19 @@ import {
   getAmountColumn,
   getExpirationColumn,
   getFromColumn,
+  getOfferCancelColumn,
   getPriceColumn
 } from './OffersTableColumns'
 
-const getTableColumns = (columns: ('price' | 'amount' | 'from' | 'expiration')[]) =>
+const getTableColumns = (
+  columns: ('price' | 'amount' | 'from' | 'expiration' | 'cancel_offer')[]
+) =>
   [
     columns.includes('price') ? getPriceColumn() : null,
     columns.includes('amount') ? getAmountColumn() : null,
     columns.includes('expiration') ? getExpirationColumn() : null,
-    columns.includes('from') ? getFromColumn() : null
+    columns.includes('from') ? getFromColumn() : null,
+    columns.includes('cancel_offer') ? getOfferCancelColumn() : null
   ].filter(Boolean)
 
 const OffersTable: React.FC<Props> = ({ bidsAndOffers, columns }) => {
@@ -105,7 +109,7 @@ const OffersTable: React.FC<Props> = ({ bidsAndOffers, columns }) => {
 
 type Props = {
   bidsAndOffers: RawOrder[]
-  columns: ('price' | 'amount' | 'from' | 'expiration')[]
+  columns: ('price' | 'amount' | 'from' | 'expiration' | 'cancel_offer')[]
 }
 
 export default OffersTable
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Offers/Offers.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Offers/Offers.tsx
@@ -19,7 +19,7 @@ const Offers: React.FC<Props> = ({ bidsAndOffers, columns }) => {
 type Props = {
   address?: never
   bidsAndOffers: RawOrder[]
-  columns?: ('price' | 'amount' | 'from' | 'expiration')[]
+  columns?: ('price' | 'amount' | 'from' | 'expiration' | 'cancel_offer')[]
 }
 
 export default Offers
diff --git a/...v4-frontend/src/scenes/Nfts/Offers/OffersTableColumns/OffersTableColumns.cancel_offer.tsx b/...v4-frontend/src/scenes/Nfts/Offers/OffersTableColumns/OffersTableColumns.cancel_offer.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
+import { colors } from '@blockchain-com/constellation'
+import { getUnixTime } from 'date-fns'
+
+import { Button, Text } from 'blockchain-info-components'
+import { CellHeaderText } from 'components/Table'
+import { actions } from 'data'
+import { NftOrderStepEnum } from 'data/components/nfts/types'
+
+export const getOfferCancelColumn = () => ({
+  Cell: ({ row: { original: values } }) => {
+    const dispatch = useDispatch()
+    return (
+      <>
+        {values.maker.address === '0x9e38f81217f693367f03e7bbd583fdea1ee297e3' && (
+          <Button
+            nature='empty-blue'
+            onClick={() =>
+              dispatch(
+                actions.components.nfts.nftOrderFlowOpen({
+                  asset_contract_address: values.metadata.asset.address,
+                  offer: values,
+                  step: NftOrderStepEnum.CANCEL_OFFER,
+                  token_id: values.metadata.asset.id,
+                  walletUserIsAssetOwnerHack: true
+                })
+              )
+            }
+            size='xsmall'
+            width='7em'
+            data-e2e='submitProfileDetails'
+          >
+            <Text color={colors.blue600} size='14px' weight={500}>
+              <FormattedMessage id='modals.prompt.button' defaultMessage='Cancel Offer' />
+            </Text>
+          </Button>
+        )}
+      </>
+    )
+  },
+  Header: () => <CellHeaderText />,
+  accessor: 'cancel_order',
+  disableGlobalFilter: true
+})
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Offers/OffersTableColumns/index.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Offers/OffersTableColumns/index.ts
@@ -1,6 +1,7 @@
 import { getAmountColumn } from './OffersTableColumns.amount.column'
+import { getOfferCancelColumn } from './OffersTableColumns.cancel_offer'
 import { getExpirationColumn } from './OffersTableColumns.expiration.column'
 import { getFromColumn } from './OffersTableColumns.from.column'
 import { getPriceColumn } from './OffersTableColumns.price.column'
 
-export { getAmountColumn, getExpirationColumn, getFromColumn, getPriceColumn }
+export { getAmountColumn, getExpirationColumn, getFromColumn, getOfferCancelColumn, getPriceColumn }