Futureverse Workshop

All packages have been preinstalled for you, we will work through the steps as we go. If you fall behind, you can pick up on the next step and copy in the files needed to catch you up.

To run this app, please run npm run dev

Important Links

• Playground
• Faucet
• Portal
• SDK Documentation
• Pass.Online Client Creation
• shadcn/ui - Components For Demo

Getting Started

• Fork In Replit - Head here to fork this project in Replit.

API Keys

• Pass.Online Client Portal - If you want to create your own Pass Online, create it here, ensuring you use the ExAcT url of your Replit URL for the callback url.
• Wallet Connect

Steps

Step 1 - Connect using FuturePass

Step 1 Guide

• Create config.ts Auth Config
  • All Environment Variables
  • Add Auth Config
  • Add Wagmi Config
  • Add Query Client
• Add Futureverse Providers
  • React Query Provider
  • Futureverse Wagmi Providers
  • Futureverse Auth Provider
  • Auth UI Provider
• Add Login Button to Nav Bar
• Add /login Callback Page To Handle UserSession
• Display User Address In Nav Bar

Step 2 - Interact with Blockchain

Step 2 Guide

• Add TrnProvider Provider
• Query Users Root and XRP Balances and display in Menu Bar

Step 3 - Mint NFTs to users FuturePass

Step 3 Guide

• Create a mint page to mint NFT
• Create Protected Routes
  • Create /mint route
    • Add Mint Control component
    • Add Modal

Step 4 - Mint SFTs to users FuturePass

Step 4 Guide

• Create a mint page to mint multiple SFTs
  • Create /accessories and associated components
  • useGetSftUserTokens for each wallet and collection

Step 5 - Introduce AR

Step 5 Guide

• Add Asset Register Provider to Futureverse Providers
  • AssetRegisterProvider.tsx
• Add Page to query users assets and display minted tokens
  • Create /my-collection route and implement useAssets Hook
  • Create NFT Component to display NFT

Step 6 - Equip / Unequip Items

Step 6 Guide

• Add Component's to enable equipping SFTs to base NFT
  • Create ARModal for Signing
  • Add NftAssetLinkerAccessories for Accessories
  • Add NftAssetLinkerSlots for Slots from Schema
  • Add NFTAssetLinker Component to NFTToken Component passing in Slots.
  • Adding NftAssetLinker.tsx component, with useGetAsset and useGetSlots hooks to NftToken.tsx

Step 7 - Added Bonus

Step 7 Guide

• Customise Log In
• Add RNS Functionality