WardAnalytics · tubarao312 · Jan 19, 2024 · Jan 9, 2024 · Jan 11, 2024 · Jan 11, 2024
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
+# For connection with the backend
 VITE_WARD_API_BASE_URL=https://wardanalyticsapi.com
 VITE_WARD_API_KEY=
 

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -10,14 +10,14 @@ name: Deploy to Firebase Hosting on PR
 env:
   VITE_WARD_API_BASE_URL: "https://wardanalyticsapi.com"
   VITE_WARD_API_KEY: ${{ secrets.WARD_API_KEY }}
-  VITE_FIREBASE_API_KEY: "AIzaSyD1LUGU2RM-bhxKgeYdnzItbwBC0VSTOV0"
-  VITE_FIREBASE_AUTH_DOMAIN: "graphapp-bca04.firebaseapp.com"
-  VITE_FIREBASE_PROJECT_ID: "graphapp-bca04"
-  VITE_FIREBASE_STORAGE_BUCKET: "graphapp-bca04.appspot.com"
-  VITE_FIREBASE_MESSAGING_SENDER_ID: "1030502540585"
-  VITE_FIREBASE_APP_ID: "1:1030502540585:web:cfe727695aad44d0494338"
+  VITE_FIREBASE_API_KEY: "AIzaSyBZCnEQus6G42SodGNRf6o2zmBnGN0nXes"
+  VITE_FIREBASE_AUTH_DOMAIN: "graphapp-dev.firebaseapp.com"
+  VITE_FIREBASE_PROJECT_ID: "graphapp-dev"
+  VITE_FIREBASE_STORAGE_BUCKET: "graphapp-dev.appspot.com"
+  VITE_FIREBASE_MESSAGING_SENDER_ID: "897485812844"
+  VITE_FIREBASE_APP_ID: "1:897485812844:web:039de3b976c1559fded449"
   # For Google Analytics
-  VITE_FIREBASE_MEASUREMENT_ID: "G-RYB03B2Q13"
+  VITE_FIREBASE_MEASUREMENT_ID: "G-V2S9JPMH7S"
 
 jobs:
   build_and_preview:

diff --git a/index.html b/index.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/x-icon" href="./src/assets/ward-logo-blue.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta property="og:image"
+    content="https://firebasestorage.googleapis.com/v0/b/graphapp-bca04.appspot.com/o/Screenshot%20from%202024-01-16%2023-18-32-overlay.png?alt=media&token=e573d2ab-db72-4e10-80e4-a51b695aeb3c" />
   <title>Ward Graph</title>
 </head>
 

diff --git a/package.json b/package.json
@@ -26,8 +26,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
+    "react-icons": "^5.0.1",
     "react-query": "^3.39.3",
+    "react-share": "^5.0.3",
     "reactflow": "^11.10.1",
+    "uuid": "^9.0.1",
     "vite-plugin-environment": "^1.1.3",
     "yarn": "^1.22.21"
   },
@@ -36,6 +39,7 @@
     "@types/dotenv": "^8.2.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.15",
+    "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.0",

diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -2,12 +2,22 @@ import { FC, lazy } from "react";
 import { RouteObject, useRoutes } from "react-router-dom";
 
 const GraphTemplate = lazy(() => import("./templates/GraphTemplate"));
+const RedirectShortUrl = lazy(() => import("./templates/RedirectShortUrl"))
 
+// TODO: Replace the last route with a 404 page
 const PublicRoutes: RouteObject[] = [
   {
     path: "/",
     element: <GraphTemplate />,
   },
+  {
+    path: "/short/:key",
+    element: <RedirectShortUrl />,
+  },
+  {
+    path: "*",
+    element: <GraphTemplate />,
+  },
 ];
 
 const Routes: FC = () => {

diff --git a/src/assets/discord.svg b/src/assets/discord.svg
diff --git a/src/assets/github.svg b/src/assets/github.svg
diff --git a/src/assets/linkedin.svg b/src/assets/linkedin.svg
diff --git a/src/components/Graph/AnalysisWindow/Header/Header.tsx b/src/components/Graph/AnalysisWindow/Header/Header.tsx
@@ -53,7 +53,7 @@ const Header: FC<HeaderProps> = ({
             </h1>
 
             {/* Clipboard and Block Explorer icons - only shown in expanded mode */}
-            <CopyToClipboardIcon address={address} />
+            <CopyToClipboardIcon textToCopy={address} />
             {analysisData && (
               <BlockExplorerAddressIcon
                 blockchain={analysisData.blockchain}

diff --git a/src/components/Graph/AnalysisWindow/Header/components/CopyToClipboardIcon.tsx b/src/components/Graph/AnalysisWindow/Header/components/CopyToClipboardIcon.tsx
@@ -1,22 +1,22 @@
-import { FC, useState } from "react";
 import { ClipboardIcon } from "@heroicons/react/24/outline";
+import { FC, useState } from "react";
 
 interface CopyToClipboardIconProps {
-  address: string;
+  textToCopy: string;
 }
 
-/** This component is an icon that copies the address to the clipboard.
- * It uses the navigator.clipboard API to copy the address to the clipboard.
+/** This component is an icon that copies a piece of text to the clipboard.
+ * It uses the navigator.clipboard API to copy the text to the clipboard.
  *
- * @param address: The address to copy
+ * @param textToCopy: The text to copy
  */
 
-const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ address }) => {
-  // Function for copying the address to the clipboard
+const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ textToCopy }) => {
+  // Function for copying text to the clipboard
   const [isCopied, setIsCopied] = useState(false);
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(address);
+      await navigator.clipboard.writeText(textToCopy);
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 500);
     } catch (err) {
@@ -26,9 +26,8 @@ const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ address }) => {
 
   return (
     <ClipboardIcon
-      className={`h-5 w-5 cursor-pointer transition-all duration-200 ${
-        isCopied ? "text-blue-500" : "text-gray-400 hover:text-gray-500"
-      }`}
+      className={`h-5 w-5 cursor-pointer transition-all duration-200 ${isCopied ? "text-blue-500" : "text-gray-400 hover:text-gray-500"
+        }`}
       aria-hidden="true"
       onClick={copyToClipboard}
     />

diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -44,8 +44,9 @@ import {
   convertNodeListToRecord,
 } from "./graph_calculations";
 
-import { logEvent } from "firebase/analytics";
-import { default as firebase } from "../../firebase/firebase";
+import analytics from "../../firebase/analytics";
+import firestore, { StoreUrlObject } from "../../firebase/firestore";
+import generateShortUrl from "../../utils/generateShortUrl";
 import DraggableWindow from "./AnalysisWindow/AnalysisWindow";
 import Hotbar from "./Hotbar";
 import LandingPage from "./LandingPage/LandingPage";
@@ -54,7 +55,6 @@ import TransactionTooltip, {
   TransactionTooltipProps,
 } from "./TransactionTooltip";
 
-
 /* Pan on drag settings */
 const panOnDrag = [1, 2];
 
@@ -75,7 +75,8 @@ interface GraphContextProps {
   getEdgeHandleID: (edgeID: string) => string;
   setFocusedAddressData: (data: AddressAnalysis | null) => void;
   setHoveredTransferData: (data: TransactionTooltipProps | null) => void;
-  copyLink: () => void;
+  getSharingLink: () => string;
+  copyLink: (url: string) => void;
   doLayout: () => void;
   setNodeHighlight: (address: string, highlight: boolean) => void;
   getNodeCount: () => number;
@@ -513,8 +514,25 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     )}&paths=${addressPaths.join(",")}`;
   }
 
-  function copyLink(): void {
-    navigator.clipboard.writeText(getLink());
+  async function copyLink(shortenedUrl: string): Promise<void> {
+    const link = getLink();
+    const key = shortenedUrl.split("/").pop()!;
+
+    console.log("link: ", shortenedUrl);
+
+    const storeUrlObj: StoreUrlObject = {
+      originalUrl: link,
+      key: key,
+    };
+
+    await firestore.storeUrl(storeUrlObj).then(async (id) => {
+      if (id) {
+        await navigator.clipboard.writeText(shortenedUrl);
+        analytics.logAnalyticsEvent("copy_link", {
+          link: shortenedUrl,
+        });
+      }
+    });
   }
 
   // Getting the node count so that we can show the legend dynamically ---------
@@ -533,6 +551,7 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     setFocusedAddressData,
     setHoveredTransferData,
     doLayout,
+    getSharingLink: generateShortUrl,
     copyLink,
     setNodeHighlight,
     getNodeCount,
@@ -629,7 +648,7 @@ const Graph: FC = () => {
   const onSetSearchedAddress = (newAddress: string) => {
     setSearchedAddresses([newAddress]);
 
-    logEvent(firebase.analytics, "search_address", {
+    analytics.logAnalyticsEvent("search_address", {
       address: newAddress,
     });
   };

diff --git a/src/components/Graph/Hotbar/Hotbar.tsx b/src/components/Graph/Hotbar/Hotbar.tsx
@@ -1,7 +1,8 @@
-import { FC, useContext } from "react";
 import { RectangleGroupIcon, ShareIcon } from "@heroicons/react/24/solid";
+import { FC, useContext, useMemo, useState } from "react";
 
 import { GraphContext } from "../Graph";
+import ShareDialog from "../LandingPage/ShareDialog";
 
 interface HotbarButton {
   onClick?: () => void;
@@ -10,7 +11,19 @@ interface HotbarButton {
 }
 
 const Hotbar: FC = () => {
-  const { doLayout, copyLink } = useContext(GraphContext);
+  const { doLayout, copyLink, getSharingLink } = useContext(GraphContext);
+
+  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
+
+  const shareUrl = useMemo(() => getSharingLink(), []);
+
+  const onShareUrl = () => {
+    copyLink(shareUrl);
+  }
+
+  const openShareDialog = () => {
+    setIsShareDialogOpen(true);
+  }
 
   const Buttons: HotbarButton[] = [
     {
@@ -20,28 +33,31 @@ const Hotbar: FC = () => {
     },
     {
       Icon: ShareIcon,
-      name: "Copy Link",
-      onClick: copyLink,
-    },
-  ];
+      name: "Share",
+      onClick: openShareDialog
+    }
+  ]
 
   return (
-    <div className="flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
-      {Buttons.map((button) => {
-        return (
-          <button
-            className="group flex flex-row items-center"
-            key={button.name}
-            onClick={button.onClick}
-          >
-            <button.Icon className="h-10 w-10 rounded-lg p-1 text-blue-100 transition-all duration-200 hover:bg-gray-700 hover:text-blue-300" />
-            <h1 className="absolute ml-[3.25rem] mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-blue-300 opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
-              {button.name}
-            </h1>
-          </button>
-        );
-      })}
-    </div>
+    <>
+      <div className="flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
+        {Buttons.map((button) => {
+          return (
+            <button
+              className="group flex flex-row items-center"
+              key={button.name}
+              onClick={button.onClick}
+            >
+              <button.Icon className="h-10 w-10 rounded-lg p-1 text-blue-100 transition-all duration-200 hover:bg-gray-700 hover:text-blue-300" />
+              <h1 className="absolute ml-[3.25rem] mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-blue-300 opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
+                {button.name}
+              </h1>
+            </button>
+          );
+        })}
+      </div>
+      <ShareDialog shareUrl={shareUrl} isOpen={isShareDialogOpen} setIsOpen={setIsShareDialogOpen} onShareUrl={onShareUrl} />
+    </>
   );
 };
 

diff --git a/src/components/Graph/LandingPage/LandingPage.tsx b/src/components/Graph/LandingPage/LandingPage.tsx
@@ -10,31 +10,33 @@ const PossibleAddresses: string[] = [
   "0x3fC91A3afd70395Cd496C647d5a6CC9D4B2b7FAD",
   "0x4838b106fce9647bdf1e7877bf73ce8b0bad5f97",
   "0xd24400ae8BfEBb18cA49Be86258a3C749cf46853"
-];
+]
 
 interface LandingPageProps {
-  setSearchedAddress: (address: string) => void;
+  setSearchedAddress: (address: string) => void
 }
 
 const LandingPage: FC<LandingPageProps> = ({ setSearchedAddress }) => {
   function selectRandomAddress() {
-    const randomIndex = Math.floor(Math.random() * PossibleAddresses.length);
-    setSearchedAddress(PossibleAddresses[randomIndex]);
+    const randomIndex = Math.floor(Math.random() * PossibleAddresses.length)
+    setSearchedAddress(PossibleAddresses[randomIndex])
   }
 
   return (
-    <div className="flex max-w-screen-sm flex-col items-center gap-y-10">
-      <img src={logo} alt="Ward Logo" className="w-2/3" />
-      <Searchbar className="w-full" onSearchAddress={setSearchedAddress} />
-      <h3
-        className="flex cursor-pointer flex-row items-center gap-x-2 text-sm text-blue-500"
-        onClick={selectRandomAddress}
-      >
-        <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
-        I'm feeling lucky
-      </h3>
-    </div>
-  );
-};
+    <>
+      <div className="flex max-w-screen-sm flex-col items-center gap-y-10">
+        <img src={logo} alt="Ward Logo" className="w-2/3" />
+        <Searchbar className="w-2/3 sm:w-full" onSearchAddress={setSearchedAddress} />
+        <h3
+          className="flex cursor-pointer flex-row items-center gap-x-2 text-sm text-blue-500"
+          onClick={selectRandomAddress}
+        >
+          <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
+          I'm feeling lucky
+        </h3>
+      </div>
+    </>
+  )
+}
 
-export default LandingPage;
+export default LandingPage