-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
O/noun 257 manage automated derivatives addition #153
base: main
Are you sure you want to change the base?
O/noun 257 manage automated derivatives addition #153
Conversation
NOUN-257 Manage (Automated derivatives addition)
Scope
---- Out of scope
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
<Stack gap="x14" pb="x10"> | ||
<Grid {...props} p="x0"> | ||
{items.map((nft) => { | ||
const collectionAddress = nft.token.collectionAddress |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be able to destructure these from nft.token
tokenId | ||
collectionAddress | ||
collectionName | ||
tokenOwner | ||
token?.image?.url or token?.image?.mediaEncoding?.poster | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bye bye?
image: ImageType | ||
} | ||
|
||
export function NFTCard2({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great that this eliminates the useNFTProvider() calls, which seemed to me like a super weird pattern.
image: any // very bad type from api, FIXME later | ||
} | ||
|
||
export function ImageWithNounFallback({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's move this to an external component?
const decodedImgSrc = useMemo(() => { | ||
const imageUrl = image?.url | ||
if (image?.mimeType === 'image/svg+xml') { | ||
return imageUrl?.includes('data:image/svg+xml') || | ||
imageUrl?.includes('https://api.zora.co') | ||
? imageUrl | ||
: `data:image/svg+xml,${imageUrl}` // proper handling of URI-encoded SVG | ||
} else { | ||
return image?.mediaEncoding?.poster ?? imageUrl | ||
} | ||
}, [image]) | ||
|
||
const srcImg = useMemo( | ||
() => decodedImgSrc ?? rawImageFallback, | ||
[decodedImgSrc, rawImageFallback] | ||
) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd suggest moving this all into useRawImageTransform
className={[titleWrapper, useTitleScroll && titleScroll]} | ||
style={{ | ||
/* @ts-ignore-next-line */ | ||
'--titlePad': titleScroll ? '40px' : '0px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feels like we can manage this inside of the stylesheet
} | ||
|
||
export function NFTGrid2({ items, ...props }: NFTGridProps) { | ||
console.log(items) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
console
image, | ||
tokenName, | ||
}: Props) { | ||
console.log('NFTCard2', collectionAddress, tokenId, collectionName) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
console
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Few suggestions, good to go when cleaned up. Nice work!
Attempt to simplify
NFTGrid
andNFTCard
components: only necessary data, no dependencyNFTObject