be-components 7.0.5 → 7.0.8

package/src/FlashMarket/components/ManageFlashMarket.tsx

@@ -0,0 +1,766 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed"
+import { FlatList, Image } from 'react-native';
+import type { FocusPositionProps, MyPlayerProps, PollCampaignProps, PollOptionProps, PollProps, PollSummaryProps, PublicPlayerProps } from '../../types';
+import { Icons, Switch, Toggle } from '../../Components';
+import { PollApi, PollCampaignApi, PollOptionApi } from '../../Poll/api';
+import ImageUploader from '../../Components/ImageUploader';
+import { useColors } from '../../constants/useColors';
+import FlashOptionCard from './FlashOptionCard';
+import moment from 'moment-mini';
+import BETimePicker from '../../Components/BETimePicker';
+import { FlashMarketHelpers } from '../api';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+
+type ManageFlashMarketProps = {
+    poll_id:string,
+    player?:MyPlayerProps,
+    onClose:() => void,
+    onFocusPosition?:(pos:FocusPositionProps) => void
+}
+
+const sections = ['header','activate','pause_resume','closed','resolve','toggle','image','question','options','settings','results']
+const ManageFlashMarket = ({ player, onClose, poll_id, onFocusPosition }:ManageFlashMarketProps) => {
+    const Colors = useColors();
+    const [ labels, setLabels ] = useState({
+        base_stake: '0',
+        min_stake: '0',
+        max_stake: '0'
+    });
+    const { min_stake, max_stake, base_stake } = labels;
+    const [ expand_participants, setExpandParticipants ] = useState(false);
+    const [ flash_state, setFlashState ] = useState<{
+        loading:boolean,
+        action_loading:boolean,
+        probability_changed:boolean,
+        active_step:string,
+        poll_campaign?:PollCampaignProps,
+        players:PublicPlayerProps[],
+        poll?:PollProps,
+        draft_poll?:PollProps,
+        poll_summaries:PollSummaryProps[],
+        poll_options:PollOptionProps[]
+    }>({
+        loading:false,
+        action_loading:false,
+        probability_changed: false,
+        active_step: 'settings',
+        players: [],
+        poll_summaries:[],
+        poll_options: []
+    });
+    const { loading, action_loading, poll_options, players, active_step, poll, draft_poll, poll_summaries, probability_changed } = flash_state;
+    const real_options = poll_options.filter(o => o.status != 'inactive');
+    const total_responses = poll_summaries.reduce((a,b) => a + b.count, 0);
+    const unlocked_options = real_options.filter(o => !o.probability_locked);
+    const prob_locked = unlocked_options.length <= 1 ? true : false
+    const errors = FlashMarketHelpers.isNewValid(real_options, poll_summaries, poll);
+    const winning_option = real_options.find(o => o.poll_option_id == poll?.winning_option_id);
+    useEffect(() => {
+        PollCampaignApi.setEnvironment();
+        if(!poll_id){ return }
+        getData(poll_id);
+    },[poll_id]);
+
+    const getData = async(id:string) => {
+        setFlashState({ ...flash_state, loading:true });
+        const server_response = await PollApi.getPollById(id);
+        const server_campaign = await PollCampaignApi.getPollCampaignById(server_response.poll.poll_campaign_id);
+        let player_ids:string[] = []
+        server_response.poll_summaries.map(s => {
+            s.player_ids.map(id => id != '4985' ? player_ids.push(id) : console.log(''))
+        })
+        const server_players = await PollCampaignApi.getPlayersByPlayerIds([ ...new Set(player_ids.map(id => id))]);
+        setFlashState({
+            ...flash_state,
+            poll: server_response.poll,
+            poll_options: server_response.poll_options,
+            draft_poll: server_response.poll,
+            poll_summaries: server_response.poll_summaries,
+            poll_campaign: server_campaign,
+            players: server_players,
+            loading: false
+        });
+        setLabels({
+            min_stake: server_response.poll.minimum_stake.toString(),
+            max_stake: server_response.poll.max_stake.toString(),
+            base_stake: server_response.poll.base_stake?.toString() ?? '0'
+        })
+    }
+
+    const updatePoll = async(dp:PollProps) => {
+        if(action_loading){ return }
+        setFlashState({ ...flash_state, action_loading: true });
+        const new_resp = await PollApi.updatePoll(dp);
+        if(!new_resp){ return alert('Unable to update') }
+        setFlashState({ 
+            ...flash_state,
+            action_loading: false,
+            poll: new_resp.poll,
+            draft_poll: new_resp.poll,
+            poll_options: new_resp.poll_options
+        });
+    }
+
+    const handleSelectWinningOption = (checked:boolean, option:PollOptionProps) => {
+        if(!poll){ return alert('Unable to process') }
+        if(checked){
+            showConfirmAlert('Are you sure', `Confirm ${option.option_name} is the correct answer`, 
+                () => updatePoll({ ...poll, winning_option_id: option.poll_option_id, status: 'paused' }),
+                () => console.log('')
+            )
+        } else {
+            if(!poll.winning_option_id){ return }
+            showConfirmAlert('Are you sure', `Remove ${option.option_name} as the correct answer`, 
+                () => updatePoll({ ...poll, winning_option_id:undefined }),
+                () => console.log('')
+            )
+        }
+    }
+
+    const handleChangeProbability = (option:PollOptionProps, probability:number) => {
+        if(option.probability_locked){ return }
+        if(probability < 0){ return }
+        if(probability > 1){ return }
+        let other_options = [ ...real_options.filter(o => o.poll_option_id != option.poll_option_id) ]
+        //Find the min probability
+
+        //Other option probabilities
+        let other_option_probabilities = other_options.reduce((a,b) => a + (b.initial_odds ?? 0), 0);
+        //With new probabilities
+        let all_probs = other_option_probabilities + probability
+        let difference = 1 - all_probs
+
+        let unlocked_options = other_options.filter(po => !po.probability_locked);
+        if(unlocked_options.length == 0){ return } //There are no options!
+        
+        let new_option:PollOptionProps = { ...option, initial_odds: probability }
+        //what is the current total probability
+        let delta = difference / unlocked_options.length
+        //Map through the others and update those
+
+        let min_option = unlocked_options.reduce((min, item) => {
+            let item_init = item.initial_odds ?? 0
+            let min_init = min.initial_odds ?? 0
+            if(item_init < min_init){ return item } else { return min }
+        });
+
+        let max_option = unlocked_options.reduce((min, item) => {
+            let item_init = item.initial_odds ?? 0
+            let min_init = min.initial_odds ?? 0
+            if(item_init > min_init){ return item } else { return min }
+        });
+        let new_delta = delta
+
+
+        if(delta < 0){
+            //Make sure our min has enough room
+            let min_diff = (min_option.initial_odds ?? 0) + delta
+            if(min_diff < 0) { new_delta = min_option.initial_odds ?? 0 }
+        } else {
+            let max_diff = (max_option.initial_odds ?? 0) + delta
+            if(max_diff > 1){ new_delta = 1 - (max_option.initial_odds ?? 0) }
+        }
+
+        let delta_difference = new_delta - delta
+        if(delta_difference != 0){
+            return
+        }
+        let failed = false
+        other_options = other_options.map(o => {
+            if(o.probability_locked){ return o }
+            let starting_odds = o.initial_odds ?? 0
+            let new_odds = starting_odds + delta
+            if(new_odds < 0){ failed = true }
+            if(new_odds > 1){ failed = true }
+            o.initial_odds = new_odds
+            return o
+        });
+        if(failed){ return }
+        let final_options = other_options.concat(new_option);
+        //let check it
+        let total_prob = final_options.reduce((a,b) => a + (b.initial_odds ?? 0), 0);
+        if(total_prob.toFixed(2) != '1.00'){ return }
+
+        setFlashState({
+            ...flash_state,
+            probability_changed: true,
+            poll_options: poll_options.filter(po => !final_options.find(fo => fo.poll_option_id == po.poll_option_id)).concat(final_options)
+        });
+    }
+
+    const renderOptions = (data:{ item:PollOptionProps, index:number }) => {
+        if(!poll){ return <></> }
+        const summary = poll_summaries.find(ps => ps.poll_option_id == data.item.poll_option_id);
+        if(!summary){ return <></> }
+        return (
+            <View style={{ padding:5 }}>
+                <FlashOptionCard
+                    poll_option={data.item}
+                    summary={summary}
+                    poll={poll}
+                    onSelectWinningOption={handleSelectWinningOption}
+                    probability_locked={prob_locked}
+                    onChangeProbability={(probability) => handleChangeProbability(data.item, probability)}
+                    onLockProbability={(locked) => {
+                        setFlashState({
+                            ...flash_state,
+                            poll_options: poll_options.filter(po => po.poll_option_id != data.item.poll_option_id).concat({ ...data.item, probability_locked: locked })
+                        })
+                    }}
+                    onUpdateOption={(option) => {
+                        setFlashState({
+                            ...flash_state,
+                            poll_options: poll_options.filter(po => po.poll_option_id != option.poll_option_id).concat(option)
+                        })
+                    }}
+                />
+            </View>
+        )
+    }
+
+    const handleSaveProbabilities = async() => {
+        if(!probability_changed){ return }
+        if(poll?.status != 'pending'){ return }
+        let total_prob = real_options.reduce((a,b) => a + (b.initial_odds ?? 0), 0);
+        if(total_prob.toFixed(2) != '1.00'){ return }
+        
+        setFlashState({ ...flash_state, action_loading: true });
+        let new_options:PollOptionProps[] = []
+       
+        const saveOptions = real_options.map(async o => {
+            new_options.push(await PollOptionApi.updatePollOption(o))
+        });
+        await Promise.all(saveOptions);
+        setFlashState({
+            ...flash_state,
+            poll_options: new_options,
+            probability_changed: false
+        })
+    }
+
+    const handleResolve = () => {
+        if(!poll){ return }
+        if(!winning_option){ return }
+        showConfirmAlert('Are you sure', `Confirm ${winning_option.option_name} is the correct answer and payout participants`, 
+            () => resolveFlashMarket(),
+            () => console.log('')
+        )
+    }
+
+    const resolveFlashMarket = async() => {
+        if(!poll){ return }
+        if(!poll.winning_option_id){ return }
+        setFlashState({ ...flash_state, action_loading: true });
+        const resolved_poll = await PollApi.closePoll(poll.poll_id);
+        if(!resolved_poll){ return alert('Unable to activate market at this time') }
+        setFlashState({
+            ...flash_state,
+            action_loading: false,
+            poll: resolved_poll
+        })
+    }
+
+    const handleAddOption = async() => {
+        if(poll?.status != 'pending'){ return } 
+        if(action_loading){ return }
+        setFlashState({ ...flash_state, action_loading:true });
+        let length = real_options.length
+        const new_option = await PollOptionApi.createPollOption({
+            poll_id: poll.poll_id,
+            poll_option_id: '',
+            option_name: '',
+            initial_odds: length == 0 ? 1 : 0,
+            option_value: 'optional',
+            response_message:'',
+            priority: length + 1,
+            create_datetime: '', last_update_datetime: '',
+            option_type:'select',
+            status: 'pending',
+        });
+        if(!new_option){ 
+            setFlashState({
+                ...flash_state,
+                action_loading: false
+            });
+            return alert('Unable to process')
+        }
+        let new_summary:PollSummaryProps = {
+            poll_id:poll_id,
+            poll_option_id: new_option.poll_option_id,
+            count: 0,
+            stake: 0,
+            winnings: 0,
+            player_ids: [],
+            pct: 0
+        }
+        //We have a new option! Now we will need to update the probabilities
+        setFlashState({
+            ...flash_state,
+            action_loading: false,
+            poll_options: poll_options.filter(po => po.poll_option_id != new_option.poll_option_id).concat(new_option),
+            poll_summaries: poll_summaries.filter(ps => ps.poll_option_id != new_summary.poll_option_id).concat(new_summary)
+        });
+    }
+
+
+    const renderPlayers = (data:{ item:PublicPlayerProps, index:number }) => {
+        return (
+            <View type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
+                <Image
+                    source={{ uri: data.item.profile_pic }}
+                    style={{ height:30, width:30, borderRadius:100 }}
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>@{data.item.username}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Joined {moment(data.item.create_datetime).fromNow()}</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                      <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>Flash Market</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Use the form below to manage your custom flash market!</Text>
+                      </View>
+                      <Button
+                        float
+                        title='X'
+                        title_color={Colors.text.error}
+                        onPress={() => onClose()}
+                      />
+                    </View>
+                )
+            case 'activate':
+                if(poll?.status != 'pending'){ return <></> }
+                const ready = errors.length == 0 ? true : false
+                return (
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Flash Market is Pending</Text>
+                            <Text theme='description'>Complete set up and select activate when you are ready</Text>
+                        </View>
+                        <Button
+                            type='success'
+                            title='Activate'
+                            loading={action_loading}
+                            disabled={errors.length > 0 ? true : probability_changed ? true : false}
+                            style={{ opacity: ready && !action_loading && !probability_changed ? 1: 0.5 }}
+                            onPress={async() => {
+                                if(errors.length > 0){ return alert(errors.map(e => e)) }
+                                if(probability_changed){ return }
+                                setFlashState({ ...flash_state, action_loading: true });
+                                const resp = await PollApi.activatePoll(poll.poll_id);
+                                if(!resp){ return alert('Unable to activate market at this time') }
+                                setFlashState({
+                                    ...flash_state,
+                                    action_loading: false,
+                                    poll: resp.poll,
+                                    poll_options: resp.poll_options
+                                })
+                            }}
+                        />
+                    </View>
+                )
+            case 'closed':
+                if(!poll){ return <></> }
+                if(poll.status != 'closed'){return <></>}
+                return (
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.views.liquidMarket }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Flash Market is Closed</Text>
+                            <Text theme='description'>This flash market has been completed and all participants have been paid out</Text>
+                        </View>
+                    </View>
+                )
+            case 'pause_resume':
+                if(!poll){ return <></> }
+                if(!['active','paused',''].includes(poll.status)){ return <></> }
+                if(poll.winning_option_id){ return <></> }
+                return (
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Flash Market is {poll.status}</Text>
+                            <Text theme='description'>Complete set up and select activate when you are ready</Text>
+                        </View>
+                        {poll.status == 'paused' ?
+                        <Button
+                            type='success'
+                            title='Resume'
+                            loading={action_loading}
+                            disabled={action_loading ? true : false}
+                            style={{ opacity: action_loading? 0.5:1}}
+                            onPress={async() => {
+                                updatePoll({ ...poll, status: 'active' });
+                            }}
+                        />
+                        :
+                        <Button
+                            type='warning'
+                            title='Pause'
+                            loading={action_loading}
+                            disabled={action_loading ? true : false}
+                            style={{ opacity: action_loading? 0.5:1}}
+                            onPress={async() => {
+                                updatePoll({ ...poll, status: 'paused' });
+                            }}
+                        />
+                        }
+                    </View>
+                )
+            case 'resolve':
+                if(!poll){ return <></> }
+                if(!poll.winning_option_id){ return <></> }
+                if(!winning_option){ return <></> }
+                if(poll.status == 'closed'){ return <></> }
+                return (
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Resolve Flash Market</Text>
+                            <Text theme='description'>Resolve with option: {winning_option.option_name} as the winner</Text>
+                        </View>
+                        <Button
+                            type='success'
+                            title='Resolve'
+                            loading={action_loading}
+                            disabled={action_loading}
+                            style={{ opacity: action_loading ? 0.5:1 }}
+                            onPress={async() => handleResolve()}
+                        />
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'question', label: 'Question' },
+                                { key: 'options', label: 'Options' },
+                                { key: 'settings', label: 'Settings' },
+                                { key: 'results', label: 'Results' }
+                            ]}
+                            selected_option={active_step}
+                            onSelectOption={(key) => setFlashState({ ...flash_state, active_step: key })}
+                        />
+                    </View>
+                )
+            case 'image':
+                if(active_step != 'question'){ return <></> }
+                if(!draft_poll || !poll){ return <></> }
+                return (
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                      <View transparent style={{ flex:1, marginRight:10 }}>
+                        <Text theme='h1'>Flash Market Image</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Give the question an image that aligns with the question</Text>
+                      </View>
+                       <ImageUploader disabled={poll.status == 'closed' ? true : false} public_id={`poll_${poll_id}_${Math.random().toFixed(9)}`} onFinishUpload={(obj) => {
+                            updatePoll({ ...draft_poll, poll_image: { ...obj, url: obj.secure_url } })
+                        }}>
+                            {poll.poll_image ?
+                            <Image
+                                source={{ uri: poll.poll_image.url }}
+                                style={{ height:45, width:45 }}
+                                resizeMode='contain'
+                            />
+                            :
+                            <Icons.ImageIcon size={45} color={Colors.text.h1} />
+                            }
+                            <Text style={{ marginTop:5 }} textAlign='center' theme='action'>{draft_poll.poll_image ? 'CHANGE' : 'UPLOAD'}</Text>
+                        </ImageUploader>
+                    </View>
+                       
+                )
+            case 'question':
+                if(active_step != 'question'){ return <></> }
+                if(!draft_poll || !poll){ return <></> }
+                const is_q_changed = JSON.stringify(poll.poll_question) != JSON.stringify(draft_poll.poll_question) ? true : false
+                const edit_allowed = poll_summaries.length == 0 && ['pending','paused'].includes(poll.status) ? true : false
+                return (
+                    <View transparent>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                          <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Flash Market Question</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Edit your question below.  Questions can be edited until a response is recorded.</Text>
+                          </View>
+                        </View>
+                        <View transparent style={{ padding:20 }}>
+                            <TextInput
+                                style={{ height: 150, textAlign:'center' }}
+                                multiline={true}
+                                editable={edit_allowed}
+                                placeholder='Enter Question Here'
+                                value={draft_poll.poll_question}
+                                onChangeText={(text) => setFlashState({ ...flash_state, draft_poll: { ...draft_poll, poll_question: text } })}
+                            />
+                        </View>
+                        <Button
+                            title='SAVE QUESTION'
+                            type='success'
+                            disabled={!edit_allowed || !is_q_changed ? true : false}
+                            style={{ margin:10, opacity: !edit_allowed || !is_q_changed ? 0.5: 1 }}
+                            loading={action_loading}
+                            onPress={() => updatePoll(draft_poll)}
+                        />
+                    </View>
+                )
+            case 'results':
+                if(!poll){ return <></> }
+                if(active_step != 'results'){ return <></> }
+                let staked = poll_summaries.reduce((a,b) => a + b.stake, 0) - (poll.base_stake ?? 0)
+                let responses = poll_summaries.reduce((a,b) => a + b.count, 0) - poll_summaries.length;
+                if(responses < 0){ responses = 0 }
+                let participants = players.length
+                let total_stake = poll_summaries.reduce((a,b) => a + b.stake, 0);
+                let winnings = poll_summaries.reduce((a,b) => a + b.winnings, 0);
+                let revenue = total_stake - winnings
+                return (
+                    <View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Total Revenue</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Total amount of revenue earned on this flash market</Text>
+                            </View>
+                            <Text theme='h1'>${revenue.toFixed(2)}</Text>
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Total Volume</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Total amount bet on this market</Text>
+                            </View>
+                            <Text theme='h1'>${staked.toFixed(2)}</Text>
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Total Responses</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Total number of bets on this market</Text>
+                            </View>
+                            <Text theme='h1'>{responses.toFixed()}</Text>
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Participants</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Players that participated in this flash market</Text>
+                            </View>
+                            <Text theme='h1'>{participants.toFixed()}</Text>
+                            <Button
+                                onPress={() => setExpandParticipants(!expand_participants)}
+                                float 
+                                style={{ marginLeft:10, height:30, width:30, borderRadius:100, padding:10, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.ChevronIcon direction={expand_participants ? 'up' : 'down'} size={8} color={Colors.text.action} />
+                            </Button>
+                        </View>
+                        {expand_participants ?
+                        <View style={{ margin:10 }}>
+                            <FlatList
+                                data={players}
+                                renderItem={renderPlayers}
+                                key={'participant_list_poll'}
+                                keyExtractor={item => item.player_id.toString()}
+                            />
+                        </View>
+                        :<></>}
+                    </View>
+                )
+            case 'options':
+                if(!poll){ return <></> }
+                if(active_step != 'options'){ return <></> }
+                const add_allowed = ['pending','paused'].includes(poll.status) && total_responses == 0 ? true : false
+                return (
+                    <View>
+                         <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                          <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Flash Market Options</Text>
+                            {poll.status == 'pending' ?
+                            <Text theme='description' style={{ marginTop:3 }}>Enter the options below!</Text>
+                            :
+                            <Text theme='description' style={{ marginTop:3 }}>Select the winning option below</Text>
+                            }
+                          </View>
+                          {probability_changed ?
+                            <Button
+                                title='SAVE PROBABILITIES'
+                                onPress={() => handleSaveProbabilities()}
+                                type='success'
+                                disabled={action_loading}
+                                loading={action_loading}
+                                style={{ margin:5, padding:10, opacity:loading?0.5:1 }}
+                            />
+                            :<></>}
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <FlatList
+                                data={real_options.sort((a,b) => a.priority - b.priority || moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                                key='option_list'
+                                keyboardShouldPersistTaps
+                                keyExtractor={item => item.poll_option_id.toString()}
+                                renderItem={renderOptions}
+                            />
+                            {add_allowed ?
+                        <Button
+                            transparent
+                            title_color={Colors.text.action}
+                            title={real_options.length > 0 ? 'Add another option' : 'Add an option'}
+                            style={{ alignItems:'flex-start', padding:10 }}
+                            onPress={async() => handleAddOption()}
+                        />
+                        :<></>}
+                        </View>
+                        
+                    </View>
+                )
+            case 'settings':
+                if(active_step != 'settings'){ return <></> }
+                if(!draft_poll){ return <></> }
+                let settings_edit_allowed = ['paused','pending'].includes(draft_poll.status) && total_responses == 0 ? true : false
+                const min_stake_changed = settings_edit_allowed && poll?.minimum_stake != parseFloat(min_stake) ? true : false
+                const max_stake_changed = settings_edit_allowed && poll?.max_stake != parseFloat(max_stake) ? true : false
+                const base_stake_changed = settings_edit_allowed && poll?.base_stake != parseFloat(base_stake) ? true : false
+                return (
+                    <View>
+                        {player?.role == 'admin' ?
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Base Stake</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Fill responses with a base stake based on their probabilities.</Text>
+                            </View>
+                            <TextInput
+                                value={base_stake}
+                                editable={settings_edit_allowed}
+                                style={{ width:75, textAlign:'center' }}
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={(text) => setLabels({ ...labels, base_stake: text })}
+                            />
+                            {base_stake_changed && poll?.status == 'pending' ?
+                            <Button
+                                title='SAVE'
+                                type='success'
+                                onPress={() => {
+                                    let num = parseFloat(base_stake);
+                                    if(isNaN(num)){ return alert('Invalid value') }
+                                    if(num < 0){ return alert('Invalid amount') }
+                                    updatePoll({ ...draft_poll, base_stake: parseFloat(base_stake) })
+                                }}
+                            />
+                            :<></>}
+                        </View>
+                        :<></>}
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Minimum Stake Allowed</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>The smallest bet allowed to be placed on this market.</Text>
+                            </View>
+                            <TextInput
+                                value={min_stake}
+                                editable={settings_edit_allowed}
+                                onFocus={() => min_stake == '0' ? setLabels({ ...labels, min_stake: '' }): console.log('')}
+                                style={{ width:75, textAlign:'center' }}
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={(text) => setLabels({ ...labels, min_stake: text })}
+                            />
+                            {min_stake_changed ?
+                            <Button
+                                title='SAVE'
+                                type='success'
+                                onPress={() => {
+                                    let num = parseFloat(min_stake);
+                                    if(isNaN(num)){ return alert('Invalid value') }
+                                    if(num < 0){ return alert('Invalid amount') }
+                                    updatePoll({ ...draft_poll, minimum_stake: parseFloat(min_stake) })
+                                }}
+                            />
+                            :<></>}
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Max Stake Allowed</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>The largest bet allowed to be placed on this market.</Text>
+                            </View>
+                            <TextInput
+                                value={max_stake}
+                                editable={settings_edit_allowed}
+                                onFocus={() => max_stake == '0' ? setLabels({ ...labels, max_stake: '' }): console.log('')}
+                                style={{ width:75, textAlign:'center' }}
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={(text) => setLabels({ ...labels, max_stake: text })}
+                            />
+                            {max_stake_changed ?
+                            <Button
+                                title='SAVE'
+                                type='success'
+                                onPress={() => {
+                                    let num = parseFloat(max_stake);
+                                    if(isNaN(num)){ return alert('Invalid value') }
+                                    if(num < 0){ return alert('Invalid amount') }
+                                    updatePoll({ ...draft_poll, max_stake: parseFloat(max_stake) })
+                                }}
+                            />
+                            :<></>}
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Allow Multiple Responses</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>If on, players can select multiple options.</Text>
+                            </View>
+                            <Switch
+                                switch_type='on_off'
+                                disabled={settings_edit_allowed ? false: true}
+                                value={draft_poll.multi_responses_allowed ?? false}
+                                onChange={async(val) => {
+                                    updatePoll({ ...draft_poll, multi_responses_allowed: val })
+                                }}
+                            />
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Allow Increase Stake</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>If on, players can continue to add more funds to a selected option.</Text>
+                            </View>
+                            <Switch
+                                switch_type='on_off'
+                                disabled={settings_edit_allowed ? false : true}
+                                value={draft_poll.stake_increase_allowed ?? false}
+                                onChange={async(val) => {
+                                    updatePoll({ ...draft_poll, stake_increase_allowed: val })
+                                }}
+                            />
+                        </View>
+                        <View type='row' style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Flash Close Time</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>When should this market close?</Text>
+                            </View>
+                            <BETimePicker
+                                selected_time={moment(poll?.end_datetime)}
+                                disabled={settings_edit_allowed ? false : true}
+                                onSelectTime={(val) => {
+                                    updatePoll({ ...draft_poll, end_datetime: val })
+                                }}
+                            />
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{flex:1}}>
+                <FlatList
+                    data={sections}
+                    //keyboardShouldPersistTaps
+                    key='flash_market_sections'
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ManageFlashMarket