@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
364 lines (363 loc) • 12.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _OxyContext = require("../../context/OxyContext");
var _fonts = require("../../styles/fonts");
var _Avatar = _interopRequireDefault(require("../../components/Avatar"));
var _vectorIcons = require("@expo/vector-icons");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const KarmaCenterScreen = ({
onClose,
theme,
navigate,
goBack
}) => {
const {
user,
oxyServices
} = (0, _OxyContext.useOxy)();
const [karmaTotal, setKarmaTotal] = (0, _react.useState)(null);
const [karmaHistory, setKarmaHistory] = (0, _react.useState)([]);
const [isLoading, setIsLoading] = (0, _react.useState)(true);
const [error, setError] = (0, _react.useState)(null);
const isDarkTheme = theme === 'dark';
const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
const primaryColor = '#d169e5';
(0, _react.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 (!user) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.container, {
backgroundColor
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.message, {
color: textColor
}],
children: "Not signed in"
})
});
}
if (isLoading) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.container, {
backgroundColor,
justifyContent: 'center'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "large",
color: primaryColor
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.container, {
backgroundColor
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
style: styles.scrollView,
contentContainerStyle: styles.scrollContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.walletHeader,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
uri: user.avatar?.url,
name: user.username,
size: 60,
theme: theme,
style: styles.avatar
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.karmaLabel, {
color: isDarkTheme ? '#BBBBBB' : '#888888'
}],
children: "Karma Balance"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.karmaAmount, {
color: primaryColor
}],
children: karmaTotal ?? 0
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.actionRow,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaLeaderboard'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.actionIcon, {
backgroundColor: '#E0E0E0'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "trophy-outline",
size: 28,
color: "#888"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.actionLabel,
children: "Leaderboard"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaRules'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.actionIcon, {
backgroundColor: '#E0E0E0'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "document-text-outline",
size: 28,
color: "#888"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.actionLabel,
children: "Rules"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('AboutKarma'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.actionIcon, {
backgroundColor: '#E0E0E0'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "star-outline",
size: 28,
color: "#888"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.actionLabel,
children: "About"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaRewards'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.actionIcon, {
backgroundColor: '#E0E0E0'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "gift-outline",
size: 28,
color: "#888"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.actionLabel,
children: "Rewards"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.actionIconWrapper,
onPress: () => navigate && navigate('KarmaFAQ'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.actionIcon, {
backgroundColor: '#E0E0E0'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "help-circle-outline",
size: 28,
color: "#888"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.actionLabel,
children: "FAQ"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.infoText,
children: "Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly."
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.sectionTitle, {
color: textColor
}],
children: "Karma History"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.historyContainer,
children: karmaHistory.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
color: textColor,
textAlign: 'center',
marginTop: 16
},
children: "No karma history yet."
}) : karmaHistory.map(entry => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.historyItem, {
borderColor
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: [styles.historyPoints, {
color: entry.points > 0 ? primaryColor : '#D32F2F'
}],
children: [entry.points > 0 ? '+' : '', entry.points]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.historyDesc, {
color: textColor
}],
children: entry.reason || 'No description'
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.historyDate, {
color: isDarkTheme ? '#BBBBBB' : '#888888'
}],
children: entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''
})]
}, entry.id))
}), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
color: '#D32F2F',
marginTop: 16,
textAlign: 'center'
},
children: error
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.footer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.closeButton,
onPress: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.closeButtonText, {
color: primaryColor
}],
children: "Close"
})
})
})]
});
};
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1
},
scrollView: {
flex: 1
},
scrollContainer: {
padding: 0,
alignItems: 'center'
},
walletHeader: {
alignItems: 'center',
paddingTop: 36,
paddingBottom: 24,
width: '100%',
backgroundColor: 'transparent'
},
avatar: {
marginBottom: 12
},
karmaLabel: {
fontSize: 16,
marginBottom: 4,
fontFamily: _fonts.fontFamilies.phudu
},
karmaAmount: {
fontSize: 48,
fontWeight: 'bold',
marginBottom: 18,
fontFamily: _fonts.fontFamilies.phuduBold
},
actionRow: {
flexDirection: 'row',
justifyContent: 'center',
marginBottom: 18,
flexWrap: 'wrap',
rowGap: 0,
columnGap: 0
},
actionIconWrapper: {
alignItems: 'center',
marginHorizontal: 8,
marginVertical: 4,
width: 72
},
actionIcon: {
width: 56,
height: 56,
borderRadius: 28,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 6,
opacity: 0.5
},
actionIconText: {
fontSize: 28
},
actionLabel: {
fontSize: 13,
color: '#888'
},
infoText: {
fontSize: 13,
color: '#888',
textAlign: 'center',
marginTop: 8,
marginBottom: 8,
maxWidth: 320
},
sectionTitle: {
fontSize: 18,
fontWeight: '600',
marginBottom: 12,
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
},
footer: {
padding: 16,
borderTopWidth: 1,
borderTopColor: '#E0E0E0',
alignItems: 'center'
},
closeButton: {
paddingVertical: 8,
paddingHorizontal: 16
},
closeButtonText: {
fontSize: 16,
fontWeight: '600'
},
message: {
fontSize: 16,
textAlign: 'center',
marginTop: 24
}
});
var _default = exports.default = KarmaCenterScreen;
//# sourceMappingURL=KarmaCenterScreen.js.map