From ed26611d359c6f8acf82af6389d0b43bfff95dc3 Mon Sep 17 00:00:00 2001 From: trendpeek Date: Tue, 11 Oct 2022 18:19:06 +0500 Subject: [PATCH 1/6] api --- .env.production | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 .env.production diff --git a/.env.production b/.env.production deleted file mode 100644 index 0b333d0..0000000 --- a/.env.production +++ /dev/null @@ -1,2 +0,0 @@ -INFURA_API='8QAV9SdDHssoGB8NGQO2dZ4YnF7nKRhe' -VITE_SN_PVT_KEY='0x03fd5b55658a4801f5f25a40414815a499af43c0a09a20abc7521bf8bd74463f' \ No newline at end of file From acfa0441430a264744774b1fd0668025b41ce84f Mon Sep 17 00:00:00 2001 From: trendpeek Date: Tue, 11 Oct 2022 18:19:37 +0500 Subject: [PATCH 2/6] api --- src/queries/ethereum/index.ts | 2 -- src/queries/starkNet/index.ts | 3 --- vite.config.js | 10 +--------- 3 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/queries/ethereum/index.ts b/src/queries/ethereum/index.ts index d430192..10bf021 100644 --- a/src/queries/ethereum/index.ts +++ b/src/queries/ethereum/index.ts @@ -38,7 +38,6 @@ export const useEthBlocksQuery = () => { export const useEthDetailQuery4h = () => { const fetch = async () => { const { data } = await axios.get(`${STARKSTAION_API_ENDPOINT}eth/detail?period=4h`, {headers}); - // const { data } = await axios.get(`/api/eth/detail?period=4h`, {headers}); return data; }; return useQuery<{ [key in string]: any }>('useEthDetailQuery4h', fetch); @@ -47,7 +46,6 @@ export const useEthBlocksQuery = () => { export const useEthDetailQuery1d = () => { const fetch = async () => { const { data } = await axios.get(`${STARKSTAION_API_ENDPOINT}eth/detail?period=24h`, {headers}); - // const { data } = await axios.get(`/api/eth/detail?period=24h`, {headers}); return data; }; return useQuery<{ [key in string]: any }>('useEthDetailQuery1d', fetch); diff --git a/src/queries/starkNet/index.ts b/src/queries/starkNet/index.ts index add7a2f..7201e01 100644 --- a/src/queries/starkNet/index.ts +++ b/src/queries/starkNet/index.ts @@ -24,7 +24,6 @@ export const useStarkBlocksQuery = () => { export const useSnBlockQuery = () => { const fetch = async () => { let { data } = await axios.get(`${STARKSTAION_API_ENDPOINT}stark/detail?limit=12`, {headers}); - // let { data } = await axios.get(`/api/stark/detail?limit=12`, {headers}); return {detail:data, lastUpdated: dayjs()}; }; return useQuery<{ detail:{[key in string]: any}, lastUpdated:any }>('useSnBlockQuery', fetch, { @@ -35,7 +34,6 @@ export const useSnBlockQuery = () => { export const useSnDetailQuery4h = () => { const fetch = async () => { const { data } = await axios.get(`${STARKSTAION_API_ENDPOINT}stark/detail?period=4h`, {headers}); - // const { data } = await axios.get(`/api/stark/detail?period=4h`, {headers}); return data; }; return useQuery<{ [key in string]: any }>('useSnDetailQuery4h', fetch); @@ -44,7 +42,6 @@ export const useSnDetailQuery4h = () => { export const useSnDetailQuery1d = () => { const fetch = async () => { const { data } = await axios.get(`${STARKSTAION_API_ENDPOINT}stark/detail?period=24h`, {headers}); - // const { data } = await axios.get(`/api/stark/detail?period=24h`, {headers}); return data; }; return useQuery<{ [key in string]: any }>('useSnDetailQuery1d', fetch); diff --git a/vite.config.js b/vite.config.js index 9a55fba..b2df4dc 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,13 +4,5 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], - // server: { - // proxy: { - // "/api": { - // target: "http://170.187.225.159:3000/", - // changeOrigin: true, - // secure: false, - // }, - // }, - // }, + }) From 35a76b8d82f5c50f5fded71fcc1c04bc59587c8a Mon Sep 17 00:00:00 2001 From: trendpeek Date: Wed, 19 Oct 2022 12:32:43 +0500 Subject: [PATCH 3/6] goerli integration --- src/App.css | 104 ++-------------------- src/App.tsx | 28 +++--- src/components/fee/FeeChart.tsx | 27 ++++-- src/components/fee/FeePanel.tsx | 77 +++++++++------- src/components/footer/Footer.tsx | 2 +- src/components/latency/LatencyChart.tsx | 4 +- src/components/latency/LatencyPanel.tsx | 28 +++--- src/components/navbar/Navbar.tsx | 77 ++++++++++++---- src/components/transactions/TxnsChart.tsx | 3 +- src/components/transactions/TxnsPanel.tsx | 16 +++- src/constants/globals.ts | 8 +- src/context/AppContext.tsx | 26 ++++++ src/pages/Main.tsx | 14 ++- src/queries/starkNet/index.ts | 12 +-- src/services/stark/index.ts | 52 +++++++---- 15 files changed, 265 insertions(+), 213 deletions(-) create mode 100644 src/context/AppContext.tsx diff --git a/src/App.css b/src/App.css index 49eb42f..f18087a 100644 --- a/src/App.css +++ b/src/App.css @@ -29,11 +29,16 @@ body { overflow-y: auto; display:block; } + thead{ position:sticky; top:0 } +input:checked ~ .dot { + transform: translateX(100%); + background-color: #fb7185; +} ::-webkit-scrollbar { width: 12px; @@ -50,7 +55,6 @@ thead{ ::-webkit-scrollbar-thumb:hover { background-color: #0d527a; - /* cursor: pointer; */ } ::-webkit-scrollbar-track { @@ -59,106 +63,8 @@ thead{ ::-webkit-scrollbar-button:single-button { background-color: #081128; - /* background-size: 8px; */ - /* background-repeat: no-repeat; */ -} -/* -::-webkit-scrollbar-button:single-button:vertical:decrement { - height: 10px; - width: 10px; - background-position: center 4px; - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:vertical:decrement:hover { - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:single-button:vertical:increment { - height: 10px; - width: 10px; - background-position: center 4px; - background-image: url("data:image/svg+xml;utf8,"); -} - -::-webkit-scrollbar-button:vertical:single-button:increment:hover { - background-image: url("data:image/svg+xml;utf8,"); -} */ - -/* -.menus { - display: flex; - list-style: none; -} - -.menu-items { - position: relative; - font-size: 14px; -} - -.menu-items a { - display: block; - font-size: inherit; - color: inherit; - text-decoration: none; } -.menu-items button { - color: inherit; - font-size: inherit; - border: none; - background-color: transparent; - cursor: pointer; - width: 100%; -} - -.menu-items a, -.menu-items button { - text-align: left; - padding: 0.7rem 1rem; -} - -.menu-items a:hover, -.menu-items button:hover { - background-color: #f2f2f2; -} - -.arrow::after { - content: ""; - display: inline-block; - margin-left: 0.28em; - vertical-align: 0.09em; - border-top: 0.42em solid; - border-right: 0.32em solid transparent; - border-left: 0.32em solid transparent; -} - -.dropdown { - position: absolute; - right: 0; - left: auto; - box-shadow: 0 10px 15px -3px rgba(46, 41, 51, 0.08), - 0 4px 6px -2px rgba(71, 63, 79, 0.16); - font-size: 0.875rem; - z-index: 9999; - min-width: 10rem; - padding: 0.5rem 0; - list-style: none; - background-color: #fff; - border-radius: 0.5rem; - display: none; -} - -.dropdown.show { - display: block; -} - -.dropdown .dropdown-submenu { - position: absolute; - left: 100%; - top: -7px; -} */ - @tailwind base; @tailwind components; @tailwind utilities; diff --git a/src/App.tsx b/src/App.tsx index 9c3f65d..214b248 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,26 +3,32 @@ import { Test, Main, Disclaimer } from './pages'; import { Navbar } from './components/navbar'; import { Footer } from './components/footer'; import { PriceContextProvider } from './context/PriceContext'; +import { AppContextProvider } from './context/AppContext'; function App() { return ( +
+ StarkStation is Alpha! +
- - - } /> - + + + + } /> + - - } /> - + + } /> + - {/* - } /> - */} -
+ {/* + } /> + */} +
+
diff --git a/src/components/fee/FeeChart.tsx b/src/components/fee/FeeChart.tsx index f36dc91..ebaa75d 100644 --- a/src/components/fee/FeeChart.tsx +++ b/src/components/fee/FeeChart.tsx @@ -1,9 +1,10 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useContext } from 'react'; import dayjs from 'dayjs'; import { SpinnerCircular } from "spinners-react"; import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import Numeral from 'numeral'; +import { AppContext } from '../../context/AppContext'; export default function FeeChart(props: { data:any @@ -18,17 +19,20 @@ export default function FeeChart(props: { if (data) { let uniqueTimeFrames:any = []; const _chartData = data.filter((item:any) => { + const sn_value_exists = Object.keys(item).filter((key) => key.includes('sn_value')).length const isDuplicate = uniqueTimeFrames.includes(item.time); - if (!isDuplicate) { + if (!isDuplicate && sn_value_exists) { uniqueTimeFrames.push(item.time); return true; } return false; }) + + // console.log(_chartData) setChartData(_chartData) } }, [data]) - + // console.log("isLoading",isLoading) const displayUnit = chartDisplay === "avgGasUsed" ? "Gwei" : currency.toUpperCase() return (
@@ -116,11 +120,12 @@ export default function FeeChart(props: { const CustomTooltip = (props:{ active:any, payload:any, label:any, timeFrame:string, displayUnit:string }) => { const {active, payload, label, timeFrame, displayUnit} = props; + const { network } = useContext(AppContext) if (active && payload && payload.length) { const date = toNiceDateYear(label, timeFrame) - const snValue = toNiceValue(payload[0].value, displayUnit) - const ethValue = toNiceValue(payload[1].value, displayUnit) - const l2vsl1 = toK_percent_float(payload[2].value) + const snValue = toNiceValue(payload[0]?.value, displayUnit, network) + const ethValue = toNiceValue(payload[1]?.value, displayUnit, network) + const l2vsl1 = toK_percent_float(payload[2]?.value) return (
{ }; export const toK_percent_float = (num:any) => { - return Numeral(num*100).format('0.[00] a').concat(" %"); + return Numeral(num*100).format('0.[0000] a').concat(" %"); }; -export const toNiceValue = (num:any,unit:string) => { - return (Numeral(num).format('0.[000000]a').concat(" ",unit)); +export const toNiceValue = (num:any,unit:string,network:string) => { + if(network === 'goerli'){ + return (num.toFixed(9).concat(" ",unit)); + } else { + return (Numeral(num).format('0.[000000]a').concat(" ",unit)); + } }; export const toNiceDateYear = (date:any, timeFrame:string) => { diff --git a/src/components/fee/FeePanel.tsx b/src/components/fee/FeePanel.tsx index c6e7803..5e3ac63 100644 --- a/src/components/fee/FeePanel.tsx +++ b/src/components/fee/FeePanel.tsx @@ -5,6 +5,7 @@ import { SpinnerCircular } from "spinners-react"; import { getEthTransferFee } from "../../services/stark"; import FeeChart from './FeeChart'; import { PriceContext } from '../../context/PriceContext'; +import { AppContext } from '../../context/AppContext'; interface IData { time: string; @@ -31,6 +32,7 @@ export default function FeePanel(props: { }) { const {snDetailLoading, snBlockLoading, ethDetailLoading, snDetailData, snBlockData, ethDetailData, timeFrame, setTimeFrame } = props; const { ethPrice } = useContext(PriceContext) + const { network } = useContext(AppContext) const [chartLoading, setChartLoading] = useState(false); const [lastUpdated, setLastUpdated] = useState(0); const [feeEstimate, setFeeEstimate] = useState<{ ethTransferFee:string, erc20TransferFee:string }>({ ethTransferFee:'0.000233541', erc20TransferFee:'0.000233495' }); @@ -55,13 +57,26 @@ export default function FeePanel(props: { }, 1000); const getFeeEstimate = async() =>{ - const x = await getEthTransferFee() - setFeeEstimate(x); + const x = await getEthTransferFee(network) + // console.log(x) + setFeeEstimate(x); } getFeeEstimate(); return () => clearInterval(interval); }, [snBlockData]); + useEffect(() => { + if (feeEstimate) { + setChartLoading(false); + } + }, [feeEstimate]); + + useEffect(() => { + if (ethTransferData_SN.length && usdcTransferData_SN.length) { + setChartLoading(true); + } + }, [network]); + useEffect(() => { if(snDetailData){ const _ethTransferData: IData[] = snDetailData.map((item: any) => ({time:dayjs(item?.timestamp*1000).format('MMM DD, YYYY HH:00'), value:item?.feeEstimate?.ethTransferFee, price:item?.ethPrice})); @@ -90,7 +105,7 @@ export default function FeePanel(props: { useEffect(() => { if(chartDisplay){ - setChartLoading(true); + // setChartLoading(true); switch(chartDisplay) { case "ethTransferFee": let _ethTransferData: IChartData[] = [] @@ -136,11 +151,13 @@ export default function FeePanel(props: { break; case "avgGasUsed": let _avgGasUsed: IChartData[] = [] + // console.log(avgGasUsed_SN) avgGasUsed_ETH.forEach((v,i) => { // let snValue = avgGasUsed_SN.find((val) => val.time === v.time) let snValue = avgGasUsed_SN.find((val) => dayjs(val.time).diff(dayjs(v.time),'hour') >= -2 && dayjs(val.time).diff(dayjs(v.time),'hour') <=2) - _avgGasUsed[i] = {time: timeFrame === '1d' ? dayjs(v.time).format('MMM DD YYYY') : v.time, eth_value:v.value/10**9, sn_value:avgGasUsed_SN[i].value/10**9} + _avgGasUsed[i] = {time: timeFrame === '1d' ? dayjs(v.time).format('MMM DD YYYY') : v.time, eth_value:v.value/10**9} if (snValue){ + // const sn_value = avgGasUsed_SN[i].value/10**9; _avgGasUsed[i].sn_value = snValue.value/10**9; _avgGasUsed[i].percent_change = (snValue.value/10**9)/_avgGasUsed[i].eth_value; } @@ -161,7 +178,7 @@ export default function FeePanel(props: { }); setChartData(__ethTransferData.reverse()); } - setChartLoading(false); + // setChartLoading(false); } }, [chartDisplay,avgGasUsed_ETH, avgGasUsed_SN, isCurrencyEth]); @@ -169,60 +186,60 @@ export default function FeePanel(props: { setTimeFrame(period) } - const ethTranferFeeLatest = isCurrencyEth ? feeEstimate?.ethTransferFee : (Number(feeEstimate?.ethTransferFee) * ethPrice).toFixed(4); - const erc20TransferFeeLatest = isCurrencyEth ? feeEstimate?.erc20TransferFee : (Number(feeEstimate?.erc20TransferFee) * ethPrice).toFixed(4); - const totalTxnFeeLatest = snBlock?isCurrencyEth ? Number(ethers.utils.formatEther(snBlock?.avgTxnFee)).toFixed(9) : (Number(ethers.utils.formatEther(snBlock?.avgTxnFee)) * ethPrice).toFixed(4) : "0.00"; + const ethTranferFeeLatest = isCurrencyEth ? feeEstimate?.ethTransferFee : (Number(feeEstimate?.ethTransferFee) * ethPrice).toFixed(6); + const erc20TransferFeeLatest = isCurrencyEth ? feeEstimate?.erc20TransferFee : (Number(feeEstimate?.erc20TransferFee) * ethPrice).toFixed(6); + const totalTxnFeeLatest = snBlock?isCurrencyEth ? Number(ethers.utils.formatEther(snBlock?.avgTxnFee)).toFixed(9) : (Number(ethers.utils.formatEther(snBlock?.avgTxnFee)) * ethPrice).toFixed(6) : "0.00"; return (

Fee Tracker

save upto 10x on asset transfer fees

-
setChartDisplay('usdcTransferFee')} className={`bg-box rounded-lg p-3 px-5 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "usdcTransferFee" ? "border-4 border-sky-900" : ""}`}> +
setChartDisplay('usdcTransferFee')} className={`bg-box rounded-lg p-3 px-4 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "usdcTransferFee" ? "border-4 border-sky-900" : ""}`}> USDC TRANSFER FEE (ERC20)

- {!snBlockLoading ? + {!snBlockLoading && !chartLoading? <> {erc20TransferFeeLatest} {currency.toUpperCase()} : -
- +
+
}

-
setChartDisplay('ethTransferFee')} className={`bg-box rounded-lg p-3 px-5 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "ethTransferFee" ? "border-4 border-sky-900" : ""}`}> +
setChartDisplay('ethTransferFee')} className={`bg-box rounded-lg p-3 px-4 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "ethTransferFee" ? "border-4 border-sky-900" : ""}`}> ETH TRANSFER FEE

- {!snBlockLoading ? + {!snBlockLoading && !chartLoading? <> {ethTranferFeeLatest} {currency.toUpperCase()} : -
- +
+
}

-
setChartDisplay('avgTxnFee')} className={`bg-box rounded-lg p-3 px-5 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "avgTxnFee" ? "border-4 border-sky-900" : ""}`}> - TOTAL TXN FEE +
setChartDisplay('avgTxnFee')} className={`bg-box rounded-lg p-3 px-4 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "avgTxnFee" ? "border-4 border-sky-900" : ""}`}> + TOTAL BLOCK FEE

{!snBlockLoading ? <> {totalTxnFeeLatest} {currency.toUpperCase()} : -
- +
+
}

-
setChartDisplay('avgGasUsed')} className={`bg-box rounded-lg p-3 px-5 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "avgGasUsed" ? "border-4 border-sky-900" : ""}`}> +
setChartDisplay('avgGasUsed')} className={`bg-box rounded-lg p-3 px-4 2xl:p-5 cursor-pointer hover:bg-box-hover active:bg-box-active ${chartDisplay === "avgGasUsed" ? "border-4 border-sky-900" : ""}`}> TOTAL GAS USED

{!snBlockLoading ? <> {(snBlock.gasUsedPerblock)/10**9} Gwei : -
- +
+
}

@@ -230,16 +247,16 @@ export default function FeePanel(props: {
- {chartDisplay === 'ethTransferFee' &&

AVERAGE ETH TRANSFER FEE ({currency.toUpperCase()})

} - {chartDisplay === 'usdcTransferFee' &&

AVERAGE USDC TRANSFER FEE ({currency.toUpperCase()})

} - {chartDisplay === 'avgTxnFee' &&

AVERAGE TRANSACTION FEE PER BLOCK ({currency.toUpperCase()})

} - {chartDisplay === 'avgGasUsed' &&

AVERAGE GAS USED PER BLOCK (Gwei)

} - + {chartDisplay === 'ethTransferFee' &&

AVERAGE ETH TRANSFER FEE ({currency.toUpperCase()})

} + {chartDisplay === 'usdcTransferFee' &&

AVERAGE USDC TRANSFER FEE ({currency.toUpperCase()})

} + {chartDisplay === 'avgTxnFee' &&

AVERAGE FEE PER BLOCK ({currency.toUpperCase()})

} + {chartDisplay === 'avgGasUsed' &&

AVERAGE GAS USED PER BLOCK (Gwei)

} +
LATEST BLOCK: {snBlock?.block_number}
-
UPDATED: {lastUpdated} SECONDS AGO
-
UPDATED: {lastUpdated}s AGO
+
UPDATED: {lastUpdated} SECONDS AGO
+
UPDATED: {lastUpdated}s AGO
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index a0be6f9..61e71c8 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -41,7 +41,7 @@ export default function Footer() {;

LEGAL

- Disclaimer + *Disclaimer
diff --git a/src/components/latency/LatencyChart.tsx b/src/components/latency/LatencyChart.tsx index f0f31d9..4507619 100644 --- a/src/components/latency/LatencyChart.tsx +++ b/src/components/latency/LatencyChart.tsx @@ -19,8 +19,10 @@ export default function LatencyChart(props: { if (data) { let uniqueData:any = []; const _chartData = data.filter((item:any) => { + const sn_value_exists = Object.keys(item).filter((key) => key.includes('sn_value')).length + const normalDensityZx_exists = Object.keys(item).filter((key) => key.includes('normalDensityZx')).length const isDuplicate = uniqueData.includes(isLatencyChart?item.time:item.value); - if (!isDuplicate) { + if (!isDuplicate && (sn_value_exists || normalDensityZx_exists)) { uniqueData.push(item.time); return true; } diff --git a/src/components/latency/LatencyPanel.tsx b/src/components/latency/LatencyPanel.tsx index dc3dd3c..66dd91d 100644 --- a/src/components/latency/LatencyPanel.tsx +++ b/src/components/latency/LatencyPanel.tsx @@ -1,9 +1,10 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useContext } from 'react'; import dayjs from 'dayjs'; import { SpinnerCircular } from "spinners-react"; -import LatencyChart from './LatencyChart'; import Numeral from 'numeral'; +import LatencyChart from './LatencyChart'; +import { AppContext } from '../../context/AppContext'; interface IData { time: string; @@ -27,6 +28,7 @@ export default function LatencyPanel(props: { setTimeFrame:any }) { const {snDetailLoading, snBlockLoading, ethDetailLoading, snDetailData, snBlockData, ethDetailData, timeFrame, setTimeFrame } = props; + const { network } = useContext(AppContext) const [chartLoading, setChartLoading] = useState(false); const [lastUpdated, setLastUpdated] = useState(0); const [chartData, setChartData] = useState([]); @@ -71,6 +73,8 @@ export default function LatencyPanel(props: { }); const sortedDistribution = distribution_data.sort((a:any,b:any)=> a.value-b.value) setDistributionData(sortedDistribution) + + setChartLoading(false); } }, [avgBlockLatency_SN]); @@ -84,8 +88,13 @@ export default function LatencyPanel(props: { }, [ethDetailData]); useEffect(() => { - if(avgBlockLatency_ETH){ + if (avgBlockLatency_ETH.length && avgBlockLatency_SN.length) { setChartLoading(true); + } + }, [network]); + + useEffect(() => { + if(avgBlockLatency_ETH){ let _avgBlockLatency: IChartData[] = [] avgBlockLatency_ETH.forEach((v,i) => { let snValue = avgBlockLatency_SN.find((val) => dayjs(val.time).diff(dayjs(v.time),'hour') > -2 && dayjs(val.time).diff(dayjs(v.time),'hour') <=2) @@ -96,9 +105,6 @@ export default function LatencyPanel(props: { _avgBlockLatency.push(_entry) }); setChartData(_avgBlockLatency.reverse()); - - - setChartLoading(false); } }, [ avgBlockLatency_ETH, avgBlockLatency_SN ]); @@ -151,19 +157,19 @@ export default function LatencyPanel(props: {

AVERAGE BLOCK LATENCY

- +

DISTRIBUTION

- - VARIANCE: {Numeral(variance).format('0.[0000]a')} + + VARIANCE: {Numeral(variance).format('0.[0000]a')}
LATEST BLOCK: {snBlock?.block_number}
-
UPDATED: {lastUpdated} SECONDS AGO
-
UPDATED: {lastUpdated}s AGO
+
UPDATED: {lastUpdated} SECONDS AGO
+
UPDATED: {lastUpdated}s AGO
TIME FRAME
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 00a0282..9d45530 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -5,11 +5,13 @@ import { FaEthereum } from "react-icons/fa"; import { NavLink } from "react-router-dom"; import { SpinnerCircular } from "spinners-react"; import { PriceContext } from '../../context/PriceContext'; +import { AppContext } from '../../context/AppContext'; import { useEthPriceQuery } from '../../queries/price'; export default function Navbar() { const { data:price, isLoading:isLoading } = useEthPriceQuery() const { setEthPriceChange, setEthPrice } = useContext(PriceContext) + const { network, setNetwork } = useContext(AppContext) const priceChange = price?.price_change ? price?.price_change > 0 ? `(+${price?.price_change.toFixed(1)}%)` : `(${price?.price_change.toFixed(1)}%)` @@ -24,27 +26,64 @@ export default function Navbar() { }, [price]) + const handleNetworkToogle = () => { + if (network === "mainnet") { + setNetwork("goerli") + } else { + setNetwork("mainnet") + } + } + return ( -