Skip to content

Commit 77f682e

Browse files
cgjohncgjohn
authored
Add account (#140)
* Add account flows * Move shared components for adding accounts * update pin to use TOS component * linting
1 parent 997b97b commit 77f682e

File tree

14 files changed

+895
-709
lines changed

14 files changed

+895
-709
lines changed

‎package-lock.json

Lines changed: 0 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ 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 { Layout, Text, Button, Card } from "@ui-kitten/components";
6+
import { Layout, Text, Button, Card, Spinner } from "@ui-kitten/components";
7+
import React from "react";
78

89
export default function AccountSelect() {
910
const router = useRouter();
@@ -15,6 +16,12 @@ export default function AccountSelect() {
1516

1617
const setActiveAccount = facade.setActiveAccount.useMutation();
1718

19+
const renderLoadingSkeleton = () => (
20+
<Layout style={[styles.content, styles.loadingContainer]}>
21+
<Spinner size="large" />
22+
</Layout>
23+
);
24+
1825
return (
1926
<>
2027
<Stack.Screen
@@ -25,33 +32,35 @@ export default function AccountSelect() {
2532
/>
2633
<Layout style={styles.container}>
2734
<Layout style={styles.content}>
28-
{getAccountsResult.data?.map((account) => (
29-
<Card
30-
key={account.name}
31-
style={styles.accountCard}
32-
onPress={async () => {
33-
const result = await setActiveAccount.mutateAsync({
34-
name: account.name,
35-
});
36-
console.log(`setActiveAccount: ${result}`);
37-
router.dismissAll();
38-
}}
39-
>
40-
<Layout style={styles.accountInfo}>
41-
<Layout>
42-
<Text category="s1">{account.name}</Text>
43-
<Text category="p2" appearance="hint">
44-
{`${CurrencyUtils.render(account.balances.iron.confirmed)} $IRON`}
45-
</Text>
46-
</Layout>
47-
{account.active && (
48-
<Text status="success" category="c1">
49-
Active
50-
</Text>
51-
)}
52-
</Layout>
53-
</Card>
54-
))}
35+
{getAccountsResult.isLoading
36+
? renderLoadingSkeleton()
37+
: getAccountsResult.data?.map((account) => (
38+
<Card
39+
key={account.name}
40+
style={styles.accountCard}
41+
onPress={async () => {
42+
const result = await setActiveAccount.mutateAsync({
43+
name: account.name,
44+
});
45+
console.log(`setActiveAccount: ${result}`);
46+
router.dismissAll();
47+
}}
48+
>
49+
<Layout style={styles.accountInfo}>
50+
<Layout>
51+
<Text category="s1">{account.name}</Text>
52+
<Text category="p2" appearance="hint">
53+
{`${CurrencyUtils.render(account.balances.iron.confirmed)} $IRON`}
54+
</Text>
55+
</Layout>
56+
{account.active && (
57+
<Text status="success" category="c1">
58+
Active
59+
</Text>
60+
)}
61+
</Layout>
62+
</Card>
63+
))}
5564
<Button
5665
style={styles.addButton}
5766
onPress={() =>
@@ -88,4 +97,8 @@ const styles = StyleSheet.create({
8897
addButton: {
8998
marginTop: 8,
9099
},
100+
loadingContainer: {
101+
justifyContent: "center",
102+
alignItems: "center",
103+
},
91104
});

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

Lines changed: 10 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,11 @@
1-
import { StatusBar } from "expo-status-bar";
2-
import { StyleSheet, View } from "react-native";
3-
import { useRouter, Stack } from "expo-router";
4-
import { useState } from "react";
5-
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";
1+
import { Stack } from "expo-router";
2+
import { useRouter } from "expo-router";
3+
import { Layout } from "@ui-kitten/components";
4+
import { StyleSheet } from "react-native";
5+
import { EncodedImport } from "@/components/EncodedImport/EncodedImport";
156

16-
const LoadingIndicator = () => (
17-
<View style={styles.loadingContainer}>
18-
<Spinner size="small" status="basic" />
19-
</View>
20-
);
21-
22-
export default function ImportEncoded() {
7+
export default function ImportEncodedScreen() {
238
const router = useRouter();
24-
const [modalVisible, setModalVisible] = useState(false);
25-
const [accountName, setAccountName] = useState("Account Name");
26-
const [encodedAccount, setEncodedAccount] = useState("");
27-
28-
const facade = useFacade();
29-
const importAccount = facade.importAccount.useMutation();
309

3110
return (
3211
<>
@@ -38,82 +17,10 @@ export default function ImportEncoded() {
3817
/>
3918

4019
<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.
73-
</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-
95-
<Button
96-
style={styles.button}
97-
size="large"
98-
onPress={async () => {
99-
await importAccount.mutateAsync({
100-
account: encodedAccount,
101-
name: accountName,
102-
});
103-
setModalVisible(true);
104-
}}
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" />
20+
<EncodedImport
21+
onSuccess={() => router.dismissAll()}
22+
showSuccessModal={true}
23+
/>
11724
</Layout>
11825
</>
11926
);
@@ -124,49 +31,4 @@ const styles = StyleSheet.create({
12431
flex: 1,
12532
padding: 16,
12633
},
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: {
169-
justifyContent: "center",
170-
alignItems: "center",
171-
},
17234
});

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Stack } from "expo-router";
2+
import { useRouter } from "expo-router";
3+
import { Layout } from "@ui-kitten/components";
4+
import { StyleSheet } from "react-native";
5+
import { FileImport } from "@/components/FileImport/FileImport";
6+
import React from "react";
7+
8+
export default function ImportFileScreen() {
9+
const router = useRouter();
10+
11+
return (
12+
<React.Fragment>
13+
<Stack.Screen
14+
options={{
15+
headerTitle: "Account Import",
16+
headerBackTitle: "Back",
17+
}}
18+
/>
19+
20+
<Layout style={styles.container} level="1">
21+
<FileImport
22+
onSuccess={() => router.dismissAll()}
23+
showSuccessModal={true}
24+
/>
25+
</Layout>
26+
</React.Fragment>
27+
);
28+
}
29+
30+
const styles = StyleSheet.create({
31+
container: {
32+
flex: 1,
33+
padding: 16,
34+
},
35+
});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Stack } from "expo-router";
2+
import { useRouter } from "expo-router";
3+
import { Layout } from "@ui-kitten/components";
4+
import { StyleSheet } from "react-native";
5+
import { MnemonicImport } from "@/components/MnemonicImport/MnemonicImport";
6+
7+
export default function ImportMnemonicScreen() {
8+
const router = useRouter();
9+
10+
return (
11+
<>
12+
<Stack.Screen
13+
options={{
14+
headerTitle: "Account Import",
15+
headerBackTitle: "Back",
16+
}}
17+
/>
18+
19+
<Layout style={styles.container} level="1">
20+
<MnemonicImport
21+
onSuccess={() => router.dismissAll()}
22+
showSuccessModal={true}
23+
/>
24+
</Layout>
25+
</>
26+
);
27+
}
28+
29+
const styles = StyleSheet.create({
30+
container: {
31+
flex: 1,
32+
padding: 16,
33+
},
34+
});

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,14 @@ export default function AddAccount() {
3232
Import an existing account
3333
</Text>
3434

35-
<Button style={styles.button} appearance="outline" size="large">
36-
Mnemonic Phrase
37-
</Button>
35+
<Link
36+
href="/(drawer)/account/account-settings/add-account/import-mnemonic"
37+
asChild
38+
>
39+
<Button style={styles.button} appearance="outline" size="large">
40+
Mnemonic Phrase
41+
</Button>
42+
</Link>
3843

3944
<Link
4045
href="/(drawer)/account/account-settings/add-account/import-encoded"
@@ -45,9 +50,14 @@ export default function AddAccount() {
4550
</Button>
4651
</Link>
4752

48-
<Button style={styles.button} appearance="outline" size="large">
49-
Import from File
50-
</Button>
53+
<Link
54+
href="/(drawer)/account/account-settings/add-account/import-file"
55+
asChild
56+
>
57+
<Button style={styles.button} appearance="outline" size="large">
58+
Import from File
59+
</Button>
60+
</Link>
5161
</Card>
5262

5363
<StatusBar style="auto" />

0 commit comments

Comments
 (0)