Skip to content
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.

Sign up for GitHub

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

💽 Mint NFT changes #4717

Merged
merged 3 commits into from
Aug 22, 2023
Merged

💽 Mint NFT changes #4717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a82ea9
Show mint modal for verified channels at studio landing
WRadoslaw Aug 21, 2023
2027d52
Correct illustration on mint nft modal
WRadoslaw Aug 21, 2023
f395b8b
Show mint NFT option on viewer side
WRadoslaw Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/atlas/src/assets/illustrations/BenefitCardPatternSm1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ const SvgBenefitCardPatternSm1 = forwardRef((props: SVGProps<SVGSVGElement>, ref
fillOpacity={0.2}
/>
<g clipPath="url(#clip0_1505_4274)" fill="#BCD5FA" fillOpacity={0.08}>
<path d="M54 215.98v-6.002c26.146-.778 47.2-21.832 47.978-47.978h6.002c-.782 29.46-24.52 53.198-53.98 53.98Z" />
<path d="M95.975 162C95.2 184.832 76.832 203.201 54 203.975v-6.004c19.518-.768 35.203-16.453 35.97-35.971h6.005Z" />
<path d="M84 162c0 16.569-13.431 30-30 30v-6c13.255 0 24-10.745 24-24h6Z" />
<path d="M54 215.98v-6.002c26.146-.779 47.2-21.832 47.978-47.978h6.002c-.782 29.46-24.52 53.198-53.98 53.98Z" />
<path d="M95.975 162C95.2 184.832 76.832 203.201 54 203.974v-6.004c19.518-.767 35.203-16.452 35.97-35.97h6.005Z" />
<path d="M84 162c0 16.568-13.431 30-30 30v-6c13.255 0 24-10.745 24-24h6Z" />
<path d="M72 162c0 9.941-8.059 18-18 18v-6c6.627 0 12-5.373 12-12h6ZM60 162a6 6 0 0 1-6 6v-6h6Z" />
</g>
<g clipPath="url(#clip1_1505_4274)">
Expand Down Expand Up @@ -55,8 +55,8 @@ const SvgBenefitCardPatternSm1 = forwardRef((props: SVGProps<SVGSVGElement>, ref
<path d="M54 54.02c29.46.781 53.199 24.52 53.98 53.98H54V54.02Z" fill="#BCD5FA" fillOpacity={0.08} />
</g>
<g clipPath="url(#clip3_1505_4274)" fill="#BCD5FA" fillOpacity={0.08}>
<path d="M162 .02v6.002C135.854 6.8 114.8 27.854 114.022 54h-6.002C108.802 24.54 132.54.802 162 .02Z" />
<path d="M120.025 54c.774-22.832 19.143-41.2 41.975-41.975v6.004c-19.518.768-35.203 16.453-35.971 35.971h-6.004Z" />
<path d="M162 .02v6.002C135.854 6.8 114.8 27.854 114.022 54h-6.002C108.802 24.54 132.54.8 162 .02Z" />
<path d="M120.025 54c.774-22.832 19.143-41.201 41.975-41.975v6.004c-19.518.768-35.203 16.453-35.971 35.97h-6.004Z" />
<path d="M132 54c0-16.569 13.431-30 30-30v6c-13.255 0-24 10.745-24 24h-6Z" />
<path d="M144 54c0-9.941 8.059-18 18-18v6c-6.627 0-12 5.373-12 12h-6ZM156 54a6 6 0 0 1 6-6v6h-6Z" />
</g>
Expand Down
12 changes: 6 additions & 6 deletions packages/atlas/src/assets/illustrations/BenefitCardPatternSm3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const SvgBenefitCardPatternSm3 = forwardRef((props: SVGProps<SVGSVGElement>, ref
{...props}
>
<g clipPath="url(#clip0_1505_4346)" fill="#C2E0FF" fillOpacity={0.2}>
<path d="M216 215.98v-6.002c-26.146-.778-47.2-21.832-47.978-47.978h-6.002c.782 29.46 24.52 53.198 53.98 53.98Z" />
<path d="M174.025 162c.774 22.832 19.143 41.201 41.975 41.975v-6.004c-19.518-.768-35.203-16.453-35.971-35.971h-6.004Z" />
<path d="M186 162c0 16.569 13.431 30 30 30v-6c-13.255 0-24-10.745-24-24h-6Z" />
<path d="M216 215.98v-6.002c-26.146-.779-47.2-21.832-47.978-47.978h-6.002c.782 29.46 24.52 53.198 53.98 53.98Z" />
<path d="M174.025 162c.774 22.832 19.143 41.201 41.975 41.974v-6.004c-19.518-.767-35.203-16.452-35.971-35.97h-6.004Z" />
<path d="M186 162c0 16.568 13.431 30 30 30v-6c-13.255 0-24-10.745-24-24h-6Z" />
<path d="M198 162c0 9.941 8.059 18 18 18v-6c-6.627 0-12-5.373-12-12h-6ZM210 162a6 6 0 0 0 6 6v-6h-6Z" />
</g>
<g clipPath="url(#clip1_1505_4346)" fill="#BCD5FA" fillOpacity={0.08}>
Expand Down Expand Up @@ -55,9 +55,9 @@ const SvgBenefitCardPatternSm3 = forwardRef((props: SVGProps<SVGSVGElement>, ref
<path d="M108 6h54V0h-54v6ZM108 54h54v-6h-54v6ZM162 42h-54v-6h54v6ZM108 18h54v-6h-54v6ZM162 30h-54v-6h54v6Z" />
</g>
<g clipPath="url(#clip3_1505_4346)" fill="#C2E0FF" fillOpacity={0.2}>
<path d="M0 .02v6.002C26.146 6.8 47.2 27.854 47.978 54h6.002C53.198 24.54 29.46.802 0 .02Z" />
<path d="M41.975 54C41.2 31.168 22.832 12.8 0 12.025v6.004C19.518 18.797 35.203 34.483 35.97 54h6.005Z" />
<path d="M30 54c0-16.569-13.431-30-30-30v6c13.255 0 24 10.745 24 24h6Z" />
<path d="M0 .02v6.002C26.146 6.801 47.2 27.854 47.978 54h6.002C53.198 24.54 29.46.802 0 .02Z" />
<path d="M41.975 54C41.2 31.168 22.832 12.8 0 12.026v6.004c19.518.767 35.203 16.452 35.97 35.97h6.005Z" />
<path d="M30 54c0-16.568-13.431-30-30-30v6c13.255 0 24 10.745 24 24h6Z" />
<path d="M18 54c0-9.941-8.059-18-18-18v6c6.627 0 12 5.373 12 12h6ZM6 54a6 6 0 0 0-6-6v6h6Z" />
</g>
<defs>
Expand Down
94 changes: 94 additions & 0 deletions packages/atlas/src/assets/illustrations/MintNftVideoTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
import { Ref, SVGProps, forwardRef, memo } from 'react'

const SvgMintNftVideoTile = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
<svg
width={320}
height={260}
viewBox="0 0 320 260"
fill="none"
xmlns="http://www.w3.org/2000/svg"
ref={ref}
{...props}
>
<g clipPath="url(#clip0_2424_11523)">
<path fill="#C2E0FF" fillOpacity={0.2} d="M0-136h320V44.005H0z" />
<g clipPath="url(#clip1_2424_11523)">
<path fill="#272D33" d="M0-136h320V44.005H0z" />
<g filter="url(#filter0_b_2424_11523)" clipPath="url(#clip2_2424_11523)">
<rect x={275} y={12} width={37} height={24} rx={2} fill="#101214" fillOpacity={0.75} />
<rect x={281} y={19} width={25} height={10} rx={5} fill="#C2E0FF" fillOpacity={0.2} />
</g>
</g>
<rect y={68.005} width={220} height={10} rx={5} fill="#C2E0FF" fillOpacity={0.2} />
<rect y={90.005} width={129} height={10} rx={5} fill="#C2E0FF" fillOpacity={0.2} />
<rect y={122.005} width={158} height={8} rx={4} fill="#C2E0FF" fillOpacity={0.2} />
<rect x={288} y={60.005} width={32} height={32} rx={16} fill="#BCD5FA" fillOpacity={0.08} />
<path d="M303 69.005h2v2h-2v-2ZM303 75.005h2v2h-2v-2ZM303 81.005h2v2h-2v-2Z" fill="#F4F6F8" />
<g filter="url(#filter1_dd_2424_11523)">
<rect x={128} y={92} width={192} height={168} rx={2} fill="#272D33" />
<circle cx={152} cy={116} r={6} fill="#C2E0FF" fillOpacity={0.2} />
<rect x={172} y={112} width={91} height={8} rx={4} fill="#C2E0FF" fillOpacity={0.2} />
<circle cx={152} cy={156} r={6} fill="#C2E0FF" fillOpacity={0.2} />
<rect x={172} y={152} width={67} height={8} rx={4} fill="#C2E0FF" fillOpacity={0.2} />
<path fill="#BBD9F6" fillOpacity={0.13} d="M128 176h192v40H128z" />
<path
d="M152 189h-1v4h-5v2a2 2 0 0 1 2 2v1h7.6a2.4 2.4 0 0 0 2.4-2.4v-.6a6 6 0 0 0-6-6ZM150 203a2 2 0 1 0 .001-3.999A2 2 0 0 0 150 203ZM156 203a2 2 0 1 0 .001-3.999A2 2 0 0 0 156 203ZM173.005 190.818h2.257l3.023 7.378h.119l3.023-7.378h2.257V201h-1.77v-6.995h-.094l-2.814 6.965h-1.322l-2.814-6.98h-.095V201h-1.77v-10.182ZM185.683 201v-7.636h1.8V201h-1.8Zm.905-8.72c-.285 0-.53-.095-.736-.284a.914.914 0 0 1-.308-.691c0-.271.103-.502.308-.691.206-.192.451-.288.736-.288.288 0 .534.096.736.288.205.189.308.42.308.691a.914.914 0 0 1-.308.691 1.04 1.04 0 0 1-.736.284Zm4.615 4.246V201h-1.799v-7.636h1.72v1.297h.089a2.19 2.19 0 0 1 .84-1.019c.388-.252.867-.378 1.437-.378.527 0 .986.113 1.377.338.395.226.7.552.915.98.219.427.327.946.323 1.556V201h-1.799v-4.584c0-.51-.133-.91-.398-1.198-.262-.288-.625-.432-1.089-.432-.315 0-.595.069-.84.208a1.445 1.445 0 0 0-.572.592c-.136.258-.204.572-.204.94Zm10.615-3.162v1.392h-4.39v-1.392h4.39Zm-3.306-1.83h1.8v7.169c0 .242.036.428.109.557a.588.588 0 0 0 .298.258c.123.047.259.07.408.07a2.231 2.231 0 0 0 .527-.07l.303 1.407c-.096.034-.233.07-.412.11a3.32 3.32 0 0 1-.647.069 2.93 2.93 0 0 1-1.218-.203 1.9 1.9 0 0 1-.86-.706c-.209-.319-.311-.716-.308-1.194v-7.467Zm16.871-.716V201h-1.641l-4.798-6.935h-.084V201h-1.845v-10.182h1.651l4.793 6.941h.089v-6.941h1.835ZM217.462 201v-10.182h6.523v1.546h-4.678v2.765h4.231v1.546h-4.231V201h-1.845Zm7.826-8.636v-1.546h8.124v1.546h-3.147V201h-1.83v-8.636h-3.147Z"
fill="#F4F6F8"
/>
<circle cx={152} cy={236} r={6} fill="#C2E0FF" fillOpacity={0.2} />
<rect x={172} y={232} width={67} height={8} rx={4} fill="#C2E0FF" fillOpacity={0.2} />
</g>
</g>
<defs>
<clipPath id="clip0_2424_11523">
<path fill="#fff" d="M0 0h320v260H0z" />
</clipPath>
<clipPath id="clip1_2424_11523">
<path fill="#fff" transform="translate(0 -136)" d="M0 0h320v180.005H0z" />
</clipPath>
<clipPath id="clip2_2424_11523">
<path fill="#fff" transform="translate(0 -136)" d="M0 0h320v180.005H0z" />
</clipPath>
<filter
id="filter0_b_2424_11523"
x={243}
y={-20}
width={101}
height={88}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation={16} />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2424_11523" />
<feBlend in="SourceGraphic" in2="effect1_backgroundBlur_2424_11523" result="shape" />
</filter>
<filter
id="filter1_dd_2424_11523"
x={96}
y={76}
width={256}
height={232}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy={16} />
<feGaussianBlur stdDeviation={16} />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2424_11523" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy={4} />
<feGaussianBlur stdDeviation={4} />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
<feBlend in2="effect1_dropShadow_2424_11523" result="effect2_dropShadow_2424_11523" />
<feBlend in="SourceGraphic" in2="effect2_dropShadow_2424_11523" result="shape" />
</filter>
</defs>
</svg>
))
SvgMintNftVideoTile.displayName = 'SvgMintNftVideoTile'
const Memo = memo(SvgMintNftVideoTile)
export { Memo as SvgMintNftVideoTile }
7 changes: 7 additions & 0 deletions packages/atlas/src/assets/illustrations/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,17 @@
export * from './404PatternBottomLeft'
export * from './404PatternTopRight'
export * from './AvatarSilhouette'
export * from './BenefitCardPatternSm1'
export * from './BenefitCardPatternSm2'
export * from './BenefitCardPatternSm3'
export * from './BenefitCardPatternXxs1'
export * from './BenefitCardPatternXxs2'
export * from './BenefitCardPatternXxs3'
export * from './BgPattern'
export * from './EmptyStateIllustration'
export * from './LargeComputer'
export * from './LargeWall'
export * from './MintNftVideoTile'
export * from './OtherBenefitCardPattern1'
export * from './OtherBenefitCardPattern2'
export * from './OtherBenefitCardPattern3'
Expand Down
66 changes: 66 additions & 0 deletions packages/atlas/src/assets/illustrations/svgs/mint-nft-video-tile.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/atlas/src/components/_overlays/MintNftFirstTimeModal/MintNftFirstTimeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FC } from 'react'

import { SvgOtherVideoTile } from '@/assets/illustrations'
import { SvgMintNftVideoTile } from '@/assets/illustrations'
import { Text } from '@/components/Text'
import { Checkbox } from '@/components/_inputs/Checkbox'
import { Dialog } from '@/components/_overlays/Dialog'
Expand All @@ -24,7 +24,7 @@ export const MintNftFirstTimeModal: FC<MintNftFirstTimeModalProps> = ({
return (
<StyledModal show={show}>
<IllustrationWrapper>
<SvgOtherVideoTile />
<SvgMintNftVideoTile />
</IllustrationWrapper>
<Dialog
title="Mint your video as NFT"
Expand Down
19 changes: 18 additions & 1 deletion packages/atlas/src/components/_video/VideoTileViewer/VideoTileViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FC } from 'react'
import { FC, MouseEvent } from 'react'
import { useNavigate } from 'react-router'

import { getNftStatus } from '@/api/hooks/nfts'
Expand All @@ -11,6 +11,7 @@ import { useNftTransactions } from '@/hooks/useNftTransactions'
import { useVideoContextMenu } from '@/hooks/useVideoContextMenu'
import { useVideoTileSharedLogic } from '@/hooks/useVideoTileSharedLogic'
import { useNftActions } from '@/providers/nftActions/nftActions.hooks'
import { useUser } from '@/providers/user/user.hooks'
import { SentryLogger } from '@/utils/logs'
import { formatDurationShort } from '@/utils/time'

Expand All @@ -31,10 +32,13 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({ id, onClick, details
skip: !id,
onError: (error) => SentryLogger.error('Failed to fetch video', 'VideoTile', error, { video: { id } }),
})
const { setNftToMint } = useNftActions()

const nftStatus = getNftStatus(video?.nft, video)
const nftState = useNftState(video?.nft)
const { avatarPhotoUrls, isLoadingAvatar, isLoadingThumbnail, thumbnailPhotoUrls, videoHref } =
useVideoTileSharedLogic(video)
const { setActiveChannel, activeMembership } = useUser()

const handleWithdrawBid = () => {
if (!video?.id || !nftState.userBidAmount || !nftState.userBidCreatedAt) {
Expand All @@ -50,8 +54,20 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({ id, onClick, details
video?.nft?.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
video.nft.transactionalStatus.auction
const isAuction = nftStatus?.status === 'auction'

const onMintNftClick = (e?: MouseEvent<Element>) => {
e?.stopPropagation()
e?.preventDefault()
if (video) {
setNftToMint(video.id)
setActiveChannel(video.channel.id)
navigate(absoluteRoutes.studio.videos())
}
}

const contextMenuItems = useVideoContextMenu({
publisher: false,
isOwner: activeMembership?.channels.some((channel) => channel.id === video?.channel.id),
nftState,
hasNft: !!video?.nft,
nftActions,
Expand All @@ -61,6 +77,7 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({ id, onClick, details
topBid: isAuction ? nftStatus.topBidAmount : undefined,
startingPrice: isAuction ? nftStatus.startingPrice : undefined,
onWithdrawBid: handleWithdrawBid,
onMintNftClick,
hasBids:
!!auction && !!auction.topBid?.bidder && !!(auction && !auction.topBid?.isCanceled && auction.topBid.amount),
})
Expand Down
Loading