Merge branch 'main' into charts-enhancement

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Check out [existing issues (especially Todo)](https://github.com/orgs/DeXter-on-
 
 Here are a few guidelines to follow:
 
-- **Discuss** major changes with the maintainers before starting work, our [Discord](https://discord.gg/Ybydr5NT) is a good place to do that
+- **Discuss** major changes with the maintainers before starting work, our [Discord](https://discord.gg/YCtv3BDQ) is a good place to do that
 - **Use [Pull Requests (PRs)](https://docs.github.com/en/pull-requests)** - commits direclty to `main` branch are not allowed
 - **Use [Prettier](https://prettier.io/)** and automatic code formatting to keep PRs focused on the changes
 - **Use [ESLint](https://eslint.org/)** to keep code clean and consistent

package.json

@@ -10,20 +10,20 @@
     "test": "jest __tests__ --watch"
   },
   "dependencies": {
-    "@heroicons/react": "^2.0.18",
-    "@radixdlt/radix-dapp-toolkit": "^0.7.1",
+    "@radixdlt/radix-dapp-toolkit": "^1.0.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "alphadex-sdk-js": "^0.9.0",
+    "alphadex-sdk-js": "^0.11.0",
     "autoprefixer": "10.4.14",
     "eslint-config-next": "13.4.7",
     "lightweight-charts": "^4.0.1",
     "next": "^13.4.19",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "react-redux": "^8.1.2",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.6"

src/app/components/AccentLink.tsx

@@ -0,0 +1,27 @@
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+
+interface AccentLinkProps {
+  href: string;
+  originalClassName?: string;
+  children: React.ReactNode;
+}
+
+export const AccentLink: React.FC<AccentLinkProps> = ({
+  href,
+  originalClassName,
+  children,
+}) => {
+  const pathName = usePathname();
+  let className = originalClassName || "";
+
+  if (pathName === href) {
+    className += " !text-accent";
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+};

src/app/components/Footer.tsx

@@ -1,7 +1,110 @@
 import "react";
+import "../styles/footer.css";
+import Image from "next/image";
+import { AccentLink } from "./AccentLink";
+
+import { FaXTwitter } from "react-icons/fa6";
+import { FaTelegram } from "react-icons/fa6";
+import { FaDiscord } from "react-icons/fa6";
+import { FaGithub } from "react-icons/fa6";
+import { SiGitbook } from "react-icons/si";
 
 export function Footer() {
   return (
-    <div className="min-h-[50px] col-span-12 text-center">Footer signature</div>
+    <footer className="col-span-12 p-4 grid grid-cols-1 grid-rows-5 gap-4 bg-base-300 text-xs text-secondary-content lg:grid-cols-3 lg:grid-rows-3 lg:p-12 lg:gap-8">
+      <div className="row-start-2 row-span-3 grid grid-cols-6 gap-4 text-xs lg:row-start-1">
+        <Image
+          src="/dexter_icon.svg"
+          alt="DeXter icon"
+          width="0"
+          height="0"
+          sizes="100vw"
+          className="w-8 h-auto !my-auto col-start-1 place-self-end"
+        />
+        <Image
+          src="/dexter_name.svg"
+          alt="DeXter"
+          width="0"
+          height="0"
+          sizes="100vw"
+          className="w-24 h-auto !my-auto col-start-2 col-span-5 place-self-start"
+        />
+
+        <div className="col-start-2 col-span-5">
+          Trade and leave the algorithms do the rest! <br /> Safe, Accurate,
+          Intuitive, Decentralised. <br />
+          Runs on{" "}
+          <a href="https://www.radixdlt.com/" target="_blank">
+            RADIX
+          </a>{" "}
+          &{" "}
+          <a href="https://alphadex.net/" target="_blank">
+            ALPHA DEX
+          </a>
+          .
+        </div>
+
+        <div className="col-span-11 col-start-2">
+          Built with passion by a global community.
+        </div>
+      </div>
+
+      <div className="flex flex-col space-y-4 px-16 lg:row-span-2">
+        <div className="">
+          <AccentLink href="/">TRADE</AccentLink>
+        </div>
+
+        <div className="flex justify-between">
+          <a
+            href="https://twitter.com/DexterOnRadix"
+            target="_blank"
+            className="text-secondary-content hover:text-primary-content"
+          >
+            <FaXTwitter size="1rem" />
+          </a>
+
+          <a
+            href="https://t.me/dexter_discussion"
+            target="_blank"
+            className="text-secondary-content hover:text-primary-content"
+          >
+            <FaTelegram size="1rem" />
+          </a>
+
+          <a
+            href="https://discord.gg/YCtv3BDQ"
+            target="_blank"
+            className="text-secondary-content hover:text-primary-content"
+          >
+            <FaDiscord size="1rem" />
+          </a>
+
+          <a
+            href="https://github.com/DeXter-on-Radix"
+            target="_blank"
+            className="text-secondary-content hover:text-primary-content"
+          >
+            <FaGithub size="1rem" />
+          </a>
+
+          <a
+            href="https://dexter-on-radix.gitbook.io"
+            target="_blank"
+            className="text-secondary-content hover:text-primary-content"
+          >
+            <SiGitbook size="1rem" />
+          </a>
+        </div>
+      </div>
+
+      <div className="flex justify-end items-center space-x-4 lg:row-start-3 lg:col-start-3 lg:pr-8">
+        <AccentLink
+          href="/terms"
+          originalClassName="whitespace-nowrap text-secondary-content"
+        >
+          TERMS & CONDITIONS
+        </AccentLink>
+      </div>
+    </footer>
   );
 }

src/app/components/NavBar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Image from "next/image";
-import { MoonIcon } from "@heroicons/react/24/outline";
+import { FaRegMoon } from "react-icons/fa6";
 
 // TODO: theme switching
 
@@ -28,7 +28,7 @@ export function Navbar() {
           className="btn mx-2 border-none"
           style={{ height: "40px", minHeight: "40px" }}
         >
-          <MoonIcon className="h-6 w-6" />
+          <FaRegMoon className="h-6 w-6 text-secondary-content" />
         </div>
 
         <radix-connect-button></radix-connect-button>

src/app/components/PairSelector.tsx

@@ -8,18 +8,39 @@ export function PairSelector() {
     dispatch(selectPairAddress(pairAddress));
   };
   return (
-    <div className="dropdown" id="pair-selector">
-      <label tabIndex={0} className="btn m-1">
-        {pairSelector.name}
+    <div className="dropdown dropdown-start w-full" id="pair-selector">
+      <label
+        tabIndex={0}
+        className="justify-between btn btn-block font-bold base-100"
+      >
+        <span>{pairSelector.name || "Loading"}</span>
+        <span className="float-right">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="white"
+            viewBox="0 0 16 16"
+          >
+            <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </span>
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+        className="dropdown-content z-[1] menu shadow bg-neutral rounded-box w-full !my-0 !px-0"
       >
+        <li className="text-xs text-left uppercase text-secondary-content !pl-4 ">
+          Select a pair of tokens:
+        </li>
         {pairSelector.pairsList.map((pair, index) => (
-          <li key={index}>
-            <button onClick={() => selectPair(pair.address)}>
+          <li className="font-bold !pl-0" key={index}>
+            <button
+              className="justify-between"
+              onClick={() => selectPair(pair.address)}
+            >
               {pair.name}
+              <span>+</span>
             </button>
           </li>
         ))}