|
5 | 5 | * @flow strict-local |
6 | 6 | */ |
7 | 7 |
|
8 | | -import React, {Component} from "react"; |
9 | | -import { |
10 | | - Appearance, |
11 | | - Button, |
12 | | - SafeAreaView, |
13 | | - SectionList, |
14 | | - StatusBar, |
15 | | - StyleSheet, |
16 | | - Text, |
17 | | -} from "react-native"; |
18 | | -import Header from "./src/mainView/Header"; |
19 | | -import AppViewModel from "./src/AppViewModel"; |
20 | | -import Clock from "./src/mainView/Clock"; |
21 | | -import {Colors} from "react-native/Libraries/NewAppScreen"; |
| 8 | +import React, {Component} from 'react' |
| 9 | +import {Appearance, SafeAreaView, StatusBar,} from 'react-native' |
| 10 | +import AppViewModel, {SelectedView} from './src/AppViewModel' |
| 11 | +import CommonViewModel from './src/CommonViewModel' |
| 12 | +import Login from './src/login/Login' |
| 13 | +import MainView from './src/mainView/MainView' |
| 14 | +import Onboard from './src/onboarding/Onboard' |
| 15 | +import CreateWallet from './src/onboarding/CreateWallet' |
22 | 16 |
|
23 | | -type AppProps = { |
24 | | - viewModel: AppViewModel |
25 | | -}; |
26 | | -type AppState = { |
27 | | - avaxPrice: number |
| 17 | +type AppProps = {} |
| 18 | +type AppState = { |
28 | 19 | backgroundStyle: any |
29 | | - mnemonic: string |
30 | | - walletCAddress: string |
31 | | - walletEvmAddress: string |
32 | 20 | isDarkMode: boolean |
33 | | - externalAddressesX: string[] |
34 | | - externalAddressesP: string[] |
35 | | - addressC: string |
36 | | - availableX: string |
37 | | -}; |
| 21 | + selectedView: SelectedView |
| 22 | +} |
38 | 23 |
|
39 | 24 | class App extends Component<AppProps, AppState> { |
40 | | - viewModel: AppViewModel = new AppViewModel(Appearance.getColorScheme() as string); |
| 25 | + viewModel: AppViewModel = new AppViewModel() |
| 26 | + commonViewModel: CommonViewModel = new CommonViewModel(Appearance.getColorScheme() as string) |
41 | 27 |
|
42 | 28 | constructor(props: AppProps | Readonly<AppProps>) { |
43 | | - super(props); |
| 29 | + super(props) |
44 | 30 | this.state = { |
45 | | - avaxPrice: 0, |
46 | 31 | backgroundStyle: {}, |
47 | | - mnemonic: "", |
48 | | - walletCAddress: "", |
49 | | - walletEvmAddress: "", |
50 | 32 | isDarkMode: false, |
51 | | - externalAddressesX: [], |
52 | | - externalAddressesP: [], |
53 | | - addressC: "", |
54 | | - availableX: "", |
55 | | - }; |
| 33 | + selectedView: SelectedView.Login, |
| 34 | + } |
56 | 35 | } |
57 | 36 |
|
58 | 37 | componentWillUnmount() { |
59 | | - console.log("componentWillUnmount"); |
60 | 38 | } |
| 39 | + |
61 | 40 | componentDidMount() { |
62 | | - console.log("componentDidMount"); |
63 | | - this.viewModel.onComponentMount(); |
| 41 | + this.commonViewModel.isDarkMode.subscribe(value => { |
| 42 | + this.setState({isDarkMode: value}) |
| 43 | + }) |
| 44 | + this.commonViewModel.backgroundStyle.subscribe(value => { |
| 45 | + this.setState({backgroundStyle: value}) |
| 46 | + }) |
| 47 | + |
| 48 | + this.viewModel.onComponentMount() |
| 49 | + |
| 50 | + this.viewModel.selectedView.subscribe(value => { |
| 51 | + this.setState({selectedView: value}) |
| 52 | + }) |
64 | 53 |
|
65 | | - this.viewModel.avaxPrice.subscribe(value => { |
66 | | - this.setState({avaxPrice: value}); |
67 | | - }); |
68 | | - this.setState({mnemonic: this.viewModel.mnemonic}); |
69 | | - this.viewModel.walletCAddress.subscribe(value => { |
70 | | - this.setState({walletCAddress: value}); |
71 | | - }); |
72 | | - this.viewModel.walletEvmAddrBech.subscribe(value => { |
73 | | - this.setState({walletEvmAddress: value}); |
74 | | - }); |
75 | | - this.viewModel.isDarkMode.subscribe(value => { |
76 | | - this.setState({isDarkMode: value}); |
77 | | - }); |
78 | | - this.viewModel.backgroundStyle.subscribe(value => { |
79 | | - this.setState({backgroundStyle: value}); |
80 | | - }); |
81 | | - this.viewModel.externalAddressesX.subscribe(value => { |
82 | | - this.setState({externalAddressesX: value}); |
83 | | - }); |
84 | | - this.viewModel.externalAddressesP.subscribe(value => { |
85 | | - this.setState({externalAddressesP: value}); |
86 | | - }); |
87 | | - this.viewModel.addressC.subscribe(value => { |
88 | | - this.setState({addressC: value}); |
89 | | - }); |
90 | | - this.viewModel.availableX.subscribe(value => { |
91 | | - this.setState({availableX: value}); |
92 | | - }); |
93 | 54 | } |
94 | | - render() { |
95 | | - console.log("render"); |
96 | 55 |
|
97 | | - const sectionListData = [ |
98 | | - { |
99 | | - title: "Avax Price", |
100 | | - data: ["$" + this.state.avaxPrice], |
101 | | - }, |
102 | | - { |
103 | | - title: "Mnemonic", |
104 | | - data: [this.state.mnemonic], |
105 | | - }, |
106 | | - { |
107 | | - title: "External addresses X", |
108 | | - data: [this.state.externalAddressesX], |
109 | | - }, |
110 | | - { |
111 | | - title: "External addresses P", |
112 | | - data: [this.state.externalAddressesP], |
113 | | - }, |
114 | | - { |
115 | | - title: "External addresses C", |
116 | | - data: [this.state.addressC], |
117 | | - }, |
118 | | - { |
119 | | - title: "Available (X)", |
120 | | - data: [this.state.availableX], |
121 | | - }, |
122 | | - ]; |
| 56 | + onEnterWallet(mnemonic: string): void { |
| 57 | + this.viewModel.onEnterWallet(mnemonic) |
| 58 | + } |
| 59 | + |
| 60 | + getSelectedView(): Element { |
| 61 | + switch (this.state.selectedView) { |
| 62 | + case SelectedView.CreateWallet: |
| 63 | + return <CreateWallet |
| 64 | + onSavedMyPhrase={mnemonic => this.onEnterWallet(mnemonic)} |
| 65 | + onClose={() => this.viewModel.setSelectedView(SelectedView.Onboard)}/> |
| 66 | + case SelectedView.Onboard: |
| 67 | + return <Onboard |
| 68 | + onAlreadyHaveWallet={() => this.viewModel.setSelectedView(SelectedView.Login)} |
| 69 | + onCreateWallet={() => this.viewModel.setSelectedView(SelectedView.CreateWallet)}/> |
| 70 | + case SelectedView.Login: |
| 71 | + return <Login |
| 72 | + onEnterWallet={mnemonic => this.onEnterWallet(mnemonic)} |
| 73 | + onClose={() => this.viewModel.setSelectedView(SelectedView.Onboard)}/> |
| 74 | + case SelectedView.Main: |
| 75 | + if (this.viewModel.wallet === null) throw Error("Wallet not defined") |
| 76 | + return <MainView wallet={this.viewModel.wallet} onLogout={() => this.viewModel.onLogout()}/> |
| 77 | + } |
| 78 | + } |
| 79 | + |
| 80 | + render() { |
123 | 81 | return ( |
124 | 82 | <SafeAreaView style={this.state.backgroundStyle}> |
125 | 83 | <StatusBar |
126 | 84 | barStyle={this.state.isDarkMode ? "light-content" : "dark-content"} |
127 | 85 | /> |
128 | | - <Clock /> |
129 | | - <Header /> |
130 | | - <SectionList |
131 | | - sections={sectionListData} |
132 | | - renderItem={({item}) => ( |
133 | | - <Text |
134 | | - style={[ |
135 | | - styles.item, |
136 | | - {color: this.state.isDarkMode ? Colors.light : Colors.dark}, |
137 | | - ]}> |
138 | | - {item} |
139 | | - </Text> |
140 | | - )} |
141 | | - renderSectionHeader={({section}) => ( |
142 | | - <Text style={styles.sectionHeader}>{section.title}</Text> |
143 | | - )} |
144 | | - keyExtractor={(item, index) => index} |
145 | | - /> |
146 | | - <Button |
147 | | - title={"Reset Hd indices"} |
148 | | - onPress={() => this.viewModel.onResetHdIndices()} |
149 | | - /> |
| 86 | + {this.getSelectedView()} |
150 | 87 | </SafeAreaView> |
151 | | - ); |
| 88 | + ) |
152 | 89 | } |
153 | 90 | } |
154 | | -const styles = StyleSheet.create({ |
155 | | - container: { |
156 | | - flex: 1, |
157 | | - paddingTop: 22, |
158 | | - }, |
159 | | - sectionHeader: { |
160 | | - paddingTop: 2, |
161 | | - paddingLeft: 10, |
162 | | - paddingRight: 10, |
163 | | - paddingBottom: 2, |
164 | | - fontSize: 14, |
165 | | - fontWeight: "bold", |
166 | | - backgroundColor: "rgba(247,247,247,1.0)", |
167 | | - }, |
168 | | - item: { |
169 | | - padding: 10, |
170 | | - fontSize: 18, |
171 | | - height: 44, |
172 | | - }, |
173 | | -}); |
174 | | -export default App; |
| 91 | + |
| 92 | +export default App |
0 commit comments