Add images, optimizations (#30)

.env.example

@@ -8,5 +8,6 @@ VITE_FIREBASE_PROJECT_ID=
 VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
 VITE_FIREBASE_APP_ID=
+
 # For Google Analytics
 VITE_FIREBASE_MEASUREMENT_ID=

src/components/Graph/AnalysisWindow/Content/tabs/ExposureTab/ExposureView.tsx

@@ -13,6 +13,7 @@ import { Colors } from "../../../../../../utils/colors";
 import { CategoryClasses } from "../../../../../../utils/categories";
 
 import Badge from "../../../../../common/Badge";
+import EntityLogo from "../../../../../common/EntityLogo";
 
 import { ExposureTabContext } from "./ExposureTabGeneric";
 
@@ -47,36 +48,37 @@ const EntityRow: FC<EntityRowProps> = ({ entity, total, isLast, incoming }) => {
 
   return (
     <div className="flex h-14 w-full flex-row items-center pl-4">
-      {/* Vertical line going downwards */}
+      {/* Vertical & Horizontal lines going downwards */}
       <div
         className={`w-[1px] bg-gray-300 ${isLast ? "mb-7 h-7" : "h-full"}`}
-      ></div>
-
-      {/* Vertical line going sideways */}
-      <div className={`h-[1px] w-5 bg-gray-300`}></div>
+      />
+      <div className={`h-[1px] w-5 bg-gray-300`} />
 
       <div
-        className="w-full cursor-pointer flex-col space-y-1 rounded-md p-2 transition-all duration-100 hover:bg-gray-100"
+        className="flex w-full cursor-pointer flex-row items-center gap-x-1.5 rounded-md p-2 transition-all duration-100 hover:bg-gray-100"
         onClick={() => setFocusedEntity({ entity: entity, incoming: incoming })}
       >
-        <span className="flex items-center space-x-2">
-          <p className="text-sm font-semibold text-gray-800">{entity.name}</p>
-        </span>
-
-        <div className="flex items-center gap-x-2 text-xs text-gray-500">
-          <p>{formatNumber(entity.quantity)}</p>
-          <p>{`(${exposurePercentageString}%)`}</p>
+        <EntityLogo entity={entity.name} className="h-8 w-8 rounded-full" />
+        <span className="flex flex-col gap-y-1">
+          <span className="flex items-center space-x-2">
+            <p className="text-sm font-semibold text-gray-800">{entity.name}</p>
+          </span>
 
-          <svg
-            viewBox="0 0 2 2"
-            className="h-0.5 w-0.5 fill-current align-middle"
-          >
-            <circle cx={1} cy={1} r={1} />
-          </svg>
-          <p>{`${entity.addresses.length} ${
-            entity.addresses.length === 1 ? "Address" : "Addresses"
-          }`}</p>
-        </div>
+          <div className="flex items-center gap-x-2 text-xs text-gray-500">
+            <p>{formatNumber(entity.quantity)}</p>
+            <p>{`(${exposurePercentageString}%)`}</p>
+
+            <svg
+              viewBox="0 0 2 2"
+              className="h-0.5 w-0.5 fill-current align-middle"
+            >
+              <circle cx={1} cy={1} r={1} />
+            </svg>
+            <p>{`${entity.addresses.length} ${
+              entity.addresses.length === 1 ? "Address" : "Addresses"
+            }`}</p>
+          </div>
+        </span>
       </div>
     </div>
   );

src/components/Graph/AnalysisWindow/Header/Header.tsx

@@ -6,6 +6,7 @@ import CopyToClipboardIcon from "./components/CopyToClipboardIcon";
 import BlockExplorerAddressIcon from "./components/BlockExplorerAddressIcon";
 import RiskIndicator from "./components/RiskIndicator";
 import BigButton from "../../../common/BigButton";
+import EntityLogo from "../../../common/EntityLogo";
 
 import { AnalysisContext } from "../AnalysisWindow";
 
@@ -31,8 +32,12 @@ const Header: FC<HeaderProps> = ({ onExit }: HeaderProps) => {
         <div className="flex flex-col gap-y-0.5">
           <span className="flex flex-row items-center gap-x-1 gap-y-1">
             {/* Address Hash - Sliced when in non-expanded mode*/}
-            <h1 className="font-mono font-semibold tracking-tight text-gray-800">
+            <h1 className="flex flex-row font-mono font-semibold tracking-tight text-gray-800">
               {displayedAddress}
+              <EntityLogo
+                entity={analysisData!.labels[0]}
+                className="ml-2 h-7 w-7 rounded-full"
+              />
             </h1>
 
             {/* Clipboard and Block Explorer icons - only shown in expanded mode */}

src/components/Graph/Graph.tsx

@@ -49,7 +49,7 @@ import Legend from "./Legend";
 import TransactionTooltip, {
   TransactionTooltipProps,
 } from "./TransactionTooltip";
-import { default as firebase } from "../../firebase/firebase"
+import { default as firebase } from "../../firebase/firebase";
 import { logEvent } from "firebase/analytics";
 
 /* Pan on drag settings */
@@ -155,16 +155,16 @@ const GraphProvided: FC<GraphProvidedProps> = ({
   initialNodes,
   initialEdges,
 }) => {
-  const updateNodeInternals = useUpdateNodeInternals();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  // Go through each node and update node internals
+  // Regularly update the node internals to make sure edges are consistent
+  const updateNodeInternals = useUpdateNodeInternals();
   useEffect(() => {
     nodes.forEach((node) => {
       updateNodeInternals(node.id);
     });
-  }, [nodes]);
+  }, [nodes.length]);
 
   // Record Optimization -------------------------------------------------------
 
@@ -401,8 +401,6 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     filteredEdges: Edge[],
   ): void {
     const newNodes = calculateLayoutedElements(filteredNodes, filteredEdges);
-
-    console.log("Setting new nodes");
     setNodes(newNodes);
   }
 
@@ -539,10 +537,7 @@ const Graph: FC = () => {
     logEvent(firebase.analytics, "search_address", {
       address: newAddress,
     });
-
-    console.log("Searched address: ", newAddress);
-    console.log(firebase.analytics)
-  }
+  };
 
   return (
     <div className="h-full w-full overflow-hidden">
@@ -554,9 +549,7 @@ const Graph: FC = () => {
         leaveTo="opacity-0 scale-50"
         className="fixed flex h-full w-full flex-col items-center justify-center"
       >
-        <LandingPage
-          setSearchedAddress={onSetSearchedAddress}
-        />
+        <LandingPage setSearchedAddress={onSetSearchedAddress} />
       </Transition>
       <Transition
         show={searchedAddresses.length > 0}

src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.css

@@ -7,6 +7,6 @@
 .animated-dotted-line {
   stroke-dasharray: 15, 15;
   stroke-dashoffset: 30;
-  animation: dash 0.6s linear infinite;
+  /* animation: dash 0.6s linear infinite; */
   stroke-linecap: round; /* Add this line */
 }

src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx

@@ -32,6 +32,7 @@ const CustomEdgePath = ({
   onClick,
 }: CustomEdgePathProps) => {
   const triangleMarkerID: string = `triangle-${id}`;
+
   return (
     <>
       <marker

src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx

@@ -5,6 +5,7 @@ import { Position, Handle, Edge } from "reactflow";
 import { AddressAnalysis } from "../../../../../../api/model";
 import { useAnalysisAddressData } from "../../../../../../api/compliance/compliance";
 
+import EntityLogo from "../../../../../common/EntityLogo";
 import RiskIndicator from "../../../../AnalysisWindow/Header/components/RiskIndicator";
 import LabelList from "../../../../AnalysisWindow/Header/components/LabelList";
 
@@ -166,8 +167,14 @@ const AddressNode: FC<AddressNodeProps> = ({ data: { address } }) => {
 
         {/* Address information */}
         <div className="flex flex-col gap-y-0.5">
-          <h1 className="font-mono font-semibold tracking-tight text-gray-800">
+          <h1 className="flex flex-row font-mono font-semibold tracking-tight text-gray-800">
             {`${address.slice(0, 5)}...${address.slice(-5)}`}
+            {analysisData && analysisData.labels.length > 0 && (
+              <EntityLogo
+                entity={analysisData!.labels[0]}
+                className="ml-2 h-7 w-7 rounded-full"
+              />
+            )}
           </h1>
           {analysisData && <LabelList labels={analysisData!.labels} />}
         </div>

src/components/common/EntityLogo.tsx

@@ -0,0 +1,39 @@
+import { FC, useState } from "react";
+
+function getEntityLogoURL(entity: string): string {
+  return `https://wardicons.blob.core.windows.net/icons/${entity}.png`;
+}
+
+interface EntityLogoProps {
+  entity: string;
+  className?: string;
+}
+
+const EntityLogo: FC<EntityLogoProps> = ({ entity, className }) => {
+  const logoURL = getEntityLogoURL(entity);
+  const [imageError, setImageError] = useState<boolean>(false);
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  const handleImageLoad = () => {
+    setImageError(false);
+  };
+
+  return (
+    <>
+      {imageError ? null : (
+        <img
+          src={logoURL}
+          alt={entity}
+          className={className}
+          onError={handleImageError}
+          onLoad={handleImageLoad}
+        />
+      )}
+    </>
+  );
+};
+
+export default EntityLogo;

vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   publicDir: "./public",
   base: "",
   build: {
+    sourcemap: true, // Enable devtool for debugging
     // Relative to the root
     outDir: "./build",
     assetsInlineLimit: 0,