feat: add connector wallet components (ConnectButton, WalletModal)
This commit is contained in:
thesn10
108
app/src/components/connector/connect-button.tsx
Normal file
108
app/src/components/connector/connect-button.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
'use client';
|
||||
|
||||
import { useConnector } from '@solana/connector/react';
|
||||
import { useState } from 'react';
|
||||
import { WalletModal } from './wallet-modal';
|
||||
import { WalletDropdownContent } from './wallet-dropdown-content';
|
||||
import { Button } from '@/components/ui-base/button';
|
||||
import { Menu, MenuTrigger, MenuPortal, MenuPositioner, MenuPopup } from '@/components/ui-base/menu';
|
||||
import { Wallet, ChevronDown } from 'lucide-react';
|
||||
|
||||
interface ConnectButtonProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Custom Avatar component for Base UI
|
||||
function Avatar({
|
||||
src,
|
||||
alt,
|
||||
fallback,
|
||||
className,
|
||||
}: {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
fallback?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
const [hasError, setHasError] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={`relative flex shrink-0 overflow-hidden rounded-full ${className}`}>
|
||||
{src && !hasError ? (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="aspect-square h-full w-full object-cover"
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-muted">{fallback}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Spinner component
|
||||
function Spinner({ className }: { className?: string }) {
|
||||
return (
|
||||
<div
|
||||
className={`animate-spin rounded-full border-2 border-current border-t-transparent ${className || 'h-4 w-4'}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConnectButton({ className }: ConnectButtonProps) {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const { isConnected, isConnecting, account, connector } = useConnector();
|
||||
|
||||
if (isConnected && account && connector) {
|
||||
const shortAddress = `${account.slice(0, 4)}...${account.slice(-4)}`;
|
||||
const walletIcon = connector.icon || undefined;
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuTrigger className={`h-8 px-3 ${className || ''}`}>
|
||||
<Avatar
|
||||
src={walletIcon}
|
||||
alt={connector.name}
|
||||
fallback={<Wallet className="h-3 w-3" />}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
<span className="text-xs">{shortAddress}</span>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</MenuTrigger>
|
||||
<MenuPortal>
|
||||
<MenuPositioner sideOffset={8} align="end">
|
||||
<MenuPopup className="rounded-[20px] p-0 outline-none">
|
||||
<WalletDropdownContent
|
||||
selectedAccount={account}
|
||||
walletIcon={walletIcon}
|
||||
walletName={connector.name}
|
||||
/>
|
||||
</MenuPopup>
|
||||
</MenuPositioner>
|
||||
</MenuPortal>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
// Show loading button when connecting (but modal stays rendered)
|
||||
const buttonContent = isConnecting ? (
|
||||
<>
|
||||
<Spinner className="h-4 w-4" />
|
||||
<span className="text-xs">Connecting...</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="!text-[14px]">Connect Wallet</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button size="sm" variant="outline" onClick={() => setIsModalOpen(true)} className={className}>
|
||||
{buttonContent}
|
||||
</Button>
|
||||
<WalletModal open={isModalOpen} onOpenChange={setIsModalOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
45
app/src/components/connector/shared/hidden-wallet-icons.tsx
Normal file
45
app/src/components/connector/shared/hidden-wallet-icons.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface WalletIconSource {
|
||||
id: string;
|
||||
name: string;
|
||||
icon?: string | null;
|
||||
}
|
||||
|
||||
interface HiddenWalletIconsProps {
|
||||
wallets: WalletIconSource[];
|
||||
maxIcons?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function HiddenWalletIcons({ wallets, maxIcons = 4, className }: HiddenWalletIconsProps) {
|
||||
const previewWallets = wallets.slice(0, maxIcons);
|
||||
const placeholderCount = Math.max(0, maxIcons - previewWallets.length);
|
||||
|
||||
return (
|
||||
<div className={cn('grid grid-cols-2 gap-1', className)} aria-hidden="true">
|
||||
{previewWallets.map(wallet => (
|
||||
<div
|
||||
key={wallet.id}
|
||||
className="relative h-4.5 w-4.5 overflow-hidden rounded-full border border-border bg-muted"
|
||||
>
|
||||
{wallet.icon ? (
|
||||
<img
|
||||
src={wallet.icon}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
draggable={false}
|
||||
onError={e => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: placeholderCount }).map((_, index) => (
|
||||
<div key={`placeholder-${index}`} className="h-4.5 w-4.5 rounded-full border border-border bg-muted" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
85
app/src/components/connector/wallet-dropdown-content.tsx
Normal file
85
app/src/components/connector/wallet-dropdown-content.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
|
||||
import { useConnector } from '@solana/connector/react'
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
selectedAccount: string
|
||||
walletIcon?: string
|
||||
walletName: string
|
||||
}
|
||||
|
||||
export function WalletDropdownContent({ selectedAccount, walletIcon, walletName }: Props) {
|
||||
const { disconnectWallet } = useConnector()
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
function copyAddress() {
|
||||
navigator.clipboard.writeText(selectedAccount)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 1500)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: 230,
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
}}
|
||||
>
|
||||
{walletIcon && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
|
||||
<img src={walletIcon} width={20} height={20} alt={walletName} style={{ borderRadius: 4 }} />
|
||||
<span style={{ fontSize: 13, fontWeight: 600 }}>{walletName}</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.14em', color: 'var(--mut)', marginBottom: 6 }}>
|
||||
CONNECTED WALLET
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: 12,
|
||||
wordBreak: 'break-all',
|
||||
lineHeight: 1.5,
|
||||
color: 'var(--tx)',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{selectedAccount}
|
||||
</div>
|
||||
<button
|
||||
onClick={copyAddress}
|
||||
style={{
|
||||
width: '100%',
|
||||
marginBottom: 6,
|
||||
padding: 8,
|
||||
borderRadius: 8,
|
||||
background: 'var(--bg3)',
|
||||
border: '1px solid var(--bd)',
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{copied ? 'Copied!' : 'Copy address'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => disconnectWallet()}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: 8,
|
||||
borderRadius: 8,
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--danger)',
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
color: 'var(--danger)',
|
||||
}}
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
435
app/src/components/connector/wallet-modal.tsx
Normal file
435
app/src/components/connector/wallet-modal.tsx
Normal file
@@ -0,0 +1,435 @@
|
||||
'use client';
|
||||
|
||||
import { useConnector, type WalletConnectorId, type WalletConnectorMetadata } from '@solana/connector/react';
|
||||
import { Dialog, DialogContent, DialogTitle, DialogClose } from '@/components/ui-base/dialog';
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui-base/collapsible';
|
||||
import { Button } from '@/components/ui-base/button';
|
||||
import { HiddenWalletIcons } from '@/components/connector/shared/hidden-wallet-icons';
|
||||
import { Wallet, ExternalLink, X } from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface WalletModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
// Custom Avatar component
|
||||
function Avatar({
|
||||
src,
|
||||
alt,
|
||||
fallback,
|
||||
className,
|
||||
}: {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
fallback?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
const [hasError, setHasError] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={`relative flex shrink-0 overflow-hidden rounded-full ${className}`}>
|
||||
{src && !hasError ? (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="aspect-square h-full w-full object-cover"
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-muted">{fallback}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Badge component
|
||||
function Badge({ children, className }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-md border border-primary/10 px-2.5 py-0.5 text-xs font-semibold transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80 ${className || ''}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Spinner component
|
||||
function Spinner({ className }: { className?: string }) {
|
||||
return (
|
||||
<div
|
||||
className={`animate-spin rounded-full border-2 border-current border-t-transparent ${className || 'h-4 w-4'}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Separator component
|
||||
function Separator({ className }: { className?: string }) {
|
||||
return <div className={`shrink-0 bg-border h-[1px] w-full ${className || ''}`} />;
|
||||
}
|
||||
|
||||
// Error Alert component
|
||||
function ErrorAlert({ message, onDismiss }: { message: string; onDismiss: () => void }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 rounded-[12px] border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">Connection failed</p>
|
||||
<p className="text-xs opacity-90 mt-0.5">{message}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="shrink-0 rounded-md p-1 hover:bg-destructive/20 transition-colors"
|
||||
aria-label="Dismiss error"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function WalletModal({ open, onOpenChange }: WalletModalProps) {
|
||||
const { walletStatus, isConnecting, connectorId, connectors, connectWallet, disconnectWallet } = useConnector();
|
||||
const status = walletStatus.status;
|
||||
|
||||
const [connectingConnectorId, setConnectingConnectorId] = useState<WalletConnectorId | null>(null);
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [recentlyConnectedConnectorId, setRecentlyConnectedConnectorId] = useState<WalletConnectorId | null>(null);
|
||||
const [isOtherWalletsOpen, setIsOtherWalletsOpen] = useState(false);
|
||||
const [errorConnectorId, setErrorConnectorId] = useState<WalletConnectorId | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const recent = localStorage.getItem('recentlyConnectedConnectorId');
|
||||
if (recent) {
|
||||
setRecentlyConnectedConnectorId(recent as WalletConnectorId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== 'connected') return;
|
||||
if (!connectorId) return;
|
||||
localStorage.setItem('recentlyConnectedConnectorId', connectorId);
|
||||
setRecentlyConnectedConnectorId(connectorId);
|
||||
}, [status, connectorId]);
|
||||
|
||||
function cancelConnection() {
|
||||
setConnectingConnectorId(null);
|
||||
disconnectWallet().catch(() => {});
|
||||
}
|
||||
|
||||
// Clear error state when modal closes or user tries another wallet
|
||||
const clearError = () => {
|
||||
setErrorConnectorId(null);
|
||||
setErrorMessage(null);
|
||||
};
|
||||
|
||||
const handleSelectWallet = async (connector: WalletConnectorMetadata) => {
|
||||
clearError();
|
||||
setConnectingConnectorId(connector.id);
|
||||
try {
|
||||
await connectWallet(connector.id);
|
||||
localStorage.setItem('recentlyConnectedConnectorId', connector.id);
|
||||
setRecentlyConnectedConnectorId(connector.id);
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
// Extract user-friendly error message
|
||||
const message = error instanceof Error ? error.message : 'An unexpected error occurred';
|
||||
if (message.includes('Connection cancelled')) return;
|
||||
|
||||
// Set error state for UI feedback
|
||||
setErrorConnectorId(connector.id);
|
||||
setErrorMessage(message);
|
||||
|
||||
// Log for telemetry/debugging (includes full error details)
|
||||
console.error('Failed to connect wallet:', {
|
||||
wallet: connector.name,
|
||||
connectorId: connector.id,
|
||||
error,
|
||||
message,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
} finally {
|
||||
setConnectingConnectorId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const readyConnectors = connectors.filter(c => c.ready);
|
||||
const notReadyConnectors = connectors.filter(c => !c.ready);
|
||||
|
||||
const sortedReadyConnectors = [...readyConnectors].sort((a, b) => {
|
||||
const aIsRecent = recentlyConnectedConnectorId === a.id;
|
||||
const bIsRecent = recentlyConnectedConnectorId === b.id;
|
||||
if (aIsRecent && !bIsRecent) return -1;
|
||||
if (!aIsRecent && bIsRecent) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
const primaryWallets = sortedReadyConnectors.slice(0, 3);
|
||||
const otherWallets = sortedReadyConnectors.slice(3);
|
||||
|
||||
const getInstallUrl = (walletName: string, walletUrl?: string): string | undefined => {
|
||||
// Prefer wallet metadata URL if available
|
||||
if (walletUrl) return walletUrl;
|
||||
|
||||
// Known wallet install URLs
|
||||
const name = walletName.toLowerCase();
|
||||
if (name.includes('phantom')) return 'https://phantom.app';
|
||||
if (name.includes('solflare')) return 'https://solflare.com';
|
||||
if (name.includes('backpack')) return 'https://backpack.app';
|
||||
if (name.includes('glow')) return 'https://glow.app';
|
||||
if (name.includes('coinbase')) return 'https://www.coinbase.com/wallet';
|
||||
if (name.includes('ledger')) return 'https://www.ledger.com';
|
||||
if (name.includes('trust')) return 'https://trustwallet.com';
|
||||
if (name.includes('exodus')) return 'https://www.exodus.com';
|
||||
|
||||
// Return undefined for unknown wallets to avoid misleading users
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
if (!isOpen) {
|
||||
clearError();
|
||||
if (isConnecting || connectingConnectorId) {
|
||||
cancelConnection();
|
||||
}
|
||||
}
|
||||
onOpenChange(isOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent showCloseButton={false} className="max-w-md rounded-[24px] p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<DialogTitle className="text-lg font-semibold">Connect your wallet</DialogTitle>
|
||||
<DialogClose className="rounded-[16px] h-8 w-8 p-2 border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center cursor-pointer">
|
||||
<X className="h-3 w-3" />
|
||||
</DialogClose>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Error Alert */}
|
||||
{errorMessage && <ErrorAlert message={errorMessage} onDismiss={clearError} />}
|
||||
|
||||
{!isClient ? (
|
||||
<div className="text-center py-8">
|
||||
<Spinner className="h-6 w-6 mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground">Detecting wallets...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{primaryWallets.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="grid gap-2">
|
||||
{primaryWallets.map(connector => {
|
||||
const isThisConnecting =
|
||||
connectingConnectorId === connector.id ||
|
||||
(isConnecting && connectorId === connector.id);
|
||||
const isRecent = recentlyConnectedConnectorId === connector.id;
|
||||
const hasError = errorConnectorId === connector.id;
|
||||
return (
|
||||
<Button
|
||||
key={connector.id}
|
||||
variant="outline"
|
||||
className={`h-auto justify-between p-4 rounded-[16px] w-full ${
|
||||
hasError
|
||||
? 'border-destructive/50 bg-destructive/5 hover:bg-destructive/10'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => handleSelectWallet(connector)}
|
||||
disabled={isThisConnecting}
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="flex-1 text-left">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-md">
|
||||
{connector.name}
|
||||
</span>
|
||||
{isRecent && (
|
||||
<Badge className="text-xs">Recent</Badge>
|
||||
)}
|
||||
</div>
|
||||
{isThisConnecting && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Connecting...
|
||||
</div>
|
||||
)}
|
||||
{hasError && !isConnecting && (
|
||||
<div className="text-xs text-destructive">
|
||||
Click to retry
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isThisConnecting && <Spinner className="h-4 w-4" />}
|
||||
<Avatar
|
||||
src={connector.icon}
|
||||
alt={connector.name}
|
||||
fallback={<Wallet className="h-5 w-5" />}
|
||||
className="h-10 w-10"
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{otherWallets.length > 0 && (
|
||||
<>
|
||||
{primaryWallets.length > 0 && <Separator />}
|
||||
<Collapsible open={isOtherWalletsOpen} onOpenChange={setIsOtherWalletsOpen}>
|
||||
<CollapsibleTrigger className="w-full flex items-center justify-between border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground hover:no-underline dark:bg-input/30 dark:border-input dark:hover:bg-input/50 rounded-[16px] px-4 py-2 cursor-pointer active:scale-[0.98]">
|
||||
<span className="font-semibold text-md">Other Wallets</span>
|
||||
<HiddenWalletIcons wallets={otherWallets} className="shrink-0" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="grid gap-2 pt-2">
|
||||
{otherWallets.map(connector => {
|
||||
const isThisConnecting =
|
||||
connectingConnectorId === connector.id ||
|
||||
(isConnecting && connectorId === connector.id);
|
||||
const isRecent = recentlyConnectedConnectorId === connector.id;
|
||||
const hasError = errorConnectorId === connector.id;
|
||||
return (
|
||||
<Button
|
||||
key={connector.id}
|
||||
variant="outline"
|
||||
className={`h-auto justify-between p-4 rounded-[16px] w-full ${
|
||||
hasError
|
||||
? 'border-destructive/50 bg-destructive/5 hover:bg-destructive/10'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => handleSelectWallet(connector)}
|
||||
disabled={isThisConnecting}
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="flex-1 text-left">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-sm">
|
||||
{connector.name}
|
||||
</span>
|
||||
{isRecent && (
|
||||
<Badge className="text-xs">
|
||||
Recent
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{isThisConnecting && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Connecting...
|
||||
</div>
|
||||
)}
|
||||
{hasError && !isConnecting && (
|
||||
<div className="text-xs text-destructive">
|
||||
Click to retry
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isThisConnecting && (
|
||||
<Spinner className="h-4 w-4" />
|
||||
)}
|
||||
<Avatar
|
||||
src={connector.icon}
|
||||
alt={connector.name}
|
||||
fallback={<Wallet className="h-5 w-5" />}
|
||||
className="h-10 w-10"
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</>
|
||||
)}
|
||||
|
||||
{notReadyConnectors.length > 0 && (
|
||||
<>
|
||||
{(primaryWallets.length > 0 || otherWallets.length > 0) && <Separator />}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-muted-foreground px-1">
|
||||
{readyConnectors.length > 0 ? 'Unavailable Wallets' : 'Wallets'}
|
||||
</h3>
|
||||
<div className="grid gap-2">
|
||||
{notReadyConnectors.slice(0, 3).map(connector => {
|
||||
const installUrl = getInstallUrl(connector.name);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={connector.id}
|
||||
className="flex items-center justify-between p-4 rounded-[16px] w-full border bg-background shadow-xs"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar
|
||||
src={connector.icon}
|
||||
alt={connector.name}
|
||||
fallback={<Wallet className="h-4 w-4" />}
|
||||
className="h-8 w-8"
|
||||
/>
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-sm">
|
||||
{connector.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Not available
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{installUrl && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 px-2 cursor-pointer"
|
||||
onClick={() => window.open(installUrl, '_blank')}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{connectors.length === 0 && (
|
||||
<div className="rounded-lg border border-dashed p-8 text-center">
|
||||
<Wallet className="mx-auto h-12 w-12 text-muted-foreground mb-3" />
|
||||
<h3 className="font-semibold mb-2">No Wallets Detected</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
Install a Solana wallet extension to get started
|
||||
</p>
|
||||
<div className="flex gap-2 justify-center">
|
||||
<Button
|
||||
onClick={() => window.open('https://phantom.app', '_blank')}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
Get Phantom
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => window.open('https://backpack.app', '_blank')}
|
||||
>
|
||||
Get Backpack
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user