Skip to content

Commit

Permalink
Merge branch 'armando/grwth-4027-update-explorer-collectionasset-og-i…
Browse files Browse the repository at this point in the history 
…mage-to-serve-a-similiar' into dev
  • Loading branch information
@r3lays
r3lays committed Feb 13, 2024
2 parents 60be6c3 + 4f24690 commit 0b4ea84
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 242 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,13 @@
"@sentry/nextjs": "^7.85.0",
"@types/uuid": "^9.0.1",
"@vercel/og": "^0.5.20",
"chrome-aws-lambda": "^10.1.0",
"dayjs": "^1.11.6",
"eslint-config-next": "^14.1.0",
"framer-motion": "^6.3.6",
"lodash": "^4.17.21",
"next": "^14.1.0",
"openapi-typescript-fetch": "^1.1.3",
"posthog-js": "^1.93.6",
"puppeteer-core": "^22.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hotkeys-hook": "^4.0.4",
Expand Down
1 change: 1 addition & 0 deletions pages/[chain]/asset/[assetId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ const IndexPage: NextPage<Props> = ({ assetId, ssr }) => {

const base64EncodedToken = btoa(JSON.stringify(token))

console.log(`/api/og/token?token=${encodeURIComponent(base64EncodedToken)}`)
return (
<Layout>
<Head
Expand Down
1 change: 0 additions & 1 deletion pages/[chain]/collection/[contract].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,6 @@ const CollectionPage: NextPage<Props> = ({ id, ssr }) => {
return (
<Layout>
<Head
//ogImage={`/api/og/collection?imageUrl=${encodedImageUrl}&floorPrice=${collection?.floorAsk?.price?.amount?.decimal}`} //floorPrice=${collection?.floorAsk?.price?.amount?.decimal}&
ogImage={ssr?.collection?.collections?.[0]?.banner}
title={ssr?.collection?.collections?.[0]?.name}
description={ssr?.collection?.collections?.[0]?.description as string}
Expand Down
271 changes: 32 additions & 239 deletions pages/api/og/token/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default async function handler(request: NextRequest) {
fetch(
`https://github.com/reservoirprotocol/marketplace-v2/raw/dev/public/fonts/Inter-Black.ttf`
).then((res) => res.arrayBuffer()),

fetch(
`https://github.com/reservoirprotocol/marketplace-v2/raw/dev/public/fonts/Inter-Regular.ttf`
).then((res) => res.arrayBuffer()),
Expand Down Expand Up @@ -115,7 +116,7 @@ export default async function handler(request: NextRequest) {
<div
style={{
gap: '48px',
borderRadius: '24px',
borderRadius: '36px',
width: '95%',
height: '90%',
display: 'flex',
Expand Down Expand Up @@ -156,12 +157,12 @@ export default async function handler(request: NextRequest) {
height: '100px',
display: 'flex',
flexDirection: 'column',
gap: '32px',
}}
>
<div
style={{
height: '100%',
fontSize: '40px',
fontSize: '56px',
fontFamily: 'Black',
fontWeight: '700',
}}
Expand All @@ -174,35 +175,25 @@ export default async function handler(request: NextRequest) {
gap: '5px',
alignItems: 'center',
fontFamily: 'Regular',
fontSize: '35px',
fontSize: '32px',
}}
>
<span
style={{
fontFamily: 'Black',
}}
>
ERC-721
</span>
<span style={{}}>on</span>{' '}
<div
style={{
fontFamily: 'Black',
}}
>
{
chains.find((chain) => chain.id === token.token?.chainId)
?.name
}
</div>
ERC-721
{' '}
<span style={{ color: '#687076', fontSize: '32px' }}>
on
</span>{' '}
{
chains.find((chain) => chain.id === token.token?.chainId)
?.name
}
</div>
</div>
<div
style={{
marginTop: '50px',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
flexDirection: 'column',
gap: '50px',
}}
>
Expand All @@ -216,15 +207,15 @@ export default async function handler(request: NextRequest) {
>
<span
style={{
fontSize: '35px',
fontSize: '32px',
fontFamily: 'Regular',
}}
>
Floor
</span>
<span
style={{
fontSize: '38px',
fontSize: '40px',
}}
>
{token.market?.floorAsk?.price?.amount?.native} {' '}
Expand All @@ -241,32 +232,40 @@ export default async function handler(request: NextRequest) {
>
<span
style={{
fontSize: '35px',
fontSize: '32px',
fontFamily: 'Regular',
}}
>
Best Offer
</span>
<span
style={{
fontSize: '38px',
fontSize: '40px',
}}
>
{token.market?.topBid?.price?.amount?.native} {' '}
{token.market?.topBid?.price?.amount?.native?.toFixed(2)}{' '}
{' '}
{token.market?.floorAsk?.price?.currency?.symbol?.toUpperCase()}
</span>
</div>
</div>
<div
style={{
fontSize: '28px',
marginTop: '150px',
marginTop: '25px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div>{new Date().toLocaleDateString()}</div>
<div
style={{
fontSize: '24px',
fontFamily: 'Regular',
}}
>
{new Date().toLocaleDateString()}
</div>
<span
style={{
padding: '24px',
Expand Down Expand Up @@ -409,219 +408,13 @@ export default async function handler(request: NextRequest) {
fonts: [
{
name: 'Black',
weight: 500,
data: blackFont,
style: 'normal',
},
{
name: 'Regular',
weight: 600,
data: regularFont,
style: 'normal',
},
],
}
)

return new ImageResponse(
(
<div
style={{
opacity: 0.9,
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
width: '100%',
height: '100%',
color: 'white',
}}
>
<svg
style={{
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
zIndex: '-99999',
}}
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 2048 1152"
fill="none"
>
<g clip-path="url(#clip0_1207_77)">
<rect width="2048" height="1152" fill="black" />
<g opacity="0.9" filter="url(#filter0_f_1207_77)">
<rect
x="-415"
y="-249.398"
width="2914"
height="1639.24"
fill="url(#paint0_angular_1207_77)"
/>
</g>
</g>
<defs>
<filter
id="filter0_f_1207_77"
x="-821.983"
y="-656.382"
width="3727.97"
height="2453.21"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="203.492"
result="effect1_foregroundBlur_1207_77"
/>
</filter>
<radialGradient
id="paint0_angular_1207_77"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1042 570.221) rotate(107.623) scale(952.739 1693.64)"
>
<stop stop-color="#C171FF" />
<stop offset="0.432292" stop-color="#7000FF" />
<stop offset="0.65625" stop-color="#80D8FF" />
<stop offset="1" stop-color="#354FFF" />
</radialGradient>
<clipPath id="clip0_1207_77">
<rect width="2048" height="1152" fill="white" />
</clipPath>
</defs>
</svg>
<div
style={{
display: 'flex',
justifyContent: 'center',
gap: '50px',
width: '100%',
maxWidth: '525px',
height: 'auto',
}}
>
<img
src={token.token?.imageSmall as string}
alt={token.token?.name}
style={{
width: '450px',
height: '450px',
borderRadius: '8px',
}}
/>

<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<p
style={{
margin: '0',
padding: '0',
fontSize: '50px',
fontWeight: '800',
}}
>
{token.token?.name}
</p>
</div>
<div
style={{
marginTop: '10px',
display: 'flex',
flexDirection: 'column',
}}
>
<p
style={{
margin: '0',
padding: '0',
fontSize: '33px',
fontFamily: 'Regular',
}}
>
Floor Price
</p>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '5px',
fontSize: '38px',
fontWeight: '800',
}}
>
<img
src="https://explorer.reservoir.tools/icons/currency/no-padding-eth.png"
alt="Currency"
style={{
height: '50px',
width: '35px',
marginRight: '15px',
}}
/>
{token.market?.floorAsk?.price?.amount?.native}
</div>
</div>
<div
style={{
marginTop: '25px',
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<img
src={token.market?.floorAsk?.source?.icon as string}
alt="Market Source"
style={{
height: '50px',
width: '50px',
}}
/>
<p
style={{
margin: '0',
padding: '0',
fontSize: '34px',
fontWeight: '800',
}}
>
{token.market?.floorAsk?.source?.name}
</p>
</div>
</div>
</div>
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Black',
weight: 800,
data: blackFont,
style: 'normal',
},
{
name: 'Regular',
weight: 500,
data: regularFont,
style: 'normal',
},
Expand Down

0 comments on commit 0b4ea84

Please sign in to comment.