feat: show venue

src/components/Header/Header.js

@@ -46,7 +46,7 @@ export const Header = () => {
 					</Col>
 				</> : <>
 					<Button onClick={changeVisible} size="large">{t("header.menu", "Menu")}</Button>
-					<Drawer width={width >= 320 ? 320 : width} visible={showMenu} onClose={changeVisible} bodyStyle={{ width: '100%', textAlign: 'center', display: 'flex', flexDirection: 'column', maxHeight: 'calc(100vh - 50px)' }}>
+					<Drawer width={width >= 320 ? 320 : width} open={showMenu} onClose={changeVisible} bodyStyle={{ width: '100%', textAlign: 'center', display: 'flex', flexDirection: 'column', maxHeight: 'calc(100vh - 50px)' }}>
 						<div className={styles.mainMenuWrap}>
 							<MainMenu direction="vertical" onClose={changeVisible} />
 						</div>

src/modals/AddLiquidityModal.js

@@ -37,7 +37,7 @@ export const AddLiquidityModal = ({ disabled, yes_team, no_team }) => {
       width={width > 640 ? 640 : width}
       placement="right"
       size="large"
-      visible={visible}
+      open={visible}
       onClose={close}
     >
 

src/modals/ClaimProfitModal.js

@@ -46,7 +46,7 @@ export const ClaimProfitModal = ({ disabled, yes_team, no_team }) => {
       width={width > 640 ? 640 : width}
       placement="right"
       size="large"
-      visible={visible}
+      open={visible}
       onClose={close}
     >
       <Title level={2}>{t("modals.claim_profit.title", "Claim profit")}</Title>

src/modals/CreateNowModal.js

@@ -25,7 +25,7 @@ export const CreateNowModal = (props) => {
       placement="right"
       size="large"
       key={`${props.feed_name} ${props.event_date} ${props.expect_datafeed_value}`}
-      visible={visible}
+      open={visible}
       onClose={close}
       autoFocus={true}
       destroyOnClose={true}

src/modals/TradeModal.js

@@ -67,7 +67,7 @@ export const TradeModal = memo(({ disabled, visible, setVisible, yes_team, no_te
       width={width > 640 ? 640 : width}
       placement="right"
       size="large"
-      visible={visible}
+      open={visible}
       onClose={close}
     >
 

src/modals/ViewParamsModal.js

@@ -37,7 +37,7 @@ export const ViewParamsModal = ({ reserve_asset, allow_draw, oracle, feed_name,
       width={width > 640 ? 640 : width}
       placement="right"
       size="large"
-      visible={visible}
+      open={visible}
       onClose={close}
     >
       <Title level={2} style={{ marginBottom: 0 }}>{t("modals.view_params.title", "View params")}</Title>

src/modals/WalletModal.js

@@ -75,7 +75,7 @@ export const WalletModal = ({ children = "WALLET", type = "default", styles = {}
     <Button onClick={changeVisible} size="large" type={type} style={btnStyles}>{currentWalletAddress ? `${currentWalletAddress.slice(0, 7)}...` : (children === "WALLET" ? t("modals.wallet.title", "Wallet") : children)}</Button>
 
     <Modal
-      visible={visible}
+      open={visible}
       onCancel={changeVisible}
       footer={null}
     >

src/pages/MarketPage/MarketPage.js

@@ -21,7 +21,8 @@ import {
   selectActiveMarketParams,
   selectActiveMarketStateVars,
   selectActiveMarketStatus,
-  selectActiveTeams
+  selectActiveTeams,
+  selectActiveVenue
 } from "store/slices/activeSlice";
 import { setActiveMarket } from "store/thunks/setActiveMarket";
 import { selectLanguage, selectPriceOrOdds, selectReserveAssets, selectReservesRate } from "store/slices/settingsSlice";
@@ -123,6 +124,8 @@ export const MarketPage = () => {
   const reserveAssets = useSelector(selectReserveAssets);
   const stateVars = useSelector(selectActiveMarketStateVars);
 
+  const venue = useSelector(selectActiveVenue);
+
   const candles = useSelector(selectActiveDailyCandles);
   const datafeedValue = useSelector(selectActiveDatafeedValue);
 
@@ -400,6 +403,12 @@ export const MarketPage = () => {
         </Row>
       </div>}
 
+      {venue ? <Row className={styles.venueWrap}>
+        <Col span={24} className={styles.venueCol}>
+          <span>{venue}</span>
+        </Col>
+      </Row> : null}
+
       <Row justify="space-between" align="middle">
         <Space size='large' wrap={true} style={{ marginBottom: 20, marginTop: 10 }}>
           <TradeModal

src/pages/MarketPage/MarketPage.module.css

@@ -117,6 +117,14 @@
   min-height: 120px;
 }
 
+.venueWrap {
+  margin-bottom: 14px;
+}
+
+.venueCol {
+  text-align: center;
+}
+
 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) {
   .vs {

src/services/backend.js

@@ -99,6 +99,11 @@ class Backend {
     const crest = await this.axios.get(`/crest/${sport}/${competition}/${team_id}`);
     return crest?.data;
   }
+
+  getVenue = async (feed_name) => {
+    const venueRes = await this.axios.get(`/venue/${feed_name}`);
+    return venueRes?.data;
+  }
 }
 
 export default new Backend();

src/store/slices/activeSlice.js

@@ -44,7 +44,7 @@ export const activeSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder.addCase(setActiveMarket.fulfilled, (state, action) => {
-      const { params, stateVars, recentEvents, recentEventsCount, dailyCandles, datafeedValue, yesTeam, noTeam, currencyCandles, currencyCurrentValue, league, created_at, committed_at, base_aa, first_trade_ts, yes_odds, no_odds, draw_odds, yes_crest_url, no_crest_url } = action.payload;
+      const { params, stateVars, recentEvents, recentEventsCount, dailyCandles, datafeedValue, yesTeam, noTeam, currencyCandles, currencyCurrentValue, league, created_at, committed_at, base_aa, first_trade_ts, yes_odds, no_odds, draw_odds, yes_crest_url, no_crest_url, venue = null } = action.payload;
 
       state.params = { ...params, ...league, created_at, committed_at, first_trade_ts, base_aa, yes_odds, no_odds, draw_odds, yes_crest_url, no_crest_url };
       state.stateVars = stateVars;
@@ -55,7 +55,8 @@ export const activeSlice = createSlice({
       state.currencyCandles = currencyCandles || [];
       state.currencyCurrentValue = currencyCurrentValue || 0;
       state.teams = { yes: yesTeam || null, no: noTeam || null };
-
+      state.venue = venue;
+
       state.status = 'loaded';
     });
 
@@ -104,5 +105,6 @@ export const selectActiveRecentEventsCount = state => state.active.recentEventsC
 export const selectActiveDailyCandles = state => state.active.dailyCandles;
 export const selectActiveDatafeedValue = state => state.active.datafeedValue;
 export const selectActiveTeams = state => state.active.teams;
+export const selectActiveVenue = state => state.active.venue;
 export const selectActiveCurrencyCandles = state => state.active.currencyCandles;
 export const selectActiveCurrencyCurrentValue = state => state.active.currencyCurrentValue;

src/store/thunks/setActiveMarket.js

@@ -88,6 +88,7 @@ export const setActiveMarket = createAsyncThunk(
     let currencyCurrentValue = 0;
     let league_emblem = null;
     let league = null;
+    let venue = null;
 
     let yes_odds = null;
     let no_odds = null;
@@ -115,8 +116,14 @@ export const setActiveMarket = createAsyncThunk(
       }
 
       const [championship, yes_abbreviation, no_abbreviation] = params.feed_name.split("_");
-      const championships = await backend.getChampionships();
 
+      const [venueData, championships] = await Promise.all([
+        backend.getVenue(params.feed_name).then(data => data?.data).catch(() => null),
+        backend.getChampionships()
+      ]);
+
+      venue = venueData;
+
       const sport = Object.entries(championships).find(([_, cs]) => cs.find(({ code }) => code === championship));
 
       if (sport) {
@@ -183,6 +190,7 @@ export const setActiveMarket = createAsyncThunk(
 
     return {
       params,
+      venue,
       stateVars,
       base_aa,
       dailyCandles,