-
Notifications
You must be signed in to change notification settings - Fork 462
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(app): adding low score alert for onchain push (#2802)
* feat(app): adding low score alert for onchain push - WIP * continued WIP * working * feat(app): added dynamic threshold, test * build fix
- Loading branch information
1 parent
520ea19
commit dcef4ab
Showing
10 changed files
with
243 additions
and
82 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import React from "react"; | ||
| import { LoadButton } from "./LoadButton"; | ||
| import { Button } from "./Button"; | ||
| import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@chakra-ui/react"; | ||
|
|
||
| // Modal with an action button and a cancel button | ||
| // Pass the body content as children | ||
| export const ActionOrCancelModal = ({ | ||
| title, | ||
| buttonText, | ||
| onButtonClick, | ||
| buttonLoading, | ||
| buttonDisabled, | ||
| isOpen, | ||
| onClose, | ||
| children, | ||
| }: { | ||
| title: React.ReactNode; | ||
| buttonText: string; | ||
| onButtonClick: () => void; | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| buttonLoading?: boolean; | ||
| buttonDisabled?: boolean; | ||
| children: React.ReactNode; | ||
| }) => { | ||
| return ( | ||
| <Modal isOpen={isOpen} onClose={onClose}> | ||
| <ModalOverlay width="100%" height="100%" /> | ||
| <ModalContent | ||
| rounded={"8px"} | ||
| padding={"28px"} | ||
| paddingBottom={"12px"} | ||
| maxW={"380px"} | ||
| border={"rgb(var(--color-foreground-5)) 1px solid"} | ||
| background={"linear-gradient(180deg, rgb(var(--color-background)) 0%, rgb(var(--color-foreground-5)) 100%)"} | ||
| > | ||
| <ModalHeader padding={0} fontWeight={"normal"} className="text-xl font-heading leading-tight text-focus my-4"> | ||
| {title} | ||
| </ModalHeader> | ||
| <ModalBody padding={0}>{children}</ModalBody> | ||
| <ModalFooter padding={0} className="mt-8 flex font-medium flex-col items-center"> | ||
| <LoadButton className="w-full" onClick={onButtonClick} isLoading={buttonLoading} disabled={buttonDisabled}> | ||
| {buttonText} | ||
| </LoadButton> | ||
| <Button variant="custom" className="mt-4 px-8" onClick={onClose}> | ||
| Cancel | ||
| </Button> | ||
| </ModalFooter> | ||
| </ModalContent> | ||
| </Modal> | ||
| // Headless UI version, doesn't work with Chakra modals | ||
| // <> | ||
| // <Transition appear show={isOpen} as={Fragment}> | ||
| // <Dialog as="div" className="relative z-100" onClose={onClose}> | ||
| // <Transition.Child | ||
| // enter="ease-out duration-300" | ||
| // enterFrom="opacity-0" | ||
| // enterTo="opacity-100" | ||
| // leave="ease-in duration-200" | ||
| // leaveFrom="opacity-100" | ||
| // leaveTo="opacity-0" | ||
| // > | ||
| // <Backdrop /> | ||
| // </Transition.Child> | ||
|
|
||
| // <div className="fixed inset-0 overflow-y-auto"> | ||
| // <div className="flex min-h-full items-center justify-center p-4 text-center"> | ||
| // <Transition.Child | ||
| // as={Fragment} | ||
| // enter="ease-out duration-300" | ||
| // enterFrom="opacity-0 scale-95" | ||
| // enterTo="opacity-100 scale-100" | ||
| // leave="ease-in duration-200" | ||
| // leaveFrom="opacity-100 scale-100" | ||
| // leaveTo="opacity-0 scale-95" | ||
| // > | ||
| // <Dialog.Panel className="w-full max-w-sm overflow-hidden transition-all"> | ||
| // <div className="p-7 text-base text-left text-color-1 align-middle w-full rounded-lg border border-foreground-5 bg-gradient-to-b from-background to-foreground-5"> | ||
| // <Dialog.Title className="text-xl font-heading leading-tight text-focus my-4">{title}</Dialog.Title> | ||
| // <div>{children}</div> | ||
|
|
||
| // <div className="mt-4 flex font-medium flex-col items-center"> | ||
| // <LoadButton | ||
| // className="w-full" | ||
| // onClick={onButtonClick} | ||
| // isLoading={buttonLoading} | ||
| // disabled={buttonDisabled} | ||
| // > | ||
| // {buttonText} | ||
| // </LoadButton> | ||
| // <Button variant="custom" className="mt-4 px-8" onClick={onClose}> | ||
| // Cancel | ||
| // </Button> | ||
| // </div> | ||
| // </div> | ||
| // </Dialog.Panel> | ||
| // </Transition.Child> | ||
| // </div> | ||
| // </div> | ||
| // </Dialog> | ||
| // </Transition> | ||
| // </> | ||
| ); | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from "react"; | ||
| import { ActionOrCancelModal } from "../components/ActionOrCancelModal"; | ||
|
|
||
| export const LowScoreAlertModal = ({ | ||
| isOpen, | ||
| onProceed, | ||
| onCancel, | ||
| threshold, | ||
| }: { | ||
| isOpen: boolean; | ||
| onProceed: () => void; | ||
| onCancel: () => void; | ||
| threshold: number; | ||
| }) => ( | ||
| <ActionOrCancelModal | ||
| title="Try building up a higher score?" | ||
| buttonText="Proceed with mint" | ||
| isOpen={isOpen} | ||
| onButtonClick={onProceed} | ||
| onClose={onCancel} | ||
| > | ||
| While some benefits might be available with a lower score, many partners require a score of {threshold} or higher. | ||
| <br /> | ||
| <br /> | ||
| Do you still wish to proceed? | ||
| </ActionOrCancelModal> | ||
| ); |
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.