1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
"use client";
import { ColorScheme, lightColors } from "@/constants";
import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
import {
StyleSheet,
TextInput,
TouchableOpacity,
View,
Text,
} from "react-native";
import PrimaryButton from "../PrimaryButton";
import { useState } from "react";
export function ShipForm() {
const colors = lightColors;
const styles = getStyles(colors);
const [patp, setPatp] = useState("~mirtyl-wacdec");
const [ticket, setTicket] = useState("~posseg-winnub-fogluc-dirmes");
const [isLoading, setIsLoading] = useState(false);
async function onSubmit() {
console.log({ patp, ticket });
}
return (
<View style={styles.bottomSection}>
<TextInput
style={styles.input}
placeholder="~sampel-palnet"
placeholderTextColor={colors.secondary}
value={patp}
onChangeText={setPatp}
autoCapitalize="none"
autoCorrect={false}
/>
<TextInput
style={styles.input}
placeholder="~sampel-ticlyt-migfun-falmel"
placeholderTextColor={colors.secondary}
value={ticket}
onChangeText={setTicket}
autoCapitalize="none"
autoCorrect={false}
secureTextEntry
/>
<PrimaryButton
label="Log in"
onPress={onSubmit}
style={{ marginTop: 0 }}
isLoading={isLoading}
/>
<TouchableOpacity style={styles.footer}>
<Text style={styles.footerText}>No Urbit ID? Get yours.</Text>
</TouchableOpacity>
</View>
);
}
export const getStyles = (colors: ColorScheme) =>
StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.background,
justifyContent: "space-between",
padding: 20,
},
topSection: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
walletIcon: {
width: 64,
height: 64,
marginBottom: 12,
},
logoText: {
fontSize: 18,
color: colors.text,
fontWeight: "400",
},
bottomSection: {
gap: 8,
marginBottom: 40,
},
input: {
height: 48,
backgroundColor: colors.card,
borderColor: colors.border,
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 16,
paddingVertical: 12,
color: colors.text,
fontWeight: "500",
fontSize: 16,
},
footer: {
marginTop: 50,
alignItems: "center",
},
footerText: {
color: colors.text,
fontSize: 16,
},
});
|
