A Next.js application that provides privacy-first blockchain wallet analysis with human-readable insights, gas tracking, and security alerts.
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone <your-repo-url>
cd cipher- Install dependencies:
npm install- Set up environment variables:
Create a
.env.localfile in the root directory:
NEXT_PUBLIC_PROJECT_ID=your_reown_project_idGet your Project ID from Reown Cloud
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 to view the application.
- Framework: Next.js 14+ (App Router)
- Web3 Integration:
- Reown AppKit (formerly WalletConnect)
- Wagmi - React Hooks for Ethereum
- Viem - TypeScript Interface for Ethereum
- Styling: Tailwind CSS
- Icons: Lucide React
- State Management: React Hooks + TanStack Query
{
"@reown/appkit": "latest",
"@reown/appkit-adapter-wagmi": "latest",
"wagmi": "latest",
"viem": "latest",
"@tanstack/react-query": "latest",
"next": "14+",
"react": "18+",
"lucide-react": "latest"
}This project uses Reown AppKit (formerly WalletConnect) for Web3 wallet connections.
- Create
app/context/Web3Modal.tsx:
'use client'
import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet, polygon } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
const queryClient = new QueryClient()
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID!
const metadata = {
name: 'CIPHER',
description: 'Privacy-First Crypto Wallet Analyzer',
url: 'https://cipher.app',
icons: ['https://avatars.githubusercontent.com/u/37784886']
}
const networks = [mainnet, arbitrum, polygon]
const wagmiAdapter = new WagmiAdapter({
networks,
projectId
})
createAppKit({
adapters: [wagmiAdapter],
networks,
projectId,
metadata,
features: {
analytics: true
}
})
export function Web3Modal({ children }: { children: React.ReactNode }) {
return (
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</WagmiProvider>
)
}- Wrap your app in
app/layout.tsx:
import { Web3Modal } from './context/Web3Modal'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Web3Modal>{children}</Web3Modal>
</body>
</html>
)
}- Privacy-First: All computations happen client-side, your data never leaves your device
- Multi-Wallet Support: Connect with 20+ wallets via Reown AppKit
- Gas Tracking: Monitor transaction fees and optimize spending
- Risk Detection: Identify dangerous token approvals and security threats
- Activity Insights: Human-readable transaction history and visualizations
- AI Chat Support: Interactive AI assistant for wallet analysis
cipher/
├── app/
│ ├── components/
│ │ └── landing-page.tsx # Main landing page component
│ ├── context/
│ │ └── Web3Modal.tsx # Web3 provider setup
│ ├── dashboard/
│ │ └── page.tsx # Dashboard page
│ └── page.tsx # Home page
├── public/
│ ├── Cipher.png # Logo
│ └── assets/ # Feature images
└── README.md
If you're migrating from RainbowKit:
- Uninstall RainbowKit:
npm uninstall @rainbow-me/rainbowkit wagmi viem- Install Reown AppKit:
npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query- Update imports:
// Before (RainbowKit)
import { ConnectButton } from '@rainbow-me/rainbowkit'
// After (Reown)
import { useAppKit } from '@reown/appkit/react'
import { useAccount } from 'wagmi'- Update button usage:
// Before
<ConnectButton.Custom>
{({ openConnectModal }) => (
<button onClick={openConnectModal}>Connect</button>
)}
</ConnectButton.Custom>
// After
const { open } = useAppKit()
const { isConnected, address } = useAccount()
<button onClick={() => open()}>
{isConnected ? address : 'Connect Wallet'}
</button>Create a .env.local file:
# Reown Project ID (Required)
NEXT_PUBLIC_PROJECT_ID=your_project_id_here
# Optional: API Keys
NEXT_PUBLIC_ALCHEMY_API_KEY=your_alchemy_key
NEXT_PUBLIC_INFURA_API_KEY=your_infura_key- Push your code to GitHub
- Import project in Vercel
- Add environment variables
- Deploy
Build the application:
npm run buildStart production server:
npm startContributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
Built with ❤️ using Next.js and Reown AppKit