+
+ {lastUpdated && (
+
+ Last updated {lastUpdated.toLocaleTimeString()}
+
+ )}
diff --git a/src/screens/ConnectScreen.test.tsx b/src/screens/ConnectScreen.test.tsx
index 5fae7a6..d51ca7c 100644
--- a/src/screens/ConnectScreen.test.tsx
+++ b/src/screens/ConnectScreen.test.tsx
@@ -103,4 +103,51 @@ describe("ConnectScreen", () => {
expect(connectWallet).toHaveBeenCalledTimes(1);
});
+
+ describe("supported wallet options (#82)", () => {
+ it("renders a logo and label for each supported wallet", () => {
+ render( );
+
+ for (const name of ["Freighter", "xBull", "Albedo", "Lobstr"]) {
+ expect(screen.getByText(name)).toBeInTheDocument();
+ expect(
+ screen.getByRole("img", { name: `${name} logo` }),
+ ).toBeInTheDocument();
+ }
+ });
+ });
+
+ describe("'New to Stellar?' collapsible (#82)", () => {
+ it("renders the collapsible details element in the DOM", () => {
+ const { container } = render( );
+ const details = container.querySelector("details");
+ expect(details).toBeInTheDocument();
+ expect(screen.getByText("New to Stellar?")).toBeInTheDocument();
+ });
+
+ it("is collapsed by default and expands when the summary is clicked", () => {
+ const { container } = render( );
+ const details = container.querySelector("details") as HTMLDetailsElement;
+
+ expect(details.open).toBe(false);
+
+ fireEvent.click(screen.getByText("New to Stellar?"));
+
+ expect(details.open).toBe(true);
+ expect(
+ screen.getByRole("link", { name: /how stellar accounts work/i }),
+ ).toBeInTheDocument();
+ });
+ });
+
+ describe("responsive hero (#82)", () => {
+ it("applies the responsive hide class to the hero image", () => {
+ render( );
+ const hero = screen.getByRole("img", {
+ name: /sorokit wallet dashboard preview/i,
+ });
+ expect(hero.className).toContain("hidden");
+ expect(hero.className).toContain("sm:block");
+ });
+ });
});
diff --git a/src/screens/ConnectScreen.tsx b/src/screens/ConnectScreen.tsx
index 79796fe..a448100 100644
--- a/src/screens/ConnectScreen.tsx
+++ b/src/screens/ConnectScreen.tsx
@@ -1,10 +1,13 @@
-import { Cancel01Icon } from "@hugeicons/core-free-icons";
+import { Cancel01Icon, Wallet01Icon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import heroImg from "@/assets/hero.png";
import { Button } from "@/components/ui/Button";
import { useSorokit } from "@/context/useSorokit";
+/** Wallets supported by the underlying sorokit-core connector. */
+const SUPPORTED_WALLETS = ["Freighter", "xBull", "Albedo", "Lobstr"] as const;
+
export function ConnectScreen() {
const { connectWallet, isConnecting, error, clearError } = useSorokit();
@@ -40,11 +43,11 @@ export function ConnectScreen() {
- {/* Hero image */}
+ {/* Hero image — hidden on short/mobile viewports to keep the card in view */}
{/* Card */}
@@ -88,10 +91,61 @@ export function ConnectScreen() {
Connecting to your wallet…
)}
+ {/* Supported wallet options */}
+