Feat/sdk error handling

package.json

@@ -15,7 +15,7 @@
     "@noble/hashes": "^1.7.2",
     "@scure/base": "^1.2.4",
     "@tanstack/react-query": "^5.90.0",
-    "@unicitylabs/sphere-sdk": "^0.5.4",
+    "@unicitylabs/sphere-sdk": "^0.5.6",
     "lucide-react": "^0.552.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/components/ui/BaseModal.tsx

@@ -61,7 +61,7 @@ export function BaseModal({
         <div
           ref={panelRef}
           onClick={(e) => e.stopPropagation()}
-          className={`relative w-full ${sizeClasses[size]} max-h-[70dvh] sm:max-h-[600px] bg-white dark:bg-[#111] border border-neutral-200 dark:border-white/10 rounded-3xl shadow-2xl pointer-events-auto flex flex-col overflow-hidden opacity-0 scale-95 translate-y-4 transition-all duration-300 ease-out ${className}`}
+          className={`relative w-full ${sizeClasses[size]} max-h-[70dvh] sm:max-h-150 bg-white dark:bg-[#111] border border-neutral-200 dark:border-white/10 rounded-3xl shadow-2xl pointer-events-auto flex flex-col overflow-hidden opacity-0 scale-95 translate-y-4 transition-all duration-300 ease-out ${className}`}
         >
           {/* Background Orbs */}
           {showOrbs && (

src/components/wallet/UnlockWallet.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Loader2, Lock, AlertCircle } from 'lucide-react';
+import { getErrorMessage } from '@/sdk/errors';
 
 interface UnlockWalletProps {
   onUnlock: (password: string) => Promise<void>;
@@ -20,7 +21,7 @@ export function UnlockWallet({ onUnlock }: UnlockWalletProps) {
     try {
       await onUnlock(password);
     } catch (err) {
-      setError((err as Error).message || 'Failed to unlock wallet');
+      setError(getErrorMessage(err));
     } finally {
       setIsLoading(false);
     }
@@ -36,7 +37,7 @@ export function UnlockWallet({ onUnlock }: UnlockWalletProps) {
         {/* Lock Icon */}
         <div className="relative">
           <div className="absolute inset-0 rounded-2xl blur-lg opacity-50 bg-orange-500" />
-          <div className="relative w-16 h-16 rounded-2xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-xl shadow-orange-500/25">
+          <div className="relative w-16 h-16 rounded-2xl bg-linear-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-xl shadow-orange-500/25">
             <Lock className="w-8 h-8 text-white" />
           </div>
         </div>
@@ -78,7 +79,7 @@ export function UnlockWallet({ onUnlock }: UnlockWalletProps) {
           <button
             type="submit"
             disabled={isLoading || !password.trim()}
-            className="w-full py-3 px-4 bg-gradient-to-r from-orange-500 to-orange-600 text-white text-sm font-medium rounded-xl shadow-lg shadow-orange-500/25 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-[0.98] transition-transform"
+            className="w-full py-3 px-4 bg-linear-to-r from-orange-500 to-orange-600 text-white text-sm font-medium rounded-xl shadow-lg shadow-orange-500/25 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-[0.98] transition-transform"
           >
             {isLoading ? (
               <span className="flex items-center justify-center gap-2">

src/components/wallet/modals/ConnectIntentModal.tsx

@@ -15,6 +15,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { MessageSquare, Key, Zap, Loader2 } from 'lucide-react';
 import { ERROR_CODES } from '@unicitylabs/sphere-sdk/connect';
+import { getErrorMessage } from '@/sdk/errors';
 import { BaseModal } from '@/components/ui/BaseModal';
 import { ModalHeader } from '@/components/ui/ModalHeader';
 import { Button } from '@/components/ui/Button';
@@ -264,7 +265,7 @@ function L1SendIntentModal({
       await resolveIntent(id, { result: { success: true, txHash: result.txHash } });
       onClose();
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Send failed');
+      setError(getErrorMessage(e));
     } finally {
       setLoading(false);
     }
@@ -402,7 +403,7 @@ function DmIntentModal({
       });
       onClose();
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to send DM');
+      setError(getErrorMessage(e));
     } finally {
       setLoading(false);
     }
@@ -488,7 +489,7 @@ function SignMessageIntentModal({
       await resolveIntent(id, { result: { signature: signResult.signature } });
       onClose();
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Signing failed');
+      setError(getErrorMessage(e));
     } finally {
       setLoading(false);
     }

src/components/wallet/modals/LookupModal.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
 import { Key, Search, Loader2, Copy, Check } from 'lucide-react';
 import { BaseModal, ModalHeader } from '@/components/ui';
 import { useSphereContext, useIdentity } from '@/sdk';
+import { getErrorMessage } from '@/sdk/errors';
 
 interface ResolvedInfo {
   nametag?: string;
@@ -77,7 +78,7 @@ export function LookupModal({ isOpen, onClose }: LookupModalProps) {
         setResult(info as ResolvedInfo);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Lookup failed');
+      setError(getErrorMessage(err));
     } finally {
       setIsLoading(false);
     }

src/components/wallet/modals/PaymentRequestModal.tsx

@@ -2,6 +2,7 @@ import { Check, Sparkles, Trash2, Loader2, XIcon, ArrowRight, Clock, Receipt, Al
 import { useTransfer } from '@/sdk';
 import { useState } from 'react';
 import { BaseModal, ModalHeader, EmptyState } from '@/components/ui';
+import { getErrorMessage } from '@/sdk/errors';
 
 export enum PaymentRequestStatus {
   PENDING = 'pending',
@@ -56,11 +57,7 @@ export function PaymentRequestsModal({ isOpen, onClose, requests, pendingCount,
       await transfer({ recipient, amount: req.amount.toString(), coinId: req.coinId });
       paid(req);
     } catch (error: unknown) {
-      let errorMessage = 'Transaction failed';
-      if (error instanceof Error) {
-        errorMessage = error.message.includes('Insufficient') ? 'Insufficient funds' : error.message;
-      }
-      setErrors(prev => ({ ...prev, [req.id]: errorMessage }));
+      setErrors(prev => ({ ...prev, [req.id]: getErrorMessage(error) }));
     } finally {
       setProcessingId(null);
     }

src/components/wallet/modals/SendModal.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { ArrowRight, Loader2, User, CheckCircle, Coins, Hash, Copy, Check } from 'lucide-react';
 import type { Asset } from '@unicitylabs/sphere-sdk';
 import { useAssets, useTransfer, useSphereContext, CurrencyUtils } from '@/sdk';
+import { getErrorMessage } from '@/sdk/errors';
 import { BaseModal, ModalHeader, Button } from '@/components/ui';
 
 type Step = 'recipient' | 'asset' | 'amount' | 'confirm' | 'processing' | 'success';
@@ -169,7 +170,7 @@ export function SendModal({ isOpen, onClose, prefill }: SendModalProps) {
       setStep('success');
     } catch (e: unknown) {
       console.error(e);
-      setRecipientError(e instanceof Error ? e.message : "Transfer failed");
+      setRecipientError(getErrorMessage(e));
       setStep('confirm');
     }
   };

src/components/wallet/modals/SendPaymentRequestModal.tsx

@@ -10,6 +10,7 @@ import { ArrowRight, Loader2, User, CheckCircle, Hash, Receipt } from 'lucide-re
 import { TokenRegistry, toSmallestUnit } from '@unicitylabs/sphere-sdk';
 import { BaseModal, ModalHeader, Button } from '@/components/ui';
 import { POPUP_MESSAGES } from '@/shared/messages';
+import { getErrorMessage } from '@/sdk/errors';
 
 type Step = 'recipient' | 'coin' | 'amount' | 'confirm' | 'processing' | 'success';
 
@@ -154,7 +155,7 @@ export function SendPaymentRequestModal({ isOpen, onClose, prefill }: SendPaymen
       setRequestId(result.requestId || null);
       setStep('success');
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'Failed to send payment request');
+      setError(getErrorMessage(e));
       setStep('confirm');
     }
   };

src/components/wallet/modals/SwapModal.tsx

@@ -3,6 +3,7 @@ import { ArrowDownUp, Loader2, TrendingUp, CheckCircle, ArrowDown } from 'lucide
 import type { Asset } from '@unicitylabs/sphere-sdk';
 import { useIdentity, useAssets, useTransfer } from '@/sdk';
 import { CurrencyUtils } from '@/sdk';
+import { getErrorMessage } from '@/sdk/errors';
 import { BaseModal, ModalHeader, Button } from '@/components/ui';
 
 type Step = 'swap' | 'processing' | 'success';
@@ -85,7 +86,7 @@ export function SwapModal({ isOpen, onClose }: SwapModalProps) {
       setStep('success');
     } catch (e: unknown) {
       console.error('Swap failed:', e);
-      setError(e instanceof Error ? e.message : 'Swap failed');
+      setError(getErrorMessage(e));
       setStep('swap');
     }
   };

src/components/wallet/modals/TopUpModal.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Plus, Sparkles, CheckCircle, XCircle } from 'lucide-react';
 import { useIdentity } from '@/sdk';
 import { BaseModal, ModalHeader, Button } from '@/components/ui';
+import { getErrorMessage } from '@/sdk/errors';
 
 const FAUCET_API_URL = 'https://faucet.unicity.network/api/v1/faucet/request';
 
@@ -54,7 +55,7 @@ export function TopUpModal({ isOpen, onClose }: TopUpModalProps) {
             success: false,
             coin,
             amount,
-            message: error instanceof Error ? error.message : 'Unknown error',
+            message: getErrorMessage(error),
           }))
         )
       );
@@ -68,7 +69,7 @@ export function TopUpModal({ isOpen, onClose }: TopUpModalProps) {
         setTimeout(() => setFaucetSuccess(false), 3000);
       }
     } catch (error) {
-      setFaucetError(error instanceof Error ? error.message : 'Failed to request tokens');
+      setFaucetError(getErrorMessage(error));
     } finally {
       setIsFaucetLoading(false);
     }

src/components/wallet/onboarding/StartScreen.tsx

@@ -23,11 +23,9 @@ export function StartScreen({
   return (
     <div className="relative z-10 w-full max-w-90">
       {/* Icon with glow effect */}
-      <div className="relative w-18 h-18 mx-auto mb-6">
-        <div className="absolute inset-0 bg-linear-to-br from-orange-500 to-orange-600 rounded-2xl blur-xl opacity-45" />
-        <div className="relative w-full h-full rounded-2xl bg-linear-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-xl shadow-orange-500/25">
-          <UnionIcon size={36} />
-        </div>
+      <div className="relative w-20 h-20 mx-auto mb-6 flex items-center justify-center">
+        <div className="absolute inset-0 bg-orange-500 rounded-full blur-2xl opacity-30" />
+        <UnionIcon size={56} className="relative" />
       </div>
 
       <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2 tracking-tight">

src/components/wallet/onboarding/useOnboardingFlow.ts

@@ -9,6 +9,7 @@
  */
 import { useState, useCallback, useEffect } from "react";
 import { useSphereContext } from "@/sdk/context";
+import { getErrorMessage } from "@/sdk/errors";
 
 export type NametagAvailability = "idle" | "checking" | "available" | "taken";
 
@@ -202,7 +203,7 @@ export function useOnboardingFlow() {
         setProcessingStatus("Setup complete!");
         setIsProcessingComplete(true);
       } catch (e) {
-        const message = e instanceof Error ? e.message : "Invalid recovery phrase";
+        const message = getErrorMessage(e);
         setError(message);
         setStep("restore");
       } finally {
@@ -233,7 +234,7 @@ export function useOnboardingFlow() {
             setProcessingStep(2);
           } catch (e) {
             // Nametag registration failed but wallet was created
-            console.error("Nametag registration failed:", e);
+            console.error("Unicity ID registration failed:", e);
             setProcessingStep(2);
           }
         } else {
@@ -243,7 +244,7 @@ export function useOnboardingFlow() {
         setProcessingStatus("Setup complete!");
         setIsProcessingComplete(true);
       } catch (e) {
-        const message = e instanceof Error ? e.message : "Failed to create wallet";
+        const message = getErrorMessage(e);
         setError(message);
         setStep("passwordSetup");
       } finally {

src/components/wallet/shared/AddressSelector.tsx

@@ -24,7 +24,7 @@ export function AddressSelector({ compact = true }: AddressSelectorProps) {
       setCopied('nametag');
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy nametag:', err);
+      console.error('Failed to copy Unicity ID:', err);
     }
   }, [nametag]);