refactor: update file structure and remove unused components; enhance wallet provider configuration

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+client/node_modules
 /.pnp
 .pnp.*
 .yarn/*
@@ -14,7 +14,7 @@
 /coverage
 
 # next.js
-/.next/
+client/.next/
 /out/
 
 # production

client/app/arena/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import React from 'react'
+import { StoneButton } from '../components/StoneButton'
+import { ConnectWallet } from '../components/wallet/ConnectWallet'
+import { MintNFT } from '../components/wallet/MintNFT'
+import { StarknetProvider } from '../components/wallet/StarknetProvider'
+
+export default function Arena() {
+
+    const handleStats = () => { };
+
+    return (
+        <StarknetProvider>
+            <div className="page-container">
+                <div className="top-right animate-fadeIn">
+                    <ConnectWallet />
+                </div>
+
+                <div className="content-container animate-fadeIn">
+                    <MintNFT />
+                    <div className="flex flex-col gap-4">
+                        <StoneButton onClick={handleStats}>
+                            Stats
+                        </StoneButton>
+                        <StoneButton>
+                            Play
+                        </StoneButton>
+                    </div>
+                </div>
+            </div>
+        </StarknetProvider >
+    )
+}
+

client/app/components/FightButton.tsx

@@ -0,0 +1,37 @@
+"use client"
+import { useRouter } from 'next/navigation';
+interface FightButtonProps {
+    children: React.ReactNode
+    primary?: boolean
+}
+
+export function FightButton({ children, primary }: FightButtonProps) {
+    const router = useRouter();
+
+    const onClick = () => {
+        router.push('/arena');
+    }
+
+    return (
+        <button
+            onClick={onClick}
+            className={`
+          stone-button
+          px-8 py-4
+          roman-title
+          text-xl
+          font-bold
+          rounded
+          transition-all
+          duration-300
+          ${primary ? 'text-gold' : 'text-gold border-opacity-50'}
+          hover:border-opacity-100
+          hover:shadow-lg
+          hover:shadow-gold/20
+        `}
+        >
+            {children}
+        </button>
+    )
+}
+

client/app/components/StoneButton.tsx

@@ -0,0 +1,30 @@
+interface StoneButtonProps {
+    children: React.ReactNode
+    primary?: boolean
+    onClick?: () => void
+}
+
+export function StoneButton({ children, primary, onClick }: StoneButtonProps) {
+    return (
+        <button
+            onClick={onClick}
+            className={`
+          stone-button
+          px-8 py-4
+          roman-title
+          text-xl
+          font-bold
+          rounded
+          transition-all
+          duration-300
+          ${primary ? 'text-gold' : 'text-gold border-opacity-50'}
+          hover:border-opacity-100
+          hover:shadow-lg
+          hover:shadow-gold/20
+        `}
+        >
+            {children}
+        </button>
+    )
+}
+

client/app/components/wallet/ConnectWallet.tsx

@@ -1,35 +1,40 @@
 "use client"
 import { useAccount, useConnect, useDisconnect } from '@starknet-react/core'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import ControllerConnector from '@cartridge/connector/controller'
-import { Button } from '@chakra-ui/react' // need to add to doc 
+import { StoneButton } from '../StoneButton'
 
 export function ConnectWallet() {
     const { connect, connectors } = useConnect()
     const { disconnect } = useDisconnect()
-    const { address } = useAccount()
+    const { address, connector } = useAccount()
     const controller = connectors[0] as ControllerConnector
     const [username, setUsername] = useState<string>()
 
+    const handleClick = useCallback(() => {
+        if (!controller) {
+            console.error("Connector not initialized");
+            return;
+        }
+        controller.controller.openProfile("inventory");
+    }, [connector])
+
     useEffect(() => {
         if (!address) return
         controller.username()?.then((n) => setUsername(n))
     }, [address, controller])
 
     return (
         <div>
-            {address && (
+            {address ? (
                 <>
-                    <p>Account: {address}</p>
-                    {username && <p>Username: {username}</p>}
+                    <StoneButton onClick={() => disconnect()}>Disconnect</StoneButton>
+                    <StoneButton onClick={handleClick}>My account</StoneButton>
                 </>
-            )}
-            {address ? (
-                <Button onClick={() => disconnect()}>Disconnect</Button>
             ) : (
-                <Button onClick={() => connect({ connector: controller })}>
+                <StoneButton onClick={() => connect({ connector: controller })}>
                     Connect
-                </Button>
+                </StoneButton>
             )}
         </div>
     )

client/app/components/wallet/MintNFT.tsx

@@ -0,0 +1,64 @@
+"use client"
+import { useAccount, useExplorer } from '@starknet-react/core'
+import { useCallback, useState } from 'react'
+import { StoneButton } from '../StoneButton'
+
+const MINT_CONTRACT =
+    '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7'
+
+export const MintNFT = () => {
+    const [submitted, setSubmitted] = useState<boolean>(false)
+    const { account } = useAccount()
+    const explorer = useExplorer()
+    const [txnHash, setTxnHash] = useState<string>()
+
+    const execute = useCallback(
+        async (amount: string) => {
+            if (!account) return
+            setSubmitted(true)
+            setTxnHash(undefined)
+            try {
+                const result = await account.execute([
+                    {
+                        contractAddress: MINT_CONTRACT,
+                        entrypoint: 'approve',
+                        calldata: [account?.address, amount],
+                    },
+                    {
+                        contractAddress: MINT_CONTRACT,
+                        entrypoint: 'mint',
+                        calldata: [account?.address],
+                    },
+                ])
+                setTxnHash(result.transaction_hash)
+            } catch (e) {
+                console.error(e)
+            } finally {
+                setSubmitted(false)
+            }
+        },
+        [account],
+    )
+
+    if (!account) return null
+
+    return (
+        <div>
+            <StoneButton onClick={() => execute('0x1C6BF52634000')} >
+                Mint NFT
+            </StoneButton>
+            {txnHash && (
+                <>
+                    Transaction hash:{' '}
+                    <a
+                        href={explorer.transaction(txnHash)}
+                        target="blank"
+                        rel="noreferrer"
+                    >
+                        {txnHash}
+                    </a>
+                </>
+            )}
+        </div>
+    )
+}

client/app/components/wallet/StarknetProvider.tsx

@@ -32,6 +32,8 @@ const policies: SessionPolicies = {
 const connector = new ControllerConnector({
     policies,
     rpc: 'https://api.cartridge.gg/x/starknet/sepolia',
+    namespace: "gladiastark",
+    slot: "romt",
 })
 
 // Configure RPC provider

client/app/components/wallet/TransferEth.tsx

@@ -43,22 +43,21 @@ export const TransferEth = () => {
     if (!account) return null
 
     return (
-        <div>
-            <h2>Transfer ETH</h2>
+        <div className="transfer-container">
             <Button onClick={() => execute('0x1C6BF52634000')} disabled={submitted}>
                 Transfer 0.005 ETH
             </Button>
             {txnHash && (
-                <p>
-                    Transaction hash:{' '}
+                <div className="transaction-info">
+                    Transaction hash:
                     <a
                         href={explorer.transaction(txnHash)}
-                        target="blank"
+                        target="_blank"
                         rel="noreferrer"
                     >
                         {txnHash}
                     </a>
-                </p>
+                </div>
             )}
         </div>
     )