+
+ ✓ MCP client connected
+
{callbackDelivered === true && (
-
- Credentials were handed off to your MCP client. You can close
- this tab safely.
+
+ Credentials were handed off to your MCP client. You can close this tab safely.
)}
{callbackDelivered === false && (
-
- The on-chain registration succeeded, but the local MCP login
- listener at http://127.0.0.1:{port}/callback{' '}
- did not accept the callback. Restart the MCP login command and
- try again so credentials can be saved locally.
+
+ The on-chain registration succeeded, but the local MCP login listener at{' '}
+ http://127.0.0.1:{port}/callback did not accept the callback. Restart the MCP login command and try again so credentials can be saved locally.
)}
-
- - Account
- -
-
{payload.accountId}
-
-
-
+
+
+ Account
+ {payload.accountId}
+
+
+
trackEvent('cta_click', { cta: 'mcp_success_dashboard', location: 'connect_mcp' })}
>
Go to dashboard
-
-
+
+
)
}
-// ---------- styles (match Dashboard's neo-brutalism .card pattern) ----------
+// ---------- inline styles for bits the .setup-classic design system doesn't class ----------
+// The page reuses the SetupWizard dark theme (.setup-classic, .setup-classic-*,
+// .card.setup-classic-feature-card, .lp-btn-yellow) so the MCP consent screen is
+// visually identical to the Walrus Memory setup flow. These cover the small inner
+// labels / code / detail rows inside the dark feature card.
+
+const cardLabelStyle: React.CSSProperties = {
+ margin: '0 0 10px',
+ fontFamily: 'var(--font-mono)',
+ fontSize: '0.7rem',
+ fontWeight: 600,
+ textTransform: 'uppercase',
+ letterSpacing: '0.08em',
+ color: '#8f9294',
+}
-const mcpNavBrandStyle: React.CSSProperties = {
- gap: 12,
+const permListStyle: React.CSSProperties = {
+ listStyle: 'none',
+ padding: 0,
+ margin: 0,
+ lineHeight: 2,
+ fontSize: '0.9rem',
+ color: '#faf8f5',
}
-const mcpNavTitleStyle: React.CSSProperties = {
- fontSize: '1rem',
- fontWeight: 700,
- color: '#000',
- lineHeight: 1,
- transform: 'translateY(8px)',
+const codeStyle: React.CSSProperties = {
+ fontFamily: 'var(--font-mono)',
+ fontSize: '0.82em',
+ color: '#cbb6ff',
}
-const pageStyle: React.CSSProperties = {
- minHeight: '100vh',
- background: '#FAF8F5', // same as --color-tusk used by .card / body
- color: '#1a1a1a',
+const dividerStyle: React.CSSProperties = {
+ height: 1,
+ background: '#2a2c2e',
+ margin: '18px 0',
}
-const mainStyle: React.CSSProperties = {
- maxWidth: 640,
- margin: '40px auto',
- padding: '0 24px',
+const detailRowStyle: React.CSSProperties = {
display: 'flex',
flexDirection: 'column',
- gap: 24,
-}
-
-const cardStyle: React.CSSProperties = {
- background: '#fff',
- border: '2px solid #000',
- borderRadius: 12,
- padding: 28,
- boxShadow: '4px 4px 0 #000',
-}
-
-const h1Style: React.CSSProperties = {
- fontSize: 22,
- fontWeight: 800,
- margin: '0 0 12px',
- letterSpacing: -0.3,
-}
-
-const h3Style: React.CSSProperties = {
- fontSize: 12,
- fontWeight: 700,
- textTransform: 'uppercase' as const,
- letterSpacing: 0.6,
- color: '#525252',
- marginTop: 20,
- marginBottom: 8,
-}
-
-const ulStyle: React.CSSProperties = {
- listStyle: 'none',
- padding: 0,
- margin: '0 0 8px',
- lineHeight: 1.9,
- fontSize: 14,
+ gap: 2,
+ marginBottom: 12,
}
-const dlStyle: React.CSSProperties = {
- fontSize: 13,
- lineHeight: 1.6,
- margin: '0 0 20px',
- wordBreak: 'break-all' as const,
+const detailLabelStyle: React.CSSProperties = {
+ fontFamily: 'var(--font-mono)',
+ fontSize: '0.7rem',
+ textTransform: 'uppercase',
+ letterSpacing: '0.06em',
+ color: '#8f9294',
}
-const subtleStyle: React.CSSProperties = {
- color: '#525252',
- fontSize: 14,
+const detailValueStyle: React.CSSProperties = {
+ fontFamily: 'var(--font-mono)',
+ fontSize: '0.84rem',
+ color: '#faf8f5',
+ wordBreak: 'break-all',
}
-const primaryButton: React.CSSProperties = {
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center',
- gap: 6,
- padding: '12px 26px',
- background: '#E8FF75',
- color: '#000',
- borderRadius: 12,
- border: '2px solid #000',
- fontSize: '0.94rem',
- fontWeight: 700,
- cursor: 'pointer',
- textDecoration: 'none',
- boxShadow: '3px 3px 0 #000',
+const errorTextStyle: React.CSSProperties = {
+ color: '#ff6b6b',
}