be-components 1.9.7 → 1.9.9

package/src/Components/Icons.tsx

@@ -1199,13 +1199,77 @@ const MarketClosedIcon = ({color, size}:IconProps) => {
     )
 }
 
+const QuestionIcon = ({ color, size }:IconProps) => {
+    return (
+        <svg width={`${size ?? 18}`} height={`${size ?? 18}`} viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <title>question-circle-svgrepo-com</title>
+            <g id="ss" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="question-circle-svgrepo-com" transform="translate(1.000000, 1.000000)">
+                    <path d="M9.75,8.25 C9.75,7.007364 10.7574,6 12,6 C13.2426,6 14.25,7.007364 14.25,8.25 C14.25,9.07494 13.806,9.7962 13.14408,10.18788 C12.5736,10.52532 12,11.03724 12,11.7 L12,13.2" id="Path" stroke={color ?? Colors.brand.midnight} stroke-width="2" stroke-linecap="round"></path>
+                    <circle id="Oval" fill={color ?? Colors.brand.midnight} fill-rule="nonzero" cx="12" cy="16.8" r="1.2"></circle>
+                    <path d="M6,1.605384 C7.765044,0.584364 9.81432,0 12,0 C18.62736,0 24,5.37258 24,12 C24,18.62736 18.62736,24 12,24 C5.37258,24 0,18.62736 0,12 C0,9.81432 0.584364,7.765044 1.605384,6" id="Path" stroke={color ?? Colors.brand.midnight} stroke-width="2" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </svg>
+    )
+}
+
+const BetScopeSuccessIcon = ({ size }:IconProps) => {
+    return (
+        <svg width={`${size ?? 18}`} height={`${size ?? 18}`} viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>Group 2</title>
+        <defs>
+            <path d="M30.2225952,11.2208759 C28.2270706,5.27982546 22.6133387,1 16,1 C9.38651858,1 3.7726871,5.28001018 1.77727561,11.2212605 M1.30519687,12.9747777 C1.10509087,13.9519227 1,14.9636887 1,16 C1,22.5314971 5.17455318,28.087975 11.0010783,30.1468525 M12.972972,30.6944332 C13.9506762,30.8947796 14.9630503,31 16,31 C24.2842712,31 31,24.2842712 31,16 C31,15.0071351 30.9035361,14.0368005 30.7194692,13.0978572" id="path-1"></path>
+            <filter x="-21.7%" y="-15.0%" width="143.3%" height="143.3%" filterUnits="objectBoundingBox" id="filter-2">
+                <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+                <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
+                <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
+                <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
+                <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+                <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            </filter>
+            <path d="M17,5 C10.372583,5 5,10.372583 5,17" id="path-3"></path>
+            <filter x="-66.7%" y="-50.0%" width="233.3%" height="233.3%" filterUnits="objectBoundingBox" id="filter-4">
+                <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+                <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
+                <feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
+                <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
+                <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+                <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            </filter>
+        </defs>
+        <g id="ss" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="Group-2" transform="translate(3.000000, 1.000000)">
+                <g id="Group">
+                    <circle id="Oval" fill="#FFFFFF" cx="16" cy="16" r="16"></circle>
+                    <g id="Shape">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)"></use>
+                        <use stroke="#F46D2B" stroke-width="2"></use>
+                    </g>
+                    <g id="Path" stroke-linecap="round">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)"></use>
+                        <use stroke="#010101" stroke-width="2"></use>
+                    </g>
+                </g>
+                <g id="checkmark" transform="translate(12.000000, 13.000000)" fill="#F46D2B" fill-rule="nonzero" stroke="#F46D2B" stroke-linejoin="round" stroke-width="0.5">
+                    <polygon id="Path" points="0 3.46409675 0.78760393 2.67649282 2.66137566 4.53514739 7.21239607 0 8 0.802721088 2.66137566 6.14058957"></polygon>
+                </g>
+            </g>
+        </g>
+    </svg>
+    )
+}
 
 export default {
     SearchIcon,
     LiquidityIcon,
     EyeOnIcon,
     MarketClosedIcon,
+    BetScopeSuccessIcon,
     AlertIcon,
+    QuestionIcon,
     PieIcon,
     BankIcon,
     SquaresIcon,

package/src/Components/ViewportObserver.tsx

@@ -1,7 +1,7 @@
 import  { useState, useMemo, useEffect } from "react";
 
 export const useIsInViewport = (ref:any) => {
-    const [isIntersecting, setIsIntersecting] = useState(false);
+    const [ isIntersecting, setIsIntersecting ] = useState(false);
   
     const observer = useMemo(
       () =>
@@ -14,14 +14,12 @@ export const useIsInViewport = (ref:any) => {
     );
   
     useEffect(() => {
-        if(!ref?.current){ return }
+      if(!ref?.current){ return }
       observer.observe(ref.current);
-  
       return () => {
         observer.disconnect();
       };
 
     }, [ref, observer]);
-  
     return isIntersecting;
   }

package/src/MarketComponents/api/index.ts

@@ -3,6 +3,7 @@ import { APIOverrides } from "../../ApiOverrides"
 import type { AthleteProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps } from "../../types"
 
 let EVENT_SVC_API = ''
+let AUTH_SVC_API = ''
 
 export { MarketComponentApi, MarketComponentHelpers }
 
@@ -11,7 +12,7 @@ const MarketComponentApi = {
         const endpoints = APIOverrides.getEndpoints();
         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;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
     },
     getAthletesByTeamId: async(team_id:string):Promise<AthleteProps[]> => {
         try {
@@ -21,6 +22,14 @@ const MarketComponentApi = {
             console.log(e)
             return []
         }
+    },
+    getCompanyById: async(company_id:string) => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/companies/company/id/${company_id}`)
+            return resp.data
+        } catch (e) {
+            return undefined
+        }
     }
 }
 

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from "../../../types"
 import { view_styles } from '../../../constants/styles';
@@ -29,8 +29,11 @@ type AthleteMarketProps = {
 }
 
 const AthleteMarket = ({ event, show_event, hide_liquidity, hide_stat_banner, width, athlete, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:AthleteMarketProps) => {
-    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
-    const is_locked = MarketComponentHelpers.isEventMarketLocked(event, market.market_id);
+    
+
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats)
+    const is_locked = useMemo(() => MarketComponentHelpers.isEventMarketLocked(event, market.market_id),[JSON.stringify(event.supported_markets)])
+    
     const renderSides = useCallback((data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
         const ba_order = best_available_orders.find(o => o.market_id == market.market_id && o.side_type == 'athlete' && o.side_id == athlete.athlete_id && o.side == data.item.side && o.show);
         const side_details = MarketComponentHelpers.getTeamEventSideIds(event, market, data.item, athlete, undefined);
@@ -121,4 +124,9 @@ const AthleteMarket = ({ event, show_event, hide_liquidity, hide_stat_banner, wi
     )
 }
 
-export default AthleteMarket
+export default React.memo(AthleteMarket, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){ 
+        return false 
+    }
+    return true
+})

package/src/MarketComponents/components/BetScopeIndicator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+
+type BetScopeIndicatorProps = {
+    bet_scope_grade?: number
+}
+
+const BetScopeIndicator = ({ bet_scope_grade }:BetScopeIndicatorProps) => {
+    if(!bet_scope_grade || bet_scope_grade < 100){ return <></> }
+    return (
+        <View>
+            
+        </View>
+    )
+}
+
+export default React.memo(BetScopeIndicator, (left, right) => left.bet_scope_grade == right.bet_scope_grade)

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

@@ -43,7 +43,7 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, on
             }, 600);
         }
     },[trade])
-    
+
     return (
         <TouchableOpacity 
             style={{ flex:1, backgroundColor:color, borderRadius:4}}
@@ -81,4 +81,7 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, on
     )
 }
 
-export default MarketCard
+export default React.memo(MarketCard, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){ return false }
+    return true
+})

package/src/MarketComponents/components/OrderGradeBar.tsx

@@ -68,7 +68,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
         if(!grade && grade !== 0){ return <></> }
         //Check if the grade is greater than the minumum of the box
         const filled = grade >= data.item.min ? true : false
-        const success = grade > 97.5 ? true : false
+        const success = grade > 100 ? true : false
         const locked = !premium ? true : false
 
         //Render the box
@@ -84,7 +84,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
     }
 
     if(view_type == 'market'){
-        const success = grade > 97.5 ? true : false
+        const success = grade > 100 ? true : false
         if(!premium){
             return (<></>)
         }

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

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView } from 'react-native';
-import type { AthleteProps, BestAvailableOrderProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, SquaresCompetitionProps, TradeProps } from '../../../types';
+import type { AthleteProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
 import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
 import {TeamEventMarketHelpers} from './api';
@@ -11,6 +11,9 @@ import EventMarket from '../../components/EventMarket';
 
 import { MarketComponentApi, MarketComponentHelpers } from '../../api';
 import { MarketButtonHelpers } from '../MarketButton/api';
+import LinearGradient from 'react-native-linear-gradient';
+import { useIsInViewport } from '../../../Components/ViewportObserver';
+import type { BEEventProps } from '../../../Observer/api/types';
 
 type TeamEventMarketProps = {
     event:EventProps,
@@ -25,6 +28,7 @@ type TeamEventMarketProps = {
     default_price_view: 'last_trade'|'best_available',
     onView:(data:{ event_id:string, event_type:string, market_id:string, side_type?:string, side_id?:string }) => void,
     onOrder:(order:OrderProps) => void,
+    onEvent?:(be_event:BEEventProps) => void,
     onExpand?:(expanded:boolean) => void,
     show_grades?:boolean,
     onCompetitionSelect:(competition_id:string) => void,
@@ -34,7 +38,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competition, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competition, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent }:TeamEventMarketProps) => {
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
         loaded:boolean,
@@ -46,16 +50,43 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         expanded:false,
         athletes:[]
     })
+    const [ sponsor, setSponsor ] = useState<CompanyProps|undefined>(undefined);
     const [ competitions_expanded, setCompetitionsExpanded ] = useState(false);
     const { expanded, athletes, loaded, loading } = expanded_data;
     const event_status = TeamEventMarketHelpers.getEventStatus(event);
-
+    const ref = useRef(null)
+    const isInViewport = useIsInViewport(ref)
 
     useEffect(() => {
         MarketComponentApi.setEnvironment();
         if(init_expanded){ expandedEvent(); }
+        if(event.sponsor_id){ getCompanyFromServer(event.sponsor_id) }
     },[])
 
+    useEffect(() => {
+        if(isInViewport && onEvent && event.sponsor_id){
+            let be_event:BEEventProps = {
+                event_name:'company_view',
+                event_data: {
+                    view_type: 'contest',
+                    view_location: 'list',
+                    contest_type:'team',
+                    contest_id:event.event_id,
+                    company_id: event.sponsor_id
+                },
+                level:2
+            }
+            onEvent(be_event)
+        }
+    },[isInViewport])
+
+
+    const getCompanyFromServer = async(company_id:string) => {
+        const resp = await MarketComponentApi.getCompanyById(company_id)
+        if(!resp?.company){ return }
+        setSponsor(resp.company)
+    }
+
     const expandedEvent = async() => {
         if(!event){ return }
         if(onExpand){ onExpand(expanded ? false : true) }
@@ -76,7 +107,9 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
          })
     }
     
-    const primary_markets = TeamEventMarketHelpers.getPrimaryMarkets(event, markets);
+    const primary_markets = useMemo(() => {
+        return TeamEventMarketHelpers.getPrimaryMarkets(event, markets)
+    }, [markets.length])
     
     const handleSelectCompetition = () => {
         if(!competitions || competitions.length == 0){ return }
@@ -138,7 +171,8 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                 <Text size={12} color={Colors.brand.midnight} textAlign='center'>{data.item.type.toUpperCase()}</Text>
             </View>
         )
-    },[])
+    },[primary_markets.length])
+
 
     const renderNonPrimaryMarkets = useCallback((data: { item:EventOrderStatProps, index:number }) => {
         const market = markets.find(m => m.market_id == data.item.market_id);
@@ -211,9 +245,36 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
     if(!event.away || !event.home){ return <></> }
 
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
-    const { non_primary_markets, available } = TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades)
+    const { non_primary_markets, available } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades),[])
+
     return (
-        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+        <View ref={ref} style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            {sponsor ?
+            <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? Colors.brand.midnight, sponsor.brand_secondary ?? Colors.brand.cyan]}>
+                <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
+                    <Image
+                        source={{ uri: sponsor.company_image?.url }}
+                        style={{ height:30, width:30, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text size={12} color={Colors.shades.white} weight='bold'>Brought to you by {sponsor.company_name}</Text>
+                    <View style={{ marginTop:3, flexDirection:'row', alignItems:'center' }}>
+                        {show_id ?
+                        <Text style={{ marginLeft:2, marginRight:3 }} size={12} color={Colors.shades.white} weight='semibold' selectable>{event.event_id} </Text>
+                        :<></>}
+                        {event.event_sub_title ?
+                        <Text size={12} color={Colors.shades.white} weight='semibold'>{event.event_sub_title}</Text>
+                        :<></>}
+                    </View>
+                </View>
+                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                    <Icons.TVIcon size={10} color={Colors.shades.white} />
+                    <Text style={{ marginLeft:8 }} size={12} color={Colors.shades.white} weight='semibold'>{event.info?.broadcast?.network}</Text>
+                </View>
+            </LinearGradient>
+            :
             <View nativeID='event_header_data' style={{ flexDirection:'row', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
                 {onActivate && event_status != 'closed' ?
                 <Button
@@ -239,6 +300,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                     <Text style={{ marginLeft:8 }} size={12} color={Colors.brand.midnight} weight='semibold'>{event.info?.broadcast?.network}</Text>
                 </View>
             </View>
+            }
             <View nativeID='primary_markets' style={{ flexDirection:'row' }}>
                 <View nativeID='team_details' style={{ flex:1, padding:5, paddingRight:0 }}>
                     <View style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }}>
@@ -297,7 +359,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                     </View>
                     <FlatList
                         key={`${event.event_id}_primary_markets`}
-                        data={primary_markets}
+                        data={primary_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
                         horizontal
                         renderItem={renderPrimaryMarkets}
                         keyExtractor={(item) => item.market_id.toString()}
@@ -407,4 +469,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
     )
 }
 
-export default TeamEventMarket
+export default React.memo(TeamEventMarket, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){ return false }
+    return true
+})

package/src/Poll/components/CampaignHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import type { PollCampaignProps } from '../../types';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type CampaignHeaderProps = {
+    poll_campaign:PollCampaignProps,
+    onSharePollCampaign:(pc:PollCampaignProps) => void
+}
+
+const CampaignHeader = ({ poll_campaign, onSharePollCampaign }:CampaignHeaderProps) => {
+
+    return (
+        <View>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image
+                        source={{ uri: poll_campaign.campaign_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                        style={{ height:50, width:50, borderRadius:4 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{poll_campaign.name}</Text>
+                </View>
+                <TouchableOpacity style={{ paddingLeft:10 }} onPress={() => onSharePollCampaign(poll_campaign)}>
+                    <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+export default CampaignHeader

package/src/Poll/components/CampaignLeaderboard.tsx

@@ -0,0 +1,181 @@
+import React, { useEffect, useState } from 'react';
+import { View, ScrollView, Image, FlatList, ActivityIndicator } from "react-native"
+import type { PollCampaignLeaderProps, PollCampaignProps, PublicPlayerProps } from '../../types';
+import { PollCampaignApi } from '../api';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+
+type CampaignLeaderboardProps = {
+    poll_campaign:PollCampaignProps,
+    view_mode: "short"|"full",
+    height?:number,
+    onShowFullLeaderboard?: () => void,
+    onClose?:() => void
+}
+
+const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeaderboard, onClose }:CampaignLeaderboardProps) => {
+    const [ leaderboard_data, setLeaderData ] = useState<{
+        loading:boolean,
+        offset:number,
+        leaders:PollCampaignLeaderProps[],
+        players:PublicPlayerProps[],
+        my_leader?: PollCampaignLeaderProps
+    }>({
+        loading:false,
+        offset:0,
+        leaders:[],
+        players:[]
+    })
+    const { loading, leaders, players, my_leader, offset } = leaderboard_data;
+    const me = players.find(p => p.player_id == my_leader?.player_id);
+
+    let filtered_leaders = [ ...leaders ]
+    if(view_mode == 'short'){
+        filtered_leaders = filtered_leaders.sort((a,b) => a.place - b.place).slice(0,3);
+    }
+
+    useEffect(() => {
+        getDataFromServer(0);
+    },[poll_campaign.poll_campaign_id])
+
+    const getDataFromServer = async(offset:number) => {
+        setLeaderData({ ...leaderboard_data, loading:true })
+        const ls = await PollCampaignApi.getLeadersByCampaignId(poll_campaign.poll_campaign_id, offset)
+        const player_ids = ls.poll_campaign_leaders.map(l => l.player_id);
+        if(ls.my_leaderboard){
+            let my_id = player_ids.find(id => id == ls.my_leaderboard?.player_id);
+            if(!my_id){ player_ids.push(ls.my_leaderboard.player_id) }
+        }
+        const ps = await PollCampaignApi.getPlayersByPlayerIds(player_ids);
+        setLeaderData({
+            ...leaderboard_data,
+            players:ps,
+            offset,
+            loading: false,
+            leaders: ls.poll_campaign_leaders,
+            my_leader: ls.my_leaderboard
+        })
+    }
+
+    const renderTrophy = (place:number) => {
+        switch(place){
+            case 1: return <Icons.TrophyIcon color={Colors.incentive.gold} size={16}/>
+            case 2: return <Icons.TrophyIcon color={Colors.incentive.silver} size={16}/>
+            case 3: return <Icons.TrophyIcon color={Colors.incentive.bronze} size={16}/>
+            default: return <></>
+        }
+    }
+
+
+    const renderLeaders = (data: {item:PollCampaignLeaderProps, index:number}) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
+                    <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{offset > 0 ? offset:''}{data.index+1}</Text>
+                </View>
+                <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View nativeID="profile_pic" style={{ marginRight:10 }}>
+                        <Image
+                            source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
+                            style={{ height:40, width:40, borderRadius:100 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ flex:1 }} nativeID="name">
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.username}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{data.item.winnings.toFixed(2)} Points</Text>
+                    </View>
+                    <View>
+                        {renderTrophy(data.index+1)}
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1, height:height, backgroundColor:Colors.shades.shade100 }}>
+            {my_leader && me ?
+            <View nativeID="my_results">
+                    <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white }}>
+                    <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
+                        <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{my_leader.place}</Text>
+                    </View>
+                    <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <View nativeID="profile_pic" style={{ marginRight:10 }}>
+                            <Image
+                                source={{ uri: me.profile_pic && me.profile_pic != '' ? me.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
+                                style={{ height:40, width:40, borderRadius:100 }}
+                                resizeMode='cover'
+                            />
+                        </View>
+                        <View style={{ flex:1 }} nativeID="name">
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{me.username}</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{my_leader.winnings.toFixed(2)} Points</Text>
+                        </View>
+                        <View>
+                            {renderTrophy(my_leader.place)}
+                        </View>
+                    </View>
+                </View>
+            </View>
+            :<></>}
+            <ScrollView style={{flex:1}}>
+                {loading ?
+                    <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:10, alignSelf:'center' }} />
+                :<></>}
+                <FlatList
+                    data={filtered_leaders}
+                    renderItem={renderLeaders}
+                    keyExtractor={((item) => item.player_id.toString())}
+                />
+            </ScrollView>
+            {view_mode == 'full' ?
+            <View style={{ flexDirection:'row', alignItems:'center' }}>
+                {offset > 0 ?
+                <Button
+                    title='PREV'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset - 1)}
+                />
+                :<></>}
+                <View style={{flex:1}} />
+                <Button
+                    title='NEXT'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset + 1)}
+                />
+            </View>
+            :<></>}
+            {view_mode == 'short' && onShowFullLeaderboard ?
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='See Full Leaderboard'
+                    style={{ flex:1, alignSelf:'center' }}
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => onShowFullLeaderboard()}
+                />
+            </View>
+            :<></>}
+            {onClose ?
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='CLOSE'
+                    style={{ flex:1 }}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CampaignLeaderboard