mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
init
This commit is contained in:
64
dmtp/client/components/modals/AuthModal.tsx
Normal file
64
dmtp/client/components/modals/AuthModal.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface AuthModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps) {
|
||||
const { authenticate, isAuthenticating, authError } = useAuth();
|
||||
|
||||
const handleAuthenticate = async () => {
|
||||
const success = await authenticate();
|
||||
if (success) {
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 max-w-md w-full mx-4">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
🔐 Authentication Required
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-6">
|
||||
Your session has expired. Please sign a message with your wallet to continue.
|
||||
</p>
|
||||
|
||||
{authError && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 mb-4">
|
||||
{authError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleAuthenticate}
|
||||
disabled={isAuthenticating}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:bg-gray-400"
|
||||
>
|
||||
{isAuthenticating ? 'Authenticating...' : 'Sign Message'}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isAuthenticating}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 mt-4">
|
||||
This signature will not trigger any blockchain transaction or cost gas fees.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
76
dmtp/client/components/modals/NetworkSwitchModal.tsx
Normal file
76
dmtp/client/components/modals/NetworkSwitchModal.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import { useWalletConnection } from '@/hooks/useWalletConnection';
|
||||
import { getCurrentNetwork } from '@/lib/celo';
|
||||
import { useState } from 'react';
|
||||
import { LoadingSpinner } from '../ui/LoadingSpinner';
|
||||
|
||||
interface NetworkSwitchModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function NetworkSwitchModal({ isOpen, onClose }: NetworkSwitchModalProps) {
|
||||
const { switchNetwork } = useWalletConnection();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const network = getCurrentNetwork();
|
||||
|
||||
const handleSwitch = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await switchNetwork();
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white max-w-md w-full p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">Wrong Network</h2>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Please switch to <span className="font-semibold">{network.name}</span> to continue.
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 p-4 mb-6">
|
||||
<p className="text-sm text-red-800">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 py-3 px-4 border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSwitch}
|
||||
disabled={isLoading}
|
||||
className="flex-1 py-3 px-4 bg-blue-600 text-white hover:bg-blue-700 transition-colors font-medium disabled:bg-gray-400"
|
||||
>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<LoadingSpinner size="sm" />
|
||||
Switching...
|
||||
</span>
|
||||
) : (
|
||||
'Switch Network'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
70
dmtp/client/components/modals/TransactionModal.tsx
Normal file
70
dmtp/client/components/modals/TransactionModal.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import { useTransactions } from '@/hooks/useTransactions';
|
||||
import { getExplorerUrl } from '@/lib/celo';
|
||||
import { LoadingSpinner } from '../ui/LoadingSpinner';
|
||||
|
||||
export function TransactionModal() {
|
||||
const { currentTx, updateTransaction } = useTransactions();
|
||||
|
||||
if (!currentTx) return null;
|
||||
|
||||
const handleClose = () => {
|
||||
updateTransaction(currentTx.hash, { ...currentTx });
|
||||
// You might want to actually close the modal here
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white max-w-md w-full p-6">
|
||||
{/* Status Icon */}
|
||||
<div className="flex justify-center mb-4">
|
||||
{currentTx.status === 'pending' && (
|
||||
<LoadingSpinner size="lg" />
|
||||
)}
|
||||
{currentTx.status === 'success' && (
|
||||
<div className="text-6xl">✅</div>
|
||||
)}
|
||||
{currentTx.status === 'failed' && (
|
||||
<div className="text-6xl">❌</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-2xl font-bold text-center text-gray-900 mb-2">
|
||||
{currentTx.status === 'pending' && 'Transaction Pending'}
|
||||
{currentTx.status === 'success' && 'Transaction Successful'}
|
||||
{currentTx.status === 'failed' && 'Transaction Failed'}
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-center text-gray-600 mb-6">{currentTx.description}</p>
|
||||
|
||||
{/* Transaction Hash */}
|
||||
{currentTx.hash && (
|
||||
<div className="bg-gray-50 p-4 mb-6">
|
||||
<p className="text-sm text-gray-600 mb-2">Transaction Hash:</p>
|
||||
<a
|
||||
href={getExplorerUrl(currentTx.hash)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm font-mono text-blue-600 hover:underline break-all"
|
||||
>
|
||||
{currentTx.hash}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
{currentTx.status !== 'pending' && (
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="w-full py-3 bg-blue-600 text-white hover:bg-blue-700 transition-colors font-medium"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user