feat: style changes
This commit is contained in:
bartosz-lipinski
parent
1f706f15c5
commit
320b1a34b2
|
|
@ -212,5 +212,5 @@ export const ArtContent = ({
|
|||
style={style}/>
|
||||
);
|
||||
|
||||
return <div ref={ref as any}>{content}</div>;
|
||||
return <div ref={ref as any} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{content}</div>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export const PreSaleBanner = ({ auction }: IPreSaleBanner) => {
|
|||
<ArtContent
|
||||
pubkey={id}
|
||||
className="artwork-image"
|
||||
allowMeshRender={true}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={12} className="presale-info">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Row, Col, Button } from 'antd';
|
||||
import {
|
||||
useArt,
|
||||
useAuction,
|
||||
} from '../../hooks';
|
||||
import {
|
||||
useConnectionConfig,
|
||||
} from '@oyster/common';
|
||||
|
||||
export const ViewOn = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { env } = useConnectionConfig();
|
||||
const auction = useAuction(id);
|
||||
const art = useArt(auction?.thumbnail.metadata.pubkey);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Col>
|
||||
<h6>View on</h6>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button
|
||||
className="tag"
|
||||
onClick={() => window.open(art.uri || '', '_blank')}
|
||||
>
|
||||
Arweave
|
||||
</Button>
|
||||
<Button
|
||||
className="tag"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
`https://explorer.solana.com/account/${art?.mint || ''}${
|
||||
env.indexOf('main') >= 0 ? '' : `?cluster=${env}`
|
||||
}`,
|
||||
'_blank',
|
||||
)
|
||||
}
|
||||
>
|
||||
Solana
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -31,5 +31,5 @@
|
|||
|
||||
.royalties {
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Row, Col, Divider, Layout, Tag, Button } from 'antd';
|
||||
import { Row, Col, Divider, Layout, Tag, Button, Skeleton } from 'antd';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useArt, useExtendedArt } from './../../hooks';
|
||||
|
||||
|
|
@ -9,6 +9,7 @@ import { shortenAddress, TokenAccount, useConnection, useUserAccounts, useWallet
|
|||
import { MetaAvatar } from '../../components/MetaAvatar';
|
||||
import { sendSignMetadata } from '../../actions/sendSignMetadata';
|
||||
import { PublicKey } from '@solana/web3.js';
|
||||
import { ViewOn } from './../../components/ViewOn';
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
|
|
@ -72,85 +73,96 @@ export const ArtView = () => {
|
|||
md={{ span: 12 }}
|
||||
style={{ textAlign: 'left', fontSize: '1.4rem' }}
|
||||
>
|
||||
<div style={{ fontWeight: 700, fontSize: '4rem' }}>{art.title}</div>
|
||||
<br />
|
||||
<div className="info-header">CREATED BY</div>
|
||||
<div className="creators">
|
||||
{(art.creators || [])
|
||||
.map(creator => {
|
||||
return (
|
||||
<div
|
||||
className="info-content"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<MetaAvatar creators={[creator]} size={64} />
|
||||
<div>
|
||||
<span className="creator-name">
|
||||
{creator.name || shortenAddress(creator.address || '')}
|
||||
</span>
|
||||
{/* <Button
|
||||
onClick={async () => {
|
||||
if(!art.mint) {
|
||||
return;
|
||||
}
|
||||
const mint = new PublicKey(art.mint);
|
||||
|
||||
const account = accountByMint.get(art.mint);
|
||||
if(!account) {
|
||||
return;
|
||||
}
|
||||
|
||||
const owner = wallet?.publicKey;
|
||||
|
||||
if(!owner) {
|
||||
return;
|
||||
}
|
||||
const instructions: any[] = [];
|
||||
await updateMetadata(undefined, undefined, true, mint, owner, instructions)
|
||||
|
||||
sendTransaction(connection, wallet, instructions, [], true);
|
||||
}}
|
||||
<Row>
|
||||
<div style={{ fontWeight: 700, fontSize: '4rem' }}>{art.title || <Skeleton paragraph={{ rows: 0 }} />}</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<h6>Royalties</h6>
|
||||
<div className="royalties">
|
||||
{((art.seller_fee_basis_points || 0) / 100).toFixed(2)}%
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ViewOn />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<h6 style={{ marginTop: 5 }}>Created By</h6>
|
||||
<div className="creators">
|
||||
{(art.creators || [])
|
||||
.map(creator => {
|
||||
return (
|
||||
<div
|
||||
style={{ display: 'flex', alignItems: 'center', marginBottom: 5 }}
|
||||
>
|
||||
Mark as Sold
|
||||
</Button> */}
|
||||
<div style={{ marginLeft: 10 }}>
|
||||
{!creator.verified &&
|
||||
(creator.address === pubkey ? (
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
await sendSignMetadata(
|
||||
connection,
|
||||
wallet,
|
||||
new PublicKey(id),
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
) : (
|
||||
tag
|
||||
))}
|
||||
<MetaAvatar creators={[creator]} size={64} />
|
||||
<div>
|
||||
<span className="creator-name">
|
||||
{creator.name || shortenAddress(creator.address || '')}
|
||||
</span>
|
||||
<div style={{ marginLeft: 10 }}>
|
||||
{!creator.verified &&
|
||||
(creator.address === pubkey ? (
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
await sendSignMetadata(
|
||||
connection,
|
||||
wallet,
|
||||
new PublicKey(id),
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
) : (
|
||||
tag
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* <Button
|
||||
onClick={async () => {
|
||||
if(!art.mint) {
|
||||
return;
|
||||
}
|
||||
const mint = new PublicKey(art.mint);
|
||||
|
||||
const account = accountByMint.get(art.mint);
|
||||
if(!account) {
|
||||
return;
|
||||
}
|
||||
|
||||
const owner = wallet?.publicKey;
|
||||
|
||||
if(!owner) {
|
||||
return;
|
||||
}
|
||||
const instructions: any[] = [];
|
||||
await updateMetadata(undefined, undefined, true, mint, owner, instructions)
|
||||
|
||||
sendTransaction(connection, wallet, instructions, [], true);
|
||||
}}
|
||||
>
|
||||
Mark as Sold
|
||||
</Button> */}
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<Divider />
|
||||
<br />
|
||||
{art.creators?.find(c => !c.verified) && unverified}
|
||||
<div className="info-header">CREATOR ROYALTIES</div>
|
||||
<div className="royalties">
|
||||
{((art.seller_fee_basis_points || 0) / 100).toFixed(2)}%
|
||||
</div>
|
||||
<br />
|
||||
<div className="info-header">ABOUT THE CREATION</div>
|
||||
<div className="info-content">{description}</div>
|
||||
|
|
|
|||
|
|
@ -58,15 +58,13 @@ export const AuctionItem = ({
|
|||
height: 300,
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<ArtContent
|
||||
pubkey={id}
|
||||
className="artwork-image stack-item"
|
||||
style={style}
|
||||
active={active}
|
||||
allowMeshRender={true}
|
||||
/>
|
||||
</div>
|
||||
<ArtContent
|
||||
pubkey={id}
|
||||
className="artwork-image stack-item"
|
||||
style={style}
|
||||
active={active}
|
||||
allowMeshRender={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -124,9 +122,9 @@ export const AuctionView = () => {
|
|||
{items}
|
||||
</Carousel>
|
||||
</div>
|
||||
<h6>NUMBER OF WINNERS</h6>
|
||||
<h6>Number Of Winners</h6>
|
||||
<h1>{winnerCount === undefined ? <Skeleton paragraph={{ rows: 0 }} /> : winnerCount}</h1>
|
||||
<h6>NUMBER OF NFTs</h6>
|
||||
<h6>Number Of NFTs</h6>
|
||||
<h1>{nftCount === undefined ? <Skeleton paragraph={{ rows: 0 }} /> : nftCount}</h1>
|
||||
<h6>About this {nftCount === 1 ? 'NFT' : 'Collection'}</h6>
|
||||
<p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue