Synthetics

.github/workflows/pr-validation.yml

@@ -0,0 +1,35 @@
+name: PR Validation
+
+# Run on pull requests to the main branch
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build-validation:
+    name: Build Validation
+    runs-on: ubuntu-latest
+
+    steps:
+      # Check out the repository code
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Set up Node.js environment
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: "22"
+
+      # Install project dependencies
+      - name: Install dependencies
+        run: npm install
+
+      # Build project to validate it compiles successfully
+      - name: Build project
+        run: npm run build
+
+      # Add a success message
+      - name: Build successful
+        run: echo "✅ Build completed successfully! The PR can be merged safely."

README.md

@@ -1,6 +1,6 @@
-# ArcAO Front End Template
+# ARC Front End Template
 
-This template is part of [ArcAO Templates](https://github.com/orgs/ArcAOGaming/repositories?q=template%3Atrue+archived%3Afalse), designed to help you get your game idea up and running fast!
+This template is part of [ARC Templates](https://github.com/orgs/ArcAOGaming/repositories?q=template%3Atrue+archived%3Afalse), designed to help you get your game idea up and running fast!
 
 <div align="center">
 

index.html

@@ -31,7 +31,7 @@
   <!-- Additional Meta Tags -->
   <meta name="keywords"
     content="blockchain gaming, NFT, gaming tokens, play to earn, streaming, immersive worlds, game assets" />
-  <meta name="author" content="ArcAOGaming" />
+  <meta name="author" content="ARC" />
   <meta name="robots" content="index, follow" />
 
   <!-- Theme Color -->

package.json

@@ -26,7 +26,7 @@
     "@reown/appkit": "1.7.13",
     "@reown/appkit-adapter-wagmi": "1.7.13",
     "@tanstack/react-query": "5.83.0",
-    "ao-js-sdk": "0.0.11",
+    "ao-js-sdk": "0.2.36",
     "arweave": "^1.15.5",
     "buffer": "6.0.3",
     "ethers": "6.15.0",

src/App.tsx

@@ -9,6 +9,7 @@ import Home from './pages/Home/Home'
 // Create routes with automatic eager loading
 const Mint = createRoute(() => import('./pages/Mint/Mint'))
 const Earn = createRoute(() => import('./pages/Earn/Earn'))
+const YieldFarming = createRoute(() => import('./pages/YieldFarming/YieldFarming'))
 
 function App() {
   return (
@@ -31,6 +32,7 @@ function App() {
                                     <Route path="/" element={<Home />} />
                                     <Route path="/mint" element={<Mint />} />
                                     <Route path="/earn" element={<Earn />} />
+                                    <Route path="/yield-farming" element={<YieldFarming />} />
                                   </Routes>
                                 </Suspense>
                               </Layout>

src/pages/Earn/Earn.tsx

@@ -79,7 +79,7 @@ const Earn = () => {
         <EarnCoinFlowAnimation />
         <p className="earn-description">
           Multiple ways to earn rewards and build your gaming empire. Play, stream, refer, and lead
-          your way to success in the ARCAO ecosystem.
+          your way to success in the ARC Gaming ecosystem.
         </p>
 
         <div className="earn-rewards">
@@ -89,7 +89,7 @@ const Earn = () => {
             <h3 className="earn-reward-title">Stream & Create</h3>
             <div className="earn-reward-amount">Get Paid</div>
             <p className="earn-reward-description">
-              Get paid to stream ARCAO games and create content. Join our creator program and earn
+              Get paid to stream ARC games and create content. Join our creator program and earn
               revenue sharing, sponsorship opportunities, and exclusive creator rewards.
             </p>
           </div>
@@ -99,17 +99,17 @@ const Earn = () => {
             <h3 className="earn-reward-title">Affiliate Sales</h3>
             <div className="earn-reward-amount">Commission</div>
             <p className="earn-reward-description">
-              Earn commission on game sales through your unique affiliate codes. Share ARCAO games
+              Earn commission on game sales through your unique affiliate codes. Share ARC games
               with your network and earn a percentage of every sale you generate.
             </p>
           </div>
 
           <div className="earn-reward-card earn-reward-card-clickable ambassador-card" onClick={handleAmbassadorClick}>
             <span className="earn-reward-icon">👑</span>
-            <h3 className="earn-reward-title">ARCAO Ambassador</h3>
+            <h3 className="earn-reward-title">ARC Ambassador</h3>
             <div className="earn-reward-amount">Leadership</div>
             <p className="earn-reward-description">
-              Apply to become an official ARCAO Ambassador. Lead the community, represent the brand,
+              Apply to become an official ARC Ambassador. Lead the community, represent the brand,
               and unlock exclusive benefits, early access, and leadership opportunities.
             </p>
             <div className="ambassador-hover-text">Apply Now</div>
@@ -118,9 +118,9 @@ const Earn = () => {
 
         {/* Ambassador Application Section */}
         <div className="ambassador-application">
-          <h2 className="ambassador-section-title">Apply to Become an ARCAO Ambassador</h2>
+          <h2 className="ambassador-section-title">Apply to Become an ARC Ambassador</h2>
           <p className="ambassador-section-description">
-            Ready to lead the ARCAO community? Fill out the application below to join our elite Ambassador program.
+            Ready to lead the ARC community? Fill out the application below to join our elite Ambassador program.
           </p>
           <div className="ambassador-form-container">
             <iframe

src/pages/Home/sections/Play/components/StatsSection.css

@@ -12,32 +12,36 @@
 }
 
 /* Stats Grid */
-.hero-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-  max-width: 512px;
+.play-hero-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  max-width: 100%;
   margin: 0 auto;
+  width: 100%;
 }
 
-.stat-item {
+.play-stat-item {
   text-align: center;
   position: relative;
-  padding: 16px;
+  padding: 12px 8px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: all 0.3s ease;
+  flex: 1;
+  min-width: 0;
 }
 
-.stat-item:hover {
+.play-stat-item:hover {
   transform: translateY(-4px);
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.1);
 }
 
-.stat-number {
+.play-stat-number {
   font-size: 1.875rem;
   font-weight: 700;
   margin-bottom: 4px;
@@ -48,19 +52,19 @@
   transition: all 0.3s ease;
 }
 
-.stat-number.purple {
+.play-stat-number.purple {
   color: var(--gaming-purple);
 }
 
-.stat-number.cyan {
+.play-stat-number.cyan {
   color: var(--gaming-cyan);
 }
 
-.stat-number.pink {
+.play-stat-number.pink {
   color: var(--gaming-pink);
 }
 
-.stat-label {
+.play-stat-label {
   font-size: 0.875rem;
   color: #9ca3af;
   text-transform: uppercase;
@@ -69,45 +73,47 @@
 }
 
 /* Glow effect on hover */
-.stat-item:hover .stat-number.purple {
+.play-stat-item:hover .play-stat-number.purple {
   text-shadow: 0 0 20px var(--gaming-purple);
 }
 
-.stat-item:hover .stat-number.cyan {
+.play-stat-item:hover .play-stat-number.cyan {
   text-shadow: 0 0 20px var(--gaming-cyan);
 }
 
-.stat-item:hover .stat-number.pink {
+.play-stat-item:hover .play-stat-number.pink {
   text-shadow: 0 0 20px var(--gaming-pink);
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
-  .hero-stats {
-    grid-template-columns: 1fr;
-    gap: 24px;
-    max-width: 300px;
+  .play-hero-stats {
+    gap: 12px;
   }
-  
-  .stat-number {
+
+  .play-stat-number {
     font-size: 1.5rem;
   }
-  
-  .stat-item {
-    padding: 12px;
+
+  .play-stat-item {
+    padding: 10px 6px;
   }
 }
 
 @media (max-width: 480px) {
-  .hero-stats {
-    gap: 16px;
+  .play-hero-stats {
+    gap: 8px;
   }
-  
-  .stat-number {
+
+  .play-stat-number {
     font-size: 1.25rem;
   }
-  
-  .stat-label {
+
+  .play-stat-label {
     font-size: 0.75rem;
   }
-}
+
+  .play-stat-item {
+    padding: 8px 4px;
+  }
+}

src/pages/Home/sections/Play/components/StatsSection.tsx

@@ -23,14 +23,14 @@ const StatsSection: React.FC<StatsSectionProps> = ({ className = '' }) => {
   const stats: StatItem[] = [
     {
       value: 10000,
-      label: 'Active Players',
+      label: 'Players',
       color: 'purple',
       suffix: '+',
       animate: true
     },
     {
       value: 2000000,
-      label: 'Fair Launch Deposits',
+      label: 'Deposits',
       color: 'cyan',
       prefix: '$',
       suffix: '+',
@@ -123,15 +123,15 @@ const StatsSection: React.FC<StatsSectionProps> = ({ className = '' }) => {
 
   return (
     <div ref={sectionRef} className={`stats-section ${className}`}>
-      <div className="hero-stats">
+      <div className="play-hero-stats">
         {stats.map((stat, index) => (
-          <div key={index} className="stat-item">
-            <div className={`stat-number ${stat.color}`}>
+          <div key={index} className="play-stat-item">
+            <div className={`play-stat-number ${stat.color}`}>
               {stat.prefix || ''}
               {getDisplayValue(stat, index)}
               {stat.suffix || ''}
             </div>
-            <div className="stat-label">{stat.label}</div>
+            <div className="play-stat-label">{stat.label}</div>
           </div>
         ))}
       </div>

src/pages/Mint/components/WalletConnections/components/DAIConnection.tsx

@@ -4,7 +4,7 @@ import { useAppKit, useAppKitAccount } from '@reown/appkit/react';
 import { useAccount, useBalance, useWriteContract, useWaitForTransactionReceipt, useReadContract } from 'wagmi';
 import { formatEther, parseEther } from 'viem';
 import { useAOSDAIStaking, useArweaveAOWallet, useDelegation } from '../../../../../shared/contexts';
-import { AUTONOMOUS_FINANCE } from 'ao-js-sdk/src/processes/ids/autonomous-finance';
+import { PROCESS_IDS } from 'ao-js-sdk';
 import { daiStaking, DAI_TOKEN_ADDRESS } from '../../../../../utils/AO/DAIStaking';
 import { ERC20_ABI } from '../../../../../utils/AO/shared/erc20Abi';
 
@@ -78,7 +78,7 @@ const DAIConnection: React.FC = () => {
 
             // Only set GAME delegation if not already at 100%
             const gameDelegation = delegations.find(
-                delegation => delegation.delegatee === AUTONOMOUS_FINANCE.FAIR_LAUNCH_PROCESSES.GAME
+                delegation => delegation.delegatee === PROCESS_IDS.AUTONOMOUS_FINANCE.FAIR_LAUNCH_PROCESSES.GAME
             );
             const gamePercentage = gameDelegation ? parseFloat(gameDelegation.percentage) : 0;