diff --git a/src/components/GlobalTPS/GlobalTPS.tsx b/src/components/GlobalTPS/GlobalTPS.tsx index a963f0e..5b75d03 100644 --- a/src/components/GlobalTPS/GlobalTPS.tsx +++ b/src/components/GlobalTPS/GlobalTPS.tsx @@ -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 = ({ }) => { const { globalStats } = useAppContext(); const transactions = globalStats?.txs_per_second ?? 0; + const maxTransactions = globalStats?.peak_txs_per_second ?? 0; return (
@@ -40,7 +40,7 @@ const GlobalTPS: FC = ({ })} > diff --git a/src/components/InitialView/InitialView.tsx b/src/components/InitialView/InitialView.tsx index 0363f72..b40db5c 100644 --- a/src/components/InitialView/InitialView.tsx +++ b/src/components/InitialView/InitialView.tsx @@ -65,6 +65,8 @@ const InitialView: FC = ({ startGame }) => { setSessionId(""); }; + console.log(accountData); + const renderButtons = () => { if (isLoadingUserData) { return
Loading...
; diff --git a/src/components/LoginModal/LoginModal.tsx b/src/components/LoginModal/LoginModal.tsx index 78b01a3..bb93012 100644 --- a/src/components/LoginModal/LoginModal.tsx +++ b/src/components/LoginModal/LoginModal.tsx @@ -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: , google: , @@ -29,6 +44,36 @@ const providerIcons: { [key: string]: JSX.Element } = { github: , }; +const CheckBoxInput: FC<{ + consent: keyof ITOU; + label: string; + setTou: Dispatch>; + tou: ITOU; +}> = ({ consent, label, tou, setTou }) => { + return ( +
+ { + 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} + /> + +
+ ); +}; + const LoginModal: React.FC = ({ close, isOpen, @@ -38,6 +83,13 @@ const LoginModal: React.FC = ({ const { keys, setAccountData } = useAppContext(); const { publicKeyHashHex } = keys || {}; const [isWaitingSigning, setIsWaitingSigning] = useState(false); + const [tou, setTou] = useState({ + nonEmployee: false, + oldEnough: false, + privacy: false, + readRules: false, + }); + const [showSelection, setShowSelection] = useState(false); const { data: providers, isLoading: isLoadingProviders } = useQuery( { @@ -68,6 +120,14 @@ const LoginModal: React.FC = ({ 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 = ({ setIsWaitingSigning(true); }; - const renderContent = () => { - if (isWaitingSigning) return

Waiting for you to sign-in...

; - if (isLoadingProviders || !publicKeyHashHex) return

Loading...

; - if (!providers?.length) return

No providers available.

; - + const renderConsentContent = () => { return ( -
- {providers.map((provider) => ( - - ))} +
+

Tournament Consent

+ {/** + * Read the Rules + */} + + + {/** + * Are old enough to play + */} + + + {/** + * Not an IOG Employee. + */} + + + {/** + * Privacy consent + */} + +
); }; - return ( - -
+ const renderLoginContent = () => { + if (isWaitingSigning) return

Waiting for you to sign-in...

; + if (isLoadingProviders || !publicKeyHashHex) return

Loading...

; + if (!providers?.length) return

No providers available.

; + + return ( + <>

Tournament Login

Please select a provider to login with. If you don't have an account you can create one with the provider of your choice.

- {renderContent()} +
+ {providers.map((provider) => ( + + ))} +
+ + ); + }; + + return ( + +
+ {showSelection ? renderLoginContent() : renderConsentContent()}
); diff --git a/src/components/LoginModal/indes.ts b/src/components/LoginModal/index.ts similarity index 100% rename from src/components/LoginModal/indes.ts rename to src/components/LoginModal/index.ts diff --git a/src/components/Speedometer/Speedometer.tsx b/src/components/Speedometer/Speedometer.tsx index 77e07a9..6a2bba6 100644 --- a/src/components/Speedometer/Speedometer.tsx +++ b/src/components/Speedometer/Speedometer.tsx @@ -25,7 +25,10 @@ const Speedometer: FC = ({ maxSpeed, transactions }) => { }} />
- {Math.max(maxSpeed, transactions)} + {Intl.NumberFormat("en-US", { + notation: "compact", + maximumFractionDigits: 4, + }).format(Math.max(maxSpeed, transactions))}
{transactions}
diff --git a/src/constants.ts b/src/constants.ts index 9f6c70d..60d7b7a 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -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 = [ diff --git a/src/types.ts b/src/types.ts index fa78ef3..069d0c9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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;