feat: create burnner wallet

client/src/components/ControlWindows/BurnerAccount.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useDojo } from '../../dojo/useDojo'
+import "../../styles/BurnerWallet.scss";
+
+
+export default function BurnerAccount() {
+  const { account } = useDojo()
+  console.log(account.account, "selected burner wallet")
+
+  return (
+      <div className="burner-container">
+        <div className="burner-title">{`Burners Deployed: ${account.count}`}</div>
+        <div className="signer-select">
+          <label htmlFor="signer-select">Select Signer:</label>
+          <select
+            id="signer-select"
+            value={account ? account.account.address : ""}
+            onChange={(e) => account.select(e.target.value)}
+          >
+            {account?.list().map((account, index) => (
+              <option value={account.address} key={index}>
+                {account.address}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <button
+            className="clear-button"
+            onClick={() => account.clear()}
+          >
+            Clear Burners
+          </button>
+        </div>
+      </div>
+
+
+  )
+}

client/src/components/ControlWindows/GameAccount.tsx

@@ -13,9 +13,16 @@ import {
   convertHexToText,
   getGameProfilesFromAddress
 } from "../../utils/helpers";
+import BurnerAccount from "./BurnerAccount";
 
 const ConnectWallet = () => {
   const { connectors, connect } = useConnect();
+  const { account } = useDojo()
+
+
+
+
+
 
   return (
     <div className="wallet">
@@ -32,7 +39,22 @@ const ConnectWallet = () => {
             </div>
           );
         })}
+
       </div>
+
+      <div
+        onClick={() => account.create()}
+        className="wallet-name-btn"
+      >
+        <p> {account?.isDeploying
+          ? "Deploying Burner..."
+          : "Create Burner"}</p>
+      </div>
+
+      {
+        account.count > 0 && <BurnerAccount />
+      }
+
     </div>
   );
 };

client/src/styles/BurnerWallet.scss

@@ -0,0 +1,61 @@
+.burner-container {
+    background-color: #2d3748;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    padding: 1rem;
+
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    width: 100%;
+
+    .burner-title {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+
+    }
+
+    .signer-select {
+        margin-bottom: 0.75rem;
+
+        label {
+            display: block;
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: #d1d5db;
+            margin-bottom: 0.25rem;
+        }
+
+        select {
+            width: 100%;
+            padding: 0.25rem 0.5rem;
+
+            font-size: 0.875rem;
+            color: #e2e8f0;
+            background-color: #4a5568;
+            border: 1px solid #4a5568;
+            border-radius: 0.375rem;
+            outline: none;
+            transition: ring 0.2s ease-in-out;
+
+            &:focus {
+                ring: 2px solid #3b82f6;
+            }
+        }
+    }
+
+    .clear-button {
+        width: 100%;
+        background-color: #e53e3e;
+        color: #ffffff;
+        font-weight: bold;
+        padding: 0.25rem 0.5rem;
+
+        border-radius: 0.375rem;
+        transition: background-color 0.3s ease-in-out;
+
+        &:hover {
+            background-color: #c53030;
+        }
+    }
+}

client/src/styles/GameAccount.scss

@@ -86,6 +86,20 @@
   }
 }
 
+.wallet{
+  .burner-btn {
+    margin-top: 20px;
+
+  }
+
+  .wallet-name-btn{
+    padding-top: 10px;
+    font-size: 15px;
+    cursor: pointer;
+    text-transform: capitalize;
+  }
+}
+
 .player-stats {
   padding: 16px 0;
   display: flex;