feat: add Spatial, Decentraland, and The Sandbox platform integrations
- Created comprehensive integration docs for Spatial (5M+ visitors, web-based) - Created comprehensive integration docs for Decentraland (800K+ users, Ethereum) - Created comprehensive integration docs for The Sandbox (2M+ players, Polygon) - Updated DocsIntegrations page with new platform showcase cards - Added routes for /docs/integrations/spatial, /decentraland, /thesandbox - Updated homepage to mention all 8 supported platforms explicitly - Each integration includes: Quick start, code examples, auth flows, best practices
This commit is contained in:
MrPiglr
GitHub
parent
bbc5e4a07a
commit
68d84528cf
6 changed files with 1404 additions and 12 deletions
|
|
@ -46,6 +46,9 @@ import DocsExamples from "./pages/docs/DocsExamples";
|
||||||
import DocsIntegrations from "./pages/docs/DocsIntegrations";
|
import DocsIntegrations from "./pages/docs/DocsIntegrations";
|
||||||
import VRChatIntegration from "./pages/docs/integrations/VRChat";
|
import VRChatIntegration from "./pages/docs/integrations/VRChat";
|
||||||
import RecRoomIntegration from "./pages/docs/integrations/RecRoom";
|
import RecRoomIntegration from "./pages/docs/integrations/RecRoom";
|
||||||
|
import SpatialIntegration from "./pages/docs/integrations/Spatial";
|
||||||
|
import DecentralandIntegration from "./pages/docs/integrations/Decentraland";
|
||||||
|
import TheSandboxIntegration from "./pages/docs/integrations/TheSandbox";
|
||||||
import DocsCurriculum from "./pages/docs/DocsCurriculum";
|
import DocsCurriculum from "./pages/docs/DocsCurriculum";
|
||||||
import DocsCurriculumEthos from "./pages/docs/DocsCurriculumEthos";
|
import DocsCurriculumEthos from "./pages/docs/DocsCurriculumEthos";
|
||||||
import EthosGuild from "./pages/community/EthosGuild";
|
import EthosGuild from "./pages/community/EthosGuild";
|
||||||
|
|
@ -626,6 +629,18 @@ const App = () => (
|
||||||
path="integrations/recroom"
|
path="integrations/recroom"
|
||||||
element={<RecRoomIntegration />}
|
element={<RecRoomIntegration />}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="integrations/spatial"
|
||||||
|
element={<SpatialIntegration />}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="integrations/decentraland"
|
||||||
|
element={<DecentralandIntegration />}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="integrations/thesandbox"
|
||||||
|
element={<TheSandboxIntegration />}
|
||||||
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/tutorials" element={<Tutorials />} />
|
<Route path="/tutorials" element={<Tutorials />} />
|
||||||
<Route path="/community/*" element={<Community />} />
|
<Route path="/community/*" element={<Community />} />
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,7 @@ const features = [
|
||||||
{
|
{
|
||||||
icon: Layers,
|
icon: Layers,
|
||||||
title: "Cross-Platform Integration Layer",
|
title: "Cross-Platform Integration Layer",
|
||||||
description: "One unified API to build across Roblox, VRChat, RecRoom, Minecraft, Meta Horizon, Fortnite, and Zepeto—no more managing separate platform SDKs or gated gardens",
|
description: "One unified API to build across Roblox, VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Minecraft, Meta Horizon, Fortnite, and Zepeto—no more managing separate platform SDKs or gated gardens",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Code2,
|
icon: Code2,
|
||||||
|
|
@ -110,7 +110,7 @@ const features = [
|
||||||
{
|
{
|
||||||
icon: Rocket,
|
icon: Rocket,
|
||||||
title: "Ship Everywhere, Fast",
|
title: "Ship Everywhere, Fast",
|
||||||
description: "150+ cross-platform code examples, pre-built templates for VRChat, RecRoom, Roblox, and more—OAuth integration, Supabase backend, and one-command deployment to every metaverse",
|
description: "150+ cross-platform code examples, pre-built templates for VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Roblox, and more—OAuth integration, Supabase backend, and one-command deployment to every metaverse",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,9 @@ import {
|
||||||
Headset,
|
Headset,
|
||||||
Gamepad2,
|
Gamepad2,
|
||||||
Boxes,
|
Boxes,
|
||||||
|
Globe,
|
||||||
|
Cuboid,
|
||||||
|
Box,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
const connectorFields = [
|
const connectorFields = [
|
||||||
|
|
@ -170,24 +173,77 @@ export default function DocsIntegrations() {
|
||||||
<ArrowRight className="ml-2 h-4 w-4" />
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</CardContent>
|
</CardContent>cyan-950/50 to-blue-950/50 border-cyan-500/30 hover:border-cyan-400/60 transition-colors">
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-gradient-to-br from-slate-900/80 to-slate-800/50 border-slate-600/30 hover:border-slate-500/60 transition-colors">
|
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="flex items-center gap-3 text-white">
|
<CardTitle className="flex items-center gap-3 text-white">
|
||||||
<Boxes className="h-6 w-6 text-gray-400" />
|
<Globe className="h-6 w-6 text-cyan-400" />
|
||||||
More Platforms
|
Spatial
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<CardDescription className="text-gray-300">
|
<CardDescription className="text-gray-300">
|
||||||
Roblox, Fortnite, Minecraft, Unity, Unreal, and more coming soon
|
Build browser-based 3D experiences for VR, desktop, and mobile devices
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
<Badge variant="secondary" className="bg-gray-500/20 text-gray-200">Roblox</Badge>
|
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-200">TypeScript</Badge>
|
||||||
<Badge variant="secondary" className="bg-gray-500/20 text-gray-200">Unity</Badge>
|
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-200">Web3</Badge>
|
||||||
<Badge variant="secondary" className="bg-gray-500/20 text-gray-200">Unreal</Badge>
|
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-200">No Install</Badge>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" className="w-full border-cyan-400/50 text-cyan-300 hover:bg-cyan-500/10" asChild>
|
||||||
|
<Link to="/docs/integrations/spatial">
|
||||||
|
View Documentation
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gradient-to-br from-red-950/50 to-orange-950/50 border-red-500/30 hover:border-red-400/60 transition-colors">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-3 text-white">
|
||||||
|
<Cuboid className="h-6 w-6 text-red-400" />
|
||||||
|
Decentraland
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CardDescription className="text-gray-300">
|
||||||
|
Create Ethereum-powered metaverse experiences with NFT integration
|
||||||
|
</CardDescription>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Badge variant="secondary" className="bg-red-500/20 text-red-200">Ethereum</Badge>
|
||||||
|
<Badge variant="secondary" className="bg-red-500/20 text-red-200">LAND</Badge>
|
||||||
|
<Badge variant="secondary" className="bg-red-500/20 text-red-200">DAO</Badge>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" className="w-full border-red-400/50 text-red-300 hover:bg-red-500/10" asChild>
|
||||||
|
<Link to="/docs/integrations/decentraland">
|
||||||
|
View Documentation
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gradient-to-br from-amber-950/50 to-yellow-950/50 border-amber-500/30 hover:border-amber-400/60 transition-colors">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-3 text-white">
|
||||||
|
<Box className="h-6 w-6 text-amber-400" />
|
||||||
|
The Sandbox
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CardDescription className="text-gray-300">
|
||||||
|
Build voxel games with visual editor and Polygon NFT rewards
|
||||||
|
</CardDescription>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Badge variant="secondary" className="bg-amber-500/20 text-amber-200">Polygon</Badge>
|
||||||
|
<Badge variant="secondary" className="bg-amber-500/20 text-amber-200">Voxels</Badge>
|
||||||
|
<Badge variant="secondary" className="bg-amber-500/20 text-amber-200">NFTs</Badge>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" className="w-full border-amber-400/50 text-amber-300 hover:bg-amber-500/10" asChild>
|
||||||
|
<Link to="/docs/integrations/thesandbox">
|
||||||
|
View Documentation
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Link>ant="secondary" className="bg-gray-500/20 text-gray-200">Unreal</Badge>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="outline" className="w-full border-gray-400/50 text-gray-300 hover:bg-gray-500/10" disabled>
|
<Button variant="outline" className="w-full border-gray-400/50 text-gray-300 hover:bg-gray-500/10" disabled>
|
||||||
Coming Soon
|
Coming Soon
|
||||||
|
|
|
||||||
467
client/pages/docs/integrations/Decentraland.tsx
Normal file
467
client/pages/docs/integrations/Decentraland.tsx
Normal file
|
|
@ -0,0 +1,467 @@
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Cuboid, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
|
||||||
|
import CodeBlock from "@/components/dev-platform/CodeBlock";
|
||||||
|
|
||||||
|
export default function DecentralandIntegration() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-12">
|
||||||
|
<section id="overview" className="space-y-4">
|
||||||
|
<Badge className="bg-red-500/20 text-red-100 uppercase tracking-wide">
|
||||||
|
<Cuboid className="mr-2 h-3 w-3" />
|
||||||
|
Decentraland Integration
|
||||||
|
</Badge>
|
||||||
|
<h2 className="text-3xl font-semibold text-white">
|
||||||
|
Build in Decentraland with AeThex
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-lg leading-relaxed">
|
||||||
|
Create blockchain-based virtual experiences in Decentraland's Ethereum-powered metaverse. Integrate
|
||||||
|
AeThex APIs with LAND parcels, NFT wearables, and DAO governance for web3 gaming.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card className="bg-red-950/20 border-red-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-red-300">800K+</div>
|
||||||
|
<div className="text-sm text-gray-400">Registered Users</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="bg-red-950/20 border-red-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-red-300">90K+</div>
|
||||||
|
<div className="text-sm text-gray-400">LAND Parcels</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="bg-red-950/20 border-red-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-red-300">Ethereum</div>
|
||||||
|
<div className="text-sm text-gray-400">Blockchain</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<section id="features" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">What You Can Build</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-red-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
NFT-Gated Experiences
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Verify wallet ownership via AeThex, grant access to exclusive LAND areas, and NFT-gated minigames
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-red-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Cross-Chain Achievements
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Award achievements that sync across Decentraland, Polygon, and other EVM chains via AeThex
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-red-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
DAO Integration
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Connect Decentraland DAO voting with AeThex governance tools for multi-platform coordination
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-red-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Smart Contract Events
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Listen to on-chain events (MANA transfers, wearable mints) and trigger in-world experiences via AeThex webhooks
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Start */}
|
||||||
|
<section id="quick-start" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<Rocket className="h-6 w-6 text-red-400" />
|
||||||
|
Quick Start Guide
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>1. Install Decentraland SDK + AeThex</CardTitle>
|
||||||
|
<CardDescription>Set up your LAND parcel with AeThex integration</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CodeBlock
|
||||||
|
code={`# Install Decentraland CLI and create new scene
|
||||||
|
npm install -g decentraland
|
||||||
|
|
||||||
|
# Create new scene
|
||||||
|
dcl init
|
||||||
|
|
||||||
|
# Install AeThex SDK
|
||||||
|
npm install @aethex/decentraland-sdk ethers`}
|
||||||
|
language="bash"
|
||||||
|
showLineNumbers={false}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>2. Initialize AeThex in Your Scene</CardTitle>
|
||||||
|
<CardDescription>Configure API and Web3 wallet integration</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/decentraland-sdk';
|
||||||
|
import { getUserAccount } from '@decentraland/EthereumController';
|
||||||
|
|
||||||
|
// Initialize AeThex with Web3 support
|
||||||
|
const aethex = new AeThexClient({
|
||||||
|
apiKey: 'your_api_key_here',
|
||||||
|
environment: 'production',
|
||||||
|
web3Provider: 'ethereum' // Auto-detects MetaMask/WalletConnect
|
||||||
|
});
|
||||||
|
|
||||||
|
// Example: Verify user owns specific NFT before granting access
|
||||||
|
async function checkNFTAccess() {
|
||||||
|
const userAddress = await getUserAccount();
|
||||||
|
|
||||||
|
// Check if user owns required NFT via AeThex
|
||||||
|
const hasAccess = await aethex.web3.verifyNFTOwnership({
|
||||||
|
walletAddress: userAddress,
|
||||||
|
contractAddress: '0x...',
|
||||||
|
tokenId: 1234,
|
||||||
|
chain: 'ethereum'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasAccess) {
|
||||||
|
log('Access granted! Opening exclusive area...');
|
||||||
|
// Unlock special content
|
||||||
|
} else {
|
||||||
|
log('NFT required for access');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for player entering scene
|
||||||
|
export function onEnter() {
|
||||||
|
checkNFTAccess();
|
||||||
|
}`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>3. Build NFT-Gated Game</CardTitle>
|
||||||
|
<CardDescription>Create a treasure hunt with blockchain rewards</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/decentraland-sdk';
|
||||||
|
import { getUserAccount } from '@decentraland/EthereumController';
|
||||||
|
import * as ui from '@dcl/ui-scene-utils';
|
||||||
|
|
||||||
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
||||||
|
|
||||||
|
// Track player progress across sessions
|
||||||
|
class TreasureHunt {
|
||||||
|
private userAddress: string;
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
this.userAddress = await getUserAccount();
|
||||||
|
await this.loadProgress();
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadProgress() {
|
||||||
|
// Fetch player's treasure hunt progress from AeThex
|
||||||
|
const progress = await aethex.users.getData(this.userAddress, {
|
||||||
|
namespace: 'decentraland-treasure-hunt'
|
||||||
|
});
|
||||||
|
|
||||||
|
log(\`Treasures found: \${progress.treasuresFound || 0}/10\`);
|
||||||
|
return progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
async collectTreasure(treasureId: number) {
|
||||||
|
// Update progress on AeThex backend
|
||||||
|
await aethex.users.updateData(this.userAddress, {
|
||||||
|
namespace: 'decentraland-treasure-hunt',
|
||||||
|
data: {
|
||||||
|
treasuresFound: treasureId,
|
||||||
|
lastCollected: Date.now()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Award cross-platform achievement
|
||||||
|
await aethex.achievements.unlock(this.userAddress, 'treasure-hunter');
|
||||||
|
|
||||||
|
// Check if completed all treasures
|
||||||
|
if (treasureId === 10) {
|
||||||
|
this.awardNFTReward();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async awardNFTReward() {
|
||||||
|
// Mint reward NFT via AeThex smart contract integration
|
||||||
|
const receipt = await aethex.web3.mintNFT({
|
||||||
|
walletAddress: this.userAddress,
|
||||||
|
contractAddress: '0x...', // Your reward NFT contract
|
||||||
|
metadata: {
|
||||||
|
name: 'Treasure Hunter',
|
||||||
|
description: 'Completed AeThex Decentraland treasure hunt',
|
||||||
|
image: 'ipfs://...'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ui.displayAnnouncement('Reward NFT Minted! Check your wallet.', 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize treasure hunt
|
||||||
|
const hunt = new TreasureHunt();
|
||||||
|
executeTask(async () => {
|
||||||
|
await hunt.init();
|
||||||
|
});`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Authentication Flow */}
|
||||||
|
<section id="authentication" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">Web3 Wallet Authentication</h3>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Link Decentraland wallets to AeThex Passport for unified cross-chain identity.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Wallet Signature Authentication</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
AeThex uses EIP-4361 (Sign-In with Ethereum) for secure, gasless wallet authentication.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">1</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Connect Wallet</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Player connects MetaMask or WalletConnect in Decentraland</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">2</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Generate Sign-In Message</h4>
|
||||||
|
<p className="text-gray-400 text-sm">AeThex creates EIP-4361 message with nonce and expiration</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">3</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Request Signature</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Player signs message in wallet (no gas fees)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">4</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Verify & Link</h4>
|
||||||
|
<p className="text-gray-400 text-sm">AeThex verifies signature, links wallet to Passport, returns JWT</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/decentraland-sdk';
|
||||||
|
import { getUserAccount, signMessage } from '@decentraland/EthereumController';
|
||||||
|
|
||||||
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
||||||
|
|
||||||
|
async function authenticateWallet() {
|
||||||
|
try {
|
||||||
|
const walletAddress = await getUserAccount();
|
||||||
|
|
||||||
|
// Request Sign-In with Ethereum message from AeThex
|
||||||
|
const { message, nonce } = await aethex.auth.generateSignInMessage({
|
||||||
|
address: walletAddress,
|
||||||
|
chainId: 1, // Ethereum mainnet
|
||||||
|
platform: 'decentraland'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prompt user to sign message (no gas fees)
|
||||||
|
const signature = await signMessage(message);
|
||||||
|
|
||||||
|
// Verify signature and get auth token
|
||||||
|
const { token, passportId } = await aethex.auth.verifySignature({
|
||||||
|
address: walletAddress,
|
||||||
|
signature: signature,
|
||||||
|
nonce: nonce
|
||||||
|
});
|
||||||
|
|
||||||
|
log(\`Authenticated! Passport ID: \${passportId}\`);
|
||||||
|
|
||||||
|
// Store token for subsequent API calls
|
||||||
|
aethex.setAuthToken(token);
|
||||||
|
|
||||||
|
// Now you can access cross-platform features
|
||||||
|
const achievements = await aethex.achievements.list(passportId);
|
||||||
|
displayAchievements(achievements);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
log('Authentication failed:', error);
|
||||||
|
}
|
||||||
|
}`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Best Practices */}
|
||||||
|
<section id="best-practices" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<AlertTriangle className="h-6 w-6 text-yellow-400" />
|
||||||
|
Best Practices & Limitations
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Card className="bg-yellow-950/20 border-yellow-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-yellow-300">Decentraland Limitations</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-gray-300">
|
||||||
|
<p>• <strong>LAND parcel limits:</strong> 20MB scene size, 10k triangles per parcel</p>
|
||||||
|
<p>• <strong>Gas costs:</strong> Minting NFTs requires ETH, use AeThex gasless relayer for UX</p>
|
||||||
|
<p>• <strong>Network latency:</strong> Ethereum confirmations take 15-30 seconds, show loading states</p>
|
||||||
|
<p>• <strong>Browser performance:</strong> Optimize 3D assets, Decentraland runs in WebGL</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-green-950/20 border-green-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-green-300">Web3 Optimization</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-gray-300">
|
||||||
|
<p>• <strong>Cache blockchain data:</strong> Store NFT ownership checks for 5-10 minutes</p>
|
||||||
|
<p>• <strong>Use Polygon for speed:</strong> Deploy NFTs on Polygon (2s confirmations) instead of Ethereum mainnet</p>
|
||||||
|
<p>• <strong>Gasless transactions:</strong> Use AeThex meta-transaction relayer for free UX</p>
|
||||||
|
<p>• <strong>IPFS for metadata:</strong> Store NFT metadata on IPFS, link via AeThex CDN</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Resources */}
|
||||||
|
<section id="resources" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<Package className="h-6 w-6 text-red-400" />
|
||||||
|
Resources & Examples
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Example Scenes</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://play.decentraland.org/?position=-100,100" target="_blank" rel="noopener noreferrer">
|
||||||
|
AeThex Gallery (NFT Gate)
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://github.com/aethex-corp/dcl-treasure-hunt" target="_blank" rel="noopener noreferrer">
|
||||||
|
Treasure Hunt Template
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://github.com/aethex-corp/dcl-nft-rewards" target="_blank" rel="noopener noreferrer">
|
||||||
|
NFT Reward System
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-red-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Documentation</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="/dev-platform/api-reference" target="_blank">
|
||||||
|
AeThex API Reference
|
||||||
|
<Code2 className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://docs.decentraland.org" target="_blank" rel="noopener noreferrer">
|
||||||
|
Decentraland SDK Docs
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="/community" target="_blank">
|
||||||
|
Join Discord Community
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Next Steps */}
|
||||||
|
<Card className="bg-gradient-to-r from-red-950/50 to-orange-950/50 border-red-500/30">
|
||||||
|
<CardContent className="p-8 space-y-4">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">Ready to Build?</h3>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Create blockchain-powered metaverse experiences with Decentraland and AeThex. Build NFT-gated
|
||||||
|
games, DAO governance tools, and cross-chain achievements.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Button className="bg-red-600 hover:bg-red-700" asChild>
|
||||||
|
<a href="/dev-platform/dashboard">Get API Key</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<a href="/dev-platform/quick-start">View Quick Start</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
406
client/pages/docs/integrations/Spatial.tsx
Normal file
406
client/pages/docs/integrations/Spatial.tsx
Normal file
|
|
@ -0,0 +1,406 @@
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Globe, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
|
||||||
|
import CodeBlock from "@/components/dev-platform/CodeBlock";
|
||||||
|
|
||||||
|
export default function SpatialIntegration() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-12">
|
||||||
|
<section id="overview" className="space-y-4">
|
||||||
|
<Badge className="bg-cyan-500/20 text-cyan-100 uppercase tracking-wide">
|
||||||
|
<Globe className="mr-2 h-3 w-3" />
|
||||||
|
Spatial Integration
|
||||||
|
</Badge>
|
||||||
|
<h2 className="text-3xl font-semibold text-white">
|
||||||
|
Build Spatial Experiences with AeThex
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-lg leading-relaxed">
|
||||||
|
Create immersive 3D spaces for Spatial's web-based metaverse platform. Use AeThex's unified API
|
||||||
|
with Spatial's visual editor, TypeScript SDK, and multi-device support (VR, Desktop, Mobile).
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card className="bg-cyan-950/20 border-cyan-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-cyan-300">5M+</div>
|
||||||
|
<div className="text-sm text-gray-400">Monthly Visitors</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="bg-cyan-950/20 border-cyan-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-cyan-300">100K+</div>
|
||||||
|
<div className="text-sm text-gray-400">Created Spaces</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="bg-cyan-950/20 border-cyan-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-cyan-300">No Install</div>
|
||||||
|
<div className="text-sm text-gray-400">Browser-Based</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<section id="features" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">What You Can Build</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Web3 Virtual Events
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Host conferences, exhibitions, and networking events with AeThex authentication and NFT-gated access
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Cross-Device Experiences
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Build once, deploy everywhere - Spatial runs on Quest, desktop browsers, and mobile devices
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Interactive 3D Content
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Sync 3D models, animations, and interactive objects with AeThex backend for dynamic content updates
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Analytics & Engagement
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Track visitor behavior, space engagement metrics, and cross-platform user journeys via AeThex analytics
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Start */}
|
||||||
|
<section id="quick-start" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<Rocket className="h-6 w-6 text-cyan-400" />
|
||||||
|
Quick Start Guide
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>1. Install AeThex Spatial SDK</CardTitle>
|
||||||
|
<CardDescription>Add AeThex scripting components to your Spatial space</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
In Spatial Studio, go to <strong>Scripts</strong> → <strong>Add Package</strong> → Search for <code className="bg-cyan-950/50 px-2 py-1 rounded text-cyan-300">@aethex/spatial-sdk</code>
|
||||||
|
</p>
|
||||||
|
<CodeBlock
|
||||||
|
code={`// Or install via npm for custom scripting
|
||||||
|
npm install @aethex/spatial-sdk
|
||||||
|
|
||||||
|
// Import in your Spatial TypeScript scripts
|
||||||
|
import { AeThexClient } from '@aethex/spatial-sdk';`}
|
||||||
|
language="bash"
|
||||||
|
showLineNumbers={false}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>2. Initialize AeThex in Your Space</CardTitle>
|
||||||
|
<CardDescription>Configure API credentials in Spatial Studio</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/spatial-sdk';
|
||||||
|
|
||||||
|
// Initialize AeThex client in your space script
|
||||||
|
const aethex = new AeThexClient({
|
||||||
|
apiKey: 'your_api_key_here',
|
||||||
|
environment: 'production'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for player join events
|
||||||
|
space.onUserJoined.subscribe((user) => {
|
||||||
|
console.log(\`User \${user.username} joined\`);
|
||||||
|
|
||||||
|
// Fetch user profile from AeThex
|
||||||
|
aethex.users.get(user.id).then(profile => {
|
||||||
|
console.log('AeThex Profile:', profile);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Example: Update player stats when they interact
|
||||||
|
space.onInteract.subscribe((event) => {
|
||||||
|
aethex.achievements.unlock(event.user.id, 'spatial-explorer');
|
||||||
|
});`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>3. Build Interactive Features</CardTitle>
|
||||||
|
<CardDescription>Create cross-platform leaderboards and achievements</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/spatial-sdk';
|
||||||
|
|
||||||
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
||||||
|
|
||||||
|
// Create a leaderboard that syncs across Spatial, Roblox, VRChat
|
||||||
|
async function updateLeaderboard(userId: string, score: number) {
|
||||||
|
await aethex.leaderboards.updateScore('global-leaderboard', {
|
||||||
|
userId: userId,
|
||||||
|
score: score,
|
||||||
|
metadata: {
|
||||||
|
platform: 'spatial',
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch top 10 players across all platforms
|
||||||
|
const topPlayers = await aethex.leaderboards.getTop('global-leaderboard', {
|
||||||
|
limit: 10,
|
||||||
|
platform: 'all'
|
||||||
|
});
|
||||||
|
|
||||||
|
return topPlayers;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example: Score points when player collects item
|
||||||
|
space.onItemCollected.subscribe(async (event) => {
|
||||||
|
const newScore = await updateLeaderboard(event.user.id, 100);
|
||||||
|
console.log('New leaderboard:', newScore);
|
||||||
|
});`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Authentication Flow */}
|
||||||
|
<section id="authentication" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">Player Authentication</h3>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Link Spatial visitors to AeThex Passport for cross-platform identity and progression.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>OAuth Integration</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Spatial supports web-based OAuth flows, making authentication seamless for browser users.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">1</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">User Enters Space</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Spatial script detects new visitor via onUserJoined event</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">2</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Prompt Authentication</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Display 3D UI panel with "Link AeThex Account" button</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">3</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">OAuth Redirect</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Opens <code className="bg-cyan-950/50 px-1 rounded">aethex.dev/oauth/spatial</code> in browser overlay</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">4</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Callback Webhook</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Spatial receives auth token, stores in user session, unlocks cross-platform features</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CodeBlock
|
||||||
|
code={`// Spatial OAuth authentication
|
||||||
|
import { AeThexClient } from '@aethex/spatial-sdk';
|
||||||
|
|
||||||
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
||||||
|
|
||||||
|
// When user clicks "Link Account" button
|
||||||
|
async function initiateAuth(spatialUserId: string) {
|
||||||
|
const authUrl = await aethex.auth.generateOAuthUrl({
|
||||||
|
platform: 'spatial',
|
||||||
|
userId: spatialUserId,
|
||||||
|
redirectUri: 'https://spatial.io/spaces/your-space-id'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Open OAuth flow in browser overlay
|
||||||
|
space.openURL(authUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle OAuth callback
|
||||||
|
space.onOAuthCallback.subscribe(async (token) => {
|
||||||
|
const linkedUser = await aethex.auth.verifyToken(token);
|
||||||
|
console.log('User linked:', linkedUser);
|
||||||
|
|
||||||
|
// Now you can access cross-platform data
|
||||||
|
const achievements = await aethex.achievements.list(linkedUser.id);
|
||||||
|
displayAchievements(achievements);
|
||||||
|
});`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Best Practices */}
|
||||||
|
<section id="best-practices" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<AlertTriangle className="h-6 w-6 text-yellow-400" />
|
||||||
|
Best Practices & Limitations
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Card className="bg-yellow-950/20 border-yellow-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-yellow-300">Spatial Limitations</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-gray-300">
|
||||||
|
<p>• <strong>Browser-based performance:</strong> Keep API calls under 50/minute to avoid throttling</p>
|
||||||
|
<p>• <strong>Asset size limits:</strong> 3D models max 50MB, optimize for web delivery</p>
|
||||||
|
<p>• <strong>Script execution:</strong> Spatial runs TypeScript in sandbox, no native code</p>
|
||||||
|
<p>• <strong>Concurrent users:</strong> Max 50 users per space instance, scale with multiple instances</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-green-950/20 border-green-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-green-300">Performance Optimization</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-gray-300">
|
||||||
|
<p>• <strong>Cache API responses:</strong> Store frequently accessed data in space variables</p>
|
||||||
|
<p>• <strong>Lazy load content:</strong> Only fetch 3D assets when user approaches interactive zones</p>
|
||||||
|
<p>• <strong>Use CDN URLs:</strong> Host large assets on AeThex CDN for faster loading</p>
|
||||||
|
<p>• <strong>Mobile optimization:</strong> Test on mobile devices, reduce draw calls for iOS/Android</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Resources */}
|
||||||
|
<section id="resources" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<Package className="h-6 w-6 text-cyan-400" />
|
||||||
|
Resources & Examples
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Example Spaces</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://spatial.io/@aethex/gallery" target="_blank" rel="noopener noreferrer">
|
||||||
|
AeThex Virtual Gallery
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://spatial.io/@aethex/leaderboard" target="_blank" rel="noopener noreferrer">
|
||||||
|
Cross-Platform Leaderboard
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://github.com/aethex-corp/spatial-starter" target="_blank" rel="noopener noreferrer">
|
||||||
|
Starter Template
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Documentation</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="/dev-platform/api-reference" target="_blank">
|
||||||
|
AeThex API Reference
|
||||||
|
<Code2 className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://docs.spatial.io" target="_blank" rel="noopener noreferrer">
|
||||||
|
Spatial Developer Docs
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="/community" target="_blank">
|
||||||
|
Join Discord Community
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Next Steps */}
|
||||||
|
<Card className="bg-gradient-to-r from-cyan-950/50 to-blue-950/50 border-cyan-500/30">
|
||||||
|
<CardContent className="p-8 space-y-4">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">Ready to Build?</h3>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Create immersive web3 experiences with Spatial and AeThex. Deploy to browsers, VR headsets,
|
||||||
|
and mobile devices with one unified API.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Button className="bg-cyan-600 hover:bg-cyan-700" asChild>
|
||||||
|
<a href="/dev-platform/dashboard">Get API Key</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<a href="/dev-platform/quick-start">View Quick Start</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
448
client/pages/docs/integrations/TheSandbox.tsx
Normal file
448
client/pages/docs/integrations/TheSandbox.tsx
Normal file
|
|
@ -0,0 +1,448 @@
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Box, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
|
||||||
|
import CodeBlock from "@/components/dev-platform/CodeBlock";
|
||||||
|
|
||||||
|
export default function TheSandboxIntegration() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-12">
|
||||||
|
<section id="overview" className="space-y-4">
|
||||||
|
<Badge className="bg-amber-500/20 text-amber-100 uppercase tracking-wide">
|
||||||
|
<Box className="mr-2 h-3 w-3" />
|
||||||
|
The Sandbox Integration
|
||||||
|
</Badge>
|
||||||
|
<h2 className="text-3xl font-semibold text-white">
|
||||||
|
Build in The Sandbox with AeThex
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-lg leading-relaxed">
|
||||||
|
Create voxel-based gaming experiences in The Sandbox metaverse. Integrate AeThex APIs with Game Maker,
|
||||||
|
VoxEdit assets, and LAND ownership for user-generated content at scale.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card className="bg-amber-950/20 border-amber-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-amber-300">2M+</div>
|
||||||
|
<div className="text-sm text-gray-400">Monthly Players</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="bg-amber-950/20 border-amber-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-amber-300">166K+</div>
|
||||||
|
<div className="text-sm text-gray-400">LAND Owners</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="bg-amber-950/20 border-amber-500/20">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="text-3xl font-bold text-amber-300">Polygon</div>
|
||||||
|
<div className="text-sm text-gray-400">Blockchain</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<section id="features" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">What You Can Build</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-amber-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Voxel Game Experiences
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Build games with Game Maker visual editor, sync player progress and rewards via AeThex backend
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-amber-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
NFT Asset Marketplace
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Create VoxEdit assets, list on OpenSea, track ownership and sales via AeThex analytics
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-amber-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
LAND Experiences
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Deploy games across multiple LAND parcels with unified player accounts via AeThex Passport
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-amber-300">
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
Cross-Platform Rewards
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-gray-400">
|
||||||
|
Award achievements in The Sandbox that unlock rewards in Roblox, Minecraft, and web platforms
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Start */}
|
||||||
|
<section id="quick-start" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<Rocket className="h-6 w-6 text-amber-400" />
|
||||||
|
Quick Start Guide
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>1. Install Game Maker + AeThex Plugin</CardTitle>
|
||||||
|
<CardDescription>Add AeThex SDK to your Sandbox experience</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Download The Sandbox Game Maker from <a href="https://www.sandbox.game/en/create/game-maker/" className="text-amber-400 hover:underline" target="_blank" rel="noopener noreferrer">sandbox.game</a>,
|
||||||
|
then install the AeThex plugin from the Asset Library.
|
||||||
|
</p>
|
||||||
|
<div className="bg-amber-950/30 border border-amber-500/30 rounded-lg p-4 space-y-2">
|
||||||
|
<p className="text-sm text-amber-200 font-semibold">Plugin Features:</p>
|
||||||
|
<ul className="space-y-1 text-sm text-gray-300">
|
||||||
|
<li>• <code className="text-amber-300">AeThex API Block</code> - Make HTTP requests to AeThex endpoints</li>
|
||||||
|
<li>• <code className="text-amber-300">Player Auth Block</code> - Link wallet to AeThex Passport</li>
|
||||||
|
<li>• <code className="text-amber-300">Achievement Block</code> - Award cross-platform achievements</li>
|
||||||
|
<li>• <code className="text-amber-300">Leaderboard Block</code> - Display global leaderboards</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>2. Configure AeThex in Game Maker</CardTitle>
|
||||||
|
<CardDescription>Add API credentials via visual scripting</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Drag the <strong>AeThex Config</strong> block into your experience, then enter your API key from the
|
||||||
|
<a href="/dev-platform/dashboard" className="text-amber-400 hover:underline"> Developer Dashboard</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-slate-950/50 border border-amber-500/20 rounded-lg p-4 space-y-3">
|
||||||
|
<p className="text-sm text-amber-200 font-semibold">Visual Script Example:</p>
|
||||||
|
<div className="font-mono text-sm space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-40 px-3 py-1 bg-green-950/50 border border-green-500/30 rounded text-green-300">On Player Enter</div>
|
||||||
|
<div className="text-gray-500">→</div>
|
||||||
|
<div className="w-40 px-3 py-1 bg-amber-950/50 border border-amber-500/30 rounded text-amber-300">AeThex Auth</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-40 px-3 py-1 bg-amber-950/50 border border-amber-500/30 rounded text-amber-300">Player Wallet</div>
|
||||||
|
<div className="text-gray-500">→</div>
|
||||||
|
<div className="w-40 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">Get Profile</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-40 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">Profile Data</div>
|
||||||
|
<div className="text-gray-500">→</div>
|
||||||
|
<div className="w-40 px-3 py-1 bg-purple-950/50 border border-purple-500/30 rounded text-purple-300">Display UI</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>3. Build with TypeScript SDK (Advanced)</CardTitle>
|
||||||
|
<CardDescription>For custom logic beyond Game Maker's visual editor</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Use The Sandbox TypeScript SDK for complex game logic that integrates with AeThex APIs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/sandbox-sdk';
|
||||||
|
import { getPlayerWallet } from '@sandbox-game/sdk';
|
||||||
|
|
||||||
|
// Initialize AeThex
|
||||||
|
const aethex = new AeThexClient({
|
||||||
|
apiKey: process.env.AETHEX_API_KEY,
|
||||||
|
environment: 'production'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Example: Track player progress across LAND parcels
|
||||||
|
class CrossLandProgress {
|
||||||
|
async saveCheckpoint(walletAddress: string, landId: string, checkpoint: number) {
|
||||||
|
await aethex.users.updateData(walletAddress, {
|
||||||
|
namespace: 'sandbox-quest',
|
||||||
|
data: {
|
||||||
|
currentLand: landId,
|
||||||
|
checkpoint: checkpoint,
|
||||||
|
timestamp: Date.now()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadProgress(walletAddress: string) {
|
||||||
|
const data = await aethex.users.getData(walletAddress, {
|
||||||
|
namespace: 'sandbox-quest'
|
||||||
|
});
|
||||||
|
|
||||||
|
return data.checkpoint || 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example: Award NFT for completing quest
|
||||||
|
async function completeQuest(walletAddress: string) {
|
||||||
|
// Update quest status in AeThex
|
||||||
|
await aethex.achievements.unlock(walletAddress, 'sandbox-quest-complete');
|
||||||
|
|
||||||
|
// Mint reward NFT on Polygon
|
||||||
|
const nft = await aethex.web3.mintNFT({
|
||||||
|
walletAddress: walletAddress,
|
||||||
|
contractAddress: '0x...', // Your ASSETS contract on Polygon
|
||||||
|
chain: 'polygon',
|
||||||
|
metadata: {
|
||||||
|
name: 'Quest Completionist',
|
||||||
|
description: 'Completed the AeThex Sandbox Quest',
|
||||||
|
image: 'ipfs://Qm...',
|
||||||
|
attributes: [
|
||||||
|
{ trait_type: 'Rarity', value: 'Epic' },
|
||||||
|
{ trait_type: 'Type', value: 'Achievement Badge' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(\`NFT minted! Token ID: \${nft.tokenId}\`);
|
||||||
|
}`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Authentication Flow */}
|
||||||
|
<section id="authentication" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">Wallet Authentication</h3>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Link Sandbox wallets to AeThex Passport for cross-platform progression.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Polygon Wallet Integration</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-300">
|
||||||
|
The Sandbox uses Polygon network for fast, low-cost transactions. AeThex supports Polygon L2 natively.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">1</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Player Enters Experience</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Game Maker detects player with Polygon wallet connected</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">2</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Check AeThex Link</h4>
|
||||||
|
<p className="text-gray-400 text-sm">AeThex API checks if wallet is already linked to Passport</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">3</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Sign-In Prompt (First Time)</h4>
|
||||||
|
<p className="text-gray-400 text-sm">If not linked, prompt wallet signature (gasless, EIP-4361)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">4</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-1">Cross-Platform Access</h4>
|
||||||
|
<p className="text-gray-400 text-sm">Player can now access achievements, progress from other platforms</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CodeBlock
|
||||||
|
code={`import { AeThexClient } from '@aethex/sandbox-sdk';
|
||||||
|
import { getPlayerWallet, signMessage } from '@sandbox-game/sdk';
|
||||||
|
|
||||||
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
||||||
|
|
||||||
|
async function linkWalletToAeThex() {
|
||||||
|
const walletAddress = await getPlayerWallet();
|
||||||
|
|
||||||
|
// Check if wallet is already linked
|
||||||
|
const isLinked = await aethex.auth.checkWalletLink(walletAddress);
|
||||||
|
|
||||||
|
if (isLinked) {
|
||||||
|
console.log('Wallet already linked!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate Sign-In with Ethereum message
|
||||||
|
const { message, nonce } = await aethex.auth.generateSignInMessage({
|
||||||
|
address: walletAddress,
|
||||||
|
chainId: 137, // Polygon mainnet
|
||||||
|
platform: 'sandbox'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Request signature (no gas fees)
|
||||||
|
const signature = await signMessage(message);
|
||||||
|
|
||||||
|
// Verify and link wallet to Passport
|
||||||
|
const { passportId, token } = await aethex.auth.verifySignature({
|
||||||
|
address: walletAddress,
|
||||||
|
signature: signature,
|
||||||
|
nonce: nonce
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(\`Linked! Passport ID: \${passportId}\`);
|
||||||
|
|
||||||
|
// Load cross-platform achievements
|
||||||
|
const achievements = await aethex.achievements.list(passportId);
|
||||||
|
displayAchievements(achievements);
|
||||||
|
}`}
|
||||||
|
language="typescript"
|
||||||
|
showLineNumbers={true}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Best Practices */}
|
||||||
|
<section id="best-practices" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<AlertTriangle className="h-6 w-6 text-yellow-400" />
|
||||||
|
Best Practices & Limitations
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Card className="bg-yellow-950/20 border-yellow-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-yellow-300">The Sandbox Limitations</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-gray-300">
|
||||||
|
<p>• <strong>Game Maker constraints:</strong> Visual scripting has limited logic complexity</p>
|
||||||
|
<p>• <strong>Voxel performance:</strong> Max 50k voxels per LAND parcel, optimize models</p>
|
||||||
|
<p>• <strong>Player limits:</strong> 100 concurrent players per experience</p>
|
||||||
|
<p>• <strong>Asset file sizes:</strong> VoxEdit models max 10MB, use LOD for large objects</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-green-950/20 border-green-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-green-300">Optimization Tips</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-gray-300">
|
||||||
|
<p>• <strong>Polygon L2 benefits:</strong> 2-second confirmations, $0.001 gas fees vs Ethereum mainnet</p>
|
||||||
|
<p>• <strong>Batch API calls:</strong> Update multiple players' data in single request</p>
|
||||||
|
<p>• <strong>Cache NFT metadata:</strong> Store VoxEdit asset metadata on AeThex CDN</p>
|
||||||
|
<p>• <strong>Mobile support:</strong> The Sandbox mobile app launching 2026, test on Android/iOS</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Resources */}
|
||||||
|
<section id="resources" className="space-y-6">
|
||||||
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
||||||
|
<Package className="h-6 w-6 text-amber-400" />
|
||||||
|
Resources & Examples
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Example Experiences</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://www.sandbox.game/en/experiences/aethex-quest/" target="_blank" rel="noopener noreferrer">
|
||||||
|
AeThex Quest Experience
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://github.com/aethex-corp/sandbox-cross-platform-rewards" target="_blank" rel="noopener noreferrer">
|
||||||
|
Cross-Platform Rewards
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://github.com/aethex-corp/sandbox-nft-gallery" target="_blank" rel="noopener noreferrer">
|
||||||
|
NFT Gallery Template
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-slate-900/50 border-amber-500/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Documentation</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="/dev-platform/api-reference" target="_blank">
|
||||||
|
AeThex API Reference
|
||||||
|
<Code2 className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="https://docs.sandbox.game" target="_blank" rel="noopener noreferrer">
|
||||||
|
The Sandbox Game Maker Docs
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-between" asChild>
|
||||||
|
<a href="/community" target="_blank">
|
||||||
|
Join Discord Community
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Next Steps */}
|
||||||
|
<Card className="bg-gradient-to-r from-amber-950/50 to-yellow-950/50 border-amber-500/30">
|
||||||
|
<CardContent className="p-8 space-y-4">
|
||||||
|
<h3 className="text-2xl font-semibold text-white">Ready to Build?</h3>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Create voxel gaming experiences with The Sandbox and AeThex. Build NFT-powered games with
|
||||||
|
cross-platform rewards on Polygon L2.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Button className="bg-amber-600 hover:bg-amber-700" asChild>
|
||||||
|
<a href="/dev-platform/dashboard">Get API Key</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<a href="/dev-platform/quick-start">View Quick Start</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue