diff --git a/apps/staking/src/components/AccountSummary/index.tsx b/apps/staking/src/components/AccountSummary/index.tsx index fc0328dd97..7e73866b0a 100644 --- a/apps/staking/src/components/AccountSummary/index.tsx +++ b/apps/staking/src/components/AccountSummary/index.tsx @@ -1,28 +1,18 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline"; -import { useLocalStorageValue } from "@react-hookz/web"; import Image from "next/image"; -import { - type ComponentProps, - type FormEvent, - type ReactNode, - useCallback, - useState, -} from "react"; +import { type ComponentProps, type ReactNode, useCallback } 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, LinkButton } from "../Button"; -import { Checkbox } from "../Checkbox"; -import { Link } from "../Link"; +import { Button } from "../Button"; import { ModalDialog } from "../ModalDialog"; import { Tokens } from "../Tokens"; -import { TransferButton, TransferDialog } from "../TransferButton"; +import { TransferButton } from "../TransferButton"; type Props = { api: States[ApiStateType.Loaded] | States[ApiStateType.LoadedNoStakeAccount]; @@ -121,7 +111,13 @@ export const AccountSummary = ({ )}
{!restrictedMode && ( - + )} {availableToWithdraw === 0n ? ( @@ -366,147 +362,3 @@ const ClaimButton = ({ api, ...props }: ClaimButtonProps) => { ); }; - -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/Dashboard/index.tsx b/apps/staking/src/components/Dashboard/index.tsx index 4567e486c5..1c9a9c6cbe 100644 --- a/apps/staking/src/components/Dashboard/index.tsx +++ b/apps/staking/src/components/Dashboard/index.tsx @@ -1,17 +1,24 @@ +import { useLocalStorageValue } from "@react-hookz/web"; import clsx from "clsx"; import Image, { type StaticImageData } from "next/image"; import { type ComponentProps, type ReactNode, + type FormEvent, useState, useMemo, useEffect, + useCallback, } from "react"; -import { Tabs, TabList, TabPanel, Tab } from "react-aria-components"; +import { Tabs, TabList, TabPanel, Tab, Form } from "react-aria-components"; import type { States, StateType as ApiStateType } from "../../hooks/use-api"; import { AccountSummary } from "../AccountSummary"; +import { Button, LinkButton } from "../Button"; +import { Checkbox } from "../Checkbox"; import { Governance } from "../Governance"; +import { Link } from "../Link"; +import { ModalDialog } from "../ModalDialog"; import governanceImage from "../NoWalletHome/governance.png"; import ois from "../NoWalletHome/ois.png"; import { OracleIntegrityStaking } from "../OracleIntegrityStaking"; @@ -128,96 +135,99 @@ export const Dashboard = ({ }, [tab]); return ( -
- - {restrictedMode ? ( - +
+ - ) : ( - -

- Choose Your Journey -

- - - - Secure the Oracle -
- to Earn Rewards - - - Gain Voting Power -
- for Governance - - - - - - - - - - - )} -
+ {restrictedMode ? ( + + ) : ( + +

+ Choose Your Journey +

+ + + + Secure the Oracle +
+ to Earn Rewards + + + Gain Voting Power +
+ for Governance + + + + + + + + + + + )} +
+ + ); }; @@ -282,3 +292,109 @@ export enum TabIds { Governance = "governance", IntegrityStaking = "ois", } + +const Disclosure = () => { + const hasAcknowledgedLegal = useLocalStorageValue("has-acknowledged-legal"); + const [understood, setUnderstood] = useState(false); + const [agreed, setAgreed] = useState(false); + const acknowledge = useCallback( + (e: FormEvent) => { + e.preventDefault(); + if (understood && agreed) { + hasAcknowledgedLegal.set("true"); + } + }, + [hasAcknowledgedLegal, understood, agreed], + ); + + 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 + {" "} + ,{" "} + + Privacy Policy + + , and{" "} + + Terms of Service + + . + +
+ + Exit + + +
+
+ + ); +}; diff --git a/apps/staking/src/components/ModalDialog/index.tsx b/apps/staking/src/components/ModalDialog/index.tsx index 5b21ae90f6..4455064e33 100644 --- a/apps/staking/src/components/ModalDialog/index.tsx +++ b/apps/staking/src/components/ModalDialog/index.tsx @@ -15,6 +15,7 @@ type ModalDialogProps = Omit< "children" > & { closeDisabled?: boolean | undefined; + noClose?: boolean | undefined; closeButtonText?: string; title: ReactNode | ReactNode[]; description?: ReactNode; @@ -28,29 +29,32 @@ type ModalDialogProps = Omit< export const ModalDialog = ({ closeDisabled, closeButtonText, + noClose, children, title, description, ...props }: ModalDialogProps) => ( {(options) => ( <> - + {!noClose && ( + + )} )} {typeof children === "function" ? children(options) : children} - {closeButtonText !== undefined && ( + {!noClose && closeButtonText !== undefined && (