Tic-tac-toe: add salis (#437)

frontend/apps/tic-tac-toe/README.md

@@ -12,6 +12,8 @@
 
 React application of [Tic-Tac-Toe](https://wiki.gear-tech.io/docs/examples/Gaming/tictactoe) based on [Rust smart-contract](https://github.com/gear-foundation/dapps/tree/master/contracts/tic-tac-toe).
 
+This is a frontend implementation for programs created using the [Sails Library](https://wiki.vara.network/docs/build/sails/). For programs built with [Gear library](https://wiki.vara.network/docs/build/gstd/), refer to the implementation [here](https://github.com/gear-foundation/dapps/tree/master/frontend/dev/gstd-tic-tac-toe).
+
 ## Getting started
 
 ### Install packages:

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

@@ -1,29 +1,26 @@
 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 { Loader, LoadingError, MainLayout } from '@/components';
 import '@gear-js/vara-ui/dist/style.css';
 import { Routing } from '@/pages';
-import { useProgramMetadata } from './app/hooks';
 
 function Component() {
-  const metadata = useProgramMetadata(meta);
   const { isGameReady } = useInitGame();
-  const { errorGame: hasError } = useInitGameSync(metadata);
+  const { errorGame } = useInitGameSync();
 
   return (
     <MainLayout>
-      {!!hasError && (
+      {!!errorGame && (
         <LoadingError>
           <p>Error in the Game contract :(</p>
           <pre>
-            <small>Error message:</small> <code>{hasError}</code>
+            <small>Error message:</small> <code>{errorGame.message}</code>
           </pre>
         </LoadingError>
       )}
-      {!hasError && isGameReady && <Routing />}
-      {!hasError && !isGameReady && <Loader />}
+      {!errorGame && isGameReady && <Routing />}
+      {!errorGame && !isGameReady && <Loader />}
     </MainLayout>
   );
 }

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

@@ -14,9 +14,10 @@ import {
   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';
+import { QueryProvider } from './query-provider';
+import { useProgram } from '../utils';
 
 function ApiProvider({ children }: ProviderProps) {
   return <GearApiProvider initialArgs={{ endpoint: ADDRESS.NODE }}>{children}</GearApiProvider>;
@@ -53,8 +54,9 @@ function GaslessTransactionsProvider({ children }: ProviderProps) {
 
 function SignlessTransactionsProvider({ children }: ProviderProps) {
   const { programId } = useDnsProgramIds();
+  const program = useProgram();
   return (
-    <SharedSignlessTransactionsProvider programId={programId} metadataSource={metaTxt}>
+    <SharedSignlessTransactionsProvider programId={programId} program={program}>
       {children}
     </SharedSignlessTransactionsProvider>
   );
@@ -66,6 +68,7 @@ const providers = [
   AccountProvider,
   AlertProvider,
   DnsProvider,
+  QueryProvider,
   GaslessTransactionsProvider,
   SignlessTransactionsProvider,
   EzTransactionsProvider,

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

@@ -0,0 +1,23 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 0,
+      staleTime: Infinity,
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+type Props = {
+  children: ReactNode;
+};
+
+const QueryProvider = ({ children }: Props) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+export { QueryProvider };

frontend/apps/tic-tac-toe/src/app/hooks/use-is-app-ready.ts

@@ -22,11 +22,6 @@ export function useIsAppReadySync() {
   const { setIsAppReady } = useIsAppReady();
 
   useAccountAvailableBalanceSync();
-  console.log('----------------');
-  console.log(isApiReady);
-  console.log(isAccountReady);
-  console.log(isAvailableBalanceReady);
-  console.log(isAuthReady);
   useEffect(() => {
     setIsAppReady(isApiReady && isAccountReady && isAvailableBalanceReady && isAuthReady);
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -0,0 +1 @@
+export * from './sails';

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

@@ -0,0 +1,2 @@
+export * from './sails';
+export * from './lib';