# Setup (/docs/cookbook/rise-wallet-quickstart/setup) import { Tabs, Tab } from 'fumadocs-ui/components/tabs'; import { Callout } from 'fumadocs-ui/components/callout'; ## Project Setup ### Create a New Next.js Project First, create a new Next.js application with TypeScript: ```bash npx create-next-app@latest rise-wallet-app ``` ```bash yarn create next-app rise-wallet-app ``` ```bash pnpm create next-app rise-wallet-app ``` ```bash bun create next-app rise-wallet-app ``` When prompted, select these 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** If you've completed another tutorial, you can select **No, reuse previous settings** to skip configuration. Navigate into your project: ```bash cd rise-wallet-app ``` ### Install Dependencies Install the required packages for wallet integration: ```bash npm install rise-wallet wagmi viem @tanstack/react-query ``` ```bash yarn add rise-wallet wagmi viem @tanstack/react-query ``` ```bash pnpm add rise-wallet wagmi viem @tanstack/react-query ``` ```bash bun add rise-wallet wagmi viem @tanstack/react-query ``` **Package breakdown:** * `rise-wallet` - RISE Wallet SDK with wagmi connector * `wagmi` - React hooks for Ethereum wallet connections * `viem` - Low-level library for transactions and contract interactions * `@tanstack/react-query` - Server state management for async operations *** ## Configuration ### Set Up Wagmi Config Create a wagmi configuration file to connect to RISE Testnet: ```typescript title="src/config/wagmi.ts" import { Chains, RiseWallet, riseWallet } from "rise-wallet"; import { createConfig, http } from "wagmi"; export const config = createConfig({ chains: [Chains.riseTestnet], connectors: [riseWallet(RiseWallet.defaultConfig)], transports: { [Chains.riseTestnet.id]: http("https://testnet.riselabs.xyz"), }, }); declare module "wagmi" { interface Register { config: typeof config; } } ``` This configuration: * Targets RISE Testnet as the only chain * Uses the RISE Wallet connector * Sets up HTTP RPC transport for testnet ### Create Provider Component Create a provider to wrap your app with wagmi and React Query: ```typescript title="src/app/provider.tsx" "use client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { type ReactNode, useState } from "react"; import { WagmiProvider } from "wagmi"; import { config } from "@/config/wagmi"; export function Provider(props: { children: ReactNode }) { const [queryClient] = useState(() => new QueryClient()); return ( {props.children} ); } ``` ### Update Root Layout Wrap your application with the provider in the root layout: ```typescript title="src/app/layout.tsx" {3,10-12} import type { Metadata } from "next"; import "./globals.css"; import { Provider } from "./provider"; export const metadata: Metadata = { title: "RISE Wallet Quickstart", description: "Learn how to integrate RISE Wallet with passkey and session key flows", }; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ### Define Contract Constants Create a constants file with contract addresses and ABIs: ```typescript title="src/constants/index.ts" export const SIMPLE_TOKEN_ADDRESS = "0x2Fe6B2b6e895fc0Ad192A249C3240685Ecbb177C"; export const COUNTER_ADDRESS = "0xD38794596a78A0E446a8A61d9d04466118b30809"; export const SIMPLE_TOKEN_ABI = [ { type: "function", name: "mint", inputs: [ { name: "to", type: "address" }, { name: "amount", type: "uint256" }, ], outputs: [], stateMutability: "nonpayable", }, { type: "function", name: "transfer", inputs: [ { name: "to", type: "address" }, { name: "amount", type: "uint256" }, ], outputs: [{ name: "", type: "bool" }], stateMutability: "nonpayable", }, { type: "function", name: "balanceOf", inputs: [{ name: "account", type: "address" }], outputs: [{ name: "", type: "uint256" }], stateMutability: "view", }, ] as const; export const COUNTER_ABI = [ { type: "function", name: "increment", inputs: [], outputs: [], stateMutability: "nonpayable", }, { type: "function", name: "count", inputs: [], outputs: [{ name: "", type: "uint256" }], stateMutability: "view", }, ] as const; ``` These contracts are already deployed on RISE Testnet for testing purposes. Feel free to deploy your own, using the previous two tutorials! *** ## Building the UI Components ### Create a Wallet Button Build a reusable button component for connecting/disconnecting the wallet: ```typescript title="src/components/WalletButton.tsx" "use client"; import { useEffect, useState } from "react"; import { useConnect, useConnection, useDisconnect } from "wagmi"; export function WalletButton() { const [mounted, setMounted] = useState(false); const [copied, setCopied] = useState(false); const { address, connector } = useConnection(); const { connect, connectors } = useConnect(); const { disconnect } = useDisconnect(); useEffect(() => { setMounted(true); }, []); const handleCopy = async () => { if (address) { await navigator.clipboard.writeText(address); setCopied(true); setTimeout(() => setCopied(false), 2000); } }; if (!mounted) return null; if (address && connector) { return (

); } return ( ); } ``` **Key features:** * Shows truncated address when connected * Copy address to clipboard functionality * Disconnect button * Hydration-safe rendering (prevents SSR mismatches) ### Create a Navigation Bar Build a navbar to navigate between flows: ```typescript title="src/components/Navbar.tsx" "use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { WalletButton } from "./WalletButton"; export function Navbar() { const pathname = usePathname(); return ( ); } ``` ### Create a Home Page Build a landing page with flow selection cards: ```typescript title="src/app/page.tsx" "use client"; import Link from "next/link"; import { Navbar } from "@/components/Navbar"; import { useConnection } from "wagmi"; import { useEffect, useState } from "react"; export default function Home() { const [mounted, setMounted] = useState(false); const { address } = useConnection(); useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return (

RISE Wallet Quickstart

Choose a transaction signing pattern to get started

{address ? (

🔐

Passkey Flow

Direct transaction signing with wallet approval popups for each action

⏱️

Session Key Flow

Background signing with pre-authorized permissions for seamless UX

) : (

Connect your wallet to explore transaction flows

)}

); } ``` Now you have all the basic setup complete. In the next sections, you'll implement the passkey and session key flows.