diff --git a/frontend/src/components/NewPlayer.tsx b/frontend/src/components/NewPlayer.tsx
index 08dafde..565330e 100644
--- a/frontend/src/components/NewPlayer.tsx
+++ b/frontend/src/components/NewPlayer.tsx
@@ -1,6 +1,6 @@
import { BoxCentered, Button, Link } from "@fuel-ui/react";
import { useWallet } from "@fuels/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
import type { Dispatch, SetStateAction } from "react";
import type { Modals } from "../constants";
@@ -41,11 +41,7 @@ export default function NewPlayer({
const paymaster = usePaymaster();
const isGaslessSupported = useGaslessWalletSupported();
- useEffect(() => {
- getBalance();
- }, [wallet]);
-
- async function getBalance() {
+ const getBalance = useCallback(async () => {
const thisWallet = wallet ?? contract?.account;
console.log(wallet, "wallet");
const baseAssetId = thisWallet?.provider.getBaseAssetId();
@@ -55,7 +51,33 @@ export default function NewPlayer({
if (balanceNum) {
setHasFunds(balanceNum > 0);
}
- }
+ }, [wallet, contract]);
+
+ useEffect(() => {
+ getBalance();
+ }, [wallet, getBalance]);
+
+ useEffect(() => {
+ const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+
+ if (status === "error") {
+ setStatus("none");
+ updatePageNum();
+ } else if (status === "none" && !showNoFunds) {
+ handleNewPlayer();
+ } else if (status === "none" && !hasFunds && showNoFunds) {
+ getBalance();
+ }
+ }
+ };
+
+ window.addEventListener("keydown", handleGlobalKeyDown);
+ return () => {
+ window.removeEventListener("keydown", handleGlobalKeyDown);
+ };
+ }, [status, showNoFunds, hasFunds]);
async function createPlayerWithoutGasStation() {
if (!wallet || !contract) throw new Error("Wallet or contract not found");
@@ -202,19 +224,42 @@ export default function NewPlayer({
return (
{status === "none" && !showNoFunds && (
-
diff --git a/frontend/src/components/modals/BuySeeds.tsx b/frontend/src/components/modals/BuySeeds.tsx
index 90139d6..c2d4a93 100644
--- a/frontend/src/components/modals/BuySeeds.tsx
+++ b/frontend/src/components/modals/BuySeeds.tsx
@@ -1,7 +1,7 @@
import { Button, Spinner, BoxCentered } from "@fuel-ui/react";
import { type BytesLike, Address, bn, Provider } from "fuels";
import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { useWalletFunds } from "../../hooks/useWalletFunds";
import { NoFundsMessage } from "./NoFundsMessage";
import {
@@ -39,6 +39,26 @@ export default function BuySeeds({
const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
useWalletFunds(contract);
+ useEffect(() => {
+ const handleGlobalKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+
+ if (status === "error") {
+ setStatus("none");
+ updatePageNum();
+ } else if (status === "none" && !showNoFunds) {
+ buySeeds();
+ }
+ }
+ };
+
+ window.addEventListener("keydown", handleGlobalKeyDown);
+ return () => {
+ window.removeEventListener("keydown", handleGlobalKeyDown);
+ };
+ }, [status, showNoFunds]);
+
async function buyWithGasStation() {
if (!wallet) {
throw new Error("No wallet found");
@@ -219,6 +239,9 @@ export default function BuySeeds({
setStatus("none");
updatePageNum();
}}
+ role="button"
+ tabIndex={0}
+ aria-label="Try again"
>
Try Again
@@ -227,7 +250,14 @@ export default function BuySeeds({
{status === "none" && !showNoFunds && (
<>
Buy Seeds
-
+
Buy 10 seeds
>
diff --git a/frontend/src/components/modals/HarvestModal.tsx b/frontend/src/components/modals/HarvestModal.tsx
index c6d40b2..03df5f8 100644
--- a/frontend/src/components/modals/HarvestModal.tsx
+++ b/frontend/src/components/modals/HarvestModal.tsx
@@ -1,6 +1,6 @@
import { Spinner, Button, BoxCentered } from "@fuel-ui/react";
import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { cssObj } from "@fuel-ui/css";
import {
@@ -44,6 +44,27 @@ export default function HarvestModal({
const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
useWalletFunds(contract);
+ // Add global keyboard event listener
+ useEffect(() => {
+ const handleGlobalKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+
+ if (status === "error") {
+ setStatus("none");
+ updatePageNum();
+ } else if (status === "none" && !hasFunds && !showNoFunds) {
+ harvestItem();
+ }
+ }
+ };
+
+ window.addEventListener("keydown", handleGlobalKeyDown);
+ return () => {
+ window.removeEventListener("keydown", handleGlobalKeyDown);
+ };
+ }, [status, hasFunds, showNoFunds]);
+
async function harvestWithoutGasStation() {
if (!wallet || !contract) throw new Error("Wallet or contract not found");
@@ -99,7 +120,6 @@ export default function HarvestModal({
const tx = await wallet.sendTransaction(request);
if (tx) {
- console.log("tx", tx);
onHarvestSuccess(tileArray[0]);
await paymaster.postJobComplete(jobId);
setModal("plant");
@@ -184,6 +204,9 @@ export default function HarvestModal({
setStatus("none");
updatePageNum();
}}
+ role="button"
+ tabIndex={0}
+ aria-label="Try again"
>
Try Again
@@ -195,7 +218,13 @@ export default function HarvestModal({
{status === "none" && !hasFunds && !showNoFunds && (
<>
Harvest this item?
-
+
Harvest
>
diff --git a/frontend/src/components/modals/PlantModal.tsx b/frontend/src/components/modals/PlantModal.tsx
index 15bb6d4..e70cdb5 100644
--- a/frontend/src/components/modals/PlantModal.tsx
+++ b/frontend/src/components/modals/PlantModal.tsx
@@ -1,6 +1,6 @@
import { Button } from "@fuel-ui/react";
import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { useWalletFunds } from "../../hooks/useWalletFunds";
import { NoFundsMessage } from "./NoFundsMessage";
@@ -47,6 +47,25 @@ export default function PlantModal({
const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
useWalletFunds(contract);
+ useEffect(() => {
+ const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+
+ if (status === "error") {
+ setStatus("none");
+ } else if (status === "none" && !showNoFunds && seeds > 0) {
+ handlePlant();
+ }
+ }
+ };
+
+ window.addEventListener("keydown", handleGlobalKeyDown);
+ return () => {
+ window.removeEventListener("keydown", handleGlobalKeyDown);
+ };
+ }, [status, showNoFunds, seeds]);
+
async function plantWithoutGasStation() {
if (!wallet || !contract) throw new Error("Wallet or contract not found");
@@ -183,6 +202,9 @@ export default function PlantModal({
onPress={() => {
setStatus("none");
}}
+ role="button"
+ tabIndex={0}
+ aria-label="Try again"
>
Try Again
@@ -193,7 +215,13 @@ export default function PlantModal({
{seeds > 0 ? (
<>
Plant a seed here?
-
+
Plant
>
diff --git a/frontend/src/components/modals/SellItem.tsx b/frontend/src/components/modals/SellItem.tsx
index c15f88f..cf361cb 100644
--- a/frontend/src/components/modals/SellItem.tsx
+++ b/frontend/src/components/modals/SellItem.tsx
@@ -1,7 +1,7 @@
import { Button } from "@fuel-ui/react";
import { Address, InputType, Provider, bn } from "fuels";
import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import { useWalletFunds } from "../../hooks/useWalletFunds";
import { NoFundsMessage } from "./NoFundsMessage";
@@ -40,6 +40,26 @@ export default function SellItem({
const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
useWalletFunds(contract);
+ useEffect(() => {
+ const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+ if (e.key === "Shift") {
+ e.preventDefault();
+
+ if (status === "error") {
+ setStatus("none");
+ updatePageNum();
+ } else if (status === "none" && !showNoFunds) {
+ sellItems();
+ }
+ }
+ };
+
+ window.addEventListener("keydown", handleGlobalKeyDown);
+ return () => {
+ window.removeEventListener("keydown", handleGlobalKeyDown);
+ };
+ }, [status, showNoFunds]);
+
async function sellWithoutGasStation() {
if (!wallet || !contract) throw new Error("Wallet or contract not found");
@@ -191,13 +211,23 @@ export default function SellItem({
setStatus("none");
updatePageNum();
}}
+ role="button"
+ tabIndex={0}
+ aria-label="Try again (press S or Shift)"
>
Try Again
)}
{status === "none" && !showNoFunds && (
-
+
Sell All Items
)}