@oxyhq/services 11.0.0 → 11.1.1

package/lib/module/ui/screens/trust/TrustFAQScreen.js

@@ -1,44 +1,34 @@
 "use strict";
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { View, Text, StyleSheet, ScrollView, TextInput, LayoutAnimation } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import { View, ScrollView } from 'react-native';
 import Header from "../../components/Header.js";
-import { SettingsListItem } from '@oxyhq/bloom/settings-list';
-import { useI18n } from "../../hooks/useI18n.js";
+import EmptyState from "../../components/EmptyState.js";
+import { SearchInput } from '@oxyhq/bloom/search-input';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@oxyhq/bloom/accordion';
+import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { normalizeColorScheme } from '@oxyhq/core';
-import { useColorScheme } from "../../hooks/useColorScheme.js";
-import { Colors } from "../../constants/theme.js";
+import { useI18n } from "../../hooks/useI18n.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'];
 
 /**
- * TrustFAQScreen - Optimized for performance
+ * TrustFAQScreen
  *
- * Performance optimizations implemented:
- * - useMemo for theme calculations (only recalculates when theme changes)
- * - useMemo for filtered FAQs (only recalculates when search changes)
- * - useCallback for event handlers to prevent unnecessary re-renders
- * - React.memo wrapper to prevent re-renders when props haven't changed
+ * Frequently asked questions about Oxy Trust, rendered with the shared Bloom
+ * Accordion (single-expand) + SearchInput. Styling is centralized Bloom token
+ * classes; the Bloom Accordion owns its own expand/collapse animation, so no
+ * `LayoutAnimation` is used here.
  */
 const TrustFAQScreen = ({
-  goBack,
-  theme
+  goBack
 }) => {
   const {
     t
   } = useI18n();
-  const [expanded, setExpanded] = useState(null);
-  const [search, setSearch] = useState('');
-
-  // Memoize theme-related calculations to prevent unnecessary recalculations
   const bloomTheme = useTheme();
-  const colorScheme = useColorScheme();
-  const normalizedColorScheme = normalizeColorScheme(colorScheme);
-  const colors = Colors[normalizedColorScheme];
-
-  // Memoize filtered FAQs to prevent filtering on every render
+  const [search, setSearch] = useState('');
+  const [expanded, setExpanded] = useState(undefined);
   const faqs = useMemo(() => FAQ_KEYS.map(key => ({
     id: key,
     q: t(`trust.faq.items.${key}.q`) || '',
@@ -49,132 +39,52 @@ const TrustFAQScreen = ({
     const searchLower = search.toLowerCase();
     return faqs.filter(faq => faq.q.toLowerCase().includes(searchLower) || faq.a.toLowerCase().includes(searchLower));
   }, [search, faqs]);
-
-  // Memoize toggle handler to prevent recreation on every render
-  const handleToggle = useCallback(id => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setExpanded(prev => prev === id ? null : id);
+  const handleAccordionChange = useCallback(value => {
+    setExpanded(Array.isArray(value) ? value[0] : value);
   }, []);
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor: bloomTheme.colors.background
-    }],
+    className: "flex-1 bg-bg",
     children: [/*#__PURE__*/_jsx(Header, {
       title: t('trust.faq.title') || 'Trust FAQ',
       subtitle: t('trust.faq.subtitle') || 'Frequently asked questions about Oxy Trust',
       subtitleVariant: "muted",
       onBack: goBack,
       elevation: "subtle"
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      contentContainerStyle: styles.contentContainer,
+    }), /*#__PURE__*/_jsx(View, {
+      className: "px-screen-margin pt-space-20 pb-space-12",
+      children: /*#__PURE__*/_jsx(SearchInput, {
+        label: t('trust.faq.search') || 'Search FAQ...',
+        value: search,
+        onChangeText: setSearch,
+        onClearText: () => setSearch(''),
+        accessibilityLabel: "Search Trust FAQ"
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      className: "flex-1 px-screen-margin",
       showsVerticalScrollIndicator: false,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.searchContainer, {
-          backgroundColor: colors.card
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "search",
-          size: 22,
-          color: colors.icon
-        }), /*#__PURE__*/_jsx(TextInput, {
-          style: [styles.searchInput, {
-            color: bloomTheme.colors.text
-          }],
-          placeholder: t('trust.faq.search') || 'Search FAQ...',
-          placeholderTextColor: bloomTheme.colors.textTertiary,
-          value: search,
-          onChangeText: setSearch,
-          returnKeyType: "search"
-        })]
-      }), filteredFaqs.length === 0 ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.noResults, {
-          color: colors.secondaryText
-        }],
-        children: t('trust.faq.noResults', {
+      children: filteredFaqs.length === 0 ? /*#__PURE__*/_jsx(EmptyState, {
+        message: t('trust.faq.noResults', {
           query: search
-        }) || `No FAQ items found matching "${search}"`
-      }) : /*#__PURE__*/_jsx(View, {
-        style: styles.groupedSectionContainer,
-        children: filteredFaqs.map((faq, idx) => {
-          const isExpanded = expanded === faq.id;
-          const isLast = idx === filteredFaqs.length - 1;
-          return /*#__PURE__*/_jsxs(View, {
-            style: [styles.faqItemWrapper, {
-              marginBottom: idx < filteredFaqs.length - 1 ? 4 : 0
-            }],
-            children: [/*#__PURE__*/_jsx(SettingsListItem, {
-              title: faq.q,
-              onPress: () => handleToggle(faq.id),
-              showChevron: false,
-              rightElement: /*#__PURE__*/_jsx(Ionicons, {
-                name: isExpanded ? 'chevron-up' : 'chevron-down',
-                size: 20,
-                color: colors.icon
-              })
-            }), isExpanded && /*#__PURE__*/_jsx(View, {
-              style: [styles.answerContainer, {
-                backgroundColor: colors.card
-              }, isLast && styles.lastAnswerContainer],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.answer, {
-                  color: bloomTheme.colors.text
-                }],
-                children: faq.a
-              })
-            })]
-          }, faq.id);
-        })
-      })]
+        }) || `No FAQ items found matching "${search}"`,
+        textColor: bloomTheme.colors.text
+      }) : /*#__PURE__*/_jsx(Accordion, {
+        type: "single",
+        value: expanded,
+        onValueChange: handleAccordionChange,
+        children: filteredFaqs.map(faq => /*#__PURE__*/_jsxs(AccordionItem, {
+          value: faq.id,
+          children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+            children: faq.q
+          }), /*#__PURE__*/_jsx(AccordionContent, {
+            children: /*#__PURE__*/_jsx(Text, {
+              className: "font-sans text-bodyMedium text-text-secondary",
+              children: faq.a
+            })
+          })]
+        }, faq.id))
+      })
     })]
   });
 };
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    paddingHorizontal: 24,
-    paddingTop: 20,
-    paddingBottom: 40
-  },
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    marginBottom: 12,
-    borderRadius: 999,
-    gap: 10
-  },
-  searchInput: {
-    flex: 1,
-    fontSize: 16,
-    lineHeight: 20
-  },
-  groupedSectionContainer: {
-    width: '100%'
-  },
-  faqItemWrapper: {
-    width: '100%'
-  },
-  answerContainer: {
-    paddingHorizontal: 10,
-    paddingTop: 4,
-    paddingBottom: 12
-  },
-  lastAnswerContainer: {
-    borderBottomLeftRadius: 18,
-    borderBottomRightRadius: 18
-  },
-  answer: {
-    fontSize: 14,
-    lineHeight: 20
-  },
-  noResults: {
-    fontSize: 16,
-    marginTop: 32,
-    textAlign: 'center'
-  }
-});
 export default /*#__PURE__*/React.memo(TrustFAQScreen);
 //# sourceMappingURL=TrustFAQScreen.js.map

package/lib/module/ui/screens/trust/TrustFAQScreen.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useMemo","useCallback","View","Text","StyleSheet","ScrollView","TextInput","LayoutAnimation","Ionicons","Header","SettingsListItem","useI18n","useTheme","normalizeColorScheme","useColorScheme","Colors","jsx","_jsx","jsxs","_jsxs","FAQ_KEYS","TrustFAQScreen","goBack","theme","t","expanded","setExpanded","search","setSearch","bloomTheme","colorScheme","normalizedColorScheme","colors","faqs","map","key","id","q","a","filteredFaqs","trim","searchLower","toLowerCase","filter","faq","includes","handleToggle","configureNext","Presets","easeInEaseOut","prev","style","styles","container","backgroundColor","background","children","title","subtitle","subtitleVariant","onBack","elevation","contentContainerStyle","contentContainer","showsVerticalScrollIndicator","searchContainer","card","name","size","color","icon","searchInput","text","placeholder","placeholderTextColor","textTertiary","value","onChangeText","returnKeyType","length","noResults","secondaryText","query","groupedSectionContainer","idx","isExpanded","isLast","faqItemWrapper","marginBottom","onPress","showChevron","rightElement","answerContainer","lastAnswerContainer","answer","create","flex","paddingHorizontal","paddingTop","paddingBottom","flexDirection","alignItems","paddingVertical","borderRadius","gap","fontSize","lineHeight","width","borderBottomLeftRadius","borderBottomRightRadius","marginTop","textAlign","memo"],"sourceRoot":"../../../../../src","sources":["ui/screens/trust/TrustFAQScreen.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useMemo","useCallback","View","ScrollView","Header","EmptyState","SearchInput","Accordion","AccordionItem","AccordionTrigger","AccordionContent","Text","useTheme","useI18n","jsx","_jsx","jsxs","_jsxs","FAQ_KEYS","TrustFAQScreen","goBack","t","bloomTheme","search","setSearch","expanded","setExpanded","undefined","faqs","map","key","id","q","a","filteredFaqs","trim","searchLower","toLowerCase","filter","faq","includes","handleAccordionChange","value","Array","isArray","className","children","title","subtitle","subtitleVariant","onBack","elevation","label","onChangeText","onClearText","accessibilityLabel","showsVerticalScrollIndicator","length","message","query","textColor","colors","text","type","onValueChange","memo"],"sourceRoot":"../../../../../src","sources":["ui/screens/trust/TrustFAQScreen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/screens/trust/TrustLeaderboardScreen.js

@@ -1,162 +1,229 @@
 "use strict";
 
-import { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { View, StyleSheet, ActivityIndicator, FlatList, TouchableOpacity } from 'react-native';
+import { getAccountDisplayName, logger } from '@oxyhq/core';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H6, Text } from '@oxyhq/bloom/typography';
+import { Chip } from '@oxyhq/bloom/chip';
+import { Button } from '@oxyhq/bloom/button';
+import { Ionicons } from '@expo/vector-icons';
 import Avatar from "../../components/Avatar.js";
 import Header from "../../components/Header.js";
 import { useI18n } from "../../hooks/useI18n.js";
-import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../../context/OxyContext.js";
 import { getTrustTierLabel } from "./trustTier.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AVATAR_SIZE = 40;
+const EMPTY_ICON_SIZE = 64;
+const ERROR_ICON_SIZE = 48;
+/** Ranks within the podium (1–3) get a highlighted row surface. */
+const PODIUM_RANK = 3;
 const TrustLeaderboardScreen = ({
   goBack,
-  theme,
   navigate
 }) => {
-  // Use useOxy() hook for OxyContext values
   const {
-    oxyServices
+    oxyServices,
+    user: currentUser
   } = useOxy();
   const {
-    t
+    t,
+    locale
   } = useI18n();
+  const bloomTheme = useTheme();
   const [leaderboard, setLeaderboard] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-  const bloomTheme = useTheme();
-  // Override primaryColor for Oxy Trust screens (purple instead of blue)
-  const primaryColor = '#d169e5';
-  useEffect(() => {
+  const currentUserId = currentUser?.id ?? '';
+  const loadLeaderboard = useCallback(() => {
     setIsLoading(true);
     setError(null);
-    oxyServices.getReputationLeaderboard().then(data => setLeaderboard(Array.isArray(data) ? data : [])).catch(err => setError((err instanceof Error ? err.message : null) || 'Failed to load leaderboard')).finally(() => setIsLoading(false));
+    oxyServices.getReputationLeaderboard().then(data => setLeaderboard(Array.isArray(data) ? data : [])).catch(err => {
+      logger.error('Failed to load trust leaderboard', err instanceof Error ? err : new Error(String(err)), {
+        component: 'TrustLeaderboardScreen'
+      });
+      setError(err instanceof Error ? err.message : null);
+    }).finally(() => setIsLoading(false));
   }, [oxyServices]);
+  useEffect(() => {
+    loadLeaderboard();
+  }, [loadLeaderboard]);
+  const title = t('trust.leaderboard.title') || 'Trust Leaderboard';
+  const subtitle = t('trust.leaderboard.subtitle') || 'Top contributors in the community';
+  const handleEntryPress = useCallback(entry => {
+    navigate?.('Profile', {
+      userId: entry.user.id,
+      username: entry.user.username
+    });
+  }, [navigate]);
+  const renderEntry = useCallback(({
+    item
+  }) => {
+    const displayName = getAccountDisplayName(item.user, locale);
+    const isViewer = currentUserId !== '' && item.user.id === currentUserId;
+    const isPodium = item.rank <= PODIUM_RANK;
+    // Viewer's own row and podium ranks get a subtle highlighted surface.
+    const highlightClass = isViewer || isPodium ? 'bg-fill-secondary' : '';
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.row,
+      className: `px-screen-margin py-space-12 gap-space-12 rounded-radius-12 ${highlightClass}`,
+      onPress: () => handleEntryPress(item),
+      activeOpacity: 0.7,
+      accessibilityRole: "button",
+      accessibilityLabel: `${displayName}, ${t('trust.leaderboard.rankLabel', {
+        rank: item.rank
+      }) || `rank ${item.rank}`}`,
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: "text-text-secondary font-bold text-subtitle text-center",
+        style: styles.rank,
+        numberOfLines: 1,
+        children: item.rank
+      }), /*#__PURE__*/_jsx(Avatar, {
+        uri: item.user.avatar ? oxyServices.getFileDownloadUrl(item.user.avatar, 'thumb') : undefined,
+        name: displayName,
+        size: AVATAR_SIZE
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.userColumn,
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "text-text font-medium text-base",
+          numberOfLines: 1,
+          children: displayName
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.tierRow,
+          className: "mt-space-4",
+          children: /*#__PURE__*/_jsx(Chip, {
+            size: "small",
+            variant: "soft",
+            color: isPodium ? 'primary' : 'default',
+            children: getTrustTierLabel(item.trustTier, t)
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-text font-bold text-base",
+        numberOfLines: 1,
+        children: item.total
+      })]
+    });
+  }, [oxyServices, locale, currentUserId, handleEntryPress, t]);
+  const keyExtractor = useCallback((item, index) => item.user.id || `entry-${index}`, []);
+  const ItemSeparator = useMemo(() => () => /*#__PURE__*/_jsx(View, {
+    style: styles.separator,
+    className: "border-b border-border-image"
+  }), []);
+  if (isLoading) {
+    return /*#__PURE__*/_jsxs(View, {
+      className: "flex-1 bg-bg",
+      children: [/*#__PURE__*/_jsx(Header, {
+        title: title,
+        subtitle: subtitle,
+        onBack: goBack,
+        elevation: "subtle"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.center,
+        children: /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "large",
+          color: bloomTheme.colors.primary
+        })
+      })]
+    });
+  }
+  if (error) {
+    return /*#__PURE__*/_jsxs(View, {
+      className: "flex-1 bg-bg",
+      children: [/*#__PURE__*/_jsx(Header, {
+        title: title,
+        subtitle: subtitle,
+        onBack: goBack,
+        elevation: "subtle"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.center,
+        className: "px-space-32 gap-space-16",
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "alert-circle",
+          size: ERROR_ICON_SIZE,
+          color: bloomTheme.colors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-text-secondary text-base text-center",
+          children: error || t('trust.leaderboard.error') || 'Failed to load leaderboard'
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onPress: loadLeaderboard,
+          children: t('common.retry') || 'Retry'
+        })]
+      })]
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor: bloomTheme.colors.background
-    }],
+    className: "flex-1 bg-bg",
     children: [/*#__PURE__*/_jsx(Header, {
-      title: t('trust.leaderboard.title') || 'Trust Leaderboard',
-      subtitle: t('trust.leaderboard.subtitle') || 'Top contributors in the community',
+      title: title,
+      subtitle: subtitle,
       onBack: goBack,
       elevation: "subtle"
-    }), isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-      size: "large",
-      color: primaryColor,
-      style: {
-        marginTop: 40
-      }
-    }) : error ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.error, {
-        color: bloomTheme.colors.error
-      }],
-      children: error
-    }) : /*#__PURE__*/_jsx(ScrollView, {
-      contentContainerStyle: styles.listContainer,
-      children: leaderboard.length === 0 ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.placeholder, {
-          color: bloomTheme.colors.text
-        }],
-        children: t('trust.leaderboard.empty') || 'No leaderboard data.'
-      }) : leaderboard.map(entry => {
-        const username = entry.user.username;
-        const displayName = username || entry.user.id;
-        return /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: [styles.row, {
-            borderColor: bloomTheme.colors.border
-          }, entry.rank <= 3 && {
-            backgroundColor: bloomTheme.colors.primarySubtle
-          }],
-          onPress: () => navigate?.('Profile', {
-            userId: entry.user.id,
-            username
-          }),
-          activeOpacity: 0.7,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.rank, {
-              color: primaryColor
-            }],
-            children: entry.rank
-          }), /*#__PURE__*/_jsx(Avatar, {
-            name: username || 'User',
-            size: 40,
-            style: styles.avatar
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.userColumn,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.username, {
-                color: bloomTheme.colors.text
-              }],
-              numberOfLines: 1,
-              children: displayName
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.tier, {
-                color: bloomTheme.colors.textTertiary
-              }],
-              numberOfLines: 1,
-              children: getTrustTierLabel(entry.trustTier, t)
-            })]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.reputation, {
-              color: primaryColor
-            }],
-            children: entry.total
-          })]
-        }, entry.user.id);
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: leaderboard,
+      renderItem: renderEntry,
+      keyExtractor: keyExtractor,
+      contentContainerStyle: styles.listContent,
+      className: "px-space-8 pt-space-12",
+      ItemSeparatorComponent: ItemSeparator,
+      ListEmptyComponent: /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyContainer,
+        className: "px-space-32 gap-space-8",
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "trophy-outline",
+          size: EMPTY_ICON_SIZE,
+          color: bloomTheme.colors.textSecondary
+        }), /*#__PURE__*/_jsx(H6, {
+          className: "text-text text-center mt-space-8",
+          children: t('trust.leaderboard.empty') || 'No leaderboard data'
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-text-secondary text-sm text-center",
+          children: t('trust.leaderboard.emptyDesc') || 'Top contributors will appear here as the community grows.'
+        })]
       })
     })]
   });
 };
+
+// Layout-only styles: flex centering, measured rank column width, separator
+// inset, and row flex layout. Colors, spacing, radius, and typography roles
+// live on Bloom components + NativeWind token classes.
 const styles = StyleSheet.create({
-  container: {
-    flex: 1
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
   },
-  listContainer: {
-    paddingBottom: 40,
-    paddingTop: 20
+  listContent: {
+    flexGrow: 1,
+    paddingBottom: 40
   },
   row: {
     flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderBottomWidth: 1
+    alignItems: 'center'
   },
   rank: {
-    fontSize: 20,
-    width: 32,
-    textAlign: 'center',
-    fontWeight: 'bold'
-  },
-  avatar: {
-    marginHorizontal: 8
+    width: 28
   },
   userColumn: {
-    flex: 1,
-    marginLeft: 8
-  },
-  username: {
-    fontSize: 16
-  },
-  tier: {
-    fontSize: 12,
-    marginTop: 1
+    flex: 1
   },
-  reputation: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginLeft: 12
+  tierRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
   },
-  placeholder: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginTop: 40
+  // Inset the hairline separator to align with the start of the entry's text
+  // content (rank column + avatar + screen margin + gaps).
+  separator: {
+    marginLeft: 80
   },
-  error: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginTop: 40
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 80
   }
 });
 export default TrustLeaderboardScreen;