Battleship-zk: signless (#422)

frontend/apps/battleship-zk/src/app/consts.ts

@@ -15,4 +15,4 @@ export const ROUTES = {
   NOTFOUND: '*',
 };
 
-export const SIGNLESS_ALLOWED_ACTIONS = ['StartGame', 'Turn'];
+export const SIGNLESS_ALLOWED_ACTIONS = ['playSingleGame', 'playMultipleGame'];

frontend/apps/battleship-zk/src/app/hocs/index.tsx

@@ -16,6 +16,7 @@ import {
 import { ADDRESS } from '@/app/consts';
 import { Alert, alertStyles } from '@/components/ui/alert';
 import { QueryProvider } from './query-provider';
+import { useProgram } from '../utils/sails';
 
 function ApiProvider({ children }: ProviderProps) {
   return <GearApiProvider initialArgs={{ endpoint: ADDRESS.NODE }}>{children}</GearApiProvider>;
@@ -44,13 +45,15 @@ function GaslessTransactionsProvider({ children }: ProviderProps) {
   );
 }
 
-// function SignlessTransactionsProvider({ children }: ProviderProps) {
-//   return (
-//     <SharedSignlessTransactionsProvider programId={ADDRESS.GAME} metadataSource={metaTxt}>
-//       {children}
-//     </SharedSignlessTransactionsProvider>
-//   );
-// }
+function SignlessTransactionsProvider({ children }: ProviderProps) {
+  const program = useProgram();
+
+  return (
+    <SharedSignlessTransactionsProvider programId={ADDRESS.GAME} program={program}>
+      {children}
+    </SharedSignlessTransactionsProvider>
+  );
+}
 
 const providers = [
   BrowserRouter,
@@ -59,7 +62,7 @@ const providers = [
   AlertProvider,
   QueryProvider,
   GaslessTransactionsProvider,
-  // SignlessTransactionsProvider,
+  SignlessTransactionsProvider,
   EzTransactionsProvider,
 ];
 

frontend/apps/battleship-zk/src/app/utils/sails/lib/lib.ts

@@ -15,9 +15,12 @@ export interface Configuration {
   gas_for_delete_single_game: number | string | bigint;
   gas_for_delete_multiple_game: number | string | bigint;
   gas_for_check_time: number | string | bigint;
+  gas_for_delete_session: number | string | bigint;
   delay_for_delete_single_game: number;
   delay_for_delete_multiple_game: number;
   delay_for_check_time: number;
+  minimum_session_duration_ms: number | string | bigint;
+  block_duration_ms: number | string | bigint;
 }
 
 export interface VerificationVariables {
@@ -69,12 +72,18 @@ export type Status =
 
 export type MultipleUtilsStepResult = 'Missed' | 'Injured' | 'Killed';
 
+export interface SignatureData {
+  key: ActorId;
+  duration: number | string | bigint;
+  allowed_actions: Array<ActionsForSession>;
+}
 export type ActionsForSession = 'playSingleGame' | 'playMultipleGame';
 
 export interface Session {
   key: ActorId;
   expires: number | string | bigint;
   allowed_actions: Array<ActionsForSession>;
+  expires_at_block: number;
 }
 
 export interface SingleGame {
@@ -128,9 +137,12 @@ export class Program {
         gas_for_delete_single_game: 'u64',
         gas_for_delete_multiple_game: 'u64',
         gas_for_check_time: 'u64',
+        gas_for_delete_session: 'u64',
         delay_for_delete_single_game: 'u32',
         delay_for_delete_multiple_game: 'u32',
         delay_for_check_time: 'u32',
+        minimum_session_duration_ms: 'u64',
+        block_duration_ms: 'u64',
       },
       VerificationVariables: { proof_bytes: 'ProofBytes', public_input: 'PublicMoveInput' },
       ProofBytes: { a: 'Vec<u8>', b: 'Vec<u8>', c: 'Vec<u8>' },
@@ -162,8 +174,9 @@ export class Program {
         },
       },
       MultipleUtilsStepResult: { _enum: ['Missed', 'Injured', 'Killed'] },
+      SignatureData: { key: '[u8;32]', duration: 'u64', allowed_actions: 'Vec<ActionsForSession>' },
       ActionsForSession: { _enum: ['PlaySingleGame', 'PlayMultipleGame'] },
-      Session: { key: '[u8;32]', expires: 'u64', allowed_actions: 'Vec<ActionsForSession>' },
+      Session: { key: '[u8;32]', expires: 'u64', allowed_actions: 'Vec<ActionsForSession>', expires_at_block: 'u32' },
       SingleGame: {
         player_board: 'Vec<Entity>',
         ship_hash: 'Vec<u8>',
@@ -968,36 +981,45 @@ export class Multiple {
 export class Session {
   constructor(private _program: Program) {}
 
-  public createSession(
-    key: ActorId,
-    duration: number | string | bigint,
-    allowed_actions: Array<ActionsForSession>,
-  ): TransactionBuilder<null> {
+  public createSession(signature_data: SignatureData, signature: `0x${string}` | null): TransactionBuilder<null> {
     if (!this._program.programId) throw new Error('Program ID is not set');
     return new TransactionBuilder<null>(
       this._program.api,
       this._program.registry,
       'send_message',
-      ['Session', 'CreateSession', key, duration, allowed_actions],
-      '(String, String, [u8;32], u64, Vec<ActionsForSession>)',
+      ['Session', 'CreateSession', signature_data, signature],
+      '(String, String, SignatureData, Option<Vec<u8>>)',
       'Null',
       this._program.programId,
     );
   }
 
-  public deleteSession(): TransactionBuilder<null> {
+  public deleteSessionFromAccount(): TransactionBuilder<null> {
     if (!this._program.programId) throw new Error('Program ID is not set');
     return new TransactionBuilder<null>(
       this._program.api,
       this._program.registry,
       'send_message',
-      ['Session', 'DeleteSession'],
+      ['Session', 'DeleteSessionFromAccount'],
       '(String, String)',
       'Null',
       this._program.programId,
     );
   }
 
+  public deleteSessionFromProgram(session_for_account: ActorId): TransactionBuilder<null> {
+    if (!this._program.programId) throw new Error('Program ID is not set');
+    return new TransactionBuilder<null>(
+      this._program.api,
+      this._program.registry,
+      'send_message',
+      ['Session', 'DeleteSessionFromProgram', session_for_account],
+      '(String, String, [u8;32])',
+      'Null',
+      this._program.programId,
+    );
+  }
+
   public async sessionForTheAccount(
     account: ActorId,
     originAddress?: string,

frontend/apps/battleship-zk/src/components/ui/modal/Modal.tsx

@@ -15,16 +15,22 @@ type Props = React.PropsWithChildren & {
   };
   onClose: () => void;
   closeOnMissclick?: boolean;
+  // hacky fix cuz the signless modal was not displaying above the dialog opened via showModal
+  showModalMode?: boolean;
 };
 
-export function Modal({ heading, children, className, onClose, closeOnMissclick = true }: Props) {
+export function Modal({ heading, children, className, onClose, closeOnMissclick = true, showModalMode = true }: Props) {
   const ref = useRef<HTMLDialogElement>(null);
 
   const disableScroll = () => document.body.classList.add('modal-open');
   const enableScroll = () => document.body.classList.remove('modal-open');
 
   const open = () => {
-    ref.current?.showModal();
+    if (showModalMode) {
+      ref.current?.showModal();
+    } else {
+      ref.current?.show();
+    }
     disableScroll();
   };
 

frontend/apps/battleship-zk/src/components/ui/modal/ModalBottom.tsx

@@ -41,6 +41,20 @@ export function ModalBottom({ heading, children, onClose }: Props) {
     }
   };
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
   return (
     <motion.dialog ref={ref} onClick={handleClick} className={styles.modal}>
       <motion.div className={styles.wrapper}>

frontend/apps/battleship-zk/src/features/game/components/game-cancelled-modal/GameCancelledModal.module.scss

@@ -0,0 +1,17 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+
+  & button {
+    width: 100%;
+    padding: 16px 10px;
+  }
+}

frontend/apps/battleship-zk/src/features/game/components/game-cancelled-modal/game-cancelled-modal.tsx

@@ -0,0 +1,23 @@
+import { Text } from '@/components/ui/text';
+import { Button } from '@gear-js/vara-ui';
+import { useState } from 'react';
+import { ModalBottom } from '@/components/ui/modal';
+import styles from './GameCancelledModal.module.scss';
+
+type Props = {
+  text: string;
+  onClose: () => void;
+};
+
+export default function GameCancelledModal({ text, onClose }: Props) {
+  return (
+    <ModalBottom heading="Game canceled" onClose={onClose}>
+      <div className={styles.content}>
+        <Text>{text}</Text>
+        <div className={styles.buttons}>
+          <Button color="dark" text="Exit" onClick={onClose} />
+        </div>
+      </div>
+    </ModalBottom>
+  );
+}

frontend/apps/battleship-zk/src/features/game/components/game-cancelled-modal/index.tsx

@@ -0,0 +1,3 @@
+import GameCancelledModal from './game-cancelled-modal';
+
+export { GameCancelledModal };

frontend/apps/battleship-zk/src/features/game/components/game-end-modal/game-end-modal.tsx

@@ -33,13 +33,8 @@ export default function GameEndModal({
   const { account } = useAccount();
   const navigate = useNavigate();
 
-  const defineGameResults = () => {
-    if (gameType === 'single') {
-      return winner === 'Player' ? 'You win' : 'You Lose';
-    }
-
-    return decodeAddress(winner) === account?.decodedAddress ? 'You win' : 'You Lose';
-  };
+  const isPlayerWinner =
+    gameType === 'single' ? winner === 'Player' : decodeAddress(winner) === account?.decodedAddress;
 
   const clearLocalData = () => {
     if (account?.address) {
@@ -59,9 +54,9 @@ export default function GameEndModal({
   };
 
   return (
-    <ModalBottom heading={defineGameResults()} onClose={onClose}>
+    <ModalBottom heading={isPlayerWinner ? 'You win' : 'You Lose'} onClose={onClose}>
       <div className={styles.content}>
-        <Text>Awesome! Play again to improve your skills.</Text>
+        <Text>{isPlayerWinner && 'Awesome!'} Play again to improve your skills.</Text>
 
         <div className={styles.gameInfo}>
           <div className={styles.line}>

frontend/apps/battleship-zk/src/features/game/components/index.ts

@@ -1,5 +1,6 @@
 export { ShipArrangement } from './ship-arrangement';
 export { GameProcess } from './game-process';
 export { GameEndModal } from './game-end-modal';
+export { GameCancelledModal } from './game-cancelled-modal';
 export { Map } from './map';
 export { Illustration } from './illustration';