frontend client for gemstone. decentralised workplace app
feat: shard info
+56
+56
src/components/Settings/ShardInfo.tsx
+56
src/components/Settings/ShardInfo.tsx
···
1
+
import { Loading } from "@/components/primitives/Loading";
2
+
import { Text } from "@/components/primitives/Text";
3
+
import type { AtUri } from "@/lib/types/atproto";
4
+
import type { SystemsGmstnDevelopmentShard } from "@/lib/types/lexicon/systems.gmstn.development.shard";
5
+
import { useCurrentPalette } from "@/providers/ThemeProvider";
6
+
import { getOwnerInfoFromShard } from "@/queries/get-owner-info-from-shard";
7
+
import { useQuery } from "@tanstack/react-query";
8
+
import { BadgeCheck, X } from "lucide-react-native";
9
+
import { View } from "react-native";
10
+
11
+
export const ShardInfo = ({
12
+
shard,
13
+
}: {
14
+
shard: {
15
+
uri: Required<AtUri>;
16
+
value: SystemsGmstnDevelopmentShard;
17
+
};
18
+
}) => {
19
+
const shardDomain = shard.uri.rKey;
20
+
const { isLoading, data: shardInfo } = useQuery({
21
+
queryKey: ["shardInfo", shardDomain],
22
+
queryFn: async () => {
23
+
return await getOwnerInfoFromShard(shardDomain);
24
+
},
25
+
});
26
+
const { semantic } = useCurrentPalette();
27
+
28
+
return (
29
+
<View style={{ flexDirection: "row", gap: 6, alignItems: "center" }}>
30
+
{isLoading ? (
31
+
<Loading />
32
+
) : (
33
+
<>
34
+
<Text>{shardDomain}</Text>
35
+
{shardInfo ? (
36
+
shardInfo.registered ? (
37
+
<BadgeCheck
38
+
height={16}
39
+
width={16}
40
+
color={semantic.positive}
41
+
/>
42
+
) : (
43
+
<X
44
+
height={16}
45
+
width={16}
46
+
color={semantic.negative}
47
+
/>
48
+
)
49
+
) : (
50
+
<X height={16} width={16} color={semantic.negative} />
51
+
)}
52
+
</>
53
+
)}
54
+
</View>
55
+
);
56
+
};