const themeColor = props.themeColor; const generaltheme = { height: "110px", align: "center", description: "Explore the status of your Election activity.", brand: "Election Explorer", fontsize: "100", fontweight: "25px", afterbrand: "🏦", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const thirdtheme = { height: "90px", align: "center", description: "", brand: "Election", fontsize: "50", fontweight: "25px", afterbrand: "Staus", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const fifththeme = { height: "80px", align: "left", description: "", brand: "Votes Cast", fontsize: "25px", fontweight: "25px", afterbrand: "HOM", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const sixththeme = { height: "80px", align: "left", description: "", brand: "Votes Cast", fontsize: "25px", fontweight: "25px", afterbrand: "COA", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const sevenththeme = { height: "80px", align: "left", description: "", brand: "Votes Cast", fontsize: "25px", fontweight: "25px", afterbrand: "TC", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const eighttheme = { height: "80px", align: "left", description: "", brand: "Votes Received", fontsize: "25px", fontweight: "25px", afterbrand: "HOM", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const firsttheme = { height: "80px", align: "left", description: "", brand: "Votes Received", fontsize: "25px", fontweight: "25px", afterbrand: "COA", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; const ninththeme = { height: "80px", align: "left", description: "", brand: "Votes Received", fontsize: "25px", fontweight: "25px", afterbrand: "TC", afterbrandcolor: themeColor?.dynamic_header?.afterbrandcolor || "#789efb", fontbrand: " Arial, sans-serif", color1brand: themeColor?.dynamic_header?.color1brand || "#000", color2brand: themeColor?.dynamic_header?.color2brand || "#806ce1", colordescription: themeColor?.dynamic_header?.colordescription || "#806ce1", fontsubtitle: " Arial, sans-serif", background: themeColor?.dynamic_header?.background || "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", }; //---------------------------------------------------------------------------------- const queryHashes = [ { id: 1, hash: "4a3e0435-a756-47e4-996a-5f5fc790b504" }, { id: 2, hash: "96696597-7797-4096-9fe1-5dcbbe6a2c9c" }, { id: 3, hash: "165e341e-4efc-4ef9-a7ae-035d7886a26d" }, { id: 4, hash: "c7a65d89-6b47-44b2-b0d5-b080594e3af5" }, { id: 5, hash: "ee065234-4fea-4c86-98a8-294238a86b04" }, { id: 6, hash: "c4adb585-7c33-4b2d-bd40-b80c48d8bddd" }, { id: 7, hash: "9f437c75-90b2-4b4b-b49b-895aca709c41" }, { id: 8, hash: "0857676d-6450-4431-9695-bbd5ddb2251e" }, { id: 9, hash: "e3de7c35-9ae6-4ea6-917a-14b654f6259c" }, { id: 10, hash: "fcbf4ffa-ffa6-425d-b3d8-bd256e41660d" }, { id: 11, hash: "fbd78c9a-d988-4ff0-b14c-501276bba85f" }, { id: 12, hash: "4a3e0435-a756-47e4-996a-5f5fc790b504" }, ]; State.init({ singer: "", data: null, filteredData: [], secondfilteredData: [], thirdfilteredData: [], fourthfilteredData: [], fifthfilteredData: [], sixthfilteredData: [], seventhfilteredData: [], eightfilteredData: [], ninthfilteredData: [], eleventhfilteredData: [], tenthfilteredData: [], twelvefilteredData: [], tab: "first", isLoading: false, error: [], }); //--------------------------------------------------------------------------------------- const inputHandler = ({ target }) => { const singer = target.value.toLowerCase().trim(); State.update({ singer: singer }); }; //--------------------------------------------------------------------------------------- const onHandelDate = (inputDate) => { let date = new Date(inputDate); let monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; let day = date.getDate(); let month = monthNames[date.getMonth()]; let year = date.getFullYear(); let createdAt; createdAt = day + " " + month + " " + year; return createdAt; }; //------------------------------------------------------------------------------------------------ //1 const handleData = () => { if (!state.singer.length) { State.update({ error: [...state.error, "please insert an address"] }); return; } if (state.data === state.singer) { State.update({ error: [...state.error, "please insert a new address"] }); return; } const result = fetchData(queryHashes[0].hash); if (result.isLoading) { State.update({ isLoading: true, filterData: [] }); } if (result.error) { const errors = state.error; errors.push(`error message is : "${result.error}"`); State.update({ error: errors, isLoading: false }); } if (result.data) { const filteredData = filterData(result.data); State.update({ data: state.singer, filteredData, isLoading: false }); } //----------------------------------------------- const secondresult = fetchData(queryHashes[1].hash); if (secondresult.isLoading) { State.update({ isLoading: true, secondfilterData: [] }); } if (secondresult.error) { const errors = state.error; errors.push(`error message is : "${secondresult.error}"`); State.update({ error: errors, isLoading: false }); } if (secondresult.data) { const secondfilteredData = secondfilterData(secondresult.data); State.update({ data: state.singer, secondfilteredData, isLoading: false }); } //----------------------------------------------- const thirdresult = fetchData(queryHashes[2].hash); if (thirdresult.isLoading) { State.update({ isLoading: true, thirdfilterData: [] }); } if (thirdresult.error) { const errors = state.error; errors.push(`error message is : "${thirdresult.error}"`); State.update({ error: errors, isLoading: false }); } if (thirdresult.data) { const thirdfilteredData = thirdfilterData(thirdresult.data); State.update({ data: state.singer, thirdfilteredData, isLoading: false }); } //-------------------------------------------------------------------------- const fourthresult = fetchData(queryHashes[3].hash); if (fourthresult.isLoading) { State.update({ isLoading: true, fourthfilterData: [] }); } if (fourthresult.error) { const errors = state.error; errors.push(`error message is : "${fourthresult.error}"`); State.update({ error: errors, isLoading: false }); } if (fourthresult.data) { const fourthfilteredData = fourthfilterData(fourthresult.data); State.update({ data: state.singer, fourthfilteredData, isLoading: false }); } //-------------------------------------------------------------------------- const fifthresult = fetchData(queryHashes[4].hash); if (fifthresult.isLoading) { State.update({ isLoading: true, fifthfilterData: [] }); } if (fifthresult.error) { const errors = state.error; errors.push(`error message is : "${fifthresult.error}"`); State.update({ error: errors, isLoading: false }); } if (fifthresult.data) { const fifthfilteredData = fifthfilterData(fifthresult.data); State.update({ data: state.singer, fifthfilteredData, isLoading: false }); } //-------------------------------------------------------------------------- const sixthresult = fetchData(queryHashes[5].hash); if (sixthresult.isLoading) { State.update({ isLoading: true, sixthfilterData: [] }); } if (sixthresult.error) { const errors = state.error; errors.push(`error message is : "${sixthresult.error}"`); State.update({ error: errors, isLoading: false }); } if (sixthresult.data) { const sixthfilteredData = sixthfilterData(sixthresult.data); State.update({ data: state.singer, sixthfilteredData, isLoading: false }); } //-------------------------------------------------------------------------- const seventhresult = fetchData(queryHashes[6].hash); if (seventhresult.isLoading) { State.update({ isLoading: true, seventhfilterData: [] }); } if (seventhresult.error) { const errors = state.error; errors.push(`error message is : "${seventhresult.error}"`); State.update({ error: errors, isLoading: false }); } if (seventhresult.data) { const seventhfilteredData = seventhfilterData(seventhresult.data); State.update({ data: state.singer, seventhfilteredData, isLoading: false }); } //-------------------------------------------------------------------------- const eightresult = fetchData(queryHashes[7].hash); if (eightresult.isLoading) { State.update({ isLoading: true, eightfilterData: [] }); } if (eightresult.error) { const errors = state.error; errors.push(`error message is : "${eightresult.error}"`); State.update({ error: errors, isLoading: false }); } if (eightresult.data) { const eightfilteredData = eightfilterData(eightresult.data); State.update({ data: state.singer, eightfilteredData, isLoading: false }); } //----------------------------------------------- const ninthresult = fetchData(queryHashes[8].hash); if (ninthresult.isLoading) { State.update({ isLoading: true, ninthfilterData: [] }); } if (ninthresult.error) { const errors = state.error; errors.push(`error message is : "${ninthresult.error}"`); State.update({ error: errors, isLoading: false }); } if (ninthresult.data) { const ninthfilteredData = ninthfilterData(ninthresult.data); State.update({ data: state.singer, ninthfilteredData, isLoading: false }); } //----------------------------------------------- const tenthresult = fetchData(queryHashes[9].hash); if (tenthresult.isLoading) { State.update({ isLoading: true, tenthfilterData: [] }); } if (tenthresult.error) { const errors = state.error; errors.push(`error message is : "${tenthresult.error}"`); State.update({ error: errors, isLoading: false }); } if (tenthresult.data) { const tenthfilteredData = tenthfilterData(tenthresult.data); State.update({ data: state.singer, tenthfilteredData, isLoading: false }); } //----------------------------------------------- const eleventhresult = fetchData(queryHashes[10].hash); if (eleventhresult.isLoading) { State.update({ isLoading: true, eleventhfilterData: [] }); } if (eleventhresult.error) { const errors = state.error; errors.push(`error message is : "${eleventhresult.error}"`); State.update({ error: errors, isLoading: false }); } if (eleventhresult.data) { const eleventhfilteredData = eleventhfilterData(eleventhresult.data); State.update({ data: state.singer, eleventhfilteredData, isLoading: false, }); } //----------------------------------------------- const twelveresult = fetchData(queryHashes[11].hash); if (twelveresult.isLoading) { State.update({ isLoading: true, twelvefilterData: [] }); } if (twelveresult.error) { const errors = state.error; errors.push(`error message is : "${twelveresult.error}"`); State.update({ error: errors, isLoading: false }); } if (twelveresult.data) { const twelvefilteredData = twelvefilterData(twelveresult.data); State.update({ data: state.singer, twelvefilteredData, isLoading: false, }); } }; //------------------------------------------------------------------------------------------------ //1 const filterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //2 const secondfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //---------------------------------------------------------------------------------------------- //3 const thirdfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //4 const fourthfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //5 const fifthfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //6 const sixthfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //7 const seventhfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //7 const eightfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //--------------------------------------------------------------------------- //8 const ninthfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //9 const tenthfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //--------------------------------------------------------------------------- //10 const eleventhfilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //--------------------------------------------------------------------------- //11 const twelvefilterData = (data) => { return data.filter((row) => row.SINGER === state.singer); }; //------------------------------------------------------------------------------------------------ //--------------------------------------------------------------------------- const fetchData = (hash) => { const data = fetch( `https://api.flipsidecrypto.com/api/v2/queries/${hash}/data/latest`, { subscribe: true, method: "GET", headers: { Accept: "*/*", }, } ); const result = { data: (data && data.body) || null, error: (data && !data.ok && (data.status || data.error)) || null, isLoading: !data && !error, }; return result; }; if (state.isLoading) { handleData(); } if (state.error.length > 0) { function hide() { const errors = state.error; errors.shift(); if (errors.length > 0) setTimeout(hide, 2500); State.update({ error: errors }); } setTimeout(hide, 2500); } //------------------------------------------------------------------------------------------------- const tabs = { firstTab: "first", secondTab: "second", }; const setTab = (tab) => State.update({ tab }); const Container = styled.div` &&{text-align:center}; .tabContent{ display:inline-flex; align-items:center; background: rgba(26, 46, 51, 0.25); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding:3px 4px; list-style-type:none; margin: 0 auto; } .tab-item .active{ background: #304352; } .tab-item button{ background-color:transparent; border-radius: 8px; font-weight: 500; font-size: 14px; color:#fff; height:30px; padding:0 22px; border:none; } `; const Input = styled.input` color:${themeColor?.search_sbt?.input_text_color}; background-color:${themeColor?.search_sbt?.input_bg}; border: 1px solid ${themeColor?.search_sbt?.input_border}; &:focus{ background-color:${themeColor?.search_sbt?.input_bg}; color:${themeColor?.search_sbt?.input_text_color}; border: 1px solid ${themeColor?.search_sbt?.input_border}; }; &:hover{ background-color:${themeColor?.search_sbt?.input_bg_hover} }; `; const Button = styled.button` color: ${themeColor?.search_sbt?.search_btn_text}; font-size: 16px; padding: 0.5rem 1rem; font-weight: 400; background-color: ${themeColor?.search_sbt?.search_btn_bg}; &:hover {background-color: ${themeColor?.search_sbt?.search_btn_bg_hover}}; border: 1px solid ${themeColor?.search_sbt?.search_btn_bg}; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02); min-height: calc(1.5em + 1rem + 2px); border-radius: 40px; line-height: 29px; letter-spacing: 0.01em; `; const Table = styled.table` --bs-table-color: ${themeColor?.search_sbt?.table_color}; --bs-table-bg: ${themeColor?.search_sbt?.table_bg}; --bs-table-border-color: ${themeColor?.search_sbt?.table_border_color}; --bs-table-accent-bg: ${themeColor?.search_sbt?.table_accent_bg}; --bs-table-striped-color: ${themeColor?.search_sbt?.table_striped_color}; --bs-table-striped-bg:${themeColor?.search_sbt?.table_striped_bg}; --bs-table-hover-color: ${themeColor?.search_sbt?.table_hover_color}; --bs-table-hover-bg:${themeColor?.search_sbt?.table_hover_bg} `; const getMixProps = (data, dateKey, serieses, colors, chartOption) => { data = data || []; serieses = serieses || [{ key: "", seriesName: "", type: "", id: 1 }]; colors = colors || []; chartOption = chartOption || {}; const dataFormat = serieses.map((series) => { const dataFormated = data.map((d) => [d[dateKey] * 1000, d[series.key]]); return { data: dataFormated, name: series.seriesName, type: series.type, axisId: series.id, }; }); const props = { series: dataFormat, colors: colors, chartOption: { title: "chart title", subtitle: "chart subtitle", legend: true, stacking: "false", ...chartOption, }, overrideOptions: { plotOptions: { column: { stacking: "false", }, series: { dataGrouping: { enabled: false }, }, }, }, themeColor: { chart: themeColor.chart }, spinnerColors: themeColor.spinnerColors, }; return props; }; const getPieProps = (data, [key, value], colors, chartOption) => { data = data || []; colors = colors || []; chartOption = chartOption || {}; const groupedData = {}; for (const item of data) { const keyValue = item[key]; const valueValue = item[value]; if (groupedData[keyValue]) { groupedData[keyValue] += valueValue; } else { groupedData[keyValue] = valueValue; } } const dataFormat = Object.entries(groupedData).map( ([groupKey, groupValue]) => [groupKey, groupValue] ); const props = { data: dataFormat, colors: colors, chartOption: { title: "chart title", type: "pie", legend: false, connector: false, ...chartOption, }, themeColor: { chart: themeColor.chart }, spinnerColors: themeColor.spinnerColors, }; return props; }; const noData = <div className="w-100 py-4 text-center">No data available</div>; let fifth = ( <div className="row w-100 py-4 g-4"> <div style={{ backgroundColor: themeColor.sbt_area?.section_bg }} className=" col-12 col-md-12" > <Widget src="mob.near/widget/ProfileLarge" props={{ accountId: state.singer }} /> </div> </div> ); let third = ( <div style={{ background: themeColor?.sbt_area?.section_bg }} className="shadow-sm rounded-2 overflow-auto" > <Widget src="lord1.near/widget/header-dynamic" props={thirdtheme} /> <div className="w-100 mx-auto shadow-sm rounded-4 overflow-auto px-2 mb-2"> {state.thirdfilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination }, data: state.thirdfilteredData, rowsCount: "", columns: [ { title: "Signer", key: "SINGER", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, { title: "HOM", key: "hom", progress: "yes", percent: "hidden", description: "House of Merit votes", }, { title: "COA", key: "coa", progress: "yes", percent: "hidden", description: "Council Of Advisors votes", }, { title: "TC", key: "tc", progress: "yes", percent: "hidden", description: "Transparency Commission", }, { title: "BP", key: "VOTE", description: "Budget Package vote", }, ], }} /> ) : ( noData )} </div> <div className="container"> <div className="row"> <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={fifththeme} /> <div style={{ background: themeColor?.sbt_area?.card_bg }} className="w-100 mx-auto shadow-sm rounded-4 " > {state.fifthfilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination, }, data: state.fifthfilteredData, rowsCount: "5", columns: [ { title: "Voter", key: "SINGER", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, { title: "Candidate", key: "VALUE", description: "Candidate", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, ], }} /> ) : ( noData )} </div> </div> <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={sixththeme} /> <div style={{ background: themeColor?.sbt_area?.card_bg }} className="w-100 mx-auto shadow-sm rounded-4 overflow-auto" > {state.sixthfilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination, }, data: state.sixthfilteredData, rowsCount: "5", columns: [ { title: "Voter", key: "SINGER", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, { title: "Candidate", key: "VALUE", description: "Candidate", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, ], }} /> ) : ( noData )} </div> </div> <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={sevenththeme} /> <div style={{ background: themeColor?.sbt_area?.card_bg }} className="w-100 mx-auto shadow-sm rounded-4 overflow-auto" > {state.seventhfilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination, }, data: state.seventhfilteredData, rowsCount: "5", columns: [ { title: "Voter", key: "SINGER", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", hyperlink: "yes", }, { title: "Candidate", key: "VALUE", description: "Candidate", }, ], }} /> ) : ( noData )} </div> </div>{" "} </div> </div> </div> ); let ten = ( <div style={{ background: themeColor?.sbt_area?.section_bg }} className="shadow-sm rounded-2 overflow-auto" > <div className="container"> <div className="row"> <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={eighttheme} /> <div style={{ background: themeColor?.sbt_area?.card_bg }} className="w-100 mx-auto shadow-sm rounded-4 " > {state.eightfilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination, }, data: state.eightfilteredData, rowsCount: "5", columns: [ { title: "Voter", key: "VALUE", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, { title: "Candidate", key: "SINGER", description: "Candidate", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, ], }} /> ) : ( noData )} </div> </div> <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={firsttheme} /> <div style={{ background: themeColor?.sbt_area?.card_bg }} className="w-100 mx-auto shadow-sm rounded-4 " > {state.twelvefilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination, }, data: state.twelvefilteredData, rowsCount: "5", columns: [ { title: "Voter", key: "VOTER", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, { title: "Candidate", key: "SINGER", description: "Candidate", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, ], }} /> ) : ( noData )} </div> </div>{" "} <div className="col-md-4"> <Widget src="lord1.near/widget/header-dynamic" props={ninththeme} /> <div style={{ background: themeColor?.sbt_area?.card_bg }} className="w-100 mx-auto shadow-sm rounded-4 overflow-auto" > {state.ninthfilteredData.length > 0 ? ( <Widget src="lord1.near/widget/table-pagination" props={{ themeColor: { table_pagination: themeColor.table_pagination, }, data: state.ninthfilteredData, rowsCount: "5", columns: [ { title: "Voter", key: "VOTER", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, { title: "Candidate", key: "SINGER", description: "Candidate", link: "yes", beforehref: "https://near.social/mob.near/widget/ProfilePage?accountId=", afterhref: "", hyperlink: "yes", }, ], }} /> ) : ( noData )} </div> </div>{" "} </div> </div> </div> ); console.log(state.filteredData); console.log(state.secondfilteredData); console.log(state.fourthfilteredData); return ( <div style={{ backgroundColor: themeColor.page_bg }} className="container-fluid py-2 rounded-4" > <div className="toast-container position-fixed bottom-0 end-0 p-3"> {state.error.length > 0 && state.error.map((er) => ( <div className="toast show align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" > <div className="d-flex"> <div className="toast-body">{er}</div> </div> </div> ))} </div> <div className="shadow-sm rounded-4" style={{ background: themeColor?.search_sbt?.section_bg }} > <Widget src="lord1.near/widget/header-dynamic" props={generaltheme} /> </div> <div className="search py-4"> <div className="row"> <div className="col-8 "> <Input onBlur={inputHandler} defaultValue={state.singer} type="input" className="form-control form-control-lg rounded-4" id="address" placeholder="jlw.near" /> </div> <div className="col-4 col-lg-auto"> <Button disabled={state.isLoading} onClick={handleData} className="btn-lg" type="button" > {state.isLoading ? ( <div className="text-center px-4"> <div className="spinner-border spinner-border-sm" role="status"> <span className="visually-hidden">Loading...</span> </div> </div> ) : ( "search" )} </Button> </div> </div> </div> <div style={{ background: themeColor?.search_sbt?.card_bg }} className={`shadow-sm rounded h-100 `} > {!state.isLoading && state.data && ( <div style={{ backgroundColor: themeColor?.search_sbt?.table_bg }} className="table-responsive" > {fifth} {third} {ten} <div> <div className="py-4"> <Container> <ul className="tabContent"> <li className="tab-item"> <button className={`${ state.tab === tabs.firstTab ? "active" : "" }`} aria-current="page" onClick={() => setTab(tabs.firstTab)} > User's activity </button> </li> <li className="tab-item"> <button className={`${ state.tab === tabs.secondTab ? "active" : "" }`} aria-current="page" onClick={() => setTab(tabs.secondTab)} > Activity received from others </button> </li> </ul> </Container> </div> {state.tab === "first" && ( <Widget src="lord1.near/widget/first-tab-explore-election" props={{ secondData: state.secondfilteredData, thirdData: state.fourthfilteredData, themeColor, }} /> )} {state.tab === "second" && ( <Widget src="lord1.near/widget/second-tab-explore-election" props={{ secondData: state.tenthfilteredData, thirdData: state.eleventhfilteredData, themeColor, }} /> )} </div> </div> )} </div> </div> ); // const props = { // themeColor: { // dynamic_header: { // afterbrandcolor: "#789efb", // color1brand: "#000", // color2brand: "#806ce1", // colordescription: "#806ce1", // background: // "radial-gradient(circle, rgba(210,202,250,1) 0%, rgba(230,230,231,0.01) 0%, rgba(235,238,255,1) 100%, rgba(235,231,253,1) 100%, rgba(255,241,241,1) 100%, rgba(46,52,90,1) 100%);", // }, // search_sbt: { // card_bg: "rgb(49, 62, 89)", // search_btn_bg: "rgb(49,62,89)", // search_btn_bg_hover: "rgba(49,62,89,0.8)", // search_btn_text: "rgb(255,255,255)", // input_bg: "rgb(49,62,89)", // input_bg_hover: "rgba(49,62,89,0.8)", // input_text_color: "rgb(255,255,255)", // input_border: "rgba(49,62,89,0.8)", // table_bg: "transparent", // table_color: "rgb(255,255,255)", // table_border_color: "", // table_accent_bg: "", // table_striped_color: "rgb(255,255,255)", // table_striped_bg: "", // table_hover_color: "rgb(255,255,255)", // table_hover_bg: "", // }, // }, // };