be-components 5.0.8 → 5.0.9

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

package/src/Campaign/components/ProgressTimer.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useEffect, useState } from "react";
+import { ProgressBar } from "../../Components";
+import { useColors } from "../../constants/useColors";
+
+type ProgressTimerProps = {
+    total_time:number,
+    time_id:string,
+    update_multiplier?: number
+    onTimesUp:() => void
+}
+
+const ProgressTimer = ({total_time, time_id, onTimesUp}:ProgressTimerProps) => {
+    const Colors = useColors();
+    const [ started, setStarted ] = useState(false);
+     const [ seconds_remaining, setSecondsRemaining ] = useState(0);
+
+    useEffect(() => {
+        if(!time_id){ return }
+        setSecondsRemaining(total_time);
+        setStarted(true);
+    },[time_id])
+
+    useEffect(() => {
+        if(!started){ return }
+        if(seconds_remaining > 0){
+            setTimeout(() => setSecondsRemaining(seconds_remaining - 1), 1000);
+        } else {
+            onTimesUp();
+            setStarted(false);
+        }
+    },[seconds_remaining])
+
+
+    if(seconds_remaining == 0){ return <></> }
+    return (
+        <ProgressBar
+            max_value={total_time}
+            hide_labels
+            current_value={seconds_remaining}
+            background_color={Colors.views.background}
+            fill_color={Colors.text.action}
+        />
+    )
+}
+
+export default ProgressTimer

package/src/Campaign/index.tsx

@@ -0,0 +1,377 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, Image, useWindowDimensions } from "react-native"
+import { Button, Text, View } from '../../src/Components/Themed';
+import type { AthleteProps, CampaignParticipantProps, CampaignProps, EventProps, MarketProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps, TeamProps } from '../../src/types';
+import { CampaignApi, CampaignHelpers } from '../../src/Campaign/api';
+
+import { MarketComponentApi } from '../../src/MarketComponents/api';
+import { useColors } from '../../src/constants/useColors';
+import moment from 'moment-mini';
+import QRCode from 'react-qr-code';
+import TickerApp from '../Ticker';
+import BetAlert from './components/BetAlert';
+import ParticipantsList from './components/ParticipantsList';
+import ParticipantCard from './components/ParticipantCard';
+import CampaignAnalytics from './components/CampaignAnalytics';
+import AutoManager from './components/AutoManager';
+
+type CampaignAppProps = {
+    player_id?:string,
+    campaign_id:string,
+    distinct_id:string,
+    color_mode?:'light'|'dark',
+    action_loading?:boolean,
+    insets?:{ bottom:number, top:number, left:number, right:number },
+    onBetNow?:() => void,
+    onViewProfile?:(player:PublicPlayerProps) => void,
+    onH2HChallenge?:(player:PublicPlayerProps) => void,
+    onCheckIn?:() => void,
+    my_participant?:CampaignParticipantProps
+    auto?:boolean
+}
+
+const HEADER_HEIGHT = 75
+
+const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_participant, action_loading, onCheckIn, onBetNow }:CampaignAppProps) => {
+    const Colors = useColors();
+    const [ new_bet_alert, setNewBetAlert ] = useState<OrderProps | undefined>(undefined);
+    //const [ refresh, setRefresh ] = useState(0);
+    const [ cta_type, setCTAType ] = useState<'ad'|'participant'>('participant');
+    const [ selected_ad, setSelectedAd ] = useState<any>(undefined);
+    const { width, height } = useWindowDimensions();
+    const time_options = CampaignHelpers.getTimeOptions();
+    const participants_location = width > 1200 ? 'left' : 'top';
+    //const ad_location = width > 1200 ? 'right': 'bottom';
+    const ticker_visible = width > 1200 ? true : false
+
+    const [ selected_participant, setSelectedParticipant ] = useState<CampaignParticipantProps|undefined>(undefined);
+    const [ new_event, setNewEvent ] = useState<EventProps|undefined>(undefined);
+    const [ analytics, setAnalytics ] = useState<OrderAnalyticsProps[]>([]);
+    const [ embed_state, setEmbedState ] = useState<{
+        loading:boolean,
+        campaign?:CampaignProps,
+        participant_page:number,
+        action_page:number,
+        campaign_participants:CampaignParticipantProps[],
+        teams:TeamProps[],
+        athletes:AthleteProps[],
+        markets:MarketProps[],
+        orders:OrderProps[],
+        events:EventProps[],
+        players:PublicPlayerProps[]
+    }>({
+        loading:false,
+        campaign_participants:[],
+        events:[],
+        athletes:[],
+        participant_page: 0,
+        markets:[],
+        action_page:0,
+        orders:[],
+        players:[],
+        teams:[]
+    });
+    const  { orders, events, athletes, campaign, participant_page, action_page, campaign_participants, players, teams, } = embed_state;
+    //const visible_orders = orders.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).slice((action_page-1) * 5, ((action_page-1) * 5) + 5)
+
+    useEffect(() => {
+        if(!campaign_id){ return }
+        startUp(campaign_id);
+    },[campaign_id]);
+
+
+    useEffect(() => {
+        if(!new_event){ return }
+        setEmbedState({
+            ...embed_state,
+            events: events.filter(e => e.event_id != new_event.event_id).concat(new_event)
+        })
+        setNewEvent(undefined);
+    },[new_event])
+
+    const startUp = async(campaign_id:string) => {
+        CampaignApi.setEnvironment();
+        MarketComponentApi.setEnvironment();
+        getData(campaign_id, false)
+    }
+
+    const handleLoadAnalytics = async(option?:{ label:string, to:number, from:number }) => {
+        if(!option){ return }
+        const analytics = await CampaignApi.getCampaignAnalytics(campaign_id, option.to, option.from);
+        setAnalytics(analytics);
+    }
+
+    const getData = async(campaign_id:string, check_bets?:boolean) => {
+        setEmbedState({ ...embed_state, loading:true });
+        const c_resp = await CampaignApi.getCampaignById(campaign_id);
+        const pls = await CampaignApi.getPlayersByPlayerIds(c_resp.campaign_participants.map(p => p.player_id));
+        let tm_ids = c_resp.campaign_participants.map(cp => cp.payload?.team_id)
+        let aths_ids = c_resp.campaign_participants.map(cp => cp.payload?.athlete_id);
+        const ords = await CampaignApi.getCampaignAction(campaign_id);
+        let vis_ords = [ ...ords ]
+        let ev_ids = ords.filter(o => o.event_type == 'team').map(o => o.event_id);
+        const action_pages = Math.ceil(vis_ords.length / 5);
+        const participant_pages = Math.ceil(c_resp.campaign_participants.length / 5);
+        let next_participant_page = participant_page + 1
+        if(next_participant_page > participant_pages){ next_participant_page = 1 }
+
+        let next_action_page = action_page + 1
+        if(next_action_page > action_pages){ next_action_page = 1 }
+        handleLoadAnalytics(time_options[0]);
+        if(check_bets){
+            let new_bet = vis_ords.find(o => !orders.map(old_o => old_o.order_id.toString()).includes(o.order_id.toString()))
+            if(new_bet){
+                setNewBetAlert(new_bet);
+                if(new_bet.event_type == 'team'){ ev_ids.push(new_bet.event_id) }
+                if(new_bet.side_type == 'team'){ tm_ids.push(new_bet.side_id) }
+                if(new_bet.side_type == 'athlete'){ aths_ids.push(new_bet.side_id) }
+            }
+        }
+        
+        const evs = await MarketComponentApi.getEventsByEventIds(ords.filter(o => o.event_type == 'team').map(o => o.event_id));
+        const tms = await MarketComponentApi.getTeamsByIds(tm_ids);
+        const aths = await MarketComponentApi.getAthletesByIds(aths_ids);
+
+        setEmbedState({
+            ...embed_state,
+            players:pls, 
+            campaign: c_resp.campaign,
+            campaign_participants: c_resp.campaign_participants,
+            teams: tms,
+            athletes: aths,
+            participant_page: next_participant_page,
+            action_page: next_action_page,
+            events: evs,
+            orders: vis_ords,
+            loading:false
+        })
+        
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'ticker':
+                if(!ticker_visible){ return <></> }
+                return (
+                    <TickerApp
+                        league_ids={campaign?.league_ids ?? []}
+                        distinct_id={distinct_id}
+                        color_mode={color_mode}
+                        onOrders={async(orders) => {
+                            //find if the orders are new!
+                            let new_bet = orders.find(o => o.campaign_id && moment().diff(moment(o.create_datetime), 'milliseconds') < 5000);
+                            if(new_bet){ 
+                                let og_bet = await MarketComponentApi.getOrderById(new_bet.order_id);
+                                if(!og_bet){ return }
+                                let ev = events.find(e => e.event_id == og_bet.event_id);
+                                if(!ev){
+                                    let evs = await MarketComponentApi.getEventsByEventIds([new_bet.event_id]);
+                                    setNewEvent(evs[0])
+                                }
+                                setNewBetAlert(og_bet) 
+                            }
+                        }}
+                    />
+                )
+            case 'participant':
+                if(participants_location == 'left'){ return <></> }
+                if(!selected_participant){ return <></> }
+                const player = players.find(p => p.player_id == selected_participant.player_id)
+                if(!player){ return <></> }
+                return (
+                    <ParticipantCard
+                        campaign_participant={selected_participant}
+                        player={player}
+                        analytics={analytics.filter(a => a.player_id == player.player_id)}
+                        orders={orders.filter(o => o.player_id == player.player_id)}
+                        events={events}
+                    />
+                )
+            default: return <></>
+        }
+    }
+
+    /*
+    const renderParticipants = (data: { item:CampaignParticipantProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        const team = teams.find(t => t.team_id == data.item.payload?.team_id);
+        return (
+            <View float style={{ margin:5, padding:5, borderRadius:100}}>
+                <View transparent style={{ flexDirection:'row' }}>
+                    <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='h2'>@{player.username}</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Arrived @ {moment(data.item.create_datetime).format('MMM DD hh:mm a')}</Text>
+                    </View>
+                    {team ?
+                    <Image
+                        source={{ uri: team.image?.url }}
+                        style={{ height:35, width:35, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                </View>
+            </View>
+        )
+    }
+        */
+
+
+    const new_bet_player = players.find(p => p.player_id == new_bet_alert?.player_id);
+    const new_bet_team = teams.find(t => t.team_id == new_bet_alert?.side_id);
+    const new_bet_athlete = athletes.find(a => a.athlete_id == new_bet_alert?.side_id);
+    const new_bet_event = events.find(e => e.event_id == new_bet_alert?.event_id);
+    //const new_bet_market = markets.find(m => m.market_id == new_bet_alert?.market_id);
+
+    const selected_player = players.find(p => p.player_id == selected_participant?.player_id);
+
+    return (
+        <View style={{ flex:1 }}>
+            {campaign ?
+            <View type='header' style={{ height:HEADER_HEIGHT, padding:10, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Image
+                    source={{ uri: campaign.campaign_image?.url }}
+                    style={{ height:55, width:55 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:20 }}>
+                    <Text theme='h1' size={18}>{campaign.campaign_name}</Text>
+                    <Text theme='description' style={{ marginTop:4 }}>{campaign.description}</Text>
+                </View>
+                <View transparent style={{ width:250 }}>
+                    <AutoManager
+                        campaign_participants={campaign_participants}
+                        orders={orders}
+                        campaign={campaign}
+                        active={auto ? true : false}
+                        analytics={analytics}
+                        onChangeAd={(ad) => {
+                            setCTAType('ad');
+                            setSelectedAd(ad);
+                        }}
+                        onChangeParticipant={(cp) => {
+                            setCTAType('participant');
+                            setSelectedParticipant(cp)
+                        }}
+                    />
+                </View>
+            </View>
+            :<></>}
+            
+            <CampaignAnalytics
+                campaign_id={campaign_id}
+            />
+            {participants_location == 'top' ?
+            <View style={{ borderRightWidth:1, borderColor:Colors.borders.light }}>
+                <ParticipantsList
+                    campaign_participants={campaign_participants}
+                    players={players}
+                    selected_participant={selected_participant?.campaign_participant_id}
+                    horizontal
+                    onDeselect={() => setSelectedParticipant(undefined)}
+                    onSelect={(cp) => setSelectedParticipant(cp)}
+                />
+            </View>
+            :<></>}
+            <View style={{ flex:1, flexDirection:'row' }}>
+                {participants_location == 'left' ?
+                <View transparent style={{ width:400 }}>
+                    <ParticipantsList
+                        campaign_participants={campaign_participants}
+                        players={players}
+                        selected_participant={selected_participant?.campaign_participant_id}
+                        onSelect={(cp) => setSelectedParticipant(cp)}
+                        onDeselect={() => setSelectedParticipant(undefined)}
+                    />
+                    <View type='header' style={{ padding:20, justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='h1' style={{ marginBottom:20 }}>SCAN TO CHECK IN NOW</Text>
+                        <QRCode
+                            size={250}
+                            value={`https://play.bettoredge.com/social/campaign/${campaign_id}`}
+                            
+                        />
+                    </View>
+                </View>
+                :<></>}
+                <View style={{ flex:1, height:height - HEADER_HEIGHT }}>
+                    <FlatList
+                        data={['ticker','participant']}
+                        key={'list_items'}
+                        showsVerticalScrollIndicator={false}
+                        keyExtractor={item => item}
+                        renderItem={renderSections}
+                    />
+                </View>
+                
+                {campaign && participants_location == 'left' ?
+                <View type='header' style={{ width:400, height:height - HEADER_HEIGHT }}>
+                    {cta_type == 'participant' && selected_player && selected_participant ?
+                    <ParticipantCard
+                        campaign_participant={selected_participant}
+                        player={selected_player}
+                        events={events}
+                        analytics={analytics.filter(a => a.player_id == selected_participant.player_id)}
+                        orders={orders.filter(o => o.player_id == selected_participant.player_id)}
+                    />
+                    :cta_type == 'ad' && selected_ad?.url ?
+                    <View transparent>
+                        <Image
+                            source={{ uri: selected_ad.url }}
+                            style={{ width: (height-HEADER_HEIGHT) * 0.2857, height:height - HEADER_HEIGHT, alignSelf:'center'}}
+                            resizeMode='contain'
+                        />
+                    </View>
+                    :<></>}
+                </View>
+                :<></>}
+            </View>
+            
+            <View type='footer' style={{ flexDirection:'row', padding:10, paddingBottom:(insets?.bottom ?? 0) + 10}}>
+                {onBetNow ?
+                <Button
+                    type='action'
+                    style={{ flex:1, justifyContent:'center', marginRight:4 }}
+                    title={'Bet Now!'}
+                    onPress={() => onBetNow()}
+                />
+                :<></>}
+                {my_participant?.status == 'active' ?
+                <Button
+                    type='success'
+                    style={{ flex:2, opacity:0.5, alignItems:'center' }}
+                    title={'Checked In!'}
+                    disabled
+                />
+                : onCheckIn ?
+                <Button
+                    type='success'
+                    style={{ flex:2 }}
+                    loading={action_loading}
+                    disabled={action_loading}
+                    title="Check In Now"
+                    onPress={() => onCheckIn()}
+                />
+                :<></>}
+            </View>
+            {new_bet_alert ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', paddingTop:100 }}>
+                <BetAlert
+                    order={new_bet_alert}
+                    event={new_bet_event}
+                    player={new_bet_player}
+                    team={new_bet_team}
+                    athlete={new_bet_athlete}
+                    onClose={() => setNewBetAlert(undefined)}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default Campaign

package/src/Components/ConfirmationModal.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
-import { Image, Modal } from "react-native"
+import React, { useState } from 'react';
+import { Image, Linking, Modal } from "react-native"
 import { Button, Text, View } from './Themed';
+import Checkbox from './Checkbox';
+import { useColors } from '../constants/useColors';
 
 
 type ConfirmationModalProps = {
@@ -10,13 +12,15 @@ type ConfirmationModalProps = {
     description?:string,
     confirm_title?:string,
     padding_bottom?:number,
+    opt_in_url?:string,
     cancel_title?:string,
     image?:string,
     onCancel?: () => void,
     onConfirm: () => void
 }
-const ConfirmationModal = ({ visible, mode, title, padding_bottom, image, description, confirm_title, cancel_title, onCancel, onConfirm }:ConfirmationModalProps) => {
-
+const ConfirmationModal = ({ visible, mode, title, opt_in_url, padding_bottom, image, description, confirm_title, cancel_title, onCancel, onConfirm }:ConfirmationModalProps) => {
+    const [ opted_in, setOptedIn ] = useState(true);
+    const Colors = useColors();
     return (
         <Modal 
             visible={visible}
@@ -38,6 +42,18 @@ const ConfirmationModal = ({ visible, mode, title, padding_bottom, image, descri
                         :<></>}
                         <Text size={14} theme='h2' textAlign='center' weight='semibold'>{description}</Text>
                     </View>
+                    {opt_in_url?
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <Checkbox
+                            checked={opted_in}
+                            color={Colors.text.action}
+                            onSelect={() => setOptedIn(!opted_in)}
+                        />
+                        <Button type='text' style={{ flex:1, marginLeft:5 }} onPress={() => Linking.openURL(opt_in_url)}>
+                            <Text theme='description' color={Colors.text.action}>By confirming you are agreeing to the terms and conditions outlined here HERE</Text>
+                        </Button>
+                    </View>
+                    :<></>}
                     <View type='footer' style={{ padding:10, flexDirection:'row' }}>
                         {onCancel?
                         <Button
@@ -49,7 +65,8 @@ const ConfirmationModal = ({ visible, mode, title, padding_bottom, image, descri
                         :<></>}
                         <Button
                             title={confirm_title ?? 'CONFIRM'}
-                            style={{ flex:1, marginLeft:5 }}
+                            style={{ flex:1, marginLeft:5, opacity:!opted_in && opt_in_url ? 0.5: 1 }}
+                            disabled={opt_in_url && !opted_in ? true : false}
                             type='success'
                             onPress={() => onConfirm()}
                         />

package/src/Components/Icons.tsx

@@ -1443,6 +1443,24 @@ const FilterIcon = ({ color, size }:IconProps) => {
     )
 }
 
+const BarstoolIcon = ({ color, size }:IconProps) => {
+    const ratio = 0.718
+    const height = size ?? 18
+    const width = height * ratio
+    return (
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 23 32">
+            <G id="app-icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <G id="bar-chair-svgrepo-com" transform="translate(1.000000, 1.000000)" stroke={color ?? Colors.brand.midnight} stroke-width="2">
+                    <Path d="M0.0472499134,7.40626782 C-0.364035035,4.09285824 1.95287968,1.04649362 5.31310426,0.48252369 L5.90944418,0.382443702 C8.9476488,-0.127481234 12.0523484,-0.127481234 15.090598,0.382443702 L15.686848,0.48252369 C19.0471475,1.04649362 21.3640472,4.09285824 20.9527473,7.40626782 L20.9257473,7.6240978 C20.8282473,8.4094527 20.1472474,9 19.3391975,9 L1.66078471,9 C0.852704813,9 0.171779898,8.4094527 0.07429491,7.6240978 L0.0472499134,7.40626782 Z" id="Path"></Path>
+                    <Line x1="5.99999917" y1="9.00000262" x2="1.49999973" y2="30" id="Path" strokeLinecap="round"></Line>
+                    <Line x1="14.999998" y1="9.00000262" x2="19.4999975" y2="30" id="Path" strokeLinecap="round"></Line>
+                    <Line x1="17.9999977" y1="22.5000009" x2="2.99999954" y2="22.5000009" id="Path" strokeLinecap="round"></Line>
+                </G>
+            </G>
+        </Svg>
+    )
+}
+
 
 
 export default {
@@ -1453,6 +1471,7 @@ export default {
     //BetScopeSuccessIcon,
     AlertIcon,
     QuestionIcon,
+    BarstoolIcon,
     FilterIcon,
     PieIcon,
     BankIcon,

package/src/Components/ProgressBar.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { useColors } from '../constants/useColors';
+import { Text } from './Themed';
+
+type ProgressBarProps = { 
+    hide_labels?:boolean, 
+    height?:number, 
+    max_value:number, 
+    current_value:number, 
+    background_color:string, 
+    fill_color:string, 
+    max_label?:string, 
+    val_color?:string,
+    val_label?:string,
+    val_format?: {
+        loc: 'front'|'back',
+        label: string
+    }
+}
+
+const ProgressBar = ({ max_value, val_format, val_color, current_value, height, hide_labels, background_color, fill_color, max_label, val_label }:ProgressBarProps) => {
+    const Colors = useColors();
+    const [ progressSize, setProgressSize ] = useState({ x:0, y:0, width:0, height:0 })
+
+    const getProgressWidth = (current_value:number) => {
+        let progress = current_value / max_value
+        if(progress > 1){ progress = 1 }
+        return progressSize.width * progress
+    }
+
+
+    return (
+        <View style={{ padding:10 }}>
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1, padding:height??8, backgroundColor:background_color??Colors.views.header, borderRadius:4 }} onLayout={(ev) => {
+                const { x, y, width, height } = ev.nativeEvent.layout
+                setProgressSize({ x, y, width, height })
+            }}>
+                    <View style={{ borderRadius:4, position:'absolute', backgroundColor:fill_color??Colors.text.h1, left:0, top:0, width:getProgressWidth(current_value??0), height:progressSize.height }} />
+                </View>
+            </View>
+            {!hide_labels ?
+            <View style={{ flexDirection:'row', justifyContent:'space-between', alignItems:'center', marginTop:10}}>
+                <Text size={12} color={val_color ?? Colors.text.h1}>{val_label?`${val_label}: `:''}{val_format?.loc=='front'?val_format.label:''}{current_value?.toFixed(2)}{val_format?.loc=='back'?val_format.label:''}</Text>
+                <Text size={12} color={Colors.text.h1}>{max_label?`${max_label}: `:''}{val_format?.loc=='front'?val_format.label:''}{max_value?.toFixed(2)}{val_format?.loc=='back'?val_format.label:''}</Text>
+            </View>
+            :<></>}
+        </View>
+        
+    )
+}
+
+export default ProgressBar

package/src/Components/index.tsx

@@ -8,13 +8,14 @@ import LinearDiagnal from './LinearDiagnal';
 import Switch from './Switch';
 import ConfirmationModal from './ConfirmationModal';
 import Toggle from './Toggle';
-
+import ProgressBar from './ProgressBar';
 export {
     Button,
     Text,
     Spring,
     Switch,
     TextInput,
+    ProgressBar,
     Checkbox,
     Toggle,
     Icons,