[web] add #network-indicator

juzybits · Oct 20, 2023 · 3ab09a9 · 3ab09a9
1 parent 098a668
commit 3ab09a9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/web/src/App.less b/web/src/App.less
@@ -14,17 +14,29 @@ body {
 }
 
 #page {
+ background-color: #eee;
+ margin: 0 auto;
  max-width: 800px;
  min-height: 100vh;
- margin: 0 auto;
- padding: 1.2em;
- background-color: #eee;
+ padding: 2rem 1.2rem;
+ position: relative;
 }
 
 h1 {
  text-align: center;
 }
 
+#network-indicator {
+ background: #222;
+ border-radius: 6px;
+ color: white;
+ font-family: monospace;
+ padding: 0.15rem 0.4rem;
+ position: absolute;
+ right: 1rem;
+ top: 0.8rem;
+}
+
 .section {
  display: flex;
  flex-direction: column;

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -15,10 +15,11 @@ import { useEffect, useState } from 'react';
 import './App.less';
 import config from './config.json';
 
+const NETWORK = 'devnet';
 const MAX_EPOCH = 2; // keep ephemeral keys active for this many Sui epochs from now (1 epoch ~= 24h)
 
 const suiClient = new SuiClient({
- url: getFullnodeUrl('devnet'),
+ url: getFullnodeUrl(NETWORK),
 });
 
 /* Local storage keys */
@@ -312,6 +313,9 @@ export const App: React.FC = () =>
  const openIdProviders: OpenIdProvider[] = ['google', 'twitch', 'facebook'];
  return (
  <div id='page'>
+ <div id='network-indicator'>
+ <label>{NETWORK}</label>
+ </div>
  <h1>Sui zkLogin demo</h1>
  <div id='login-buttons' className='section'>
  <h2>Log in:</h2>