commit a69482a3f2c53f0bf058bae2301faed1303b3dd0 · gmstn.systems/gemstone-app

+2 -7

src/app/(protected)/index.tsx

···

       1
        
       import ChatComponentProfiled from "@/components/ChatComponentProfiled";

     

       2
       -
       import { useLatticeSession } from "@/providers/authed/LatticeSessionsProvider";

     

       3
        
       import { useOAuthSession } from "@/providers/OAuthProvider";

     

       4
        
       import { Redirect } from "expo-router";

     

       5
       -
       import { Text, View } from "react-native";

     

       6
        
       

     

       7
        
       export default function Index() {

     

       8
        
           const oAuthSession = useOAuthSession();

     

       9
       -
           const sessionsMap = useLatticeSession();

     

       10
       -
           const sessions = sessionsMap.values().toArray();

     

       11
        
           return (

     

       12
        
               <View

     

       13
        
                   style={{

     
···

       21
        
                   ) : (

     

       22
        
                       <Redirect href={"/login"} />

     

       23
        
                   )}

     

       24
       -
                   {sessions.map((session, idx) => (

     

       25
       -
                       <Text key={idx}>{session.latticeDid}</Text>

     

       26
       -
                   ))}

     

       27
        
               </View>

     

       28
        
           );

     

       29
        
       }

···

       1
        
       import ChatComponentProfiled from "@/components/ChatComponentProfiled";

     

       0
        
       
     

       2
        
       import { useOAuthSession } from "@/providers/OAuthProvider";

     

       3
        
       import { Redirect } from "expo-router";

     

       4
       +
       import { View } from "react-native";

     

       5
        
       

     

       6
        
       export default function Index() {

     

       7
        
           const oAuthSession = useOAuthSession();

     

       8
       +
       

     

       0
        
       
     

       9
        
           return (

     

       10
        
               <View

     

       11
        
                   style={{

     
···

       19
        
                   ) : (

     

       20
        
                       <Redirect href={"/login"} />

     

       21
        
                   )}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       22
        
               </View>

     

       23
        
           );

     

       24
        
       }

+1 -3

src/components/ChatComponentProfiled.tsx

···

       21
        
           did: DidPlc | DidWeb;

     

       22
        
       }) {

     

       23
        
           const [inputText, setInputText] = useState("");

     

       24
       -
           const { messages, isConnected, sendMessage } = useWebSocket(

     

       25
       -
               "ws://localhost:8080",

     

       26
       -
           );

     

       27
        
       

     

       28
        
           const handleSend = () => {

     

       29
        
               if (inputText.trim()) {

···

       21
        
           did: DidPlc | DidWeb;

     

       22
        
       }) {

     

       23
        
           const [inputText, setInputText] = useState("");

     

       24
       +
           const { messages, isConnected, sendMessage } = useWebSocket();

     

       0
        
       
     

       0
        
       
     

       25
        
       

     

       26
        
           const handleSend = () => {

     

       27
        
               if (inputText.trim()) {

+15 -15

src/lib/hooks/useWebSocket.ts

···

       6
        
           validateWsMessageString,

     

       7
        
           validateWsMessageType,

     

       8
        
       } from "@/lib/validators";

     

       9
       -
       import { useEffect, useRef, useState } from "react";

     

       0
        
       
     

       10
        
       

     

       11
       -
       export function useWebSocket(url: string) {

     

       12
       -
           const [messages, setMessages] = useState<ShardMessage[]>([]);

     

       13
        
           const [isConnected, setIsConnected] = useState(false);

     

       14
       -
           const ws = useRef<WebSocket | null>(null);

     

       15
        
       

     

       16
        
           useEffect(() => {

     

       17
       -
               // Connect to WebSocket

     

       18
       -
               ws.current = new WebSocket(url);

     

       19
       -
       

     

       20
       -
               ws.current.onopen = () => {

     

       21
        
                   console.log("Connected to WebSocket");

     

       22
        
                   setIsConnected(true);

     

       23
        
               };

     

       24
        
       

     

       25
       -
               ws.current.onmessage = (event) => {

     

       26
        
                   const eventData = validateWsMessageString(event.data);

     

       27
        
                   if (!eventData) return;

     

       28
        
       

     
···

       41
        
                   }

     

       42
        
               };

     

       43
        
       

     

       44
       -
               ws.current.onerror = (error) => {

     

       45
        
                   console.error("WebSocket error:", error);

     

       46
        
               };

     

       47
        
       

     

       48
       -
               ws.current.onclose = () => {

     

       49
        
                   console.log("Disconnected from WebSocket");

     

       50
        
                   setIsConnected(false);

     

       51
        
               };

     

       52
        
       

     

       53
        
               // Cleanup on unmount

     

       54
        
               return () => {

     

       55
       -
                   ws.current?.close();

     

       56
        
               };

     

       57
       -
           }, [url]);

     

       58
        
       

     

       59
        
           const sendMessage = ({ text, did }: SendMessageOpts) => {

     

       60
       -
               if (ws.current?.readyState === WebSocket.OPEN) {

     

       61
       -
                   ws.current.send(

     

       0
        
       
     

       62
        
                       JSON.stringify({

     

       63
        
                           type: "shard/message",

     

       64
        
                           text,

···

       6
        
           validateWsMessageString,

     

       7
        
           validateWsMessageType,

     

       8
        
       } from "@/lib/validators";

     

       9
       +
       import { useFirstSessionWsTemp } from "@/providers/authed/SessionsProvider";

     

       10
       +
       import { useEffect, useState } from "react";

     

       11
        
       

     

       12
       +
       export function useWebSocket() {

     

       13
       +
           const [messages, setMessages] = useState<Array<ShardMessage>>([]);

     

       14
        
           const [isConnected, setIsConnected] = useState(false);

     

       15
       +
           const ws = useFirstSessionWsTemp();

     

       16
        
       

     

       17
        
           useEffect(() => {

     

       18
       +
               if(!ws) return;

     

       19
       +
               ws.onopen = () => {

     

       0
        
       
     

       0
        
       
     

       20
        
                   console.log("Connected to WebSocket");

     

       21
        
                   setIsConnected(true);

     

       22
        
               };

     

       23
        
       

     

       24
       +
               ws.onmessage = (event) => {

     

       25
        
                   const eventData = validateWsMessageString(event.data);

     

       26
        
                   if (!eventData) return;

     

       27
        
       

     
···

       40
        
                   }

     

       41
        
               };

     

       42
        
       

     

       43
       +
               ws.onerror = (error) => {

     

       44
        
                   console.error("WebSocket error:", error);

     

       45
        
               };

     

       46
        
       

     

       47
       +
               ws.onclose = () => {

     

       48
        
                   console.log("Disconnected from WebSocket");

     

       49
        
                   setIsConnected(false);

     

       50
        
               };

     

       51
        
       

     

       52
        
               // Cleanup on unmount

     

       53
        
               return () => {

     

       54
       +
                   ws.close();

     

       55
        
               };

     

       56
       +
           }, [ws]);

     

       57
        
       

     

       58
        
           const sendMessage = ({ text, did }: SendMessageOpts) => {

     

       59
       +
               if(!ws) return

     

       60
       +
               if (ws.readyState === WebSocket.OPEN) {

     

       61
       +
                   ws.send(

     

       62
        
                       JSON.stringify({

     

       63
        
                           type: "shard/message",

     

       64
        
                           text,

+15

src/lib/utils/domains.ts

···

       1
       +
       /**

     

       2
       +
        * Checks if a string is a domain

     

       3
       +
        * does NOT do TLD-level checks. Any domain/NSID-like string will pass this check

     

       4
       +
        */

     

       5
       +
       export const isDomain = (str: string) => {

     

       6
       +
           try {

     

       7
       +
               const url = new URL(str.includes("://") ? str : `https://${str}`);

     

       8
       +
               return (

     

       9
       +
                   (url.hostname.includes(".") && !url.hostname.startsWith(".")) ||

     

       10
       +
                   url.hostname === "localhost"

     

       11
       +
               );

     

       12
       +
           } catch {

     

       13
       +
               return false;

     

       14
       +
           }

     

       15
       +
       };

+1 -1

src/providers/authed/ChannelsProvider.tsx

···

       61
        
       

     

       62
        
           const channelsQueries = useQueries({

     

       63
        
               queries: memberships.map((membershipObjects) => ({

     

       64
       -
                   enabled: membershipsInitialising,

     

       65
        
                   queryKey: ["channel", membershipObjects.membership.channel.uri],

     

       66
        
                   queryFn: () => channelQueryFn(membershipObjects.channelAtUri),

     

       67
        
                   staleTime: DEFAULT_STALE_TIME,

···

       61
        
       

     

       62
        
           const channelsQueries = useQueries({

     

       63
        
               queries: memberships.map((membershipObjects) => ({

     

       64
       +
                   enabled: !membershipsInitialising,

     

       65
        
                   queryKey: ["channel", membershipObjects.membership.channel.uri],

     

       66
        
                   queryFn: () => channelQueryFn(membershipObjects.channelAtUri),

     

       67
        
                   staleTime: DEFAULT_STALE_TIME,

+99

src/providers/authed/SessionsProvider.tsx

···

       1
       +
       import { DEFAULT_STALE_TIME } from "@/lib/consts";

     

       2
       +
       import type { AtUri } from "@/lib/types/atproto";

     

       3
       +
       import type { LatticeSessionInfo } from "@/lib/types/handshake";

     

       4
       +
       import { isDomain } from "@/lib/utils/domains";

     

       5
       +
       import { connectToLattice, getLatticeEndpointFromDid } from "@/lib/utils/gmstn";

     

       6
       +
       import { useHandshakes } from "@/providers/authed/HandshakesProvider";

     

       7
       +
       import { useQueries } from "@tanstack/react-query";

     

       8
       +
       import type { ReactNode } from "react";

     

       9
       +
       import { createContext, useContext } from "react";

     

       10
       +
       

     

       11
       +
       type SessionsMap = Map<LatticeSessionInfo, WebSocket>;

     

       12
       +
       

     

       13
       +
       interface SessionsContextValue {

     

       14
       +
           sessionsMap: SessionsMap;

     

       15
       +
           isInitialising: boolean;

     

       16
       +
           error: Error | null;

     

       17
       +
           getSession: (sessionInfo: LatticeSessionInfo) => WebSocket | undefined;

     

       18
       +
       }

     

       19
       +
       

     

       20
       +
       const SessionsContext = createContext<SessionsContextValue | null>(null);

     

       21
       +
       

     

       22
       +
       export const useSessions = () => {

     

       23
       +
           const sessionsValue = useContext(SessionsContext);

     

       24
       +
           if (!sessionsValue)

     

       25
       +
               throw new Error(

     

       26
       +
                   "Sessions context was null. Did you try to access this outside of the authed providers? SessionsProvider must be below HandshakesProvider.",

     

       27
       +
               );

     

       28
       +
           return sessionsValue;

     

       29
       +
       };

     

       30
       +
       

     

       31
       +
       // TODO: remove this. temp testing function

     

       32
       +
       export const useFirstSessionWsTemp = () => {

     

       33
       +
           const wss = useSessions().sessionsMap.values().toArray();

     

       34
       +
           if(wss.length === 0) return;

     

       35
       +
           return wss[0];

     

       36
       +
       };

     

       37
       +
       

     

       38
       +
       export const SessionsProvider = ({ children }: { children: ReactNode }) => {

     

       39
       +
           const { handshakesMap } = useHandshakes();

     

       40
       +
           const handshakes = handshakesMap.entries().toArray();

     

       41
       +
       

     

       42
       +
           const endpointQueries = useQueries({

     

       43
       +
               queries: handshakes.map((handshake) => ({

     

       44
       +
                   queryKey: ["lattice-endpoints", handshake[0].rKey],

     

       45
       +
                   queryFn: async () => {

     

       46
       +
                       return await endpointQueryFn(handshake);

     

       47
       +
                   },

     

       48
       +
                   staleTime: DEFAULT_STALE_TIME,

     

       49
       +
               })),

     

       50
       +
           });

     

       51
       +
       

     

       52
       +
           const isInitialising = endpointQueries.some((q) => q.isLoading);

     

       53
       +
           const error = endpointQueries.find((q) => q.error)?.error ?? null;

     

       54
       +
       

     

       55
       +
           const sessionsMap = new Map<LatticeSessionInfo, WebSocket>();

     

       56
       +
       

     

       57
       +
           endpointQueries.forEach((q) => {

     

       58
       +
               const endpoint = q.data;

     

       59
       +
               if (!endpoint) return;

     

       60
       +
               const { sessionInfo, shardUrl } = endpoint;

     

       61
       +
               const websocket = connectToLattice({

     

       62
       +
                   shardUrl,

     

       63
       +
                   sessionToken: sessionInfo.token,

     

       64
       +
               });

     

       65
       +
               sessionsMap.set(sessionInfo, websocket);

     

       66
       +
           });

     

       67
       +
       

     

       68
       +
           const value: SessionsContextValue = {

     

       69
       +
               sessionsMap,

     

       70
       +
               isInitialising,

     

       71
       +
               error,

     

       72
       +
               getSession: (sessionInfo: LatticeSessionInfo) =>

     

       73
       +
                   sessionsMap.get(sessionInfo),

     

       74
       +
           };

     

       75
       +
       

     

       76
       +
           return <SessionsContext value={value}>{children}</SessionsContext>;

     

       77
       +
       };

     

       78
       +
       

     

       79
       +
       const endpointQueryFn = async (handshake: [AtUri, LatticeSessionInfo]) => {

     

       80
       +
           const atUri = handshake[0];

     

       81
       +
           const sessionInfo = handshake[1];

     

       82
       +
           const rkey = atUri.rKey ?? "";

     

       83
       +
           const shardDid = isDomain(rkey)

     

       84
       +
               ? `did:web:${encodeURIComponent(rkey)}`

     

       85
       +
               : `did:plc:${rkey}`;

     

       86
       +
       

     

       87
       +
           // TODO: again, implement proper did -> endpoint parsing here too.

     

       88
       +
           // for now, we just assume did:web and construce a URL based on that.

     

       89
       +
           // @ts-expect-error trust me bro it's a string

     

       90
       +
           const shardUrlResult = await getLatticeEndpointFromDid(shardDid);

     

       91
       +
       

     

       92
       +
           if (!shardUrlResult.ok) return;

     

       93
       +
       

     

       94
       +
           return {

     

       95
       +
               // TODO: xrpc and lexicon this endpoint

     

       96
       +
               shardUrl: `${shardUrlResult.data.origin}/connect`,

     

       97
       +
               sessionInfo,

     

       98
       +
           };

     

       99
       +
       };

+6 -1

src/providers/authed/index.tsx

···

       1
        
       import { HandshakesProvider } from "@/providers/authed/HandshakesProvider";

     

       0
        
       
     

       2
        
       import type { ReactNode } from "react";

     

       3
        
       

     

       4
        
       export const AuthedProviders = ({ children }: { children: ReactNode }) => {

     

       5
       -
           return <HandshakesProvider>{children}</HandshakesProvider>;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       6
        
       };

···

       1
        
       import { HandshakesProvider } from "@/providers/authed/HandshakesProvider";

     

       2
       +
       import { SessionsProvider } from "@/providers/authed/SessionsProvider";

     

       3
        
       import type { ReactNode } from "react";

     

       4
        
       

     

       5
        
       export const AuthedProviders = ({ children }: { children: ReactNode }) => {

     

       6
       +
           return (

     

       7
       +
               <HandshakesProvider>

     

       8
       +
                   <SessionsProvider>{children}</SessionsProvider>

     

       9
       +
               </HandshakesProvider>

     

       10
       +
           );

     

       11
        
       };