Tic-tac-toe: Add ez-transactions

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

@@ -4,7 +4,7 @@ export const ACCOUNT_ID_LOCAL_STORAGE_KEY = 'account';
 
 export const ADDRESS = {
   NODE: import.meta.env.VITE_NODE_ADDRESS,
-  BACK: import.meta.env.VITE_GASLESS_BACKEND_ADDRESS,
+  GASLESS_BACKEND: import.meta.env.VITE_GASLESS_BACKEND_ADDRESS,
   GAME: import.meta.env.VITE_CONTRACT_ADDRESS as HexString,
 };
 
@@ -13,3 +13,5 @@ export const ROUTES = {
   GAME: '/game',
   NOTFOUND: '*',
 };
+
+export const SIGNLESS_ALLOWED_ACTIONS = ['StartGame', 'Turn'];

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

@@ -31,7 +31,10 @@ function AlertProvider({ children }: ProviderProps) {
 
 function GaslessTransactionsProvider({ children }: ProviderProps) {
   return (
-    <SharedGaslessTransactionsProvider programId={ADDRESS.GAME} backendAddress={ADDRESS.BACK} voucherLimit={18}>
+    <SharedGaslessTransactionsProvider
+      programId={ADDRESS.GAME}
+      backendAddress={ADDRESS.GASLESS_BACKEND}
+      voucherLimit={18}>
       {children}
     </SharedGaslessTransactionsProvider>
   );

frontend/apps/battleship/src/features/game/components/ship-arrangement/ship-arrangement.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useEzTransactions } from '@dapps-frontend/ez-transactions';
 import { Button } from '@gear-js/vara-ui';
 import { Heading } from '@/components/ui/heading';
-import { TextGradient } from '@/components/ui/text-gradient';
 import { Text } from '@/components/ui/text';
 import { Map } from '../';
 import styles from './ShipArrangement.module.scss';

frontend/apps/battleship/src/features/wallet/components/wallet-change/WalletChange.tsx

@@ -11,6 +11,7 @@ import styles from './WalletChange.module.scss';
 import { MenuOptions } from '@dapps-frontend/ui';
 import { EzSignlessTransactions, EzGaslessTransactions } from '@dapps-frontend/ez-transactions';
 import { useIsLocationGamePage } from '@/features/game/hooks';
+import { SIGNLESS_ALLOWED_ACTIONS } from '@/app/consts';
 
 type Props = {
   onClose(): void;
@@ -55,7 +56,7 @@ export function WalletChange({ onClose, openConnectWallet }: Props) {
       <div className={styles.changeAccount}>
         <MenuOptions
           customItems={[
-            { key: 'signless', option: <EzSignlessTransactions /> },
+            { key: 'signless', option: <EzSignlessTransactions allowedActions={SIGNLESS_ALLOWED_ACTIONS} /> },
             { key: 'gasless', option: <EzGaslessTransactions /> },
           ]}
         />

frontend/apps/battleship/src/pages/login.tsx

@@ -10,6 +10,7 @@ import { TextGradient } from '@/components/ui/text-gradient';
 import { WalletConnect } from '@/features/wallet';
 import styles from './login.module.scss';
 import { useGaslessTransactions, EzTransactionsSwitch, useSignlessTransactions } from '@dapps-frontend/ez-transactions';
+import { SIGNLESS_ALLOWED_ACTIONS } from '@/app/consts';
 
 export default function Login() {
   const navigate = useNavigate();
@@ -59,7 +60,7 @@ export default function Login() {
             {account ? 'Start the Game' : 'Connect wallet'}
           </Button>
 
-          <EzTransactionsSwitch />
+          <EzTransactionsSwitch allowedActions={SIGNLESS_ALLOWED_ACTIONS}/>
         </div>
       </div>
 

frontend/apps/tamagotchi-battle/src/app/consts.ts

@@ -6,7 +6,7 @@ export const LOCAL_STORAGE = {
 
 export const ENV = {
   NODE: process.env.REACT_APP_NODE_ADDRESS as string,
-  BACK: process.env.REACT_APP_BACKEND_ADDRESS as string,
+  GASLESS_BACKEND: process.env.REACT_APP_BACKEND_ADDRESS as string,
 };
 
 export const ROUTES = {

frontend/apps/tamagotchi-battle/src/app/hocs/index.tsx

@@ -18,7 +18,7 @@ const ApiProvider = ({ children }: ProviderProps) => (
 
 function GaslessTransactionsProvider({ children }: ProviderProps) {
   return (
-    <SharedGaslessTransactionsProvider programId={BATTLE_ADDRESS} backendAddress={ENV.BACK} voucherLimit={18}>
+    <SharedGaslessTransactionsProvider programId={BATTLE_ADDRESS} backendAddress={ENV.GASLESS_BACKEND} voucherLimit={18}>
       {children}
     </SharedGaslessTransactionsProvider>
   );

frontend/apps/tic-tac-toe/.env.example

@@ -1,5 +1,6 @@
 VITE_NODE_ADDRESS=
 VITE_CONTRACT_ADDRESS=
+VITE_GASLESS_BACKEND_ADDRESS=
 
 # optional, specify sentry dsn and targetted domain for error tracking
 # if domain is not specified, localhost is used by default

frontend/apps/tic-tac-toe/package.json

@@ -4,8 +4,8 @@
   "version": "1.0.2",
   "type": "module",
   "scripts": {
-    "start": "yarn build:packages && vite --open",
-    "build": "yarn build:packages && tsc && vite build",
+    "start": "yarn build:packages && yarn build:ez-transactions && vite --open",
+    "build": "yarn build:packages && yarn build:ez-transactions && tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -35,8 +35,7 @@
     "react-dom": "18.2.0",
     "react-router-dom": "6.10.0",
     "react-transition-group": "4.4.5",
-    "sass": "1.62.0",
-    "socket.io-client": "4.7.2"
+    "sass": "1.62.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",

frontend/apps/tic-tac-toe/src/app.tsx

@@ -2,10 +2,10 @@ import './app.scss';
 import { withProviders } from '@/app/hocs';
 import { useInitGame, useInitGameSync } from '@/features/tic-tac-toe/hooks';
 import meta from '@/features/tic-tac-toe/assets/meta/tic_tac_toe.meta.txt';
-import { Routing } from '@/pages';
 import { Loader, LoadingError, MainLayout } from '@/components';
-import { useProgramMetadata } from './app/hooks';
 import '@gear-js/vara-ui/dist/style.css';
+import { Routing } from '@/pages';
+import { useProgramMetadata } from './app/hooks';
 
 function Component() {
   const metadata = useProgramMetadata(meta);

frontend/apps/tic-tac-toe/src/app/consts.ts

@@ -1,7 +1,11 @@
+import { HexString } from '@gear-js/api';
+
 export const ACCOUNT_ID_LOCAL_STORAGE_KEY = 'account';
 
 export const ADDRESS = {
   NODE: import.meta.env.VITE_NODE_ADDRESS,
+  GAME: import.meta.env.VITE_CONTRACT_ADDRESS as HexString,
+  GASLESS_BACKEND: import.meta.env.VITE_GASLESS_BACKEND_ADDRESS,
   BASE_NODES: import.meta.env.VITE_DEFAULT_NODES_URL,
   STAGING_NODES: import.meta.env.VITE_STAGING_NODES_URL,
   SENTRY_DSN: import.meta.env.VITE_SENTRY_DSN_TTT,
@@ -13,3 +17,5 @@ export const ROUTES = {
   // UNAUTHORIZED: '/not-authorized',
   NOTFOUND: '*',
 };
+
+export const SIGNLESS_ALLOWED_ACTIONS = ['StartGame', 'Move', 'Skip'];

frontend/apps/tic-tac-toe/src/app/hocs/index.tsx

@@ -6,6 +6,14 @@ import {
 } from '@gear-js/react-hooks';
 import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
+
+import {
+  SignlessTransactionsProvider as SharedSignlessTransactionsProvider,
+  GaslessTransactionsProvider as SharedGaslessTransactionsProvider,
+  EzTransactionsProvider,
+} from '@dapps-frontend/ez-transactions';
+
+import metaTxt from '@/features/tic-tac-toe/assets/meta/tic_tac_toe.meta.txt';
 import { ADDRESS } from '@/app/consts';
 import { Alert, alertStyles } from '@/components/ui/alert';
 
@@ -21,7 +29,34 @@ function AlertProvider({ children }: ProviderProps) {
   );
 }
 
-const providers = [BrowserRouter, AlertProvider, ApiProvider, AccountProvider];
+function GaslessTransactionsProvider({ children }: ProviderProps) {
+  return (
+    <SharedGaslessTransactionsProvider
+      programId={ADDRESS.GAME}
+      backendAddress={ADDRESS.GASLESS_BACKEND}
+      voucherLimit={6}>
+      {children}
+    </SharedGaslessTransactionsProvider>
+  );
+}
+
+function SignlessTransactionsProvider({ children }: ProviderProps) {
+  return (
+    <SharedSignlessTransactionsProvider programId={ADDRESS.GAME} metadataSource={metaTxt}>
+      {children}
+    </SharedSignlessTransactionsProvider>
+  );
+}
+
+const providers = [
+  BrowserRouter,
+  ApiProvider,
+  AccountProvider,
+  AlertProvider,
+  GaslessTransactionsProvider,
+  SignlessTransactionsProvider,
+  EzTransactionsProvider,
+];
 
 function withProviders(Component: ComponentType) {
   return () => providers.reduceRight((children, Provider) => <Provider>{children}</Provider>, <Component />);

frontend/apps/tic-tac-toe/src/app/hooks/index.ts

@@ -1,3 +1,2 @@
 export { useProgramMetadata, useStateMetadata, useReadState } from './api';
 export { useLoginByParams } from './use-login-by-params';
-export { useCheckBalance } from './use-check-balance';

frontend/apps/tic-tac-toe/src/app/hooks/use-watch-messages.ts

@@ -2,16 +2,18 @@ import { useAccount, useAlert, useApi } from '@gear-js/react-hooks';
 import { MutableRefObject, useRef, useState } from 'react';
 import { UnsubscribePromise } from '@polkadot/api/types';
 import { Bytes } from '@polkadot/types';
-import { ProgramMetadata, UserMessageSent } from '@gear-js/api';
+import { ProgramMetadata, UserMessageSent, decodeAddress } from '@gear-js/api';
 import { ADDRESS } from '@/features/tic-tac-toe/consts';
 import { ContractError } from '../types';
+import { useSignlessTransactions } from '@dapps-frontend/ez-transactions';
 
 const programId = ADDRESS.GAME;
 
 export function useWatchMessages<T>(meta: ProgramMetadata) {
   const { api } = useApi();
   const { account } = useAccount();
   const alert = useAlert();
+  const signless = useSignlessTransactions();
 
   const messageSub: MutableRefObject<UnsubscribePromise | null> = useRef(null);
   const [reply, setReply] = useState<T | undefined>();
@@ -27,7 +29,10 @@ export function useWatchMessages<T>(meta: ProgramMetadata) {
     console.log(message.toHuman());
     const { destination, source, payload } = message;
 
-    const isOwner = destination.toHex() === account?.decodedAddress;
+    const signlessPairAddress = signless.pair?.address;
+    const ownerAddress = signlessPairAddress ? decodeAddress(signlessPairAddress) : account?.decodedAddress;
+    const isOwner = destination.toHex() === ownerAddress;
+
     const isGame = source.toHex() === programId;
 
     if (isOwner && isGame) {

frontend/apps/tic-tac-toe/src/app/utils.ts

@@ -1,8 +1,6 @@
-import { io } from 'socket.io-client';
 import { Account, AlertContainerFactory } from '@gear-js/react-hooks';
 import { ACCOUNT_ID_LOCAL_STORAGE_KEY } from '@/app/consts';
 import { HexString } from '@polkadot/util/types';
-import { ADDRESS } from './consts';
 
 export function formatDate(input: string | number): string {
   const date = new Date(input);

frontend/apps/tic-tac-toe/src/components/layout/header/header.module.scss

@@ -1,6 +1,6 @@
 .header {
   position: relative;
-  z-index: 40;
+  z-index: 9;
   padding: 20px;
 
   &__container {

frontend/apps/tic-tac-toe/src/components/layout/header/header.tsx

@@ -1,8 +1,10 @@
+import { EzGaslessTransactions, EzSignlessTransactions } from '@dapps-frontend/ez-transactions';
 import { Logo } from './logo';
 import styles from './header.module.scss';
 import { Header as CommonHeader, MenuHandler } from '@dapps-frontend/ui';
 import clsx from 'clsx';
 import { useAccount } from '@gear-js/react-hooks';
+import { SIGNLESS_ALLOWED_ACTIONS } from '@/app/consts';
 
 export function Header() {
   const { account } = useAccount();
@@ -13,7 +15,14 @@ export function Header() {
         <Logo className={clsx(styles.header__logo, !account && styles['header__logo--center'])} label="Tic-Tac-Toe" />
       }
       className={{ header: styles.header, content: styles.header__container }}
-      menu={<MenuHandler />}
+      menu={
+        <MenuHandler
+          customItems={[
+            { key: 'signless', option: <EzSignlessTransactions allowedActions={SIGNLESS_ALLOWED_ACTIONS} /> },
+            { key: 'gasless', option: <EzGaslessTransactions /> },
+          ]}
+        />
+      }
     />
   );
 }