deployable testing

app/.eslintrc.cjs

@@ -14,5 +14,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
   },
 }

app/src/components/cloud.tsx

@@ -1,5 +1,5 @@
 export default function Cloud() {
-    return <div>
-        Cloud
+    return <div className="h-full flex items-center justify-center">
+        <div>Cloud is a work in progress in this version of the IDE</div>
     </div>
 }

app/src/components/deploy.tsx

@@ -20,18 +20,18 @@ const commercialUses = [
     "Allowed-With-Credit"
 ]
 
-// function extractFunctionsFromSwitchCase(src: string) {
-//     // const functionRegex = /function\s+([^\s(]+)\s*\(([^)]*)\)\s*{([^}]*)}/g;
-//     const functionRegex = /case\s+"([^"]+)"/g;
-//     const matches = src.matchAll(functionRegex);
-//     const functions = [];
-
-//     for (const match of matches) {
-//         if (match[1] == "handle") continue
-//         functions.push(match[1])
-//     }
-//     return functions
-// }
+function extractFunctionsFromSwitchCase(src: string) {
+    // const functionRegex = /function\s+([^\s(]+)\s*\(([^)]*)\)\s*{([^}]*)}/g;
+    const functionRegex = /case\s+"([^"]+)"/g;
+    const matches = src.matchAll(functionRegex);
+    const functions = [];
+
+    for (const match of matches) {
+        if (match[1] == "handle") continue
+        functions.push(match[1])
+    }
+    return functions
+}
 
 
 interface DeployState {
@@ -137,7 +137,7 @@ export default function Deploy({ contracts, target, test }: { contracts: contrac
             dispatch({ type: "set_deploy_success", payload: true })
             dispatch({ type: "set_contract_id", payload: contract.contractTxId })
             dispatch({ type: "set_result", payload: "Deployed successfully!\nID: " + contract.contractTxId })
-            newDeployment(state.contractName, contract.contractTxId, state.deployEnv)
+            newDeployment(state.contractName, contract.contractTxId, state.deployEnv, extractFunctionsFromSwitchCase(contracts[state.contractName]["contract.js"]))
             dispatch({ type: "is_error", payload: false })
         } catch (e) {
             console.log(e)

app/src/components/home.tsx

@@ -1,6 +1,40 @@
 export default function Home() {
-    return <div className="text-center h-full flex flex-col gap-1 items-center justify-center">
+    function ContractCard(){
+        return <div className="ring-1 rounded ring-white/50 p-2 px-3 flex flex-col gap-2 hover:bg-white/5">
+            <div className="text-lg">Contract name</div>
+            <button className="relative bg-green-700/40 hover:bg-green-700/80 px-2 rounded hover:w-24 w-14 text-left transition-all duration-300">
+                open
+                <div className="absolute right-2 w-full text-right text-transparent hover:text-white top-0">-&gt;</div>
+            </button>
+        </div>
+    }
+
+    return <div className=" h-full flex flex-col gap-1 items-center justify-center">
         <div className="text-2xl">Welcome to BetterIDE! 🚀</div>
         <div className="text-lg">Your one stop solution for developing smart contracts on Arweave</div>
+
+        <div className="flex flex-col gap-5 justify-start items-start w-full px-10">
+            <div>
+                <div className="text-xl my-1">Recently opened contracts</div>
+                <div className="flex gap-3">
+                    <ContractCard/>
+                    <ContractCard/>
+                    <ContractCard/>
+                    <ContractCard/>
+                </div>
+            </div>
+            <div>
+                <div className="text-xl my-1">Explore contract templates</div>
+                <div className="flex gap-3">
+                    <ContractCard/>
+                    <ContractCard/>
+                    <ContractCard/>
+                    <ContractCard/>
+                </div>
+
+            </div>
+        </div>
+
+
     </div>
-}
+}

app/src/components/settings.tsx

@@ -1,5 +1,13 @@
+import areco from "../assets/arweave/ecosystem.svg"
+
 export default function Settings() {
-    return <div>
-        Settings
+    return <div className="h-full flex flex-col gap-5 items-center justify-center">
+        <img src={areco} className="w-[269px]" draggable={false} />
+        <a href="https://github.com/ankushKun/betterIDE" target="_blank">
+            <div className="flex items-center gap-3 font-semibold text-2xl tracking-widest ring-1 rounded-lg ring-white/20 p-2 hover:bg-white/5">
+                <img src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" className="w-[60px] rounded-full" draggable={false} />
+                <div>View source<br /> on Github</div>
+            </div>
+        </a>
     </div>
 }

app/src/components/showcase.tsx

@@ -1,5 +1,5 @@
 export default function Showcase() {
-    return <div>
-        Showcase
+    return <div className="h-full flex items-center justify-center">
+        <div>Showcase is a work in progress in this version of the IDE</div>
     </div>
 }