xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: mint post

This commit is contained in:
DIYgod 2022-08-07 14:11:23 +01:00
parent 7b1bcee944
commit 9eab1beadc
No known key found for this signature in database
GPG Key ID: D159328F47A80DCA
4 changed files with 154 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/icons/CollectIcon.tsx
View File

@ -12,7 +12,10 @@ export const CollectIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M877.632 456.8c14.976-14.72 20.384-32.96 14.816-49.984-5.536-17.024-20.608-28.544-41.344-31.584l-190.24-27.84c-6.976-1.024-18.464-9.472-21.6-15.904l-85.12-173.696c-9.28-18.944-24.896-29.76-42.88-29.76-17.952 0-33.6 10.816-42.816 29.76l-85.12 173.696c-3.104 6.432-14.592 14.848-21.6 15.904l-190.24 27.84c-20.704 3.04-35.776 14.56-41.344 31.584-5.568 17.024-0.16 35.232 14.816 49.984l137.696 135.232c5.088 4.992 9.536 18.816 8.32 25.92l-32.48 190.912c-3.552 20.832 2.752 38.816 17.344 49.344 7.52 5.44 16.224 8.16 25.472 8.16 8.576 0 17.6-2.336 26.56-7.04l170.176-90.176c6.048-3.2 20.448-3.2 26.528 0l170.144 90.112c18.528 9.856 37.504 9.44 52.064-1.056 14.56-10.528 20.864-28.48 17.344-49.28l-32.48-190.976c-1.28-7.104 3.2-20.928 8.32-25.92l137.664-135.232z"></path>
<path
d="M388.821333 375.466667c14.506667-12.672 31.744-22.442667 50.773334-28.202667l10.538666-2.773333 6.826667-1.28 7.509333-1.066667 7.68-0.64 7.850667-0.213333h320a138.666667 138.666667 0 0 1 138.453333 130.773333l0.213334 7.893333v320a138.666667 138.666667 0 0 1-130.816 138.453334l-7.850667 0.213333h-320a138.666667 138.666667 0 0 1-138.453333-130.816L341.333333 800v-320l0.128-6.357333 0.597334-8.106667 1.109333-8.149333 1.536-7.936 2.517333-9.514667 3.413334-10.069333 3.712-8.618667 3.498666-6.912 4.010667-6.954667 6.229333-9.258666 4.010667-5.248 5.76-6.656 4.608-4.778667 6.357333-5.930667zM640 469.333333a32 32 0 0 0-31.701333 27.648l-0.298667 4.352v106.624h-106.666667a32 32 0 0 0-31.701333 27.648l-0.298667 4.352c0 16.213333 12.032 29.568 27.648 31.701334l4.352 0.298666h106.666667v106.709334c0 16.213333 12.032 29.610667 27.648 31.701333L640 810.666667a32 32 0 0 0 31.701333-27.648l0.298667-4.352v-106.709334h106.666667a32 32 0 0 0 31.701333-27.690666L810.666667 640a32 32 0 0 0-27.648-31.701333l-4.352-0.298667h-106.666667V501.333333a32 32 0 0 0-27.648-31.701333L640 469.333333z m24.832-288.725333l2.218667 7.552 29.610666 110.421333H480A181.333333 181.333333 0 0 0 298.666667 479.957333v274.517334a138.752 138.752 0 0 1-123.52-95.061334l-2.218667-7.509333-82.816-309.12a138.666667 138.666667 0 0 1 90.453333-167.594667l7.594667-2.218666 309.077333-82.816a138.666667 138.666667 0 0 1 167.594667 90.453333z"
p-id="863"
></path>
</svg>
)
}

74
src/components/site/PostFooter.tsx
View File

@ -4,8 +4,11 @@ import { CollectIcon } from "~/components/icons/CollectIcon"
import {
useLikePage,
useUnlikePage,
useMintPage,
useGetLikes,
useCheckLike,
useGetMints,
useCheckMint,
} from "~/queries/page"
import { useAccount } from "wagmi"
import { useConnectModal } from "@rainbow-me/rainbowkit"
@ -17,9 +20,12 @@ export const PostFooter: React.FC<{
}> = ({ page }) => {
const likePage = useLikePage()
const unlikePage = useUnlikePage()
const mintPage = useMintPage()
const { address } = useAccount()
const { openConnectModal } = useConnectModal()
const [likeProgress, setLikeProgress] = useState(false)
const [mintProgress, setMintProgress] = useState(false)
const like = async () => {
if (!address) {
@ -27,12 +33,29 @@ export const PostFooter: React.FC<{
openConnectModal?.()
} else if (page?.id) {
if (isLike.data?.count) {
unlikePage.mutate({
// unlikePage.mutate({
// address,
// pageId: page?.id,
// })
// TODO
} else {
likePage.mutate({
address,
pageId: page?.id,
})
}
}
}
const mint = async () => {
if (!address) {
setMintProgress(true)
openConnectModal?.()
} else if (page?.id) {
if (isMint.data?.count) {
// TODO
} else {
likePage.mutate({
mintPage.mutate({
address,
pageId: page?.id,
})
@ -48,6 +71,33 @@ export const PostFooter: React.FC<{
pageId: page?.id,
})
const mints = useGetMints({
pageId: page?.id,
})
const isMint = useCheckMint({
address,
pageId: page?.id,
})
useEffect(() => {
if (mintProgress && address && isMint.isSuccess && page?.id) {
if (!isMint.data.count) {
mintPage.mutate({
address,
pageId: page?.id,
})
}
setMintProgress(false)
}
}, [
mintProgress,
address,
isMint.isSuccess,
isMint.data?.count,
mintPage,
page?.id,
])
useEffect(() => {
if (likeProgress && address && isLike.isSuccess && page?.id) {
if (!isLike.data.count) {
@ -68,7 +118,7 @@ export const PostFooter: React.FC<{
])
return (
<div className="flex fill-gray-400 text-gray-500 mt-10">
<div className="flex fill-gray-400 text-gray-500 mt-14">
<Button
variant="text"
className="flex items-center mr-10"
@ -87,9 +137,23 @@ export const PostFooter: React.FC<{
<LikeIcon className="mr-2 w-10 h-10" />
<span>{likes.data?.count || 0}</span>
</Button>
<Button variant="text" className="flex items-center" isAutoWidth={true}>
<Button
variant="text"
className="flex items-center mr-10"
isAutoWidth={true}
onClick={mint}
isLoading={mintPage.isLoading || likeProgress}
style={
isMint.isSuccess && isMint.data.count
? {
color: "#FFCF55",
fill: "#FFCF55",
}
: {}
}
>
<CollectIcon className="mr-2 w-10 h-10" />
<span>0</span>
<span>{mints.data?.count || 0}</span>
</Button>
</div>
)

33
src/models/page.model.ts
View File

@ -363,3 +363,36 @@ export async function checkLike({
})
}
}
export async function mintPage({
address,
pageId,
}: {
address: string
pageId: string
}) {
return contract?.mintNote(pageId.split("-")[0], pageId.split("-")[1], address)
}
export async function getMints({ pageId }: { pageId: string }) {
return indexer.getMintedNotesOfNote(
pageId.split("-")[0],
pageId.split("-")[1],
{
limit: 0,
},
)
}
export async function checkMint({
address,
pageId,
}: {
address: string
pageId: string
}) {
return indexer.getMintedNotesOfAddress(address, {
noteCharacterId: pageId.split("-")[0],
noteId: pageId.split("-")[1],
})
}

48
src/queries/page.ts
View File

@ -45,6 +45,35 @@ export const useCheckLike = (input: { address?: string; pageId?: string }) => {
})
}
export const useGetMints = (input: { pageId?: string }) => {
return useQuery(["getMints", input.pageId], async () => {
if (!input.pageId) {
return {
count: 0,
list: [],
}
}
return pageModel.getMints({
pageId: input.pageId,
})
})
}
export const useCheckMint = (input: { address?: string; pageId?: string }) => {
return useQuery(["checkMint", input.pageId, input.address], async () => {
if (!input.pageId || !input.address) {
return {
count: 0,
list: [],
}
}
return pageModel.checkMint({
address: input.address,
pageId: input.pageId,
})
})
}
export function useCreateOrUpdatePage() {
const queryClient = useQueryClient()
const mutation = useMutation(
@ -113,3 +142,22 @@ export function useUnlikePage() {
},
)
}
export function useMintPage() {
const queryClient = useQueryClient()
return useMutation(
async (input: Parameters<typeof pageModel.mintPage>[0]) => {
return pageModel.mintPage(input)
},
{
onSuccess: (data, variables) => {
queryClient.invalidateQueries([
"checkMint",
variables.pageId,
variables.address,
])
queryClient.invalidateQueries(["getMints", variables.pageId])
},
},
)
}