From 6e2cd7cef3168348acf56da5592289b511110b01 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Thu, 16 Feb 2023 17:06:46 +0000 Subject: [PATCH] feat: replace useConnectModal and useWalletMintNewCharacterModal with useConnectedAction --- src/components/common/CommentInput.tsx | 14 +--- src/components/common/FollowingButton.tsx | 55 ++------------- src/components/common/Reactions.tsx | 86 ++--------------------- src/pages/index.tsx | 72 +++---------------- 4 files changed, 23 insertions(+), 204 deletions(-) diff --git a/src/components/common/CommentInput.tsx b/src/components/common/CommentInput.tsx index a4a3fefa..4c83f863 100644 --- a/src/components/common/CommentInput.tsx +++ b/src/components/common/CommentInput.tsx @@ -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(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, diff --git a/src/components/common/FollowingButton.tsx b/src/components/common/FollowingButton.tsx index 38a7b467..796f282a 100644 --- a/src/components/common/FollowingButton.tsx +++ b/src/components/common/FollowingButton.tsx @@ -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(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() diff --git a/src/components/common/Reactions.tsx b/src/components/common/Reactions.tsx index dd72f846..13fd50d0 100644 --- a/src/components/common/Reactions.tsx +++ b/src/components/common/Reactions.tsx @@ -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(null) const mintRef = useRef(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([]) const [likeCursor, setLikeCursor] = useState() 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} > { 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(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() {