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

feat: replace useConnectModal and useWalletMintNewCharacterModal with useConnectedAction

This commit is contained in:
DIYgod 2023-02-16 17:06:46 +00:00
parent e8ca7dfa30
commit 6e2cd7cef3
No known key found for this signature in database
4 changed files with 23 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/CommentInput.tsx
View File

@ -4,11 +4,7 @@ import { Avatar } from "~/components/ui/Avatar"
import { Input } from "~/components/ui/Input"
import { Button } from "~/components/ui/Button"
import { useForm } from "react-hook-form"
import {
useAccountState,
useConnectModal,
useWalletMintNewCharacterModal,
} from "@crossbell/connect-kit"
import { useAccountState, useConnectedAction } from "@crossbell/connect-kit"
import { useState, useEffect } from "react"
import { useCommentPage } from "~/queries/page"
import { useRouter } from "next/router"
@ -22,11 +18,9 @@ export const CommentInput: React.FC<{
}> = ({ pageId, originalId }) => {
const account = useAccountState((s) => s.computed.account)
const userSites = useAccountSites()
const { show: openConnectModal } = useConnectModal()
const commentPage = useCommentPage()
const router = useRouter()
const [viewer, setViewer] = useState<Profile | null>(null)
const walletMintNewCharacterModal = useWalletMintNewCharacterModal()
useEffect(() => {
if (userSites.isSuccess && userSites.data?.length) {
@ -41,11 +35,7 @@ export const CommentInput: React.FC<{
})
const handleSubmit = form.handleSubmit(async (values) => {
if (!account) {
openConnectModal?.()
} else if (userSites.isSuccess && !userSites.data?.length) {
walletMintNewCharacterModal.show()
} else if (pageId) {
if (pageId) {
commentPage.mutate({
pageId: pageId,
content: values.content,

55
src/components/common/FollowingButton.tsx
View File

@ -1,19 +1,13 @@
import { useRouter } from "next/router"
import { SITE_URL } from "~/lib/env"
import { Button } from "~/components/ui/Button"
import type { Variant } from "~/components/ui/Button"
import { useEffect, useState } from "react"
import { useEffect } from "react"
import {
useGetSubscription,
useSubscribeToSite,
useUnsubscribeFromSite,
useAccountSites,
} from "~/queries/site"
import {
useAccountState,
useConnectModal,
useWalletMintNewCharacterModal,
} from "@crossbell/connect-kit"
import { useConnectedAction } from "@crossbell/connect-kit"
import clsx from "clsx"
import { Profile } from "~/lib/types"
@ -24,24 +18,13 @@ export const FollowingButton: React.FC<{
size?: "sm" | "xl"
loadingStatusChange?: (status: boolean) => void
}> = ({ site, variant, className, size, loadingStatusChange }) => {
const account = useAccountState((s) => s.computed.account)
const subscribeToSite = useSubscribeToSite()
const unsubscribeFromSite = useUnsubscribeFromSite()
const { show: openConnectModal } = useConnectModal()
const [followProgress, setFollowProgress] = useState<boolean>(false)
const userSite = useAccountSites()
const router = useRouter()
const characterId = site?.metadata?.proof ? Number(site.metadata.proof) : null
const walletMintNewCharacterModal = useWalletMintNewCharacterModal()
const handleClickSubscribe = async (e: any) => {
e.preventDefault()
if (!account) {
setFollowProgress(true)
openConnectModal?.()
} else if (!userSite.data?.length) {
walletMintNewCharacterModal.show()
} else if (characterId) {
const handleClickSubscribe = useConnectedAction(() => {
if (characterId) {
if (subscription.data) {
unsubscribeFromSite.mutate({
characterId,
@ -54,38 +37,10 @@ export const FollowingButton: React.FC<{
} as any)
}
}
}
})
const subscription = useGetSubscription(site?.username)
useEffect(() => {
if (
followProgress &&
account &&
subscription.isSuccess &&
characterId &&
userSite.isSuccess
) {
if (!userSite.data) {
walletMintNewCharacterModal.show()
}
if (!subscription.data) {
subscribeToSite.mutate({ characterId })
}
setFollowProgress(false)
}
}, [
userSite.isSuccess,
userSite.data,
router,
followProgress,
account,
subscription.isSuccess,
subscription.data,
characterId,
subscribeToSite,
])
useEffect(() => {
if (subscribeToSite.isError) {
subscribeToSite.reset()

86
src/components/common/Reactions.tsx
View File

@ -9,16 +9,10 @@ import {
useCheckMint,
} from "~/queries/page"
import { useAccountSites } from "~/queries/site"
import {
useAccountState,
useConnectModal,
useWalletMintNewCharacterModal,
useConnectedAction,
} from "@crossbell/connect-kit"
import { useConnectedAction } from "@crossbell/connect-kit"
import { useState, useEffect, useRef } from "react"
import { Button } from "../ui/Button"
import { useRouter } from "next/router"
import { SITE_URL, CSB_SCAN, CSB_XCHAR } from "~/lib/env"
import { CSB_SCAN, CSB_XCHAR } from "~/lib/env"
import { UniLink } from "~/components/ui/UniLink"
import { Modal } from "~/components/ui/Modal"
import { Avatar } from "../ui/Avatar"
@ -38,19 +32,13 @@ export const Reactions: React.FC<{
const unlikePage = useUnlikePage()
const mintPage = useMintPage()
const isConnected = useAccountState((s) => !!s.computed.account) // TODO is logged in
const { show: openConnectModal } = useConnectModal()
const [likeProgress, setLikeProgress] = useState(false)
const [mintProgress, setMintProgress] = useState(false)
const userSite = useAccountSites()
const router = useRouter()
const [isLikeOpen, setIsLikeOpen] = useState(false)
const [isMintOpen, setIsMintOpen] = useState(false)
const [isLikeListOpen, setIsLikeListOpen] = useState(false)
const [isMintListOpen, setIsMintListOpen] = useState(false)
const likeRef = useRef<HTMLButtonElement>(null)
const mintRef = useRef<HTMLButtonElement>(null)
const walletMintNewCharacterModal = useWalletMintNewCharacterModal()
const likes = useGetLikes({
pageId: pageId,
@ -94,18 +82,15 @@ export const Reactions: React.FC<{
}
}, [likePage.isSuccess])
const mint = async () => {
if (!isConnected) {
setMintProgress(true)
openConnectModal?.()
} else if (pageId) {
const mint = useConnectedAction(() => {
if (pageId) {
if (isMint.data?.count) {
setIsMintOpen(true)
} else {
mintPage.mutate(parsePageId(pageId))
}
}
}
})
useEffect(() => {
if (mintPage.isSuccess) {
@ -133,60 +118,6 @@ export const Reactions: React.FC<{
}
}, [mintPage.isSuccess])
useEffect(() => {
if (
mintProgress &&
isConnected &&
isMint.isSuccess &&
pageId &&
userSite.isSuccess
) {
if (!userSite.data) {
walletMintNewCharacterModal.show()
} else if (!isMint.data.count) {
mintPage.mutate(parsePageId(pageId))
}
setMintProgress(false)
}
}, [
userSite.isSuccess,
userSite.data,
router,
mintProgress,
isConnected,
isMint.isSuccess,
isMint.data?.count,
mintPage,
pageId,
])
useEffect(() => {
if (
likeProgress &&
isConnected &&
isLike.isSuccess &&
pageId &&
userSite.isSuccess
) {
if (!userSite.data) {
walletMintNewCharacterModal.show()
} else if (!isLike.data.count) {
likePage.mutate(parsePageId(pageId))
}
setLikeProgress(false)
}
}, [
userSite.isSuccess,
userSite.data,
router,
likeProgress,
isConnected,
isLike.isSuccess,
isLike.data?.count,
likePage,
pageId,
])
const [likeList, setLikeList] = useState<any[]>([])
const [likeCursor, setLikeCursor] = useState<string>()
useEffect(() => {
@ -250,10 +181,7 @@ export const Reactions: React.FC<{
isAutoWidth={true}
onClick={like}
isLoading={
userSite.isLoading ||
likePage.isLoading ||
unlikePage.isLoading ||
likeProgress
userSite.isLoading || likePage.isLoading || unlikePage.isLoading
}
ref={likeRef}
>
@ -304,7 +232,7 @@ export const Reactions: React.FC<{
}`}
isAutoWidth={true}
onClick={mint}
isLoading={mintPage.isLoading || likeProgress}
isLoading={mintPage.isLoading}
ref={mintRef}
>
<MintIcon

72
src/pages/index.tsx
View File

@ -1,16 +1,12 @@
import { GetServerSideProps } from "next"
import { useEffect, useState } from "react"
import { useState } from "react"
import { DashboardIcon } from "~/components/icons/DashboardIcon"
import { MainLayout } from "~/components/main/MainLayout"
import { UniLink } from "~/components/ui/UniLink"
import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
import { LaughIcon } from "~/components/icons/LaughIcon"
import { Button } from "~/components/ui/Button"
import {
useAccountState,
useConnectModal,
useWalletMintNewCharacterModal,
} from "@crossbell/connect-kit"
import { useAccountState, useConnectedAction } from "@crossbell/connect-kit"
import { useRefCallback } from "@crossbell/util-hooks"
import { useRouter } from "next/router"
import { GITHUB_LINK, APP_NAME, CSB_SCAN, OUR_DOMAIN } from "~/lib/env"
@ -23,7 +19,6 @@ import { useGetSites } from "~/queries/site"
import showcase from "../../showcase.json"
import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
import { useAccountSites, useSubscribeToSites } from "~/queries/site"
import { SITE_URL } from "~/lib/env"
import {
BoltIcon,
FingerPrintIcon,
@ -52,22 +47,12 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
export default function Home() {
const isConnected = useAccountState((s) => !!s.computed.account)
const { show: openConnectModal } = useConnectModal()
const router = useRouter()
const showcaseSites = useGetSites(showcase)
const [isTry, setIsTry] = useState(false)
const tryNow = () => {
setIsTry(true)
openConnectModal?.()
}
useEffect(() => {
if (isTry && isConnected) {
router.push("/dashboard")
setIsTry(false)
}
}, [isTry, isConnected, router])
const tryNow = useConnectedAction(() => {
router.push("/dashboard")
})
const features = [
{
@ -222,10 +207,8 @@ export default function Home() {
},
]
const [followProgress, setFollowProgress] = useState<boolean>(false)
const userSite = useAccountSites()
const subscribeToSites = useSubscribeToSites()
const walletMintNewCharacterModal = useWalletMintNewCharacterModal()
const doSubscribeToSites = useRefCallback(() => {
subscribeToSites.mutate({
@ -237,43 +220,9 @@ export default function Home() {
} as any)
})
const followAll = async () => {
if (!isConnected) {
setFollowProgress(true)
openConnectModal?.()
} else if (!userSite.data?.[0]) {
walletMintNewCharacterModal.show()
} else {
doSubscribeToSites()
}
}
useEffect(() => {
if (
followProgress &&
isConnected &&
showcaseSites.isSuccess &&
userSite.data?.[0] &&
userSite.isSuccess
) {
if (!userSite.data) {
walletMintNewCharacterModal.show()
} else {
doSubscribeToSites()
}
setFollowProgress(false)
}
}, [
userSite.isSuccess,
userSite.data,
router,
followProgress,
isConnected,
showcaseSites.isSuccess,
showcaseSites.data,
subscribeToSites,
doSubscribeToSites,
])
const followAll = useConnectedAction(() => {
doSubscribeToSites()
})
const [showcaseMore, setShowcaseMore] = useState(false)
@ -305,9 +254,7 @@ export default function Home() {
<div className="my-10 sm:my-16">
<Button
className="text-accent w-80 h-10"
onClick={() =>
isConnected ? router.push("/dashboard") : openConnectModal?.()
}
onClick={tryNow}
size="xl"
>
{isConnected ? (
@ -383,7 +330,6 @@ export default function Home() {
className="mt-5"
onClick={followAll}
isLoading={
followProgress ||
showcaseSites.isLoading ||
userSite.isLoading ||
subscribeToSites.isLoading