feat(project): enable chainsms on onchainkit

Author: developerfred

README.md

@@ -1,64 +1,104 @@
+# Onchain Messenger
+
+An decentralized messaging application built with [OnchainKit](https://onchainkit.xyz) that allows users to send messages directly through Base blockchain transactions. Built with privacy and decentralization in mind - no central server, no message storage, just pure blockchain communication.
+
 <p align="center">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/coinbase/onchainkit/main/site/docs/public/logo/v0-27.png">
     <img alt="OnchainKit logo vibes" src="https://raw.githubusercontent.com/coinbase/onchainkit/main/site/docs/public/logo/v0-27.png" width="auto">
   </picture>
 </p>
 
-# Onchain App Template
+## Features
 
-An Onchain App Template build with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel.
+- 💬 Send and receive messages directly through blockchain transactions
+- 🔒 No central server or database - all messages are stored on-chain
+- 🌐 Works on Base network for fast and low-cost messaging
+- 👥 Easy-to-use contact management
+- ⚡ Real-time message updates
+- 🎨 Clean and intuitive UI
+- 🔐 Connect with any Web3 wallet
 
-Play with it live on https://onchain-app-template.vercel.app
+## How it Works
 
-Have fun! ⛵️
+Instead of using a traditional smart contract, this messenger uses transaction data to send messages:
 
-<br />
-
-## Setup
+1. Messages are encoded into transaction data
+2. Transactions are sent with 0 ETH value
+3. Recipients can decode messages from transaction data
+4. Messages are permanently stored on the blockchain
 
-To ensure all components work seamlessly, set the following environment variables in your `.env` file using `.env.local.example` as a reference.
+This approach has several benefits:
+- Lower gas costs (no contract deployment needed)
+- Simpler architecture
+- True decentralization
+- Message permanence
 
-You can find the API key on the [Coinbase Developer Portal's OnchainKit page](https://portal.cdp.coinbase.com/products/onchainkit). If you don't have an account, you will need to create one. 
+## Setup
 
-You can find your Wallet Connector project ID at [Wallet Connect](https://cloud.walletconnect.com).
+To run this project locally, you'll need to set up the following environment variables in your `.env` file:
 
 ```sh
 # See https://portal.cdp.coinbase.com/products/onchainkit
 NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
 
 # See https://cloud.walletconnect.com
 NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT"
+
+# Base network configuration
+NEXT_PUBLIC_NETWORK="base"
 ```
-<br />
 
-## Locally run
+## Local Development
 
 ```sh
-# Install bun in case you don't have it
-curl -fsSL https://bun.sh/install | bash
+# Install dependencies
+bun install
 
-# Install packages
-bun i
-
-# Run Next app
+# Run the development server
 bun run dev
 ```
-<br />
+
+## Technical Architecture
+
+The application is built using:
+- Next.js 13+ with App Router
+- TypeScript for type safety
+- Viem for blockchain interactions
+- OnchainKit for Web3 components
+- TailwindCSS for styling
+- Base network for transactions
+
+Key components:
+- `MessageUtils`: Handles message encoding/decoding
+- `ConversationList`: Manages contact list and chat history
+- `MessageInput`: Handles message sending
+- `MessageList`: Displays conversation threads
+
+## Security Considerations
+
+- All messages are public on the blockchain
+- Anyone can read the message history
+- Addresses are publicly visible
+- No encryption (yet) - future versions may include E2E encryption
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
 
 ## Resources
 
 - [OnchainKit documentation](https://onchainkit.xyz)
-- We use the [OnchainKit Early Adopter](https://github.com/neodaoist/onchainkit-early-adopter) contract written by neodaoist [[X]](https://x.com/neodaoist)
-
-<br />
+- [Base Network documentation](https://docs.base.org)
+- [Viem documentation](https://viem.sh)
 
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Need more help?
+## Support
 
-If you have any questions or need help, feel free to reach out to us on [Discord](https://discord.gg/8gW3h6w5) 
-or open a [Github issue](https://github.com/coinbase/onchainkit/issues) or DMs us 
-on X at [@onchainkit](https://x.com/onchainkit), [@zizzamia](https://x.com/zizzamia), [@fkpxls](https://x.com/fkpxls).
+If you have any questions or need help, you can:
+- Open an issue on GitHub
+- Follow us on X [@codingsh](https://x.com/codingsh)
+- Follow us on Farcaster [@codingsh](https://warp.com/codingsh)

package.json

@@ -1,7 +1,8 @@
 {
-  "name": "onchain-app-template",
+  "name": "onchain-app-chainsms",
   "private": true,
   "version": "0.0.0",
+  "author": "codingsh",
   "scripts": {
     "build": "next build",
     "check": "biome check --write .",
@@ -18,6 +19,7 @@
   },
   "dependencies": {
     "@coinbase/onchainkit": "^0.35.6",
+    "lucide-react": "^0.475.0",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",
@@ -26,24 +28,24 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.0",
-    "@types/node": "^20.11.8",
-    "@types/react": "^18.2.48",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^14.2.0",
+    "@types/node": "22.13.4",
+    "@types/react": "19.0.9",
     "@types/react-dom": "^18.2.7",
     "@vitest/coverage-v8": "^3.0.5",
     "@vitest/ui": "^3.0.5",
     "@wagmi/cli": "latest",
     "autoprefixer": "^10.4.19",
     "bufferutil": "^4.0.7",
     "encoding": "^0.1.13",
-    "lokijs": "^1.5.12",
     "jsdom": "^24.1.0",
+    "lokijs": "^1.5.12",
     "pino-pretty": "^10.2.0",
     "postcss": "^8.4.38",
     "supports-color": "^9.4.0",
     "tailwindcss": "^3.4.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.2.0",
-    "typescript": "^5.3.3",
+    "typescript": "5.7.3",
     "utf-8-validate": "^6.0.3",
     "vitest": "^3.0.5"
   }

src/app/layout.tsx

@@ -19,11 +19,11 @@ export const viewport = {
 };
 
 export const metadata: Metadata = {
-  title: 'Onchain App Template',
-  description: 'Built with OnchainKit',
+  title: 'Onchain Message APP',
+  description: 'Build by codingsh',
   openGraph: {
-    title: 'Onchain App Template',
-    description: 'Built with OnchainKit',
+    title: 'Onchain Message APP',
+    description: 'Build by codingsh',
     images: [`${NEXT_PUBLIC_URL}/vibes/vibes-19.png`],
   },
 };

src/app/page.tsx

@@ -1,52 +1,129 @@
 'use client';
+
+import { useState, useEffect } from 'react';
+import { useAccount } from 'wagmi';
+import { MessageCircle, Menu, X, Send } from 'lucide-react';
 import Footer from 'src/components/Footer';
-import TransactionWrapper from 'src/components/TransactionWrapper';
 import WalletWrapper from 'src/components/WalletWrapper';
 import { ONCHAINKIT_LINK } from 'src/links';
 import OnchainkitSvg from 'src/svg/OnchainkitSvg';
-import { useAccount } from 'wagmi';
 import LoginButton from '../components/LoginButton';
 import SignupButton from '../components/SignupButton';
+import MessageSection from '../components/MessageSection';
 
 export default function Page() {
   const { address } = useAccount();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+    return () => clearTimeout(timer);
+  }, []);
 
   return (
-    <div className="flex h-full w-96 max-w-full flex-col px-1 md:w-[1008px]">
-      <section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
-        <div className="flex w-full flex-row items-center justify-between gap-2 md:gap-0">
-          <a
-            href={ONCHAINKIT_LINK}
-            title="onchainkit"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <OnchainkitSvg />
-          </a>
-          <div className="flex items-center gap-3">
-            <SignupButton />
-            {!address && <LoginButton />}
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo */}
+            <div className="flex items-center">
+              Message APP
+            </div>
+
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center gap-4">
+              <SignupButton />
+              {!address && <LoginButton />}
+            </div>
+
+            {/* Mobile menu button */}
+            <div className="md:hidden">
+              <button
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
+              >
+                {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
+            </div>
           </div>
         </div>
-      </section>
-      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
-        <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
-          <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
-            <p className="font-normal text-indigo-600 text-xl not-italic tracking-[-1.2px]">
-              npm install @coinbase/onchainkit
-            </p>
+
+        {/* Mobile Navigation */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden border-t border-gray-200 bg-white">
+            <div className="px-2 pt-2 pb-3 space-y-1">
+              <SignupButton />
+              {!address && <LoginButton />}
+            </div>
+          </div>
+        )}
+      </header>
+
+      {/* Main Content */}
+      <main className="pt-16 min-h-screen">
+        {isLoading ? (
+          <div className="flex items-center justify-center min-h-[calc(100vh-4rem)]">
+            <div className="flex flex-col items-center gap-4">
+              <div className="animate-spin rounded-full h-12 w-12 border-4 border-indigo-500 border-t-transparent" />
+              <p className="text-gray-500">Loading Onchain Messenger...</p>
+            </div>
+          </div>
+        ) : address ? (
+          <div className="max-w-7xl mx-auto h-[calc(100vh-4rem)]">
+            <div className="h-full bg-white shadow-xl rounded-lg overflow-hidden">
+              <MessageSection address={address} />
+            </div>
           </div>
-        </div>
-        {address ? (
-          <TransactionWrapper address={address} />
         ) : (
-          <WalletWrapper
-            className="w-[450px] max-w-full"
-            text="Sign in to transact"
-          />
+          <div className="max-w-2xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
+            <div className="text-center">
+              <MessageCircle className="mx-auto h-16 w-16 text-indigo-500" />
+              <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+                Onchain Messaging
+              </h1>
+              <p className="mt-4 text-lg text-gray-500">
+                Send and receive messages directly through the blockchain.
+                Secure, decentralized, and always available.
+              </p>
+              <div className="mt-10">
+                <WalletWrapper
+                  className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+                  text="Connect Wallet to Start Messaging"
+                />
+              </div>
+
+              {/* Features */}
+              <div className="mt-20 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                <div className="pt-6">
+                  <div className="flow-root rounded-lg bg-gray-50 px-6 pb-8">
+                    <div className="-mt-6">
+                      <div className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-3 shadow-lg">
+                        <Send className="h-6 w-6 text-white" />
+                      </div>
+                      <h3 className="mt-8 text-lg font-medium text-gray-900">Direct Messaging</h3>
+                      <p className="mt-5 text-base text-gray-500">
+                        Send messages directly through blockchain transactions
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Add more feature cards here */}
+              </div>
+            </div>
+          </div>
         )}
-      </section>
-      <Footer />
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white border-t border-gray-200">
+        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+        <Footer />
+        </div>
+      </footer>
     </div>
   );
-}
+}