Merge branch 'develop' into feat/semantic-release-config

.env.example

@@ -1,6 +1,41 @@
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=50db9e195634356bb8ab0375a9f07607
+NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP=
+NEXT_PUBLIC_ALCHEMY_ETHEREUM_KEY=
 NEXT_PUBLIC_ALCHEMY_SEPOLIA_HTTP=
 NEXT_PUBLIC_ALCHEMY_SEPOLIA_KEY=
+NEXT_PUBLIC_ALCHEMY_POLYGON_HTTP=
+NEXT_PUBLIC_ALCHEMY_POLYGON_KEY=
 NEXT_PUBLIC_ALCHEMY_MUMBAI_HTTP=
 NEXT_PUBLIC_ALCHEMY_MUMBAI_KEY=
-NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP=
+NEXT_PUBLIC_ALCHEMY_OPTIMISM_HTTP=
+NEXT_PUBLIC_ALCHEMY_OPTIMISM_KEY=
+NEXT_PUBLIC_ALCHEMY_OPGOERLI_HTTP=
+NEXT_PUBLIC_ALCHEMY_OPGOERLI_KEY=
+NEXT_PUBLIC_ALCHEMY_OPSEPOLIA_HTTP=
+NEXT_PUBLIC_ALCHEMY_OPSEPOLIA_KEY=
+NEXT_PUBLIC_ALCHEMY_AVALANCHE_HTTP=
+NEXT_PUBLIC_ALCHEMY_AVALANCHE_KEY=
+NEXT_PUBLIC_ALCHEMY_FUJI_HTTP=
+NEXT_PUBLIC_ALCHEMY_FUJI_KEY=
+NEXT_PUBLIC_ALCHEMY_BASE_HTTP=
+NEXT_PUBLIC_ALCHEMY_BASE_KEY=
+NEXT_PUBLIC_ALCHEMY_BASEGOERLI_HTTP=
+NEXT_PUBLIC_ALCHEMY_BASEGOERLI_KEY=
+NEXT_PUBLIC_ALCHEMY_BNBTESTNET_HTTP=
+NEXT_PUBLIC_ALCHEMY_BNBTESTNET_KEY=
+NEXT_PUBLIC_ALCHEMY_ARBITRUMONE_HTTP=
+NEXT_PUBLIC_ALCHEMY_ARBITRUMONE_KEY=
+NEXT_PUBLIC_ALCHEMY_ARBITRUMSEPOLIA_HTTP=
+NEXT_PUBLIC_ALCHEMY_ARBITRUMSEPOLIA_KEY=
+
+# 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
+NEXT_PUBLIC_PONDER_ENDPOINT=""

.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/ApprovedTokenCards.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ApproveTokenCard } from "@/components/03-organisms";
+import { SwapContext } from "@/components/01-atoms";
+import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
+import { Token } from "@/lib/shared/types";
+import { useContext, useEffect, useState } from "react";
+
+export const ApprovedTokenCards = () => {
+  const { authenticatedUserAddress } = useAuthenticatedUser();
+  const [tokensApprovedForSwap, setTokensApprovedForSwap] = useState<Token[]>(
+    [],
+  );
+
+  const { authenticatedUserTokensList, setApprovedTokensCount } =
+    useContext(SwapContext);
+
+  useEffect(() => {
+    setApprovedTokensCount(0);
+  }, [authenticatedUserTokensList]);
+
+  if (!authenticatedUserAddress?.address) {
+    return null;
+  }
+
+  const addNewTokenToApprovedList = (token: Token) => {
+    if (!tokensApprovedForSwap.includes(token)) {
+      const approvedTokensCount = tokensApprovedForSwap.length + 1;
+      setTokensApprovedForSwap([...tokensApprovedForSwap, token]);
+      setApprovedTokensCount(approvedTokensCount);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center relative">
+      <div className="grid grid-cols-1 w-[100%] gap-3 relative overflow-y-auto max-h-[370px] no-scrollbar">
+        {authenticatedUserTokensList.map((token, index) => (
+          <ApproveTokenCard
+            setTokenWasApprovedForSwap={addNewTokenToApprovedList}
+            key={index}
+            token={token}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

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 "@/components/01-atoms";
+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>
+  );
+};