Central Hub Component

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.

#Overview

This guide will walk you through each step with code examples and best practices.

#Basic Integration

#SwiftUI

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: nil

ContentView.swift:

import SwiftUI
import VirtualStadiumUISDK

struct ContentView: View {
    let userJWT = "<your-jwt-token>"
    let userId = "<your-user-id>"
    
    @

#Configuration Parameters

The Central Hub component supports various configuration options to customize appearance, behavior, and functionality.

#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. 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.

#Optional Parameters

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.

#Main Features

#Profile Tab

The profile area can show:

• user details,
• follower and following counts,
• profile statistics,
• shared bet history, and
• profile privacy and edit flows for the current user.

#Bets Tab

The bets area supports:

• browsing shared bets,
• opening comments,
• reacting to bets,
• copying bets, and
• sharing a new bet from the current user's own bet slips.

#Ranks Tab

The leaderboard area supports:

• category filters,
• timeframe filters,
• the current user's rank, and
• paginated ranked users.

#Search, Followers, and Notifications

The component also includes:

• user search,
• followers and following screens,
• onboarding for first-time users, and
• bet, comment, and social notifications.

#Central Hub Settings

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.

#Structure

public struct CentralHubSettings {
    public var oddsType: OddsType
    public var themeSettings: CentralHubThemeSettings
    public var sportIcons: SportIconSettings
    public var fontSettings: FontSettings
    public var translationSettings: CentralHubTranslationSettings
}

#Odds Type

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)
}

#Theme Settings

Control all color aspects of the Central Hub through CentralHubThemeSettings:

Core Colors

• background - Main background color for the Central Hub

Screen-Specific Colors

• onboardingScreenColors - Onboarding flow colors
• followersScreenColors - Followers/following screen colors
• myHubScreenColors - My profile screen colors
• betsScreenColors - Bets feed screen colors
• searchScreenColors - Search screen colors
• betShareNotificationsScreenColors - Bet notifications colors

Component Colors

• cardColors - Bet cards, profile cards, notification cards
• buttonColors - Follow, share, onboarding, sort, copy buttons
• profileHeaderColors - Profile header and statistics
• navigationBarColors - Top navigation bar
• tabColors - Profile/Bets tab selector
• searchBarColors - Search bar and input
• alreadyReadDividerColors - Read/unread divider
• reactionsSheet - Reactions bottom sheet
• badgeColors - Notification badges
• switchColors - Privacy toggle switches
• filterBottomSheetColors - Filter selection sheet
• loaderColors - Loading indicators

Toast Colors

• toastColors - Success, error, and follow toasts

Custom Settings Example:

#Sport Icon Settings

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:

• Replace default sport icons with branded versions
• Provide custom icons for specific sports

Sport Icons appear in:

• Bet cards showing event information
• Event headers in bet details
• Notification cards for bet share events

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

#Font Settings

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),

#Translation Settings

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"
    )

#Bet Sharing Implementation

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.

#BetPayload Structure

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:

• Include all bet selections with markets and outcomes
• Provide accurate odds and potential winnings
• Include bet type (Single, Multi, Bet Builder, etc.)
• Add timestamps for bet creation/placement

The same BetPayload structure is used for both sharing bets and copying bets via the onCopyToBetslip callback.

Bet Sharing Implementation:

#Complete Example

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
    }
)