Feat: delete button for contracts

src/app/containers/Contracts.ts

@@ -25,14 +25,13 @@ export function useContracts() {
   };
 
   const addContract = (contract: Contract) => {
-    var newContracts;
     setContracts((prevContracts) => {
-      newContracts = [...prevContracts, contract].sort((a, b) =>
+      const newContracts = [...prevContracts, contract].sort((a, b) =>
         a.name.localeCompare(b.name)
       );
+      localStorage.setItem("contracts", JSON.stringify(newContracts));
       return newContracts;
     });
-    localStorage.setItem("contracts", JSON.stringify(newContracts));
   };
 
   const overwriteContract = (contracts: Contract[]) => {
@@ -102,6 +101,17 @@ export function useContracts() {
     );
   };
 
+  const deleteContract = (idx: number) => {
+    setSelectedIdx(null);
+    setContracts((prevContracts) => {
+      const newContracts = prevContracts.filter((_, i) => i !== idx);
+      localStorage.setItem("contracts", JSON.stringify(newContracts));
+      return newContracts;
+    });
+  };
+
+
+
   return {
     contracts,
     addContract,
@@ -111,6 +121,7 @@ export function useContracts() {
     overwriteContract,
     upsertByPath,
     removeByPath,
+    deleteContract,
     selectedIdx,
     selectedContract,
     setSelectedIdx,

src/app/features/sidebar/ContractManagementButtons.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "react95";
+import Contracts from "../../containers/Contracts";
+
+const ButtonContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  margin-left: 8px;
+`;
+
+const SmallButton = styled(Button)`
+  padding: 2px 6px;
+  font-size: 11px;
+  min-width: auto;
+  height: 20px;
+`;
+
+
+
+const ContractManagementButtons = () => {
+  const { contracts, selectedIdx, selectedContract, deleteContract } = Contracts.useContainer();
+
+  const handleDelete = () => {
+    if (selectedIdx !== null && selectedContract) {
+      const confirmDelete = window.confirm(`Are you sure you want to delete "${selectedContract.name}"?`);
+      if (confirmDelete) {
+        deleteContract(selectedIdx);
+      }
+    }
+  };
+
+
+
+  // Only show buttons if there are contracts and one is selected
+  if (contracts.length === 0 || selectedIdx === null) {
+    return null;
+  }
+
+  return (
+    <ButtonContainer>
+      <SmallButton onClick={handleDelete}>
+        Delete
+      </SmallButton>
+    </ButtonContainer>
+  );
+};
+
+export default ContractManagementButtons;

src/app/features/sidebar/Sidebar.tsx

@@ -6,6 +6,7 @@ import AddContractBtn from "../add-contract/AddContractBtn";
 import Contracts from "../../containers/Contracts";
 import ContractItem from "./ContractItem";
 import ConnectOptions from "../connection/ConnectOptions";
+import ContractManagementButtons from "./ContractManagementButtons";
 
 const Container = styled.div`
   width: 300px;
@@ -41,13 +42,22 @@ const FilesContainer = styled.div`
   height: 100%;
 `;
 
+const ContractsHeader = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
 const Sidebar = () => {
   const { contracts } = Contracts.useContainer();
   return (
     <Container>
       <ConnectOptions />
       <ContractsSection>
-        <div>Contracts:</div>
+        <ContractsHeader>
+          <div>Contracts:</div>
+          <ContractManagementButtons />
+        </ContractsHeader>
         <FilesCutout shadow={false}>
           <FilesContainer className="contract-list">
             {contracts.map((c, i) => (