Merge pull request #173 from migalabs/fix-minor-changes

Fix Server Side Properties

docker-compose.yaml

@@ -1,26 +1,28 @@
 version: '3.7'
 
 services:
-          ethseer-client:
-                image: ethseer-client-image:1.0.0
-                build:
-                        context: ./
-                        dockerfile: Dockerfile-client
-                container_name: ethseer-client-container
-                init: true
-                network_mode: 'host'
-                restart: unless-stopped
-                volumes:
-                        - ${MYFOLDER}/packages/client/.env:/app/.env
+    ethseer-client:
+        image: ethseer-client-image:1.0.0
+        build:
+            context: ./
+            dockerfile: Dockerfile-client
+        container_name: ethseer-client-container
+        init: true
+        restart: unless-stopped
+        volumes:
+            - ${MYFOLDER}/packages/client/.env:/app/.env
+        ports:
+            - "127.0.0.1:3000:3000"
 
-          ethseer-server:
-                image: ethseer-server-image:1.0.0
-                build:
-                        context: ./
-                        dockerfile: Dockerfile-server
-                container_name: ethseer-server-container
-                init: true
-                network_mode: 'host'
-                restart: unless-stopped
-                volumes:
-                        - ${MYFOLDER}/packages/server/.env:/app/.env
+    ethseer-server:
+        image: ethseer-server-image:1.0.0
+        build:
+            context: ./
+            dockerfile: Dockerfile-server
+        container_name: ethseer-server-container
+        init: true
+        restart: unless-stopped
+        volumes:
+            - ${MYFOLDER}/packages/server/.env:/app/.env
+        ports:
+            - "127.0.0.1:3020:3020"

packages/client/components/ui/LinkTransaction.tsx

@@ -3,7 +3,9 @@ import React from 'react';
 // Components
 import LinkIcon from './LinkIcon';
 import NetworkLink from './NetworkLink';
-import AddressCopy from './AddressCopy';
+
+// Helpers
+import { getShortAddress } from '../../helpers/addressHelper';
 
 // Props
 type Props = {
@@ -17,13 +19,13 @@ const LinkTransaction = ({ hash, children, mxAuto }: Props) => {
         <NetworkLink
             href={`/transaction/${hash}`}
             passHref
-            className={`flex gap-x-1 items-center text-[14px] md:text-[16px] font-medium md:hover:underline underline-offset-4 decoration-2 w-fit text-[var(--darkPurple)] dark:text-[var(--purple)] ${
+            className={`flex gap-x-1 items-center text-[14px] md:text-[16px] font-medium md:hover:underline underline-offset-4 decoration-2 w-fit text-[var(--darkPurple)] dark:text-[var(--purple)] uppercase ${
                 mxAuto ? 'mx-auto' : ''
             }`}
         >
             {children ?? (
                 <>
-                    <AddressCopy address={hash ?? ''} />
+                    <span>{getShortAddress(hash ?? '')}</span>
                     <LinkIcon />
                 </>
             )}

packages/client/components/ui/ShareMenu.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
-import { useRouter } from 'next/router';
 
 // Components
 import TooltipContainer from './TooltipContainer';
@@ -33,14 +32,11 @@ type Props = {
 };
 
 const ShareMenu = ({ type }: Props) => {
-    // Router
-    const router = useRouter();
-
     // States
     const [copied, setCopied] = useState(false);
 
     const getShareUrl = (shareLink: string) => {
-        const encodedUrl = `${process.env.NEXT_PUBLIC_URL_API}${router.asPath}`;
+        const encodedUrl = window.location.href;
         const encodedTitle = `Check out this ${type} on Ethseer!`;
 
         const url = shareLink.replace('${encodedUrl}', encodedUrl).replace('${encodedTitle}', encodedTitle);
@@ -49,7 +45,7 @@ const ShareMenu = ({ type }: Props) => {
     };
 
     const handleCopyClick = async () => {
-        const encodedUrl = `${process.env.NEXT_PUBLIC_URL_API}${router.asPath}`;
+        const encodedUrl = window.location.href;
 
         await navigator.clipboard.writeText(encodedUrl);
         setCopied(true);

packages/client/components/ui/Table.tsx

@@ -104,7 +104,7 @@ export const LargeTable = ({
         >
             <div
                 ref={containerRef}
-                className='flex flex-col overflow-x-scroll overflow-y-hidden scrollbar-thin'
+                className='flex flex-col overflow-x-scroll overflow-y-hidden scrollbar-none'
                 onMouseMove={handleMouseMove}
             >
                 <div

packages/client/pages/block/[id].tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useContext } from 'react';
-import { useRouter } from 'next/router';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 
 // Axios
@@ -23,16 +23,32 @@ import ShareMenu from '../../components/ui/ShareMenu';
 // Types
 import { BlockEL, Transaction } from '../../types';
 
-const BlockPage = () => {
-    // Next router
-    const router = useRouter();
-    const { network, id } = router.query;
+// Props
+interface Props {
+    id: number;
+    network: string;
+}
 
+// Server Side Props
+export const getServerSideProps: GetServerSideProps = async context => {
+    const id = context.params?.id;
+    const network = context.query?.network;
+
+    if (isNaN(Number(id)) || !network) {
+        return {
+            notFound: true,
+        };
+    }
+
+    return { props: { id: Number(id), network } };
+};
+
+const BlockPage = ({ id, network }: Props) => {
     // Theme Mode Context
     const { themeMode } = useContext(ThemeModeContext) ?? {};
 
     // Refs
-    const blockRef = useRef(0);
+    const idRef = useRef(0);
 
     // States
     const [block, setBlock] = useState<BlockEL | null>(null);
@@ -44,17 +60,14 @@ const BlockPage = () => {
 
     // UseEffect
     useEffect(() => {
-        if (id) {
-            blockRef.current = Number(id);
-        }
-
-        if (network && ((id && !block) || (block && block.f_el_block_number !== Number(id)))) {
+        if (!block || idRef.current !== id) {
+            idRef.current = id;
             getBlock();
             getTransactions();
         }
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [network, id]);
+    }, [id]);
 
     // Get blocks
     const getBlock = async () => {
@@ -78,7 +91,7 @@ const BlockPage = () => {
 
             if (blockResponse.data.block) {
                 setInfoBoxText('');
-            } else if (Number(id) < latestBlockResponse.data.block.f_el_block_number) {
+            } else if (id < latestBlockResponse.data.block.f_el_block_number) {
                 setInfoBoxText('Block not saved yet');
             } else {
                 setInfoBoxText("We're not there yet");
@@ -180,16 +193,14 @@ const BlockPage = () => {
     //OVERVIEW BLOCK PAGE
     return (
         <Layout
-            title={`Block ${id ?? ''} Analysis - Ethereum Blockchain | EthSeer.io`}
-            description={`Detailed insights into Block ${
-                id ?? ''
-            } on the Ethereum blockchain, including transactions, gas used, and proposer. Understand block dynamics with EthSeer.io.`}
+            title={`Block ${id} Analysis - Ethereum Blockchain | EthSeer.io`}
+            description={`Detailed insights into Block ${id} on the Ethereum blockchain, including transactions, gas used, and proposer. Understand block dynamics with EthSeer.io.`}
         >
             <Head>
                 <meta name='robots' property='noindex' />
             </Head>
 
-            <TitleWithArrows type='block' value={Number(id)} />
+            <TitleWithArrows type='block' value={id} />
 
             {loadingBlock && (
                 <div className='mt-6'>

packages/client/pages/entity/[name].tsx

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import { GetServerSideProps } from 'next';
 
 // Axios
 import axiosClient from '../../config/axios';
@@ -20,14 +20,33 @@ import ShareMenu from '../../components/ui/ShareMenu';
 // Types
 import { Entity } from '../../types';
 
-const EntityComponent = () => {
-    // Next router
-    const router = useRouter();
-    const { network, name } = router.query;
+// Props
+interface Props {
+    name: string;
+    network: string;
+}
 
+// Server Side Props
+export const getServerSideProps: GetServerSideProps = async context => {
+    const name = context.params?.name;
+    const network = context.query?.network;
+
+    if (!name || !network) {
+        return {
+            notFound: true,
+        };
+    }
+
+    return { props: { name, network } };
+};
+
+const EntityComponent = ({ name, network }: Props) => {
     // Theme Mode Context
     const { themeMode } = useContext(ThemeModeContext) ?? {};
 
+    // Refs
+    const entityRef = useRef('');
+
     // States
     const [entityHour, setEntityHour] = useState<Entity | null>(null);
     const [entityDay, setEntityDay] = useState<Entity | null>(null);
@@ -38,7 +57,8 @@ const EntityComponent = () => {
 
     // UseEffect
     useEffect(() => {
-        if (name && !entityHour && !entityDay && !entityWeek) {
+        if ((!entityHour && !entityDay && !entityWeek) || entityRef.current !== name) {
+            entityRef.current = name;
             getEntity();
         }
 
@@ -55,19 +75,19 @@ const EntityComponent = () => {
             const week = 1575;
 
             const [responseHour, responseDay, responseWeek] = await Promise.all([
-                axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`, {
+                axiosClient.get(`/api/entities/${name.toLowerCase()}`, {
                     params: {
                         network,
                         numberEpochs: hour,
                     },
                 }),
-                axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`, {
+                axiosClient.get(`/api/entities/${name.toLowerCase()}`, {
                     params: {
                         network,
                         numberEpochs: day,
                     },
                 }),
-                axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`, {
+                axiosClient.get(`/api/entities/${name.toLowerCase()}`, {
                     params: {
                         network,
                         numberEpochs: week,
@@ -79,8 +99,6 @@ const EntityComponent = () => {
             setEntityDay(responseDay.data.entity);
             setEntityWeek(responseWeek.data.entity);
 
-            // const response = await axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`);
-
             if (responseHour.data.entity.aggregate_balance !== null) {
                 setShowInfoBox(false);
             } else {
@@ -223,10 +241,8 @@ const EntityComponent = () => {
     //OVERVIEW PAGE
     return (
         <Layout
-            title={`Entity Profile: ${name ?? ''} - Ethereum Staking | EthSeer.io`}
-            description={`Explore the staking profile of ${
-                name ?? ''
-            } on the Ethereum blockchain. View validator performance, total stakes, and more. Uncover staking insights with EthSeer.io.`}
+            title={`Entity Profile: ${name} - Ethereum Staking | EthSeer.io`}
+            description={`Explore the staking profile of ${name} on the Ethereum blockchain. View validator performance, total stakes, and more. Uncover staking insights with EthSeer.io.`}
         >
             <Title className='uppercase'>{name}</Title>