chore: cleanup demo application

algorandfoundation · Apr 12, 2024 · 9203910 · 9203910
1 parent 1515c14
commit 9203910
Show file tree

Hide file tree

Showing 21 changed files with 419 additions and 503 deletions.
diff --git a/index.html b/index.html
diff --git a/services/liquid-auth-api-js/src/connect/connect.gateway.ts b/services/liquid-auth-api-js/src/connect/connect.gateway.ts
@@ -1,10 +1,11 @@
-import type { Handshake, Server, Socket } from 'socket.io';
+import type { Server, Socket } from 'socket.io';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import {
   ConnectedSocket,
   MessageBody,
-  OnGatewayConnection, OnGatewayDisconnect,
+  OnGatewayConnection,
+  OnGatewayDisconnect,
   OnGatewayInit,
   SubscribeMessage,
   WebSocketGateway,
@@ -18,7 +19,9 @@ import { RedisIoAdapter } from '../adapters/redis-io.adapter.js';
     origin: '*',
   },
 })
-export class ConnectGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
+export class ConnectGateway
+  implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
+{
   private timers = new Map<string, NodeJS.Timeout>();
   private ioAdapter: RedisIoAdapter;
   private readonly logger = new Logger(ConnectGateway.name);
@@ -54,12 +57,20 @@ export class ConnectGateway implements OnGatewayInit, OnGatewayConnection, OnGat
           socket.conn.close();
           // you can also use socket.disconnect(), but in that case the client
           // will not try to reconnect
+        } else {
+          if (
+            typeof session.wallet === 'string' &&
+            socket.rooms.has(session.wallet) === false
+          ) {
+            this.logger.debug(`(*) Client Joining Room ${session.wallet}`);
+            socket.join(session.wallet);
+          }
         }
       });
     }, 200);
 
-    if(this.timers.has(request.sessionID)) {
-        clearInterval(this.timers.get(request.sessionID));
+    if (this.timers.has(request.sessionID)) {
+      clearInterval(this.timers.get(request.sessionID));
     }
 
     this.timers.set(request.sessionID, timer);
@@ -77,9 +88,11 @@ export class ConnectGateway implements OnGatewayInit, OnGatewayConnection, OnGat
 
   handleDisconnect(socket: Socket) {
     const request = socket.request as Record<string, any>;
-    this.logger.debug(`(*) Client Disconnected with Session: ${request.sessionID}`);
-    if(this.timers.has(request.sessionID)) {
-        clearInterval(this.timers.get(request.sessionID));
+    this.logger.debug(
+      `(*) Client Disconnected with Session: ${request.sessionID}`,
+    );
+    if (this.timers.has(request.sessionID)) {
+      clearInterval(this.timers.get(request.sessionID));
     }
   }
   /**
@@ -103,12 +116,12 @@ export class ConnectGateway implements OnGatewayInit, OnGatewayConnection, OnGat
     const session = await this.authService.findSession(request.sessionID);
     console.log('Session', session);
     if (session) {
-      console.log('Listening to auth messages')
+      console.log('Listening to auth messages');
       await this.ioAdapter.subClient.subscribe('auth');
 
       // Handle messages
       const obs$: Observable<any> = new Observable((observer) => {
-        const handleAuthMessage = async (channel, eventMessage)=> {
+        const handleAuthMessage = async (channel, eventMessage) => {
           console.log('Link->Message', channel, eventMessage);
           const { data } = JSON.parse(eventMessage);
           console.log(body.requestId, data.requestId, data, body);
@@ -123,12 +136,9 @@ export class ConnectGateway implements OnGatewayInit, OnGatewayConnection, OnGat
             this.ioAdapter.subClient.off('message', handleAuthMessage);
             observer.complete();
           }
-        }
+        };
 
-        this.ioAdapter.subClient.on(
-          'message',
-          handleAuthMessage,
-        );
+        this.ioAdapter.subClient.on('message', handleAuthMessage);
       });
       return obs$.pipe(
         map((obs$) => ({

diff --git a/sites/dapp-ui/src/App.tsx b/sites/dapp-ui/src/App.tsx
@@ -9,19 +9,25 @@ import {
 } from './Contexts';
 import Layout from './Layout';
 
-import { GetStartedCard } from './pages/home/GetStarted';
-import { RegisteredCard } from './pages/dashboard/Registered';
+import { HomePage } from './pages/home.tsx';
 import { createTheme, CssBaseline } from '@mui/material';
 import { DEFAULT_THEME } from './theme.tsx';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ThemeProvider } from '@emotion/react';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { createHashRouter, RouterProvider } from 'react-router-dom';
-import { WaitForPeersCard } from './pages/peering/WaitForPeers.tsx';
+import { PeeringPage } from './pages/peering.tsx';
 import ConnectedPage from './pages/connected.tsx';
+import { Algodv2 } from 'algosdk';
+import { AlgodContext } from './hooks/useAlgod.ts';
 const queryClient = new QueryClient();
 
+const algod = new Algodv2(
+  process.env.VITE_ALGOD_TOKEN || '',
+  process.env.VITE_ALGOD_SERVER || 'https://testnet-api.algonode.cloud',
+  process.env.VITE_ALGOD_PORT || 443,
+);
 const DEFAULT_CONFIG: RTCConfiguration = {
   iceServers: [
     {
@@ -40,15 +46,15 @@ const router = createHashRouter([
     path: '/',
     element: (
       <Layout>
-        <GetStartedCard />
+        <HomePage />
       </Layout>
     ),
   },
   {
     path: '/peering',
     element: (
       <Layout>
-        <WaitForPeersCard />
+        <PeeringPage />
       </Layout>
     ),
   },
@@ -60,14 +66,6 @@ const router = createHashRouter([
       </Layout>
     ),
   },
-  {
-    path: '/registered',
-    element: (
-      <Layout>
-        <RegisteredCard />
-      </Layout>
-    ),
-  },
 ]);
 export default function ProviderApp() {
   const [open, setOpen] = useState(false);
@@ -97,32 +95,40 @@ export default function ProviderApp() {
     () =>
       createTheme({
         ...DEFAULT_THEME,
-        palette: {
-          ...DEFAULT_THEME.palette,
-          mode,
-        },
+        palette:
+          mode === 'dark'
+            ? {
+                primary: { main: '#9966ff' },
+                mode: 'dark',
+              }
+            : { ...DEFAULT_THEME.palette },
       }),
     [mode],
   );
+  console.log(theme, DEFAULT_THEME.palette);
   return (
-    <QueryClientProvider client={queryClient}>
-      <SnackbarContext.Provider value={{ open, setOpen, message, setMessage }}>
-        <StateContext.Provider value={{ state, setState }}>
-          <ColorModeContext.Provider value={colorMode}>
-            <ThemeProvider theme={theme}>
-              <CssBaseline />
-              <PeerConnectionContext.Provider value={{ peerConnection }}>
-                <DataChannelContext.Provider
-                  value={{ dataChannel, setDataChannel }}
-                >
-                  <RouterProvider router={router} />
-                </DataChannelContext.Provider>
-              </PeerConnectionContext.Provider>
-              <ReactQueryDevtools initialIsOpen={false} />
-            </ThemeProvider>
-          </ColorModeContext.Provider>
-        </StateContext.Provider>
-      </SnackbarContext.Provider>
-    </QueryClientProvider>
+    <AlgodContext.Provider value={{ algod }}>
+      <QueryClientProvider client={queryClient}>
+        <SnackbarContext.Provider
+          value={{ open, setOpen, message, setMessage }}
+        >
+          <StateContext.Provider value={{ state, setState }}>
+            <ColorModeContext.Provider value={colorMode}>
+              <ThemeProvider theme={theme}>
+                <CssBaseline />
+                <PeerConnectionContext.Provider value={{ peerConnection }}>
+                  <DataChannelContext.Provider
+                    value={{ dataChannel, setDataChannel }}
+                  >
+                    <RouterProvider router={router} />
+                  </DataChannelContext.Provider>
+                </PeerConnectionContext.Provider>
+                <ReactQueryDevtools initialIsOpen={false} />
+              </ThemeProvider>
+            </ColorModeContext.Provider>
+          </StateContext.Provider>
+        </SnackbarContext.Provider>
+      </QueryClientProvider>
+    </AlgodContext.Provider>
   );
 }
diff --git a/sites/dapp-ui/src/components/Chat.tsx b/sites/dapp-ui/src/components/Chat.tsx
diff --git a/...s/dapp-ui/src/pages/home/ConnectModal.tsx → ...s/dapp-ui/src/components/ConnectModal.tsx b/...s/dapp-ui/src/pages/home/ConnectModal.tsx → ...s/dapp-ui/src/components/ConnectModal.tsx
@@ -7,9 +7,9 @@ import { Message } from '@liquid/auth-client/connect';
 import QRCodeStyling, { Options } from 'qr-code-styling';
 import { useEffect, useState } from 'react';
 import { Fade } from '@mui/material';
-import { useSocket } from '../../hooks/useSocket';
+import { useSocket } from '../hooks/useSocket';
 import nacl from 'tweetnacl';
-import { useCredentialStore, Credential } from '../../store';
+import { useCredentialStore, Credential } from '../store';
 import { useNavigate } from 'react-router-dom';
 const style = {
   position: 'absolute' as const,

diff --git a/sites/dapp-ui/src/components/user/Credential.tsx b/sites/dapp-ui/src/components/user/Credential.tsx
diff --git a/sites/dapp-ui/src/components/user/SessionMenu.tsx b/sites/dapp-ui/src/components/user/SessionMenu.tsx
@@ -1,8 +1,8 @@
 import { Avatar, Badge, CircularProgress, Menu } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import React, { useState } from 'react';
-import { useSocket } from '../../hooks/useSocket.ts';
-import { useUserState } from './useUserState.ts';
+import { useSocket } from '@/hooks/useSocket.ts';
+import { useUserState } from '@/hooks/useUserState.ts';
 import { StatusCard } from './StatusCard.tsx';
 
 export function SessionMenu() {

diff --git a/sites/dapp-ui/src/hooks/index.ts b/sites/dapp-ui/src/hooks/index.ts
@@ -0,0 +1,7 @@
+export * from './useAccountInfo';
+export * from './useAddress';
+export * from './useAlgod';
+export * from './useDataChannel';
+export * from './usePeerConnection';
+export * from './useSocket';
+export * from './useUserState';
diff --git a/sites/dapp-ui/src/hooks/useAccountInfo.ts b/sites/dapp-ui/src/hooks/useAccountInfo.ts
@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { useAlgod } from './useAlgod.ts';
+
+export function useAccountInfo(
+  address: string | null,
+  refetchInterval?: number,
+) {
+  const algod = useAlgod();
+  return useQuery({
+    refetchInterval,
+    queryKey: ['accountInfo', address],
+    queryFn: async () => {
+      if (!algod || !address) return;
+      return await algod.accountInformation(address).do();
+    },
+    enabled: !!algod && !!address,
+  });
+}