Stellar XLM Donation System - Standalone<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/stellar-sdk\/11.2.2\/stellar-sdk.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n @keyframes scaleIn {\r\n from {\r\n transform: scale(0);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n body {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\r\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\r\n sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useRef } = React;\r\n\r\n const DonationReferralChart = () => {\r\n const [charts, setCharts] = useState([\r\n { id: 1, donors: [], center: null, isNew: false, isSplitting: false }\r\n ]);\r\n const [rewardedDonors, setRewardedDonors] = useState([]);\r\n const [donorCount, setDonorCount] = useState(1);\r\n const [isAutoFilling, setIsAutoFilling] = useState(false);\r\n const [speed, setSpeed] = useState(500);\r\n const [lastAddedPosition, setLastAddedPosition] = useState(null);\r\n const [showDonorForm, setShowDonorForm] = useState(false);\r\n const [selectedChartId, setSelectedChartId] = useState(null);\r\n const [totalPooled, setTotalPooled] = useState(0);\r\n const [totalRewarded, setTotalRewarded] = useState(0);\r\n const [foundationBalance, setFoundationBalance] = useState(0);\r\n const [paymentVerified, setPaymentVerified] = useState(false);\r\n const [xlmPrice, setXlmPrice] = useState(null);\r\n const [requiredXlm, setRequiredXlm] = useState('0');\r\n const autoFillInterval = useRef(null);\r\n\r\n \/\/ CONFIGURATION - Update these with your actual addresses\r\n const POOL_ADDRESS = 'GDNL3J5WPUA77FQFFPTZOHKQAN77OECRGMRYSVFO7DWZGOSERKW3XCPX';\r\n const FOUNDATION_ADDRESS = 'GCFOUNDATION7WALLET7ADDRESS7PLACEHOLDER';\r\n const HORIZON_URL = 'https:\/\/horizon.stellar.org';\r\n const TARGET_DONATION_USD = 100;\r\n\r\n \/\/ SECURITY: In production, NEVER expose private keys in frontend code\r\n \/\/ This should be handled by a backend service\r\n const PLATFORM_SECRET = ''; \/\/ Leave empty for frontend-only version\r\n\r\n const [formData, setFormData] = useState({\r\n name: '',\r\n email: '',\r\n stellarWallet: '',\r\n amount: '',\r\n transactionHash: ''\r\n });\r\n\r\n useEffect(() => {\r\n fetchXlmPrice();\r\n }, []);\r\n\r\n const fetchXlmPrice = async () => {\r\n try {\r\n const response = await fetch('https:\/\/api.coingecko.com\/api\/v3\/simple\/price?ids=stellar&vs_currencies=usd');\r\n const data = await response.json();\r\n const price = data.stellar.usd;\r\n\r\n setXlmPrice(price);\r\n const xlmNeeded = (TARGET_DONATION_USD \/ price).toFixed(2);\r\n setRequiredXlm(xlmNeeded);\r\n setFormData(prev => ({ ...prev, amount: xlmNeeded }));\r\n } catch (error) {\r\n console.error('Error fetching XLM price:', error);\r\n const fallbackPrice = 0.10;\r\n setXlmPrice(fallbackPrice);\r\n const xlmNeeded = (TARGET_DONATION_USD \/ fallbackPrice).toFixed(2);\r\n setRequiredXlm(xlmNeeded);\r\n setFormData(prev => ({ ...prev, amount: xlmNeeded }));\r\n }\r\n };\r\n\r\n const getSlotPosition = (index) => {\r\n const centerX = 150;\r\n const centerY = 150;\r\n\r\n if (index === 0) return { x: centerX, y: centerY, level: 0 };\r\n\r\n if (index <= 2) {\r\n const angle = (index === 1 ? 180 : 0) * (Math.PI \/ 180);\r\n return {\r\n x: centerX + Math.cos(angle) * 50,\r\n y: centerY + Math.sin(angle) * 50,\r\n level: 1\r\n };\r\n }\r\n\r\n if (index <= 6) {\r\n const angles = [135, 225, 45, 315];\r\n const angle = angles[index - 3] * (Math.PI \/ 180);\r\n return {\r\n x: centerX + Math.cos(angle) * 90,\r\n y: centerY + Math.sin(angle) * 90,\r\n level: 2\r\n };\r\n }\r\n\r\n const angles = [157.5, 112.5, 202.5, 247.5, 22.5, 67.5, 337.5, 292.5];\r\n const angle = angles[index - 7] * (Math.PI \/ 180);\r\n return {\r\n x: centerX + Math.cos(angle) * 125,\r\n y: centerY + Math.sin(angle) * 125,\r\n level: 3\r\n };\r\n };\r\n\r\n const getConnections = () => {\r\n return [\r\n { from: 0, to: 1 }, { from: 0, to: 2 },\r\n { from: 1, to: 3 }, { from: 1, to: 4 },\r\n { from: 2, to: 5 }, { from: 2, to: 6 },\r\n { from: 3, to: 7 }, { from: 3, to: 8 },\r\n { from: 4, to: 9 }, { from: 4, to: 10 },\r\n { from: 5, to: 11 }, { from: 5, to: 12 },\r\n { from: 6, to: 13 }, { from: 6, to: 14 },\r\n ];\r\n };\r\n\r\n const openDonorForm = (chartId) => {\r\n const chart = charts.find(c => c.id === chartId);\r\n if (chart && chart.donors.length < 15 && !chart.isSplitting) {\r\n setSelectedChartId(chartId);\r\n setShowDonorForm(true);\r\n setPaymentVerified(false);\r\n }\r\n };\r\n\r\n const closeDonorForm = () => {\r\n setShowDonorForm(false);\r\n setSelectedChartId(null);\r\n setPaymentVerified(false);\r\n setFormData({ name: '', email: '', stellarWallet: '', amount: '', transactionHash: '' });\r\n };\r\n\r\n const verifyPaymentOnBlockchain = async (stellarWallet, amount) => {\r\n try {\r\n const server = new StellarSdk.Horizon.Server(HORIZON_URL);\r\n\r\n const payments = await server\r\n .payments()\r\n .forAccount(POOL_ADDRESS)\r\n .order('desc')\r\n .limit(20)\r\n .call();\r\n\r\n const matchingPayment = payments.records.find((payment) => {\r\n if (payment.type === 'payment' && payment.asset_type === 'native') {\r\n const paymentAmount = parseFloat(payment.amount);\r\n const expectedAmount = parseFloat(amount);\r\n const fromAddress = payment.from;\r\n\r\n return fromAddress === stellarWallet &&\r\n Math.abs(paymentAmount - expectedAmount) < 0.01;\r\n }\r\n return false;\r\n });\r\n\r\n if (matchingPayment) {\r\n setFormData(prev => ({...prev, transactionHash: matchingPayment.transaction_hash}));\r\n setPaymentVerified(true);\r\n return true;\r\n } else {\r\n alert('Payment not found. Please ensure you sent ' + amount + ' XLM to ' + POOL_ADDRESS);\r\n return false;\r\n }\r\n } catch (error) {\r\n console.error('Payment verification error:', error);\r\n alert('Error verifying payment. Please try again.');\r\n return false;\r\n }\r\n };\r\n\r\n const distributeRewardsAutomatically = async (rewardedDonor, rewardAmount, foundationAmount) => {\r\n \/\/ Note: Automated distribution requires backend integration for security\r\n \/\/ Do NOT expose private keys in frontend code\r\n console.log('\ud83c\udf89 Chart completed! Reward distribution would happen here.');\r\n console.log(`Donor ${rewardedDonor.name} should receive ${rewardAmount.toFixed(2)} XLM`);\r\n console.log(`Foundation should receive ${foundationAmount.toFixed(2)} XLM`);\r\n\r\n \/\/ In production, call your backend API to handle the actual distribution\r\n \/\/ Example:\r\n \/\/ await fetch('\/api\/distribute-rewards', {\r\n \/\/ method: 'POST',\r\n \/\/ body: JSON.stringify({ rewardedDonor, rewardAmount, foundationAmount })\r\n \/\/ });\r\n };\r\n\r\n const handleFormSubmit = async (e) => {\r\n e.preventDefault();\r\n if (selectedChartId && formData.name && formData.email && formData.stellarWallet && formData.amount) {\r\n if (!paymentVerified) {\r\n await verifyPaymentOnBlockchain(formData.stellarWallet, formData.amount);\r\n } else {\r\n addDonor(selectedChartId, formData);\r\n closeDonorForm();\r\n }\r\n }\r\n };\r\n\r\n const addDonor = (chartId, donorData = null) => {\r\n const donor = donorData || {\r\n name: `Donor ${donorCount}`,\r\n email: `donor${donorCount}@email.com`,\r\n stellarWallet: `G${Math.random().toString(36).substring(2, 15).toUpperCase()}`,\r\n amount: (Math.floor(Math.random() * 50) + 10).toString(),\r\n transactionHash: `TX${Math.random().toString(36).substring(2, 15).toUpperCase()}`\r\n };\r\n\r\n setDonorCount(donorCount + 1);\r\n setTotalPooled(prev => prev + parseFloat(donor.amount));\r\n\r\n setCharts(prevCharts => {\r\n return prevCharts.map(chart => {\r\n if (chart.id === chartId && chart.donors.length < 15 && !chart.isSplitting) {\r\n const updatedDonors = [...chart.donors, donor];\r\n setLastAddedPosition({ chartId, position: updatedDonors.length - 1 });\r\n\r\n if (updatedDonors.length === 15) {\r\n setTimeout(() => {\r\n setCharts(prev => prev.map(c =>\r\n c.id === chartId ? { ...c, isSplitting: true } : c\r\n ));\r\n setTimeout(() => splitChart(chartId), 1000);\r\n }, 300);\r\n }\r\n\r\n return { ...chart, donors: updatedDonors };\r\n }\r\n return chart;\r\n });\r\n });\r\n };\r\n\r\n const splitChart = (chartId) => {\r\n setCharts(prevCharts => {\r\n const chart = prevCharts.find(c => c.id === chartId);\r\n if (!chart || chart.donors.length !== 15) return prevCharts;\r\n\r\n const rewardedDonor = chart.donors[0];\r\n\r\n const contributionsFromOthers = chart.donors\r\n .slice(1)\r\n .map(d => parseFloat(d.amount));\r\n\r\n const sortedContributions = [...contributionsFromOthers].sort((a, b) => b - a);\r\n const rewardContributions = sortedContributions.slice(0, 7);\r\n const rewardAmount = rewardContributions.reduce((sum, amt) => sum + amt, 0);\r\n\r\n const foundationContributions = sortedContributions.slice(7);\r\n const foundationAmount = foundationContributions.reduce((sum, amt) => sum + amt, 0) + parseFloat(chart.donors[0].amount);\r\n\r\n rewardedDonor.reward = rewardAmount;\r\n rewardedDonor.foundationContribution = foundationAmount;\r\n\r\n setTotalRewarded(prev => prev + rewardAmount);\r\n setFoundationBalance(prev => prev + foundationAmount);\r\n setRewardedDonors(prev => [...prev, rewardedDonor]);\r\n\r\n distributeRewardsAutomatically(rewardedDonor, rewardAmount, foundationAmount);\r\n\r\n const newChart1 = {\r\n id: Date.now(),\r\n donors: [\r\n chart.donors[1],\r\n chart.donors[3],\r\n chart.donors[4],\r\n chart.donors[7],\r\n chart.donors[8],\r\n chart.donors[9],\r\n chart.donors[10]\r\n ],\r\n center: chart.donors[1],\r\n isNew: true,\r\n isSplitting: false\r\n };\r\n\r\n const newChart2 = {\r\n id: Date.now() + 1,\r\n donors: [\r\n chart.donors[2],\r\n chart.donors[5],\r\n chart.donors[6],\r\n chart.donors[11],\r\n chart.donors[12],\r\n chart.donors[13],\r\n chart.donors[14]\r\n ],\r\n center: chart.donors[2],\r\n isNew: true,\r\n isSplitting: false\r\n };\r\n\r\n setTimeout(() => {\r\n setCharts(prev => prev.map(c =>\r\n (c.id === newChart1.id || c.id === newChart2.id) ? { ...c, isNew: false } : c\r\n ));\r\n }, 100);\r\n\r\n return prevCharts\r\n .filter(c => c.id !== chartId)\r\n .concat([newChart1, newChart2]);\r\n });\r\n };\r\n\r\n const reset = () => {\r\n setCharts([{ id: 1, donors: [], center: null, isNew: false, isSplitting: false }]);\r\n setRewardedDonors([]);\r\n setDonorCount(1);\r\n setIsAutoFilling(false);\r\n setLastAddedPosition(null);\r\n setTotalPooled(0);\r\n setTotalRewarded(0);\r\n setFoundationBalance(0);\r\n };\r\n\r\n const toggleAutoFill = () => {\r\n setIsAutoFilling(!isAutoFilling);\r\n };\r\n\r\n useEffect(() => {\r\n if (isAutoFilling) {\r\n autoFillInterval.current = setInterval(() => {\r\n setCharts(prevCharts => {\r\n const availableChart = prevCharts.find(c => c.donors.length < 15 && !c.isSplitting);\r\n if (availableChart) {\r\n addDonor(availableChart.id);\r\n } else {\r\n setIsAutoFilling(false);\r\n }\r\n return prevCharts;\r\n });\r\n }, speed);\r\n } else {\r\n if (autoFillInterval.current) {\r\n clearInterval(autoFillInterval.current);\r\n }\r\n }\r\n\r\n return () => {\r\n if (autoFillInterval.current) {\r\n clearInterval(autoFillInterval.current);\r\n }\r\n };\r\n }, [isAutoFilling, speed]);\r\n\r\n return (\r\n <div className=\"p-6 bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen\">\r\n <div className=\"max-w-7xl mx-auto\">\r\n <div className=\"bg-white rounded-lg shadow-lg p-6 mb-6\">\r\n <h1 className=\"text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2\">\r\n \ud83c\udf1f Stellar XLM Donation System\r\n <\/h1>\r\n <p className=\"text-gray-600 mb-4\">\r\n Send XLM to the pool \u2192 Join the chart \u2192 Receive rewards + Build foundation\r\n <\/p>\r\n\r\n <div className=\"bg-blue-50 border-2 border-blue-300 rounded-lg p-4 mb-4\">\r\n <h3 className=\"font-semibold text-blue-900 flex items-center gap-2 mb-2\">\r\n \ud83d\udcbc How to Get XLM to Donate:\r\n <\/h3>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-blue-800\">\r\n <div>\r\n <p className=\"font-semibold mb-1\">\ud83d\udcb5 MoneyGram:<\/p>\r\n <p className=\"text-xs\">Visit any MoneyGram location and purchase XLM with cash or card. Or purchase right here! Instant to your Stellar wallet!<\/p>\r\n <\/div>\r\n <div>\r\n <p className=\"font-semibold mb-1\">\ud83c\udf10 Online Exchanges:<\/p>\r\n <p className=\"text-xs\">Coinbase, Kraken, Binance - Buy XLM with bank transfer or card. Transfer to your Stellar wallet.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-4\">\r\n <div className=\"bg-blue-50 rounded-lg p-4\">\r\n <p className=\"text-sm text-gray-600\">Total Pooled<\/p>\r\n <p className=\"text-2xl font-bold text-blue-600\">{totalPooled.toFixed(2)} XLM<\/p>\r\n <\/div>\r\n <div className=\"bg-green-50 rounded-lg p-4\">\r\n <p className=\"text-sm text-gray-600\">Donor Rewards<\/p>\r\n <p className=\"text-2xl font-bold text-green-600\">{totalRewarded.toFixed(2)} XLM<\/p>\r\n <p className=\"text-xs text-gray-500 mt-1\">50% of pools<\/p>\r\n <\/div>\r\n <div className=\"bg-purple-50 rounded-lg p-4 border-2 border-purple-300\">\r\n <p className=\"text-sm text-gray-600 flex items-center gap-1\">\r\n \u2764\ufe0f Foundation Balance\r\n <\/p>\r\n <p className=\"text-2xl font-bold text-purple-600\">{foundationBalance.toFixed(2)} XLM<\/p>\r\n <p className=\"text-xs text-gray-500 mt-1\">50% of pools<\/p>\r\n <\/div>\r\n <div className=\"bg-orange-50 rounded-lg p-4\">\r\n <p className=\"text-sm text-gray-600\">Active Charts<\/p>\r\n <p className=\"text-2xl font-bold text-orange-600\">{charts.length}<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"flex flex-wrap gap-4 mb-4\">\r\n <button\r\n onClick={toggleAutoFill}\r\n className={`px-6 py-2 ${isAutoFilling ? 'bg-orange-500 hover:bg-orange-600' : 'bg-blue-600 hover:bg-blue-700'} text-white rounded-lg transition flex items-center gap-2 font-semibold`}\r\n >\r\n {isAutoFilling ? '\u23f8\ufe0f Pause Demo' : '\u25b6\ufe0f Start Demo'}\r\n <\/button>\r\n <button\r\n onClick={reset}\r\n className=\"px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition flex items-center gap-2\"\r\n >\r\n \ud83d\udd04 Reset\r\n <\/button>\r\n <div className=\"flex items-center gap-2\">\r\n <label className=\"text-sm text-gray-700 font-medium\">Speed:<\/label>\r\n <select\r\n value={speed}\r\n onChange={(e) => setSpeed(Number(e.target.value))}\r\n className=\"px-3 py-2 border border-gray-300 rounded-lg text-sm\"\r\n >\r\n <option value={1000}>Slow<\/option>\r\n <option value={500}>Medium<\/option>\r\n <option value={200}>Fast<\/option>\r\n <option value={100}>Very Fast<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n {rewardedDonors.length > 0 && (\r\n <div className=\"bg-green-50 border border-green-200 rounded-lg p-4 mb-4\">\r\n <h3 className=\"font-semibold text-green-800 flex items-center gap-2 mb-2\">\r\n \ud83c\udf81 Recent Rewards ({rewardedDonors.length} total)\r\n <\/h3>\r\n <div className=\"space-y-2\">\r\n {rewardedDonors.slice(-3).reverse().map((donor, idx) => (\r\n <div\r\n key={idx}\r\n className=\"bg-white rounded-lg px-4 py-3 border-l-4 border-green-500\"\r\n >\r\n <div className=\"flex justify-between items-start\">\r\n <div>\r\n <p className=\"font-semibold text-gray-800\">{donor.name}<\/p>\r\n <p className=\"text-xs text-gray-600\">{donor.email}<\/p>\r\n <p className=\"text-xs text-gray-500 mt-1\">Wallet: {donor.stellarWallet?.substring(0, 8)}...<\/p>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <p className=\"font-bold text-green-700 text-lg\">{donor.reward?.toFixed(2)} XLM<\/p>\r\n <p className=\"text-xs text-green-600\">\u2713 Sent to Wallet<\/p>\r\n <p className=\"text-xs text-purple-600 mt-1\">\r\n +{donor.foundationContribution?.toFixed(2)} XLM to Foundation\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n {charts.map((chart, chartIdx) => (\r\n <div\r\n key={chart.id}\r\n className={`bg-white rounded-lg shadow-lg p-6 transition-all duration-500 ${\r\n chart.isNew ? 'scale-0 opacity-0' : 'scale-100 opacity-100'\r\n } ${\r\n chart.isSplitting ? 'animate-pulse border-4 border-green-400' : ''\r\n }`}\r\n >\r\n <div className=\"flex justify-between items-center mb-4\">\r\n <h2 className=\"text-lg font-semibold text-gray-800\">\r\n Chart {chartIdx + 1}\r\n <\/h2>\r\n <span className={`text-sm font-semibold px-3 py-1 rounded-full ${\r\n chart.donors.length === 15 ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'\r\n }`}>\r\n {chart.donors.length}\/15\r\n <\/span>\r\n <\/div>\r\n\r\n <svg width=\"100%\" height=\"400\" className=\"mx-auto\" viewBox=\"0 0 300 300\" preserveAspectRatio=\"xMidYMid meet\">\r\n {getConnections().map((conn, idx) => {\r\n const fromPos = getSlotPosition(conn.from);\r\n const toPos = getSlotPosition(conn.to);\r\n const hasFromDonor = chart.donors[conn.from];\r\n const hasToDonor = chart.donors[conn.to];\r\n\r\n return (\r\n <line\r\n key={idx}\r\n x1={fromPos.x}\r\n y1={fromPos.y}\r\n x2={toPos.x}\r\n y2={toPos.y}\r\n stroke={hasFromDonor && hasToDonor ? '#3b82f6' : '#e5e7eb'}\r\n strokeWidth={hasFromDonor && hasToDonor ? '2' : '1'}\r\n opacity={hasFromDonor && hasToDonor ? '0.6' : '0.3'}\r\n className=\"transition-all duration-300\"\r\n \/>\r\n );\r\n })}\r\n\r\n {Array.from({ length: 15 }).map((_, index) => {\r\n const pos = getSlotPosition(index);\r\n const hasDonor = chart.donors[index];\r\n const isCenter = index === 0;\r\n const isJustAdded = lastAddedPosition?.chartId === chart.id &&\r\n lastAddedPosition?.position === index;\r\n\r\n return (\r\n <g key={index}>\r\n <circle\r\n cx={pos.x}\r\n cy={pos.y}\r\n r={isCenter ? 22 : 18}\r\n fill={hasDonor ? (isCenter ? '#10b981' : '#3b82f6') : '#f3f4f6'}\r\n stroke={hasDonor ? (isCenter ? '#059669' : '#2563eb') : '#d1d5db'}\r\n strokeWidth=\"2\"\r\n className={`transition-all duration-300 ${\r\n isJustAdded ? 'animate-ping' : ''\r\n }`}\r\n \/>\r\n <text\r\n x={pos.x}\r\n y={pos.y}\r\n textAnchor=\"middle\"\r\n dominantBaseline=\"middle\"\r\n fontSize={hasDonor ? \"13\" : \"11\"}\r\n fill={hasDonor ? \"white\" : \"#9ca3af\"}\r\n fontWeight={hasDonor ? \"bold\" : \"normal\"}\r\n >\r\n {index + 1}\r\n <\/text>\r\n <\/g>\r\n );\r\n })}\r\n\r\n {chart.isSplitting && (\r\n <>\r\n <text\r\n x=\"150\"\r\n y=\"135\"\r\n textAnchor=\"middle\"\r\n dominantBaseline=\"middle\"\r\n fontSize=\"24\"\r\n className=\"animate-bounce\"\r\n >\r\n \ud83c\udf89\r\n <\/text>\r\n <text\r\n x=\"150\"\r\n y=\"160\"\r\n textAnchor=\"middle\"\r\n dominantBaseline=\"middle\"\r\n fontSize=\"11\"\r\n fill=\"#10b981\"\r\n fontWeight=\"bold\"\r\n >\r\n DISTRIBUTING\r\n <\/text>\r\n <\/>\r\n )}\r\n <\/svg>\r\n\r\n {!isAutoFilling && (\r\n <div className=\"mt-4\">\r\n <button\r\n onClick={() => openDonorForm(chart.id)}\r\n disabled={chart.donors.length >= 15 || chart.isSplitting}\r\n className=\"w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition flex items-center justify-center gap-2\"\r\n >\r\n \u2795 Add Donor\r\n <\/button>\r\n <\/div>\r\n )}\r\n\r\n {chart.donors.length > 0 && (\r\n <div className=\"mt-4 p-3 bg-gray-50 rounded-lg\">\r\n <p className=\"text-xs font-semibold text-gray-700 mb-1\">Chart Pool:<\/p>\r\n <p className=\"text-lg font-bold text-blue-600\">\r\n {chart.donors.reduce((sum, d) => sum + parseFloat(d.amount), 0).toFixed(2)} XLM\r\n <\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n ))}\r\n <\/div>\r\n\r\n <div className=\"mt-6 bg-white rounded-lg shadow-lg p-6\">\r\n <h3 className=\"font-semibold text-gray-800 mb-3 flex items-center gap-2\">\r\n \ud83d\udcb0 How It Works - Payment First Model\r\n <\/h3>\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-gray-600\">\r\n <div className=\"bg-blue-50 rounded-lg p-4\">\r\n <p className=\"font-bold text-blue-900 mb-2\">Step 1: Acquire XLM<\/p>\r\n <ul className=\"space-y-1 text-xs\">\r\n <li>\u2022 MoneyGram (cash\/card)<\/li>\r\n <li>\u2022 Coinbase, Kraken, Binance<\/li>\r\n <li>\u2022 Transfer to your Stellar wallet<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div className=\"bg-green-50 rounded-lg p-4\">\r\n <p className=\"font-bold text-green-900 mb-2\">Step 2: Send to Pool<\/p>\r\n <ul className=\"space-y-1 text-xs\">\r\n <li>\u2022 Send XLM to pool address<\/li>\r\n <li>\u2022 System verifies transaction<\/li>\r\n <li>\u2022 You're added to next chart<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div className=\"bg-purple-50 rounded-lg p-4\">\r\n <p className=\"font-bold text-purple-900 mb-2\">Step 3: Automatic Distribution<\/p>\r\n <ul className=\"space-y-1 text-xs\">\r\n <li>\u2022 Chart fills with 15 donors<\/li>\r\n <li>\u2022 Smart contract splits pool<\/li>\r\n <li>\u2022 Reward sent to your wallet<\/li>\r\n <li>\u2022 Foundation receives its share<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Donor Form Modal *\/}\r\n{showDonorForm && (\r\n <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-y-auto\">\r\n <div className=\"bg-white rounded-lg shadow-xl max-w-md w-full p-6 my-8 max-h-[90vh] overflow-y-auto\">\r\n <div className=\"flex justify-between items-center mb-4 sticky top-0 bg-white pb-2 border-b\">\r\n <h3 className=\"text-xl font-bold text-gray-800\">Join Chart<\/h3>\r\n <button\r\n onClick={closeDonorForm}\r\n className=\"text-gray-500 hover:text-gray-700 text-2xl leading-none\"\r\n >\r\n \u2715\r\n <\/button>\r\n <\/div>\r\n\r\n <form onSubmit={handleFormSubmit} className=\"space-y-4\">\r\n <div className=\"bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4\">\r\n <p className=\"font-semibold text-blue-900 text-sm mb-1\">\ud83d\udccd Pool Address:<\/p>\r\n <p className=\"font-mono text-xs text-blue-700 break-all\">{POOL_ADDRESS}<\/p>\r\n <p className=\"text-xs text-blue-600 mt-2\">Send your XLM here first, then complete this form!<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\r\n Full Name\r\n <\/label>\r\n <input\r\n type=\"text\"\r\n value={formData.name}\r\n onChange={(e) => setFormData({...formData, name: e.target.value})}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n placeholder=\"John Doe\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\r\n Email Address\r\n <\/label>\r\n <input\r\n type=\"email\"\r\n value={formData.email}\r\n onChange={(e) => setFormData({...formData, email: e.target.value})}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n placeholder=\"john@example.com\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\r\n Your Stellar Wallet Address\r\n <\/label>\r\n <input\r\n type=\"text\"\r\n value={formData.stellarWallet}\r\n onChange={(e) => setFormData({...formData, stellarWallet: e.target.value})}\r\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm\"\r\n placeholder=\"GXXXXXXXXXXXXXXXXXXXXXXXXXX\"\r\n required\r\n \/>\r\n <p className=\"text-xs text-gray-500 mt-1\">Rewards will be sent here<\/p>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\r\n Donation Amount\r\n <\/label>\r\n <div className=\"bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-300 rounded-lg p-4\">\r\n <div className=\"flex items-center justify-between mb-2\">\r\n <span className=\"text-2xl font-bold text-green-700\">${TARGET_DONATION_USD} USD<\/span>\r\n <span className=\"text-sm text-gray-600\">\u2248 {requiredXlm} XLM<\/span>\r\n <\/div>\r\n {xlmPrice && (\r\n <p className=\"text-xs text-gray-500\">\r\n Current XLM Price: ${xlmPrice.toFixed(4)} USD\r\n <\/p>\r\n )}\r\n <\/div>\r\n <p className=\"text-xs text-gray-600 mt-2\">\r\n \ud83d\udca1 Send EXACTLY <span className=\"font-bold text-blue-600\">{requiredXlm} XLM<\/span> to the pool address above\r\n <\/p>\r\n <\/div>\r\n\r\n {paymentVerified ? (\r\n <div className=\"bg-green-50 border border-green-300 rounded-lg p-4 flex items-center gap-3\">\r\n <span className=\"text-green-600 text-2xl\">\u2713<\/span>\r\n <div>\r\n <p className=\"font-semibold text-green-800\">Payment Verified!<\/p>\r\n <p className=\"text-xs text-green-600\">Transaction confirmed on Stellar blockchain<\/p>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"bg-yellow-50 border border-yellow-200 rounded-lg p-3\">\r\n <p className=\"text-xs text-yellow-800\">\r\n \u23f3 Click \"Verify Payment\" to check your transaction on the Stellar network\r\n <\/p>\r\n <\/div>\r\n )}\r\n\r\n <button\r\n type=\"submit\"\r\n className={`w-full px-4 py-3 ${paymentVerified ? 'bg-green-600 hover:bg-green-700' : 'bg-blue-600 hover:bg-blue-700'} text-white rounded-lg transition font-semibold flex items-center justify-center gap-2`}\r\n >\r\n {paymentVerified ? '\u2713 Join Chart Now' : 'Verify Payment on Stellar'}\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ Render the app\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<DonationReferralChart \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"<p>This is a Crowdfunding platform designed to build a charitable foundation! If you have XLM you can send to the pool using this site. Click Here. If you don’t have any, get it here! Get 14 others to donate and receive an instant reward! Every donor who gets others to donate will receive an instant […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":12,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":27,"date":"2025-11-08T21:25:01","date_gmt":"2025-11-08T21:25:01","guid":{"rendered":"https:\/\/stellardns.io\/?page_id=27"},"modified":"2025-11-19T07:35:38","modified_gmt":"2025-11-19T01:35:38","slug":"give-to-receive","status":"publish","type":"page","link":"https:\/\/stellardns.io\/?page_id=27","title":{"rendered":"GIVE TO RECEIVE"},"content":{"rendered":"\n

This is a Crowdfunding platform designed to build a charitable foundation! If you have XLM you can send to the pool using this site. Click Here<\/a>. If you don’t have any, get it here!<\/a> Get 14 others to donate and receive an instant reward! Every donor who gets others to donate will receive an instant reward also! It is not our intention nor desire to amass hundreds of millions of dollars a year. Our intention is to build a foundation that will soon begin to disburse million dollar grants every day of the year to eligible members who apply! Become a member today!<\/p>\n\n\n