mirror of https://github.com/certusone/oyster.git
Metaplex: winners range, datetime fields (#91)
* winners range * store datetime fields on attributes * initial landing page * responsiveness with bootstrap
This commit is contained in:
parent
fa203e280e
commit
4248648f76
Binary file not shown.
After Width: | Height: | Size: 220 KiB |
|
@ -0,0 +1,102 @@
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-family: Graphik Web Regular;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 40px;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheader {
|
||||||
|
font-family: Graphik Web Regular;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 48px;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 42px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-family: Graphik Web Regular;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vw;
|
||||||
|
|
||||||
|
background: url(image.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 10px;
|
||||||
|
|
||||||
|
position: static;
|
||||||
|
width: 350px;
|
||||||
|
height: 59px;
|
||||||
|
left: 0px;
|
||||||
|
top: 69px;
|
||||||
|
|
||||||
|
background: linear-gradient(270deg, #616774 7.29%, #403F4C 100%);
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
flex: none;
|
||||||
|
order: 1;
|
||||||
|
flex-grow: 0;
|
||||||
|
margin: 15px 0px;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-input {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 10px 16px 24px;
|
||||||
|
|
||||||
|
position: static;
|
||||||
|
width: 348px;
|
||||||
|
height: 54px;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
background: #282828;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
margin: 15px 0px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.typeform-widget {
|
||||||
|
height: 360px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
|
@ -0,0 +1,47 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Metaplex NFT Marketplace</title>
|
||||||
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
|
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||||
|
<link href="//db.onlinewebfonts.com/c/105007d99d9df64c50cc24d696d79555?family=Graphik+Web+Regular" rel="stylesheet"
|
||||||
|
type="text/css" />
|
||||||
|
<link rel="stylesheet" href="landing.css">
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header my-3 my-md-5">METAPLEX</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<div>
|
||||||
|
<div class="subheader">NFT platforms. Push to start.</div>
|
||||||
|
<div class="text">
|
||||||
|
Metaplex is an open source NFT framework built on Solana that puts creators and artists in the drivers
|
||||||
|
seat.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
With Metaplex, you can launch an NFT marketplace in minutes.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- <input class="email-input" placeholder="Email Address"/> -->
|
||||||
|
<!-- <button>SIGN UP FOR EARLY ACCESS</button> -->
|
||||||
|
<div id="form" data-tf-widget="gZ8mozPq"></div>
|
||||||
|
<script src="//embed.typeform.com/next/embed.js"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<div class="image mx-auto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -53,6 +53,7 @@ import {
|
||||||
WinningConstraint,
|
WinningConstraint,
|
||||||
} from '../../models/metaplex';
|
} from '../../models/metaplex';
|
||||||
import { serialize } from 'borsh';
|
import { serialize } from 'borsh';
|
||||||
|
import moment from 'moment'
|
||||||
import {
|
import {
|
||||||
createAuctionManager,
|
createAuctionManager,
|
||||||
SafetyDepositDraft,
|
SafetyDepositDraft,
|
||||||
|
@ -94,7 +95,8 @@ export interface AuctionState {
|
||||||
// suggested date time when auction should end UTC+0
|
// suggested date time when auction should end UTC+0
|
||||||
endDate?: Date;
|
endDate?: Date;
|
||||||
|
|
||||||
// Jose's attributes
|
|
||||||
|
//////////////////
|
||||||
category: AuctionCategory;
|
category: AuctionCategory;
|
||||||
saleType?: 'auction' | 'sale';
|
saleType?: 'auction' | 'sale';
|
||||||
|
|
||||||
|
@ -599,28 +601,39 @@ const TierWinners = (props: {
|
||||||
tier: Tier;
|
tier: Tier;
|
||||||
setTier: Function;
|
setTier: Function;
|
||||||
previousTo?: number;
|
previousTo?: number;
|
||||||
|
lastTier?: Tier;
|
||||||
}) => {
|
}) => {
|
||||||
|
const from = (props.previousTo || 0) + 1
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Divider />
|
<Divider />
|
||||||
<label className="action-field">
|
<label className="action-field">
|
||||||
<span className="field-title">Winners</span>
|
<span className="field-title">Winners</span>
|
||||||
<div>
|
<div>
|
||||||
<Input
|
<InputNumber
|
||||||
disabled={props.idx === 0}
|
disabled={true}
|
||||||
defaultValue={(props.previousTo || 0) + 1}
|
value={from}
|
||||||
type="number"
|
type="number"
|
||||||
className="input"
|
className="input"
|
||||||
style={{ width: '30%' }}
|
style={{ width: '30%' }}
|
||||||
onChange={info => null}
|
onChange={value =>
|
||||||
|
null
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
to
|
to
|
||||||
<Input
|
<InputNumber
|
||||||
|
min={from + 1}
|
||||||
|
disabled={props.lastTier?.to == props.tier.to}
|
||||||
defaultValue={props.tier.to}
|
defaultValue={props.tier.to}
|
||||||
type="number"
|
type="number"
|
||||||
className="input"
|
className="input"
|
||||||
style={{ width: '30%' }}
|
style={{ width: '30%' }}
|
||||||
onChange={info => null}
|
onChange={value =>
|
||||||
|
props.setTier(props.idx, {
|
||||||
|
...props.tier,
|
||||||
|
to: value || props.tier.to,
|
||||||
|
})
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
|
@ -722,8 +735,10 @@ const TierStep = (props: {
|
||||||
tier={tier}
|
tier={tier}
|
||||||
setTier={setTier}
|
setTier={setTier}
|
||||||
previousTo={tiers[idx - 1]?.to}
|
previousTo={tiers[idx - 1]?.to}
|
||||||
|
lastTier={tiers.slice(-1)[0]}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
|
@ -903,7 +918,6 @@ const PriceAuction = (props: {
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
min={0}
|
min={0}
|
||||||
autoFocus
|
|
||||||
className="input"
|
className="input"
|
||||||
placeholder="Tick size in USD"
|
placeholder="Tick size in USD"
|
||||||
prefix="$"
|
prefix="$"
|
||||||
|
@ -941,6 +955,31 @@ const InitialPhaseStep = (props: {
|
||||||
const [startNow, setStartNow] = useState<boolean>(true);
|
const [startNow, setStartNow] = useState<boolean>(true);
|
||||||
const [listNow, setListNow] = useState<boolean>(true);
|
const [listNow, setListNow] = useState<boolean>(true);
|
||||||
|
|
||||||
|
const [saleMoment, setSaleMoment] = useState<moment.Moment | undefined>(props.attributes.startSaleTS ? moment.unix(props.attributes.startSaleTS) : undefined)
|
||||||
|
const [listMoment, setListMoment] = useState<moment.Moment | undefined>(props.attributes.startListTS ? moment.unix(props.attributes.startListTS) : undefined)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
props.setAttributes({
|
||||||
|
...props.attributes,
|
||||||
|
startSaleTS: saleMoment && saleMoment.unix() * 1000
|
||||||
|
})
|
||||||
|
}, [saleMoment])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
props.setAttributes({
|
||||||
|
...props.attributes,
|
||||||
|
startListTS: listMoment && listMoment.unix() * 1000
|
||||||
|
})
|
||||||
|
}, [listMoment])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (startNow) setSaleMoment(moment())
|
||||||
|
}, [startNow])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (listNow) setListMoment(moment())
|
||||||
|
}, [listNow])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Row className="call-to-action">
|
<Row className="call-to-action">
|
||||||
|
@ -1104,7 +1143,6 @@ const EndingPhaseAuction = (props: {
|
||||||
</span>
|
</span>
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
autoFocus
|
|
||||||
className="input"
|
className="input"
|
||||||
placeholder="Duration in minutes"
|
placeholder="Duration in minutes"
|
||||||
suffix="minutes"
|
suffix="minutes"
|
||||||
|
@ -1126,7 +1164,6 @@ const EndingPhaseAuction = (props: {
|
||||||
</span>
|
</span>
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
autoFocus
|
|
||||||
className="input"
|
className="input"
|
||||||
placeholder="Percentage"
|
placeholder="Percentage"
|
||||||
suffix="%"
|
suffix="%"
|
||||||
|
@ -1160,6 +1197,18 @@ const EndingPhaseSale = (props: {
|
||||||
confirm: () => void;
|
confirm: () => void;
|
||||||
}) => {
|
}) => {
|
||||||
const [untilSold, setUntilSold] = useState<boolean>(true);
|
const [untilSold, setUntilSold] = useState<boolean>(true);
|
||||||
|
const [endMoment, setEndMoment] = useState<moment.Moment | undefined>(props.attributes.endTS ? moment.unix(props.attributes.endTS) : undefined)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
props.setAttributes({
|
||||||
|
...props.attributes,
|
||||||
|
endTS: endMoment && endMoment.unix() * 1000
|
||||||
|
})
|
||||||
|
}, [endMoment])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (untilSold) setEndMoment(undefined)
|
||||||
|
}, [untilSold])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1199,12 +1248,33 @@ const EndingPhaseSale = (props: {
|
||||||
<DatePicker
|
<DatePicker
|
||||||
className="field-date"
|
className="field-date"
|
||||||
size="large"
|
size="large"
|
||||||
onChange={(dt, dtString) => console.log(dt?.unix())}
|
disabledDate={current => current && current < moment().endOf('day')}
|
||||||
|
value={endMoment}
|
||||||
|
onChange={value => {
|
||||||
|
if (!value) return
|
||||||
|
if (!endMoment) return setEndMoment(value)
|
||||||
|
|
||||||
|
const currentMoment = endMoment.clone()
|
||||||
|
currentMoment.hour(value.hour())
|
||||||
|
currentMoment.minute(value.minute())
|
||||||
|
currentMoment.second(value.second())
|
||||||
|
setEndMoment(currentMoment)
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<TimePicker
|
<TimePicker
|
||||||
className="field-date"
|
className="field-date"
|
||||||
size="large"
|
size="large"
|
||||||
onChange={(dt, dtString) => console.log(dt?.unix())}
|
value={endMoment}
|
||||||
|
onChange={value => {
|
||||||
|
if (!value) return
|
||||||
|
if (!endMoment) return setEndMoment(value)
|
||||||
|
|
||||||
|
const currentMoment = endMoment.clone()
|
||||||
|
currentMoment.hour(value.hour())
|
||||||
|
currentMoment.minute(value.minute())
|
||||||
|
currentMoment.second(value.second())
|
||||||
|
setEndMoment(currentMoment)
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue