From c8a169967a22c544ed4bbff17a7b09bec643efb2 Mon Sep 17 00:00:00 2001 From: blushi Date: Tue, 15 Oct 2024 13:10:58 +0200 Subject: [PATCH] chore: rm BuySellOrderFlow --- .../ProjectDetails/hooks/useGetProject.ts | 3 +- .../BuySellOrderFlow.constants.ts | 3 - .../BuySellOrderFlow/BuySellOrderFlow.tsx | 328 ------------------ .../hooks/useSelectedProject.tsx | 36 -- .../hooks/useBuySellOrderData.tsx | 0 .../CreditClassDetails/CreditClassDetails.tsx | 2 +- .../Storefront}/hooks/useFetchSellOrders.ts | 0 .../hooks/useNormalizedSellOrders.tsx | 2 +- 8 files changed, 3 insertions(+), 371 deletions(-) delete mode 100644 web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.constants.ts delete mode 100644 web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.tsx delete mode 100644 web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useSelectedProject.tsx rename web-marketplace/src/{features/marketplace/BuySellOrderFlow => }/hooks/useBuySellOrderData.tsx (100%) rename web-marketplace/src/{features/marketplace/BuySellOrderFlow => pages/Marketplace/Storefront}/hooks/useFetchSellOrders.ts (100%) diff --git a/web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts b/web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts index 578964f256..6d410c73b7 100644 --- a/web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts +++ b/web-marketplace/src/components/templates/ProjectDetails/hooks/useGetProject.ts @@ -1,4 +1,3 @@ -import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; import { useApolloClient } from '@apollo/client'; import { useQuery } from '@tanstack/react-query'; @@ -10,7 +9,7 @@ import { getProjectByOnChainIdQuery } from 'lib/queries/react-query/registry-ser import { getProjectBySlugQuery } from 'lib/queries/react-query/registry-server/graphql/getProjectBySlugQuery/getProjectBySlugQuery'; import { getProjectByIdQuery } from 'lib/queries/react-query/sanity/getProjectByIdQuery/getProjectByIdQuery'; -import { useBuySellOrderData } from 'features/marketplace/BuySellOrderFlow/hooks/useBuySellOrderData'; +import { useBuySellOrderData } from 'hooks/useBuySellOrderData'; import { client as sanityClient } from '../../../../lib/clients/sanity'; import { getIsOnChainId, getIsUuid } from '../ProjectDetails.utils'; diff --git a/web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.constants.ts b/web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.constants.ts deleted file mode 100644 index 7eae84d338..0000000000 --- a/web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.constants.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { msg } from '@lingui/macro'; - -export const BUY_FLOW_TWITTER_TEXT = msg`I just purchased carbon credits on #RegenMarketplace with @regen_network. Let's work together to reduce our carbon footprint. Join me in investing in a regenerative future! `; diff --git a/web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.tsx b/web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.tsx deleted file mode 100644 index 79a73cfa52..0000000000 --- a/web-marketplace/src/features/marketplace/BuySellOrderFlow/BuySellOrderFlow.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import { useEffect, useMemo, useRef, useState } from 'react'; -import { Location, useNavigate } from 'react-router-dom'; -import { DeliverTxResponse } from '@cosmjs/stargate'; -import { msg } from '@lingui/macro'; -import { useLingui } from '@lingui/react'; -import { useQuery } from '@tanstack/react-query'; -import { errorsMapping, findErrorByCodeEnum } from 'config/errors'; -import { useSetAtom } from 'jotai'; -import { getSocialItems } from 'utils/components/ShareSection/getSocialItems'; -import { REGEN_APP_PROJECT_URL } from 'utils/components/ShareSection/getSocialItems.constants'; - -import { CelebrateIcon } from 'web-components/src/components/icons/CelebrateIcon'; -import { ProcessingModal } from 'web-components/src/components/modal/ProcessingModal'; -import { TxErrorModal } from 'web-components/src/components/modal/TxErrorModal'; -import { Item } from 'web-components/src/components/modal/TxModal'; -import { TxSuccessfulModal } from 'web-components/src/components/modal/TxSuccessfulModal'; - -import { UseStateSetter } from 'types/react/use-state'; -import { switchWalletModalAtom } from 'lib/atoms/modals.atoms'; -import { getHashUrl } from 'lib/block-explorer'; -import { client } from 'lib/clients/sanity'; -import { - BLOCKCHAIN_RECORD, - CLOSE_BUTTON_TEXT, - PROCESSING_MODAL_BODY, - PROCESSING_MODAL_TITLE, - SEE_LESS, - SEE_MORE, - SHARE_TITLE, - TX_ERROR_MODAL_TITLE, - TX_MODAL_TITLE, -} from 'lib/constants/shared.constants'; -import { getBuyModalOptionsQuery } from 'lib/queries/react-query/sanity/getBuyModalOptionsQuery/getBuyModalOptionsQuery'; -import { Track } from 'lib/tracker/types'; -import { useWallet } from 'lib/wallet/wallet'; - -import useBuySellOrderSubmit from 'pages/Marketplace/Storefront/hooks/useBuySellOrderSubmit'; -import { useCheckSellOrderAvailabilty } from 'pages/Marketplace/Storefront/hooks/useCheckSellOrderAvailabilty'; -import { VIEW_ECOCREDITS } from 'pages/Projects/AllProjects/AllProjects.config'; -import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types'; -import { normalizeToUISellOrderInfo } from 'pages/Projects/hooks/useProjectsSellOrders.utils'; -import { Link } from 'components/atoms'; -import { BuyCreditsModal, BuyCreditsValues } from 'components/organisms'; -import { BuyModalOptions } from 'components/organisms/BuyModalOptions/BuyModalOptions'; -import { useMsgClient } from 'hooks'; - -import { BUY_FLOW_TWITTER_TEXT } from './BuySellOrderFlow.constants'; -import { useFetchSellOrders } from './hooks/useFetchSellOrders'; -import { useSelectedProject } from './hooks/useSelectedProject'; - -type Props = { - isFlowStarted: boolean; - isCommunityCredit?: boolean; - setIsFlowStarted: UseStateSetter; - projects?: ProjectWithOrderData[] | null | undefined; - track?: Track; - location?: Location; -}; - -export const BuySellOrderFlow = ({ - projects, - isFlowStarted, - isCommunityCredit = false, - setIsFlowStarted, - track, - location, -}: Props): JSX.Element => { - /** - * ui management - */ - const { _ } = useLingui(); - const navigate = useNavigate(); - - // persistence for Tx details (orderId and amount) - const selectedSellOrderIdRef = useRef(); - const submittedQuantityRef = useRef(); - - // modals and display - const [isBuyModalOpen, setIsBuyModalOpen] = useState(false); - const [isBuyModalOptionsOpen, setIsBuyModalOptionsOpen] = useState(false); - const [isProcessingModalOpen, setIsProcessingModalOpen] = useState(false); - const [txModalTitle, setTxModalTitle] = useState(''); - const [txButtonTitle, setTxButtonTitle] = useState(''); - const [txModalHeader, setTxModalHeader] = useState(''); - const [cardItems, setCardItems] = useState(undefined); - const { sellOrders, refetchSellOrders } = useFetchSellOrders(); - const { isConnected, wallet, activeWalletAddr } = useWallet(); - const { data: buyModalOptionsContent } = useQuery( - getBuyModalOptionsQuery({ sanityClient: client }), - ); - const setSwitchWalletModalAtom = useSetAtom(switchWalletModalAtom); - const buyModalOptions = buyModalOptionsContent?.allBuyModalOptions[0]; - const buyModalOptionsFiltered = isCommunityCredit - ? { - ...buyModalOptions, - cards: buyModalOptions?.cards?.slice(1, buyModalOptions?.cards?.length), - } - : buyModalOptions; - - const closeBuyModal = (): void => { - setIsBuyModalOpen(false); - setIsFlowStarted(false); - }; - const closeProcessingModal = (): void => setIsProcessingModalOpen(false); - const handleTxModalClose = (): void => { - setCardItems(undefined); - setTxModalTitle(''); - setTxModalHeader(''); - setDeliverTxResponse(undefined); - setError(undefined); - setIsFlowStarted(false); - selectedSellOrderIdRef.current = undefined; - setSelectedProject(undefined); - }; - const onTxSuccessButtonClick = (): void => { - handleTxModalClose(); - navigate('/profile/portfolio'); - }; - - /** - * ledger msg hook setup - */ - const handleTxQueued = (): void => { - setIsProcessingModalOpen(true); - }; - const handleTxDelivered = async ( - _deliverTxResponse: DeliverTxResponse, - ): Promise => { - closeProcessingModal(); - closeBuyModal(); - selectedSellOrderIdRef.current = undefined; - }; - const handleError = (): void => { - closeProcessingModal(); - setTxModalTitle(_(msg`Buy Credits Error`)); - }; - - const { - signAndBroadcast, - setDeliverTxResponse, - deliverTxResponse, - error, - setError, - } = useMsgClient(handleTxQueued, handleTxDelivered, handleError); - - const accountAddress = wallet?.address; - const txHash = deliverTxResponse?.transactionHash; - const txHashUrl = getHashUrl(txHash); - const errorEnum = findErrorByCodeEnum({ errorCode: error }); - const ErrorIcon = errorsMapping[errorEnum].icon; - - /** - * data processing - */ - const { selectedProject, setSelectedProject, setSelectedProjectById } = - useSelectedProject({ projects }); - - const projectsSellOrdersIds = useMemo( - () => - projects && - projects - .map(project => project.sellOrders) - .flat() - .map(sellOrder => sellOrder.id), - [projects], - ); - - const _sellOrders = useMemo( - () => - sellOrders - ?.map(normalizeToUISellOrderInfo) - .filter(sellOrder => projectsSellOrdersIds?.includes(sellOrder.id)) - .filter(sellOrder => sellOrder.seller !== accountAddress), - [sellOrders, projectsSellOrdersIds, accountAddress], - ); - - const _project = useMemo( - () => - selectedProject && { - id: selectedProject?.id.toString() ?? '', - }, - [selectedProject], - ); - - /** - * Check the selected order availability on sellOrders refresh - */ - useCheckSellOrderAvailabilty({ - selectedSellOrderIdRef, - submittedQuantityRef, - setError, - sellOrders: _sellOrders, - setCardItems, - setTxModalHeader, - setTxModalTitle, - }); - - /** - * Submit hook setup - */ - const onSubmitCallback = ({ - creditCount, - sellOrderId, - }: BuyCreditsValues): void => { - selectedSellOrderIdRef.current = Number(sellOrderId); - submittedQuantityRef.current = creditCount; - }; - - const projectDisplayData = useMemo(() => { - if (!selectedProject || !selectedProject.id) return; - const projectId = selectedProject.id; - return { - id: projectId, - name: selectedProject.name ?? projectId, - }; - }, [selectedProject]); - - const shareUrl = REGEN_APP_PROJECT_URL + (selectedProject?.id ?? ''); - - const buySellOrderSubmit = useBuySellOrderSubmit({ - accountAddress, - project: projectDisplayData, - signAndBroadcast, - setCardItems, - setTxButtonTitle, - setTxModalHeader, - setTxModalTitle, - onBroadcast: () => setIsBuyModalOpen(false), - buttonTitle: VIEW_ECOCREDITS, - refetchSellOrders, - onSubmitCallback, - }); - - /** - * ui update effect - */ - useEffect(() => { - if (isFlowStarted && isConnected) { - refetchSellOrders(); - setIsBuyModalOpen(true); - } else if (isFlowStarted && !activeWalletAddr) { - setIsBuyModalOptionsOpen(true); - } else if (isFlowStarted && !isConnected) { - setSwitchWalletModalAtom(atom => { - atom.open = true; - atom.onClose = () => setIsFlowStarted(false); - }); - } - }, [ - isFlowStarted, - isConnected, - refetchSellOrders, - setSwitchWalletModalAtom, - setIsFlowStarted, - activeWalletAddr, - ]); - - return ( - <> - 1 ? setSelectedProjectById : undefined - } - isCommunityCredit={isCommunityCredit} - /> - { - setIsFlowStarted(false); - setIsBuyModalOptionsOpen(false); - }} - selectedProject={selectedProject} - track={track} - location={location} - /> - - } - socialItems={getSocialItems({ - twitter: { text: _(BUY_FLOW_TWITTER_TEXT), url: shareUrl }, - linkedIn: { url: shareUrl }, - })} - shareTitle={_(SHARE_TITLE)} - blockchainRecordText={_(BLOCKCHAIN_RECORD)} - /> - } - blockchainRecordText={_(BLOCKCHAIN_RECORD)} - /> - - ); -}; diff --git a/web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useSelectedProject.tsx b/web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useSelectedProject.tsx deleted file mode 100644 index 1ff2926c49..0000000000 --- a/web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useSelectedProject.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { UseStateSetter } from 'types/react/use-state'; - -import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types'; - -type Props = { - projects?: ProjectWithOrderData[] | null | undefined; -}; - -type ReponseType = { - selectedProject: ProjectWithOrderData | undefined; - setSelectedProject: UseStateSetter; - setSelectedProjectById: (projectId: string) => void | undefined; -}; - -export const useSelectedProject = ({ projects }: Props): ReponseType => { - const [selectedProject, setSelectedProject] = - useState(); - - useEffect(() => { - if (projects?.length === 1) setSelectedProject(projects[0]); - }, [projects]); - - const setSelectedProjectById = (projectId: string): void | undefined => { - if (!projects || projects.length <= 1) return; - const found = projects.find(project => project.id === projectId); - if (found) setSelectedProject(found); - }; - - return { - selectedProject, - setSelectedProject, - setSelectedProjectById, - }; -}; diff --git a/web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useBuySellOrderData.tsx b/web-marketplace/src/hooks/useBuySellOrderData.tsx similarity index 100% rename from web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useBuySellOrderData.tsx rename to web-marketplace/src/hooks/useBuySellOrderData.tsx diff --git a/web-marketplace/src/pages/CreditClassDetails/CreditClassDetails.tsx b/web-marketplace/src/pages/CreditClassDetails/CreditClassDetails.tsx index 05f6b14930..2feefc16b7 100644 --- a/web-marketplace/src/pages/CreditClassDetails/CreditClassDetails.tsx +++ b/web-marketplace/src/pages/CreditClassDetails/CreditClassDetails.tsx @@ -23,13 +23,13 @@ import { getAccountByAddrQuery } from 'lib/queries/react-query/registry-server/g import { getCreditClassByOnChainIdQuery } from 'lib/queries/react-query/registry-server/graphql/getCreditClassByOnChainIdQuery/getCreditClassByOnChainIdQuery'; import { getBuyModalOptionsQuery } from 'lib/queries/react-query/sanity/getBuyModalOptionsQuery/getBuyModalOptionsQuery'; -import { useBuySellOrderData } from 'features/marketplace/BuySellOrderFlow/hooks/useBuySellOrderData'; import { CreateSellOrderFlow } from 'features/marketplace/CreateSellOrderFlow/CreateSellOrderFlow'; import { useCreateSellOrderData } from 'features/marketplace/CreateSellOrderFlow/hooks/useCreateSellOrderData'; import useImpact from 'pages/CreditClassDetails/hooks/useImpact'; import { getDisplayAccountOrAddress } from 'components/organisms/DetailsSection/DetailsSection.utils'; import { SellOrdersActionsBar } from 'components/organisms/SellOrdersActionsBar/SellOrdersActionsBar'; import { getDisplayAccount } from 'components/templates/ProjectDetails/ProjectDetails.utils'; +import { useBuySellOrderData } from 'hooks/useBuySellOrderData'; import { useLedger } from '../../ledger'; import { diff --git a/web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useFetchSellOrders.ts b/web-marketplace/src/pages/Marketplace/Storefront/hooks/useFetchSellOrders.ts similarity index 100% rename from web-marketplace/src/features/marketplace/BuySellOrderFlow/hooks/useFetchSellOrders.ts rename to web-marketplace/src/pages/Marketplace/Storefront/hooks/useFetchSellOrders.ts diff --git a/web-marketplace/src/pages/Marketplace/Storefront/hooks/useNormalizedSellOrders.tsx b/web-marketplace/src/pages/Marketplace/Storefront/hooks/useNormalizedSellOrders.tsx index da5c650022..33004d6153 100644 --- a/web-marketplace/src/pages/Marketplace/Storefront/hooks/useNormalizedSellOrders.tsx +++ b/web-marketplace/src/pages/Marketplace/Storefront/hooks/useNormalizedSellOrders.tsx @@ -15,7 +15,6 @@ import { getProjectsQuery } from 'lib/queries/react-query/ecocredit/getProjectsQ import { getMetadataQuery } from 'lib/queries/react-query/registry-server/getMetadataQuery/getMetadataQuery'; import { getAllSanityCreditClassesQuery } from 'lib/queries/react-query/sanity/getAllCreditClassesQuery/getAllCreditClassesQuery'; -import { useFetchSellOrders } from 'features/marketplace/BuySellOrderFlow/hooks/useFetchSellOrders'; import { UISellOrderInfo } from 'pages/Projects/AllProjects/AllProjects.types'; import { normalizeToUISellOrderInfo } from 'pages/Projects/hooks/useProjectsSellOrders.utils'; import { useClassesWithMetadata } from 'hooks/classes/useClassesWithMetadata'; @@ -26,6 +25,7 @@ import { normalizeSellOrders, } from '../Storefront.normalizer'; import { NormalizedSellOrder } from '../Storefront.types'; +import { useFetchSellOrders } from './useFetchSellOrders'; import { useSortedSellOrders } from './useSortedSellOrders'; type ResponseType = {