Epic/search bar improvements

.env.example

@@ -4,3 +4,14 @@ NEXT_PUBLIC_ALCHEMY_SEPOLIA_KEY=
 NEXT_PUBLIC_ALCHEMY_MUMBAI_HTTP=
 NEXT_PUBLIC_ALCHEMY_MUMBAI_KEY=
 NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP=
+
+# Subgraph endpoint production query
+
+# ENDPOINT_URL=https://gateway.testnet.thegraph.com/api/[api-key]/subgraphs/id/EynHJVht9r6xhaZEPCyLYLd4EqBq8msf4jTrw1Vwg8ZV
+
+
+# Subgraph endpoint production query
+
+NEXT_PUBLIC_ENDPOINT_URL=https://api.studio.thegraph.com/query/57887/swaplace-subgraph-sepolia/version/latest
+
+NEXT_PUBLIC_SUBGRAPH_AUTH_KEY=3b2048f02febad918a35bbafe78b2115

.github/workflows/eslint.yml

@@ -11,12 +11,12 @@ name: ESLint
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '16 6 * * 3'
+    - cron: "16 6 * * 3"
 
 jobs:
   eslint:

.prettierrc.yml

@@ -0,0 +1,5 @@
+trailingComma: "all"
+singleQuote: false
+printWidth: 80
+tabWidth: 2
+semi: true

CODEOWNERS

@@ -1,3 +1,3 @@
 # Default owners for everything in the repo
 
-* @FrancoAguzzi @heronlancellot @eduramme
+- @FrancoAguzzi @heronlancellot @eduramme @0xneves

components/01-atoms/ConnectWallet.tsx

@@ -1,11 +1,13 @@
+import { WalletIcon } from "@/components/01-atoms";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { useRouter } from "next/router";
 
 interface IConnectWallet {
   customStyle?: string;
+  walletIcon?: boolean;
 }
 
-export const ConnectWallet = ({ customStyle }: IConnectWallet) => {
+export const ConnectWallet = ({ customStyle, walletIcon }: IConnectWallet) => {
   const router = useRouter();
 
   return (
@@ -44,10 +46,10 @@ export const ConnectWallet = ({ customStyle }: IConnectWallet) => {
                 return (
                   <button
                     onClick={openConnectModal}
-                    type="button"
                     className={customStyle}
+                    type="button"
                   >
-                    Connect Wallet
+                    {walletIcon ? <WalletIcon /> : <p>Connect Wallet</p>}
                   </button>
                 );
               }
@@ -65,7 +67,7 @@ export const ConnectWallet = ({ customStyle }: IConnectWallet) => {
                 <div className="flex gap-3 xl:flex-col">
                   <button
                     onClick={openChainModal}
-                    className="bg-[#e8e8e8] shadow-md border-2 border-[#e8e8e8] hover:bg-[#f8f8f8] rounded px-4 transition hidden md:flex items-center"
+                    className="bg-[#e8e8e8] dark:bg-[#353836] dark:hover:bg-[#4b514d] dark:border-none shadow-md border-2 border-[#e8e8e8] hover:bg-[#f8f8f8] rounded px-4 hidden md:flex items-center"
                     type="button"
                   >
                     {chain.hasIcon && (
@@ -92,7 +94,7 @@ export const ConnectWallet = ({ customStyle }: IConnectWallet) => {
                   </button>
                   <button
                     onClick={openAccountModal}
-                    className="p-4 py-2 bg-[#e8e8e8] shadow-md border-2 border-[#e8e8e8] hover:bg-[#f8f8f8] rounded transition"
+                    className="p-4 py-2 bg-[#e8e8e8] dark:bg-[#353836] dark:hover:bg-[#4b514d] dark:border-none shadow-md border-2 border-[#e8e8e8] hover:bg-[#f8f8f8] rounded"
                     type="button"
                   >
                     {account.displayName}

components/01-atoms/DisconnectWallet.tsx

@@ -0,0 +1,31 @@
+import { PowerIcon } from "./icons/PowerIcon";
+import { useSidebar } from "@/lib/client/contexts/SidebarContext.tsx";
+import { useDisconnect } from "wagmi";
+import cc from "classcat"
+import { useTheme } from "next-themes";
+
+export const DisconnectWallet = () => {
+  const { disconnect } = useDisconnect();
+  const { systemTheme, theme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
+  const isDark = currentTheme === "dark";
+  const { toggleSidebar } = useSidebar();
+
+  const handleClick = () => {
+    toggleSidebar()
+    disconnect()
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={cc([
+        "flex gap-2 justify-center items-center",
+        isDark ? "text-[#DDF23D]" : "text-[#AABE13]",
+      ])}
+    >
+      <PowerIcon />
+      <h3 className="text-sm">Disconnect</h3>
+    </button>
+  );
+};

components/01-atoms/ENSAvatar.tsx

@@ -0,0 +1,77 @@
+import { LoadingIndicator } from ".";
+import {
+  ENSAvatarQueryStatus,
+  useEnsData,
+} from "@/lib/client/hooks/useENSData";
+import { EthereumAddress } from "@/lib/shared/types";
+import BoringAvatar from "boring-avatars";
+import cc from "classcat";
+
+enum ENSAvatarSize {
+  SMALL = "small",
+  MEDIUM = "medium",
+}
+
+const ENSAvatarClassName = {
+  [ENSAvatarSize.SMALL]: "ens-avatar-small",
+  [ENSAvatarSize.MEDIUM]: "ens-avatar-medium",
+};
+
+interface ENSAvatarProps {
+  avatarENSAddress: EthereumAddress;
+  size?: ENSAvatarSize;
+}
+
+export const ENSAvatar = ({
+  avatarENSAddress,
+  size = ENSAvatarSize.MEDIUM,
+}: ENSAvatarProps) => {
+  const { avatarQueryStatus, avatarSrc } = useEnsData({
+    ensAddress: avatarENSAddress,
+  });
+
+  return (
+    <div>
+      {avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? (
+        <div
+          className={cc([
+            ENSAvatarClassName[size],
+            "flex justify-center items-center",
+          ])}
+        >
+          <LoadingIndicator />
+        </div>
+      ) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR ? (
+        <div className={ENSAvatarClassName[size]}>
+          <BoringAvatar
+            variant="bauhaus"
+            data-atropos-offset="2"
+            name={avatarENSAddress.toString()}
+            square={true}
+            colors={[
+              "#353836",
+              "#212322",
+              "#DDF23D",
+              "#A3A9A5",
+              "#05332B",
+              "#F6F6F1",
+            ]}
+          />
+        </div>
+      ) : /* 
+          Below condition will always be true since we only have 3 possible values 
+          for avatarQueryStatus, being the third one ENSAvatarQueryStatus.SUCCESS:
+
+          When the query is successful, avatarSrc will be defined
+        */
+      avatarSrc ? (
+        <img
+          src={avatarSrc}
+          placeholder="empty"
+          className={ENSAvatarClassName[size]}
+          alt={`ENS Avatar for ${avatarENSAddress}`}
+        />
+      ) : null}
+    </div>
+  );
+};