feat: style changes
This commit is contained in:
parent
1f706f15c5
commit
320b1a34b2
|
@ -212,5 +212,5 @@ export const ArtContent = ({
|
||||||
style={style}/>
|
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
|
<ArtContent
|
||||||
pubkey={id}
|
pubkey={id}
|
||||||
className="artwork-image"
|
className="artwork-image"
|
||||||
|
allowMeshRender={true}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col md={12} className="presale-info">
|
<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 {
|
.royalties {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 2rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
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 { useParams } from 'react-router-dom';
|
||||||
import { useArt, useExtendedArt } from './../../hooks';
|
import { useArt, useExtendedArt } from './../../hooks';
|
||||||
|
|
||||||
|
@ -9,6 +9,7 @@ import { shortenAddress, TokenAccount, useConnection, useUserAccounts, useWallet
|
||||||
import { MetaAvatar } from '../../components/MetaAvatar';
|
import { MetaAvatar } from '../../components/MetaAvatar';
|
||||||
import { sendSignMetadata } from '../../actions/sendSignMetadata';
|
import { sendSignMetadata } from '../../actions/sendSignMetadata';
|
||||||
import { PublicKey } from '@solana/web3.js';
|
import { PublicKey } from '@solana/web3.js';
|
||||||
|
import { ViewOn } from './../../components/ViewOn';
|
||||||
|
|
||||||
const { Content } = Layout;
|
const { Content } = Layout;
|
||||||
|
|
||||||
|
@ -72,85 +73,96 @@ export const ArtView = () => {
|
||||||
md={{ span: 12 }}
|
md={{ span: 12 }}
|
||||||
style={{ textAlign: 'left', fontSize: '1.4rem' }}
|
style={{ textAlign: 'left', fontSize: '1.4rem' }}
|
||||||
>
|
>
|
||||||
<div style={{ fontWeight: 700, fontSize: '4rem' }}>{art.title}</div>
|
<Row>
|
||||||
<br />
|
<div style={{ fontWeight: 700, fontSize: '4rem' }}>{art.title || <Skeleton paragraph={{ rows: 0 }} />}</div>
|
||||||
<div className="info-header">CREATED BY</div>
|
</Row>
|
||||||
<div className="creators">
|
<Row>
|
||||||
{(art.creators || [])
|
<Col span={6}>
|
||||||
.map(creator => {
|
<h6>Royalties</h6>
|
||||||
return (
|
<div className="royalties">
|
||||||
<div
|
{((art.seller_fee_basis_points || 0) / 100).toFixed(2)}%
|
||||||
className="info-content"
|
</div>
|
||||||
style={{ display: 'flex', alignItems: 'center' }}
|
</Col>
|
||||||
>
|
<Col span={12}>
|
||||||
<MetaAvatar creators={[creator]} size={64} />
|
<ViewOn />
|
||||||
<div>
|
</Col>
|
||||||
<span className="creator-name">
|
</Row>
|
||||||
{creator.name || shortenAddress(creator.address || '')}
|
<Row>
|
||||||
</span>
|
<Col>
|
||||||
{/* <Button
|
<h6 style={{ marginTop: 5 }}>Created By</h6>
|
||||||
onClick={async () => {
|
<div className="creators">
|
||||||
if(!art.mint) {
|
{(art.creators || [])
|
||||||
return;
|
.map(creator => {
|
||||||
}
|
return (
|
||||||
const mint = new PublicKey(art.mint);
|
<div
|
||||||
|
style={{ display: 'flex', alignItems: 'center', marginBottom: 5 }}
|
||||||
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
|
<MetaAvatar creators={[creator]} size={64} />
|
||||||
</Button> */}
|
<div>
|
||||||
<div style={{ marginLeft: 10 }}>
|
<span className="creator-name">
|
||||||
{!creator.verified &&
|
{creator.name || shortenAddress(creator.address || '')}
|
||||||
(creator.address === pubkey ? (
|
</span>
|
||||||
<Button
|
<div style={{ marginLeft: 10 }}>
|
||||||
onClick={async () => {
|
{!creator.verified &&
|
||||||
try {
|
(creator.address === pubkey ? (
|
||||||
await sendSignMetadata(
|
<Button
|
||||||
connection,
|
onClick={async () => {
|
||||||
wallet,
|
try {
|
||||||
new PublicKey(id),
|
await sendSignMetadata(
|
||||||
);
|
connection,
|
||||||
} catch (e) {
|
wallet,
|
||||||
console.error(e);
|
new PublicKey(id),
|
||||||
return false;
|
);
|
||||||
}
|
} catch (e) {
|
||||||
return true;
|
console.error(e);
|
||||||
}}
|
return false;
|
||||||
>
|
}
|
||||||
Approve
|
return true;
|
||||||
</Button>
|
}}
|
||||||
) : (
|
>
|
||||||
tag
|
Approve
|
||||||
))}
|
</Button>
|
||||||
|
) : (
|
||||||
|
tag
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
})}
|
||||||
);
|
</div>
|
||||||
})}
|
</Col>
|
||||||
</div>
|
</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>
|
||||||
<Col span="24">
|
<Col span="24">
|
||||||
<Divider />
|
<Divider />
|
||||||
<br />
|
|
||||||
{art.creators?.find(c => !c.verified) && unverified}
|
{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 />
|
<br />
|
||||||
<div className="info-header">ABOUT THE CREATION</div>
|
<div className="info-header">ABOUT THE CREATION</div>
|
||||||
<div className="info-content">{description}</div>
|
<div className="info-content">{description}</div>
|
||||||
|
|
|
@ -58,15 +58,13 @@ export const AuctionItem = ({
|
||||||
height: 300,
|
height: 300,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div>
|
<ArtContent
|
||||||
<ArtContent
|
pubkey={id}
|
||||||
pubkey={id}
|
className="artwork-image stack-item"
|
||||||
className="artwork-image stack-item"
|
style={style}
|
||||||
style={style}
|
active={active}
|
||||||
active={active}
|
allowMeshRender={true}
|
||||||
allowMeshRender={true}
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -124,9 +122,9 @@ export const AuctionView = () => {
|
||||||
{items}
|
{items}
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</div>
|
</div>
|
||||||
<h6>NUMBER OF WINNERS</h6>
|
<h6>Number Of Winners</h6>
|
||||||
<h1>{winnerCount === undefined ? <Skeleton paragraph={{ rows: 0 }} /> : winnerCount}</h1>
|
<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>
|
<h1>{nftCount === undefined ? <Skeleton paragraph={{ rows: 0 }} /> : nftCount}</h1>
|
||||||
<h6>About this {nftCount === 1 ? 'NFT' : 'Collection'}</h6>
|
<h6>About this {nftCount === 1 ? 'NFT' : 'Collection'}</h6>
|
||||||
<p>
|
<p>
|
||||||
|
|
Loading…
Reference in New Issue