diff --git a/src/pages/Mint/components/WalletConnections/WalletConnections.css b/src/pages/Mint/components/WalletConnections/WalletConnections.css index 2ac36a5..b17f4e5 100644 --- 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 index 041bb25..7f97ddb 100644 --- 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 (
@@ -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.

-
- - - - +
+ {/* Arweave Side */} +
+

Arweave Network

+
+ + +
+
+ + {/* Ethereum Side */} +
+

Ethereum Network

+
+ + + +
+
diff --git a/src/pages/Mint/components/WalletConnections/components/ArweaveConnection.tsx b/src/pages/Mint/components/WalletConnections/components/ArweaveConnection.tsx index 48f1e26..e0c2886 100644 --- 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 ( +
+
+
+ Arweave +
+
+

Arweave Holdings

+

Arweave Network

+
+
+ + +
+ ); + } + return (
diff --git a/src/pages/Mint/components/WalletConnections/components/DAIConnection.tsx b/src/pages/Mint/components/WalletConnections/components/DAIConnection.tsx index 74d44a3..2cf4f52 100644 --- 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 ( +
+
+
+ DAI +
+
+

DAI Deposits

+

Ethereum Network

+
+
+ + {!isConnected ? ( + + ) : ( +
+
+ 🟢 + No Deposits +
+
+ )} +
+ ); + } + return (
diff --git a/src/pages/Mint/components/WalletConnections/components/HyperbeamTokenBalance.tsx b/src/pages/Mint/components/WalletConnections/components/HyperbeamTokenBalance.tsx new file mode 100644 index 0000000..3f740a4 --- /dev/null +++ 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(null); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(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 ( +
+
+
+ GAME Token +
+
+

Hyperbeam Token Balance

+

AO Network

+
+
+ +
+ {isConnected ? ( +
+ 🟢 + Connected + {address && ( + + {formatAddress(address)} + + )} +
+ ) : ( +
+ 🔴 + Not Connected +
+ )} +
+ +
+
+ GAME Balance + + {!isConnected ? ( + -- + ) : isLoading ? ( + Loading... + ) : error ? ( + N/A + ) : ( + `${balance || '0.0000'} GAME` + )} + +
+
+ + {!isConnected ? ( + + ) : ( + + )} +
+ ); +}; + +export default HyperbeamTokenBalance; diff --git a/src/pages/Mint/components/WalletConnections/components/STETHConnection.tsx b/src/pages/Mint/components/WalletConnections/components/STETHConnection.tsx index e8800e5..14a9ec6 100644 --- a/src/pages/Mint/components/WalletConnections/components/STETHConnection.tsx +++ b/src/pages/Mint/components/WalletConnections/components/STETHConnection.tsx @@ -194,6 +194,44 @@ const STETHConnection: React.FC = () => { const maxUnstakeAmount = stakingBalance.stakedAmount ? ethStaking.formatAmount(stakingBalance.stakedAmount) : '0'; + // Check if should show consolidated/minimized view + const hasDeposits = stakingBalance.stakedAmount && parseFloat(ethStaking.formatAmount(stakingBalance.stakedAmount)) > 0; + const shouldMinimize = !isConnected || (!hasDeposits && !stakingBalance.isLoading); + + // If minimized, show compact view + if (shouldMinimize) { + return ( +
+
+
+ Ethereum +
+
+

stETH Deposits

+

Ethereum Network

+
+
+ + {!isConnected ? ( + + ) : ( +
+
+ 🟢 + No Deposits +
+
+ )} +
+ ); + } + return (
diff --git a/src/pages/Mint/components/WalletConnections/components/USDSConnection.tsx b/src/pages/Mint/components/WalletConnections/components/USDSConnection.tsx index 2cfe4f8..4053000 100644 --- a/src/pages/Mint/components/WalletConnections/components/USDSConnection.tsx +++ b/src/pages/Mint/components/WalletConnections/components/USDSConnection.tsx @@ -194,6 +194,44 @@ const USDSConnection: React.FC = () => { const maxUnstakeAmount = stakingBalance.stakedAmount ? usdsStaking.formatAmount(stakingBalance.stakedAmount) : '0'; + // Check if should show consolidated/minimized view + const hasDeposits = stakingBalance.stakedAmount && parseFloat(usdsStaking.formatAmount(stakingBalance.stakedAmount)) > 0; + const shouldMinimize = !isConnected || (!hasDeposits && !stakingBalance.isLoading); + + // If minimized, show compact view + if (shouldMinimize) { + return ( +
+
+
+ USDS +
+
+

USDS Deposits

+

Ethereum Network

+
+
+ + {!isConnected ? ( + + ) : ( +
+
+ 🟢 + No Deposits +
+
+ )} +
+ ); + } + return (
diff --git a/src/pages/Mint/components/WalletConnections/components/index.ts b/src/pages/Mint/components/WalletConnections/components/index.ts index ecb4964..0192421 100644 --- a/src/pages/Mint/components/WalletConnections/components/index.ts +++ b/src/pages/Mint/components/WalletConnections/components/index.ts @@ -3,3 +3,4 @@ export { default as STETHConnection } from './STETHConnection'; export { default as DAIConnection } from './DAIConnection'; export { default as USDSConnection } from './USDSConnection'; export { default as GameYieldConnection } from './GameYieldConnection'; +export { default as HyperbeamTokenBalance } from './HyperbeamTokenBalance';