generated from scaffold-eth/scaffold-eth
-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add edit earnings option and track rewards for submit and vote * feat: add small changes for rewards address * feat: add mobile optimizations * feat: add correct handleError call from hook * feat: prevent edit of the earnings if contest is completed * feat: add canceled state for edit earnings
- Loading branch information
Showing
18 changed files
with
679 additions
and
212 deletions.
There are no files selected for viewing
32 changes: 32 additions & 0 deletions
32
packages/react-app-revamp/components/UI/DialogModalV4/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react"; | ||
| import { FC } from "react"; | ||
|
|
||
| interface DialogModalV4Props { | ||
| isOpen: boolean; | ||
| children: React.ReactNode; | ||
| onClose: (value: boolean) => void; | ||
| } | ||
|
|
||
| const DialogModalV4: FC<DialogModalV4Props> = ({ isOpen, onClose, children }) => { | ||
| return ( | ||
| <Dialog open={isOpen} onClose={onClose} className="relative z-10"> | ||
| <DialogBackdrop | ||
| transition | ||
| className="fixed inset-0 bg-neutral-8 bg-opacity-40 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in" | ||
| /> | ||
|
|
||
| <div className="fixed inset-0 z-10 w-screen overflow-y-auto"> | ||
| <div className="flex min-h-full items-end justify-center text-center lg:items-center p-0"> | ||
| <DialogPanel | ||
| transition | ||
| className="relative w-full transform overflow-hidden rounded-t-[40px] border-t border-neutral-9 bg-true-black text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in lg:my-8 lg:w-full lg:max-w-lg lg:rounded-[10px] lg:border-none data-[closed]:lg:translate-y-0 data-[closed]:lg:scale-95" | ||
| > | ||
| <div className="pb-[64px] lg:pb-0 lg:p-6">{children}</div> | ||
| </DialogPanel> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default DialogModalV4; |
127 changes: 127 additions & 0 deletions
127
...evamp/components/_pages/Contest/Parameters/components/Earnings/components/Modal/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import ContestParamsSplitFeeDestination from "@components/_pages/Create/pages/ContestMonetization/components/Charge/components/SplitFeeDestination"; | ||
| import DialogModalV4 from "@components/UI/DialogModalV4"; | ||
| import { chains, config } from "@config/wagmi"; | ||
| import { extractPathSegments } from "@helpers/extractPath"; | ||
| import { addressRegex } from "@helpers/regex"; | ||
| import { useContestStore } from "@hooks/useContest/store"; | ||
| import { useCreatorSplitDestination } from "@hooks/useCreatorSplitDestination"; | ||
| import { JK_LABS_SPLIT_DESTINATION_DEFAULT } from "@hooks/useDeployContest"; | ||
| import { Charge, SplitFeeDestinationType } from "@hooks/useDeployContest/types"; | ||
| import { switchChain } from "@wagmi/core"; | ||
| import Image from "next/image"; | ||
| import { usePathname } from "next/navigation"; | ||
| import { FC, useState } from "react"; | ||
| import { useAccount } from "wagmi"; | ||
|
|
||
| interface ContestParamsEarningsModalProps { | ||
| charge: Charge; | ||
| isOpen: boolean; | ||
| onClose: (value: boolean) => void; | ||
| } | ||
|
|
||
| const ContestParamsEarningsModal: FC<ContestParamsEarningsModalProps> = ({ charge, isOpen, onClose }) => { | ||
| const pathname = usePathname(); | ||
| const { chainName: contestChainName } = extractPathSegments(pathname); | ||
| const contestChainId = chains.find(chain => chain.name.toLowerCase() === contestChainName.toLowerCase())?.id; | ||
| const { address: userAddress, chainId } = useAccount(); | ||
| const isUserOnCorrectChain = contestChainId === chainId; | ||
| const { rewardsModuleAddress } = useContestStore(state => state); | ||
| const [splitFeeDestinationError, setSplitFeeDestinationError] = useState(""); | ||
| const { setCreatorSplitDestination, isLoading, isConfirmed } = useCreatorSplitDestination(); | ||
| const [localCharge, setLocalCharge] = useState<Charge>(charge); | ||
|
|
||
| const handleSplitFeeDestinationTypeChange = (type: SplitFeeDestinationType) => { | ||
| let newAddress = charge.splitFeeDestination.address; | ||
|
|
||
| switch (type) { | ||
| case SplitFeeDestinationType.RewardsPool: | ||
| newAddress = rewardsModuleAddress; | ||
| break; | ||
| case SplitFeeDestinationType.AnotherWallet: | ||
| newAddress = ""; | ||
| break; | ||
| case SplitFeeDestinationType.NoSplit: | ||
| newAddress = JK_LABS_SPLIT_DESTINATION_DEFAULT; | ||
| break; | ||
| case SplitFeeDestinationType.CreatorWallet: | ||
| newAddress = userAddress; | ||
| } | ||
|
|
||
| const newSplitFeeDestination = { | ||
| ...charge.splitFeeDestination, | ||
| type, | ||
| address: newAddress, | ||
| }; | ||
|
|
||
| const isValidAddress = addressRegex.test(newAddress ?? ""); | ||
| const error = type === SplitFeeDestinationType.AnotherWallet && !isValidAddress; | ||
|
|
||
| setLocalCharge?.({ | ||
| ...charge, | ||
| splitFeeDestination: newSplitFeeDestination, | ||
| error, | ||
| }); | ||
| }; | ||
|
|
||
| const handleSplitFeeDestinationAddressChange = (address: string) => { | ||
| const isValidAddress = addressRegex.test(address); | ||
| const newSplitFeeDestination = { | ||
| ...charge.splitFeeDestination, | ||
| type: SplitFeeDestinationType.AnotherWallet, | ||
| address, | ||
| }; | ||
|
|
||
| setSplitFeeDestinationError(isValidAddress ? "" : "invalid address"); | ||
|
|
||
| setLocalCharge?.({ | ||
| ...charge, | ||
| splitFeeDestination: newSplitFeeDestination, | ||
| error: !isValidAddress, | ||
| }); | ||
| }; | ||
|
|
||
| const onSaveHandler = async () => { | ||
| if (!contestChainId) return; | ||
|
|
||
| if (!isUserOnCorrectChain) { | ||
| await switchChain(config, { chainId: contestChainId }); | ||
| } | ||
|
|
||
| setCreatorSplitDestination(localCharge.splitFeeDestination); | ||
| }; | ||
|
|
||
| return ( | ||
| <DialogModalV4 isOpen={isOpen} onClose={onClose}> | ||
| <div className="flex flex-col gap-8 md:gap-20 py-6 md:py-16 pl-8 md:pl-32 pr-4 md:pr-16"> | ||
| <div className="flex justify-between items-center"> | ||
| <p className="text-[24px] text-neutral-11 font-bold">edit earnings</p> | ||
| <Image | ||
| src="/modal/modal_close.svg" | ||
| width={39} | ||
| height={33} | ||
| alt="close" | ||
| className="hidden md:block cursor-pointer" | ||
| onClick={() => onClose(true)} | ||
| /> | ||
| </div> | ||
| <ContestParamsSplitFeeDestination | ||
| splitFeeDestination={localCharge.splitFeeDestination} | ||
| splitFeeDestinationError={splitFeeDestinationError} | ||
| includeRewardsPool={rewardsModuleAddress !== ""} | ||
| rewardsModuleAddress={rewardsModuleAddress} | ||
| onSplitFeeDestinationTypeChange={handleSplitFeeDestinationTypeChange} | ||
| onSplitFeeDestinationAddressChange={handleSplitFeeDestinationAddressChange} | ||
| /> | ||
| <button | ||
| disabled={(isLoading && !isConfirmed) || localCharge.error} | ||
| className="mt-4 bg-gradient-purple rounded-[40px] w-80 h-10 text-center text-true-black text-[16px] font-bold hover:opacity-80 transition-opacity duration-300 ease-in-out" | ||
| onClick={onSaveHandler} | ||
| > | ||
| save | ||
| </button> | ||
| </div> | ||
| </DialogModalV4> | ||
| ); | ||
| }; | ||
|
|
||
| export default ContestParamsEarningsModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.