diff --git a/apps/staking/src/components/AccountSummary/index.tsx b/apps/staking/src/components/AccountSummary/index.tsx index 1f82426db8..2ac4cca3a7 100644 --- a/apps/staking/src/components/AccountSummary/index.tsx +++ b/apps/staking/src/components/AccountSummary/index.tsx @@ -1,18 +1,28 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline"; +import { useLocalStorageValue } from "@react-hookz/web"; import Image from "next/image"; -import { type ComponentProps, type ReactNode, useCallback } from "react"; +import { + type ComponentProps, + type FormEvent, + type ReactNode, + useCallback, + useState, +} from "react"; import { DialogTrigger, + Form, Button as ReactAriaButton, } from "react-aria-components"; import background from "./background.png"; import { type States, StateType as ApiStateType } from "../../hooks/use-api"; import { StateType, useAsync } from "../../hooks/use-async"; -import { Button } from "../Button"; +import { Button, LinkButton } from "../Button"; +import { Checkbox } from "../Checkbox"; +import { Link } from "../Link"; import { ModalDialog } from "../ModalDialog"; import { Tokens } from "../Tokens"; -import { TransferButton } from "../TransferButton"; +import { TransferButton, TransferDialog } from "../TransferButton"; type Props = { api: States[ApiStateType.Loaded] | States[ApiStateType.LoadedNoStakeAccount]; @@ -108,13 +118,7 @@ export const AccountSummary = ({ )}
- + {availableToWithdraw === 0n ? ( ); }; + +type AddTokensButtonProps = { + walletAmount: bigint; + api: States[ApiStateType.Loaded] | States[ApiStateType.LoadedNoStakeAccount]; +}; + +const AddTokensButton = ({ walletAmount, api }: AddTokensButtonProps) => { + const hasAcknowledgedLegal = useLocalStorageValue("has-acknowledged-legal"); + const [transferOpen, setTransferOpen] = useState(false); + const openTransfer = useCallback(() => { + setTransferOpen(true); + }, [setTransferOpen]); + const acknowledgeLegal = useCallback(() => { + hasAcknowledgedLegal.set("true"); + openTransfer(); + }, [hasAcknowledgedLegal, openTransfer]); + + return ( + <> + {hasAcknowledgedLegal.value ? ( + + ) : ( + + )} + + + ); +}; + +type DisclosureButtonProps = { + onAcknowledge: () => void; +}; + +const DisclosureButton = ({ onAcknowledge }: DisclosureButtonProps) => { + const [understood, setUnderstood] = useState(false); + const [agreed, setAgreed] = useState(false); + const [open, setOpen] = useState(false); + const acknowledge = useCallback( + (e: FormEvent) => { + e.preventDefault(); + setOpen(false); + setTimeout(onAcknowledge, 400); + }, + [setOpen, onAcknowledge], + ); + + return ( + <> + + + +
+

+ THE SERVICES WERE NOT DEVELOPED FOR, AND ARE NOT AVAILABLE TO + PERSONS OR ENTITIES WHO RESIDE IN, ARE LOCATED IN, ARE + INCORPORATED IN, OR HAVE A REGISTERED OFFICE OR PRINCIPAL PLACE OF + BUSINESS IN THE UNITED STATES OF AMERICA, THE UNITED KINGDOM OR + CANADA (COLLECTIVELY, “BLOCKED PERSONS”). MOREOVER, THE SERVICES + ARE NOT OFFERED TO PERSONS OR ENTITIES WHO RESIDE IN, ARE CITIZENS + OF, ARE LOCATED IN, ARE INCORPORATED IN, OR HAVE A REGISTERED + OFFICE OR PRINCIPAL PLACE OF BUSINESS IN ANY RESTRICTED + JURISDICTION OR COUNTRY SUBJECT TO ANY SANCTIONS OR RESTRICTIONS + PURSUANT TO ANY APPLICABLE LAW, INCLUDING THE CRIMEA REGION, CUBA, + IRAN, NORTH KOREA, SYRIA, MYANMAR (BURMA, DONETSK, LUHANSK, OR ANY + OTHER COUNTRY TO WHICH THE UNITED STATES, THE UNITED KINGDOM, THE + EUROPEAN UNION OR ANY OTHER JURISDICTIONS EMBARGOES GOODS OR + IMPOSES SIMILAR SANCTIONS, INCLUDING THOSE LISTED ON OUR SERVICES + (COLLECTIVELY, THE “RESTRICTED JURISDICTIONS” AND EACH A + “RESTRICTED JURISDICTION”) OR ANY PERSON OWNED, CONTROLLED, + LOCATED IN OR ORGANIZED UNDER THE LAWS OF ANY JURISDICTION UNDER + EMBARGO OR CONNECTED OR AFFILIATED WITH ANY SUCH PERSON + (COLLECTIVELY, “RESTRICTED PERSONS”). THE WEBSITE WAS NOT + SPECIFICALLY DEVELOPED FOR, AND IS NOT AIMED AT OR BEING ACTIVELY + MARKETED TO, PERSONS OR ENTITIES WHO RESIDE IN, ARE LOCATED IN, + ARE INCORPORATED IN, OR HAVE A REGISTERED OFFICE OR PRINCIPAL + PLACE OF BUSINESS IN THE EUROPEAN UNION. THERE ARE NO EXCEPTIONS. + IF YOU ARE A BLOCKED PERSON OR A RESTRICTED PERSON, THEN DO NOT + USE OR ATTEMPT TO USE THE SERVICES. USE OF ANY TECHNOLOGY OR + MECHANISM, SUCH AS A VIRTUAL PRIVATE NETWORK (“VPN”) TO CIRCUMVENT + THE RESTRICTIONS SET FORTH HEREIN IS PROHIBITED. +

+ + I understand + + + By checking the box and access the Services, you acknowledge and + agree to the terms and conditions of our{" "} + + Terms of Use + {" "} + and{" "} + + Privacy Policy + + . + +
+ + Exit + + +
+
+ + + + ); +}; diff --git a/apps/staking/src/components/Checkbox/index.tsx b/apps/staking/src/components/Checkbox/index.tsx new file mode 100644 index 0000000000..05a59d3ea1 --- /dev/null +++ b/apps/staking/src/components/Checkbox/index.tsx @@ -0,0 +1,20 @@ +import { CheckIcon } from "@heroicons/react/24/outline"; +import clsx from "clsx"; +import type { ComponentProps, ReactNode } from "react"; +import { Checkbox as BaseCheckbox } from "react-aria-components"; + +type Props = Omit, "children"> & { + children: ReactNode; +}; + +export const Checkbox = ({ className, children, ...props }: Props) => ( + +
+ +
+
{children}
+ +); diff --git a/apps/staking/src/components/OracleIntegrityStaking/index.tsx b/apps/staking/src/components/OracleIntegrityStaking/index.tsx index ad9ab65aed..3a3aa93300 100644 --- a/apps/staking/src/components/OracleIntegrityStaking/index.tsx +++ b/apps/staking/src/components/OracleIntegrityStaking/index.tsx @@ -79,10 +79,11 @@ export const OracleIntegrityStaking = ({ }: Props) => { const self = useMemo( () => - api.type === ApiStateType.Loaded && - publishers.find((publisher) => - publisher.stakeAccount?.equals(api.account), - ), + api.type === ApiStateType.Loaded + ? publishers.find((publisher) => + publisher.stakeAccount?.equals(api.account), + ) + : undefined, [publishers, api], ); @@ -130,7 +131,7 @@ export const OracleIntegrityStaking = ({
-
-

{title}

+
+

+ {title} +

{ - const [closeDisabled, setCloseDisabled] = useState(false); - return transfer === undefined || isDisabled === true || (max === 0n && !enableWithZeroMax) ? ( @@ -60,27 +58,59 @@ export const TransferButton = ({ ) : ( - - {({ close }) => ( - - {children} - - )} - + {children} + ); }; +type TransferDialogProps = Omit< + ComponentProps, + "children" +> & { + max: bigint; + transfer: (amount: bigint) => Promise; + submitButtonText: ReactNode; + children?: + | ((amount: Amount) => ReactNode | ReactNode[]) + | ReactNode + | ReactNode[] + | undefined; +}; + +export const TransferDialog = ({ + max, + transfer, + submitButtonText, + children, + ...props +}: TransferDialogProps) => { + const [closeDisabled, setCloseDisabled] = useState(false); + + return ( + + {({ close }) => ( + + {children} + + )} + + ); +}; + type DialogContentsProps = { max: bigint; children: Props["children"];