Skip to content

Commit

Permalink
💽 Mint NFT changes (#4717)
Browse files Browse the repository at this point in the history 
* Show mint modal for verified channels at studio landing

* Correct illustration on mint nft modal

* Show mint NFT option on viewer side
  • Loading branch information
@WRadoslaw
WRadoslaw authored Aug 22, 2023
1 parent 25447b7 commit fcbe556
Show file tree
Hide file tree
Showing 9 changed files with 226 additions and 15 deletions.
10 changes: 5 additions & 5 deletions packages/atlas/src/assets/illustrations/BenefitCardPatternSm1.tsx
View file
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
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
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
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
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
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
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

0 comments on commit fcbe556

Please sign in to comment.