@oxy.so/services 1.0.0 → 1.0.2

package/lib/typescript/module/ui/index.d.ts

@@ -20,7 +20,12 @@ export { LogoText } from './components/logo/LogoText.js';
 export { RequireOxyAuth } from './components/RequireOxyAuth.js';
 export type { RequireOxyAuthProps, RequireOxyAuthPrompt } from './components/RequireOxyAuth.js';
 export { default as FollowButton } from './components/FollowButton.js';
+export { default as PeableButton } from './components/PeableButton.js';
+export type { PeableButtonProps } from './components/PeableButton.js';
+/** @deprecated Use `PeableButton` instead. */
 export { default as OxyPayButton } from './components/OxyPayButton.js';
+/** @deprecated Use `PeableButtonProps` instead. */
+export type { OxyPayButtonProps } from './components/OxyPayButton.js';
 export { default as ProfileButton } from './components/ProfileButton.js';
 export { useOxy, useOptionalOxy, OxyProviderMissingError } from './context/OxyContext.js';
 export { useAuth } from './hooks/useAuth.js';

package/lib/typescript/module/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iCAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA4B,CAAC;AACtE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA4B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA4B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gCAA6B,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA4B,CAAC;AAGtE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,yBAAsB,CAAC;AACvF,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAiB,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,sBAAmB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAoB,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AAM9E,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAoB,CAAC;AAGlD,OAAO,EACH,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACtB,MAAM,0BAAuB,CAAC;AAC/B,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iCAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA4B,CAAC;AACtE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA4B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA4B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gCAA6B,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA2B,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,8BAA2B,CAAC;AACnE,8CAA8C;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA2B,CAAC;AACpE,mDAAmD;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,8BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA4B,CAAC;AAGtE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,yBAAsB,CAAC;AACvF,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAiB,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,sBAAmB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAoB,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AAM9E,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAoB,CAAC;AAGlD,OAAO,EACH,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACtB,MAAM,0BAAuB,CAAC;AAC/B,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAAuB,CAAC"}

package/lib/typescript/module/ui/server.d.ts

@@ -12,6 +12,8 @@ export declare const OxySignInButton: () => null;
 export declare const LogoIcon: () => null;
 export declare const LogoText: () => null;
 export declare const FollowButton: () => null;
+export declare const PeableButton: () => null;
+/** @deprecated Use `PeableButton` instead. */
 export declare const OxyPayButton: () => null;
 export declare const useOxy: () => {};
 export declare const useAuth: () => {};

package/lib/typescript/module/ui/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../../src/ui/server.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,eAAO,MAAM,WAAW,YAAgB,CAAC;AACzC,eAAO,MAAM,eAAe,YAAgB,CAAC;AAC7C,eAAO,MAAM,QAAQ,YAAgB,CAAC;AACtC,eAAO,MAAM,QAAQ,YAAgB,CAAC;AACtC,eAAO,MAAM,YAAY,YAAgB,CAAC;AAC1C,eAAO,MAAM,YAAY,YAAgB,CAAC;AAG1C,eAAO,MAAM,MAAM,UAAW,CAAC;AAG/B,eAAO,MAAM,OAAO,UAAW,CAAC;AAChC,eAAO,MAAM,SAAS,UAAW,CAAC;AAClC,eAAO,MAAM,UAAU;;;CAA0B,CAAC;AAGlD,eAAO,MAAM,aAAa,YAAgB,CAAC;AAG3C,eAAO,MAAM,YAAY,UAAW,CAAC;AAGrC,eAAO,MAAM,KAAK;;;;;;;CAUjB,CAAC;AAGF,OAAO,EACH,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACtB,MAAM,0BAAuB,CAAC;AAC/B,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAAuB,CAAC"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../../src/ui/server.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,eAAO,MAAM,WAAW,YAAgB,CAAC;AACzC,eAAO,MAAM,eAAe,YAAgB,CAAC;AAC7C,eAAO,MAAM,QAAQ,YAAgB,CAAC;AACtC,eAAO,MAAM,QAAQ,YAAgB,CAAC;AACtC,eAAO,MAAM,YAAY,YAAgB,CAAC;AAC1C,eAAO,MAAM,YAAY,YAAgB,CAAC;AAC1C,8CAA8C;AAC9C,eAAO,MAAM,YAAY,YAAe,CAAC;AAGzC,eAAO,MAAM,MAAM,UAAW,CAAC;AAG/B,eAAO,MAAM,OAAO,UAAW,CAAC;AAChC,eAAO,MAAM,SAAS,UAAW,CAAC;AAClC,eAAO,MAAM,UAAU;;;CAA0B,CAAC;AAGlD,eAAO,MAAM,aAAa,YAAgB,CAAC;AAG3C,eAAO,MAAM,YAAY,UAAW,CAAC;AAGrC,eAAO,MAAM,KAAK;;;;;;;CAUjB,CAAC;AAGF,OAAO,EACH,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACtB,MAAM,0BAAuB,CAAC;AAC/B,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/services",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -163,7 +163,7 @@
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/core": "1.0.0",
+    "@oxy.so/core": "1.0.1",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^12.0.1",
     "@react-native/babel-preset": "^0.86.2",
@@ -215,7 +215,7 @@
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@oxy.so/bloom": "^1.0.0",
-    "@oxy.so/core": "1.0.0",
+    "@oxy.so/core": "^1.0.1",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": ">=11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",

package/src/index.ts

@@ -342,7 +342,12 @@ export {
   followRecordToStatus,
   followRecordsToStatusMap,
 } from './ui/stores/followTargetStore';
+export { default as PeableButton } from './ui/components/PeableButton';
+export type { PeableButtonProps } from './ui/components/PeableButton';
+/** @deprecated Use `PeableButton` instead. */
 export { default as OxyPayButton } from './ui/components/OxyPayButton';
+/** @deprecated Use `PeableButtonProps` instead. */
+export type { OxyPayButtonProps } from './ui/components/OxyPayButton';
 export { LogoIcon } from './ui/components/logo/LogoIcon';
 export { LogoText } from './ui/components/logo/LogoText';
 

package/src/ui/client.ts

@@ -16,7 +16,12 @@ export type { OxyAuthPromptProps } from './components/OxyAuthPrompt';
 export { LogoIcon } from './components/logo/LogoIcon';
 export { LogoText } from './components/logo/LogoText';
 export { default as FollowButton } from './components/FollowButton';
+export { default as PeableButton } from './components/PeableButton';
+export type { PeableButtonProps } from './components/PeableButton';
+/** @deprecated Use `PeableButton` instead. */
 export { default as OxyPayButton } from './components/OxyPayButton';
+/** @deprecated Use `PeableButtonProps` instead. */
+export type { OxyPayButtonProps } from './components/OxyPayButton';
 
 // Context
 export { useOxy, useOptionalOxy, OxyProviderMissingError } from './context/OxyContext';

package/src/ui/components/OxyPayButton.tsx

@@ -1,74 +1,9 @@
-import type React from 'react';
-import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
-import { useTheme } from '@oxy.so/bloom/theme';
-import { Button } from '@oxy.so/bloom/button';
-import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
-import { LogoIcon } from './logo/LogoIcon';
-
-export interface OxyPayButtonProps {
-    style?: StyleProp<ViewStyle>;
-    textStyle?: StyleProp<TextStyle>;
-    text?: string;
-    disabled?: boolean;
-    amount: number | string;
-    currency?: string;
-    paymentItems?: PaymentItem[];
-    description?: string;
-    onPaymentResult?: (result: PaymentGatewayResult) => void;
-    /**
-     * Button background color. If not provided, uses variant ('white' or 'black').
-     */
-    color?: string;
-    /**
-     * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
-     */
-    variant?: 'white' | 'black';
-}
-
 /**
- * A pre-styled button for OxyPay payments that opens the Payment Gateway
- * - Only black or white by default, but can be customized with the color prop.
+ * @deprecated Use `PeableButton` from `@oxy.so/services` or
+ * `@oxy.so/services/ui` instead. This compatibility export preserves the
+ * pre-Peable public component name for existing consumers.
  */
-const OxyPayButton: React.FC<OxyPayButtonProps> = ({
-    style,
-    textStyle,
-    text = 'Pay',
-    disabled = false,
-    color,
-    variant = 'white',
-}) => {
-    const theme = useTheme();
-    const handlePress = () => {
-        console.warn('OxyPayButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
-    };
-    // Determine background and text color
-    const backgroundColor = color || (variant === 'black' ? theme.colors.text : theme.colors.background);
-    const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
-
-    return (
-        <Button
-            variant="inverse"
-            onPress={handlePress}
-            disabled={disabled}
-            style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
-            textStyle={[{ color: textColor, fontWeight: '700' }, textStyle]}
-            icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
-        >
-            {text}
-        </Button>
-    );
-};
-
-// Helper to determine if a color is dark (simple luminance check)
-function isColorDark(hex: string) {
-    let c = hex.replace('#', '');
-    if (c.length === 3) c = c.split('').map(x => x + x).join('');
-    if (c.length !== 6) return false;
-    const r = Number.parseInt(c.substr(0, 2), 16);
-    const g = Number.parseInt(c.substr(2, 2), 16);
-    const b = Number.parseInt(c.substr(4, 2), 16);
-    // Perceived luminance
-    return (0.299 * r + 0.587 * g + 0.114 * b) < 150;
-}
+export { default } from './PeableButton';
 
-export default OxyPayButton;
+/** @deprecated Use `PeableButtonProps` instead. */
+export type { PeableButtonProps as OxyPayButtonProps } from './PeableButton';

package/src/ui/components/PeableButton.tsx

@@ -0,0 +1,74 @@
+import type React from 'react';
+import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Button } from '@oxy.so/bloom/button';
+import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
+import { LogoIcon } from './logo/LogoIcon';
+
+export interface PeableButtonProps {
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    text?: string;
+    disabled?: boolean;
+    amount: number | string;
+    currency?: string;
+    paymentItems?: PaymentItem[];
+    description?: string;
+    onPaymentResult?: (result: PaymentGatewayResult) => void;
+    /**
+     * Button background color. If not provided, uses variant ('white' or 'black').
+     */
+    color?: string;
+    /**
+     * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
+     */
+    variant?: 'white' | 'black';
+}
+
+/**
+ * A pre-styled button for Peable payments that opens the Payment Gateway
+ * - Only black or white by default, but can be customized with the color prop.
+ */
+const PeableButton: React.FC<PeableButtonProps> = ({
+    style,
+    textStyle,
+    text = 'Pay',
+    disabled = false,
+    color,
+    variant = 'white',
+}) => {
+    const theme = useTheme();
+    const handlePress = () => {
+        console.warn('PeableButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
+    };
+    // Determine background and text color
+    const backgroundColor = color || (variant === 'black' ? theme.colors.text : theme.colors.background);
+    const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
+
+    return (
+        <Button
+            variant="inverse"
+            onPress={handlePress}
+            disabled={disabled}
+            style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
+            textStyle={[{ color: textColor, fontWeight: '700' }, textStyle]}
+            icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
+        >
+            {text}
+        </Button>
+    );
+};
+
+// Helper to determine if a color is dark (simple luminance check)
+function isColorDark(hex: string) {
+    let c = hex.replace('#', '');
+    if (c.length === 3) c = c.split('').map(x => x + x).join('');
+    if (c.length !== 6) return false;
+    const r = Number.parseInt(c.substr(0, 2), 16);
+    const g = Number.parseInt(c.substr(2, 2), 16);
+    const b = Number.parseInt(c.substr(4, 2), 16);
+    // Perceived luminance
+    return (0.299 * r + 0.587 * g + 0.114 * b) < 150;
+}
+
+export default PeableButton;

package/src/ui/components/ProfileButton.tsx

@@ -266,10 +266,13 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
 
     // ── Expanded row animation ──────────────────────────────────────────────
     // On native everything is statically visible (no hover exists). On web we
-    // reproduce Bluesky's reveal: the row fills with a subtle contrast bg, the
-    // avatar shrinks + slides left, and the name/handle/chevron fade in. The
-    // negative left margin tucks the identity block under the shrunk avatar so
-    // it slides out from behind it as the avatar contracts.
+    // reproduce Bluesky's reveal: the row fills with a subtle contrast bg and
+    // the avatar shrinks + slides left. Bluesky also tucks the identity block
+    // under the avatar with a negative margin, because there the name is
+    // revealed only on hover and slides out from behind the shrinking avatar.
+    // Here the identity is ALWAYS visible in the expanded row, so that tuck
+    // was a permanent overlap: at the default 40px avatar the name started 8px
+    // under it (OxyHQ/Alia#546). The row's own gap is the whole spacing now.
     const reducedMotion = isWeb && prefersReducedMotion();
 
     // Slide the shrunk avatar left so its visual left edge stays put as it
@@ -306,11 +309,6 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
 
     // Expanded mode always shows identity + chevron (console/inbox wide sidebar).
     // Hover only animates the row background and avatar shrink — not text visibility.
-    const identityStyle: ViewStyle | undefined = isWeb
-        ? {
-            marginLeft: -resolvedAvatarSize / 2,
-        }
-        : undefined;
 
     return (
         <View className={className} style={[styles.fullWidth, style]}>
@@ -322,7 +320,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                 {...webInteractionProps}
             >
                 <View style={avatarWrapperStyle}>{avatarNode}</View>
-                <View style={[styles.identity, identityStyle]}>
+                <View style={styles.identity}>
                     <Text
                         style={[styles.displayName, { color: colors.text }]}
                         numberOfLines={1}

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -71,7 +71,7 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
             <View style={styles.section}>
                 <Text style={styles.sectionTitle}>
                     {paymentMethod === 'card' ? t('payment.details.cardDetails') :
-                        paymentMethod === 'oxy' ? t('payment.details.oxyPay') :
+                        paymentMethod === 'oxy' ? t('payment.details.peable') :
                             paymentMethod === 'faircoin' ? t('payment.details.faircoinPayment') : t('payment.details.paymentDetails')}
                 </Text>
 
@@ -149,16 +149,16 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                 )}
 
                 {paymentMethod === 'oxy' && (
-                    <View style={styles.oxyPayCard}>
-                        <View style={styles.oxyPayContent}>
-                            <Ionicons name="wallet-outline" size={64} color={colors.primary} style={styles.oxyPayIcon} />
-                            <Text style={styles.oxyPayMainTitle}>{t('payment.details.oxyPay')}</Text>
-                            <Text style={styles.oxyPaySubtitle}>{t('payment.details.payWithWallet')}</Text>
-                            <View style={styles.oxyPayBalanceBox}>
-                                <Text style={styles.oxyPayBalanceText}>{t('payment.details.balance', { balance: '⊜ 123.45' })}</Text>
+                    <View style={styles.peableCard}>
+                        <View style={styles.peableContent}>
+                            <Ionicons name="wallet-outline" size={64} color={colors.primary} style={styles.peableIcon} />
+                            <Text style={styles.peableMainTitle}>{t('payment.details.peable')}</Text>
+                            <Text style={styles.peableSubtitle}>{t('payment.details.payWithWallet')}</Text>
+                            <View style={styles.peableBalanceBox}>
+                                <Text style={styles.peableBalanceText}>{t('payment.details.balance', { balance: '⊜ 123.45' })}</Text>
                             </View>
                             <View style={{ height: 18 }} />
-                            <Text style={styles.oxyPayWaiting}>{t('payment.details.readyToProcess')}</Text>
+                            <Text style={styles.peableWaiting}>{t('payment.details.readyToProcess')}</Text>
                         </View>
                     </View>
                 )}

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -87,7 +87,7 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
                     {paymentMethod === 'oxy' ? (
                         <SettingsListItem
                             icon={<Ionicons name="wallet-outline" size={20} color={colors.primary} />}
-                            title={t('payment.review.oxyPayAccount')}
+                            title={t('payment.review.peableAccount')}
                             description={t('payment.details.balance', { balance: '⊜ 123.45' })}
                             showChevron={false}
                         />

package/src/ui/components/payment/constants.ts

@@ -2,7 +2,7 @@ import type { PaymentMethod } from './types';
 
 export const PAYMENT_METHODS: PaymentMethod[] = [
     { key: 'card', label: 'Credit/Debit Card', icon: 'card-outline', description: 'Pay securely with your credit or debit card.' },
-    { key: 'oxy', label: 'Oxy Pay', icon: 'wallet-outline', description: 'Use your Oxy Pay in-app balance.' },
+    { key: 'oxy', label: 'Peable', icon: 'wallet-outline', description: 'Use your Peable in-app balance.' },
     { key: 'faircoin', label: 'FAIRWallet', icon: 'qr-code-outline', description: 'Pay with FairCoin by scanning a QR code.' },
 ];
 

package/src/ui/components/payment/paymentStyles.ts

@@ -193,8 +193,8 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         flex: 1,
         marginLeft: 6,
     },
-    // Oxy Pay styles
-    oxyPayCard: {
+    // Peable styles
+    peableCard: {
         backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
@@ -202,14 +202,14 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         alignItems: 'center',
         width: '100%',
     },
-    oxyPayContent: {
+    peableContent: {
         alignItems: 'center',
         width: '100%',
     },
-    oxyPayIcon: {
+    peableIcon: {
         marginBottom: 8,
     },
-    oxyPayMainTitle: {
+    peableMainTitle: {
         fontWeight: 'bold',
         fontSize: 28,
         color: colors.text,
@@ -217,23 +217,23 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         textAlign: 'center',
         letterSpacing: 0.5,
     },
-    oxyPaySubtitle: {
+    peableSubtitle: {
         fontSize: 16,
         color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },
-    oxyPayBalanceBox: {
+    peableBalanceBox: {
         backgroundColor: `${colors.primary}22`,
         borderRadius: 12,
         padding: 8,
         marginTop: 8,
     },
-    oxyPayBalanceText: {
+    peableBalanceText: {
         color: colors.primary,
         fontWeight: '600',
     },
-    oxyPayWaiting: {
+    peableWaiting: {
         fontSize: 14,
         color: colors.textSecondary,
         textAlign: 'center',

package/src/ui/index.ts

@@ -25,7 +25,12 @@ export { LogoText } from './components/logo/LogoText';
 export { RequireOxyAuth } from './components/RequireOxyAuth';
 export type { RequireOxyAuthProps, RequireOxyAuthPrompt } from './components/RequireOxyAuth';
 export { default as FollowButton } from './components/FollowButton';
+export { default as PeableButton } from './components/PeableButton';
+export type { PeableButtonProps } from './components/PeableButton';
+/** @deprecated Use `PeableButton` instead. */
 export { default as OxyPayButton } from './components/OxyPayButton';
+/** @deprecated Use `PeableButtonProps` instead. */
+export type { OxyPayButtonProps } from './components/OxyPayButton';
 export { default as ProfileButton } from './components/ProfileButton';
 
 // Context + hooks

package/src/ui/server.ts

@@ -19,7 +19,9 @@ export const OxySignInButton = noopComponent;
 export const LogoIcon = noopComponent;
 export const LogoText = noopComponent;
 export const FollowButton = noopComponent;
-export const OxyPayButton = noopComponent;
+export const PeableButton = noopComponent;
+/** @deprecated Use `PeableButton` instead. */
+export const OxyPayButton = PeableButton;
 
 // Context
 export const useOxy = noopHook;