Lucra Components (Experimental) — iOS

Lucra Components (Experimental) — iOS

⚠️ Experimental Feature Lucra Components are prebuilt SwiftUI and UIKit elements designed to embed Lucra functionality directly inside your own screens. APIs may change — consult your Lucra integration engineer before relying on these in production.

---

🎯 What Are Lucra Components?

Lucra Components are modular SwiftUI views that expose portions of Lucra UI without requiring a full-screen LucraFlow.

Examples include:

• Mini Public Feed

• Create Contest Button

• User Profile Pill

• Recommended Matchups

• ContestCard

These allow tighter integration between your app’s UI and Lucra’s contest ecosystem.

---

🧩 General Usage Pattern

Most components follow this structure:

let component: LucraComponent = .userProfilePill
lucraClient.ui.component(component)

All components require:

• A LucraClient

• Optional callbacks for navigation or interaction

• Optional style parameters

---

🖼 Example: Matchup List in Your Home Screen

struct HomeCard: View {
    @State private var flow: LucraFlow?
    let client = LucraEnvironment.shared.lucraClient

    var body: some View {
        VStack(alignment: .leading) {
            Text("Your Active Matchups")
                .font(.headline)

            client.ui.component(.userProfilePill)
        }
        .lucraFlow($flow, client: client)
    }
}

This embeds a real-time matchup list directly inside your UI.

---

🎨 Theming Components

Components honor:

• Your global Lucra theme

• Dark/light mode

• Custom component props (when available)

---

📦 Component Categories

Depending on your SDK version, available components may include:

✔️ Matchup Components

• Recent matchups

• Active matchups

• Recommended matchups

• GYP / SYW breakdowns

✔️ Tournament Components

• Featured tournaments

• Recommended tournaments

• Player leaderboard snippets

✔️ Balance Components

• Wallet summary

• Add-Funds quick actions

✔️ Promo Components

• Free to Play banners

• Convert to Credit offers

✔️ Action Components

• “Create GYP Matchup” buttons

• “Join Tournament” inline tiles

Your Lucra rep can confirm which components exist in your SDK release.

---

🏗 Hosting Components in UIKit

Use a UIHostingController:

let vc = UIHostingController(
    rootView: LucraMatchupListComponent(client: lucraClient)
)
navigationController?.pushViewController(vc, animated: true)

---

📈 When to Use Components vs. Flows

Use Components when:

• You want rich inline content

• You control the surrounding layout

• You want a hybrid experience (custom UI + Lucra UI)

Use Flows when:

• You want Lucra to handle entire screens

• You need regulated UI (KYC, funding, verification)

• You want minimal maintenance burden

---

✔️ Integration Checklist

• Confirm component availability with your Lucra partner

• Add SwiftUI container screens

• Implement callbacks for navigation (if needed)

• Test light/dark mode

• Test handling of LucraFlow transitions

Lucra Components are now ready for use.