Skip to content

Commit cb7f30d

Browse files
bz-hashtag-0780bz-hashtag-0780
committed
Beast Details responsiveness at width: 420px
1 parent a0dc483 commit cb7f30d

File tree

2 files changed

+448
-30
lines changed

2 files changed

+448
-30
lines changed

‎components/ui/ProductBeastView/InfoMobile.tsx‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
import { FC, useEffect, useState } from "react"
2+
import styled from "styled-components"
3+
import { useUser } from "@components/user/UserProvider"
4+
import { useAuth } from "@components/auth/AuthProvider"
5+
import {
6+
PriceBox,
7+
H1,
8+
Owner,
9+
Owners,
10+
OwnerImg,
11+
H2,
12+
H3,
13+
P,
14+
SaleDiv,
15+
Clickable,
16+
BuyButton,
17+
BidButton,
18+
} from "./ProductBeastView"
19+
20+
const InfoMobileWrapper = styled.div`
21+
display: none;
22+
width: 32%;
23+
// padding: 0 10rem;
24+
@media (max-width: 420px) {
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
width: 100%;
29+
}
30+
`
31+
32+
const BeastDetailsMobile = styled.div`
33+
display: none;
34+
@media (max-width: 420px) {
35+
display: block;
36+
}
37+
`
38+
39+
type Props = {
40+
beast: any
41+
hunterData: any
42+
user: any
43+
allBeastOffers: any
44+
bestOffer: any
45+
beastsForSale: any
46+
delistBeast: any
47+
setListBeastForSaleOpen: any
48+
purchaseBeast: any
49+
setPlaceABidOpen: any
50+
setAcceptOfferOpen: any
51+
}
52+
53+
export const InfoMobile: FC<Props> = ({
54+
beast,
55+
hunterData,
56+
user,
57+
allBeastOffers,
58+
bestOffer,
59+
beastsForSale,
60+
delistBeast,
61+
setListBeastForSaleOpen,
62+
purchaseBeast,
63+
setPlaceABidOpen,
64+
setAcceptOfferOpen,
65+
}) => {
66+
// const [acceptOfferOpen, setAcceptOfferOpen] = useState<any>(false)
67+
// const [bestOffer, setBestOffer] = useState<any>(null)
68+
69+
// useEffect(() => {
70+
// if (
71+
// allBeastOffers?.filter((offer: any) => offer?.beastID == beast?.id)
72+
// .length > 0
73+
// ) {
74+
// var offers = allBeastOffers
75+
// ?.filter((offer: any) => offer?.beastID == beast?.id)
76+
// .sort((a: any, b: any) => b.offerAmount - a.offerAmount)
77+
// setBestOffer(offers[0])
78+
// }
79+
// }, [allBeastOffers, beast])
80+
81+
// useEffect(() => {
82+
// getUserFUSDBalance("0xfa252d0aa22bf86a")
83+
// }, [])
84+
85+
return (
86+
<InfoMobileWrapper>
87+
<BeastDetailsMobile className="w-11/12">
88+
<H1>{beast?.nickname + " " + "#" + beast?.serialNumber}</H1>
89+
<Owners>
90+
<a href={"/profile/" + beast?.firstOwner}>
91+
<Owner>
92+
<OwnerImg
93+
src={
94+
hunterData?.filter(
95+
(hunter: any) => hunter.address == beast?.firstOwner,
96+
)?.[0]?.avatar
97+
}
98+
alt="first owner avatar"
99+
/>
100+
<div>
101+
<H2>first owner</H2>
102+
<P>
103+
{hunterData?.filter(
104+
(hunter: any) => hunter.address == beast?.firstOwner,
105+
)?.[0]?.findName != ""
106+
? hunterData?.filter(
107+
(hunter: any) => hunter.address == beast?.firstOwner,
108+
)?.[0]?.findName
109+
: beast?.firstOwner}
110+
</P>
111+
</div>
112+
</Owner>
113+
</a>
114+
<a href={"/profile/" + beast?.currentOwner}>
115+
<Owner>
116+
<OwnerImg
117+
src={
118+
hunterData?.filter(
119+
(hunter: any) => hunter.address == beast?.currentOwner,
120+
)?.[0]?.avatar
121+
}
122+
alt="current owner avatar"
123+
/>
124+
<div>
125+
<H2>current owner</H2>
126+
<P>
127+
{hunterData?.filter(
128+
(hunter: any) => hunter.address == beast?.currentOwner,
129+
)?.[0]?.findName != ""
130+
? hunterData?.filter(
131+
(hunter: any) => hunter.address == beast?.currentOwner,
132+
)?.[0]?.findName
133+
: beast?.currentOwner}
134+
</P>
135+
</div>
136+
</Owner>
137+
</a>
138+
</Owners>
139+
{/* social share, refresh, favorite */}
140+
{/* <div className="flex w-full p-5 justify-between items-center">
141+
<Ul>
142+
<Li onClick={() => heartChange()}>
143+
<FontAwesomeIcon style={{ color: "grey" }} icon={heart} />{" "}
144+
<p>76</p>
145+
</Li>
146+
<Li>
147+
{" "}
148+
<FontAwesomeIcon icon={faShareSquare} /> <p>Share</p>
149+
</Li>
150+
<Li>
151+
<RefreshIcon className="-mr-1 ml-2 h-5 w-5" />
152+
<p>Refresh</p>
153+
</Li>
154+
</Ul>
155+
<button
156+
style={{ color: "grey", textAlign: "end", width: "100%" }}
157+
>
158+
<FontAwesomeIcon icon={faEllipsisH} />
159+
</button>
160+
</div> */}
161+
</BeastDetailsMobile>
162+
<SaleDiv>
163+
<div className="flex flex-col xl:flex-row gap-5 w-full">
164+
{beast?.price != null && (
165+
<PriceBox>
166+
<H2>Price</H2>
167+
<H3>{parseFloat(parseFloat(beast?.price).toFixed(2))} FUSD</H3>
168+
</PriceBox>
169+
)}
170+
{allBeastOffers?.filter((offer: any) => offer?.beastID == beast?.id)
171+
.length > 0 && (
172+
<PriceBox>
173+
<H2>Best offer</H2>
174+
<H3>
175+
{parseFloat(parseFloat(bestOffer?.offerAmount).toFixed(2))} FUSD
176+
</H3>
177+
178+
<H2>
179+
by{" "}
180+
<Clickable className="text-white">
181+
<a href={"/profile/" + bestOffer?.offeror}>
182+
{hunterData?.filter(
183+
(hunter: any) => hunter.address == bestOffer?.offeror,
184+
)?.[0]?.findName != null ? (
185+
<>
186+
{hunterData?.filter(
187+
(hunter: any) => hunter.address == bestOffer?.offeror,
188+
)?.[0]?.findName != ""
189+
? hunterData?.filter(
190+
(hunter: any) =>
191+
hunter.address == bestOffer?.offeror,
192+
)?.[0]?.findName
193+
: bestOffer?.offeror}
194+
</>
195+
) : (
196+
bestOffer?.offeror
197+
)}
198+
</a>
199+
</Clickable>
200+
</H2>
201+
</PriceBox>
202+
)}
203+
</div>
204+
{/* <span>Last sale price [price] FUSD</span> */}
205+
{/* TODO */}
206+
{user?.addr == beast?.currentOwner ? (
207+
<>
208+
{beastsForSale
209+
?.map((beast: any) => beast.id)
210+
.includes(beast?.id) ? (
211+
<BuyButton key={beast?.id} onClick={() => delistBeast(beast?.id)}>
212+
Delist
213+
</BuyButton>
214+
) : (
215+
<BuyButton
216+
key={beast?.id}
217+
onClick={() => setListBeastForSaleOpen(true)}
218+
>
219+
List for sale
220+
</BuyButton>
221+
)}
222+
</>
223+
) : (
224+
<>
225+
{beast?.price != null && (
226+
<BuyButton
227+
onClick={() =>
228+
purchaseBeast(beast?.currentOwner, beast?.id, beast?.price)
229+
}
230+
>
231+
Buy now for {parseFloat(parseFloat(beast?.price).toFixed(2))}{" "}
232+
FUSD
233+
</BuyButton>
234+
)}
235+
</>
236+
)}
237+
{user?.addr != beast?.currentOwner && (
238+
<BidButton onClick={() => setPlaceABidOpen(true)}>
239+
Make offer
240+
</BidButton>
241+
)}
242+
{user?.addr == beast?.currentOwner && bestOffer != null && (
243+
<BidButton onClick={() => setAcceptOfferOpen(true)}>
244+
Accept best offer
245+
</BidButton>
246+
)}
247+
248+
{/* <H2>Sale ends in [time]</H2> */}
249+
</SaleDiv>
250+
{/* ) : (
251+
<div style={{ marginTop: "50px", width: "80%" }}>
252+
<BidButton>Make an offer</BidButton>
253+
</div>
254+
)} */}
255+
</InfoMobileWrapper>
256+
)
257+
}

0 commit comments

Comments
 (0)