The Central Hub component provides a comprehensive social betting platform where users can share bets, interact with the community, manage their profile, view notifications, and engage with other users. It serves as the central social hub for the Virtual Stadium experience.
This guide will walk you through each step with code examples and best practices.
Managers.SDK.shared.initialize()The Central Hub component requires JWT authentication and a user ID. It can be integrated as a standalone screen or as part of your navigation flow.
Required Parameters:
userJWT String required — JWT authentication token required to initialize the SDK and authenticate the user.userId String required — The unique identifier of the logged-in user.onCopyToBetslip @escaping ((BetPayload) -> Void) required — Callback invoked when a user copies a bet from another user. Returns the BetPayload to add to your bet slip.onBetShareHandler @escaping ((([BetPayload]) -> Void) -> Void) required — Callback invoked when the user wants to share a bet. Receives a completion handler that should be called with the user's bet slips.onClose @escaping (() -> Void) required — Callback invoked when the user navigates back or closes the Central Hub.Optional Parameters:
centralHubSettings CentralHubSettings optional — Customization settings for theming, fonts, translations, and UI behavior. Default: CentralHubSettings()analyticsProvider AnalyticsProvider? optional — Provider for logging analytics events throughout the SDK. Default: nilThe Central Hub handles its own navigation internally, including profile screens, bet sharing, search, followers, and notifications.
ContentView.swift:
import SwiftUI
import VirtualStadiumUISDK
struct ContentView: View {
let userJWT = "<your-jwt-token>"
let userId = "<your-user-id>"
@
The Central Hub component supports various configuration options to customize appearance, behavior, and functionality.
userJWT String required
JWT authentication token required to initialize the SDK and authenticate the user.
userId String required
The unique identifier of the logged-in user. This is used to personalize the Central Hub experience and distinguish between the user's own profile and other users' profiles.
onCopyToBetslip @escaping ((BetPayload) -> Void) required
Callback invoked when a user copies a bet from another user's shared bets. Returns the BetPayload to add to your bet slip.
BetPayload Structure:
public struct BetPayload {
let id: String
let betType: BetType // Single, Multi, Bet Builder, etc.
let selections: [Selection]
let stake: Double
let totalOdds: Double
let potentialWin: Double
// ... additional bet details
}onBetShareHandler @escaping ((([BetPayload]) -> Void) -> Void) required
Callback invoked when the user wants to share a bet with the community. This function receives a completion handler that should be called with the user's available bet slips.
The completion handler pattern allows asynchronous fetching of bet slips from your backend or local storage.
onClose @escaping (() -> Void) required
Callback invoked when the user navigates back or closes the Central Hub. Use this to handle navigation back to your app's main interface.
centralHubSettings CentralHubSettings optional
Customization settings for theming, fonts, translations, and UI behavior. Default is CentralHubSettings(). See Central Hub Settings.
analyticsProvider AnalyticsProvider? optional
Provider for logging analytics events throughout the SDK. Default is nil.
The profile area can show:
The bets area supports:
The leaderboard area supports:
The component also includes:
The Central Hub can be extensively customized through the CentralHubSettings struct. This allows you to match the component's appearance to your app's design system.
public struct CentralHubSettings {
public var oddsType: OddsType
public var themeSettings: CentralHubThemeSettings
public var sportIcons: SportIconSettings
public var fontSettings: FontSettings
public var translationSettings: CentralHubTranslationSettings
}Configure how odds are displayed throughout the Central Hub:
public enum OddsType: String {
case us = "us" // American format (+150, -200)
case uk = "uk" // Fractional format (3/2, 1/5)
case eu = "eu" // Decimal format (2.50, 1.20)
}Control all color aspects of the Central Hub through CentralHubThemeSettings:
Core Colors
Screen-Specific Colors
Component Colors
Toast Colors
Custom Settings Example:
Customize sport icons displayed throughout the Central Hub for different sports like soccer, basketball, etc.
SportIconSettings allows you to override the default sport icons with your own custom images. This is particularly useful when you want to match your app's design system or provide higher quality sport-specific imagery.
Use Cases:
Sport Icons appear in:
SportIconSettings Properties:
sportIconHandler ((String?) -> Image)? optional
A closure that receives a sport ID string and returns the corresponding Image. The sport ID is typically a string representation of the Sportradar sport identifier. You must provide an image for all sport IDs, including a default fallback for unknown sports.
Parameters:
sportId: Optional string representing the sport (e.g., "1" for soccer, "2" for basketball)Returns: Image to display for the given sport. Always provide a default image for unknown sport IDs.
Sport Icon Customization:
import SwiftUI
import VirtualStadiumUISDK
// Example: Custom sport icons
let customSportIcons = SportIconSettings { sportId in
switch sportId {
case "1": // Soccer
return Image("custom_soccer_icon")
case "2"
Common Sport IDs:
// Sportradar Sport IDs (examples)
// "1" = Soccer
// "2" = Basketball
let sportIcons = SportIconSettings { sportId in
switch sportId {
case "1":
return Image("soccer_icon")
case "2":
return Image("basketball_icon")
default:
return Image("generic_sport_icon") // Always provide default
Use your app's custom fonts throughout the Central Hub:
public struct FontSettings {
public let fontUltraLight: UIFont
public let fontThin: UIFont
public let fontLight: UIFont
public let fontRegular: UIFont
public let fontMedium: UIFont
public let fontSemibold: UIFont
public let fontBold: UIFont
public let fontHeavy: UIFont
public let fontBlack: UIFont
public var inputFieldPlaceholderFont: UIFont
}Custom Fonts Example:
let customFonts = FontSettings(
fontRegular: UIFont(name: "YourFont-Regular", size: 16),
fontMedium: UIFont(name: "YourFont-Medium", size: 16),
fontBold: UIFont(name: "YourFont-Bold", size: 16),
Customize all text strings displayed in the Central Hub for complete localization control:
public struct CentralHubTranslationSettings {
public var navigationTitles: NavigationTitleTranslations
public var onboarding: OnboardingTranslations
public var segmentedSectionTabTranslations: SegmentedSectionTranslations
public var profileHub: ProfileHubTranslations
public var otherUserProfileHub: OtherUserProfileHubTranslations
public var betsHub: BetsHubTranslations
public
Custom Translations Example:
let spanishTranslations = CentralHubTranslationSettings(
navigationTitles: NavigationTitleTranslations(
profile: "Perfil",
bets: "Apuestas",
search: "Buscar",
followers: "Seguidores",
following: "Siguiendo"
)
To enable bet sharing, provide the onBetShareHandler callback that returns your user's bet slips. The Central Hub will display these bets in a selection screen where users can choose which bet to share.
The BetPayload model represents a bet slip that can be shared and copied. Ensure your bet data is properly mapped to this structure.
Key Requirements:
The same BetPayload structure is used for both sharing bets and copying bets via the onCopyToBetslip callback.
Bet Sharing Implementation:
Complete Central Hub Integration Example:
import SwiftUI
import VirtualStadiumUISDK
let customSettings = CentralHubSettings(
// Odds format
oddsType: .us, // American odds
// Theme customization
themeSettings: CentralHubThemeSettings(
// Core background
background: Color(red: 0.95, green: 0.95, blue: 0.97),
// Toast colors
toastColors: ToastColors(
successColors: SuccessToastColors(
backgroundColor: .green,
textColor: .white,
iconColor: .white,
closeButtonColor: .white
),
errorColors: ErrorToastColors(
backgroundColor: .red,
textColor: .white,
iconColor: .white,
closeButtonColor: .white
)
),
// Card colors
cardColors: CentralHubCardsColors(
betShare: BetShareCardColors(
background: .white,
contentText: .black,
commentsIconColor: .blue,
commentsTextColor: .black
),
betSlip: BetSlipTheme(
betslipBackgroundColor: .white,
betslipBorderColor: Color.gray.opacity(0.2)
)
),
// Button colors
buttonColors: CentralHubButtonColors(
followButtonColors: FollowButtonColors(
background: Color.blue.opacity(0.15),
text: .blue
),
shareBetslipButtonColors: ShareBetslipButtonColors(
backgroundColor: .blue,
textColor: .white
)
),
// Navigation bar
navigationBarColors: CentralHubNavigationBarColors(
background: .white,
title: .black,
icons: .black
),
// Tab colors
tabColors: TabColors(
selectedTextColor: .black,
unselectedTextColor: .gray,
backgroundColor: Color.gray.opacity(0.2),
selectedBackgroundColor: .white,
tabContainerBackground: .white
),
// Onboarding
onboardingScreenColors: CentralHubOnboardingScreenColors(
backgroundColor: .white,
onboardingIcon: .blue,
welcomeTextColor: .black,
featureItem: FeatureItemColors(
featureIcon: .blue,
titleColor: .black,
descriptionColor: .gray
)
)
),
// Font customization
fontSettings: FontSettings(
fontRegular: UIFont(name: "CustomFont-Regular", size: 16),
fontMedium: UIFont(name: "CustomFont-Medium", size: 16),
fontBold: UIFont(name: "CustomFont-Bold", size: 16)
),
// Translation customization
translationSettings: CentralHubTranslationSettings(
// Customize all text strings
general: GeneralTranslations(
follow: "Follow",
unfollow: "Unfollow",
copyBetslip: "COPY BET"
)
)
)
// Use in CentralHubView
CentralHubView(
userJWT: jwt,
userId: userId,
centralHubSettings: customSettings,
onCopyToBetslip: { bet in
copyBet(bet)
},
onBetShareHandler: { completion in
Task {
let bets = await getBets()
completion(bets)
}
},
onClose: {
// Handle close
}
)import SwiftUI
import VirtualStadiumUISDK
struct CentralHubContainer: View {
let jwt: String
let userId: String
@State private var showToast = false
@State private var toastMessage = ""
var body: some View {
CentralHubView(
userJWT: jwt,
userId: userId,
centralHubSettings: CentralHubSettings(),
import SwiftUI
import VirtualStadiumUISDK
import Combine
class CentralHubViewModel: ObservableObject {
@Published var jwtToken: String
@Published var userId: String
@Published var isLoading: Bool = true
init(jwtToken: String, userId: String) {
self.jwtToken = jwtToken
self.userId = userId
}