be-components 5.0.8 → 5.1.0

package/src/Bracket/components/BracketPlay/index.tsx

@@ -317,12 +317,21 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
                     <Text size={14} theme='h1'>No Bracket Selected</Text>
                     <Text style={{ marginTop:3 }} size={12} theme='description'>{0.00}% Complete</Text>
                 </View>
+                {!player ?
+                <Button
+                    style={{ padding:10 }}
+                    title='Sign In'
+                    onPress={() => onRequestAuthenticate()}
+                    type='success'
+                />
+                :
                 <Button
                     style={{ padding:10 }}
                     title='Select Bracket'
                     onPress={() => onChangePlayerBracket(bracket.bracket_id)}
                     type='success'
                 />
+                }
             </View>
             }
             
@@ -345,7 +354,7 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
                         }
                 }}>
                     <View transparent>
-                    {width > 1000 && !selected_round && !selected_group ?
+                    {width > 1000 && bracket_rounds.length > 5 && !selected_round && !selected_group ?
                     <View onLayout={(ev) => {
                         const { height, width, x, y } = ev.nativeEvent.layout;
                         setBracketSize({ height, width, x, y })

package/src/Bracket/index.tsx

@@ -23,6 +23,7 @@ type BracketRoomProps = {
     restrict_competition?:boolean,
     player_balance?:PlayerBalanceProps,
     bracket_competition_id?:string,
+    onCompleteBracket?:(player:MyPlayerProps, player_bracket:PlayerBracketProps, bracket_competition?:BracketCompetitionProps, cpb?:CompetitionPlayerBracketProps) => void,
     onManageCompetition:(bracket_competition_id:string) => void,
     onFocusPosition?:(data:{ x:number, y:number, height:number, width:number }) => void,
     onShareCompetition:(bracket_competition:BracketCompetitionProps) => void,
@@ -35,7 +36,7 @@ type BracketRoomProps = {
 const sections = ['header', 'home', 'bracket_selector', 'bracket']
 const MAX_WIDTH = 2000
 
-const BracketRoom = ({ player_id, hide_home, restrict_competition, width, height, view_mode, bracket_id, insets, onSelectContest, onCreateNewCompetition, onManageCompetition, bracket_competition_id, player_balance, onRequestAuthenticate, onFocusPosition, onShareCompetition }:BracketRoomProps) => {
+const BracketRoom = ({ player_id, hide_home, restrict_competition, width, height, view_mode, bracket_id, insets, onCompleteBracket, onSelectContest, onCreateNewCompetition, onManageCompetition, bracket_competition_id, player_balance, onRequestAuthenticate, onFocusPosition, onShareCompetition }:BracketRoomProps) => {
     const Colors = useColors();
     const [ loading, setLoading ] = useState<string|undefined>(undefined);
     const [ load_pb, setLoadPb ] = useState<PlayerBracketProps|undefined>(undefined);
@@ -267,7 +268,11 @@ const BracketRoom = ({ player_id, hide_home, restrict_competition, width, height
                                     ...play_data,
                                     player_brackets:player_brackets.filter(pb => pb.player_bracket_id != newpb.player_bracket_id).concat(newpb),
                                     competition_player_brackets: competition_player_brackets.filter(cpb => !ncpbs.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(ncpbs)
-                                })
+                                });
+                                if(player && onCompleteBracket && newpb.completion_pct == 1){ 
+                                    let cpb = ncpbs.find(cpb => cpb.player_bracket_id == newpb.player_bracket_id && cpb.bracket_competition_id == active_competition?.bracket_competition_id);
+                                    onCompleteBracket(player, newpb, active_competition, cpb) 
+                                }
                             }}
                             bracket_id={active_bracket_id}
                             player_bracket_id={active_player_bracket_id}
@@ -439,8 +444,12 @@ const BracketRoom = ({ player_id, hide_home, restrict_competition, width, height
                                                 ...play_data,
                                                 player_brackets: new_pb ? player_brackets.concat(new_pb) : player_brackets,
                                                 competition_player_brackets: competition_player_brackets.concat(new_cpb)
-
                                             })
+                                            if(onCompleteBracket && player && active_player_bracket && active_player_bracket.completion_pct == 1){
+                                                setTimeout(() => {
+                                                    onCompleteBracket(player, active_player_bracket, new_bc, new_cpb);
+                                                }, 400);
+                                            }
                                         }}
                                         competition_id={active_competition?.bracket_competition_id}
                                         onLeaveCompetition={(bc, rem_cpb) => {

package/src/Campaign/api/index.ts

@@ -0,0 +1,92 @@
+
+import axios from 'axios';
+import type { CampaignParticipantProps, CampaignProps, OrderAnalyticsProps, OrderProps, OverallOrderAnalyticsProps, PublicPlayerProps } from '../../types';
+import { APIOverrides } from '../../ApiOverrides';
+import moment from 'moment-mini';
+
+//let SOCIAL_SVC_API = '';
+//let EVENT_SVC_API = '';
+let MK_SVC_API = '';
+let AUTH_SVC_API = '';
+
+export const CampaignApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        //SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
+        //EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+
+    },
+    getPlayersByPlayerIds : async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
+        try {
+            if(player_ids.length == 0){ return [] }
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/bulk/get`, { player_ids })
+            return resp.data.players
+        } catch (e) {
+            return []
+        }
+    },
+    getCampaignById: async(campaign_id:string):Promise<{campaign?:CampaignProps, campaign_participants:CampaignParticipantProps[]}> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/campaigns/campaign/${campaign_id}`);
+            return resp.data
+        } catch (e) {
+            return { campaign: undefined, campaign_participants:[]  }
+        }
+    },
+    getCampaignAction: async(campaign_id:string):Promise<OrderProps[]> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/orders/campaign/action/${campaign_id}`);
+            return resp.data.orders
+        } catch (e) {
+            return []
+        }
+    },
+    getCampaignAnalytics: async(campaign_id:string, to:number, from:number):Promise<OrderAnalyticsProps[]> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/analytics/campaign/details/${campaign_id}?to=${to}&from=${from}`);
+            return resp.data.analytics
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    }
+}
+
+export const CampaignHelpers = {
+    aggregateAnalytics: (analytics:OrderAnalyticsProps[]):OverallOrderAnalyticsProps&{roi_pct:number, win_pct:number, earnings:number} => {
+        const wins = analytics.reduce((a,b) => a + b.wins, 0);
+        const losses = analytics.reduce((a,b) => a + b.losses, 0);
+        const draws = analytics.reduce((a,b) => a + b.draws, 0);
+        const fulfilled_positions = analytics.reduce((a,b) => a + parseFloat(b.fulfilled_positions as any), 0);
+        const winnings = analytics.reduce((a,b) => a + b.winnings, 0);
+        const original_stake = analytics.reduce((a,b) => a + b.original_stake, 0);
+        const cash_rcvd = analytics.reduce((a,b) => a + b.cash_rcvd, 0);
+        
+        const win_pct = (wins + (draws / 2)) / fulfilled_positions
+        const earnings = (winnings + cash_rcvd) - original_stake
+        const roi_pct = earnings / original_stake
+        return {
+            winnings,
+            original_stake,
+            wins,
+            losses,
+            draws,
+            net_winnings: 0,
+            player_id: '',
+            fulfilled_positions,
+            cash_rcvd,
+            earnings,
+            win_pct,
+            roi_pct
+        }
+    },
+    getTimeOptions: () => {
+        const time_options = [
+            { label: 'All Time', to: moment().unix(), from: moment().subtract(7, 'years').unix() },
+            { label: 'Last 7 Days', to: moment().unix(), from: moment().subtract(7, 'days').unix() }
+        ]
+        return time_options
+    }
+}

package/src/Campaign/components/ActionList.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, View } from "../../Components/Themed"
+import type { EventProps, OrderProps, PublicPlayerProps } from "../../types"
+import { FlatList, Image } from 'react-native';
+import moment from 'moment-mini';
+import OrderGradeBar from '../../MarketComponents/components/OrderGradeBar';
+
+type ActionListProps = {
+    orders:OrderProps[],
+    events:EventProps[],
+    players:PublicPlayerProps[]
+}
+
+const ActionList = ({ orders, events, players }:ActionListProps) => {
+
+    const renderAction = (data:{ item:OrderProps, index:number }) => {
+        const event = events.find(e => e.event_id == data.item.event_id);
+        if(!event){ return <></> }
+        const player = players.find(p => p.player_id == data.item.player_id)
+        return (
+            <View float style={{ margin:10 }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:8, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                    <Text style={{ flex:1 }} theme='h2'>{event.event_title}</Text>
+                    <Text theme='action'>{moment(data.item.create_datetime).fromNow()}</Text>
+                </View>
+                <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    {player ?
+                    <Image
+                        source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                        style={{ height:35, width:35, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='h1'>{data.item.title}</Text>
+                        <Text theme='description'>@{player?.username}</Text>
+                    </View>
+                    {data.item.status == 'approved' && data.item.grade ?
+                    <View transparent style={{ padding:5, marginRight:10 }}>
+                        <OrderGradeBar
+                            grade={data.item.grade}
+                            view_type='book'
+                        />
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+        )
+    }
+
+
+    return (
+        <View transparent style={{ flex:1 }}>
+            <FlatList
+                data={orders}
+                renderItem={renderAction}
+                keyExtractor={(item) => item.order_id.toString()}
+                key={'campaign_action'}
+            />
+        </View>
+    )
+}
+
+export default ActionList

package/src/Campaign/components/AnalyticsCard.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text, View } from "../../Components/Themed"
+import { useColors } from '../../constants/useColors';
+
+type AnalyticsCardProps = {
+    label:string,
+    value:number,
+    value_label:string,
+    success_limit:number
+}
+
+const AnalyticsCard = ({ label, value, success_limit, value_label }:AnalyticsCardProps) => {
+    const Colors = useColors();
+    const color = value >= success_limit ? Colors.text.success : Colors.text.error
+
+
+    return (
+        <View float>
+            <View type='header' style={{ padding:8, borderTopRightRadius:8, borderTopLeftRadius:8}}>
+                <Text theme='h2'>{label}</Text>
+            </View>
+            <View transparent style={{ flex:1, padding:15 }}>
+                <Text theme='h1' color={color}>{value_label}</Text>
+            </View>
+        </View>
+    )
+}
+
+export default AnalyticsCard

package/src/Campaign/components/AutoManager.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { View } from "../../Components/Themed"
+import ProgressTimer from "./ProgressTimer"
+import type { CampaignParticipantProps, CampaignProps, OrderAnalyticsProps, OrderProps } from '../../types';
+
+type AutoManagerProps = {
+    active?:boolean,
+    campaign:CampaignProps,
+    campaign_participants:CampaignParticipantProps[],
+    analytics:OrderAnalyticsProps[],
+    orders:OrderProps[]
+    onChangeParticipant:(cp:CampaignParticipantProps) => void,
+    onChangeAd: (ad:{url:string}) => void
+}
+
+const AutoManager = ({ campaign, active, campaign_participants, onChangeParticipant, onChangeAd }:AutoManagerProps) => {
+    const active_participants = campaign_participants.filter(cp => cp.status == 'active');
+    const [ current_type, setCurrentType ] = useState('participant');
+    const [ started, setStarted ] = useState(false);
+    const [ timer_id, setTimerId ] = useState(Math.random().toString());
+    const [ active_ad, setActiveAd ] = useState<number>(0);
+    const [ active_participant, setActiveParticipant ] = useState<number>(0);
+
+    useEffect(() => {
+        if(!active || started){ return }
+        setStarted(true);
+        if(active_participants.length == 0){
+            setCurrentType('participant');
+            if(!campaign.ads || campaign.ads.length == 0){ return }
+            handleTimesUpAd(0)
+        } else {
+            setCurrentType('ad');
+            if(active_participants.length == 0){ return }
+            handleTimesUpParticipant(0);
+        }        
+    },[active, active_participants.length, campaign.ads])
+
+    const handleTimesUpAd = (index:number) => {
+        if(!campaign.ads){ return }
+        if(campaign.ads.length == 0){ return }
+        let active_index = index
+        let next_ad = campaign.ads[active_index]
+        if(!next_ad){ 
+            active_index = 0
+            next_ad = campaign.ads[active_index] 
+        }
+        if(!next_ad){ return }
+        setCurrentType('participant')
+        onChangeAd(next_ad)
+        setActiveAd(active_index);
+
+        setTimerId(Math.random().toString())
+    }
+
+    const handleTimesUpParticipant = (index:number) => {
+        let active_index = index
+        let next_cp = active_participants[active_index]
+        if(!next_cp){ 
+            active_index = 0
+            next_cp = active_participants[active_index] 
+        }
+        if(!next_cp){ return }
+        onChangeParticipant(next_cp)
+        setActiveParticipant(active_index);
+        setCurrentType('ad');
+        setTimerId(Math.random().toString())
+    }
+
+    const handleTimesUp = () => {
+        if(current_type == 'ad'){ handleTimesUpAd(active_ad + 1) }
+        if(current_type == 'participant'){ handleTimesUpParticipant(active_participant + 1) }
+    }
+
+    if(!active || !started){ return <></> }
+    
+    return (
+        <View transparent>
+            <ProgressTimer
+                total_time={10}
+                time_id={timer_id}
+                onTimesUp={() => handleTimesUp()}
+            />
+        </View>
+    )
+
+}
+
+export default AutoManager

package/src/Campaign/components/BetAlert.tsx

@@ -0,0 +1,111 @@
+import { Image } from "react-native";
+import { Icons } from "../../Components";
+import { Text, View } from "../../Components/Themed";
+import type { AthleteProps, EventProps, OrderProps, PublicPlayerProps, TeamProps } from "../../types"
+import React from 'react';
+import OrderGradeBar from "../../MarketComponents/components/OrderGradeBar";
+import { MarketComponentHelpers } from "../../MarketComponents/api";
+import QRCode from "react-qr-code";
+import { useColors } from "../../constants/useColors";
+import moment from "moment-mini";
+import ProgressTimer from "./ProgressTimer";
+
+type BetAlertProps = {
+    order:OrderProps,
+    team?:TeamProps,
+    athlete?:AthleteProps,
+    event?:EventProps,
+    player?:PublicPlayerProps,
+    color_mode?:'light'|'dark'
+    
+    onClose:() => void
+}
+
+const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:BetAlertProps) => {
+    const Colors = useColors({ mode: color_mode });
+    
+    return (
+        <View float style={{ width:350 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:18, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <Icons.BettorEdgeIcon size={18} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:20, marginRight:10 }}>
+                    <Text theme='h1'>NEW BET ALERT!</Text>
+                    <Text theme='description' style={{ marginTop:5 }}>@{player?.username}  {`\u2022`} {moment(order.create_datetime).fromNow()}</Text>
+                </View>
+                
+            </View>
+            <View>
+            {event ?
+                <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'center', padding:10 }}>
+                    <Image
+                        source={{ uri: event?.away?.image?.url }}
+                        style={{ height:40, width:40, marginRight:10 }}
+                        resizeMode='cover'
+                    />
+                    <Text theme='h2'>{event.away?.market_name}</Text>
+                    <Text theme='h1' style={{ marginRight:20, marginLeft:20 }}>VS</Text>
+                    <Image
+                        source={{ uri: event?.home?.image?.url }}
+                        style={{ height:40, width:40, marginRight:10 }}
+                        resizeMode='cover'
+                    />
+                    <Text theme='h2'>{event.home?.market_name}</Text>
+                </View>
+                :<></>}
+            {player ?
+            <View>
+                <Image
+                    source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:200, width:350 }}
+                    resizeMode='cover'
+                />
+                
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    {team ?
+                    <Image
+                        source={{ uri: team.image?.url }}
+                        style={{ height:60, width:60 }}
+                        resizeMode='cover'
+                    />
+                    :athlete ?
+                    <Image
+                        source={{ uri: athlete.image?.url }}
+                        style={{ height:60, width:60 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                    
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='h1'>{order.title}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>{MarketComponentHelpers.getOddsLabel(order.odds)} {`\u2022`} {(order.probability * 100).toFixed(2)}%</Text>
+                    </View>
+                    {order.grade ?
+                    <OrderGradeBar
+                        grade={order.grade}
+                        view_type='card'
+                    />
+                    :<></>}
+                </View>
+            </View>
+            :<></>}
+            
+            </View>
+            <View type='header' style={{alignItems:'center', padding:10}}>
+                <QRCode
+                    size={100}
+                    value={`https://play.bettoredge.com/markets?order=${order.order_id}&type=fade`}
+                />
+                <Text textAlign='center' theme='h2' style={{ marginTop:4 }}>FADE ME NOW!</Text>
+            </View>
+            <View type='footer' style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8,  }}>
+                <ProgressTimer
+                    onTimesUp={() => onClose()}
+                    time_id={order.order_id.toString()}
+                    total_time={15}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default BetAlert

package/src/Campaign/components/CampaignAnalytics.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { View } from "../../Components/Themed"
+import moment from 'moment-mini';
+import { CampaignApi, CampaignHelpers } from '../api';
+import type { OrderAnalyticsProps } from '../../types';
+
+
+type CampaignAnalyticsProps = {
+    campaign_id:string
+}
+
+const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
+    
+    const time_options = [
+        { label: 'Last 7 Days', to: moment().unix(), from: moment().subtract(7, 'days').unix() }
+    ]
+
+    const [ module_state, setModuleState ] = useState<{
+        loading:boolean,
+        time_option: any,
+        analytics:OrderAnalyticsProps[]
+    }>({
+        loading:false,
+        time_option: time_options[0],
+        analytics: []
+    });
+    const { analytics } = module_state;
+
+    useEffect(() => {
+        let option = time_options[0]
+        if(!option){ return }
+        handleLoadAnalytics(option);
+    },[])
+
+    const handleLoadAnalytics = async(option:{ label:string, to:number, from:number }) => {
+        CampaignApi.setEnvironment();
+        const analytics = await CampaignApi.getCampaignAnalytics(campaign_id, option.to, option.from);
+        setModuleState({
+            ...module_state,
+            time_option: option,
+            analytics
+        })
+    }
+
+    const agg = CampaignHelpers.aggregateAnalytics(analytics)
+    console.log(agg)
+    return (
+        <View>
+
+        </View>
+    )
+}
+
+export default CampaignAnalytics

package/src/Campaign/components/ParticipantCard.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Text, View } from "../../Components/Themed"
+import type { CampaignParticipantProps, EventProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps } from "../../types"
+import { Image } from 'react-native';
+import moment from 'moment-mini';
+import ActionList from './ActionList';
+import { CampaignHelpers } from '../api';
+import AnalyticsCard from './AnalyticsCard';
+
+type ParticipantCardProps = {
+    campaign_participant:CampaignParticipantProps,
+    player:PublicPlayerProps,
+    orders:OrderProps[],
+    analytics:OrderAnalyticsProps[],
+    events:EventProps[]
+}
+const ParticipantCard = ({ player, campaign_participant, orders, events, analytics }:ParticipantCardProps) => {
+    const agg = CampaignHelpers.aggregateAnalytics(analytics);
+    
+    return (
+        <View transparent style={{ marginTop:65, flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View float style={{ padding:2, borderRadius:100, marginTop:-65, marginLeft:10 }}>
+                    <Image
+                        source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                        style={{ height:100, width:100, borderRadius:100}}
+                    />
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>@{player.username}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{player.bio ?? `Last visited ${moment(campaign_participant.last_update_datetime).fromNow()}`}</Text>
+                </View>
+            </View>
+            <View type='header' style={{ flexDirection:'row', padding:6 }}>
+                <View transparent style={{ margin:4, flex:1 }}>
+                    <AnalyticsCard
+                        label='Bets Fulfilled'
+                        value={agg.fulfilled_positions}
+                        success_limit={0}
+                        value_label={agg.fulfilled_positions.toString()}
+                    />
+                </View>
+                <View transparent style={{ margin:4, flex:1 }}>
+                    <AnalyticsCard
+                        label='ROI %'
+                        value={agg.roi_pct}
+                        success_limit={0}
+                        value_label={`${(agg.roi_pct * 100).toFixed(2)}%`}
+                    />
+                </View>
+                <View transparent style={{ margin:4, flex:1 }}>
+                    <AnalyticsCard
+                        label={`Win %`}
+                        value={agg.win_pct}
+                        success_limit={0.5}
+                        value_label={`${(agg.win_pct * 100).toFixed(2)}%`}
+                    />
+                </View>
+               
+            </View>
+            <View transparent style={{ flex:1 }}>
+                <View type='header' style={{ flexDirection:'row', padding:10 }}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>Recent Action</Text>
+                        <Text theme='description' style={{ marginTop:4 }}>Bets recently placed by @{player.username}</Text>
+                    </View>
+                </View>
+                <ActionList
+                    orders={orders}
+                    players={[player]}
+                    events={events}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ParticipantCard

package/src/Campaign/components/ParticipantsList.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { CampaignParticipantProps, PublicPlayerProps } from "../../types"
+import { FlatList, Image } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import moment from 'moment-mini';
+
+type CampaignParticipantListProps = {
+    campaign_participants:CampaignParticipantProps[],
+    players:PublicPlayerProps[],
+    selected_participant?:string,
+    horizontal?:boolean,
+    onSelect:(cp:CampaignParticipantProps) => void,
+    onDeselect: (cp:CampaignParticipantProps) => void
+
+}
+
+const ParticipantsList = ({ campaign_participants, players, selected_participant, horizontal, onSelect, onDeselect }:CampaignParticipantListProps) => {
+    const [ participant_page ] = useState(1);
+    const Colors = useColors();
+    const visible_participants = campaign_participants.sort((a,b) => a.status.localeCompare(b.status) || moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).slice((participant_page-1) * 5, ((participant_page-1) * 5) + 5)
+
+    const renderParticipants = (data:{ item:CampaignParticipantProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        const active = data.item.status == 'active' ? true : false
+        if(!player){ return <></> }
+        const selected = data.item.campaign_participant_id == selected_participant ? true : false
+        return (
+            <Button float 
+            style={{ flexDirection:horizontal?'column':'row', alignItems:'center', borderRadius:100, margin:8, padding:2, borderWidth:selected || active?2:0, borderColor:selected?Colors.text.action:active?Colors.text.success:'transparent' }}
+            onPress={() => selected ? onDeselect(data.item) : onSelect(data.item)}>
+                <Image
+                    source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:50, width:50, borderRadius:100 }}
+                />
+                {!horizontal ?
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h2'>@{player.username}</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Visited {moment(data.item.last_update_datetime).fromNow()}</Text>
+                </View>
+                :<></>}
+            </Button>
+        )
+    }
+
+    return (
+        <View type='header' style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1, marginRight:10 }}>
+                    <Text theme='h1'>Participants</Text>
+                    <Text theme='description' style={{ marginTop:4 }}>Check out who is participating here!</Text>
+                </View>
+                <View transparent style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' color={Colors.text.action}>{campaign_participants.length}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Participants</Text>
+                </View>
+            </View>
+            <FlatList
+                data={visible_participants}
+                renderItem={renderParticipants}
+                horizontal={horizontal}
+                key={'campaign_particpant_list'}
+                keyExtractor={(item) => item.campaign_participant_id.toString()}
+            />
+        </View>
+    )
+}
+
+export default ParticipantsList