Skip to content

Commit

Permalink
update funky boxes page
Browse files Browse the repository at this point in the history
  • Loading branch information
@codomposer
codomposer committed Dec 12, 2022
1 parent 94a8680 commit 897fc26
Show file tree
Hide file tree
Showing 3 changed files with 223 additions and 0 deletions.
105 changes: 105 additions & 0 deletions src/pages/FunkyBoxes/FunkyBoxes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,15 +134,120 @@
}

.recent-open {
width: 100%;

h2 {
margin-top: 50px;
margin-bottom: 50px;
font-size: 30px;
line-height: 1.2;
font-family: 'Arial';
font-weight: 500;
text-align: center;
color: #323232;
}

.recent-opened-boxes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;

div {
position: relative;
display: flex;
align-items: center;
border: 1px solid #434343;
border-radius: 12px;
padding: 16px;
background-color: #323232;

img {
border-radius: 100px;
}

p {
margin-left: 12px;
color: white;
}

span {
position: absolute;
bottom: 8px;
right: 8px;
color: #AAA;
}
}
}

@include media-lg {
h2 {
margin-bottom: 24px;
}

.recent-opened-boxes {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 12px;

div {
padding: 12px;

span {
font-size: 12px;
bottom: 4px;
}
}
}
}
}

.divider {
margin: 48px 0;
border: 1px solid #f787f4;
height: 1px;
width: 100%;

@include media-lg {
margin: 24px 0;
}
}

.gradient-text {
font-size: 48px;
font-weight: bold;
background: linear-gradient(135deg, #B386FE 5.91%, #92CFEB 50.2%, #A7FE89 101.53%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.social-links {
display: flex;
gap: 16px;
margin: 12px 0;

a {
display: flex;
border-radius: 17px;
width: 34px;
height: 34px;
background-color: #89affd;

svg {
margin: auto;
width: 20px;
height: 20px;
}

&:hover {
background-color: #f784f8;
}
}
}

.copyright {
display: none;
margin-bottom: 12px;
font-size: 14px;
}
}

Expand Down
115 changes: 115 additions & 0 deletions src/pages/FunkyBoxes/FunkyBoxes.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useEffect, useRef, useState } from 'react'
import MainLayout from 'layouts/MainLayout'
import FunkyBox from 'components/FunkyBox'
import { DiscordIcon, TwitterIcon } from 'components/SVGIcons'
import { shortenAddress } from 'utils'
import './FunkyBoxes.scss'

const boxes = [
Expand All @@ -12,8 +14,81 @@ const boxes = [
const FunkyBoxes = () => {
const [openedBox, setOpenedBox] = useState<number>(-1)
const [isOpen, setIsOpen] = useState<boolean>(false)
const [recentOpens, setRecentOpens] = useState<Array<any>>([
{
boxId: 1,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 3:00:00',
},
{
boxId: 0,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 0,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 1,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 2,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 1,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 0,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 1,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 2,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
{
boxId: 0,
walletAddress: '4FBqjSUBsYrkV2nSaSQ2fiythmSXRrQhXX3bN1A34M6R',
betAmount: 0.5,
winAmount: 1,
time: '2022-12-12 2:00:00',
},
])
const videoRef = useRef<HTMLVideoElement>(null)

//triggers when a user select the box to open
const handleSelectBox = (i: number) => {
setOpenedBox(i)
}
Expand All @@ -35,6 +110,23 @@ const FunkyBoxes = () => {
}, 3000)
}

//fetch opened boxes data from chain
const fetchDataFromChain = () => {}

const timeDiff = (time: string) => {
const startDate = new Date(time)
const endDate = new Date()
let diff = endDate.getTime() - startDate.getTime()
diff = Math.floor(diff / 1000)
if (diff < 60) return 'a few seconds ago'
if (diff < 120) return 'a minute ago'
if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`
if (diff < 7200) return 'an hour ago'
if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`
if (diff < 172800) return 'a day ago'
return 'many days ago'
}

return (
<MainLayout title="Funky Boxes" className="funky-boxes">
<div className="container">
Expand All @@ -53,7 +145,30 @@ const FunkyBoxes = () => {
<h3 className="responsive">Open Responsibly</h3>
<div className="recent-open">
<h2>Recent Opens</h2>
<div className="recent-opened-boxes">
{recentOpens.map((item, index) => (
<div key={index}>
<img src={boxes[item.boxId].imageUrl} alt="" width={54} height={54} />
<p>
{shortenAddress(item.walletAddress)} opened {item.betAmount} SOL and won{' '}
{item.winAmount} SOL
</p>
<span>{timeDiff(item.time)}</span>
</div>
))}
</div>
</div>
<div className="divider" />
<span className="gradient-text">LOOTIES</span>
<div className="social-links">
<a href="https://discord.com">
<DiscordIcon />
</a>
<a href="https://twitter.com">
<TwitterIcon />
</a>
</div>
<p className="copyright">&copy;2022 Looties, All rights reserved.</p>
</div>
{openedBox !== -1 ? (
<div className="video-box">
Expand Down
3 changes: 3 additions & 0 deletions src/utils/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const shortenAddress = (walletAddress: string) => {
return walletAddress.slice(0, 3) + '...' + walletAddress.slice(walletAddress.length - 3)
}

0 comments on commit 897fc26

Please sign in to comment.