Central Hub Component

The Central Hub component gives you a complete social betting experience in a single Android surface. It combines profiles, shared bets, search, notifications, following, onboarding, and leaderboards.

#Overview

This guide shows you how to:

1. render the Central Hub in Jetpack Compose or Android Views,
2. pass the required authentication and user context,
3. enable bet sharing and bet copying callbacks,
4. customize the visual theme, and
5. manage cleanup when the user logs out.

#Basic Integration

#Required Parameters

• jwtToken String required — authenticates the user and initializes the component.
• userId String required — identifies the currently signed-in user.
• onBack () -> Unit required — closes the Central Hub and returns control to your app.

#Optional Parameters

• modifier Modifier optional — Compose layout control.
• onGetBets (suspend () -> List<BetPayload>)? optional — provides betslips the user can share.
• onCopyToBetSlip (BetPayload) -> Unit optional — handles copied shared bets.
• uiSettings CentralHubUISettings optional — customizes theme, fonts, icons, and behavior.

import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat
import ag.sportradar.virtualstadium.uisdk.composables.CentralHub
import ag.sportradar.virtualstadium.datasdk.model.BetPayload

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            CentralHub(
                jwtToken = "<your-jwt-token>",
                userId = "<your-user-id>",
                modifier = Modifier.fillMaxSize(),
                onGetBets = {
                    getUserBetSlips()
                },
                onCopyToBetSlip = { betPayload ->
                    addBetToSlip(betPayload)
                },
                onBack = {
                    finish()
                }
            )
        }
    }

    private suspend fun getUserBetSlips(): List<BetPayload> {
        return emptyList()
    }

    private fun addBetToSlip(betPayload: BetPayload) {
        // Add the copied bet to your own bet slip flow.
    }
}

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

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

#Bet Sharing Integration

To enable sharing, implement onGetBets so the component can show betslips the user is allowed to share.

data class BetPayload(
    val betType: BetType,
    val selections: List<Selection>,
    val stake: Double,
    val totalOdds: Double,
    val potentialWin: Double,
)

CentralHub(
    jwtToken = jwtToken,
    userId = userId,
    onGetBets = {
        fetchUserBetSlips()
    },
    onCopyToBetSlip = { copiedBet ->
        addToBetSlip(copiedBet)
    },
    onBack = { finish() }
)

#UI Settings

Use CentralHubUISettings to align the component with your app's design system.

You can customize:

• theme colors,
• screen-specific colors,
• buttons, cards, and top bars,
• font family,
• sport icons, and
• other Central Hub behavior flags.

val customUISettings = CentralHubUISettings(
    theme = CentralHubThemeSettings(
        background = Color(0xFFF5F5F5),
        buttonColors = CentralHubButtonsColors(
            primaryBackground = Color(0xFF1976D2),
            primaryContent = Color.White,
        ),
    ),
    fontFamily = myCustomFontFamily,
    icons = CentralHubIcons(
        sportIcons = { sportId ->
            when (sportId) {
                "1" -> R.drawable.ic_custom_soccer
                else -> R.drawable.ic_sport_default
            }
        }
    ),
    otherSettings = CentralHubOtherSettings(),
)

#Lifecycle Management

If you use Android Views, destroy the component when the user logs out or when the host screen is being torn down.

class MainActivity : ComponentActivity() {

    private lateinit var centralHubView: CentralHubView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        centralHubView = findViewById(R.id.central_hub_view)
        centralHubView.init(
            jwtToken = jwtToken,
            userId = userId,
            onBack = { finish() }
        )
    }

    fun onUserLogout() {
        centralHubView.destroy()
        navigateToLogin()
    }
}

#Next Steps