be-components 5.9.6 → 5.9.8

package/src/MarketComponents/components/MarketManager/index.tsx

@@ -0,0 +1,392 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../../../Components/Themed"
+import type { AthleteProps, EventProps, MarketProps, MarketStatsProps, MatchProps, TeamProps, TournamentProps } from '../../../types';
+import { MarketComponentApi, MarketComponentHelpers } from '../../api';
+import { Alert, FlatList, Platform } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { AthleteImage, TeamImage } from '../../../Components/Jerseys';
+import MarketRollbackForm from './MarketRollbackForm';
+import MarketResolveForm from './MarketResolveForm';
+
+type MarketManagerProps = {
+    player_id?:string,
+    contest_type:string,
+    contest_id:string,
+    onClose:() => void
+}
+
+const manage_sections = ['header','total_stats','markets','orders']
+
+const MarketManager = ({ player_id, contest_type, contest_id, onClose }:MarketManagerProps) => {
+    const Colors = useColors();
+    const [ rollback, setRollback ] = useState<{
+        visible:boolean,
+        market?:MarketProps,
+        side_type?:string,
+        side_id?:string
+    }>({
+        visible: false
+    });
+
+    const [ resolve, setResolve ] = useState<{
+        visible:boolean,
+        market?:MarketProps,
+        side_type?:string,
+        side_id?:string
+    }>({
+        visible: false
+    });
+
+    const [ active_market, setActiveMarket ] = useState<MarketProps|undefined>(undefined);
+    const [ form_data, setFormData ] = useState<{
+        loading: boolean,
+        action_loading:boolean,
+        markets:MarketProps[],
+        market_stats:MarketStatsProps[],
+        athletes:AthleteProps[],
+        teams:TeamProps[],
+        event?:EventProps,
+        tournament?:TournamentProps,
+        match?:MatchProps,
+    }>({
+        loading:false,
+        action_loading:false,
+        athletes: [],
+        teams:[],
+        markets: [],
+        market_stats: []
+    });
+    const {  market_stats, event, tournament, match, markets, athletes, teams } = form_data;
+    const { closed, total_volume, commission, routing_prem, reconciliation, total_unresolved } = MarketComponentHelpers.getReconFromMarketStats(market_stats);
+    const { contest_title } = MarketComponentHelpers.getContestDetails(contest_type, event, tournament, match);
+    const supported_markets = MarketComponentHelpers.sortMarketStats(market_stats, MarketComponentHelpers.getSupportedMarkets(contest_type, markets, event, tournament, match));
+
+    const selected_market_stats = market_stats.filter(s => s.market_id == active_market?.market_id);
+    const selected_stats = MarketComponentHelpers.getReconFromMarketStats(selected_market_stats);
+
+
+    const overall_resolve = selected_stats.total_unresolved > 0 ? true : false
+    const overall_rollback = selected_stats.total_paid > 0 ? true : false
+    useEffect(() => {
+        if(!player_id){ return }
+        if(!contest_id){ return }
+        getData();
+    },[player_id, contest_id]);
+
+    const getContest = async() => {
+        let ev:EventProps | undefined = undefined
+        let mtch:MatchProps | undefined = undefined
+        let tn:TournamentProps | undefined = undefined
+        switch(contest_type){
+            case 'team':
+                let evs = await MarketComponentApi.getEventsByEventIds([contest_id]);
+                ev = evs[0]
+                break
+            case 'match':
+                let mtchs = await MarketComponentApi.getMatchesByMatchIds([contest_id]);
+                mtch = mtchs[0]
+                if(mtch){
+                    let mt_tns = await MarketComponentApi.getTournamentsByTournamentIds([contest_id]);
+                    tn = mt_tns[0]
+                }
+                break
+            case 'tournament':
+                let tns = await MarketComponentApi.getTournamentsByTournamentIds([contest_id]);
+                tn = tns[0]
+                break
+            default: break
+        }
+        return { event:ev, tournament: tn, match: mtch }
+    }
+
+    const getReconColor = (recon:number) => {
+        if(!closed){ return Colors.text.warning }
+        if(recon < 0){ return Colors.text.error }
+        return Colors.text.success
+    }
+
+    const getData = async() => {
+        MarketComponentApi.setEnvironment();
+        setFormData({ ...form_data, loading:true });
+        const me = await MarketComponentApi.getMyDetails();
+        if(me?.role != 'admin'){ return Alert.alert('Not authorized to view this!') }
+        const mk_stats = await MarketComponentApi.getMarketStatsByEvent(contest_id, contest_type);
+        let contest_resp = await getContest();
+        const mkets = await MarketComponentApi.getMarkets();
+        let team_ids = mk_stats.filter(s => s.side_type == 'team').map(s => s.side_id);
+        let athlete_ids = mk_stats.filter(s => s.side_type == 'athlete').map(s => s.side_id);
+        let tms = await MarketComponentApi.getTeamsByIds(team_ids);
+        let aths = await MarketComponentApi.getAthletesByIds(athlete_ids);
+        setFormData({
+            ...form_data,
+            loading:false,
+            markets:mkets,
+            teams: tms,
+            athletes: aths,
+            event: contest_resp.event,
+            match: contest_resp.match,
+            tournament: contest_resp.tournament,
+            market_stats: mk_stats.filter(mk => mk.market_type == 'FOR_MONEY')
+        });
+    }
+
+    const handleExpire = async(order_ids:string[]) => {
+        if(!active_market){ return }
+        if(Platform.OS == 'web'){
+            const confirmed = await confirm('Are you sure? This will update the expiration times to now.  It may take up to 1 minute for the orders to be closed and refunded')
+            if(!confirmed){ return }
+            return await MarketComponentApi.expireOpenOrders(contest_id, contest_type, active_market.market_id, order_ids) 
+        } else {
+            Alert.alert('Are you sure?', 'This will update the expiration times to now.  It may take up to 1 minute for the orders to be closed and refunded', [
+                {
+                    text: 'Cancel',
+                    style:'cancel',
+                    onPress:() => console.log('Done')
+                },
+                {
+                    style: 'destructive',
+                    text: 'Confirm',
+                    onPress:async() => {
+                        await MarketComponentApi.expireOpenOrders(contest_id, contest_type, active_market.market_id, order_ids) 
+                    }
+                }
+            ]);
+            return true
+        }
+        
+    }
+
+    const renderMarketStats = (data:{ item:MarketStatsProps, index:number }) => {
+        if(data.item.status == 'cancelled' && data.item.called_amt < 0.01){ return <></> }
+        if(data.item.buy_sell_ind == 'sell' && data.item.status != 'approved'){ return <></> }
+        const athlete = athletes.find(a => a.athlete_id == data.item.side_id);
+        const team = teams.find(t => t.team_id  == data.item.side_id);
+        const mk_agg = MarketComponentHelpers.getReconFromMarketStats([data.item]);
+        const market = markets.find(m => m.market_id == data.item.market_id);
+        if(!market){ return <></> }
+        const rollback_allowed = market.level != 'event' && mk_agg.total_paid > 0 ? true : false
+        const resolve_allowed = market.level != 'event' && mk_agg.total_unresolved > 0 ? true : false
+        return (
+            <View type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:5 }}>
+                {data.item.side_type == 'athlete' && athlete ?
+                <View>
+                    <AthleteImage
+                        athlete={athlete}
+                        size={32}
+                    />
+                </View>
+                :data.item.side_type == 'team' && team ?
+                <View>
+                    <TeamImage
+                        team={team}
+                        size={16}
+                    />
+                </View>
+                :<></>}
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h2'>{data.item.title}</Text>
+                    <Text theme='light' size={10} style={{ marginTop:3 }}>{data.item.buy_sell_ind.toUpperCase()}: {data.item.status.toUpperCase()}</Text>
+                </View>
+                <View style={{ alignItems:'flex-end' }}>
+                    <Text color={getReconColor(mk_agg.total_unresolved * -1)}>${mk_agg.total_unresolved.toFixed(2)}</Text>
+                    <Text theme='light' textAlign='right'>Unresolved</Text>
+                </View>
+                {data.item.open_amt > 0 && data.item.status == 'approved' ?
+                <View style={{ alignItems:'flex-end', marginLeft:5, paddingLeft:5, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='description'>${data.item.open_amt.toFixed(2)}</Text>
+                    <Text theme='light' textAlign='right'>Open</Text>
+                </View>
+                :<></>}
+                <View nativeID='actions' style={{ marginLeft:5, flexDirection:'row' }}>
+                    {data.item.status == 'approved' ?
+                    <Button    
+                        style={{ padding:10 }}
+                        type='error'
+                        onPress={() => handleExpire(data.item.order_ids)}>
+                            <Text theme='h1' color={Colors.text.white} size={10}>CLEAR</Text>
+                    </Button>
+                    :<></>}
+                    {resolve_allowed ?
+                     <Button
+                        style={{ padding:10, marginLeft:5 }}
+                        type='success'
+                        onPress={() => setResolve({ ...resolve, visible: true, side_type: data.item.side_type, side_id: data.item.side_id, market:market })}>
+                            <Text theme='h1' color={Colors.text.white} size={10}>RESOLVE</Text>
+                    </Button>
+                    :<></>}
+                    {rollback_allowed ?
+                    <Button
+                        style={{ padding:10, marginLeft:5 }}
+                        title_color={Colors.text.white}
+                        backgroundColor={Colors.text.warning}
+                        onPress={() => setRollback({ ...rollback, visible:true, side_type: data.item.side_type, side_id:data.item.side_id, market: market })}>
+                            <Text theme='h1' color={Colors.text.white} size={10}>ROLLBACK</Text>
+                    </Button>
+                    :<></>}
+                </View>
+            </View>
+        )
+    }
+
+    const renderSupportedMarkets = (data: { item:MarketProps, index:number }) => {
+        let mk_stats = market_stats.filter(s => s.market_id == data.item.market_id);
+        let mk_agg = MarketComponentHelpers.getReconFromMarketStats(mk_stats);
+        const selected = data.item.market_id == active_market?.market_id ? true : false
+
+        return (
+            <Button float style={{ width:100, padding:0, margin:4, borderColor:selected?Colors.text.success:Colors.borders.light }}
+            onPress={() => {
+                if(selected){ setActiveMarket(undefined) }
+                else { setActiveMarket(data.item) }
+            }}>
+                <View type='header' style={{ padding:5, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                    <Text theme='light' size={8}>{data.item.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
+                </View>
+                <View type='body' transparent style={{ padding:10, flex:1, justifyContent:'flex-end', alignItems:'flex-end' }}>
+                    <Text theme='h1' color={Colors.text.h1}>{mk_agg.total_volume.toFixed(2)}</Text>
+                    <Text theme='light' color={Colors.text.h1} size={10}>Volume</Text>
+                </View>
+                <View type='footer' style={{ padding:5, borderBottomRightRadius:8, borderBottomLeftRadius:8, flexDirection:'row', alignItems:'center' }}>
+                    <Text theme='light' style={{ flex:1 }}>Rec:</Text>
+                    <Text theme='h1' color={getReconColor(mk_agg.reconciliation)} size={12} textAlign='right'>${mk_agg.reconciliation.toFixed(2)}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>{contest_title}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Manage Market Data</Text>
+                        </View>
+                        <Button
+                            float
+                            style={{ padding:10, borderRadius:100 }}
+                            title='X'
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                )
+            case 'total_stats':
+                return (
+                    <View type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        {closed ?
+                        <View style={{ padding:10, flex:1 }}>
+                            <Text theme='h1' color={Colors.text.success}>${(commission + routing_prem).toFixed(2)}</Text>
+                            <Text theme='light' color={Colors.text.success} style={{ marginTop:2 }} size={8}>{commission.toFixed(2)} + {routing_prem.toFixed(2)}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Revenue</Text>
+                        </View>
+                        :
+                        <View style={{ padding:10, flex:1 }}>
+                            <Text theme='h1' color={Colors.text.warning}>${total_unresolved.toFixed(2)}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Unresolved</Text>
+                        </View>
+                        }
+                        <View style={{ padding:10, flex:1 }}>
+                            <Text theme='h1' color={Colors.text.h1}>${total_volume.toFixed(2)}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Volume</Text>
+                        </View>
+                        <View style={{ padding:10, flex:1 }}>
+                            <Text theme='h1' color={getReconColor(reconciliation)}>${reconciliation.toFixed(2)}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Recon</Text>
+                        </View>
+                        
+                    </View>
+                )
+            case 'markets':
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <FlatList
+                            data={supported_markets}
+                            key={`supported_markets`}
+                            renderItem={renderSupportedMarkets}
+                            keyExtractor={(item) => item.market_id.toString()}
+                            horizontal
+                        />
+                    </View>
+                )
+            case 'orders':
+                if(!active_market){ return <></> }
+                return (
+                    <FlatList
+                        data={market_stats.filter(s => s.market_id == active_market.market_id)}
+                        key={`unresolved_stats_${active_market?.market_id}`}
+                        renderItem={renderMarketStats}
+                        keyExtractor={(item) => `${item.market_id}_${item.side_id}_${item.side}_${item.buy_sell_ind}_${item.var_1}_${item.status}`}
+                    />
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View transparent style={{ flex:1 }}>
+                <FlatList
+                    data={manage_sections}
+                    key={'manage_sections'}
+                    keyExtractor={(item) => item}
+                    renderItem={renderSections}
+                />
+            </View>
+            {active_market ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                {overall_rollback ?
+                <Button
+                    title='Rollback'
+                    type='error'
+                    style={{ flex:1, marginRight:3 }}
+                    onPress={() => setRollback({ ...rollback, visible: true, market:active_market })}
+                />
+                :<></>}
+                {overall_resolve ?
+                <Button
+                    title='Resolve'
+                    type='success'
+                    style={{ flex:1, marginLeft:3 }}
+                    onPress={() => setResolve({ visible: true, market: active_market })}
+                />
+                :<></>}
+            </View>
+            :<></>}
+            {rollback.visible && rollback.market ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
+                <MarketRollbackForm
+                    contest_title={contest_title}
+                    contest_id={contest_id}
+                    contest_type={contest_type}
+                    market={rollback.market}
+                    market_stats={market_stats}
+                    side_type={rollback.side_type}
+                    side_id={rollback.side_id}
+                    athletes={athletes}
+                    teams={teams}
+                    onClose={() => setRollback({ visible: false })}
+                />
+            </View>
+            :<></>}
+            {resolve.visible && resolve.market ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
+                <MarketResolveForm
+                    contest_title={contest_title}
+                    contest_id={contest_id}
+                    contest_type={contest_type}
+                    market={resolve.market}
+                    market_stats={market_stats}
+                    side_type={resolve.side_type}
+                    side_id={resolve.side_id}
+                    athletes={athletes}
+                    teams={teams}
+                    onClose={() => setResolve({ visible: false })}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default MarketManager

package/src/MarketComponents/index.tsx

@@ -13,6 +13,7 @@ import OrderBookCard from './components/OrderBook';
 import MyOrderList from './components/MyOrderList';
 import ExternalPriceComparison from './components/ExternalPriceComparison';
 import OrderGradeBar from './components/OrderGradeBar';
+import MarketManager from './components/MarketManager';
 
 export default {
     TeamEventMarket,
@@ -21,6 +22,7 @@ export default {
     BestAvailableOrderCard,
     EventMarket,
     OrderBookCard,
+    MarketManager,
     OrderBookChart,
     AthleteTournamentMarket,
     TeamEventList,

package/src/PostHog/RNPostHog.tsx

@@ -0,0 +1,101 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React from 'react';
+import PostHog, { PostHogProvider, type PostHogOptions, type PostHogProviderProps } from 'posthog-react-native';
+import PostHogReactNativeSessionReplay from 'posthog-react-native-session-replay';
+import type { PostHogEventProperties } from 'posthog-react-native/lib/posthog-core/src';
+
+const BEPostHogProvider = (props:PostHogProviderProps) => {
+    return (
+      <PostHogProvider {...props}>
+        {props.children}
+      </PostHogProvider>
+    )
+}
+let client: PostHog | undefined = undefined
+const generateClient = (api_key?:string, options?:PostHogOptions) => {
+  client = new PostHog(api_key??'phc_VOgl6v8COVPyu4AERusWqK8HSD2dDju99qSa70G4nLl', {
+    // usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com'  
+    host: 'https://us.i.posthog.com',
+    customStorage:AsyncStorage,
+    persistence: 'memory',
+    ...options
+  })
+  return client
+}
+
+const EventActions = {
+  identify: async(player_id:string, props?:PostHogEventProperties) => {
+    if(!client){ return }
+    try {
+      await client.identify(player_id, props)
+      return true
+    } catch (e) {
+      console.log(e);
+      return false
+    }
+  },
+  captureScreen: async(screen:string, props?: any) => {
+    if(!client){ return }
+    try {
+      await client.screen(screen, props)
+      return true
+    } catch (e) {
+      console.log(e);
+      return false
+    }
+  },
+  captureEvent: async(event_name:string, props?:PostHogEventProperties) => {
+    if(!client){ return }
+    try {
+      await client.capture(event_name, props)
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  }
+}
+
+
+const RecordingActions = {
+  startRecording: async() => {
+    if(!client){ return }
+    try {
+      await PostHogReactNativeSessionReplay.startSession(client.getSessionId());
+      return true
+    } catch (e) {
+      console.log(e);
+      return false
+    }
+  },
+  stopRecording: async() => {
+    try {
+      console.log('stopped')
+      await PostHogReactNativeSessionReplay.endSession();
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  },
+  recordClip: async(seconds:number) => {
+      const started = await RecordingActions.startRecording();
+      console.log(started);
+      if(!started){ return }
+      setTimeout(() => {
+          RecordingActions.stopRecording()
+      }, seconds*1000);
+  }
+}
+
+
+
+
+
+export default {
+  source:'react-native',
+  BEPostHogProvider,
+  generateClient,
+  RecordingActions,
+  EventActions
+}

package/src/PostHog/WebPostHog.tsx

@@ -0,0 +1,110 @@
+//import AsyncStorage from '@react-native-async-storage/async-storage';
+import React from 'react';
+import posthog, { PostHog, type PostHogConfig } from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+type WithOptionalChildren<T> = T & {
+    children?: React.ReactNode | undefined;
+};
+type PostHogProviderProps = {
+    client: PostHog;
+    apiKey?: never;
+    options?: never;
+} | {
+    apiKey: string;
+    options?: Partial<PostHogConfig>;
+    client?: never;
+};
+
+const BEPostHogProvider = (props:WithOptionalChildren<PostHogProviderProps>) => {
+    return (
+      <PostHogProvider { ...props }>
+        {props.children}
+      </PostHogProvider>
+    )
+}
+let client: PostHog | undefined = undefined
+
+const generateClient = (api_key?:string, options?:PostHogConfig) => {
+  client = posthog.init(api_key??'phc_VOgl6v8COVPyu4AERusWqK8HSD2dDju99qSa70G4nLl', {
+    api_host:'https://us.i.posthog.com',
+    autocapture: false,
+    capture_pageview: false,
+    capture_performance: false,
+    ...options
+  });
+  return client
+}
+
+const EventActions = {
+  identify: async(player_id:string, props?:any) => {
+    if(!client){ return }
+    try {
+      await posthog.identify(player_id, props)
+      return true
+    } catch (e) {
+      console.log(e);
+      return false
+    }
+  },
+  captureScreen: async(screen:string, props?: any) => {
+    if(!client){ return }
+    try {
+      await posthog.capture('$screen', { screen, ...props });
+      return true
+    } catch (e) {
+      console.log(e);
+      return false
+    }
+  },
+  captureEvent: async(event_name:string, props?:any) => {
+    if(!client){ return }
+    try {
+      await posthog.capture(event_name, props)
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  }
+}
+
+const RecordingActions = {
+  startRecording: async() => {
+    try {
+      console.log('STARTING TO RECORD!!!!');
+        await posthog.startSessionRecording();
+        console.log('DONE!!')
+        return true
+    } catch (e) {
+        console.log(e);
+        return false
+    }
+  },
+  stopRecording: async() => {
+    try {
+      console.log('stopped')
+      await posthog.stopSessionRecording();
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  },
+  recordClip: async(seconds:number) => {
+      const started = await RecordingActions.startRecording();
+      console.log(started);
+      if(!started){ return }
+      setTimeout(() => {
+          RecordingActions.stopRecording()
+      }, seconds*1000);
+  }
+}
+
+export default {
+  source: 'web',
+  BEPostHogProvider,
+  generateClient,
+  RecordingActions,
+  EventActions
+}

package/src/PostHog/index.tsx

@@ -1,44 +1,11 @@
-import PostHog, { PostHogProvider, type PostHogOptions } from 'posthog-react-native'
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import type PostHogReactNativeSessionReplay from 'posthog-react-native-session-replay';
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
+import RNPostHog from "./RNPostHog";
+import WebPostHog from "./WebPostHog";
 
-let ph_client:PostHog | undefined = undefined
+let BEPostHog = Platform.select({
+  ios: RNPostHog,
+  android: RNPostHog,
+  web: WebPostHog as any
+})
 
-export let OptionalReactNativeSessionReplay:
-  | typeof PostHogReactNativeSessionReplay
-  | undefined;
-
-try {
-  OptionalReactNativeSessionReplay = Platform.select({
-    macos: undefined,
-    web: require('posthog-js'),
-    default: require('posthog-react-native-session-replay'), // Only Android and iOS
-  });
-} catch (e) {
-  // do nothing
-  console.warn(
-    'PostHog Debug',
-    `Error loading posthog-react-native-session-replay: ${e}`
-  );
-}
-
-
-
-const generatePostHogClient = (api_key:string, options?: PostHogOptions) => {
-    ph_client = new PostHog(api_key, {
-        ...options,
-        host: 'https://us.i.posthog.com',
-        customStorage:AsyncStorage,
-        persistence: 'memory'
-    });
-    return ph_client
-}
-
-
-export default {
-    generatePostHogClient,
-    BEPostHogProvider:PostHogProvider,
-    ph_client,
-    OptionalReactNativeSessionReplay
-}
+export default BEPostHog