From 38d169a01981e017dafadf78fe77d18f504f187a Mon Sep 17 00:00:00 2001 From: Pedro Ribeiro <47680931+tubarao312@users.noreply.github.com> Date: Tue, 16 Jan 2024 12:56:31 +0000 Subject: [PATCH] Add images, optimizations (#30) --- .env.example | 1 + .../Content/tabs/ExposureTab/ExposureView.tsx | 48 ++++++++++--------- .../Graph/AnalysisWindow/Header/Header.tsx | 7 ++- src/components/Graph/Graph.tsx | 19 +++----- .../edges/TransfershipEdge/CustomEdgePath.css | 2 +- .../edges/TransfershipEdge/CustomEdgePath.tsx | 1 + .../AddressNode/AddressNode/AddressNode.tsx | 9 +++- src/components/common/EntityLogo.tsx | 39 +++++++++++++++ vite.config.ts | 1 + 9 files changed, 88 insertions(+), 39 deletions(-) create mode 100644 src/components/common/EntityLogo.tsx diff --git a/.env.example b/.env.example index 73a5365d..048ab38a 100644 --- a/.env.example +++ b/.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= \ No newline at end of file diff --git a/src/components/Graph/AnalysisWindow/Content/tabs/ExposureTab/ExposureView.tsx b/src/components/Graph/AnalysisWindow/Content/tabs/ExposureTab/ExposureView.tsx index d222a2f8..bc67c2d6 100644 --- a/src/components/Graph/AnalysisWindow/Content/tabs/ExposureTab/ExposureView.tsx +++ b/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 = ({ entity, total, isLast, incoming }) => { return (
- {/* Vertical line going downwards */} + {/* Vertical & Horizontal lines going downwards */}
- - {/* Vertical line going sideways */} -
+ /> +
setFocusedEntity({ entity: entity, incoming: incoming })} > - -

{entity.name}

- - -
-

{formatNumber(entity.quantity)}

-

{`(${exposurePercentageString}%)`}

+ + + +

{entity.name}

+ - - - -

{`${entity.addresses.length} ${ - entity.addresses.length === 1 ? "Address" : "Addresses" - }`}

-
+
+

{formatNumber(entity.quantity)}

+

{`(${exposurePercentageString}%)`}

+ + + + +

{`${entity.addresses.length} ${ + entity.addresses.length === 1 ? "Address" : "Addresses" + }`}

+
+
); diff --git a/src/components/Graph/AnalysisWindow/Header/Header.tsx b/src/components/Graph/AnalysisWindow/Header/Header.tsx index 4eefca75..2276a108 100644 --- a/src/components/Graph/AnalysisWindow/Header/Header.tsx +++ b/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 = ({ onExit }: HeaderProps) => {
{/* Address Hash - Sliced when in non-expanded mode*/} -

+

{displayedAddress} +

{/* Clipboard and Block Explorer icons - only shown in expanded mode */} diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx index 0e8e9fcc..621a6ebe 100644 --- a/src/components/Graph/Graph.tsx +++ b/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 = ({ 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 = ({ 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 (
@@ -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" > - + 0} diff --git a/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.css b/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.css index 18b56985..164b6338 100644 --- a/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.css +++ b/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 */ } diff --git a/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx b/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx index 2f52f1f9..73295c37 100644 --- a/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx +++ b/src/components/Graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx @@ -32,6 +32,7 @@ const CustomEdgePath = ({ onClick, }: CustomEdgePathProps) => { const triangleMarkerID: string = `triangle-${id}`; + return ( <> = ({ data: { address } }) => { {/* Address information */}
-

+

{`${address.slice(0, 5)}...${address.slice(-5)}`} + {analysisData && analysisData.labels.length > 0 && ( + + )}

{analysisData && }
diff --git a/src/components/common/EntityLogo.tsx b/src/components/common/EntityLogo.tsx new file mode 100644 index 00000000..a62475d9 --- /dev/null +++ b/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 = ({ entity, className }) => { + const logoURL = getEntityLogoURL(entity); + const [imageError, setImageError] = useState(false); + + const handleImageError = () => { + setImageError(true); + }; + + const handleImageLoad = () => { + setImageError(false); + }; + + return ( + <> + {imageError ? null : ( + {entity} + )} + + ); +}; + +export default EntityLogo; diff --git a/vite.config.ts b/vite.config.ts index 50e5ceab..d310e5c4 100644 --- a/vite.config.ts +++ b/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,