Update app.py

app.py

@@ -9,7 +9,8 @@ import streamlit.components.v1 as components
 st.set_page_config(layout="wide", page_title="Vivara Remix", page_icon="⚡")
 
 # CSS HACKS TO MAKE IT LOOK LIKE AN IDE
-st.markdown("""
+st.markdown(
+    """
     <style>
         /* Main Background to Dark Gray */
         .stApp { background-color: #1a1a1a; color: #ffffff; }
@@ -50,22 +51,65 @@ st.markdown("""
             font-size: 12px;
         }
     </style>
-""", unsafe_allow_html=True)
+""",
+    unsafe_allow_html=True,
+)
 
 # --- 2. SIDEBAR (FILE EXPLORER) ---
 with st.sidebar:
     st.image("https://api.dicebear.com/7.x/shapes/svg?seed=vivara", width=40)
     st.caption("Vivara Forge v2.0.1")
-    
+
     st.markdown("### 📂 File Explorer")
     st.markdown("📄 **Vivara.sol**")
     st.markdown("📄 *Token.sol*")
     st.markdown("📁 *artifacts/*")
-    
+
+                <style>
+                    /* Strip Streamlit chrome */
+                    header { visibility: hidden; }
+                    footer { visibility: hidden; }
+                    .stApp { background-color: #0e1117; color: #e6e8ec; }
+                    section[data-testid="stSidebar"] { background-color: #141821; border-right: 1px solid #1f2530; }
+                    .block-container { padding-top: 0.5rem; padding-bottom: 0rem; }
+
+                    /* Editor Look */
+                    .stTextArea textarea {
+                        font-family: 'JetBrains Mono', 'Courier New', monospace;
+                        background-color: #1e1e1e;
+                        color: #d4d4d4;
+                        border: 1px solid #333;
+                    }
+
+                    /* Buttons Remix Style */
+                    .stButton button {
+                        background-color: #2f3136;
+                        color: white;
+                        border: 1px solid #444;
+                        border-radius: 4px;
+                        font-size: 14px;
+                    }
+                    .stButton button:hover { background-color: #36393f; border-color: #00ff41; }
+
+                    /* Terminal Area */
+                    .terminal {
+                        background-color: #000000;
+                        color: #00ff41;
+                        font-family: 'JetBrains Mono', monospace;
+                        padding: 10px;
+                        border-top: 1px solid #333;
+                        height: 150px;
+                        overflow-y: scroll;
+                        font-size: 12px;
+                    }
+                </style>
     st.divider()
-    
+
     st.markdown("### ⚙️ Environment")
-    env = st.selectbox("Environment", ["Injected Provider - MetaMask", "Vivara VM (London)", "Vivara VM (Berlin)"])
+    env = st.selectbox(
+        "Environment",
+        ["Injected Provider - MetaMask", "Vivara VM (London)", "Vivara VM (Berlin)"],
+    )
     st.text_input("Account", value="0x... (Connect Wallet)", disabled=True)
     st.number_input("Gas Limit", value=3000000)
     st.text_input("Value (Wei)", value="0")
@@ -85,31 +129,40 @@ import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
 // 🦁 THE VIVARA PROTOCOL
 contract VivaraToken is ERC20 {
     constructor() ERC20("Vivara", "VIVR") {
+                st.markdown("### 🦊 Wallet")
+                st.caption("Use injected MetaMask in browser")
         _mint(msg.sender, 1000000000 * 10**18);
     }
 }"""
-    code = st.text_area("Write Solidity Code", value=default_sol, height=550, label_visibility="collapsed")
+    code = st.text_area(
+        "Write Solidity Code",
+        value=default_sol,
+        height=550,
+        label_visibility="collapsed",
+    )
 
 # --- RIGHT: TOOLS PANEL ---
 with col_tools:
     tab_compile, tab_deploy = st.tabs(["Compile", "Deploy"])
-    
+
     # TAB 1: COMPILER
     with tab_compile:
         st.markdown("##### Solidity Compiler")
         st.selectbox("Compiler Version", ["0.8.20", "0.8.19", "0.8.18"])
         st.checkbox("Auto compile", value=True)
         st.checkbox("Enable Optimization")
-        
+
         if st.button("Compile Vivara.sol", type="primary", use_container_width=True):
             with st.spinner("Compiling..."):
                 try:
-                    install_solc('0.8.20')
-                    compiled = compile_source(code, output_values=['abi', 'bin'], solc_version='0.8.20')
+                    install_solc("0.8.20")
+                    compiled = compile_source(
+                        code, output_values=["abi", "bin"], solc_version="0.8.20"
+                    )
                     contract_id, iface = list(compiled.items())[-1]
-                    st.session_state['abi'] = iface['abi']
-                    st.session_state['bin'] = iface['bin']
-                    st.session_state['name'] = contract_id
+                    st.session_state["abi"] = iface["abi"]
+                    st.session_state["bin"] = iface["bin"]
+                    st.session_state["name"] = contract_id
                     st.success(f"✅ Compiled")
                 except Exception as e:
                     st.error("Compilation Failed")
@@ -118,14 +171,14 @@ with col_tools:
     # TAB 2: DEPLOYER
     with tab_deploy:
         st.markdown("##### Deploy & Run")
-        
-        if 'bin' in st.session_state:
+
+        if "bin" in st.session_state:
             st.markdown(f"**Contract:** {st.session_state['name']}")
-            
+
             # THE ORANGE BUTTON (Remix Style)
-            abi_json = json.dumps(st.session_state['abi'])
-            bytecode = st.session_state['bin']
-            
+            abi_json = json.dumps(st.session_state["abi"])
+            bytecode = st.session_state["bin"]
+
             html_script = f"""
             <html>
             <head><script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script></head>
@@ -171,7 +224,7 @@ with col_tools:
             </html>
             """
             components.html(html_script, height=100)
-            
+
             st.markdown("---")
             st.caption("Deployed Contracts:")
             st.markdown(f"`{st.session_state['name']} at 0x...`")
@@ -180,11 +233,14 @@ with col_tools:
 
 # --- 4. BOTTOM TERMINAL (LOGS) ---
 st.markdown("#### 📟 Terminal")
-st.markdown("""
+st.markdown(
+    """
 <div class="terminal">
     [INFO] Welcome to Vivara Forge v2.0.1<br>
     [INFO] Connected to Hugging Face Cloud Engine<br>
     [INFO] Environment: Injected Web3<br>
     > _
 </div>
-""", unsafe_allow_html=True)
+""",
+    unsafe_allow_html=True,
+)