Skip to content

Commit

Permalink
chore: add consents
Browse files Browse the repository at this point in the history
  • Loading branch information
cjkoepke committed Dec 2, 2024
1 parent fd13fc1 commit ddc4108
Showing 7 changed files with 153 additions and 24 deletions.
4 changes: 2 additions & 2 deletions src/components/GlobalTPS/GlobalTPS.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { FC } from "react";
import { GLOBAL_MAX_SPEED } from "../../constants";
import Card from "../Card";
import Speedometer from "../Speedometer";
import cx from "classnames";
@@ -16,6 +15,7 @@ const GlobalTPS: FC<GlobalTPSProps> = ({
}) => {
const { globalStats } = useAppContext();
const transactions = globalStats?.txs_per_second ?? 0;
const maxTransactions = globalStats?.peak_txs_per_second ?? 0;

return (
<div>
@@ -40,7 +40,7 @@ const GlobalTPS: FC<GlobalTPSProps> = ({
})}
>
<Speedometer
maxSpeed={GLOBAL_MAX_SPEED}
maxSpeed={maxTransactions}
transactions={Math.round(transactions)}
/>
</Card>
2 changes: 2 additions & 0 deletions src/components/InitialView/InitialView.tsx
Original file line number Diff line number Diff line change
@@ -65,6 +65,8 @@ const InitialView: FC<InitialViewProps> = ({ startGame }) => {
setSessionId("");
};

console.log(accountData);

const renderButtons = () => {
if (isLoadingUserData) {
return <div className="h-72 flex items-center text-3xl">Loading...</div>;
164 changes: 144 additions & 20 deletions src/components/LoginModal/LoginModal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import React, { useEffect, useState } from "react";
import React, {
Dispatch,
FC,
SetStateAction,
useEffect,
useState,
} from "react";
import cx from "classnames";

import Modal from "../Modal";
import { API_BASE_URL, API_KEY } from "../../constants";
import { useQuery } from "@tanstack/react-query";
@@ -21,6 +29,13 @@ interface LoginModalProps {
showActionButtons: () => void;
}

interface ITOU {
readRules: boolean;
oldEnough: boolean;
nonEmployee: boolean;
privacy: boolean;
}

const providerIcons: { [key: string]: JSX.Element } = {
wallet: <FaWallet />,
google: <FaGoogle />,
@@ -29,6 +44,36 @@ const providerIcons: { [key: string]: JSX.Element } = {
github: <FaGithub />,
};

const CheckBoxInput: FC<{
consent: keyof ITOU;
label: string;
setTou: Dispatch<SetStateAction<ITOU>>;
tou: ITOU;
}> = ({ consent, label, tou, setTou }) => {
return (
<div className="inline-flex items-start max-w-[600px] justify-start gap-4">
<input
type="checkbox"
checked={tou[consent]}
onChange={(e) => {
setTou((prev) => ({
...prev,
[consent]: e.target.checked,
}));
}}
className={cx(
"appearance-none min-w-4 min-h-4 rounded-sm border-2 border-gray-500 transition-all duration-200 cursor-pointer",
"checked:bg-yellow-400 checked:shadow-[0_0_6px_2px_rgba(255,223,0,0.08),0_0_15px_4px_rgba(255,223,0,0.15)]",
)}
id={consent}
/>
<label className="text-sm" htmlFor={consent}>
{label}
</label>
</div>
);
};

const LoginModal: React.FC<LoginModalProps> = ({
close,
isOpen,
@@ -38,6 +83,13 @@ const LoginModal: React.FC<LoginModalProps> = ({
const { keys, setAccountData } = useAppContext();
const { publicKeyHashHex } = keys || {};
const [isWaitingSigning, setIsWaitingSigning] = useState(false);
const [tou, setTou] = useState<ITOU>({
nonEmployee: false,
oldEnough: false,
privacy: false,
readRules: false,
});
const [showSelection, setShowSelection] = useState<boolean>(false);

const { data: providers, isLoading: isLoadingProviders } = useQuery<string[]>(
{
@@ -68,6 +120,14 @@ const LoginModal: React.FC<LoginModalProps> = ({
if (!isWaitingSigning) {
close();
}

setShowSelection(false);
setTou({
nonEmployee: false,
oldEnough: false,
privacy: false,
readRules: false,
});
};

const handleLogin = (provider: string) => {
@@ -77,35 +137,99 @@ const LoginModal: React.FC<LoginModalProps> = ({
setIsWaitingSigning(true);
};

const renderContent = () => {
if (isWaitingSigning) return <p>Waiting for you to sign-in...</p>;
if (isLoadingProviders || !publicKeyHashHex) return <p>Loading...</p>;
if (!providers?.length) return <p>No providers available.</p>;

const renderConsentContent = () => {
return (
<div className="flex flex-col gap-6 items-center">
{providers.map((provider) => (
<Button
className="w-96 h-16 flex items-center gap-4 capitalize"
key={provider}
onClick={() => handleLogin(provider)}
>
{providerIcons[provider]} {provider}
</Button>
))}
<div className="text-left flex flex-col gap-4">
<h1 className="text-5xl uppercase">Tournament Consent</h1>
{/**
* Read the Rules
*/}
<CheckBoxInput
consent="readRules"
label="I confirm that I read, understand and agree to the Hydra Doom Tournament Official Contest Rules."
tou={tou}
setTou={setTou}
/>

{/**
* Are old enough to play
*/}
<CheckBoxInput
consent="oldEnough"
label="I confirm that I am 18 years of age or older."
tou={tou}
setTou={setTou}
/>

{/**
* Not an IOG Employee.
*/}
<CheckBoxInput
consent="nonEmployee"
label="I confirm that I am not an employee of Input Output Global, Inc. or
its subsidiaries, affiliates or other disqualifying entities (as
more fully described in the Hydra Doom Tournament Official Contest
Rules), or an immediate family member or person living in the same
household of the foregoing."
tou={tou}
setTou={setTou}
/>

{/**
* Privacy consent
*/}
<CheckBoxInput
consent="privacy"
label="I understand my information will be securely stored and processed in
accordance with our Privacy Policy. By providing my information, I
consent to the collection, use and processing of my information as
described in this form and in the Hydra Doom Tournament Official
Contest Rules."
tou={tou}
setTou={setTou}
/>
<Button
className="place-self-center my-8 w-96 h-16 flex items-center gap-4 capitalize"
onClick={() => setShowSelection(true)}
disabled={Object.values(tou).includes(false)}
>
Continue
</Button>
</div>
);
};

return (
<Modal isOpen={isOpen} close={handleClose}>
<div className="text-center text-4xl flex flex-col gap-8">
const renderLoginContent = () => {
if (isWaitingSigning) return <p>Waiting for you to sign-in...</p>;
if (isLoadingProviders || !publicKeyHashHex) return <p>Loading...</p>;
if (!providers?.length) return <p>No providers available.</p>;

return (
<>
<h1 className="text-5xl uppercase">Tournament Login</h1>
<p className="mb-4">
Please select a provider to login with. If you don't have an account
you can create one with the provider of your choice.
</p>
{renderContent()}
<div className="flex flex-col gap-6 items-center">
{providers.map((provider) => (
<Button
className="w-96 h-16 flex items-center gap-4 capitalize"
key={provider}
onClick={() => handleLogin(provider)}
>
{providerIcons[provider]} {provider}
</Button>
))}
</div>
</>
);
};

return (
<Modal isOpen={isOpen} close={handleClose}>
<div className="text-center text-4xl flex flex-col gap-8 py-4">
{showSelection ? renderLoginContent() : renderConsentContent()}
</div>
</Modal>
);
File renamed without changes.
5 changes: 4 additions & 1 deletion src/components/Speedometer/Speedometer.tsx
Original file line number Diff line number Diff line change
@@ -25,7 +25,10 @@ const Speedometer: FC<SpeedometerProps> = ({ maxSpeed, transactions }) => {
}}
/>
<div className="absolute -bottom-1 right-9">
{Math.max(maxSpeed, transactions)}
{Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 4,
}).format(Math.max(maxSpeed, transactions))}
</div>
</div>
<div className="text-center">{transactions}</div>
1 change: 0 additions & 1 deletion src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export const IS_LOCAL = !!import.meta.env.VITE_IS_LOCAL;
export const CABINET_KEY = import.meta.env.VITE_CABINET_KEY;
export const NETWORK_ID = Number(import.meta.env.VITE_NETWORK_ID);
export const GLOBAL_MAX_SPEED = 30 * 100;
export const HANDLE_CACHE_KEY = "player-handle-cache";
export const MAX_SPEED = 40;
export const REGIONS = [
1 change: 1 addition & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ export interface GameStatistics {
as_of: { secs_since_epoch: number; nanos_since_epoch: number };
bytes_per_second: number;
kills_per_minute: number;
peak_txs_per_second: number;
suicides_per_minute: number;
total_bots: number;
total_bytes: number;

0 comments on commit ddc4108

Please sign in to comment.