- {unreadable ? (
-
Could not read the vault's cycle.
- ) : (
- groups.map((group) =>
)
- )}
-
- {epochs.status === "loaded" && }
-
-
- {activity.status === "loaded" && }
-
+
+
+
+
+ {unreadable ? (
+
Could not read the vault's cycle.
+ ) : (
+ groups.map((group) =>
)
+ )}
+
+ {epochs.status === "loaded" && }
+
+
+ {activity.status === "loaded" && (
+
+ )}
+
+ {contracts}
+
+
)
diff --git a/app/src/components/admin/Disclosure.module.css b/app/src/components/admin/Disclosure.module.css
new file mode 100644
index 0000000..9091adc
--- /dev/null
+++ b/app/src/components/admin/Disclosure.module.css
@@ -0,0 +1,17 @@
+.disclosure {
+ border-top: 1px solid var(--vault-border-hairline);
+ padding-top: 11px;
+}
+
+.title {
+ cursor: pointer;
+ color: var(--vault-text-body);
+}
+
+.title:hover {
+ color: var(--vault-ink);
+}
+
+.body {
+ padding-top: 11px;
+}
diff --git a/app/src/components/admin/Disclosure.tsx b/app/src/components/admin/Disclosure.tsx
new file mode 100644
index 0000000..833e1b8
--- /dev/null
+++ b/app/src/components/admin/Disclosure.tsx
@@ -0,0 +1,17 @@
+import type React from "react"
+import typeStyles from "../../styles/type.module.css"
+import styles from "./Disclosure.module.css"
+
+const Disclosure: React.FC<{
+ title: string
+ children: React.ReactNode
+}> = ({ title, children }) => (
+
+
+ {title}
+
+ {children}
+
+)
+
+export default Disclosure
diff --git a/app/src/components/admin/SurfaceTabs.module.css b/app/src/components/admin/SurfaceTabs.module.css
new file mode 100644
index 0000000..dbceec3
--- /dev/null
+++ b/app/src/components/admin/SurfaceTabs.module.css
@@ -0,0 +1,33 @@
+.tabs {
+ display: flex;
+ gap: 10px;
+ margin-inline: -6px;
+ overflow-x: auto;
+ scrollbar-width: thin;
+ box-shadow: inset 0 -1px 0 var(--vault-border-hairline);
+}
+
+.tab {
+ flex: none;
+ padding: 4px 6px 10px;
+ white-space: nowrap;
+ color: var(--vault-text-body);
+ text-decoration: none;
+ border-bottom: 2px solid transparent;
+}
+
+.tab:hover {
+ color: var(--vault-ink);
+ border-bottom-color: var(--vault-border-inactive);
+}
+
+.tab:focus-visible {
+ outline: 2px solid var(--vault-action);
+ outline-offset: -2px;
+}
+
+.active,
+.active:hover {
+ color: var(--vault-ink);
+ border-bottom-color: var(--vault-ink);
+}
diff --git a/app/src/components/admin/SurfaceTabs.test.tsx b/app/src/components/admin/SurfaceTabs.test.tsx
new file mode 100644
index 0000000..b4a2aef
--- /dev/null
+++ b/app/src/components/admin/SurfaceTabs.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen, within } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { describe, expect, it } from "vitest"
+import SurfaceTabs from "./SurfaceTabs"
+
+const renderAt = (path: string) =>
+ render(
+
+
+ ,
+ )
+
+describe("SurfaceTabs", () => {
+ it("links each given surface under the admin path, in the given order", () => {
+ renderAt("/admin/cycle")
+
+ const nav = screen.getByRole("navigation", { name: "Admin surfaces" })
+ const links = within(nav).getAllByRole("link")
+ expect(links.map((link) => link.textContent)).toEqual([
+ "Cycle",
+ "Emergency",
+ ])
+ expect(links.map((link) => link.getAttribute("href"))).toEqual([
+ "/admin/cycle",
+ "/admin/emergency",
+ ])
+ })
+
+ it("marks only the surface at the current path as the current page", () => {
+ renderAt("/admin/emergency")
+
+ expect(
+ screen
+ .getByRole("link", { name: "Emergency" })
+ .getAttribute("aria-current"),
+ ).toBe("page")
+ expect(
+ screen.getByRole("link", { name: "Cycle" }).getAttribute("aria-current"),
+ ).toBeNull()
+ })
+})
diff --git a/app/src/components/admin/SurfaceTabs.tsx b/app/src/components/admin/SurfaceTabs.tsx
new file mode 100644
index 0000000..83605eb
--- /dev/null
+++ b/app/src/components/admin/SurfaceTabs.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import { NavLink } from "react-router-dom"
+import {
+ type AdminSurface,
+ SURFACE_LABELS,
+} from "../../hooks/useAdminAuthority"
+import typeStyles from "../../styles/type.module.css"
+import styles from "./SurfaceTabs.module.css"
+
+const SurfaceTabs: React.FC<{ surfaces: AdminSurface[] }> = ({ surfaces }) => (
+
+)
+
+export default SurfaceTabs
diff --git a/app/src/hooks/useCycleState.test.ts b/app/src/hooks/useCycleState.test.ts
index 84336de..8490bed 100644
--- a/app/src/hooks/useCycleState.test.ts
+++ b/app/src/hooks/useCycleState.test.ts
@@ -363,6 +363,28 @@ describe("useCycleState", () => {
}
})
+ it("stops refetching the cycle reads while inactive and resumes when active again", async () => {
+ vi.useFakeTimers({ shouldAdvanceTime: true })
+ try {
+ let active = false
+ const { result, rerender } = renderWithWallet(() =>
+ useCycleState({ active }),
+ )
+ await waitFor(() => expect(result.current.cycle.status).toBe("ready"))
+ const before = oracleMock.state.mock.calls.length
+
+ await vi.advanceTimersByTimeAsync(31_000)
+ expect(oracleMock.state.mock.calls).toHaveLength(before)
+
+ active = true
+ rerender()
+ await vi.advanceTimersByTimeAsync(16_000)
+ expect(oracleMock.state.mock.calls.length).toBeGreaterThan(before)
+ } finally {
+ vi.useRealTimers()
+ }
+ })
+
it("reads no balance when no custodian is set", async () => {
vaultMock.custodian.mockResolvedValue({ result: null })
diff --git a/app/src/hooks/useCycleState.ts b/app/src/hooks/useCycleState.ts
index b88c2b7..677d51a 100644
--- a/app/src/hooks/useCycleState.ts
+++ b/app/src/hooks/useCycleState.ts
@@ -262,7 +262,9 @@ async function fetchCustodianBalance(
return toAmount(balance)
}
-export function useCycleState(): { cycle: CycleState } {
+export function useCycleState({ active = true }: { active?: boolean } = {}): {
+ cycle: CycleState
+} {
const { history } = useEpochHistory()
const { figures, isPending: figuresPending } = useVaultFigures()
const { pause } = useVaultPaused()
@@ -271,7 +273,7 @@ export function useCycleState(): { cycle: CycleState } {
queryKey: cycleReadsKey,
queryFn: fetchCycleReads,
staleTime: STALE_MS,
- refetchInterval: REFRESH_MS,
+ refetchInterval: active ? REFRESH_MS : false,
})
const custodian = authorities?.custodian ?? null
const { data: custodianBalance, isPending: balancePending } = useQuery({
diff --git a/app/src/pages/AdminPanel.module.css b/app/src/pages/AdminPanel.module.css
index 1354f08..36c99c0 100644
--- a/app/src/pages/AdminPanel.module.css
+++ b/app/src/pages/AdminPanel.module.css
@@ -5,49 +5,45 @@
padding: 32px 0;
}
-.cards {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
- gap: 14px;
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.card {
+.pending {
display: flex;
flex-direction: column;
- gap: 8px;
- padding: 20px;
- border: 1px solid var(--vault-ink);
- background: var(--vault-surface-card);
+ gap: 14px;
}
-.cardWide {
- grid-column: 1 / -1;
+.pendingLine {
+ height: 1.2em;
+ width: 60%;
}
-.cardHeading {
- color: var(--vault-ink);
+.surfaces {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
}
-.cardNote {
- color: var(--vault-text-muted);
+.surface {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
}
-.cardSkeleton {
- height: 1.2em;
- width: 60%;
+.srOnly {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ white-space: nowrap;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
}
-.addresses {
- display: flex;
- flex-direction: column;
- gap: 11px;
- border-top: 1px solid var(--vault-border-hairline);
- padding-top: 20px;
+.srOnly:focus {
+ outline: none;
}
-.addressesTitle {
- color: var(--vault-text-muted);
+.surface[hidden] {
+ display: none;
}
diff --git a/app/src/pages/AdminPanel.test.tsx b/app/src/pages/AdminPanel.test.tsx
index ad3ef9b..0ecd7a6 100644
--- a/app/src/pages/AdminPanel.test.tsx
+++ b/app/src/pages/AdminPanel.test.tsx
@@ -1,4 +1,12 @@
-import { render, screen, within } from "@testing-library/react"
+import {
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+ within,
+} from "@testing-library/react"
+import type React from "react"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
import { beforeEach, describe, expect, it, vi } from "vitest"
import type * as UseAdminAuthority from "../hooks/useAdminAuthority"
import { type AdminAuthority, type Grant } from "../hooks/useAdminAuthority"
@@ -17,8 +25,20 @@ vi.mock("../hooks/useAdminAuthority", async (importOriginal) => {
vi.mock("../hooks/useWallet", () => ({ useWallet: useWalletMock }))
vi.mock("../components/admin/CycleSection", () => ({
- default: ({ grants }: { grants: Grant[] }) => (
-
Cycle surface for {grants.map((grant) => grant.role).join(", ")}
+ default: ({
+ grants,
+ contracts,
+ active,
+ }: {
+ grants: Grant[]
+ contracts: React.ReactNode
+ active: boolean
+ }) => (
+
+
Cycle surface for {grants.map((grant) => grant.role).join(", ")}
+
+ {contracts}
+
),
}))
@@ -50,14 +70,30 @@ const authority = (overrides: Partial
): AdminAuthority => ({
...overrides,
})
+const routedPanel = (path: string) => (
+
+
+ } />
+ } />
+
+
+)
+
+const renderAt = (path: string) => render(routedPanel(path))
+
+const currentTab = () =>
+ screen
+ .getAllByRole("link")
+ .find((link) => link.getAttribute("aria-current") === "page")?.textContent
+
describe("AdminPanel", () => {
beforeEach(() => {
useWalletMock.mockReturnValue({ address: connectedAddress })
})
- it("tells a disconnected wallet to connect, with no cards and no identity line", () => {
+ it("tells a disconnected wallet to connect, with no tabs and no identity line", () => {
useAdminAuthorityMock.mockReturnValue(authority({ status: "disconnected" }))
- render()
+ renderAt("/admin")
expect(
screen.getByText("Connect a wallet to operate this vault."),
@@ -68,7 +104,7 @@ describe("AdminPanel", () => {
it("shows a pending skeleton while checking, with no identity line", () => {
useAdminAuthorityMock.mockReturnValue(authority({ status: "checking" }))
- render()
+ renderAt("/admin")
expect(screen.getAllByRole("progressbar")).toHaveLength(2)
expect(screen.queryByText(/GCON/)).toBeNull()
@@ -76,7 +112,7 @@ describe("AdminPanel", () => {
it("reports when the vault's authorities could not be read, with no identity line", () => {
useAdminAuthorityMock.mockReturnValue(authority({ status: "unreadable" }))
- render()
+ renderAt("/admin")
expect(
screen.getByText("Could not read the vault's authorities."),
@@ -85,27 +121,58 @@ describe("AdminPanel", () => {
})
it("tells an address with no role it holds no authority, listing just the shortened address", () => {
- useAdminAuthorityMock.mockReturnValue(
- authority({
- status: "ready",
- addresses: {
- oracle: "CORACLE",
- shareToken: "CTOKEN",
- identityVerifier: "CVERIFIER",
- },
- }),
- )
- render()
+ useAdminAuthorityMock.mockReturnValue(authority({ status: "ready" }))
+ renderAt("/admin")
expect(
screen.getByText("This address holds no authority on this vault."),
).toBeTruthy()
- expect(screen.getByText("Addresses")).toBeTruthy()
- expect(screen.getByText("Oracle")).toBeTruthy()
expect(screen.getByText("GCON...7890")).toBeTruthy()
+ expect(screen.getByText("Contracts").closest("details")?.open).toBe(false)
})
- it("renders a card per held surface, in Cycle · Compliance · Emergency · Configuration · Governance order", () => {
+ it.each(["/admin/cycle", "/admin/compliance"])(
+ "keeps the contract addresses in a closed Contracts disclosure on %s",
+ (path) => {
+ const manager = holderOf("vault manager")
+ const compliance = holderOf("share-token compliance")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["cycle", "compliance"]),
+ grantedBy: {
+ ...emptyGrantedBy,
+ cycle: [manager],
+ compliance: [compliance],
+ },
+ grants: [manager, compliance],
+ addresses: {
+ oracle: "CORACLE",
+ shareToken: "CTOKEN",
+ identityVerifier: "CVERIFIER",
+ },
+ }),
+ )
+ renderAt(path)
+
+ const disclosure = within(screen.getByRole("region"))
+ .getByText("Contracts")
+ .closest("details")
+ expect(disclosure?.open).toBe(false)
+ expect(within(disclosure!).getByText("Oracle")).toBeTruthy()
+ expect(within(disclosure!).getByText("Identity verifier")).toBeTruthy()
+ },
+ )
+
+ it("keeps the page-level states free of surface tabs", () => {
+ useAdminAuthorityMock.mockReturnValue(authority({ status: "checking" }))
+ renderAt("/admin/cycle")
+
+ expect(screen.queryByRole("navigation")).toBeNull()
+ expect(screen.queryAllByRole("heading", { level: 2 })).toHaveLength(0)
+ })
+
+ it("tabs only the held surfaces, in Cycle · Compliance · Emergency · Configuration · Governance order", () => {
const manager = holderOf("vault manager")
const guardian = holderOf("vault guardian")
const oracleGuardian = holderOf("oracle guardian")
@@ -123,17 +190,15 @@ describe("AdminPanel", () => {
grants: [manager, guardian, oracleGuardian, governance],
}),
)
- render()
+ renderAt("/admin/emergency")
- const headings = screen.getAllByRole("heading", { level: 2 })
- expect(headings.map((heading) => heading.textContent)).toEqual([
- "Cycle",
- "Emergency",
- "Governance",
- ])
+ const nav = screen.getByRole("navigation", { name: "Admin surfaces" })
+ expect(nav.textContent).toBe("CycleEmergencyGovernance")
+ expect(currentTab()).toBe("Emergency")
expect(
- screen.getByText("Granted by vault guardian, oracle guardian"),
- ).toBeTruthy()
+ screen.getAllByRole("heading", { level: 2 }).map((h) => h.textContent),
+ ).toEqual(["Emergency"])
+ expect(screen.queryByText(/Granted by/)).toBeNull()
expect(
screen.queryByText("This address holds no authority on this vault."),
).toBeNull()
@@ -144,7 +209,149 @@ describe("AdminPanel", () => {
).toBeTruthy()
})
- it("names the signature standing on the identity line and on the cards", () => {
+ it("opens the first held surface at /admin", () => {
+ const guardian = holderOf("vault guardian")
+ const governance = holderOf("vault governance")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["governance", "emergency"]),
+ grantedBy: {
+ ...emptyGrantedBy,
+ emergency: [guardian],
+ governance: [governance],
+ },
+ grants: [guardian, governance],
+ }),
+ )
+ renderAt("/admin")
+
+ expect(currentTab()).toBe("Emergency")
+ expect(screen.getByRole("heading", { level: 2 }).textContent).toBe(
+ "Emergency",
+ )
+ })
+
+ it("redirects a surface the wallet does not hold to the first held one, showing nothing of it", () => {
+ const compliance = holderOf("share-token compliance")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["compliance"]),
+ grantedBy: { ...emptyGrantedBy, compliance: [compliance] },
+ grants: [compliance],
+ }),
+ )
+ renderAt("/admin/cycle")
+
+ expect(currentTab()).toBe("Compliance")
+ expect(screen.queryByRole("heading", { name: "Cycle" })).toBeNull()
+ expect(screen.queryByText(/Cycle surface/)).toBeNull()
+ })
+
+ it("redirects an unknown surface to the first held one", () => {
+ const manager = holderOf("vault manager")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["cycle"]),
+ grantedBy: { ...emptyGrantedBy, cycle: [manager] },
+ grants: [manager],
+ }),
+ )
+ renderAt("/admin/treasury")
+
+ expect(currentTab()).toBe("Cycle")
+ expect(screen.getByRole("heading", { level: 2 }).textContent).toBe("Cycle")
+ })
+
+ it("moves focus to the surface heading when the tab changes, not on first load", () => {
+ const manager = holderOf("vault manager")
+ const compliance = holderOf("share-token compliance")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["cycle", "compliance"]),
+ grantedBy: {
+ ...emptyGrantedBy,
+ cycle: [manager],
+ compliance: [compliance],
+ },
+ grants: [manager, compliance],
+ }),
+ )
+ renderAt("/admin")
+
+ expect(document.activeElement).not.toBe(
+ screen.getByRole("heading", { name: "Cycle" }),
+ )
+
+ fireEvent.click(screen.getByRole("link", { name: "Compliance" }))
+
+ expect(currentTab()).toBe("Compliance")
+ expect(document.activeElement).toBe(
+ screen.getByRole("heading", { name: "Compliance" }),
+ )
+ })
+
+ it("leaves focus alone when losing a surface redirects to another", () => {
+ const manager = holderOf("vault manager")
+ const compliance = holderOf("share-token compliance")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["cycle", "compliance"]),
+ grantedBy: {
+ ...emptyGrantedBy,
+ cycle: [manager],
+ compliance: [compliance],
+ },
+ grants: [manager, compliance],
+ }),
+ )
+ const { rerender } = renderAt("/admin/cycle")
+
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["compliance"]),
+ grantedBy: { ...emptyGrantedBy, compliance: [compliance] },
+ grants: [compliance],
+ }),
+ )
+ rerender(routedPanel("/admin/cycle"))
+
+ expect(currentTab()).toBe("Compliance")
+ expect(document.activeElement).not.toBe(
+ screen.getByRole("heading", { name: "Compliance" }),
+ )
+ })
+
+ it("marks the cycle surface inactive while another tab is shown", () => {
+ const manager = holderOf("vault manager")
+ const compliance = holderOf("share-token compliance")
+ useAdminAuthorityMock.mockReturnValue(
+ authority({
+ status: "ready",
+ surfaces: new Set(["cycle", "compliance"]),
+ grantedBy: {
+ ...emptyGrantedBy,
+ cycle: [manager],
+ compliance: [compliance],
+ },
+ grants: [manager, compliance],
+ }),
+ )
+
+ renderAt("/admin/cycle")
+ expect(screen.getByTestId("cycle-surface").dataset.active).toBe("true")
+ cleanup()
+
+ renderAt("/admin/compliance")
+ expect(screen.getByTestId("cycle-surface").dataset.active).toBe("false")
+ })
+
+ it("names the signature standing of every grant on the identity line", () => {
const governance: Grant = {
role: "vault governance",
authority: "GGOVERNANCEMULTISIG",
@@ -173,27 +380,16 @@ describe("AdminPanel", () => {
grants: [attester, compliance, governance],
}),
)
- render()
+ renderAt("/admin")
expect(
screen.getByText(
"GCON...7890 · oracle attester (1 of 2 signatures) · share-token compliance (weight 1 of threshold 3) · vault governance (signs alone)",
),
).toBeTruthy()
- expect(
- screen.getByText("Granted by vault governance — signs alone"),
- ).toBeTruthy()
- expect(
- screen.getByText("Granted by oracle attester — 1 of 2 signatures"),
- ).toBeTruthy()
- expect(
- screen.getByText(
- "Granted by share-token compliance — weight 1 of threshold 3",
- ),
- ).toBeTruthy()
})
- it("hands the Cycle card every grant that opened it, so its actions follow the wallet's roles", () => {
+ it("hands the Cycle surface every grant that opened it, so its actions follow the wallet's roles", () => {
const manager = holderOf("vault manager")
const treasury = holderOf("vault treasury")
useAdminAuthorityMock.mockReturnValue(
@@ -204,7 +400,7 @@ describe("AdminPanel", () => {
grants: [manager, treasury],
}),
)
- render()
+ renderAt("/admin/cycle")
expect(
screen.getByText("Cycle surface for vault manager, vault treasury"),
@@ -221,9 +417,8 @@ describe("AdminPanel", () => {
grants: [manager],
}),
)
- render()
+ renderAt("/admin")
- expect(screen.getByText("Granted by vault manager")).toBeTruthy()
expect(screen.getByText("GCON...7890 · vault manager")).toBeTruthy()
expect(screen.queryByText("Signer lookup unavailable.")).toBeNull()
})
@@ -242,7 +437,7 @@ describe("AdminPanel", () => {
grants: [governance],
}),
)
- render()
+ renderAt("/admin")
expect(
screen.getByText("GCON...7890 · vault governance (1 of 2 signatures)"),
@@ -253,12 +448,12 @@ describe("AdminPanel", () => {
useAdminAuthorityMock.mockReturnValue(
authority({ status: "ready", signersUnknown: true }),
)
- render()
+ renderAt("/admin")
expect(screen.getAllByText("Signer lookup unavailable.")).toHaveLength(1)
})
- it("shows the cycle surface inside the Cycle card, and only there", () => {
+ it("shows the cycle surface only on the Cycle tab", () => {
const manager = holderOf("vault manager")
const compliance = holderOf("share-token compliance")
useAdminAuthorityMock.mockReturnValue(
@@ -273,30 +468,41 @@ describe("AdminPanel", () => {
grants: [manager, compliance],
}),
)
- render()
+ renderAt("/admin/compliance")
- const cards = screen.getAllByRole("listitem")
- const cycleCard = cards.find(
- (card) => within(card).queryByRole("heading", { name: "Cycle" }) !== null,
- )
- expect(
- within(cycleCard!).getByText("Cycle surface for vault manager"),
- ).toBeTruthy()
- expect(screen.getAllByText(/Cycle surface/)).toHaveLength(1)
+ expect(screen.queryByRole("region", { name: "Cycle" })).toBeNull()
+
+ fireEvent.click(screen.getByRole("link", { name: "Cycle" }))
+
+ expect(screen.getByRole("region", { name: "Cycle" })).toBeTruthy()
+ expect(screen.queryByRole("region", { name: "Compliance" })).toBeNull()
})
- it("shows no cycle surface to a wallet with no Cycle grant", () => {
+ it("keeps work in progress on a surface when switching tabs and back", () => {
+ const manager = holderOf("vault manager")
const compliance = holderOf("share-token compliance")
useAdminAuthorityMock.mockReturnValue(
authority({
status: "ready",
- surfaces: new Set(["compliance"]),
- grantedBy: { ...emptyGrantedBy, compliance: [compliance] },
- grants: [compliance],
+ surfaces: new Set(["cycle", "compliance"]),
+ grantedBy: {
+ ...emptyGrantedBy,
+ cycle: [manager],
+ compliance: [compliance],
+ },
+ grants: [manager, compliance],
}),
)
- render()
+ renderAt("/admin/cycle")
- expect(screen.queryByText("Cycle surface")).toBeNull()
+ fireEvent.change(screen.getByLabelText("Amount"), {
+ target: { value: "250" },
+ })
+ fireEvent.click(screen.getByRole("link", { name: "Compliance" }))
+ fireEvent.click(screen.getByRole("link", { name: "Cycle" }))
+
+ expect((screen.getByLabelText("Amount") as HTMLInputElement).value).toBe(
+ "250",
+ )
})
})
diff --git a/app/src/pages/AdminPanel.tsx b/app/src/pages/AdminPanel.tsx
index f1c558a..e52dad2 100644
--- a/app/src/pages/AdminPanel.tsx
+++ b/app/src/pages/AdminPanel.tsx
@@ -1,11 +1,15 @@
import { shortAddress } from "@stellar-scaffold/app-lib"
-import React from "react"
+import React, { useEffect, useRef } from "react"
+import { Navigate, useParams } from "react-router-dom"
import CycleSection from "../components/admin/CycleSection"
+import Disclosure from "../components/admin/Disclosure"
+import SurfaceTabs from "../components/admin/SurfaceTabs"
import Skeleton from "../components/Skeleton"
import AddressRows, { type AddressRow } from "../components/vault/AddressRows"
import { vaultContractId } from "../config/contracts"
import {
type AdminAddresses,
+ type AdminSurface,
type Grant,
type Standing,
SURFACE_LABELS,
@@ -37,26 +41,76 @@ const describeGrant = (grant: Grant, wallet: string): string =>
? grant.role
: `${grant.role} (${describeStanding(grant.standing)})`
-const describeCardGrant = (grant: Grant, wallet: string): string =>
- isSingleKey(grant, wallet)
- ? grant.role
- : `${grant.role} — ${describeStanding(grant.standing)}`
-
-const AddressesBlock: React.FC<{ addresses: AdminAddresses }> = ({
- addresses,
-}) => (
-
-
- Addresses
-
+const Contracts: React.FC<{ addresses: AdminAddresses }> = ({ addresses }) => (
+
-
+
+ {held.map((surface) => (
+
+
+ {SURFACE_LABELS[surface]}
+
+ {surface === "cycle" ? (
+ }
+ />
+ ) : (
+
+ )}
+
+ ))}
+
+ )
+}
+
const AdminPanel: React.FC = () => {
const { status, surfaces, grantedBy, grants, signersUnknown, addresses } =
useAdminAuthority()
const { address } = useWallet()
+ const held = SURFACE_ORDER.filter((surface) => surfaces.has(surface))
return (
@@ -82,14 +136,10 @@ const AdminPanel: React.FC = () => {
)}
{status === "checking" && (
-
+
+
+
+
)}
{status === "unreadable" && (
@@ -98,44 +148,23 @@ const AdminPanel: React.FC = () => {
)}
- {status === "ready" && surfaces.size === 0 && (
-
- This address holds no authority on this vault.
-
+ {status === "ready" && held.length === 0 && (
+ <>
+
+ This address holds no authority on this vault.
+
+
+
)}
- {status === "ready" && surfaces.size > 0 && (
-
- {SURFACE_ORDER.filter((surface) => surfaces.has(surface)).map(
- (surface) => (
- -
-
- {SURFACE_LABELS[surface]}
-
-
- Granted by{" "}
- {grantedBy[surface]
- .map((grant) => describeCardGrant(grant, address ?? ""))
- .join(", ")}
-
- {surface === "cycle" && (
-
- )}
-
- ),
- )}
-
+ {status === "ready" && held.length > 0 && (
+
)}
-
- {status === "ready" &&
}