Fix bugs, add social media links (#21)

* Add link and layout

* Update Hotbar.tsx

* Update Graph.tsx

* Update Hotbar.tsx

* Add social media icons

---------

Co-authored-by: Pedro Rodrigues <[email protected]>

src/components/Graph/Graph.tsx

@@ -564,6 +564,7 @@ const Graph: FC = () => {
         enter="transition-all duration-500 delay-500"
         enterFrom="opacity-0 scale-150"
         enterTo="opacity-100 scale-100"
+        className="h-full w-full"
       >
         {searchedAddresses.length > 0 && (
           <GraphProvider

src/components/Graph/Hotbar/Hotbar.tsx

@@ -26,7 +26,7 @@ const Hotbar: FC = () => {
   ];
 
   return (
-    <div className="mb-16 flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
+    <div className="flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
       {Buttons.map((button) => {
         return (
           <button

src/components/Graph/LandingPage/LandingPage.tsx

@@ -4,8 +4,13 @@ import { FC } from "react";
 import logo from "../../../assets/ward-logo-blue-full.svg";
 import Searchbar from "./SearchBar";
 
-// TODO - Fill this with real juicy addressess
-const PossibleAddresses: string[] = [];
+const PossibleAddresses: string[] = [
+  "0x19aa5fe80d33a56d56c78e82ea5e50e5d80b4dff",
+  "0x74487eed1e67f4787e8c0570e8d5d168a05254d4",
+  "0xd1381f89b4feea63e9c6bc97dc9fc2b0c96bf12f",
+  "0x3f5ce5fbfe3e9af3971dd833d26ba9b5c936f0be",
+  "0x12d66f87a04a9e220743712ce6d9bb1b5616b8fc",
+];
 
 interface LandingPageProps {
   setSearchedAddress: (address: string) => void;

src/components/Socials/Socials.css

@@ -0,0 +1,4 @@
+.custom-svg-color {
+  filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(7500%)
+    hue-rotate(345deg) brightness(100%) contrast(100%);
+}

src/components/Socials/Socials.tsx

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import clsx from "clsx";
+
+import discord from "../../assets/discord.svg";
+import github from "../../assets/github.svg";
+import linkedin from "../../assets/linkedin.svg";
+
+interface Social {
+  name: string;
+  Icon: string;
+  link: string;
+}
+
+const SocialList: Social[] = [
+  {
+    name: "Github",
+    Icon: github,
+    link: "https://github.com/WardAnalytics/WardGraph",
+  },
+  {
+    name: "Discord",
+    Icon: discord,
+    link: "https://discord.gg/4ZzgeUwa",
+  },
+  {
+    name: "LinkedIn",
+    Icon: linkedin,
+    link: "https://www.linkedin.com/company/wardanalytics/",
+  },
+];
+
+const SocialButton: FC<Social> = ({ name, Icon, link }) => {
+  return (
+    <a href={link} target="_blank" rel="noreferrer">
+      <img
+        src={Icon}
+        alt={`${name} Icon`}
+        className="h-8 w-8 rounded-full p-1 opacity-50 backdrop-blur-sm transition-all duration-200 hover:opacity-70"
+      />
+    </a>
+  );
+};
+
+interface SocialsProps {
+  className?: string;
+}
+
+const Socials: FC<SocialsProps> = ({ className }) => {
+  return (
+    <div className={clsx("flex flex-row gap-x-2", className)}>
+      {SocialList.map((social) => {
+        return <SocialButton {...social} key={social.name} />;
+      })}
+    </div>
+  );
+};
+
+export default Socials;

src/components/Socials/index.tsx

@@ -0,0 +1,3 @@
+import Socials from "./Socials";
+
+export default Socials;

src/templates/GraphTemplate.tsx

@@ -1,10 +1,12 @@
 import { FC } from "react";
 import Graph from "../components/Graph";
+import Socials from "../components/Socials";
 
 const GraphTemplate: FC = () => {
   return (
     <div className="h-screen w-screen">
       <Graph />
+      <Socials className="absolute bottom-0 right-0 m-4" />
     </div>
   );
 };