# Setup (/docs/cookbook/rise-slots/setup)

import { Steps, Step } from 'fumadocs-ui/components/steps';
import { Callout } from 'fumadocs-ui/components/callout';

## Project Setup

We'll build this as a monorepo combining a Foundry smart contract project with a Next.js frontend.

<Steps>
  <Step>
    ### Create Project Structure

    ```bash
    mkdir rise-slots && cd rise-slots
    ```
  </Step>

  <Step>
    ### Initialize Foundry Project

    ```bash
    mkdir foundry-app && cd foundry-app
    forge init
    ```

    This creates the Foundry structure:

    * `src/` for contracts
    * `test/` for tests
    * `script/` for deployment scripts
    * `foundry.toml` for configuration
  </Step>

  <Step>
    ### Install OpenZeppelin Contracts

    We'll use OpenZeppelin's ERC20 implementation for the RCT token:

    ```bash
    forge install OpenZeppelin/openzeppelin-contracts
    ```

    Add to `foundry.toml`:

    ```toml
    [profile.default]
    src = "src"
    out = "out"
    libs = ["lib"]
    remappings = ["@openzeppelin/=lib/openzeppelin-contracts/"]
    ```
  </Step>

  <Step>
    ### Initialize Next.js Project

    Return to the root directory and create the Next.js app:

    ```bash
    cd ..
    bun create next-app@latest . --typescript --tailwind --app
    ```

    Select the following options:

    * Use recommended Next.js defaults: **No, customize settings**
    * TypeScript: **Yes**
    * Linter: **None**
    * React Compiler: **Yes**
    * Tailwind CSS: **Yes**
    * `src/` directory: **Yes**
    * App Router: **Yes**
    * Customize import alias: **No**

    <Callout type="info">
      If you've completed another tutorial, you can select **No, reuse previous settings** to skip configuration.
    </Callout>
  </Step>

  <Step>
    ### Install Core Dependencies

    Install the required packages for blockchain interaction:

    ```bash
    bun add viem wagmi rise-wallet @tanstack/react-query shreds ox
    ```

    Package breakdown:

    * `viem`: Ethereum library for contract interaction
    * `wagmi`: React hooks for Ethereum
    * `rise-wallet`: RISE Wallet connector with passkey support
    * `@tanstack/react-query`: Async state management (required by wagmi)
    * `shreds`: RISE's real-time event streaming library
    * `ox`: Cryptography library for session key P256 operations
  </Step>

  <Step>
    ### Install UI Dependencies

    ```bash
    bun add framer-motion class-variance-authority clsx tailwind-merge
    ```

    These provide:

    * `framer-motion`: Animations for spinning reels
    * Tailwind utility functions for styling
  </Step>

  <Step>
    ### Project Structure

    Your project should now look like this:

    ```
    rise-slots/
    ├── foundry-app/
    │   ├── src/
    │   ├── test/
    │   ├── script/
    │   ├── lib/
    │   │   └── openzeppelin-contracts/
    │   └── foundry.toml
    ├── src/
    │   └── app/
    │       ├── page.tsx
    │       ├── layout.tsx
    │       └── providers.tsx (we'll create this)
    ├── package.json
    └── next.config.ts
    ```
  </Step>
</Steps>

## Configuration Files

### Wagmi Configuration

Create `src/config/wagmi.ts`:

```typescript
import { http, createConfig } from 'wagmi'
import { Chains, RiseWallet } from "rise-wallet"
import { riseWallet } from "rise-wallet/wagmi"

// RISE Wallet connector with default config (passkey-based)
export const rwConnector = riseWallet(RiseWallet.defaultConfig)

// Wagmi configuration for RISE Testnet
export const config = createConfig({
  chains: [Chains.riseTestnet],
  connectors: [rwConnector],
  transports: {
    [Chains.riseTestnet.id]: http("https://testnet.riselabs.xyz")
  }
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}
```

<Callout type="info">
  RISE Wallet uses passkeys for authentication - no seed phrases or private keys to manage! Users create an account with biometrics or a security key.
</Callout>

### Provider Setup

Create `src/app/providers.tsx`:

```typescript
"use client"

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from '@/config/wagmi'
import { ReactNode, useState } from 'react'

export function Providers({ children }: { children: ReactNode }) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

### Update Root Layout

Modify `src/app/layout.tsx`:

```typescript
import type { Metadata } from "next"
import { Providers } from "./providers"
import "./globals.css"

export const metadata: Metadata = {
  title: "RISE Slots",
  description: "Instant VRF-powered slot machine with gasless gameplay",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}
```

## Constants Setup

Create `src/constants/index.ts` (we'll populate this after deploying contracts):

```typescript
// Contract addresses (update after deployment)
export const SLOT_MACHINE_ADDRESS = "0x..." as const
export const RCT_TOKEN_ADDRESS = "0x..." as const

// Contract ABIs (we'll import these after compilation)
export const SLOT_MACHINE_ABI = [] as const
export const RCT_ABI = [] as const
```

## Next Steps

Your development environment is ready! Next, we'll write the smart contracts: an ERC20 token (RCT) and a VRF-powered slot machine.

<Callout type="info">
  Make sure you have some testnet ETH for deploying contracts. Get free testnet ETH from [RISE Faucet](https://faucet.testnet.riselabs.xyz).
</Callout>