feat(bos-component): add latest blocks and transactions list

apps/app/src/components/Banners/Banner1.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+const Banner1 = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Adjust the width threshold as needed
+    };
+
+    handleResize(); // Check initial width
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // Code to find the walletId
+      var walletId;
+      var storage = Object.entries(localStorage);
+      var found = storage.find(([key]) => /wallet_auth_key*/.test(key));
+      if (found) {
+        walletId = JSON.parse(found[1]).accountId;
+      }
+
+      // Create and append the script tag based on device type
+      const script = document.createElement('script');
+      if (isMobile) {
+        script.src = `https://api.pr3sence.xyz/request/content?zone_id=20&walletId=${walletId}&type=js&device=mobile`;
+      } else {
+        script.src = `https://api.pr3sence.xyz/request/content?zone_id=21&walletId=${walletId}&type=js&device=desktop`;
+      }
+      document.head.appendChild(script);
+
+      // Clean up the script tag when the component unmounts
+      return () => {
+        document.head.removeChild(script);
+      };
+    }
+    return () => {};
+  }, [isMobile]);
+
+  // Render different content based on device type
+  if (isMobile) {
+    return (
+      <div className="w-full justify-center flex -my-3">
+        <div style={{ minWidth: 300, minHeight: 100 }}>
+          <div id="p-d-hp-300x-100x" />
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="w-full justify-center flex -my-3">
+        <div style={{ minWidth: 970, minHeight: 90 }}>
+          <div id="p-d-ll-970x-90x" />
+        </div>
+      </div>
+    );
+  }
+};
+
+export default Banner1;

apps/app/src/data/bos-components.ts

@@ -3,19 +3,28 @@ import type { NetworkId } from '@/utils/types';
 type NetworkComponents = {
   nodeExplorer: string;
   account: string;
+  transaction: string;
+  blocks: string;
+  latestBlocks: string;
+  latestTransactions: string;
+  transactionOverview: string;
+};
+
+const ComponentUrl = {
+  nodeExplorer: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.NodeExplorer`,
+  account: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Accounts`,
+  transaction: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Transactions.List`,
+  blocks: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Blocks.List`,
+  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`,
 };
 
 export const componentsByNetworkId: Record<
   NetworkId,
   NetworkComponents | undefined
 > = {
-  testnet: {
-    nodeExplorer: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.NearBlocks.NodeExplorer`,
-    account: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.NearBlocks.Accounts`,
-  },
+  testnet: ComponentUrl,
 
-  mainnet: {
-    nodeExplorer: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.NearBlocks.NodeExplorer`,
-    account: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.NearBlocks.Accounts`,
-  },
+  mainnet: ComponentUrl,
 };

apps/app/src/pages/blocks/index.tsx

@@ -0,0 +1,10 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const Blocks = () => {
+  const components = useBosComponents();
+
+  return <VmComponent src={components?.blocks} />;
+};
+
+export default Blocks;

apps/app/src/pages/index.tsx

@@ -4,7 +4,34 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 const HomePage = () => {
   const components = useBosComponents();
 
-  return <VmComponent src={components?.nodeExplorer} />;
+  return (
+    <>
+      <VmComponent src={components?.transactionOverview} />
+      <div className="py-8 relative"></div>
+      <section>
+        <div className="container mx-auto px-3  z-10">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="w-full">
+              <div className="bg-white soft-shadow rounded-lg overflow-hidden mb-6 md:mb-10">
+                <h2 className="border-b p-3 text-gray-500 text-sm font-semibold">
+                  Latest Blocks
+                </h2>
+                <VmComponent src={components?.latestBlocks} />
+              </div>
+            </div>
+            <div className="w-full">
+              <div className="bg-white soft-shadow rounded-lg overflow-hidden mb-6 md:mb-10">
+                <h2 className="border-b p-3 text-gray-500 text-sm font-semibold">
+                  Latest Transactions
+                </h2>
+                <VmComponent src={components?.latestTransactions} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
 };
 
 export default HomePage;

apps/app/src/pages/txns/index.tsx

@@ -0,0 +1,10 @@
+import { VmComponent } from '@/components/vm/VmComponent';
+import { useBosComponents } from '@/hooks/useBosComponents';
+
+const TransactionList = () => {
+  const components = useBosComponents();
+
+  return <VmComponent src={components?.transaction} />;
+};
+
+export default TransactionList;

apps/backend/src/config.ts

@@ -11,15 +11,16 @@ const env = cleanEnv(process.env, {
   DATABASE_KEY: str({ default: '' }),
   DATABASE_URL: str(),
   LIVECOINWATCH_API_KEY: str(),
-  NETWORK: str(),
+  NETWORK: str({
+    choices: [Network.MAINNET, Network.TESTNET],
+  }),
   RPC_URL: str(),
   SENTRY_DSN: str({ default: '' }),
 });
 
-const network: Network =
-  process.env.NETWORK === Network.TESTNET ? Network.TESTNET : Network.MAINNET;
-const genesisHeight = network === Network.MAINNET ? 9820210 : 42376888;
-const genesisDate = network === Network.MAINNET ? '2020-07-21' : '2021-04-01';
+const genesisHeight = env.NETWORK === Network.MAINNET ? 9820210 : 42376888;
+const genesisDate =
+  env.NETWORK === Network.MAINNET ? '2020-07-21' : '2021-04-01';
 const sentryDsn = process.env.SENTRY_DSN;
 
 const config: Config = {
@@ -32,7 +33,7 @@ const config: Config = {
   genesisDate,
   genesisHeight,
   lcwApiKey: env.LIVECOINWATCH_API_KEY,
-  network,
+  network: env.NETWORK,
   rpcUrl: env.RPC_URL,
   sentryDsn,
 };

apps/bos-components/build.js

@@ -1,25 +1,9 @@
 import fs from 'fs';
 import replaceInFiles from 'replace-in-files';
-import postcss from 'postcss';
-import postcssPurgecss from '@fullhuman/postcss-purgecss';
-import cssnano from 'cssnano';
-import tailwindcss from 'tailwindcss';
 
 const transpiledPathPrefix = '.bos/transpiled/src/bos-components';
-const css = fs.readFileSync('./src/public/styles.css', 'utf8');
-const outputFilePathApp = '../app/public/common.css';
 
 async function build() {
-  // Process the CSS
-  let stylesByFile = {};
-
-  const postcssPlugins = [
-    tailwindcss(),
-    postcssPurgecss({
-      content: ['src/**/*.tsx'], // Files to search for used classes
-    }),
-    cssnano(),
-  ];
   const processComponentImports = (filePath, processedFiles = new Set()) => {
     if (processedFiles.has(filePath)) {
       // Prevent infinite recursion due to cyclic dependencies or repetitive file reads
@@ -57,14 +41,6 @@ async function build() {
     }
   };
 
-  await postcss(postcssPlugins)
-    .process(css, { from: 'style.css' })
-    .then((result) => {
-      stylesByFile = result.css;
-      fs.writeFileSync(outputFilePathApp, stylesByFile);
-    })
-    .catch(() => {});
-
   await replaceInFiles({
     files: [`${transpiledPathPrefix}/**/*.jsx`],
     from: /export\s+default\s+function[^(]*\((.*)/gms,

apps/bos-components/global.d.ts

@@ -1,5 +1,5 @@
 declare const Widget: (params: {
-  src: string;
+  src?: string;
   props?: object;
 }) => React.ReactNode;
 
@@ -20,3 +20,4 @@ declare const Dialog;
 declare const Select;
 declare const ScrollArea;
 declare const Buffer;
+declare const useMemo;

apps/bos-components/package.json

@@ -5,9 +5,10 @@
   "license": "Business Source License 1.1",
   "type": "module",
   "scripts": {
+    "build:css": "postcss src/public/styles.css -o ../app/public/common.css",
     "start:testnet": "BOS_URL=https://test.near.org/$ACCOUNT/widget/bos-components.components.ExplorerSelector && open $BOS_URL && echo \"Preview at: $BOS_URL\"",
-    "dev": "yarn start:testnet && bos-loader $ACCOUNT --path .bos/transpiled/src",
-    "build": "rimraf .bos/transpiled && mkdir -p .bos/transpiled/src && sucrase ./src -d .bos/transpiled/src/bos-components --transforms typescript,jsx --jsx-runtime preserve --disable-es-transforms --out-extension jsx && node ./build.js",
+    "dev": "yarn build:css & yarn start:testnet && bos-loader $ACCOUNT --path .bos/transpiled/src",
+    "build": "yarn build:css & rimraf .bos/transpiled && mkdir -p .bos/transpiled/src && sucrase ./src -d .bos/transpiled/src/bos-components --transforms typescript,jsx --jsx-runtime preserve --disable-es-transforms --out-extension jsx && node ./build.js",
     "lint": "tsc --noEmit && eslint ./ --fix",
     "lint:check": "tsc --noEmit && eslint ./"
   },
@@ -16,20 +17,22 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@csstools/postcss-extract": "^3.0.0",
-    "@fullhuman/postcss-purgecss": "^5.0.0",
     "@types/react": "^18.2.27",
     "autoprefixer": "^10.4.16",
     "eslint-config-custom-nextjs": "*",
-    "cssnano": "^6.0.1",
+    "nb-tsconfig": "*",
     "near-social-vm-types": "^1.0.0",
     "path": "^0.12.7",
     "postcss": "^8.4.31",
-    "purgecss": "^5.0.0",
     "replace-in-files": "^3.0.0",
     "rimraf": "^5.0.5",
     "sucrase": "^3.34.0",
-    "nb-tsconfig": "*",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "cross-env": "^7.0.3",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.1",
+    "postcss-preset-env": "^9.3.0"
   }
 }

apps/bos-components/src/components/NearBlocks/Accounts.tsx → apps/bos-components/src/components/Accounts.tsx

@@ -1,15 +1,16 @@
 /**
- * Component : Accounts
- * License : Business Source License 1.1
+ * Component: Accounts
+ * Author: Nearblocks Pte Ltd
+ * License: Business Source License 1.1
  * Description: Accounts component enable users to view information related to their accounts.
  * @interface Props
  * @param {string} [id] - The account identifier passed as a string.
- * @param {boolean} [useStyles] - Flag indicating whether to apply default gateway styles; when set to `true`, the component uses default styles, otherwise, it allows for custom styling.
+ * @param {boolean} [fetchStyles] - Use Nearblock styles.
  */
 
 interface Props {
   id?: string;
-  useStyles?: boolean;
+  fetchStyles?: boolean;
 }
 
 import Skelton from '@/includes/Common/Skelton';
@@ -66,7 +67,7 @@ export default function (props: Props) {
   /**
    * Fetches styles asynchronously from a nearblocks gateway.
    */
-  function fetchStyle() {
+  function fetchStyles() {
     asyncFetch('https://beta.nearblocks.io/common.css').then(
       (res: { body: string }) => {
         if (res?.body) {
@@ -337,8 +338,8 @@ export default function (props: Props) {
   }, [inventoryData?.fts, props.id, config?.rpcUrl]);
 
   useEffect(() => {
-    if (props?.useStyles) fetchStyle();
-  }, [props?.useStyles]);
+    if (props?.fetchStyles) fetchStyles();
+  }, [props?.fetchStyles]);
 
   const Theme = styled.div`
     ${css}