Skip to content

Commit 6e51632

Browse files
cgjohncgjohn
committed
Move shared components for adding accounts
1 parent 490e60d commit 6e51632

File tree

10 files changed

+749
-1004
lines changed

10 files changed

+749
-1004
lines changed

‎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 & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,11 @@
1-
import { StatusBar } from "expo-status-bar";
2-
import { StyleSheet, View, ScrollView } 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("");
26-
const [encodedAccount, setEncodedAccount] = useState("");
27-
28-
const facade = useFacade();
29-
const importAccount = facade.importAccount.useMutation();
309

3110
return (
3211
<>
@@ -38,88 +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-
<ScrollView
67-
contentContainerStyle={styles.scrollContent}
68-
showsVerticalScrollIndicator={false}
69-
>
70-
<Card disabled style={styles.card}>
71-
<Text category="h6" style={styles.title}>
72-
Encoded Key Import
73-
</Text>
74-
75-
<Text appearance="hint" style={styles.description}>
76-
Paste the complete string into the provided text field below.
77-
</Text>
78-
79-
<Input
80-
label="Account Name"
81-
placeholder="Enter account name"
82-
value={accountName}
83-
onChangeText={setAccountName}
84-
style={styles.input}
85-
size="large"
86-
/>
87-
88-
<Input
89-
label="Encoded Key"
90-
placeholder="Paste your encoded key here"
91-
value={encodedAccount}
92-
onChangeText={setEncodedAccount}
93-
style={styles.input}
94-
size="large"
95-
multiline
96-
textStyle={styles.encodedInput}
97-
maxLength={2000}
98-
/>
99-
100-
<Button
101-
style={styles.button}
102-
size="large"
103-
onPress={async () => {
104-
await importAccount.mutateAsync({
105-
account: encodedAccount,
106-
name: accountName,
107-
});
108-
setModalVisible(true);
109-
}}
110-
accessoryLeft={
111-
importAccount.isPending ? LoadingIndicator : undefined
112-
}
113-
disabled={
114-
importAccount.isPending || !encodedAccount || !accountName
115-
}
116-
>
117-
{importAccount.isPending ? "Importing..." : "Import Account"}
118-
</Button>
119-
</Card>
120-
</ScrollView>
121-
122-
<StatusBar style="auto" />
20+
<EncodedImport
21+
onSuccess={() => router.dismissAll()}
22+
showSuccessModal={true}
23+
/>
12324
</Layout>
12425
</>
12526
);
@@ -130,53 +31,4 @@ const styles = StyleSheet.create({
13031
flex: 1,
13132
padding: 16,
13233
},
133-
card: {
134-
marginVertical: 8,
135-
borderRadius: 12,
136-
},
137-
title: {
138-
textAlign: "center",
139-
marginBottom: 8,
140-
},
141-
description: {
142-
textAlign: "center",
143-
marginBottom: 24,
144-
},
145-
input: {
146-
marginBottom: 16,
147-
},
148-
encodedInput: {
149-
minHeight: 120,
150-
maxHeight: 200,
151-
textAlignVertical: "top",
152-
},
153-
button: {
154-
marginTop: 8,
155-
},
156-
backdrop: {
157-
backgroundColor: "rgba(0, 0, 0, 0.5)",
158-
},
159-
modalCard: {
160-
borderRadius: 12,
161-
margin: 24,
162-
padding: 16,
163-
},
164-
modalTitle: {
165-
textAlign: "center",
166-
marginVertical: 16,
167-
},
168-
modalText: {
169-
textAlign: "center",
170-
marginBottom: 24,
171-
},
172-
modalButton: {
173-
marginTop: 8,
174-
},
175-
loadingContainer: {
176-
justifyContent: "center",
177-
alignItems: "center",
178-
},
179-
scrollContent: {
180-
flexGrow: 1,
181-
},
18234
});

0 commit comments

Comments
 (0)