Skip to content

Commit 7c0173d

Browse files
dgcadgca
authored
Style the Add Account flow (#130)
1 parent 4728458 commit 7c0173d

File tree

4 files changed

+244
-87
lines changed

4 files changed

+244
-87
lines changed

‎packages/mobile-app/app/(drawer)/account/account-settings/account-select/index.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,7 @@ import { StyleSheet } from "react-native";
33
import { Stack, useRouter } from "expo-router";
44
import { useFacade } from "@/data/facades";
55
import { CurrencyUtils } from "@ironfish/sdk";
6-
import {
7-
Layout,
8-
Text,
9-
Button,
10-
Card,
11-
Icon,
12-
IconProps,
13-
} from "@ui-kitten/components";
14-
15-
const PlusIcon = (props: IconProps) => <Icon {...props} name="plus-outline" />;
6+
import { Layout, Text, Button, Card } from "@ui-kitten/components";
167

178
export default function AccountSelect() {
189
const router = useRouter();
@@ -63,8 +54,9 @@ export default function AccountSelect() {
6354
))}
6455
<Button
6556
style={styles.addButton}
66-
accessoryLeft={PlusIcon}
67-
onPress={() => router.push("/add-account/")}
57+
onPress={() =>
58+
router.push("/(drawer)/account/account-settings/add-account")
59+
}
6860
>
6961
Add Account
7062
</Button>

‎packages/mobile-app/app/(drawer)/account/account-settings/add-account/import-encoded.tsx

Lines changed: 145 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,172 @@
11
import { StatusBar } from "expo-status-bar";
2-
import { Button, Modal, StyleSheet, Text, TextInput, View } from "react-native";
3-
import { useRouter } from "expo-router";
2+
import { StyleSheet, View } from "react-native";
3+
import { useRouter, Stack } from "expo-router";
44
import { useState } from "react";
55
import { useFacade } from "@/data/facades";
6+
import {
7+
Layout,
8+
Text,
9+
Card,
10+
Button,
11+
Input,
12+
Modal,
13+
Spinner,
14+
} from "@ui-kitten/components";
15+
16+
const LoadingIndicator = () => (
17+
<View style={styles.loadingContainer}>
18+
<Spinner size="small" status="basic" />
19+
</View>
20+
);
621

722
export default function ImportEncoded() {
823
const router = useRouter();
9-
1024
const [modalVisible, setModalVisible] = useState(false);
1125
const [accountName, setAccountName] = useState("Account Name");
1226
const [encodedAccount, setEncodedAccount] = useState("");
1327

1428
const facade = useFacade();
15-
1629
const importAccount = facade.importAccount.useMutation();
1730

1831
return (
19-
<View style={styles.container}>
20-
<Modal visible={modalVisible} animationType="slide">
21-
<View style={styles.container}>
22-
<Text>Account Imported!</Text>
23-
<Text>
24-
Before you start managing your digital assets, we need to scan the
25-
blockchain. This may take some time.
32+
<>
33+
<Stack.Screen
34+
options={{
35+
headerTitle: "Account Import",
36+
headerBackTitle: "Back",
37+
}}
38+
/>
39+
40+
<Layout style={styles.container} level="1">
41+
<Modal
42+
visible={modalVisible}
43+
backdropStyle={styles.backdrop}
44+
onBackdropPress={() => setModalVisible(false)}
45+
>
46+
<Card disabled style={styles.modalCard}>
47+
<Text category="h6" style={styles.modalTitle}>
48+
Account Imported!
49+
</Text>
50+
<Text style={styles.modalText} appearance="hint">
51+
Before you start managing your digital assets, we need to scan the
52+
blockchain. This may take some time.
53+
</Text>
54+
<Button
55+
onPress={async () => {
56+
router.dismissAll();
57+
setModalVisible(false);
58+
}}
59+
style={styles.modalButton}
60+
>
61+
Let's go!
62+
</Button>
63+
</Card>
64+
</Modal>
65+
66+
<Card disabled style={styles.card}>
67+
<Text category="h6" style={styles.title}>
68+
Encoded Key Import
69+
</Text>
70+
71+
<Text appearance="hint" style={styles.description}>
72+
Paste the complete string into the provided text field below.
2673
</Text>
74+
75+
<Input
76+
label="Account Name"
77+
placeholder="Enter account name"
78+
value={accountName}
79+
onChangeText={setAccountName}
80+
style={styles.input}
81+
size="large"
82+
/>
83+
84+
<Input
85+
label="Encoded Key"
86+
placeholder="Paste your encoded key here"
87+
value={encodedAccount}
88+
onChangeText={setEncodedAccount}
89+
style={styles.input}
90+
size="large"
91+
multiline
92+
textStyle={styles.encodedInput}
93+
/>
94+
2795
<Button
28-
title="Let's go!"
96+
style={styles.button}
97+
size="large"
2998
onPress={async () => {
30-
router.dismissAll();
31-
setModalVisible(false);
99+
await importAccount.mutateAsync({
100+
account: encodedAccount,
101+
name: accountName,
102+
});
103+
setModalVisible(true);
32104
}}
33-
/>
34-
</View>
35-
</Modal>
36-
<Text>Paste the complete string into the provided text field below.</Text>
37-
<TextInput
38-
placeholder="Account Name"
39-
value={accountName}
40-
onChangeText={setAccountName}
41-
/>
42-
<TextInput
43-
placeholder="Encoded Key"
44-
value={encodedAccount}
45-
onChangeText={setEncodedAccount}
46-
/>
47-
<Button
48-
title="Continue"
49-
onPress={async () => {
50-
await importAccount.mutateAsync({
51-
account: encodedAccount,
52-
name: accountName,
53-
});
54-
setModalVisible(true);
55-
}}
56-
/>
57-
<StatusBar style="auto" />
58-
</View>
105+
accessoryLeft={
106+
importAccount.isPending ? LoadingIndicator : undefined
107+
}
108+
disabled={
109+
importAccount.isPending || !encodedAccount || !accountName
110+
}
111+
>
112+
{importAccount.isPending ? "Importing..." : "Import Account"}
113+
</Button>
114+
</Card>
115+
116+
<StatusBar style="auto" />
117+
</Layout>
118+
</>
59119
);
60120
}
61121

62122
const styles = StyleSheet.create({
63123
container: {
64124
flex: 1,
65-
backgroundColor: "#fff",
66-
alignItems: "center",
125+
padding: 16,
126+
},
127+
card: {
128+
marginVertical: 8,
129+
borderRadius: 12,
130+
},
131+
title: {
132+
textAlign: "center",
133+
marginBottom: 8,
134+
},
135+
description: {
136+
textAlign: "center",
137+
marginBottom: 24,
138+
},
139+
input: {
140+
marginBottom: 16,
141+
},
142+
encodedInput: {
143+
minHeight: 80,
144+
textAlignVertical: "top",
145+
},
146+
button: {
147+
marginTop: 8,
148+
},
149+
backdrop: {
150+
backgroundColor: "rgba(0, 0, 0, 0.5)",
151+
},
152+
modalCard: {
153+
borderRadius: 12,
154+
margin: 24,
155+
padding: 16,
156+
},
157+
modalTitle: {
158+
textAlign: "center",
159+
marginVertical: 16,
160+
},
161+
modalText: {
162+
textAlign: "center",
163+
marginBottom: 24,
164+
},
165+
modalButton: {
166+
marginTop: 8,
167+
},
168+
loadingContainer: {
67169
justifyContent: "center",
170+
alignItems: "center",
68171
},
69172
});

‎packages/mobile-app/app/(drawer)/account/account-settings/add-account/index.tsx

Lines changed: 64 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,77 @@
11
import { StatusBar } from "expo-status-bar";
2-
import { Button, StyleSheet, Text, View } from "react-native";
3-
import { useRouter } from "expo-router";
4-
import { LinkButton } from "@/components/LinkButton";
2+
import { StyleSheet } from "react-native";
3+
import { Stack, Link } from "expo-router";
4+
import { Layout, Text, Card, Button, Divider } from "@ui-kitten/components";
55

66
export default function AddAccount() {
7-
const router = useRouter();
8-
97
return (
10-
<View style={styles.container}>
11-
<Button title="Close" onPress={() => router.dismissAll()} />
12-
<Text>Add a new account</Text>
13-
<LinkButton title="Create new account" href="/add-account/create/" />
14-
<Text>Import an existing account</Text>
15-
<Text>Mnemonic Phrase</Text>
16-
<LinkButton title="Encoded Key" href="/add-account/import-encoded/" />
17-
<Text>File</Text>
8+
<Layout style={styles.container} level="1">
9+
<Stack.Screen
10+
options={{
11+
headerTitle: "Add Account",
12+
headerStyle: { backgroundColor: "transparent" },
13+
}}
14+
/>
15+
16+
<Card style={styles.card}>
17+
<Text category="h6" style={styles.sectionTitle}>
18+
Add a new account
19+
</Text>
20+
<Link
21+
href="/(drawer)/account/account-settings/add-account/create"
22+
asChild
23+
>
24+
<Button style={styles.button} size="large">
25+
Create new account
26+
</Button>
27+
</Link>
28+
29+
<Divider style={styles.divider} />
30+
31+
<Text category="h6" style={styles.sectionTitle}>
32+
Import an existing account
33+
</Text>
34+
35+
<Button style={styles.button} appearance="outline" size="large">
36+
Mnemonic Phrase
37+
</Button>
38+
39+
<Link
40+
href="/(drawer)/account/account-settings/add-account/import-encoded"
41+
asChild
42+
>
43+
<Button style={styles.button} appearance="outline" size="large">
44+
Encoded Key
45+
</Button>
46+
</Link>
47+
48+
<Button style={styles.button} appearance="outline" size="large">
49+
Import from File
50+
</Button>
51+
</Card>
52+
1853
<StatusBar style="auto" />
19-
</View>
54+
</Layout>
2055
);
2156
}
2257

2358
const styles = StyleSheet.create({
2459
container: {
2560
flex: 1,
26-
backgroundColor: "#fff",
27-
alignItems: "center",
28-
justifyContent: "center",
61+
padding: 16,
62+
},
63+
card: {
64+
marginVertical: 8,
65+
borderRadius: 12,
66+
},
67+
sectionTitle: {
68+
marginBottom: 16,
69+
textAlign: "center",
70+
},
71+
button: {
72+
marginBottom: 12,
73+
},
74+
divider: {
75+
marginVertical: 24,
2976
},
3077
});

0 commit comments

Comments
 (0)