be-components 5.0.0 → 5.0.1

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, ScrollView, Image } from "react-native";
+import { ActivityIndicator, ScrollView, Image, FlatList } from "react-native";
 import type { AthleteProps, BracketGroupProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, EventProps, MyPlayerProps, PlayerBracketPickProps, PlayerBracketProps, RoundEventProps, TeamProps } from '../../../types';
 import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../../api';
 import BracketRoundSection from './BracketRound';
 import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
 import BracketNavigator from './BracketNavigator';
-import { Icons } from '../../../Components';
+import { Checkbox, Icons } from '../../../Components';
+import RoundEventCard from './RoundEvent';
 
 type BracketPlayProps = {
     player?:MyPlayerProps
@@ -26,6 +27,9 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
     const Colors = useColors();
     const [ round_event_loading, setRoundEventLoading ] = useState<string|undefined>(undefined);
     const [ show_filter, setShowFilter ] = useState(false);
+    let round_margin = 4
+    const [ final_four_size, setFinalFourSize ] = useState({ height: 0, width:0 });
+    const [ bracket_size, setBracketSize ] = useState({ height:0, width:0, x: 0, y: 0 });
     const [ play_data, setPlayData ] = useState<{
         play_loading:boolean,
         player_bracket?:PlayerBracketProps,
@@ -56,6 +60,9 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
     })
     const { play_loading, player_bracket, player_bracket_picks } = play_data;
     const { loading, bracket_groups, selected_group, bracket_rounds, round_events, bracket, teams, athletes, selected_round } = bracket_data;
+    const no_group_round_events =  [ ...new Set(round_events.filter(ffe => ffe.bracket_group_id == '0').map(re => re.bracket_round_id)) ];
+    const no_group_rounds = bracket_rounds.filter(br => no_group_round_events.includes(br.bracket_round_id));
+    const { round_statuses, group_statuses } = BracketCompetitionHelpers.getPlayerBracketStatus(bracket_rounds, bracket_groups, round_events, player_bracket_picks);
 
     const champion_team = player_bracket?.champion_id_type == 'team' ? teams.find(t => t.team_id == player_bracket?.champion_id) : undefined
     const champion_athlete = player_bracket?.champion_id_type == 'athlete' ? athletes.find(a => a.athlete_id == player_bracket?.champion_id) : undefined
@@ -66,7 +73,12 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
         visible_rounds = bracket_rounds.filter((_, i) => i == next_round || i == next_round + 1)
     }
 
-   let round_width = BracketCompetitionHelpers.calcRoundWidth(width, bracket_rounds.length, 4)
+   let round_width = BracketCompetitionHelpers.calcRoundWidth(width, bracket_rounds.length, round_margin, false)
+    const full_width = BracketCompetitionHelpers.calcFullBracketSize(round_width, (bracket_rounds.length - no_group_rounds.length), 8);
+   const final_four_events = BracketCompetitionHelpers.getNonGroupGames(round_events, bracket_groups, player_bracket_picks)
+   const left_final_four = final_four_events.find(ffe => ffe.orientation == 'left');
+   const right_final_four = final_four_events.find(ffe => ffe.orientation == 'right');
+   const championship = final_four_events.find(ffe => ffe.championship);
 
    useEffect(() => {
         if(!bracket_id){ return }
@@ -150,22 +162,52 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
         })
     }
 
-    const renderBracketRounds = (data: { item:BracketRoundProps, index:number }) => {
+    const renderBracketGroups = (data: { item:BracketGroupProps, index:number, hide_titles?:boolean }) => {
+        let sorted_rounds = [ ...bracket_rounds ].sort((a,b) => a.round_number - b.round_number);
+        if(data.item.orientation == 'left'){ sorted_rounds = sorted_rounds.sort((a,b) => b.round_number - a.round_number) }
+        sorted_rounds = sorted_rounds.filter(sr => !no_group_rounds.map(r => r.bracket_round_id.toString()).includes(sr.bracket_round_id.toString()))
+        if(selected_group && selected_group.bracket_group_id != data.item.bracket_group_id){ return <></> }
+        return (
+            <View style={{ padding:4, marginRight: data.item.orientation == 'right' ? 50:0, marginLeft:data.item.orientation == 'left' ? 50 : 0 }}>
+                <Text style={{ padding:5 }} size={14} weight='bold' textAlign={data.item.orientation == 'right' ? 'left' : 'right'}>{data.item.group_name}</Text>
+                <View style={{alignItems:'flex-start' }}>
+                    <FlatList
+                        data={sorted_rounds}
+                        keyExtractor={(item) => item.bracket_round_id.toString()}
+                        horizontal
+                        renderItem={({ item, index }) => renderBracketRounds({ 
+                            item, 
+                            index, 
+                            bracket_group_id:data.item.bracket_group_id, 
+                            orientation:data.item.orientation, 
+                            hide_titles:data.hide_titles,
+                        })}
+                    />
+                </View>
+            </View>
+        )
+    }
+    const renderBracketRounds = (data: { item:BracketRoundProps, index:number, bracket_group_id?:string, orientation:'left'|'right', hide_titles?:boolean, width?:number }) => {
         const selected = selected_round?.bracket_round_id == data.item.bracket_round_id ? true : false
         if(!bracket){ return <></> }
+        const pick_status = round_statuses.find(rs => rs.bracket_round_id == data.item.bracket_round_id)?.status
         return (
                 <BracketRoundSection 
                     round_event_loading={round_event_loading}
                     bracket_round={data.item}
                     round_events={round_events}
                     selected={selected}
+                    active_bracket_group_id={data.bracket_group_id || selected_group?.bracket_group_id}
                     bracket={bracket}
-                    teams={teams}
+                    teams={teams} 
+                    compact={false}
+                    hide_titles={data.hide_titles}
+                    pick_status={pick_status}
                     onSelectContest={(round_event, player_bracket_pick, away_placeholder_pick, home_placeholder_pick) => onSelectContest ? onSelectContest(round_event, bracket, player_bracket_pick, away_placeholder_pick, home_placeholder_pick):undefined}
                     athletes={athletes}
                     player_bracket_picks={player_bracket_picks}
-                    width={round_width}
-                    orientation='right'
+                    width={data.width ?? round_width}
+                    orientation={data.orientation}
                     onSelectRound={(br) => setData({ ...bracket_data, selected_round: selected_round?.bracket_round_id == br.bracket_round_id ? undefined: br })}
                     onPick={(pick) => handlePick(pick)}
                 
@@ -173,6 +215,27 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
         )
     }
 
+    const renderNavGroups = (data:{ item:BracketGroupProps, index:number }) => {
+        const pick_status = group_statuses.find(s => s.bracket_group_id == data.item.bracket_group_id)?.status
+        const selected = selected_group?.bracket_group_id == data.item.bracket_group_id ? true : false
+        return (
+            <Button type='text' style={{ flexDirection:'row', alignItems:'center', padding:10, margin:5 }} onPress={() => {
+                setData({ ...bracket_data, selected_group: selected_group?.bracket_group_id == data.item.bracket_group_id ? undefined : data.item })
+
+            }}>
+                <View style={{ flexDirection:'row', alignItems:'center', flex:1, marginRight:25 }}>
+                    <Checkbox checked={selected} color={Colors.text.action} disabled size={18} style={{ borderRadius:100 }} fill_style={{ borderRadius:100 }} onSelect={() => console.log('')} />
+                    <Text style={{ marginLeft:10 }} size={14} theme='h1' textAlign="center">{data.item.group_name}</Text>
+                </View>
+                {pick_status == 'complete' ?
+                <Icons.CheckCirlceIcon color={Colors.text.success} size={14} />
+                :
+                <Icons.AlertIcon color={Colors.text.warning} size={14} />
+                }
+            </Button>
+        )
+    }
+
     if(!bracket || loading || play_loading){
         return (
             <View type='blur'>
@@ -180,8 +243,9 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
             </View>
         )
     }
+
     return (
-        <View style={{ flex:1 }}>
+        <View transparent style={{ flex:1 }}>
             <BracketNavigator
                 visible={show_filter}
                 view_mode={view_mode}
@@ -251,12 +315,118 @@ const BracketPlay = ({ player, view_mode, width, bracket_id, onSelectContest, pl
                 />
             </View>
             }
-
+            
+            <View transparent style={{ paddingLeft:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <FlatList
+                    data={bracket_groups}
+                    key={'group_list'}
+                    horizontal
+                    renderItem={renderNavGroups}
+                    keyExtractor={(item) => item.bracket_group_id.toString()}
+                />
+            </View>
             <ScrollView>
                 <ScrollView horizontal style={{ flexDirection:'row', padding:10 }}>
-                    {visible_rounds.sort((a,b) => a.round_number - b.round_number).map((br,i) => {
-                        return renderBracketRounds({ item:br, index:i })
-                    })}
+                    <View transparent>
+                    {width > 1000 && !selected_round && !selected_group ?
+                    <View onLayout={(ev) => {
+                        const { height, width, x, y } = ev.nativeEvent.layout;
+                        setBracketSize({ height, width, x, y })
+                    }}>
+                        <View style={{ flex:1, width: width, flexDirection:'row', flexWrap:'wrap' }} >
+                            <FlatList
+                                numColumns={2}
+                                data={bracket_groups.sort((a,b) => a.sequence - b.sequence)}
+                                renderItem={({ item, index }) => renderBracketGroups({ item, index, hide_titles:item.sequence<3?false:true })}
+                            />
+                            { final_four_events.length > 0 ?
+                            <View nativeID="final_four" 
+                                float
+                                style={{ position:'absolute',
+                                padding:20, 
+                                top: (bracket_size.height / 2) + (4*8) - (final_four_size.height / 2), 
+                                left: (full_width / 2) - (final_four_size.width / 2),
+                                flexDirection:'row', alignItems:'center', justifyContent:'center'}} onLayout={(ev) => {
+                                const { height, width } = ev.nativeEvent.layout;
+                                setFinalFourSize({ height, width })
+                            }}>
+                                {right_final_four ?
+                                <View style={{ borderRadius:8, padding:2, borderBottomRightRadius:0, borderTopRightRadius:0 }}>
+                                    <Text style={{ marginBottom:10 }} size={14} textAlign="center" weight='bold'>Final Four</Text>
+                                    <RoundEventCard
+                                        round_event={right_final_four.round_event}
+                                        orientation={right_final_four.orientation}
+                                        width={round_width}
+                                        round_events={round_events}
+                                        player_bracket_pick={right_final_four.player_bracket_pick}
+                                        away_placeholder_pick={right_final_four.away_placeholder_pick}
+                                        home_placeholder_pick={right_final_four.home_placeholder_pick}
+                                        onPick={(player_bracket_pick) => handlePick(player_bracket_pick)}
+                                    />
+                                </View>
+                                :<></>}
+                                <View style={{ zIndex:1, borderRadius:8, margin:10 }}>
+                                    <View style={{ padding:8, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                        <Text size={16} textAlign="center" weight="bold">Championship</Text>
+                                    </View>
+                                    {championship ?
+                                    <RoundEventCard
+                                        round_event={championship.round_event}
+                                        orientation={'right'}
+                                        width={round_width}
+                                        round_events={round_events}
+                                        player_bracket_pick={championship.player_bracket_pick}
+                                        away_placeholder_pick={championship.away_placeholder_pick}
+                                        home_placeholder_pick={championship.home_placeholder_pick}
+                                        onPick={(player_bracket_pick) => handlePick(player_bracket_pick)}
+                                    />
+                                    :<></>}
+                                    {champion_team ?
+                                    <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                                        <View style={{ marginRight:10 }}>
+                                            <Image
+                                                source={{ uri: champion_team.image?.url }}
+                                                style={{ height:30, width:30 }}
+                                                resizeMode="center"
+                                            />
+                                        </View>
+                                        <View>
+                                            <Text size={10}  weight="semibold">Champion Pick:</Text>
+                                            <Text style={{ marginTop:4 }} size={14} weight="bold">{champion_team.market_name} {champion_team.name}</Text>
+                                        </View>
+                                    </View>
+                                    :<></>}
+                                </View>
+                                {left_final_four ?
+                                <View style={{ borderRadius:8, borderTopLeftRadius:0, borderBottomLeftRadius:0, padding:2  }}>
+                                    <Text style={{ marginBottom:10 }} size={14} textAlign="center" weight='bold'>Final Four</Text>
+                                    <RoundEventCard
+                                        width={round_width}
+                                        round_event={left_final_four.round_event}
+                                        orientation={left_final_four.orientation}
+                                        round_events={round_events}
+                                        player_bracket_pick={left_final_four.player_bracket_pick}
+                                        away_placeholder_pick={left_final_four.away_placeholder_pick}
+                                        home_placeholder_pick={left_final_four.home_placeholder_pick}
+                                        onPick={(player_bracket_pick) => handlePick(player_bracket_pick)}
+                                    />
+                                </View>
+                                :<></>}
+                            </View>
+                            :<></>}
+                        </View>
+                    </View>
+                    :
+                    <View style={{ flexDirection:'row' }}>
+                        {visible_rounds.sort((a,b) => a.round_number - b.round_number).map((br,i) => {
+                            return renderBracketRounds({ item:br, index:i, orientation:'right' })
+                        })}
+                    </View>
+                    }
+                    </View>
+
+                    
+                    
                 </ScrollView>
             </ScrollView>
            

package/src/Bracket/index.tsx

@@ -18,22 +18,24 @@ type BracketRoomProps = {
     bracket_id?:string,
     insets?: { top:number, bottom:number, right:number, left:number },
     width:number,
+    hide_home?:boolean,
     height?:number,
+    restrict_competition?:boolean,
     player_balance?:PlayerBalanceProps,
     bracket_competition_id?:string,
     onManageCompetition:(bracket_competition_id:string) => void,
     onFocusPosition?:(data:{ x:number, y:number, height:number, width:number }) => void,
     onShareCompetition:(bracket_competition:BracketCompetitionProps) => void,
-    onRequestAuthenticate: (auth_strategy_id?:string) => void,
+    onRequestAuthenticate: (auth_strategy_id?:string, opt_in_url?:string) => void,
     onNotEnoughBalance:(data:{ bracket_competition:BracketCompetitionProps }) => void,
     onSelectContest?:(round_event:RoundEventProps, bracket:BracketProps, player_bracket_pick?:PlayerBracketPickProps, away_placeholder_pick?:PlayerBracketPickProps, home_placeholder_pick?:PlayerBracketPickProps) => void
     onClose?:() => void,
     onCreateNewCompetition?:(bracket_id?:string) => void
 }
 const sections = ['header', 'home', 'bracket_selector', 'bracket']
-const MAX_WIDTH = 1200
+const MAX_WIDTH = 2000
 
-const BracketRoom = ({ player_id, 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, 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);
@@ -48,7 +50,6 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
         entered_pbs: []
     });
     let mode = width < 600 ? 'small' : width < 1500 ? 'medium' : 'large'
-    let navigator_width = mode == 'large' ? 300 : mode == 'medium' ? 100 : 0
 
     const [ play_data, setPlayData ] = useState<{
         player_brackets:PlayerBracketProps[],
@@ -105,7 +106,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
     },[active_player_bracket])
     
     let comp_action_width = mode != 'small' && active_bracket_id ? 300 : 0
-    let section_width = width - navigator_width - comp_action_width > MAX_WIDTH ? MAX_WIDTH : width - navigator_width - comp_action_width
+    let section_width = width - comp_action_width > MAX_WIDTH ? MAX_WIDTH : width - comp_action_width
 
     //Very First Time we Launch - do this
     useEffect(() => {
@@ -206,6 +207,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'header':
+                if(hide_home){ return <></> }
                 return (
                     <BracketHeader
                         view_mode={view_mode}
@@ -248,7 +250,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
                             player={player}
                             onSelectContest={onSelectContest}
                             insets={insets}
-                            onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
+                            onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id, active_competition?.opt_in_url)}
                             
                             onChangePlayerBracket={(bracket_id) => {
                                 setBracketSelector(bracket_id)
@@ -275,7 +277,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
         <View style={{ flex:1 }}>
             <View style={{ flex:1, flexDirection:'row' }}>
                 <View style={{ flex:1, alignItems:mode != 'small' ? 'center' : undefined }}>
-                    <View style={{  flex:1, width:section_width }}>
+                    <View transparent style={{ flex:1, width:section_width }}>
                         <FlatList
                             data={sections}
                             keyExtractor={(item) => item}
@@ -381,6 +383,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
                                     <BracketCompetitionActions
                                         height_override={height}
                                         view_mode={view_mode}
+                                        restrict_competition={restrict_competition}
                                         onShowLeaderboard={(pbs, cpbs) => {
                                             setShowCompetitionActions(false);
                                             setTimeout(() => {
@@ -390,7 +393,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
                                         onRequestAuthenticate={() => {
                                             setShowCompetitionActions(false);
                                             setTimeout(() => {
-                                                onRequestAuthenticate(active_competition?.auth_strategy_id)
+                                                onRequestAuthenticate(active_competition?.auth_strategy_id, active_competition?.opt_in_url)
                                             }, 500);
                                         }}
                                         player={player}
@@ -486,7 +489,7 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
                                 onPress={() => console.log('')}
                             />
                         </View>
-                        :
+                        : !restrict_competition ?
                         <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                             <Icons.TrophyIcon size={20} color={Colors.text.white} />
                             <View transparent style={{ flex:1, marginLeft:10 }}>
@@ -501,45 +504,47 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
                                 onPress={() => console.log('')}
                             />
                         </View>
-                        }
+                        :<></>}
                     </Button>
                     :<></>}
                 </View>
                 {mode != 'small' && active_bracket_id ?
-                <View type='header' style={{ width:300 }}>
-                    {active_competition ?
-                    <View transparent>
-                    <Image
-                        source={{ uri: active_competition.image?.url }}
-                        style={{ height:300, width:300 }}
-                        resizeMode='cover'
-                    />
-                    <View transparent style={{ padding:16, flexDirection:'row', alignItems:'center', backgroundColor:Colors.text.highlight }}>
-                        <View transparent style={{ flex:1, marginRight:10 }}>
-                            <Text theme='h2' color={Colors.text.white}>{active_competition.competition_name}</Text>
-                            <Text style={{ marginTop:3 }} theme='description' color={Colors.text.white}>{active_competition.competition_name}</Text>
+                    <View type='header' style={{ width:300, height, overflow:'scroll', borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                        {active_competition ?
+                        <View transparent>
+                        <Image
+                            source={{ uri: active_competition.image?.url }}
+                            style={{ height:300, width:300 }}
+                            resizeMode='cover'
+                        />
+                        <View transparent style={{ padding:16, flexDirection:'row', alignItems:'center', backgroundColor:Colors.text.highlight }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h2' color={Colors.text.white}>{active_competition.competition_name}</Text>
+                                <Text style={{ marginTop:3 }} theme='description' color={Colors.text.white}>{active_competition.competition_name}</Text>
+                            </View>
+                            <Button
+                                type='text'
+                                float
+                                style={{ padding:10, flexDirection:'row', alignItems:'center' }}
+                                onPress={() => {
+                                    setShowCompetitionActions(false)
+                                    setTimeout(() => {
+                                        onShareCompetition(active_competition)
+                                    }, 500);
+                                }}
+                            >
+                                <Icons.ShareIcon size={14} color={Colors.text.white} />
+                            </Button>
                         </View>
-                        <Button
-                            type='text'
-                            float
-                            style={{ padding:10, flexDirection:'row', alignItems:'center' }}
-                            onPress={() => {
-                                setShowCompetitionActions(false)
-                                setTimeout(() => {
-                                    onShareCompetition(active_competition)
-                                }, 500);
-                            }}
-                        >
-                            <Icons.ShareIcon size={14} color={Colors.text.white} />
-                        </Button>
                     </View>
-                </View>
                     :<></>}
+                    <View style={{ flex:1 }}>
                     <BracketCompetitionActions
                             view_mode={view_mode}
                             onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
                             player={player}
                             hide_image
+                            restrict_competition={restrict_competition}
                             onShowLeaderboard={(pbs, cpbs) => {
                                 setShowLeaderboard({ visible: true, entered_pbs:pbs, entered_cpbs: cpbs });
                             }}
@@ -601,6 +606,8 @@ const BracketRoom = ({ player_id, width, height, view_mode, bracket_id, insets,
                             competition_player_brackets={competition_player_brackets}
                         /> 
                     </View>
+                    
+                    </View>
                 :<></>}
             </View>
             {loading ?

package/src/Share/index.tsx

@@ -151,7 +151,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, generator,
         switch(data.item){
             case 'header':
                 return (
-                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20, borderTopRightRadius:40, borderTopLeftRadius:40 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                         <View transparent style={{ flex:1 }}>
                             <Text theme='h1'>Share Modal</Text>
                             <Text style={{ marginTop:3 }} theme='description'>{title}</Text>
@@ -371,7 +371,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, generator,
                     )
                 case 'footer':
                     return (
-                        <View type='footer'>
+                        <View type='footer' style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:2 }}>
                             {active_tab == 'embed' ?
                             <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setActiveTab('link')}>
                                 <View transparent style={{ flex:1, marginRight:10 }}>
@@ -402,7 +402,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, generator,
     const link_is_changed = JSON.stringify(draft_generated_link) != JSON.stringify(generated_link)
     const needs_verification = link_is_changed && !visible_id_valid
     return (
-        <View float style={{ borderTopRightRadius:40, borderTopLeftRadius:40 }}>
+        <View float>
             <FlatList
                 data={share_sections}
                 renderItem={renderSections}

package/src/types.d.ts

@@ -34,7 +34,13 @@ export interface FocusPositionProps {
     width:number
 }
 
-
+export interface BracketPickStatProps {
+    bracket_id:string,
+    round_event_id:string,
+    pick_side_type:string,
+    pick_side_id:string,
+    pick_count:number
+}
 
 export interface ArticleFeedProps {
     article_feed_id: string,