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

@@ -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;

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");
+  });
+});

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);
+    }),
+  ];
+};