Skip to content

fix: solana wallet connection #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
logesh2496 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: solana wallet connection #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@
"lint": "next lint"
},
"dependencies": {
"@privy-io/react-auth": "^3.3.0",
"@radix-ui/react-aspect-ratio": "^1.1.7",
"@radix-ui/react-avatar": "^1.1.10",
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-slot": "^1.2.3",
"@solana-program/memo": "^0.9.0",
"@solana/kit": "^3.0.3",
"@solana/react": "^4.0.0",
"@supabase/supabase-js": "^2.55.0",
"@tanstack/react-query": "^5.81.5",
"@wallet-standard/core": "^1.1.1",
"@wallet-standard/react": "^1.0.1",
"axios": "^1.12.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
Expand Down
3,560 changes: 713 additions & 2,847 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

168 changes: 78 additions & 90 deletions src/components/hybrid-target.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { useState } from "react";
import { useEffect } from "react";
import { motion } from "framer-motion";
import {
Wallet,
Expand All @@ -10,7 +10,8 @@ import {
ExternalLink,
} from "lucide-react";
import { Button } from "./ui/button";
import { usePrivyWallet } from "@/lib/hooks/usePrivyWallet";
import { useSolana } from "./solana-provider";
import { WalletConnectButton } from "./wallet-connect-button";

// Mindshare Configuration
const MINDSHARE_TARGET_YAPPERS = 2500;
Expand All @@ -23,34 +24,60 @@ export default function HybridTarget({
// const [currentYappers, setCurrentYappers] = useState(totalUsersCount);
// const [engagementScore, setEngagementScore] = useState(MOCK_ENGAGEMENT_SCORE);

// Use Privy wallet hook
const {
ready,
authenticated,
user,
solanaWallet,
hasSolanaWallet,
isSigning,
isSigned,
signature,
connectWallet,
signMessage,
disconnectWallet,
hasMinimumBalance,
} = usePrivyWallet();
} = useSolana();

const mindshareProgress = Math.min(
(currentYappers / MINDSHARE_TARGET_YAPPERS) * 100,
100
);

const handleSignMessage = async () => {
try {
if (!authenticated) {
await connectWallet();
return;
// Post signature to API once signed
useEffect(() => {
const postSignature = async () => {
if (isSigned && signature && solanaWallet && solanaWallet.address) {
try {
const response = await fetch(
`${process.env.NEXT_PUBLIC_SONGJAM_SERVER}/leaderboard/update-signature`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
walletAddress: solanaWallet.address,
signature: signature,
}),
}
);

if (!response.ok) {
const errorData = await response.json();
console.error("Failed to submit signature:", errorData);
} else {
const data = await response.json();
console.log("Signature submitted successfully:", data);
alert("Signature submitted successfully.");
}
} catch (error) {
console.error("Error submitting signature:", error);
}
}
};

postSignature();
}, [isSigned, signature]);

const handleSignMessage = async () => {
try {
if (!hasSolanaWallet) {
alert("Please connect a Solana wallet to sign the message.");
return;
Expand All @@ -71,15 +98,6 @@ export default function HybridTarget({
}
};

const handleConnectWallet = async () => {
try {
await connectWallet();
} catch (error) {
console.error("Failed to connect wallet:", error);
alert("Failed to connect wallet. Please try again.");
}
};

return (
<div className="max-w-4xl mx-auto my-8 px-4">
{/* Main Progress Container */}
Expand Down Expand Up @@ -168,78 +186,48 @@ export default function HybridTarget({
{/* Wallet Connection and Sign Message Button */}
<div className="mt-4 space-y-3">
{!authenticated ? (
<Button
onClick={handleConnectWallet}
disabled={!ready}
className="w-full bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-700 hover:to-cyan-700 text-white font-bold py-3 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
>
<span className="flex items-center justify-center gap-2">
<Wallet className="w-5 h-5" />
Sign now
</span>
</Button>
) : authenticated && !hasSolanaWallet ? (
<div className="text-center">
<p className="text-sm text-yellow-400 mb-2">
Please connect a Solana wallet to continue
<div className="flex flex-col gap-3">
<WalletConnectButton />
<p className="text-xs text-center text-gray-400">
Connect your Solana wallet to participate
</p>
</div>
) : (
<>
<Button
onClick={handleConnectWallet}
variant="outline"
className="w-full border-purple-500/50 text-purple-300 hover:bg-purple-500/10"
onClick={handleSignMessage}
disabled={isSigning || isSigned}
className="w-full bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-700 hover:to-cyan-700 text-white font-bold py-3 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
>
<span className="flex items-center justify-center gap-2">
<ExternalLink className="w-4 h-4" />
Add Solana Wallet
</span>
{isSigning ? (
<span className="flex items-center justify-center gap-2">
<motion.div
animate={{ rotate: 360 }}
transition={{
duration: 1,
repeat: Infinity,
ease: "linear",
}}
className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full"
/>
Signing...
</span>
) : isSigned ? (
<span className="flex items-center justify-center gap-2">
<MessageSquare className="w-5 h-5" />
Message Signed ✓
</span>
) : (
<span className="flex items-center justify-center gap-2">
<MessageSquare className="w-5 h-5" />
Sign Message
</span>
)}
</Button>
</div>
) : (
<Button
onClick={handleSignMessage}
disabled={isSigning || isSigned}
className="w-full bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-700 hover:to-cyan-700 text-white font-bold py-3 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
>
{isSigning ? (
<span className="flex items-center justify-center gap-2">
<motion.div
animate={{ rotate: 360 }}
transition={{
duration: 1,
repeat: Infinity,
ease: "linear",
}}
className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full"
/>
Signing...
</span>
) : isSigned ? (
<span className="flex items-center justify-center gap-2">
<MessageSquare className="w-5 h-5" />
Message Signed ✓
</span>
) : (
<span className="flex items-center justify-center gap-2">
<MessageSquare className="w-5 h-5" />
Sign Message
</span>
)}
</Button>
)}

{/* Wallet Info */}
{authenticated && hasSolanaWallet && solanaWallet && (
<div className="text-center">
<p className="text-xs text-gray-400">
Connected: {solanaWallet.address.slice(0, 8)}...
{solanaWallet.address.slice(-8)}
</p>
{signature && (
<p className="text-xs text-green-400 mt-1">
Signature: {signature.slice(0, 16)}...
</p>
)}
</div>
<div className="flex justify-center">
<WalletConnectButton />
</div>
</>
)}
</div>
</div>
Expand Down
28 changes: 3 additions & 25 deletions src/components/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,15 @@
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { PrivyProvider } from "@privy-io/react-auth";
import { useState } from "react";
import { base } from "viem/chains";
// import { toSolanaWalletConnectors } from "@privy-io/react-auth/solana";
import { SolanaProvider } from "./solana-provider";

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

return (
<PrivyProvider
appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || "your-privy-app-id"}
config={{
// Configure supported chains including Solana
supportedChains: [base],
// Configure login methods
loginMethods: ["wallet"],
// externalWallets: {
// solana: {
// // connectors: toSolanaWalletConnectors(),
// },
// },
// Appearance configuration
appearance: {
walletChainType: "ethereum-and-solana",
theme: "dark",
accentColor: "#8B5CF6",
logo: "https://your-logo-url.com/logo.png",
},
}}
>
<SolanaProvider>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</PrivyProvider>
</SolanaProvider>
);
}
Loading