ArcAOGaming · Tyler-RNG · Oct 15, 2025 · Oct 15, 2025
diff --git a/src/pages/Mint/components/WalletConnections/WalletConnections.css b/src/pages/Mint/components/WalletConnections/WalletConnections.css
@@ -59,32 +59,65 @@
     z-index: 2;
 }
 
-.wallet-connections-grid {
+/* Split Layout for Arweave/Ethereum Sides */
+.wallet-connections-split {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 24px;
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
     position: relative;
     z-index: 2;
 }
 
+.wallet-connections-side {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 20px;
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid rgba(34, 197, 94, 0.2);
+    border-radius: 16px;
+    transition: all 0.3s ease;
+}
+
+.wallet-connections-side.minimized {
+    padding: 16px;
+    opacity: 0.7;
+}
+
+.wallet-connections-side-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: rgba(34, 197, 94, 1);
+    margin: 0 0 12px 0;
+    text-align: center;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.wallet-connections-side-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
 /* Individual Connection Cards */
 .wallet-connection-card {
     background: rgba(15, 23, 42, 0.7);
     border: 1px solid rgba(34, 197, 94, 0.3);
     border-radius: 16px;
-    padding: 24px;
+    padding: 20px;
     backdrop-filter: blur(8px);
     transition: all 0.3s ease;
     text-align: left;
+    position: relative;
 }
 
-.wallet-connection-card {
-    position: relative;
-    min-height: 300px;
+.wallet-connection-card-minimized {
+    padding: 16px;
+    min-height: auto;
 }
 
 .wallet-connection-card.modal-open {
-    min-height: 600px;
     z-index: 1000000;
 }
 
@@ -395,12 +428,14 @@
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
-    .wallet-connections-grid {
+@media (max-width: 1024px) {
+    .wallet-connections-split {
         grid-template-columns: 1fr;
-        gap: 20px;
+        gap: 24px;
     }
+}
 
+@media (max-width: 768px) {
     .wallet-connections-card {
         padding: 24px;
         margin: 24px 16px;
@@ -411,7 +446,15 @@
     }
 
     .wallet-connection-card {
-        padding: 20px;
+        padding: 16px;
+    }
+
+    .wallet-connections-side {
+        padding: 16px;
+    }
+
+    .wallet-connections-side-title {
+        font-size: 1rem;
     }
 }
 

diff --git a/src/pages/Mint/components/WalletConnections/WalletConnections.tsx b/src/pages/Mint/components/WalletConnections/WalletConnections.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
-import { ArweaveConnection, STETHConnection, DAIConnection, USDSConnection, GameYieldConnection } from './components';
+import { ArweaveConnection, STETHConnection, DAIConnection, USDSConnection, GameYieldConnection, HyperbeamTokenBalance } from './components';
+import { useArweaveAOWallet } from '../../../../shared/contexts/ArweaveAOWallet';
+import { useAppKitAccount } from '@reown/appkit/react';
 import './WalletConnections.css';
 
 const WalletConnections: React.FC = () => {
+    const { isConnected: isArweaveConnected } = useArweaveAOWallet();
+    const { isConnected: isEthConnected } = useAppKitAccount();
+
     return (
         <div className="wallet-connections-interface">
             <div className="wallet-connections-card">
@@ -11,11 +16,25 @@ const WalletConnections: React.FC = () => {
                     Connect your wallets to view balances and manage your deposits across different networks for the fair launch.
                 </p>
 
-                <div className="wallet-connections-grid">
-                    <ArweaveConnection />
-                    <STETHConnection />
-                    <DAIConnection />
-                    <USDSConnection />
+                <div className="wallet-connections-split">
+                    {/* Arweave Side */}
+                    <div className={`wallet-connections-side ${!isArweaveConnected ? 'minimized' : ''}`}>
+                        <h3 className="wallet-connections-side-title">Arweave Network</h3>
+                        <div className="wallet-connections-side-content">
+                            <HyperbeamTokenBalance />
+                            <ArweaveConnection />
+                        </div>
+                    </div>
+
+                    {/* Ethereum Side */}
+                    <div className={`wallet-connections-side ${!isEthConnected ? 'minimized' : ''}`}>
+                        <h3 className="wallet-connections-side-title">Ethereum Network</h3>
+                        <div className="wallet-connections-side-content">
+                            <STETHConnection />
+                            <DAIConnection />
+                            <USDSConnection />
+                        </div>
+                    </div>
                 </div>
 
                 <div className="game-yield-section">

diff --git a/src/pages/Mint/components/WalletConnections/components/ArweaveConnection.tsx b/src/pages/Mint/components/WalletConnections/components/ArweaveConnection.tsx
@@ -21,6 +21,31 @@ const ArweaveConnection: React.FC = () => {
         return `${addr.slice(0, 3)}...${addr.slice(-3)}`;
     };
 
+    // If not connected, show minimized view
+    if (!isConnected) {
+        return (
+            <div className="wallet-connection-card wallet-connection-card-minimized">
+                <div className="wallet-connection-header">
+                    <div className="wallet-connection-icon">
+                        <img src="/arweave glyph (light).svg" alt="Arweave" />
+                    </div>
+                    <div>
+                        <h3 className="wallet-connection-title">Arweave Holdings</h3>
+                        <p className="wallet-connection-network">Arweave Network</p>
+                    </div>
+                </div>
+
+                <button
+                    className="wallet-connect-button wallet-connect-button-arweave"
+                    onClick={handleConnect}
+                >
+                    <FlipLogo size="medium" />
+                    <span>Connect AO</span>
+                </button>
+            </div>
+        );
+    }
+
     return (
         <div className="wallet-connection-card">
             <div className="wallet-connection-header">

diff --git a/src/pages/Mint/components/WalletConnections/components/DAIConnection.tsx b/src/pages/Mint/components/WalletConnections/components/DAIConnection.tsx
@@ -194,6 +194,44 @@ const DAIConnection: React.FC = () => {
     const maxUnstakeAmount = stakingBalance.stakedAmount ?
         daiStaking.formatAmount(stakingBalance.stakedAmount) : '0';
 
+    // Check if should show consolidated/minimized view
+    const hasDeposits = stakingBalance.stakedAmount && parseFloat(daiStaking.formatAmount(stakingBalance.stakedAmount)) > 0;
+    const shouldMinimize = !isConnected || (!hasDeposits && !stakingBalance.isLoading);
+
+    // If minimized, show compact view
+    if (shouldMinimize) {
+        return (
+            <div className="wallet-connection-card wallet-connection-card-minimized">
+                <div className="wallet-connection-header">
+                    <div className="wallet-connection-icon">
+                        <img src="/dai-logo.png" alt="DAI" />
+                    </div>
+                    <div>
+                        <h3 className="wallet-connection-title">DAI Deposits</h3>
+                        <p className="wallet-connection-network">Ethereum Network</p>
+                    </div>
+                </div>
+
+                {!isConnected ? (
+                    <button
+                        className="wallet-connect-button wallet-connect-button-ethereum"
+                        onClick={handleConnect}
+                    >
+                        <img src="/ethereum-logo.svg" alt="Ethereum" style={{ width: '16px', height: '16px' }} />
+                        <span>Connect Ethereum</span>
+                    </button>
+                ) : (
+                    <div className="wallet-connection-status">
+                        <div className="connection-status-connected">
+                            <span>🟢</span>
+                            <span>No Deposits</span>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
     return (
         <div className={`wallet-connection-card ${isModalOpen ? 'modal-open' : ''}`}>
             <div className="wallet-connection-header">

diff --git a/src/pages/Mint/components/WalletConnections/components/HyperbeamTokenBalance.tsx b/src/pages/Mint/components/WalletConnections/components/HyperbeamTokenBalance.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { useArweaveAOWallet } from '../../../../../shared/contexts/ArweaveAOWallet';
+import { CONTRACT_ADDRESSES } from '../../../../../shared/constants';
+import FlipLogo from './FlipLogo';
+
+const HyperbeamTokenBalance: React.FC = () => {
+    const { isConnected, address, connect, disconnect } = useArweaveAOWallet();
+    const [balance, setBalance] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (isConnected && address) {
+            fetchBalance();
+        } else {
+            setBalance(null);
+            setError(null);
+        }
+    }, [isConnected, address]);
+
+    const fetchBalance = async () => {
+        if (!address) return;
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            const url = `https://state-2.forward.computer/${CONTRACT_ADDRESSES.GAME_TOKEN}~process@1.0/compute/balances/${address}`;
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.text();
+
+            // Remove 12 decimals from the string
+            // Assuming the response is a string number like "1000000000000000"
+            // We want to remove the last 18 digits and format it properly
+            if (data && data.trim()) {
+                const balanceStr = data.trim();
+                // Convert to number, divide by 10^18, then format
+                const balanceNum = BigInt(balanceStr);
+                const divisor = BigInt(10 ** 18);
+                const wholePart = balanceNum / divisor;
+                const fractionalPart = balanceNum % divisor;
+
+                // Format with up to 4 decimal places
+                const formattedBalance = `${wholePart}.${fractionalPart.toString().padStart(12, '0').slice(0, 4)}`;
+                setBalance(formattedBalance);
+            } else {
+                setBalance('0.0000');
+            }
+        } catch (err) {
+            console.error('Error fetching Hyperbeam balance:', err);
+            setError('Failed to load balance');
+            setBalance(null);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleConnect = async () => {
+        try {
+            await connect();
+        } catch (error) {
+            console.error('Failed to connect Arweave wallet:', error);
+        }
+    };
+
+    const handleDisconnect = () => {
+        disconnect();
+    };
+
+    const formatAddress = (addr: string) => {
+        return `${addr.slice(0, 3)}...${addr.slice(-3)}`;
+    };
+
+    return (
+        <div className="wallet-connection-card">
+            <div className="wallet-connection-header">
+                <div className="wallet-connection-icon">
+                    <img src="/game-token.png" alt="GAME Token" />
+                </div>
+                <div>
+                    <h3 className="wallet-connection-title">Hyperbeam Token Balance</h3>
+                    <p className="wallet-connection-network">AO Network</p>
+                </div>
+            </div>
+
+            <div className="wallet-connection-status">
+                {isConnected ? (
+                    <div className="connection-status-connected">
+                        <span>🟢</span>
+                        <span>Connected</span>
+                        {address && (
+                            <span className="connection-address">
+                                {formatAddress(address)}
+                            </span>
+                        )}
+                    </div>
+                ) : (
+                    <div className="connection-status-disconnected">
+                        <span>🔴</span>
+                        <span>Not Connected</span>
+                    </div>
+                )}
+            </div>
+
+            <div className="wallet-connection-balances">
+                <div className="balance-item">
+                    <span className="balance-label">GAME Balance</span>
+                    <span className="balance-value">
+                        {!isConnected ? (
+                            <span className="balance-placeholder">--</span>
+                        ) : isLoading ? (
+                            <span className="balance-loading">Loading...</span>
+                        ) : error ? (
+                            <span className="balance-placeholder">N/A</span>
+                        ) : (
+                            `${balance || '0.0000'} GAME`
+                        )}
+                    </span>
+                </div>
+            </div>
+
+            {!isConnected ? (
+                <button
+                    className="wallet-connect-button wallet-connect-button-arweave"
+                    onClick={handleConnect}
+                >
+                    <FlipLogo size="medium" />
+                    <span>Connect AO</span>
+                </button>
+            ) : (
+                <button
+                    className="wallet-disconnect-button"
+                    onClick={handleDisconnect}
+                >
+                    Disconnect Wallet
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default HyperbeamTokenBalance;