Merge pull request #56 from Nearblocks/feat/home

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

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

@@ -3,19 +3,30 @@ import type { NetworkId } from '@/utils/types';
 type NetworkComponents = {
   nodeExplorer: string;
   account: string;
+  transaction: string;
+  blocks: string;
+  latestBlocks: string;
+  latestTransactions: string;
+  transactionOverview: string;
+  sponsoredText: 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`,
+  sponsoredText: `${process.env.NEXT_PUBLIC_ACCOUNT_ID}/widget/bos-components.components.Shared.SponsoredText`,
 };
 
 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,52 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 const HomePage = () => {
   const components = useBosComponents();
 
-  return <VmComponent src={components?.nodeExplorer} />;
+  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>
+        <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/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}