-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Scaffold out some of the main flows in the app
- Loading branch information
Showing
26 changed files
with
982 additions
and
180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,84 @@ | ||
| import { FontAwesome6, Ionicons, FontAwesome } from "@expo/vector-icons"; | ||
| import { Tabs } from "expo-router"; | ||
| import { useState } from "react"; | ||
| import { Button, Modal, SafeAreaView, Text } from "react-native"; | ||
| import { LinkButton } from "../../components/LinkButton"; | ||
|
|
||
| export default function Layout() { | ||
| const [modalVisible, setModalVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <Tabs> | ||
| <Tabs.Screen | ||
| name="index" | ||
| options={{ | ||
| title: "Balances", | ||
| tabBarIcon: ({ focused, color, size }) => ( | ||
| <Ionicons | ||
| name={focused ? "wallet" : "wallet-outline"} | ||
| size={size} | ||
| color={color} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="transact" | ||
| options={{ | ||
| title: "Transact", | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FontAwesome6 | ||
| name="arrow-right-arrow-left" | ||
| size={size} | ||
| color={color} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="contacts" | ||
| options={{ | ||
| title: "Contacts", | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FontAwesome name="user-circle-o" size={size} color={color} /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="ui" | ||
| options={{ | ||
| title: "UI Kit", | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FontAwesome name="paint-brush" size={size} color={color} /> | ||
| ), | ||
| }} | ||
| /> | ||
| </Tabs> | ||
| <> | ||
| <Modal animationType="slide" visible={modalVisible}> | ||
| <SafeAreaView style={{ flex: 1 }}> | ||
| <Text>Transact</Text> | ||
| <LinkButton | ||
| title="Receive" | ||
| href="/address/" | ||
| onPress={() => setModalVisible(false)} | ||
| /> | ||
| <Text>Receive assets from another wallet</Text> | ||
| <LinkButton | ||
| title="Send" | ||
| href="/send/" | ||
| onPress={() => setModalVisible(false)} | ||
| /> | ||
| <Text>Send assets to another wallet</Text> | ||
| <Button title="Close" onPress={() => setModalVisible(false)} /> | ||
| </SafeAreaView> | ||
| </Modal> | ||
| <Tabs> | ||
| <Tabs.Screen | ||
| name="index" | ||
| options={{ | ||
| title: "Balances", | ||
| tabBarIcon: ({ focused, color, size }) => ( | ||
| <Ionicons | ||
| name={focused ? "wallet" : "wallet-outline"} | ||
| size={size} | ||
| color={color} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="transact" | ||
| listeners={{ | ||
| tabPress: (e) => { | ||
| e.preventDefault(); | ||
| setModalVisible(!modalVisible); | ||
| }, | ||
| }} | ||
| options={{ | ||
| title: "Transact", | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FontAwesome6 | ||
| name="arrow-right-arrow-left" | ||
| size={size} | ||
| color={color} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="contacts" | ||
| options={{ | ||
| title: "Contacts", | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FontAwesome name="user-circle-o" size={size} color={color} /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="ui" | ||
| options={{ | ||
| title: "UI Kit", | ||
| tabBarIcon: ({ color, size }) => ( | ||
| <FontAwesome name="paint-brush" size={size} color={color} /> | ||
| ), | ||
| }} | ||
| /> | ||
| </Tabs> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,37 @@ | ||
| import { View, Text, Button } from "react-native"; | ||
| import { View, Text, Button, StyleSheet, Modal, TextInput } from "react-native"; | ||
|
|
||
| import { useFacade } from "../../data/facades"; | ||
| import { StatusBar } from "expo-status-bar"; | ||
| import { LinkButton } from "../../components/LinkButton"; | ||
| import { useState } from "react"; | ||
|
|
||
| export default function Contacts() { | ||
| const facade = useFacade(); | ||
|
|
||
| const walletStatus = facade.getWalletStatus.useQuery(undefined, { | ||
| refetchInterval: 1000, | ||
| }); | ||
|
|
||
| const pauseSyncing = facade.pauseSyncing.useMutation(); | ||
| const resumeSyncing = facade.resumeSyncing.useMutation(); | ||
| const [modalVisible, setModalVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <View> | ||
| {walletStatus.data && ( | ||
| <> | ||
| <Text>{`Scan status: ${walletStatus.data.status}`}</Text> | ||
| <Text>{`Latest known block: ${walletStatus.data.latestKnownBlock}`}</Text> | ||
| </> | ||
| )} | ||
| <Text>{}</Text> | ||
| <Button | ||
| onPress={async () => { | ||
| await resumeSyncing.mutateAsync(undefined); | ||
| }} | ||
| title="Resume Syncing" | ||
| /> | ||
| <Button | ||
| onPress={async () => { | ||
| await pauseSyncing.mutateAsync(undefined); | ||
| }} | ||
| title="Pause Syncing" | ||
| /> | ||
| <View style={styles.container}> | ||
| <Modal visible={modalVisible} animationType="slide"> | ||
| <View style={styles.container}> | ||
| <Text>Add Contact</Text> | ||
| <TextInput placeholder="Name" /> | ||
| <TextInput placeholder="Address" /> | ||
| <TextInput placeholder="Add note (Optional)" /> | ||
| <Button title="Add Contact" onPress={() => setModalVisible(false)} /> | ||
| <Button title="Close" onPress={() => setModalVisible(false)} /> | ||
| </View> | ||
| </Modal> | ||
| <LinkButton title="Menu" href="/menu/" /> | ||
| <Button title="Add" onPress={() => setModalVisible(true)} /> | ||
|
|
||
| <StatusBar style="auto" /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: "#fff", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,7 @@ | ||
| import { View, Text, ScrollView, TextInput, Button } from "react-native"; | ||
| import { useFacade } from "../../data/facades"; | ||
| import { useQueryClient } from "@tanstack/react-query"; | ||
| import React from "react"; | ||
| import { AccountFormat } from "@ironfish/sdk"; | ||
|
|
||
| /** | ||
| * This is a placeholder page to make the Expo Tabs layout work with | ||
| * the Transact button as a modal. | ||
| */ | ||
| export default function Transact() { | ||
| const facade = useFacade(); | ||
| const qc = useQueryClient(); | ||
|
|
||
| const getAccountsResult = facade.getAccounts.useQuery(undefined, { | ||
| refetchInterval: 1000, | ||
| }); | ||
| const createAccount = facade.createAccount.useMutation({ | ||
| onSuccess: () => { | ||
| qc.invalidateQueries({ | ||
| queryKey: ["getAccounts"], | ||
| }); | ||
| }, | ||
| }); | ||
| const importAccount = facade.importAccount.useMutation({ | ||
| onSuccess: () => { | ||
| qc.invalidateQueries({ | ||
| queryKey: ["getAccounts"], | ||
| }); | ||
| }, | ||
| }); | ||
| const removeAccount = facade.removeAccount.useMutation({ | ||
| onSuccess: () => { | ||
| qc.invalidateQueries({ | ||
| queryKey: ["getAccounts"], | ||
| }); | ||
| }, | ||
| }); | ||
| const exportAccount = facade.exportAccount.useMutation(); | ||
|
|
||
| const [importAccountText, setImportAccountText] = React.useState(""); | ||
|
|
||
| return ( | ||
| <ScrollView> | ||
| <Text>Accounts</Text> | ||
| {(getAccountsResult.data ?? []).map((account, i) => ( | ||
| <View key={i}> | ||
| <Text>{account.name}</Text> | ||
| <Text>{JSON.stringify(account)}</Text> | ||
| <Button | ||
| onPress={async () => { | ||
| await removeAccount.mutateAsync({ name: account.name }); | ||
| console.log("Removed Account", account.name); | ||
| }} | ||
| title="Remove Account" | ||
| /> | ||
| <Button | ||
| onPress={async () => { | ||
| const otherResult = await exportAccount.mutateAsync({ | ||
| name: account.name, | ||
| format: AccountFormat.Base64Json, | ||
| }); | ||
| console.log("Exported Account:", otherResult); | ||
| }} | ||
| title="Export Account" | ||
| /> | ||
| </View> | ||
| ))} | ||
| <Button | ||
| onPress={async () => { | ||
| const otherResult = await createAccount.mutateAsync({ name: "dave" }); | ||
| console.log("Created Account:", otherResult); | ||
| }} | ||
| title="Create Account" | ||
| /> | ||
| <TextInput | ||
| value={importAccountText} | ||
| onChangeText={setImportAccountText} | ||
| placeholder="Import account" | ||
| /> | ||
| <Button | ||
| onPress={async () => { | ||
| const otherResult = await importAccount.mutateAsync({ | ||
| account: importAccountText, | ||
| name: "asdf", | ||
| }); | ||
| console.log("Imported Account:", otherResult); | ||
| }} | ||
| title="Import Account" | ||
| /> | ||
| </ScrollView> | ||
| ); | ||
| return null; | ||
| } |
Oops, something went wrong.