From 2a8a65feb016e61120d123a35f187056138900d0 Mon Sep 17 00:00:00 2001 From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com> Date: Sun, 25 Apr 2021 21:47:33 -0500 Subject: [PATCH 1/3] feat: auction --- .../src/components/AuctionCard/index.tsx | 126 +++++++++++++++--- .../src/components/PresaleCard/index.less | 6 + packages/metavinci/src/hooks/index.ts | 1 + packages/metavinci/src/hooks/useAuction.tsx | 9 ++ packages/metavinci/src/types/index.ts | 2 + .../metavinci/src/views/auction/index.tsx | 44 +++++- .../metavinci/src/views/home/sampleData.ts | 7 + 7 files changed, 173 insertions(+), 22 deletions(-) create mode 100644 packages/metavinci/src/hooks/useAuction.tsx diff --git a/packages/metavinci/src/components/AuctionCard/index.tsx b/packages/metavinci/src/components/AuctionCard/index.tsx index 54b3c76..c2b38ad 100644 --- a/packages/metavinci/src/components/AuctionCard/index.tsx +++ b/packages/metavinci/src/components/AuctionCard/index.tsx @@ -1,28 +1,116 @@ -import React from 'react' -import { useHistory } from 'react-router-dom' -import { Card } from 'antd' +import React, { useEffect, useState } from 'react' +// import { useHistory } from 'react-router-dom' +import { + Row, + Col, + Divider, + Button, + InputNumber +} from 'antd' -import { Auction } from '../../types' +import { Auction, Presale } from '../../types' import './index.less' +import { getCountdown } from '../../utils/utils' +import { solanaToUSD } from '../../utils/assets' +const Price = ({amt}: {amt: number}) => { + const [USDamt, setUSDamt] = useState(0) -export const AuctionCard = ({ auction, sold }: { auction: Auction, sold?: boolean }) => { - const history = useHistory() - - const handleCoverClick = async () => { - history.push(auction.link) - } + useEffect(() => { + solanaToUSD(amt).then(setUSDamt) + }, [amt]) return ( - } - > -
{auction.name}
- {auction.auctionerName} -
{sold ? 'SOLD' : 'Highest Bid:'} ${auction.highestBid} / ◎{auction.solAmt}
- +
+ ◎{amt}   + ${USDamt.toFixed(2)} +
+ ) +} + +export const AuctionCard = ({ auction }: { auction: Auction }) => { + const [hours, setHours] = useState(23) + const [minutes, setMinutes] = useState(59) + const [seconds, setSeconds] = useState(59) + + useEffect(() => { + const interval = setInterval(() => { + const { hours, minutes, seconds } = getCountdown(auction.endingTS) + + setHours(hours) + setMinutes(minutes) + setSeconds(seconds) + }, 1000) + return () => clearInterval(interval) + }, []) + + return ( +
+
STARTING BID
+
◎40.00
+
+
AUCTION ENDS IN
+ + +
{hours || '--'}
+
hours
+ + +
{minutes || '--'}
+
minutes
+ + +
{seconds || '--'}
+
seconds
+ + +
+
+ Any bids placed in the last 15 minutes will extend the auction for another 15 minutes. +
+
+ +
+ + + // props.setAttributes({ + // ...props.attributes, + // name: info.target.value, + // }) + // } + /> + +
+ Your Balance: ◎ {0.0} (${0.0}) +
+ + + + {/*
TARGET PRICE PER SHARE (NVA)
+
+ +
PRICE PER SHARE (NVA)
+
+
+
MARKET CAP
+
*/} + {/* + + + */} +
) } diff --git a/packages/metavinci/src/components/PresaleCard/index.less b/packages/metavinci/src/components/PresaleCard/index.less index 06ce62d..b9c7db1 100644 --- a/packages/metavinci/src/components/PresaleCard/index.less +++ b/packages/metavinci/src/components/PresaleCard/index.less @@ -12,6 +12,12 @@ padding: 30px; } +.info-line { + height: 1px; + width: 100%; + background-color: rgba(255, 255, 255, 0.2);; +} + .info-header { font-size: 1rem; font-style: normal; diff --git a/packages/metavinci/src/hooks/index.ts b/packages/metavinci/src/hooks/index.ts index 9bc9639..6752b2a 100644 --- a/packages/metavinci/src/hooks/index.ts +++ b/packages/metavinci/src/hooks/index.ts @@ -1,3 +1,4 @@ export * from './useArt'; export * from './useAuctions'; export * from './useUserArts'; +export * from './useAuction'; diff --git a/packages/metavinci/src/hooks/useAuction.tsx b/packages/metavinci/src/hooks/useAuction.tsx new file mode 100644 index 0000000..f000524 --- /dev/null +++ b/packages/metavinci/src/hooks/useAuction.tsx @@ -0,0 +1,9 @@ +import React, { useMemo } from 'react'; +import { sampleAuction } from '../views/home/sampleData'; +import { useMeta } from './../contexts'; + +export const useAuction = (id: string) => { + const { metadata } = useMeta(); + + return sampleAuction; +} diff --git a/packages/metavinci/src/types/index.ts b/packages/metavinci/src/types/index.ts index 0b59127..5926494 100644 --- a/packages/metavinci/src/types/index.ts +++ b/packages/metavinci/src/types/index.ts @@ -8,6 +8,8 @@ export interface Auction { solAmt: number; link: string; image: string; + + endingTS: number; } export interface Artist { diff --git a/packages/metavinci/src/views/auction/index.tsx b/packages/metavinci/src/views/auction/index.tsx index 833897f..f3262ab 100644 --- a/packages/metavinci/src/views/auction/index.tsx +++ b/packages/metavinci/src/views/auction/index.tsx @@ -1,9 +1,47 @@ import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Row, Col, Divider, Layout, Image } from 'antd'; +import { AuctionCard } from '../../components/AuctionCard'; +import { useArt, useAuction } from '../../hooks'; +import { ArtContent } from '../../components/ArtContent'; +import { sampleArtist } from '../home/sampleData'; + +const { Content } = Layout export const AuctionView = () => { + const { id } = useParams<{ id: string }>(); + const auction = useAuction(id); + const art = useArt(id); + const artist = sampleArtist + return ( -
- TODO: Auction view -
+ + + + + + + + +
{art.title}
+
+
CREATED BY
+
@{art.artist}
+
+
CREATOR ROYALTIES
+
{art.royalties}%
+
+
ABOUT THE CREATION
+
{art.about}
+
+
ABOUT THE CREATOR
+
{artist.about}
+ + + + + + + ); }; diff --git a/packages/metavinci/src/views/home/sampleData.ts b/packages/metavinci/src/views/home/sampleData.ts index c5e4163..8316da4 100644 --- a/packages/metavinci/src/views/home/sampleData.ts +++ b/packages/metavinci/src/views/home/sampleData.ts @@ -8,6 +8,7 @@ export const sampleAuction: Auction = { solAmt: 200, link: '/auction/1234abcd', image: 'img/auction1.jpg', + endingTS: 1618447663000, }; export const sampleAuctions: Array = [ @@ -19,6 +20,7 @@ export const sampleAuctions: Array = [ solAmt: 115, link: '/auction/1234abcd', image: 'img/auction2.jpg', + endingTS: 1618447663000, }, { name: 'Miko 4', @@ -29,6 +31,7 @@ export const sampleAuctions: Array = [ solAmt: 75, link: '/auction/1234abcd', image: 'img/auction3.jpg', + endingTS: 1618447663000, }, { name: 'Tell Me', @@ -38,6 +41,7 @@ export const sampleAuctions: Array = [ solAmt: 120, link: '/auction/1234abcd', image: 'img/auction4.jpg', + endingTS: 1618447663000, }, { name: 'Saucy', @@ -47,6 +51,7 @@ export const sampleAuctions: Array = [ solAmt: 200, link: '/auction/1234abcd', image: 'img/auction5.jpg', + endingTS: 1618447663000, }, { name: 'Haze', @@ -56,6 +61,7 @@ export const sampleAuctions: Array = [ solAmt: 200, link: '/auction/1234abcd', image: 'img/auction6.jpg', + endingTS: 1618447663000, }, { name: 'Wounderground', @@ -65,6 +71,7 @@ export const sampleAuctions: Array = [ solAmt: 200, link: '/auction/1234abcd', image: 'img/auction7.jpg', + endingTS: 1618447663000, }, ]; From d8d0add561a3382c3933c27c9f17600f1fd83576 Mon Sep 17 00:00:00 2001 From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com> Date: Sun, 25 Apr 2021 21:49:13 -0500 Subject: [PATCH 2/3] feat: auction --- .../src/components/AuctionCard/index.tsx | 126 +++++++++++++++--- .../src/components/PresaleCard/index.less | 6 + packages/metavinci/src/hooks/index.ts | 1 + packages/metavinci/src/hooks/useAuction.tsx | 9 ++ packages/metavinci/src/types/index.ts | 2 + .../metavinci/src/views/auction/index.tsx | 44 +++++- .../metavinci/src/views/home/sampleData.ts | 7 + 7 files changed, 173 insertions(+), 22 deletions(-) create mode 100644 packages/metavinci/src/hooks/useAuction.tsx diff --git a/packages/metavinci/src/components/AuctionCard/index.tsx b/packages/metavinci/src/components/AuctionCard/index.tsx index 54b3c76..c2b38ad 100644 --- a/packages/metavinci/src/components/AuctionCard/index.tsx +++ b/packages/metavinci/src/components/AuctionCard/index.tsx @@ -1,28 +1,116 @@ -import React from 'react' -import { useHistory } from 'react-router-dom' -import { Card } from 'antd' +import React, { useEffect, useState } from 'react' +// import { useHistory } from 'react-router-dom' +import { + Row, + Col, + Divider, + Button, + InputNumber +} from 'antd' -import { Auction } from '../../types' +import { Auction, Presale } from '../../types' import './index.less' +import { getCountdown } from '../../utils/utils' +import { solanaToUSD } from '../../utils/assets' +const Price = ({amt}: {amt: number}) => { + const [USDamt, setUSDamt] = useState(0) -export const AuctionCard = ({ auction, sold }: { auction: Auction, sold?: boolean }) => { - const history = useHistory() - - const handleCoverClick = async () => { - history.push(auction.link) - } + useEffect(() => { + solanaToUSD(amt).then(setUSDamt) + }, [amt]) return ( - } - > -
{auction.name}
- {auction.auctionerName} -
{sold ? 'SOLD' : 'Highest Bid:'} ${auction.highestBid} / ◎{auction.solAmt}
- +
+ ◎{amt}   + ${USDamt.toFixed(2)} +
+ ) +} + +export const AuctionCard = ({ auction }: { auction: Auction }) => { + const [hours, setHours] = useState(23) + const [minutes, setMinutes] = useState(59) + const [seconds, setSeconds] = useState(59) + + useEffect(() => { + const interval = setInterval(() => { + const { hours, minutes, seconds } = getCountdown(auction.endingTS) + + setHours(hours) + setMinutes(minutes) + setSeconds(seconds) + }, 1000) + return () => clearInterval(interval) + }, []) + + return ( +
+
STARTING BID
+
◎40.00
+
+
AUCTION ENDS IN
+ + +
{hours || '--'}
+
hours
+ + +
{minutes || '--'}
+
minutes
+ + +
{seconds || '--'}
+
seconds
+ + +
+
+ Any bids placed in the last 15 minutes will extend the auction for another 15 minutes. +
+
+ +
+ + + // props.setAttributes({ + // ...props.attributes, + // name: info.target.value, + // }) + // } + /> + +
+ Your Balance: ◎ {0.0} (${0.0}) +
+ + + + {/*
TARGET PRICE PER SHARE (NVA)
+
+ +
PRICE PER SHARE (NVA)
+
+
+
MARKET CAP
+
*/} + {/* + + + */} +
) } diff --git a/packages/metavinci/src/components/PresaleCard/index.less b/packages/metavinci/src/components/PresaleCard/index.less index 06ce62d..b9c7db1 100644 --- a/packages/metavinci/src/components/PresaleCard/index.less +++ b/packages/metavinci/src/components/PresaleCard/index.less @@ -12,6 +12,12 @@ padding: 30px; } +.info-line { + height: 1px; + width: 100%; + background-color: rgba(255, 255, 255, 0.2);; +} + .info-header { font-size: 1rem; font-style: normal; diff --git a/packages/metavinci/src/hooks/index.ts b/packages/metavinci/src/hooks/index.ts index 9bc9639..6752b2a 100644 --- a/packages/metavinci/src/hooks/index.ts +++ b/packages/metavinci/src/hooks/index.ts @@ -1,3 +1,4 @@ export * from './useArt'; export * from './useAuctions'; export * from './useUserArts'; +export * from './useAuction'; diff --git a/packages/metavinci/src/hooks/useAuction.tsx b/packages/metavinci/src/hooks/useAuction.tsx new file mode 100644 index 0000000..f000524 --- /dev/null +++ b/packages/metavinci/src/hooks/useAuction.tsx @@ -0,0 +1,9 @@ +import React, { useMemo } from 'react'; +import { sampleAuction } from '../views/home/sampleData'; +import { useMeta } from './../contexts'; + +export const useAuction = (id: string) => { + const { metadata } = useMeta(); + + return sampleAuction; +} diff --git a/packages/metavinci/src/types/index.ts b/packages/metavinci/src/types/index.ts index 0b59127..5926494 100644 --- a/packages/metavinci/src/types/index.ts +++ b/packages/metavinci/src/types/index.ts @@ -8,6 +8,8 @@ export interface Auction { solAmt: number; link: string; image: string; + + endingTS: number; } export interface Artist { diff --git a/packages/metavinci/src/views/auction/index.tsx b/packages/metavinci/src/views/auction/index.tsx index 833897f..f3262ab 100644 --- a/packages/metavinci/src/views/auction/index.tsx +++ b/packages/metavinci/src/views/auction/index.tsx @@ -1,9 +1,47 @@ import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Row, Col, Divider, Layout, Image } from 'antd'; +import { AuctionCard } from '../../components/AuctionCard'; +import { useArt, useAuction } from '../../hooks'; +import { ArtContent } from '../../components/ArtContent'; +import { sampleArtist } from '../home/sampleData'; + +const { Content } = Layout export const AuctionView = () => { + const { id } = useParams<{ id: string }>(); + const auction = useAuction(id); + const art = useArt(id); + const artist = sampleArtist + return ( -
- TODO: Auction view -
+ + + + + + + + +
{art.title}
+
+
CREATED BY
+
@{art.artist}
+
+
CREATOR ROYALTIES
+
{art.royalties}%
+
+
ABOUT THE CREATION
+
{art.about}
+
+
ABOUT THE CREATOR
+
{artist.about}
+ + + + + + + ); }; diff --git a/packages/metavinci/src/views/home/sampleData.ts b/packages/metavinci/src/views/home/sampleData.ts index c5e4163..8316da4 100644 --- a/packages/metavinci/src/views/home/sampleData.ts +++ b/packages/metavinci/src/views/home/sampleData.ts @@ -8,6 +8,7 @@ export const sampleAuction: Auction = { solAmt: 200, link: '/auction/1234abcd', image: 'img/auction1.jpg', + endingTS: 1618447663000, }; export const sampleAuctions: Array = [ @@ -19,6 +20,7 @@ export const sampleAuctions: Array = [ solAmt: 115, link: '/auction/1234abcd', image: 'img/auction2.jpg', + endingTS: 1618447663000, }, { name: 'Miko 4', @@ -29,6 +31,7 @@ export const sampleAuctions: Array = [ solAmt: 75, link: '/auction/1234abcd', image: 'img/auction3.jpg', + endingTS: 1618447663000, }, { name: 'Tell Me', @@ -38,6 +41,7 @@ export const sampleAuctions: Array = [ solAmt: 120, link: '/auction/1234abcd', image: 'img/auction4.jpg', + endingTS: 1618447663000, }, { name: 'Saucy', @@ -47,6 +51,7 @@ export const sampleAuctions: Array = [ solAmt: 200, link: '/auction/1234abcd', image: 'img/auction5.jpg', + endingTS: 1618447663000, }, { name: 'Haze', @@ -56,6 +61,7 @@ export const sampleAuctions: Array = [ solAmt: 200, link: '/auction/1234abcd', image: 'img/auction6.jpg', + endingTS: 1618447663000, }, { name: 'Wounderground', @@ -65,6 +71,7 @@ export const sampleAuctions: Array = [ solAmt: 200, link: '/auction/1234abcd', image: 'img/auction7.jpg', + endingTS: 1618447663000, }, ]; From 03296813a42635fcb845f2cf22716e738e48a2fd Mon Sep 17 00:00:00 2001 From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com> Date: Sun, 25 Apr 2021 21:58:41 -0500 Subject: [PATCH 3/3] chore: cleanup --- .../src/components/AuctionCard/index.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/metavinci/src/components/AuctionCard/index.tsx b/packages/metavinci/src/components/AuctionCard/index.tsx index c2b38ad..d4cfb6e 100644 --- a/packages/metavinci/src/components/AuctionCard/index.tsx +++ b/packages/metavinci/src/components/AuctionCard/index.tsx @@ -1,5 +1,4 @@ -import React, { useEffect, useState } from 'react' -// import { useHistory } from 'react-router-dom' +import React, { useEffect, useState } from 'react'; import { Row, Col, @@ -8,26 +7,10 @@ import { InputNumber } from 'antd' -import { Auction, Presale } from '../../types' +import { Auction } from '../../types' import './index.less' import { getCountdown } from '../../utils/utils' -import { solanaToUSD } from '../../utils/assets' - -const Price = ({amt}: {amt: number}) => { - const [USDamt, setUSDamt] = useState(0) - - useEffect(() => { - solanaToUSD(amt).then(setUSDamt) - }, [amt]) - - return ( -
- ◎{amt}   - ${USDamt.toFixed(2)} -
- ) -} export const AuctionCard = ({ auction }: { auction: Auction }) => { const [hours, setHours] = useState(23)