Skip to content

fix(staking): move disclosure to show up when connecting wallet #1977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 27, 2024
Merged

fix(staking): move disclosure to show up when connecting wallet #1977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 10 additions & 158 deletions apps/staking/src/components/AccountSummary/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];
Expand Down Expand Up @@ -121,7 +111,13 @@ export const AccountSummary = ({
)}
<div className="mt-3 flex flex-row items-center gap-4 sm:mt-8">
{!restrictedMode && (
<AddTokensButton walletAmount={walletAmount} api={api} />
<TransferButton
actionName="Add tokens"
actionDescription="Add funds to your balance"
max={walletAmount}
transfer={api.deposit}
submitButtonText="Add tokens"
/>
)}
{availableToWithdraw === 0n ? (
<DialogTrigger>
Expand Down Expand Up @@ -366,147 +362,3 @@ const ClaimButton = ({ api, ...props }: ClaimButtonProps) => {
</Button>
);
};

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 ? (
<Button onPress={openTransfer}>Add Tokens</Button>
) : (
<DisclosureButton onAcknowledge={acknowledgeLegal} />
)}
<TransferDialog
title="Add tokens"
description="Add funds to your balance"
max={walletAmount}
transfer={api.deposit}
submitButtonText="Add tokens"
isOpen={transferOpen}
onOpenChange={setTransferOpen}
/>
</>
);
};

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<HTMLFormElement>) => {
e.preventDefault();
setOpen(false);
setTimeout(onAcknowledge, 400);
},
[setOpen, onAcknowledge],
);

return (
<>
<DialogTrigger isOpen={open} onOpenChange={setOpen}>
<Button>Add Tokens</Button>
<ModalDialog title="Disclosure">
<Form onSubmit={acknowledge}>
<p className="max-w-prose text-sm opacity-60">
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.
</p>
<Checkbox
className="my-4 block max-w-prose"
isSelected={understood}
onChange={setUnderstood}
>
I understand
</Checkbox>
<Checkbox
className="my-4 block max-w-prose"
isSelected={agreed}
onChange={setAgreed}
>
By checking the box and access the Services, you acknowledge and
agree to the terms and conditions of our{" "}
<Link
href="https://www.pyth.network/terms-of-use"
target="_blank"
className="underline"
>
Terms of Use
</Link>{" "}
and{" "}
<Link
href="https://www.pyth.network/privacy-policy"
target="_blank"
className="underline"
>
Privacy Policy
</Link>
.
</Checkbox>
<div className="mt-14 flex flex-col gap-8 sm:flex-row sm:justify-between">
<LinkButton
className="w-full sm:w-auto"
href="https://pyth.network/"
variant="secondary"
size="noshrink"
>
Exit
</LinkButton>
<Button
className="w-full sm:w-auto"
size="noshrink"
type="submit"
isDisabled={!understood || !agreed}
>
Confirm
</Button>
</div>
</Form>
</ModalDialog>
</DialogTrigger>
</>
);
};
Loading
Loading