const { account, ftList, widgetProvider } = props; const maxHeight = props.maxHeight || 400; const boxShadow = props.boxShadow || "3px 2px 24px rgba(68, 152, 224, 0.3)"; const apiUrl = `https://api.pikespeak.ai/daos/bounties/${account}`; const publicApiKey = "36f2b87a-7ee6-40d8-80b9-5e68e587a5b5"; const bountiesRes = fetch(apiUrl,{ mode: "cors", headers: { "x-api-key": publicApiKey, }, }); const bounties = bountiesRes.body && bountiesRes.body.sort((a,b) => b.id-a.id); console.log(bounties); const CardWrapper = styled.div` position: relative; box-shadow: ${boxShadow}; border-radius: 4px; padding: 20px; margin: 40px 0px; `; const InfoWrapper = styled.div` display: flex; flex-direction: column; margin-bottom: 8px; `; const Label = styled.span` color:#8c8c8c; font-size: 11px; `; const Description = styled.div` overflow:auto; max-height: 150px; `; const parseDescription = (description) => { const parsedDesc = description .replaceAll("$$$$", " ") .replaceAll("\n\n", " "); const parts = parsedDesc.split(" "); const parsedParts = parts.map((p) => { const url = p.match(/https:\/\/\S*/g); if (url) { return ( <a href={p} target="_blank"> {p} </a> ); } return p + " "; }); return parsedParts; }; const formatCountdown = (seconds) => { console.log("seconds", seconds); const d = Math.floor(seconds / (24 * 3600)); const h = Math.floor((seconds - d * 24 * 3600) / 3600); const m = Math.floor((seconds - d * 24 * 3600 - h * 3600) / 60); const s = Math.floor(seconds - d * 24 * 3600 - h * 3600 - m * 60); let res = ""; if (d > 0) { res += `${d}d `; } if (h > 0) { res += `${h}h `; } if (m > 0) { res += `${m}m `; } if (!res && s > 0 && s < 60) { res = "less than a minute"; } return res; }; let TimeLeft = styled.span` color: rgba(68, 152, 224); `; let Status = styled.span` position: absolute; top:20px; right: 20px; font-weight: bold; color: ${(props) => { switch (true) { case props.times===0: return "#ff5e03"; case props.times>0: return "#13a36e"; } }} ` return ( <div style={{marginTop: "40px"}}> <h2>Bounties</h2> {bounties && bounties.length ? bounties.map((b) => <CardWrapper> <Status times={b.times}> {b.times>0? "Active": "Done"} </Status> <InfoWrapper> <Label>Id</Label> <Description> {b.id} </Description> </InfoWrapper> <InfoWrapper> <Label>Description</Label> <Description> {parseDescription(b.description)} </Description> </InfoWrapper> <InfoWrapper> <Label>Reward</Label> <Widget src={`${widgetProvider}/widget/table_ft_formatter`} props={{ ftList, ft: b.token, amount: b.amount, }} /> </InfoWrapper> <InfoWrapper> <Label>Deadline</Label> <Description> <TimeLeft> {formatCountdown(Number(b.max_deadline)/Math.pow(10,9))} </TimeLeft> </Description> </InfoWrapper> <InfoWrapper> <Label>Claimable</Label> <Description> {b.times} times </Description> </InfoWrapper> </CardWrapper> ): <div>There is no bounties for {account}</div>} </div> );