From d41593e470f753584d1d17e0388b37eddb9c6988 Mon Sep 17 00:00:00 2001
From: Santiago Villarreal Arley <115122095+Villarley@users.noreply.github.com>
Date: Wed, 13 Nov 2024 02:48:01 -0600
Subject: [PATCH] Feat: Reorganize Wallet PopUp (#945)

* Feat: Reorganize Wallet PopUp

Added the function sortConnectors and applied logic to display available connectors first, followed by unavailable ones.

* requested changes

- Updated function import at the navbar file.
- Created connectors.test.js for testing the util function.
- Renamed the file to "connectors.ts"
---
 components/UI/navbar.tsx       |  8 +++--
 tests/utils/connectors.test.js | 58 ++++++++++++++++++++++++++++++++++
 utils/connectors.ts            | 24 ++++++++++++++
 3 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 tests/utils/connectors.test.js
 create mode 100644 utils/connectors.ts

diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index 21d38a15..d2f05666 100644
--- a/components/UI/navbar.tsx
+++ b/components/UI/navbar.tsx
@@ -31,6 +31,7 @@ import { PendingBoostClaim } from "types/backTypes";
 import Typography from "./typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
 import Hamburger from "./hamburger";
+import { sortConnectors } from "@utils/connectors";
 
 const Navbar: FunctionComponent = () => {
   const currentNetwork = getCurrentNetwork();
@@ -58,10 +59,11 @@ const Navbar: FunctionComponent = () => {
       linkText: "",
     },
   ]);
+  const sortedConnectors = sortConnectors(availableConnectors);
+
   const { starknetkitConnectModal } = useStarknetkitConnectModal({
-    connectors: availableConnectors as any,
+    connectors: sortedConnectors as any,
   });
-
   const fetchAndUpdateNotifications = async () => {
     if (!address) return;
     const res = await getPendingBoostClaims(hexToDecimal(address));
@@ -364,4 +366,4 @@ const Navbar: FunctionComponent = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/tests/utils/connectors.test.js b/tests/utils/connectors.test.js
new file mode 100644
index 00000000..d560b6a0
--- /dev/null
+++ b/tests/utils/connectors.test.js
@@ -0,0 +1,58 @@
+import { sortConnectors } from "../../utils/connectors";
+class MockConnector {
+  constructor(id, name, isAvailable) {
+    this.id = id;
+    this.name = name;
+    this.isAvailable = isAvailable;
+  }
+  available() {
+    return this.isAvailable;
+  }
+}
+
+describe("sortConnectors function", () => {
+  it("should place available connectors first, followed by unavailable ones", () => {
+    const connectors = [
+      new MockConnector("okxwallet", "Okx Wallet", false),
+      new MockConnector("braavos", "Braavos", true),
+      new MockConnector("bitkeep", "Bitget Wallet", false),
+      new MockConnector("argentX", "Argent X", true),
+    ];
+
+    const sortedConnectors = sortConnectors(connectors);
+
+    expect(sortedConnectors[0].name).toBe("Braavos");
+    expect(sortedConnectors[1].name).toBe("Argent X");
+    expect(sortedConnectors[2].name).toBe("Okx Wallet");
+    expect(sortedConnectors[3].name).toBe("Bitget Wallet");
+  });
+
+  it("should return an empty array if no connectors are provided", () => {
+    const sortedConnectors = sortConnectors([]);
+    expect(sortedConnectors).toEqual([]);
+  });
+
+  it("should handle the case when all connectors are available", () => {
+    const connectors = [
+      new MockConnector("braavos", "Braavos", true),
+      new MockConnector("argentX", "Argent X", true),
+    ];
+
+    const sortedConnectors = sortConnectors(connectors);
+
+    expect(sortedConnectors[0].name).toBe("Braavos");
+    expect(sortedConnectors[1].name).toBe("Argent X");
+  });
+
+  it("should handle the case when all connectors are unavailable", () => {
+    const connectors = [
+      new MockConnector("okxwallet", "Okx Wallet", false),
+      new MockConnector("bitkeep", "Bitget Wallet", false),
+    ];
+
+    const sortedConnectors = sortConnectors(connectors);
+
+    expect(sortedConnectors[0].name).toBe("Okx Wallet");
+    expect(sortedConnectors[1].name).toBe("Bitget Wallet");
+  });
+});
diff --git a/utils/connectors.ts b/utils/connectors.ts
new file mode 100644
index 00000000..dbc85fd1
--- /dev/null
+++ b/utils/connectors.ts
@@ -0,0 +1,24 @@
+import { Connector } from "starknetkit";
+
+export const sortConnectors = (connectors: Connector[]): Connector[] => {
+  const available: Connector[] = [];
+  const notAvailable: Connector[] = [];
+
+  // Sort connectors 
+  connectors.forEach((connector) => {
+    if (connector.available()) {
+      available.push(connector);
+    } else {
+      notAvailable.push(connector);
+    }
+  });
+
+  return [
+    ...available,
+    // Reorganized not available connectors
+    ...notAvailable.sort((a, b) => {
+      const order = ["okxwallet", "bitkeep"]; // desired order
+      return order.indexOf(a.id) - order.indexOf(b.id);
+    }),
+  ];
+};
\ No newline at end of file