@oxyhq/services
Version:
351 lines (349 loc) • 11.6 kB
JavaScript
"use strict";
import { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Platform } from 'react-native';
import { fontFamilies } from "../../styles/fonts.js";
import { Ionicons } from '@expo/vector-icons';
import { useI18n } from "../../hooks/useI18n.js";
import { useThemeStyles } from "../../hooks/useThemeStyles.js";
import { useColorScheme } from "../../hooks/useColorScheme.js";
import { darkenColor } from "../../utils/colorUtils.js";
import { useOxy } from "../../context/OxyContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const KarmaCenterScreen = ({
theme,
navigate,
goBack
}) => {
// Use useOxy() hook for OxyContext values
const {
user,
oxyServices,
isAuthenticated
} = useOxy();
const {
t
} = useI18n();
const [karmaTotal, setKarmaTotal] = useState(null);
const [karmaHistory, setKarmaHistory] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const colorScheme = useColorScheme();
const themeStyles = useThemeStyles(theme || 'light', colorScheme);
// Override primaryColor for Karma screens (purple instead of blue)
const primaryColor = '#d169e5';
const dangerColor = themeStyles.dangerColor || '#D32F2F';
const mutedTextColor = themeStyles.isDarkTheme ? '#BBBBBB' : '#888888';
// Icon colors from theme
const iconLeaderboard = themeStyles.colors.iconPayments;
const iconRules = themeStyles.colors.iconSecurity;
const iconAbout = themeStyles.colors.iconPayments;
const iconRewards = themeStyles.colors.iconStorage;
const iconFAQ = themeStyles.colors.iconPersonalInfo;
useEffect(() => {
if (!user) return;
setIsLoading(true);
setError(null);
Promise.all([oxyServices.getUserKarmaTotal(user.id), oxyServices.getUserKarmaHistory(user.id, 20, 0)]).then(([totalRes, historyRes]) => {
setKarmaTotal(totalRes.total);
setKarmaHistory(Array.isArray(historyRes.history) ? historyRes.history : []);
}).catch(err => {
setError(err.message || 'Failed to load karma data');
}).finally(() => setIsLoading(false));
}, [user]);
if (!isAuthenticated) {
return /*#__PURE__*/_jsx(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: /*#__PURE__*/_jsx(Text, {
style: [styles.message, {
color: themeStyles.textColor
}],
children: t('common.status.notSignedIn') || 'Not signed in'
})
});
}
if (isLoading) {
return /*#__PURE__*/_jsx(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor,
justifyContent: 'center'
}],
children: /*#__PURE__*/_jsx(ActivityIndicator, {
size: "large",
color: primaryColor
})
});
}
return /*#__PURE__*/_jsx(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: /*#__PURE__*/_jsxs(ScrollView, {
style: styles.scrollView,
contentContainerStyle: styles.scrollContainer,
children: [/*#__PURE__*/_jsxs(View, {
style: styles.walletHeader,
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.karmaAmount, {
color: primaryColor
}],
children: karmaTotal ?? 0
}), /*#__PURE__*/_jsx(Text, {
style: [styles.karmaLabel, {
color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888'
}],
children: t('karma.center.balance') || 'Karma Balance'
}), /*#__PURE__*/_jsxs(View, {
style: styles.actionContainer,
children: [/*#__PURE__*/_jsxs(View, {
style: styles.actionRow,
children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaLeaderboard'),
children: [/*#__PURE__*/_jsx(View, {
style: [styles.actionIcon, {
backgroundColor: iconLeaderboard
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: "trophy-outline",
size: 28,
color: darkenColor(iconLeaderboard)
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.actionLabel, {
color: mutedTextColor
}],
children: t('karma.center.actions.leaderboard') || 'Leaderboard'
})]
}), /*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaRules'),
children: [/*#__PURE__*/_jsx(View, {
style: [styles.actionIcon, {
backgroundColor: iconRules
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: "document-text-outline",
size: 28,
color: darkenColor(iconRules)
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.actionLabel, {
color: mutedTextColor
}],
children: t('karma.center.actions.rules') || 'Rules'
})]
}), /*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('AboutKarma'),
children: [/*#__PURE__*/_jsx(View, {
style: [styles.actionIcon, {
backgroundColor: iconAbout
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: "star-outline",
size: 28,
color: darkenColor(iconAbout)
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.actionLabel, {
color: mutedTextColor
}],
children: t('karma.center.actions.about') || 'About'
})]
})]
}), /*#__PURE__*/_jsxs(View, {
style: styles.actionRow,
children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaRewards'),
children: [/*#__PURE__*/_jsx(View, {
style: [styles.actionIcon, {
backgroundColor: iconRewards
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: "gift-outline",
size: 28,
color: darkenColor(iconRewards)
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.actionLabel, {
color: mutedTextColor
}],
children: t('karma.center.actions.rewards') || 'Rewards'
})]
}), /*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaFAQ'),
children: [/*#__PURE__*/_jsx(View, {
style: [styles.actionIcon, {
backgroundColor: iconFAQ
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: "help-circle-outline",
size: 28,
color: darkenColor(iconFAQ)
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.actionLabel, {
color: mutedTextColor
}],
children: t('karma.center.actions.faq') || 'FAQ'
})]
})]
})]
}), /*#__PURE__*/_jsx(Text, {
style: [styles.infoText, {
color: mutedTextColor
}],
children: t('karma.center.info') || 'Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'
})]
}), /*#__PURE__*/_jsx(Text, {
style: [styles.sectionTitle, {
color: themeStyles.textColor
}],
children: t('karma.center.history') || 'Karma History'
}), /*#__PURE__*/_jsx(View, {
style: styles.historyContainer,
children: karmaHistory.length === 0 ? /*#__PURE__*/_jsx(Text, {
style: {
color: themeStyles.textColor,
textAlign: 'center',
marginTop: 16
},
children: t('karma.center.noHistory') || 'No karma history yet.'
}) : karmaHistory.map(entry => /*#__PURE__*/_jsxs(View, {
style: [styles.historyItem, {
borderColor: themeStyles.borderColor
}],
children: [/*#__PURE__*/_jsxs(Text, {
style: [styles.historyPoints, {
color: entry.points > 0 ? primaryColor : dangerColor
}],
children: [entry.points > 0 ? '+' : '', entry.points]
}), /*#__PURE__*/_jsx(Text, {
style: [styles.historyDesc, {
color: themeStyles.textColor
}],
children: entry.reason || t('karma.center.noDescription') || 'No description'
}), /*#__PURE__*/_jsx(Text, {
style: [styles.historyDate, {
color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888'
}],
children: entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''
})]
}, entry.id))
}), error && /*#__PURE__*/_jsx(Text, {
style: {
color: dangerColor,
marginTop: 16,
textAlign: 'center'
},
children: error
})]
})
});
};
const styles = StyleSheet.create({
container: {
flex: 1
},
scrollView: {
flex: 1
},
scrollContainer: {
padding: 0,
alignItems: 'center'
},
walletHeader: {
alignItems: 'center',
paddingTop: 36,
paddingBottom: 24,
width: '100%',
backgroundColor: 'transparent'
},
karmaLabel: {
fontSize: 16,
marginBottom: 18,
fontFamily: fontFamilies.inter
},
karmaAmount: {
fontSize: 48,
fontWeight: 'bold',
marginBottom: 4,
fontFamily: fontFamilies.inter
},
actionContainer: {
marginBottom: 18,
gap: 8
},
actionRow: {
flexDirection: 'row',
justifyContent: 'center',
gap: 2
},
actionIconWrapper: {
alignItems: 'center',
width: 72
},
actionIcon: {
width: 56,
height: 56,
borderRadius: 28,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 6
},
actionIconText: {
fontSize: 28
},
actionLabel: {
fontSize: 10
},
infoText: {
fontSize: 13,
textAlign: 'center',
marginTop: 8,
marginBottom: 8,
maxWidth: 320
},
sectionTitle: {
fontSize: 18,
fontWeight: Platform.OS === 'web' ? '600' : undefined,
fontFamily: fontFamilies.interSemiBold,
marginTop: 8,
alignSelf: 'flex-start',
marginLeft: 24
},
historyContainer: {
borderRadius: 15,
overflow: 'hidden',
marginBottom: 20,
width: '100%',
paddingHorizontal: 12
},
historyItem: {
padding: 14,
borderBottomWidth: 1
},
historyPoints: {
fontSize: 16,
fontWeight: '700'
},
historyDesc: {
fontSize: 15,
marginTop: 2
},
historyDate: {
fontSize: 13,
marginTop: 2
},
message: {
fontSize: 16,
textAlign: 'center',
marginTop: 24
}
});
export default KarmaCenterScreen;
//# sourceMappingURL=KarmaCenterScreen.js.map