diff --git a/package.json b/package.json index 06ab706..dc178e2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@albedo-link/intent": "^0.13.0", "@hookform/resolvers": "^3.10.0", "@lovable.dev/cloud-auth-js": "^0.0.3", + "@walletconnect/core": "^2.17.0", + "@walletconnect/universal-provider": "^2.17.0", "@radix-ui/react-accordion": "^1.2.11", "@radix-ui/react-alert-dialog": "^1.1.14", "@radix-ui/react-aspect-ratio": "^1.1.7", diff --git a/src/components/WalletSetupModal.tsx b/src/components/WalletSetupModal.tsx index 1922799..85a3c04 100644 --- a/src/components/WalletSetupModal.tsx +++ b/src/components/WalletSetupModal.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { supabase } from "@/integrations/supabase/client"; import { useAuth } from "@/hooks/useAuth"; -import { Wallet, Loader2, CheckCircle2, AlertCircle, Smartphone, ExternalLink } from "lucide-react"; +import { Wallet, Loader2, CheckCircle2, AlertCircle, Smartphone, ExternalLink, Link2 } from "lucide-react"; import { useTranslation } from "react-i18next"; import { useMobileWallet } from "@/hooks/useMobileWallet"; @@ -26,15 +26,16 @@ function friendlyError( const WalletSetupModal = ({ onComplete }: WalletSetupModalProps) => { const { user } = useAuth(); - const { isMobile, isFreighterReady, connect } = useMobileWallet(); + const { isMobile, isFreighterReady, connect, connectToProvider, availableProviders } = useMobileWallet(); const { t } = useTranslation(); const [saving, setSaving] = useState(false); const [connecting, setConnecting] = useState(false); + const [selectedProvider, setSelectedProvider] = useState<"freighter" | "albedo" | "walletconnect" | null>(null); const [error, setError] = useState(null); const [done, setDone] = useState(false); const [address, setAddress] = useState(null); - const [walletProvider, setWalletProvider] = useState<"freighter" | "albedo" | null>(null); + const [walletProvider, setWalletProvider] = useState<"freighter" | "albedo" | "walletconnect" | null>(null); const handleConnect = async () => { setConnecting(true); @@ -53,6 +54,26 @@ const WalletSetupModal = ({ onComplete }: WalletSetupModalProps) => { setConnecting(false); }; + const handleConnectToProvider = async (provider: "freighter" | "albedo" | "walletconnect") => { + setConnecting(true); + setError(null); + setSelectedProvider(provider); + + const result = await connectToProvider(provider); + + if (!result.ok) { + setError(friendlyError(result.error, result.cancelled, t)); + setConnecting(false); + setSelectedProvider(null); + return; + } + + setAddress(result.address); + setWalletProvider(result.provider); + setConnecting(false); + setSelectedProvider(null); + }; + const handleSave = async () => { if (!address || !user) return; setSaving(true); @@ -81,7 +102,20 @@ const WalletSetupModal = ({ onComplete }: WalletSetupModalProps) => { const truncate = (addr: string) => addr.length > 16 ? `${addr.slice(0, 8)}...${addr.slice(-6)}` : addr; - const providerLabel = isMobile ? "Albedo" : isFreighterReady ? "Freighter" : "Albedo"; + const getProviderIcon = (provider: "freighter" | "albedo" | "walletconnect") => { + if (provider === "walletconnect") return ; + if (provider === "freighter") return ; + return ; + }; + + const getProviderLabel = (provider: "freighter" | "albedo" | "walletconnect") => { + if (provider === "walletconnect") return "WalletConnect"; + if (provider === "freighter") return "Freighter"; + return "Albedo"; + }; + + const shouldShowMultipleProviders = isMobile || !isFreighterReady; + const showMultipleOptions = shouldShowMultipleProviders && availableProviders.length > 1; return (
@@ -103,7 +137,7 @@ const WalletSetupModal = ({ onComplete }: WalletSetupModalProps) => {

{t("wallet_setup.title")}

- {isMobile ? t("wallet_setup.subtitle_albedo") : t("wallet_setup.subtitle_freighter")} + {walletProvider ? `via ${getProviderLabel(walletProvider)}` : t("wallet_setup.select_provider")}

@@ -114,11 +148,11 @@ const WalletSetupModal = ({ onComplete }: WalletSetupModalProps) => {

{truncate(address)}

{walletProvider && (

- via {walletProvider} + via {getProviderLabel(walletProvider)}

)} - ) : !isMobile && !isFreighterReady ? ( + ) : !isMobile && !isFreighterReady && !showMultipleOptions ? (

{t("wallet_setup.freighter_not_detected")}

@@ -151,6 +185,36 @@ const WalletSetupModal = ({ onComplete }: WalletSetupModalProps) => { {t("wallet_setup.install_freighter_alt")}
+ ) : showMultipleOptions ? ( +
+ {availableProviders.map((provider) => ( + + ))} +
) : (