···

       
3
       
 
       
import { LatticeInfo } from "@/components/Settings/LatticeInfo";

     

       
4
       
 
       
import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent";

     

       
5
       
 
       
import { useFacet } from "@/lib/facet";

     

       
6
       
-
       
import { fade } from "@/lib/facet/src/lib/colors";

     

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

     

       
8
       
 
       
import { stringToAtUri } from "@/lib/utils/atproto";

     

       
9
       
 
       
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";

     
···

       
88
       
 
       
            )}

     

       
89
       
 
       
            <View>

     

       
90
       
 
       
                <Pressable

     

       
91
       
-
       
                    style={{

     

       
92
       
-
       
                        flexDirection: "row",

     

       
93
       
-
       
                        alignItems: "center",

     

       
94
       
-
       
                        marginLeft: 10,

     

       
95
       
-
       
                        gap: 4,

     

       
96
       
-
       
                        backgroundColor: semantic.primary,

     

       
97
       
-
       
                        alignSelf: "flex-start",

     

       
98
       
-
       
                        padding: 8,

     

       
99
       
-
       
                        paddingRight: 12,

     

       
100
       
-
       
                        borderRadius: atoms.radii.md,

     

       
101
       
-
       
                    }}

     

       
102
       
 
       
                    onPress={() => {

     

       
103
       
 
       
                        setShowRegisterModal(true);

     

       
104
       
 
       
                    }}

     

       
105
       
 
       
                >

     

       
106
       
-
       
                    <Plus height={16} width={16} color={semantic.textInverse} />

     

       
107
       
-
       
                    <Text

     

       
108
       
-
       
                        style={[

     

       
109
       
-
       
                            typography.weights.byName.normal,

     

       
110
       
-
       
                            { color: semantic.textInverse },

     

       
111
       
-
       
                        ]}

     

       
112
       
-
       
                    >

     

       
113
       
-
       
                        Register a Lattice

     

       
114
       
-
       
                    </Text>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
115
       
 
       
                </Pressable>

     

       
116
       
 
       
                <Modal

     

       
117
       
 
       
                    visible={showRegisterModal}

     

···

       
3
       
 
       
import { LatticeInfo } from "@/components/Settings/LatticeInfo";

     

       
4
       
 
       
import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent";

     

       
5
       
 
       
import { useFacet } from "@/lib/facet";

     

       
6
       
+
       
import { fade, lighten } from "@/lib/facet/src/lib/colors";

     

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

     

       
8
       
 
       
import { stringToAtUri } from "@/lib/utils/atproto";

     

       
9
       
 
       
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";

     
···

       
88
       
 
       
            )}

     

       
89
       
 
       
            <View>

     

       
90
       
 
       
                <Pressable

     

       
91
       
+
       
                    style={{ alignSelf: "flex-start", marginLeft: 10 }}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
92
       
 
       
                    onPress={() => {

     

       
93
       
 
       
                        setShowRegisterModal(true);

     

       
94
       
 
       
                    }}

     

       
95
       
 
       
                >

     

       
96
       
+
       
                    {({ hovered }) => (

     

       
97
       
+
       
                        <View

     

       
98
       
+
       
                            style={{

     

       
99
       
+
       
                                flexDirection: "row",

     

       
100
       
+
       
                                alignItems: "center",

     

       
101
       
+
       


     

       
102
       
+
       
                                gap: 4,

     

       
103
       
+
       
                                backgroundColor: hovered

     

       
104
       
+
       
                                    ? lighten(semantic.primary, 5)

     

       
105
       
+
       
                                    : semantic.primary,

     

       
106
       
+
       
                                alignSelf: "flex-start",

     

       
107
       
+
       
                                padding: 8,

     

       
108
       
+
       
                                paddingRight: 12,

     

       
109
       
+
       
                                borderRadius: atoms.radii.md,

     

       
110
       
+
       
                            }}

     

       
111
       
+
       
                        >

     

       
112
       
+
       
                            <Plus

     

       
113
       
+
       
                                height={16}

     

       
114
       
+
       
                                width={16}

     

       
115
       
+
       
                                color={semantic.textInverse}

     

       
116
       
+
       
                            />

     

       
117
       
+
       
                            <Text

     

       
118
       
+
       
                                style={[

     

       
119
       
+
       
                                    typography.weights.byName.normal,

     

       
120
       
+
       
                                    { color: semantic.textInverse },

     

       
121
       
+
       
                                ]}

     

       
122
       
+
       
                            >

     

       
123
       
+
       
                                Register a Lattice

     

       
124
       
+
       
                            </Text>

     

       
125
       
+
       
                        </View>

     

       
126
       
+
       
                    )}

     

       
127
       
 
       
                </Pressable>

     

       
128
       
 
       
                <Modal

     

       
129
       
 
       
                    visible={showRegisterModal}

     

···

       
3
       
 
       
import { RegisterShardModalContent } from "@/components/Settings/RegisterShardModalContent";

     

       
4
       
 
       
import { ShardInfo } from "@/components/Settings/ShardInfo";

     

       
5
       
 
       
import { useFacet } from "@/lib/facet";

     

       
6
       
-
       
import { fade } from "@/lib/facet/src/lib/colors";

     

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

     

       
8
       
 
       
import { stringToAtUri } from "@/lib/utils/atproto";

     

       
9
       
 
       
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";

     
···

       
88
       
 
       
            )}

     

       
89
       
 
       
            <View>

     

       
90
       
 
       
                <Pressable

     

       
91
       
-
       
                    style={{

     

       
92
       
-
       
                        flexDirection: "row",

     

       
93
       
-
       
                        alignItems: "center",

     

       
94
       
-
       
                        marginLeft: 10,

     

       
95
       
-
       
                        gap: 4,

     

       
96
       
-
       
                        backgroundColor: semantic.primary,

     

       
97
       
-
       
                        alignSelf: "flex-start",

     

       
98
       
-
       
                        padding: 8,

     

       
99
       
-
       
                        paddingRight: 12,

     

       
100
       
-
       
                        borderRadius: atoms.radii.md,

     

       
101
       
-
       
                    }}

     

       
102
       
 
       
                    onPress={() => {

     

       
103
       
 
       
                        setShowRegisterModal(true);

     

       
104
       
 
       
                    }}

     

       
105
       
 
       
                >

     

       
106
       
-
       
                    <Plus height={16} width={16} color={semantic.textInverse} />

     

       
107
       
-
       
                    <Text

     

       
108
       
-
       
                        style={[

     

       
109
       
-
       
                            typography.weights.byName.normal,

     

       
110
       
-
       
                            { color: semantic.textInverse },

     

       
111
       
-
       
                        ]}

     

       
112
       
-
       
                    >

     

       
113
       
-
       
                        Register a Shard

     

       
114
       
-
       
                    </Text>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
115
       
 
       
                </Pressable>

     

       
116
       
 
       
                <Modal

     

       
117
       
 
       
                    visible={showRegisterModal}

     

···

       
3
       
 
       
import { RegisterShardModalContent } from "@/components/Settings/RegisterShardModalContent";

     

       
4
       
 
       
import { ShardInfo } from "@/components/Settings/ShardInfo";

     

       
5
       
 
       
import { useFacet } from "@/lib/facet";

     

       
6
       
+
       
import { fade, lighten } from "@/lib/facet/src/lib/colors";

     

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

     

       
8
       
 
       
import { stringToAtUri } from "@/lib/utils/atproto";

     

       
9
       
 
       
import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";

     
···

       
88
       
 
       
            )}

     

       
89
       
 
       
            <View>

     

       
90
       
 
       
                <Pressable

     

       
91
       
+
       
                    style={{ alignSelf: "flex-start", marginLeft: 10 }}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
92
       
 
       
                    onPress={() => {

     

       
93
       
 
       
                        setShowRegisterModal(true);

     

       
94
       
 
       
                    }}

     

       
95
       
 
       
                >

     

       
96
       
+
       
                    {({ hovered }) => (

     

       
97
       
+
       
                        <View

     

       
98
       
+
       
                            style={{

     

       
99
       
+
       
                                flexDirection: "row",

     

       
100
       
+
       
                                alignItems: "center",

     

       
101
       
+
       


     

       
102
       
+
       
                                gap: 4,

     

       
103
       
+
       
                                backgroundColor: hovered

     

       
104
       
+
       
                                    ? lighten(semantic.primary, 5)

     

       
105
       
+
       
                                    : semantic.primary,

     

       
106
       
+
       
                                alignSelf: "flex-start",

     

       
107
       
+
       
                                padding: 8,

     

       
108
       
+
       
                                paddingRight: 12,

     

       
109
       
+
       
                                borderRadius: atoms.radii.md,

     

       
110
       
+
       
                            }}

     

       
111
       
+
       
                        >

     

       
112
       
+
       
                            <Plus

     

       
113
       
+
       
                                height={16}

     

       
114
       
+
       
                                width={16}

     

       
115
       
+
       
                                color={semantic.textInverse}

     

       
116
       
+
       
                            />

     

       
117
       
+
       
                            <Text

     

       
118
       
+
       
                                style={[

     

       
119
       
+
       
                                    typography.weights.byName.normal,

     

       
120
       
+
       
                                    { color: semantic.textInverse },

     

       
121
       
+
       
                                ]}

     

       
122
       
+
       
                            >

     

       
123
       
+
       
                                Register a Shard

     

       
124
       
+
       
                            </Text>

     

       
125
       
+
       
                        </View>

     

       
126
       
+
       
                    )}

     

       
127
       
 
       
                </Pressable>

     

       
128
       
 
       
                <Modal

     

       
129
       
 
       
                    visible={showRegisterModal}

     

···

       
33
       
 
       
    const hsl = hexToHsl(hex);

     

       
34
       
 
       


     

       
35
       
 
       
    if (typeof method !== "undefined") {

     

       
36
       
-
       
        hsl.l += (hsl.l * amount) / 100;

     

       
37
       
 
       
    } else {

     

       
38
       
-
       
        hsl.l += amount / 100;

     

       
39
       
 
       
    }

     

       
40
       
-
       
    hsl.l = clamp(hsl.l);

     

       
41
       
 
       
    return hslToHex(hsl);

     

       
42
       
 
       
};

     

       
43
       
 
       


     
···

       
49
       
 
       
    const hsl = hexToHsl(hex);

     

       
50
       
 
       


     

       
51
       
 
       
    if (typeof method !== "undefined") {

     

       
52
       
-
       
        hsl.l -= (hsl.l * amount) / 100;

     

       
53
       
 
       
    } else {

     

       
54
       
-
       
        hsl.l -= amount / 100;

     

       
55
       
 
       
    }

     

       
56
       
-
       
    hsl.l = clamp(hsl.l);

     

       
57
       
 
       
    return hslToHex(hsl);

     

       
58
       
 
       
};

     

       
59
       
 
       


     

···

       
33
       
 
       
    const hsl = hexToHsl(hex);

     

       
34
       
 
       


     

       
35
       
 
       
    if (typeof method !== "undefined") {

     

       
36
       
+
       
        hsl.l += hsl.l * amount;

     

       
37
       
 
       
    } else {

     

       
38
       
+
       
        hsl.l += amount;

     

       
39
       
 
       
    }

     

       
40
       
+
       
    hsl.l = clamp(hsl.l / 100) * 100;

     

       
41
       
 
       
    return hslToHex(hsl);

     

       
42
       
 
       
};

     

       
43
       
 
       


     
···

       
49
       
 
       
    const hsl = hexToHsl(hex);

     

       
50
       
 
       


     

       
51
       
 
       
    if (typeof method !== "undefined") {

     

       
52
       
+
       
        hsl.l -= hsl.l * amount;

     

       
53
       
 
       
    } else {

     

       
54
       
+
       
        hsl.l -= amount;

     

       
55
       
 
       
    }

     

       
56
       
+
       
    hsl.l = clamp(hsl.l / 100) * 100;

     

       
57
       
 
       
    return hslToHex(hsl);

     

       
58
       
 
       
};

     

       
59