Onchain Social

npx create-onchain --mini
cd your-mini-app-name
npm install

npm run dev

import { useMiniKit } from "@coinbase/onchainkit/minikit";

export default function App() {
  const { context } = useMiniKit();

  // Verified user information (always available)
  const userFid = context?.user?.fid;
  
  // Additional user data (when available)
  const username = context?.user?.username;
  const displayName = context?.user?.displayName;
  const pfpUrl = context?.user?.pfpUrl;

  // Client information
  const isAdded = context?.client?.added; // Whether user has added this Mini App
  const location = context?.location; // Where the Mini App was launched from

  return (
    <div className="mini-app">
      <h1>Welcome{displayName ? `, ${displayName}` : ''}!</h1>
      <p>Your FID: {userFid}</p>
      {username && <p>Username: @{username}</p>}
      {isAdded && <p>✅ You've added this Mini App</p>}
      {location && <p>Launched from: {location}</p>}
    </div>
  );
}

import { useState, useEffect } from 'react';
import { useMiniKit } from "@coinbase/onchainkit/minikit";

export default function VotingApp() {
  const { context } = useMiniKit();
  const [votes, setVotes] = useState({ option1: 0, option2: 0 });
  const [userVote, setUserVote] = useState(null);

  const handleVote = async (option) => {
    if (userVote) return; // Prevent double voting

    // Submit vote to your backend
    const response = await fetch('/api/vote', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        fid: context?.user?.fid,
        option,
        location: context?.location
      })
    });

    if (response.ok) {
      setUserVote(option);
      // Update vote counts
      setVotes(prev => ({
        ...prev,
        [option]: prev[option] + 1
      }));
    }
  };

  return (
    <div className="voting-app">
      <h2>What's your preference?</h2>
      
      <div className="vote-options">
        <button 
          onClick={() => handleVote('option1')}
          disabled={userVote}
          className={userVote === 'option1' ? 'selected' : ''}
        >
          Option A ({votes.option1} votes)
        </button>
        
        <button 
          onClick={() => handleVote('option2')}
          disabled={userVote}
          className={userVote === 'option2' ? 'selected' : ''}
        >
          Option B ({votes.option2} votes)
        </button>
      </div>

      {userVote && (
        <p>Thanks for voting! Your choice: {userVote}</p>
      )}
    </div>
  );
}

import { 
  Transaction, 
  TransactionButton, 
  TransactionStatus 
} from '@coinbase/onchainkit/transaction';

export default function OnchainMiniApp() {
  const { context } = useMiniKit();
  
  const handleTransaction = async () => {
    // Create transaction based on social context
    const txData = {
      to: '0x...',
      value: '1000000000000000000', // 1 ETH
      data: '0x...'
    };
    
    return txData;
  };

  return (
    <div className="onchain-mini-app">
      <h2>Onchain Social Action</h2>
      <p>Initiated by FID: {context?.user?.fid}</p>
      
      <Transaction
        calls={[handleTransaction]}
        onSuccess={(receipt) => {
          console.log('Transaction successful:', receipt);
        }}
      >
        <TransactionButton text="Execute Onchain Action" />
        <TransactionStatus />
      </Transaction>
    </div>
  );
}

npm install -g vercel
vercel --prod