fix(bos-component): set refresh interval on latest blocks and transac…

…tions
Nearblocks · Dec 7, 2023 · bc41568 · bc41568
1 parent 683ff05
commit bc41568
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 26 deletions.
diff --git a/apps/app/src/data/bos-components.ts b/apps/app/src/data/bos-components.ts
@@ -8,6 +8,7 @@ type NetworkComponents = {
   latestBlocks: string;
   latestTransactions: string;
   transactionOverview: string;
+  sponsoredText: string;
 };
 
 const ComponentUrl = {
@@ -18,6 +19,7 @@ const ComponentUrl = {
   latestBlocks: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Blocks.Latest`,
   latestTransactions: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Transactions.Latest`,
   transactionOverview: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Transactions.Overview`,
+  sponsoredText: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Shared.SponsoredText`,
 };
 
 export const componentsByNetworkId: Record<

diff --git a/apps/app/src/pages/index.tsx b/apps/app/src/pages/index.tsx
@@ -6,6 +6,24 @@ const HomePage = () => {
 
   return (
     <>
+      <div className="flex items-center justify-center bg-hero-pattern">
+        <div className="container mx-auto px-3 pt-14 pb-8 mb-10 ">
+          <div className="flex flex-col lg:flex-row pb-5">
+            <div className="lg:w-3/5 w-full flex-col">
+              <h1 className="text-white text-2xl pb-3 flex flex-col">
+                Near Protocol Explorer
+              </h1>
+              <div className="flex flex-grow"></div>
+              <div className="text-white">
+                <VmComponent
+                  src={components?.sponsoredText}
+                  props={{ textColor: true }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <VmComponent src={components?.transactionOverview} />
       <div className="py-8 relative"></div>
       <section>

diff --git a/apps/bos-components/src/components/Blocks/Latest.tsx b/apps/bos-components/src/components/Blocks/Latest.tsx
@@ -44,6 +44,11 @@ export default function () {
     }
 
     fetchLatestBlocks();
+    const interval = setInterval(() => {
+      fetchLatestBlocks();
+    }, 5000);
+
+    return () => clearInterval(interval);
   }, [config.backendUrl]);
 
   return (

diff --git a/apps/bos-components/src/components/Transactions/Latest.tsx b/apps/bos-components/src/components/Transactions/Latest.tsx
@@ -31,10 +31,7 @@ export default function () {
   useEffect(() => {
     function fetchLatestTxns() {
       setIsLoading(true);
-      asyncFetch(`${config.backendUrl}txns/latest`, {
-        refreshInterval: 5000,
-        revalidateOnReconnect: true,
-      }).then(
+      asyncFetch(`${config.backendUrl}txns/latest`).then(
         (data: {
           body: {
             txns: TransactionInfo[];
@@ -47,6 +44,11 @@ export default function () {
       setIsLoading(false);
     }
     fetchLatestTxns();
+    const interval = setInterval(() => {
+      fetchLatestTxns();
+    }, 5000);
+
+    return () => clearInterval(interval);
   }, [config.backendUrl]);
 
   return (

diff --git a/apps/bos-components/src/components/Transactions/Overview.tsx b/apps/bos-components/src/components/Transactions/Overview.tsx
@@ -245,28 +245,6 @@ export default function (props: Props) {
 
   return (
     <Theme>
-      <div className="flex items-center justify-center bg-hero-pattern">
-        <div className="container mx-auto px-3 pt-14 pb-8 mb-10 ">
-          <div className="flex flex-col lg:flex-row pb-5">
-            <div className="lg:w-3/5 w-full flex-col">
-              <h1 className="text-white text-2xl pb-3 flex flex-col">
-                Near Protocol Explorer
-              </h1>
-              <div className="flex flex-grow"></div>
-              <div className="text-white">
-                {
-                  <Widget
-                    src={`${config.ownerId}/widget/bos-components.components.Shared.SponsoredText`}
-                    props={{
-                      textColor: true,
-                    }}
-                  />
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div className="relative -mt-14">
         <div className="container mx-auto px-3">
           <div className="bg-white soft-shadow rounded-lg overflow-hidden px-5 md:py lg:px-0">

diff --git a/apps/bos-components/src/includes/types.ts b/apps/bos-components/src/includes/types.ts
@@ -134,6 +134,7 @@ export type StatusInfo = {
   total_txns: number;
   volume: number;
 };
+
 export type ChartSeriesInfo = {
   type: string;
   data: number[];
@@ -220,3 +221,40 @@ export type TransactionInfo = {
   signer_account_id: string;
   transaction_hash: string;
 };
+
+export type ChartStat = {
+  date: string;
+  near_price: string;
+  market_cap: string;
+  total_supply: string;
+  blocks: string;
+  gas_fee: string;
+  gas_used: string;
+  avg_gas_price: string;
+  avg_gas_limit: string;
+  txns: string;
+  txn_volume: string;
+  txn_volume_usd: string;
+  txn_fee: string;
+  txn_fee_usd: string;
+  total_addresses: string;
+  addresses: string;
+};
+
+export type ChartTypeInfo = {
+  title: string;
+  description: string;
+};
+
+export type ChartConfig = {
+  chart: {
+    height: number;
+    zoomType: string;
+  };
+  title: {
+    text: string;
+  };
+  subtitle: {
+    text: string;
+  };
+};