From 543c5ba754d8df24eda37e540c5eb7eadb39dbad Mon Sep 17 00:00:00 2001 From: Bartlomiej Tarczynski <51199571+b-tarczynski@users.noreply.github.com> Date: Fri, 19 Apr 2024 17:08:29 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=BA=20Persist=20bid=20place=20in=20Bid?= =?UTF-8?q?sProvider=20(#22)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/blockchain/hooks/useUserBid.ts | 4 +- .../src/components/bids/BidsListEntry.tsx | 4 +- .../components/bids/allBids/AllBidsList.tsx | 6 +-- .../components/bids/allBids/BidsSubList.tsx | 12 ++--- .../bids/allBids/SettledBidsList.tsx | 27 +++------- .../bids/bidsShortList/BidsShortList.tsx | 18 +++---- .../src/providers/BidsProvider/provider.tsx | 4 +- .../src/providers/BidsProvider/reduceBids.ts | 50 ++++++++++++------- packages/frontend/src/types/bid.ts | 5 -- 9 files changed, 56 insertions(+), 74 deletions(-) diff --git a/packages/frontend/src/blockchain/hooks/useUserBid.ts b/packages/frontend/src/blockchain/hooks/useUserBid.ts index b321fe09..dee88e62 100644 --- a/packages/frontend/src/blockchain/hooks/useUserBid.ts +++ b/packages/frontend/src/blockchain/hooks/useUserBid.ts @@ -1,9 +1,9 @@ import { useAccount } from 'wagmi' import { useBids } from '@/providers/BidsProvider' import { useMemo } from 'react' -import { BidWithPlace } from '@/types/bid' +import { Bid } from '@/types/bid' -export const useUserBid = (): BidWithPlace | undefined => { +export const useUserBid = (): Bid | undefined => { const { address } = useAccount() const { bidList } = useBids() diff --git a/packages/frontend/src/components/bids/BidsListEntry.tsx b/packages/frontend/src/components/bids/BidsListEntry.tsx index 8b0a5c6e..71fe2cad 100644 --- a/packages/frontend/src/components/bids/BidsListEntry.tsx +++ b/packages/frontend/src/components/bids/BidsListEntry.tsx @@ -1,12 +1,12 @@ import { AddressColumn, BidColumn, PlaceColumn } from '@/components/bids/BidsColumns' import styled, { css } from 'styled-components' -import { BidWithPlace } from '@/types/bid' +import { Bid } from '@/types/bid' import { Colors } from '@/styles/colors' import { formatEther, Hex } from 'viem' import { useExplorerAddressLink } from '@/blockchain/hooks/useExplorerAddressLink' interface Props { - bid: BidWithPlace + bid: Bid isUser?: boolean view?: 'short' | 'full' } diff --git a/packages/frontend/src/components/bids/allBids/AllBidsList.tsx b/packages/frontend/src/components/bids/allBids/AllBidsList.tsx index 4ca8dc34..3975168f 100644 --- a/packages/frontend/src/components/bids/allBids/AllBidsList.tsx +++ b/packages/frontend/src/components/bids/allBids/AllBidsList.tsx @@ -36,10 +36,8 @@ export const AllBidsList = ({ search, auctionWinnersCount, raffleWinnersCount }: ) : ( <> - {bids.auction.length !== 0 && } - {bids.raffle.length !== 0 && ( - - )} + {bids.auction.length !== 0 && } + {bids.raffle.length !== 0 && } )} diff --git a/packages/frontend/src/components/bids/allBids/BidsSubList.tsx b/packages/frontend/src/components/bids/allBids/BidsSubList.tsx index 6c870a74..f4b6b864 100644 --- a/packages/frontend/src/components/bids/allBids/BidsSubList.tsx +++ b/packages/frontend/src/components/bids/allBids/BidsSubList.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import { Bid, bidToBidWithPlace } from '@/types/bid' +import { Bid } from '@/types/bid' import { Colors } from '@/styles/colors' import { BidsListContainer } from '@/components/bids/BidsListContainer' import { BidsListEntry } from '@/components/bids/BidsListEntry' @@ -7,11 +7,10 @@ import { useAccount } from 'wagmi' interface Props { bids: Bid[] - placeOffset: number title: string } -export const BidsSubList = ({ bids, placeOffset, title }: Props) => { +export const BidsSubList = ({ bids, title }: Props) => { const { address } = useAccount() return ( @@ -21,12 +20,7 @@ export const BidsSubList = ({ bids, placeOffset, title }: Props) => { {bids.map((bid, index) => ( - + ))} diff --git a/packages/frontend/src/components/bids/allBids/SettledBidsList.tsx b/packages/frontend/src/components/bids/allBids/SettledBidsList.tsx index 03c6d051..395f3532 100644 --- a/packages/frontend/src/components/bids/allBids/SettledBidsList.tsx +++ b/packages/frontend/src/components/bids/allBids/SettledBidsList.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react' -import { Bid, bidToBidWithPlace } from '@/types/bid' +import { Bid } from '@/types/bid' import { useBids } from '@/providers/BidsProvider' import { useAuctionWinners } from '@/blockchain/hooks/useAuctionWinners' import { GoldenTicketWinner } from '@/components/bids/allBids/GoldenTicketWinner' @@ -39,19 +39,9 @@ export const SettledBidsList = ({ search }: SettledBidsListProps) => { <> {filteredBids.goldenTicket && } - {filteredBids.auction.length !== 0 && ( - - )} - {filteredBids.raffle.length !== 0 && ( - - )} - {filteredBids.others.length !== 0 && ( - - )} + {filteredBids.auction.length !== 0 && } + {filteredBids.raffle.length !== 0 && } + {filteredBids.others.length !== 0 && } )} @@ -75,20 +65,19 @@ function divideBids( bids.forEach((bid, index) => { const bidderID = bid.bidderId - const bidWithPlace = bidToBidWithPlace(bid, index) if (auctionWinners.find((winnerId) => bid.bidderId === winnerId)) { - settledBids.auction.push(bidWithPlace) + settledBids.auction.push(bid) return } if (bidderID === raffleWinners[0]) { - settledBids.goldenTicket = bidWithPlace + settledBids.goldenTicket = bid return } if (raffleWinners.find((winnerId) => bid.bidderId === winnerId)) { - settledBids.raffle.push(bidWithPlace) + settledBids.raffle.push(bid) return } - settledBids.others.push(bidWithPlace) + settledBids.others.push(bid) }) return settledBids } diff --git a/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx b/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx index b8663648..480e7efb 100644 --- a/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx +++ b/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react' import styled from 'styled-components' -import { Bid, bidToBidWithPlace, BidWithPlace } from '@/types/bid' +import { Bid } from '@/types/bid' import { useUserBid } from '@/blockchain/hooks/useUserBid' import { Colors } from '@/styles/colors' import { useReadAuctionParams } from '@/blockchain/hooks/useReadAuctionParams' @@ -51,7 +51,7 @@ export const BidsShortList = () => { } function isAuctionParticipant( - userBid: BidWithPlace | undefined, + userBid: Bid | undefined, auctionWinnersCount: number | undefined, raffleWinnersCount: number | undefined, bidsLength: number, @@ -63,30 +63,26 @@ function isAuctionParticipant( return userBid.place <= firstRaffleBidIndex } -function selectBids( - auctionWinnersCount: number | undefined, - bidList: Bid[], - userBid: BidWithPlace | undefined, -): BidWithPlace[] { +function selectBids(auctionWinnersCount: number | undefined, bidList: Bid[], userBid: Bid | undefined): Bid[] { if (auctionWinnersCount === undefined) { return [] } if (bidList.length <= bidsMaxCount) { - return bidList.map(bidToBidWithPlace) + return bidList } - const topAuctionBids = bidList.slice(0, topAuctionBidsCount).map(bidToBidWithPlace) + const topAuctionBids = bidList.slice(0, topAuctionBidsCount) const lastAuctionBidIndex = bidList.length > auctionWinnersCount ? auctionWinnersCount - 1 : bidList.length - 1 - const lastAuctionBid = bidToBidWithPlace(bidList[lastAuctionBidIndex], lastAuctionBidIndex) + const lastAuctionBid = bidList[lastAuctionBidIndex] return userBid && shouldUserBidBeDisplayed(userBid, lastAuctionBid, auctionWinnersCount) ? topAuctionBids.concat([userBid, lastAuctionBid]) : topAuctionBids.concat([lastAuctionBid]) } -const shouldUserBidBeDisplayed = (userBid: BidWithPlace, lastAuctionBid: Bid, auctionWinnersCount: number) => { +const shouldUserBidBeDisplayed = (userBid: Bid, lastAuctionBid: Bid, auctionWinnersCount: number) => { return !(userBid.address === lastAuctionBid.address) && within(bidsMaxCount, auctionWinnersCount - 1, userBid.place) } diff --git a/packages/frontend/src/providers/BidsProvider/provider.tsx b/packages/frontend/src/providers/BidsProvider/provider.tsx index c370036d..d5dc8bcb 100644 --- a/packages/frontend/src/providers/BidsProvider/provider.tsx +++ b/packages/frontend/src/providers/BidsProvider/provider.tsx @@ -1,11 +1,9 @@ import { createContext, ReactNode, useContext, useReducer } from 'react' -import { Hex } from 'viem' import { defaultBidsState, reduceBids } from '@/providers/BidsProvider/reduceBids' import { useWatchEvents } from '@/providers/BidsProvider/useWatchEvents' import { Bid } from '@/types/bid' const BidsContext = createContext({ - bids: new Map(), bidList: new Array(), isLoading: true, }) @@ -16,5 +14,5 @@ export const BidsProvider = ({ children }: { children: ReactNode }) => { const [bidsState, updateBids] = useReducer(reduceBids, defaultBidsState) const { isLoading } = useWatchEvents(updateBids) - return {children} + return {children} } diff --git a/packages/frontend/src/providers/BidsProvider/reduceBids.ts b/packages/frontend/src/providers/BidsProvider/reduceBids.ts index 55c245bd..8e6ef369 100644 --- a/packages/frontend/src/providers/BidsProvider/reduceBids.ts +++ b/packages/frontend/src/providers/BidsProvider/reduceBids.ts @@ -1,24 +1,23 @@ import { Bid } from '@/types/bid' import { Hex } from 'viem' -interface BidEvent { - args: { - bidder?: Hex - bidderID?: bigint - bidAmount?: bigint - } -} +export type RawBid = Omit interface BidsState { - bids: Map + bids: Map bidList: Bid[] } export const defaultBidsState: BidsState = { - bids: new Map(), + bids: new Map(), bidList: [], } +interface InitialBidsAction { + type: 'InitialBids' + bids: readonly BidWithAddressPayload[] +} + interface BidWithAddressPayload { bidder: Hex bid: { @@ -27,16 +26,19 @@ interface BidWithAddressPayload { } } -interface InitialBidsAction { - type: 'InitialBids' - bids: readonly BidWithAddressPayload[] -} - interface NewBidsAction { type: 'NewBids' events: BidEvent[] } +interface BidEvent { + args: { + bidder?: Hex + bidderID?: bigint + bidAmount?: bigint + } +} + export type ReduceBidsAction = InitialBidsAction | NewBidsAction export const reduceBids = (previousState: BidsState, action: ReduceBidsAction) => { @@ -49,7 +51,7 @@ export const reduceBids = (previousState: BidsState, action: ReduceBidsAction) = } const addInitialBids = (bidsPayload: readonly BidWithAddressPayload[]): BidsState => { - const bids = new Map() + const bids = new Map() bidsPayload.forEach((bidPayload) => bids.set(bidPayload.bidder, { address: bidPayload.bidder, @@ -60,7 +62,7 @@ const addInitialBids = (bidsPayload: readonly BidWithAddressPayload[]): BidsStat return { bids, - bidList: Array.from(bids.values()).sort(biggerFirst), + bidList: bidsMapToList(bids), } } @@ -71,11 +73,11 @@ const addNewBids = (previousState: BidsState, events: BidEvent[]): BidsState => return { bids, - bidList: Array.from(bids.values()).sort(biggerFirst), + bidList: bidsMapToList(bids), } } -const handleBid = (bids: Map, eventArgs: BidEvent['args']) => { +const handleBid = (bids: Map, eventArgs: BidEvent['args']) => { if (!eventArgs.bidder || !eventArgs.bidAmount || !eventArgs.bidderID) { return } @@ -92,7 +94,17 @@ const handleBid = (bids: Map, eventArgs: BidEvent['args']) => { }) } -const biggerFirst = (a: Bid, b: Bid) => { +const bidsMapToList = (bids: Map) => + Array.from(bids.values()) + .sort(biggerFirst) + .map( + (bid: RawBid, arrayIndex: number): Bid => ({ + ...bid, + place: arrayIndex + 1, + }), + ) + +const biggerFirst = (a: RawBid, b: RawBid) => { if (a.amount === b.amount) { return 0 } diff --git a/packages/frontend/src/types/bid.ts b/packages/frontend/src/types/bid.ts index d1d24176..28d0ee04 100644 --- a/packages/frontend/src/types/bid.ts +++ b/packages/frontend/src/types/bid.ts @@ -4,10 +4,5 @@ export interface Bid { address: Hex amount: bigint bidderId: bigint -} - -export interface BidWithPlace extends Bid { place: number } - -export const bidToBidWithPlace = (bid: Bid, arrayIndex: number): BidWithPlace => ({ ...bid, place: arrayIndex + 1 })