· 7 months ago · Feb 24, 2025, 09:55 AM
1import React, { useEffect } from 'react';
2import { Dimensions, Image, Pressable, StyleSheet, Text, View } from 'react-native';
3
4// Components
5import AddNewAccount from './AddNewAccount';
6// import InvestmentTips from './InvestmentTips';
7import NetWorthHistory from './NetWorthHistory';
8import TableChart from './TableChart';
9import TableCha from './TableCHa';
10
11//Redux
12import { useSelector } from 'react-redux';
13import { selectConfigTheme, selectShowBalance } from '../../../store/slices/utilsSlice';
14import { selectAccountsListIsEmpty } from '../../../store/slices/accountSlice';
15
16// Utils
17import { abbreviateScalingNumber, currencyFormatter } from '../../../utils';
18import { ConfigColors } from '../../../utils/types';
19import { TotalInfo } from '../home.types';
20import Dashboard from '../screens/Dashboard';
21//Languages
22import { useTranslation } from '../../../context/language_context';
23import { selectCredentialProvidersData, selectUserPermissions, selectUserRoleType } from '../../../store/slices/userSlice';
24import { RoleType } from '../../../constants/enums';
25import { UserPermissions } from '../../../services/remote/backup/enums';
26import { TouchableOpacity } from 'react-native-gesture-handler';
27import ECCModule from '../../../services/local/crypto/ECC_Module';
28import { AESDecryptObject, AESEncryptObject } from '../../../services/local/crypto/aes.functions';
29const { height } = Dimensions.get('window');
30
31type Props = {
32 navigation: any;
33 totalInfo: TotalInfo;
34};
35const DashboardBody: React.FC<Props> = ({ navigation, totalInfo }) => {
36 const { t } = useTranslation();
37 const userPermissions = useSelector(selectUserPermissions);
38 const schemaColor = useSelector(selectConfigTheme);
39 const colors = schemaColor.colorSchema.colors;
40 const accountsListIsEmpty = useSelector(selectAccountsListIsEmpty);
41 const assetsNumber = totalInfo.totalAssets;
42 const lipNumber = totalInfo.totalLib;
43 // const token = useSelector(selectToken);
44 // const ap = async () => {
45 // const userId = '65679a0e764b5025ad189bf0';
46 // console.log(token);
47 // if (token) {
48 // // const s = await moneyHubExchangeCode({
49 // // token,
50 // // code: 'uqZPXUz3eVWg4P6kpWUKKxw8ap8BqFSoB8s_UMt0UkP',
51 // // idToken:
52 // // 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlRxVk1laV9XdUtqZW5HWlJUbnJpeUxXRnZuS2tzTjNvLWFuWXBqS0JEbVUifQ.eyJzdWIiOiI2NTY3NDE0ZGQwYmZjZDMzYTgxY2M0MjciLCJub25jZSI6ImJhciIsImNfaGFzaCI6ImNjUllmaTBKZDczQ3dobVFoT0Jhc3ciLCJzX2hhc2giOiJMQ2EwYTJqX3hvXzVtMFU4SFRCQk5BIiwiYXVkIjoiYzQzNjJmNTQtMDEwZS00ZWI2LTk2MDktNjI1OTMwOWUxN2U1IiwiZXhwIjoxNzAxMjY5MzUyLCJpYXQiOjE3MDEyNjU3NTIsImlzcyI6Imh0dHBzOi8vaWRlbnRpdHkubW9uZXlodWIuY28udWsvb2lkYyJ9.VtJfPDfWGyu5rWtTkITK9bERNLhfrVyCif7-kTEsSJWkQOT0HSjCSURsWe4ft1EODAjEO3aSHTGPN0zYiatIfmJ6j0PGoPc3V9vdgA9HMjPI3RLLC489iYuX8thSXmsB7uQB9mRFmGUTfOLi6zhrhE8qvVtzc4W7yVgw32ud-jjPERm-CxSIQ8LVFkFQjvjJFKw7KFedfVyyPH9bLWkIT_a6YJ5acLFEoWacSNQBR5J_Kof39riEJfsy8jPYXQQiMu3cVM--6AVZWdxEm2eg9DNR94fk92yhbB31yqNyUGQUxaWA3fzoldEAeN2SxytURCdLy0gOZr_V0tSx8dnaAw',
53 // // });
54 // console.log('click');
55 // // const s = await moneyHubExchangeCode({
56 // // token,
57 // // code: 'IC7jPCYo9vUxEnb4KIFPHqzSInhwgByqrYdtzrszlZQ',
58 // // idToken:
59 // // 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlRxVk1laV9XdUtqZW5HWlJUbnJpeUxXRnZuS2tzTjNvLWFuWXBqS0JEbVUifQ.eyJzdWIiOiI2NTY4NWNiNWYxMWRiY2Q0ZjBlNTg0ZWMiLCJub25jZSI6ImJhciIsImNfaGFzaCI6InpleFZpTnk0SnROSmRpWUhDSk5yU3ciLCJzX2hhc2giOiJMQ2EwYTJqX3hvXzVtMFU4SFRCQk5BIiwiYXVkIjoiYzQzNjJmNTQtMDEwZS00ZWI2LTk2MDktNjI1OTMwOWUxN2U1IiwiZXhwIjoxNzAxMzQxOTAyLCJpYXQiOjE3MDEzMzgzMDIsImlzcyI6Imh0dHBzOi8vaWRlbnRpdHkubW9uZXlodWIuY28udWsvb2lkYyJ9.V1F_uEaRPCIj9XwLqq94CooMV5sLjRprSK9uCJakUfFgaFyWD8NoRg_qn8Q7NaJmU2vlp6yfDZS133u6Bk36gSN4vGCbBDV4oY9PD7Z5doAsUELg3UEPRpWQv09uK-cZPqhE9o0fMMN_xGl6WzoF-KZq-FtlPTRWLmoMJNIj3p13clqXfXfYVU8OP63jpMN9hVDRQUvG4DLSSL0lurHfuOCIfitgGCX1f0Izjyk09jB1HlyiCWSBvCaHB3afG_4PF4OXP9ggNiF4f0RXwVQvuxumQ4ZAwpFT_4uu0ynMYE-6dbUSXIEvruX65sQh307BV-7NmpdxNMbY9CVFEwZ4ZA',
60 // // });
61 // const s = await moneyHubGetAccounts({userId, token});
62 // console.log(s);
63 // }
64 // };
65
66 const showBalance = useSelector(selectShowBalance);
67
68 //encryption shenanigans
69 const { keysPair } =
70 useSelector(selectCredentialProvidersData);
71 //console.log("client keysPair "+JSON.stringify(keysPair)); //uncomment to use yours
72
73 const clientKeypair = {
74 publicKey: "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE+91/PKCpfXC2nvwyTWX7cu989MdBSbMVIZVv0gByo6QczJRMQ57LNcn2gmJw8SKfpQ+P+/0ZW+Dn+YKzC/njzQ==",
75 privateKey: "MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgZIGRjt4gm4Z2Ta5+nXAzz1OX0JwzoERcJ64+cYEFJbShRANCAAT73X88oKl9cLae/DJNZfty73z0x0FJsxUhlW/SAHKjpBzMlExDnss1yfaCYnDxIp+lD4/7/Rlb4Of5grML+ePN"
76 }
77
78 //function to generate and log key pairs
79 async function generateKeyPairs() {
80 const keysPair = await ECCModule.generateKeyPair();
81 console.log("keysPair "+JSON.stringify(keysPair));
82 }
83
84 // you can use these or replace with what you got by clicking generate receipient keypairs:
85 const advisorsKeyPair={
86 publicKey: "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEJE5N6SaWkpWui4iZnwnWGkpBPsXwTTSdxNWqPE3xf1QU+7iCTRQ8U4uwclcRUlLLJhZo0Ypird/8JlGYijqWjA==",
87 privateKey: "MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgK4a+g04BGWHCcaOUXNzK/jyZ/n7fJ9HDUMDUl+GIcuqhRANCAAQkTk3pJpaSla6LiJmfCdYaSkE+xfBNNJ3E1ao8TfF/VBT7uIJNFDxTi7ByVxFSUssmFmjRimKt3/wmUZiKOpaM"
88 }
89
90 //obj to be encrypted
91 const block = {
92 enc_blockData: '{"name":"John Doe","age":25,"city":"New York"}',
93 blockHash: "0x1234567890",
94 blockId: "0x1234567890",
95 blockType: "user",
96 createTime: 1633700000000,
97 itemId: "0x1234567890",
98 lastSyncTime: 1633700000000,
99 userId: "0x1234567890"
100 }
101
102 // function to encrypt data
103 async function encryptData() {
104
105 const sharedKey = await ECCModule.deriveSharedSecret(
106 clientKeypair.privateKey,
107 clientKeypair.publicKey,
108 // advisorsKeyPair.publicKey
109 );
110
111 const encryptedData = AESEncryptObject({
112 plainObject: JSON.parse(block.enc_blockData), // Ensure it’s parsed back to an object
113 secretKey: sharedKey,
114 });
115 console.log("encryptedData "+JSON.stringify(encryptedData));
116 }
117
118 const theEncryptedData = "U2FsdGVkX1+ci/ttOX6C3KQCXjn2fjwy1Yy3U09ZqMuUclNjxaQQWTCxl/e5SeLnCCbVJCvXSM0+LahT9KIXjA=="
119 // function to decrypt data
120 async function decryptData(encryptedData:any) {
121 const sharedKey = await ECCModule.deriveSharedSecret(
122 clientKeypair.privateKey,
123 // advisorsKeyPair.privateKey,
124 clientKeypair.publicKey
125
126 );
127
128 const decryptedData = AESDecryptObject({
129 cipherText: encryptedData,
130 secretKey: sharedKey,
131 });
132 console.log("decryptedData " + JSON.stringify(decryptedData));
133
134 }
135
136
137 return (
138 <View style={styles(colors).container}>
139 <Pressable
140 style={styles(colors).card}
141 // onPress={ap}
142 onPress={() => navigation.navigate('Analytic', { screen: 'Assets' })}
143 >
144 <Text style={styles(colors).textHeader}>{t.dashboard.body.dashboardCard.assets}</Text>
145 {showBalance ? (
146 <Text style={styles(colors).textBody}>
147 {totalInfo.currency} {/* {currencyFormatter(totalInfo.totalAssets) ?? 500} */}
148 {abbreviateScalingNumber(assetsNumber, false)}
149 </Text>
150 ) : (
151 <Text style={styles(colors).textBody}>{totalInfo.currency} xxxxxx</Text>
152 )}
153 </Pressable>
154 <Pressable
155 style={styles(colors).card}
156 onPress={() => navigation.navigate('Analytic', { screen: 'Liabilities' })}
157 >
158 <Text style={styles(colors).textHeader}>{t.dashboard.body.dashboardCard.liabilities}</Text>
159 {showBalance ? (
160 <Text style={styles(colors).textBody}>
161 {/* {totalInfo.currency} {currencyFormatter(totalInfo.totalLib) ?? 500} */}
162 {totalInfo.currency} {abbreviateScalingNumber(lipNumber, false)}
163 </Text>
164 ) : (
165 <Text style={styles(colors).textBody}>{totalInfo.currency} xxxxxx</Text>
166 )}
167 </Pressable>
168 {userPermissions.find((i) => i === UserPermissions.Write) && (
169 <AddNewAccount navigation={navigation} />
170 )}
171
172 {/* generate keypairs */}
173 <TouchableOpacity
174 style={styles(colors).container}
175 onPress={() => {
176 generateKeyPairs();
177 }}
178 >
179 <Text style={styles(colors).title}>Generate receipient keypairs-only click once then save from log</Text>
180 </TouchableOpacity>
181 {/* a simple pressable with the text 'encrypt' inside and when pressed should simply log ('encrypted') */
182 }
183 <TouchableOpacity
184 style={styles(colors).container}
185 onPress={() => {
186 encryptData();
187 }}
188 >
189 <Text style={styles(colors).title}>Encrypt</Text>
190 </TouchableOpacity>
191
192 {/* //for decrypting */}
193 <TouchableOpacity
194 style={styles(colors).container}
195 onPress={() => {
196 decryptData(theEncryptedData);
197 }}
198 >
199 <Text style={styles(colors).title}>Decrypt</Text>
200 </TouchableOpacity>
201
202 {/* <CachedImage
203 source=
204 'https://naiyas.com/wp-content/uploads/2023/11/icon-other-main.png'
205
206 style={{ height: 350, width: 150 }}
207 /> */}
208 {accountsListIsEmpty ? (
209 <Image
210 style={{ alignSelf: 'center', marginVertical: 64 }}
211 source={require('../../../assets/images/no_data.png')}
212 />
213 ) : (
214 <>
215 <TableCha />
216 {/* <TableChart /> */}
217 <NetWorthHistory />
218 </>
219 )}
220 {/* <View style={[styles(colors).card, { marginVertical: 10 }]}>
221 <Text style={styles.title}>Debt to Equity Ratio</Text>
222 <View
223 style={{
224 flexDirection: 'row',
225 alignItems: 'center',
226 justifyContent: 'space-between',
227 width: width * 0.25,
228 }}
229 >
230 <Text style={{ fontSize: 20, color: 'black' }}>2.2</Text>
231 <FeatherIcon name="arrow-down-right" size={20} color="green" />
232 <FeatherIcon name="info" size={20} color={COLORS.Primary} />
233 </View>
234 </View> */}
235 {/* <InvestmentTips /> */}
236 </View>
237 );
238};
239
240const styles = (colors: ConfigColors) =>
241 StyleSheet.create({
242 textHeader: { fontSize: 16, fontWeight: '700' },
243 container: {
244 paddingHorizontal: 20,
245 marginTop: height * 0.07,
246 // alignItems: 'center',
247 },
248 textBody: {
249 fontSize: 16,
250 fontWeight: '600',
251 color: colors.primary.light[0],
252 },
253 card: {
254 width: Dimensions.get('window').width * 0.9,
255 marginTop: 16,
256 backgroundColor: 'white',
257 paddingHorizontal: 10,
258 paddingVertical: 16,
259 borderRadius: 5,
260 flexDirection: 'row',
261 justifyContent: 'space-between',
262 alignItems: 'center',
263 shadowColor: '#000000',
264 shadowOffset: {
265 width: 1,
266 height: 6,
267 },
268 shadowOpacity: 0.21,
269 shadowRadius: 6.65,
270 elevation: 9,
271 },
272 title: {
273 fontSize: 16,
274 color: colors.mainText.light[0],
275 },
276 });
277
278export default DashboardBody;
279