Initial deployment graph app

README.md

@@ -27,7 +27,7 @@ The project uses the following technologies:
 ## Roadmap
 
 - New blockchains: Bitcoin, Tron, Polygon, XRP.
-- Improvements to the UI/UX
+- Improvements to the UIUX
 - Improvements to the expansion algorithm heuristic
 
 ## Dataset

package.json

@@ -25,11 +25,9 @@
     "orval": "^6.23.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
     "react-draggable": "^4.4.6",
     "react-query": "^3.39.3",
     "reactflow": "^11.10.1",
-    "tailwind-merge": "^2.2.0",
     "vite-plugin-environment": "^1.1.3",
     "yarn": "^1.22.21"
   },

src/Routes.tsx

@@ -1,16 +1,11 @@
 import { FC, lazy } from "react";
 import { RouteObject, useRoutes } from "react-router-dom";
 
-const Home = lazy(() => import("./components/Home/Home"));
 const GraphTemplate = lazy(() => import("./templates/GraphTemplate"));
 
 const PublicRoutes: RouteObject[] = [
   {
     path: "/",
-    element: <Home />,
-  },
-  {
-    path: "/graph/:addressId",
     element: <GraphTemplate />,
   },
 ];

src/components/Graph/AnalysisWindow/Content/tabs/DirectExposure.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { useContext, FC } from "react";
 
 import ExposureTab from "./ExposureTab";
 

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

@@ -1,6 +1,6 @@
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
-import clsx from "clsx";
 import { FC } from "react";
+import clsx from "clsx";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
 
 /** This interface is a page to display in the breadcrumbs.
  * It can then be clicked to navigate to that page.
@@ -45,10 +45,11 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
 
               <a
                 onClick={page.onClick}
-                className={`font-small text-sm text-gray-400 hover:text-gray-600 ${pages.indexOf(page) === pages.length - 1
+                className={`font-small text-sm text-gray-400 hover:text-gray-600 ${
+                  pages.indexOf(page) === pages.length - 1
                     ? "cursor-default"
                     : "cursor-pointer"
-                  }`}
+                }`}
               >
                 {
                   /* If the page name is bigger than 20 characters and it's sm, slice it in the middle with ... and 10 chars on each side. Else, show full page name */

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

@@ -1,3 +1,4 @@
+import { FC, useContext, useState, useMemo } from "react";
 import { Transition } from "@headlessui/react";
 import { HashtagIcon } from "@heroicons/react/20/solid";
 import { ShareIcon } from "@heroicons/react/24/solid";
@@ -12,7 +13,6 @@ import { GraphContext } from "../../../../Graph";
 import { ExposureTabContext } from "./ExposureTabGeneric";
 
 import Pagination from "../../../../../common/Pagination";
-import { FC, useContext, useMemo, useState } from "react";
 
 // Address Row _________________________________________________________________
 

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

@@ -1,5 +1,5 @@
-import { GlobeAltIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
+import { GlobeAltIcon } from "@heroicons/react/24/outline";
 
 import { getAddressLink } from "../../../../../utils/explorer_links";
 

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

@@ -1,7 +1,7 @@
-import clsx from "clsx";
 import { FC } from "react";
 import { ColorMap, Colors } from "../../../../../utils/colors";
 import LoadingCircle from "../../../../common/LoadingCircle";
+import clsx from "clsx";
 
 interface RiskIndicatorProps {
   isLoading: boolean;

src/components/Graph/Graph.tsx

@@ -1,30 +1,30 @@
 import {
   createContext,
-  FC,
-  useCallback,
   useEffect,
-  useMemo,
   useRef,
-  useState
+  useCallback,
+  useState,
+  useMemo,
+  FC,
 } from "react";
 import ReactFlow, {
-  Background,
-  Controls,
-  Edge,
   Node,
-  Panel,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  Background,
   ReactFlowProvider,
   SelectionMode,
-  useEdgesState,
-  useNodesState,
-  useOnSelectionChange
+  useOnSelectionChange,
+  Panel,
 } from "reactflow";
 import LandingPage from "./LandingPage/LandingPage";
 
 import {
-  AddressNode,
-  AddressNodeState,
   createAddressNode,
+  AddressNodeState,
+  AddressNode,
 } from "./custom_elements/nodes/AddressNode";
 
 import {
@@ -33,21 +33,21 @@ import {
 } from "./custom_elements/edges/TransfershipEdge";
 
 import {
-  calculateAddTransfershipEdges,
-  calculatedNewFocusedAddress,
-  calculateNewAddressPath,
   convertEdgeListToRecord,
   convertNodeListToRecord,
+  calculateNewAddressPath,
+  calculatedNewFocusedAddress,
+  calculateAddTransfershipEdges,
 } from "./graph_calculations";
 
-import { Transition } from "@headlessui/react";
 import "reactflow/dist/style.css";
-import { AddressAnalysis } from "../../api/model";
 import DraggableWindow from "./AnalysisWindow/AnalysisWindow";
 import Legend from "./Legend";
+import { AddressAnalysis } from "../../api/model";
 import TransactionTooltip, {
   TransactionTooltipProps,
 } from "./TransactionTooltip";
+import { Transition } from "@headlessui/react";
 
 /* Pan on drag settings */
 const panOnDrag = [1, 2];

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

@@ -1,15 +1,15 @@
+import { FC, createContext, useContext, useState, useEffect } from "react";
 import clsx from "clsx";
-import { Edge, Handle, Position } from "reactflow";
+import { Position, Handle, Edge } from "reactflow";
 
-import { useAnalysisAddressData } from "../../../../../../api/compliance/compliance";
 import { AddressAnalysis } from "../../../../../../api/model";
+import { useAnalysisAddressData } from "../../../../../../api/compliance/compliance";
 
-import LabelList from "../../../../AnalysisWindow/Header/components/LabelList";
 import RiskIndicator from "../../../../AnalysisWindow/Header/components/RiskIndicator";
+import LabelList from "../../../../AnalysisWindow/Header/components/LabelList";
 
 import { GraphContext } from "../../../../Graph";
 
-import { FC, createContext, useContext, useEffect, useState } from "react";
 import {
   createTransfershipEdge,
   TransfershipEdgeStates,

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

@@ -1,5 +1,5 @@
-import { Node } from "reactflow";
 import AddressNodeState from "./states";
+import { Node } from "reactflow";
 
 export default function createAddressNode(
   address: string,

src/components/Graph/graph_calculations.tsx

@@ -1,8 +1,5 @@
 import { Edge, Node, XYPosition } from "reactflow";
-import {
-  TransfershipEdgeStates,
-  createTransfershipEdge,
-} from "./custom_elements/edges/TransfershipEdge";
+import { TransfershipEdgeStates, createTransfershipEdge } from "./custom_elements/edges/TransfershipEdge";
 import {
   AddressNodeState,
   createAddressNode,