Merge pull request #6 from dalindev/feat/improve-bundle-size-and-redu…

…ce-image-sizes

feat/improve bundle size and reduce image sizes

components/confirmation-history-table.tsx

@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/button';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { NANO_LIVE_ENV } from '@/constants/nano-live-env';
 import { getRepName } from '@/lib/get-rep-name';
+import { truncateAddress } from '@/lib/truncate-address';
 
 export const ConfirmationHistoryTable = () => {
   const { confirmationHistory } = useConfirmations();
@@ -26,10 +27,6 @@ export const ConfirmationHistoryTable = () => {
     return new Date(parseInt(timestamp)).toLocaleTimeString();
   };
 
-  const truncateAddress = (address: string) => {
-    return `${address.slice(0, 10)}...${address.slice(-5)}`;
-  };
-
   const getDisplayedHistory = () => {
     if (isCollapsed) {
       return confirmationHistory.slice(0, collapsedItemCount);
@@ -40,12 +37,6 @@ export const ConfirmationHistoryTable = () => {
     );
   };
 
-  const confirmationTimeStyle = (confirmationTime: number) => {
-    if (confirmationTime < 500) return 'text-green-500';
-    if (confirmationTime < 1000) return 'text-yellow-500';
-    return 'text-red-500';
-  };
-
   return (
     <div className="space-y-4 md:px-0 w-full md:w-fit">
       <div className="flex justify-end min-w-full items-center">
@@ -91,10 +82,12 @@ export const ConfirmationHistoryTable = () => {
             {getDisplayedHistory().map((confirmation, index) => {
               const amount = parseNanoAmount(confirmation.message.amount);
               const style = getStyleByNanoAmount(amount);
-              const confirmationTimeClasses = confirmationTimeStyle(500);
               const isDonation =
                 confirmation.message.block.link_as_account ===
                 NANO_LIVE_ENV.donationAccount;
+              const repName = getRepName(
+                confirmation.message.block.representative
+              );
               return (
                 <tr
                   key={confirmation.message.hash}
@@ -128,8 +121,15 @@ export const ConfirmationHistoryTable = () => {
                     <span style={{ color: style.hexColor }}>Ӿ {amount}</span>
                   </td>
                   <td className="p-1 md:p-2  hidden md:table-cell">
-                    <span className={`${confirmationTimeClasses}`}>
-                      {getRepName(confirmation.message.block.representative)}
+                    <span
+                      className={`${
+                        repName ? 'text-[#ffa31a]' : 'text-gray-400'
+                      }`}
+                    >
+                      {repName ??
+                        truncateAddress(
+                          confirmation.message.block.representative
+                        )}
                     </span>
                   </td>
                   <td className="p-1 md:p-2 hidden md:table-cell">

components/loading.tsx

@@ -10,6 +10,7 @@ const GifLoader = () => {
         width={800}
         height={262}
         className="w-1/2 h-auto"
+        unoptimized
       />
       <div className="text-[30px] w-full text-center m-10">
         Loading... Ӿ ...

components/three-cloud-mesh.tsx

@@ -6,7 +6,10 @@ import { TextureLoader } from 'three/src/loaders/TextureLoader';
 import { Mesh } from 'three';
 
 export const CloudMesh = () => {
-  const cloudMap = useLoader(TextureLoader, '/earth-assets/fair_clouds_4k.png');
+  const cloudMap = useLoader(
+    TextureLoader,
+    '/earth-assets-mini/fair_clouds_4k.png'
+  );
   const meshRef = useRef<Mesh>(null); // Create a reference to the mesh
 
   useFrame(() => {

components/three-mesh.tsx

@@ -57,10 +57,10 @@ const ThreeMesh: React.FC<ThreeMeshProps> = ({
   const sunRef = useRef<THREE.Mesh>(null);
 
   const props = useTexture({
-    map: '/earth-assets/earth_no_clouds_8k.jpg',
-    bumpMap: '/earth-assets/earth_elev_bump_8k.jpg',
-    specularMap: '/earth-assets/earth_water_8k.png',
-    emissiveMap: '/earth-assets/earth_night_8k.jpg'
+    map: '/earth-assets-mini/earth_no_clouds_8k.jpg',
+    bumpMap: '/earth-assets-mini/earth_elev_bump_8k.jpg',
+    specularMap: '/earth-assets-mini/earth_water_8k.png',
+    emissiveMap: '/earth-assets-mini/earth_night_8k.jpg'
   });
 
   const sunMaterial = useMemo(

lib/get-rep-name.ts

@@ -1,6 +1,6 @@
 import { RepsData } from '@/data/defualtMergedRepsData';
 
-export const getRepName = (account: string): string => {
+export const getRepName = (account: string) => {
   const rep = RepsData.find((rep) => rep.account === account);
-  return rep ? rep.account_formatted : 'Rep name unknown';
+  return rep ? rep.account_formatted : null;
 };

lib/get-style-by-nano-amount.ts

@@ -51,6 +51,7 @@ export const getStyleByNanoAmount = (amount: number) => {
   if (amount >= 10)
     return {
       color: 0x209ce9,
+      lineWidth: 2,
       hexColor: '#209ce9'
     };
   if (amount >= 1)

lib/truncate-address.ts

@@ -0,0 +1,3 @@
+export const truncateAddress = (address: string) => {
+  return `${address.slice(0, 10)}...${address.slice(-5)}`;
+};

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "license": "MIT",
+  "sideEffects": false,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -16,20 +17,17 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@react-three/drei": "^9.80.2",
-    "@react-three/fiber": "^8.13.6",
+    "@react-three/drei": "^9.109.2",
+    "@react-three/fiber": "^8.16.8",
     "@tremor/react": "^3.2.6",
     "@vercel/analytics": "^1.0.1",
     "autoprefixer": "^10.4.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "d3-geo": "^3.1.0",
     "js-cookie": "^3.0.5",
-    "kysely": "^0.25.0",
-    "kysely-planetscale": "^1.3.0",
     "lucide-react": "^0.414.0",
     "next": "14.2.5",
-    "next-auth": "^4.22.1",
     "prop-types": "^15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",