frontend client for gemstone. decentralised workplace app

Compare changes

Choose any two refs to compare.

+17
src/lib/utils/arrays.ts
···
+
export const partition = <T>(
+
array: Array<T>,
+
predicate: (value: T, index: number, array: Array<T>) => boolean,
+
): [Array<T>, Array<T>] => {
+
const truthy: Array<T> = [];
+
const falsy: Array<T> = [];
+
+
array.forEach((value, index, arr) => {
+
if (predicate(value, index, arr)) {
+
truthy.push(value);
+
} else {
+
falsy.push(value);
+
}
+
});
+
+
return [truthy, falsy];
+
};
+21
src/queries/get-invite-from-pds.ts
···
+
import type { AtUri } from "@/lib/types/atproto";
+
import type { SystemsGmstnDevelopmentChannelInvite } from "@/lib/types/lexicon/systems.gmstn.development.channel.invite";
+
import { systemsGmstnDevelopmentChannelInviteRecordSchema } from "@/lib/types/lexicon/systems.gmstn.development.channel.invite";
+
import { getRecordFromFullAtUri } from "@/lib/utils/atproto";
+
import type { Result } from "@/lib/utils/result";
+
+
export const getInviteFromPds = async (
+
atUri: Required<AtUri>,
+
): Promise<Result<SystemsGmstnDevelopmentChannelInvite, unknown>> => {
+
const record = await getRecordFromFullAtUri(atUri);
+
if (!record.ok) return { ok: false, error: record.error };
+
+
const {
+
success,
+
error,
+
data: invite,
+
} = systemsGmstnDevelopmentChannelInviteRecordSchema.safeParse(record.data);
+
if (!success) return { ok: false, error };
+
+
return { ok: true, data: invite };
+
};
+30
src/queries/hooks/useInviteQuery.ts
···
+
import type { AtUri } from "@/lib/types/atproto";
+
import { getInviteFromPds } from "@/queries/get-invite-from-pds";
+
import { useQuery } from "@tanstack/react-query";
+
+
export const useInviteQuery = (atUri: Required<AtUri>) => {
+
const queryKey = ["invite", atUri.authority, atUri.rKey];
+
return {
+
queryKey,
+
useQuery: () =>
+
useQuery({
+
queryKey,
+
queryFn: async () => {
+
return await pdsInviteQueryFn(atUri);
+
},
+
}),
+
};
+
};
+
+
const pdsInviteQueryFn = async (atUri: Required<AtUri>) => {
+
const invites = await getInviteFromPds(atUri);
+
+
if (!invites.ok) {
+
console.error("pdsInviteQueryFn error.", invites.error);
+
throw new Error(
+
`Something went wrong while getting the user's invite record directly.}`,
+
);
+
}
+
+
return invites.data;
+
};
+1
src/providers/authed/MembershipsProvider.tsx
···
const { session, isLoading, agent } = oauth;
const isOAuthReady = !isLoading && !!agent && !!session;
+
// TODO: move this to own query hook
const membershipsQuery = useQuery({
queryKey: ["membership", session?.did],
enabled: isOAuthReady,
+15 -15
src/queries/initiate-handshake-to.ts
···
if (!latticeUrlResult.ok)
return { ok: false, error: latticeUrlResult.error };
-
let jwt = "";
-
if (did.startsWith("did:web:localhost")) {
-
if (__DEV__)
-
jwt = await requestInterServiceJwtFromPds({ oauth, aud: did });
-
else
-
return {
-
ok: false,
-
error: `Cannot initiate handshake to a lattice at localhost. Provided handshake target's DID was ${did}`,
-
};
-
} else {
-
// do proxy
-
// for now we return error
-
// FIXME: actually do service proxying.
-
return { ok: false, error: "Service proxying not yet implemented" };
-
}
+
// FIXME: actually do service proxying.
+
const jwt = await requestInterServiceJwtFromPds({ oauth, aud: did });
+
// if (did.startsWith("did:web:localhost")) {
+
// if (__DEV__)
+
// jwt = await requestInterServiceJwtFromPds({ oauth, aud: did });
+
// else
+
// return {
+
// ok: false,
+
// error: `Cannot initiate handshake to a lattice at localhost. Provided handshake target's DID was ${did}`,
+
// };
+
// } else {
+
// // do proxy
+
// // for now we return error
+
// return { ok: false, error: "Service proxying not yet implemented" };
+
// }
const latticeBaseUrl = latticeUrlResult.data.origin;
+67 -1
src/lib/utils/atproto/index.ts
···
atUriAuthoritySchema,
nsidSchema,
} from "@/lib/types/atproto";
-
import { comAtprotoRepoGetRecordResponseSchema } from "@/lib/types/lexicon/com.atproto.repo.getRecord";
+
import type {
+
ComAtprotoRepoGetRecordResponse} from "@/lib/types/lexicon/com.atproto.repo.getRecord";
+
import {
+
comAtprotoRepoGetRecordResponseSchema,
+
} from "@/lib/types/lexicon/com.atproto.repo.getRecord";
import type { Result } from "@/lib/utils/result";
import type { DidDocumentResolver } from "@atcute/identity-resolver";
import {
···
return { ok: true, data: record.value };
};
+
export const getCommitFromFullAtUri = async ({
+
authority,
+
collection,
+
rKey,
+
}: AtUri): Promise<Result<ComAtprotoRepoGetRecordResponse, unknown>> => {
+
const didDocResult = await resolveDidDoc(authority);
+
if (!didDocResult.ok) return { ok: false, error: didDocResult.error };
+
+
if (!collection || !rKey)
+
return {
+
ok: false,
+
error: "No rkey or collection found in provided AtUri object",
+
};
+
+
const { service: services } = didDocResult.data;
+
if (!services)
+
return {
+
ok: false,
+
error: { message: "Resolved DID document has no service field." },
+
};
+
+
const pdsService = services.find(
+
(service) =>
+
service.id === "#atproto_pds" &&
+
service.type === "AtprotoPersonalDataServer",
+
);
+
+
if (!pdsService)
+
return {
+
ok: false,
+
error: {
+
message:
+
"Resolved DID document has no PDS service listed in the document.",
+
},
+
};
+
+
const pdsEndpointRecord = pdsService.serviceEndpoint;
+
let pdsEndpointUrl;
+
try {
+
// @ts-expect-error yes, we are coercing something that is explicitly not a string into a string, but in this case we want to be specific. only serviceEndpoints with valid atproto pds URLs should be allowed.
+
pdsEndpointUrl = new URL(pdsEndpointRecord).origin;
+
} catch (err) {
+
return { ok: false, error: err };
+
}
+
const req = new Request(
+
`${pdsEndpointUrl}/xrpc/com.atproto.repo.getRecord?repo=${didDocResult.data.id}&collection=${collection}&rkey=${rKey}`,
+
);
+
+
const res = await fetch(req);
+
const data: unknown = await res.json();
+
+
const {
+
success: responseParseSuccess,
+
error: responseParseError,
+
data: record,
+
} = comAtprotoRepoGetRecordResponseSchema.safeParse(data);
+
if (!responseParseSuccess) {
+
return { ok: false, error: responseParseError };
+
}
+
return { ok: true, data: record };
+
};
+
export const didDocResolver: DidDocumentResolver =
new CompositeDidDocumentResolver({
methods: {
+1 -1
assets/oauth-client-metadata.json
···
"client_name": "Gemstone",
"client_uri": "https://app.gmstn.systems",
"redirect_uris": [
-
"systems.gmstn.app:/oauth/callback"
+
"systems.gmstn.app:/login/"
],
"scope": "atproto transition:generic",
"token_endpoint_auth_method": "none",
+3 -1
package.json
···
"dev:web": "expo start --web",
"dev:android": "expo start --android",
"dev:ios": "expo start --ios",
-
"dev:expo": "expo start"
+
"dev:expo": "expo start",
+
"export:web": "expo export -p web",
+
"export:web:serve": "expo serve"
},
"dependencies": {
"@atcute/atproto": "^3.1.7",
+7 -5
src/components/Chat/index.tsx
···
export const Chat = ({ channelAtUri }: { channelAtUri: AtUri }) => {
const [inputText, setInputText] = useState("");
-
const { messages, sendMessageToChannel, isConnected } =
-
useChannel(channelAtUri);
const record = useChannelRecordByAtUriObject(channelAtUri);
const { semantic } = useCurrentPalette();
const { typography, atoms } = useFacet();
+
const channel = useChannel(channelAtUri);
+
const { isLoading } = useProfile();
+
+
if (!channel) return <></>;
+
+
const { messages, sendMessageToChannel, isConnected } = channel;
const handleSend = () => {
if (inputText.trim()) {
···
}
};
-
const { isLoading } = useProfile();
-
if (!record)
return (
<View>
<Text>
-
Something has gone wrong. Could not resolve channel record
+
Something has gone wrong.Could not resolve channel record
from given at:// URI.
</Text>
</View>
+17 -9
src/lib/hooks/useChannel.ts
···
const { sessionInfo, socket } = findChannelSession(channel);
useEffect(() => {
-
if (!sessionInfo)
-
throw new Error(
+
if (!sessionInfo) {
+
console.warn(
"Channel did not resolve to a valid sessionInfo object.",
);
-
if (!socket)
-
throw new Error(
+
return;
+
}
+
if (!socket) {
+
console.warn(
"Session info did not resolve to a valid websocket connection. This should not happen and is likely a bug. Check the sessions map object.",
);
+
return;
+
}
// attach handlers here
···
};
}, [socket, sessionInfo, channel]);
-
if (!oAuthSession) throw new Error("No OAuth session");
-
if (!sessionInfo)
-
throw new Error(
+
if (!oAuthSession) {console.warn("No OAuth session"); return }
+
if (!sessionInfo) {
+
console.warn(
"Channel did not resolve to a valid sessionInfo object.",
);
-
if (!socket)
-
throw new Error(
+
return;
+
}
+
if (!socket) {
+
console.warn(
"Session info did not resolve to a valid websocket connection. This should not happen and is likely a bug. Check the sessions map object.",
);
+
return;
+
}
const channelStringified = atUriToString(channel);
+1 -3
src/providers/authed/SessionsProvider.tsx
···
console.log("tried to find", channel);
if (!sessionInfo)
-
throw new Error(
-
"Provided channel at:// URI (object) could not be found in any existing lattice sessions",
-
);
+
return { sessionInfo: undefined, socket: undefined };
return { sessionInfo, socket: sessionsMap.get(sessionInfo) };
},
+1 -1
src/lib/utils/gmstn.ts
···
agent: Agent;
}): Promise<Result<undefined, string>> => {
const now = new Date();
-
const rkey = TID.create(now.getTime(), Math.random());
+
const rkey = TID.create(now.getTime() * 1_000, Math.random());
const record: Omit<SystemsGmstnDevelopmentChannelInvite, "$type"> = {
// @ts-expect-error we want to explicitly use the ISO string variant
+1 -1
src/lib/utils/atproto/oauth.web.ts
···
} from "@atproto/oauth-client-browser";
import type { ExpoOAuthClientOptions } from "@atproto/oauth-client-expo";
import { ExpoOAuthClient as PbcWebExpoOAuthClient } from "@atproto/oauth-client-expo";
-
import oAuthMetadata from "../../../../assets/oauth-client-metadata.json";
+
import oAuthMetadata from "../../../../public/oauth-client-metadata.json";
import { __DEV__loopbackOAuthMetadata } from "@/lib/consts";
// suuuuuch a hack holy shit
+4 -6
src/components/Invites/index.tsx
···
useConstellationInvitesQuery(session);
const queryClient = useQueryClient();
-
const queryKeysToInvalidate = constellationInvitesQueryKey.concat([
-
"membership",
-
session.did,
-
]);
-
const { mutate: mutateInvites, error: inviteMutationError } = useMutation({
mutationFn: async (state: "accepted" | "rejected") => {
const inviteCommitRes = await getCommitFromFullAtUri(inviteAtUri);
···
},
onSuccess: async () => {
await queryClient.invalidateQueries({
-
queryKey: queryKeysToInvalidate,
+
queryKey: ["membership", session.did],
+
});
+
await queryClient.invalidateQueries({
+
queryKey: constellationInvitesQueryKey,
});
},
onError: () => {
+82 -23
src/components/Auth/Login.web.tsx
···
+
import { GmstnLogoColor } from "@/components/icons/gmstn/GmstnLogoColor";
+
import { Text } from "@/components/primitives/Text";
+
import { useFacet } from "@/lib/facet";
+
import { lighten } from "@/lib/facet/src/lib/colors";
import { useOAuthSetter, useOAuthValue } from "@/providers/OAuthProvider";
+
import { useCurrentPalette } from "@/providers/ThemeProvider";
import { Agent } from "@atproto/api";
+
import { ArrowRight } from "lucide-react-native";
import { useState } from "react";
-
import { Button, StyleSheet, TextInput, View } from "react-native";
+
import { Pressable, TextInput, View } from "react-native";
export const Login = () => {
+
const { semantic } = useCurrentPalette();
+
const { atoms, typography } = useFacet();
const [atprotoHandle, setAtprotoHandle] = useState("");
const oAuth = useOAuthValue();
const setOAuth = useOAuthSetter();
···
};
return (
-
<View>
-
<TextInput
-
style={styles.input}
-
value={atprotoHandle}
-
onChangeText={setAtprotoHandle}
-
placeholder="alice.bsky.social"
-
onSubmitEditing={handleSubmit}
-
/>
-
<Button title="Log in with your PDS ->" onPress={handleSubmit} />
+
<View
+
style={{
+
flex: 1,
+
flexDirection: "column",
+
alignItems: "center",
+
justifyContent: "center",
+
gap: 16,
+
}}
+
>
+
<View style={{ alignItems: "center" }}>
+
<View style={{ padding: 8, paddingLeft: 12, paddingTop: 12 }}>
+
<GmstnLogoColor height={36} width={36} />
+
</View>
+
<Text
+
style={[
+
typography.sizes.xl,
+
typography.weights.byName.medium,
+
]}
+
>
+
Gemstone
+
</Text>
+
</View>
+
<View style={{ gap: 10 }}>
+
<TextInput
+
style={[{
+
flex: 1,
+
borderWidth: 1,
+
borderColor: semantic.border,
+
borderRadius: atoms.radii.lg,
+
paddingHorizontal: 14,
+
paddingVertical: 12,
+
marginRight: 8,
+
fontSize: 16,
+
color: semantic.text
+
}, typography.weights.byName.light]}
+
value={atprotoHandle}
+
onChangeText={setAtprotoHandle}
+
placeholder="alice.bsky.social"
+
onSubmitEditing={handleSubmit}
+
placeholderTextColor={semantic.textPlaceholder}
+
/>
+
<Pressable onPress={handleSubmit}>
+
{({ hovered }) => (
+
<View
+
style={{
+
backgroundColor: hovered
+
? lighten(semantic.primary, 7)
+
: semantic.primary,
+
flexDirection: "row",
+
gap: 4,
+
alignItems: "center",
+
justifyContent: "center",
+
paddingVertical: 10,
+
borderRadius: atoms.radii.lg,
+
}}
+
>
+
<Text
+
style={[
+
{ color: semantic.textInverse },
+
typography.weights.byName.normal,
+
]}
+
>
+
Log in with ATProto
+
</Text>
+
<ArrowRight
+
height={16}
+
width={16}
+
color={semantic.textInverse}
+
/>
+
</View>
+
)}
+
</Pressable>
+
</View>
</View>
);
};
-
-
const styles = StyleSheet.create({
-
input: {
-
flex: 1,
-
borderWidth: 1,
-
borderColor: "#ccc",
-
borderRadius: 8,
-
paddingHorizontal: 12,
-
paddingVertical: 8,
-
marginRight: 8,
-
fontSize: 16,
-
},
-
});