Replace Solana wallet with Swig wallet implementation

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

package-lock.json

@@ -42,11 +42,12 @@
     "@coral-xyz/anchor-cli": "^0.31.2",
     "@project-serum/anchor": "^0.26.0",
     "@solana/spl-token": "^0.4.13",
-    "@solana/wallet-adapter-base": "0.9.27",
-    "@solana/wallet-adapter-react": "0.15.39",
-    "@solana/wallet-adapter-react-ui": "0.9.39",
-    "@solana/wallet-adapter-wallets": "0.19.37",
     "@solana/web3.js": "1.98.2",
+    "@getpara/web-sdk": "^1.11.0",
+    "@swig-wallet/classic": "0.2.0-beta.4",
+    "@swig-wallet/coder": "0.2.0-beta.2",
+    "@noble/curves": "^1.3.0",
+    "@noble/hashes": "^1.3.3",
     "ajv": "^8.17.1",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",

package.json

@@ -1,19 +1,8 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import Image from 'next/image';
-import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
-import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
-import {
-  PhantomWalletAdapter,
-} from '@solana/wallet-adapter-wallets';
-import {
-  WalletModalProvider,
-  WalletDisconnectButton,
-  WalletMultiButton
-} from '@solana/wallet-adapter-react-ui';
 import { clusterApiUrl } from '@solana/web3.js';
 
 // Import styles
-import '@solana/wallet-adapter-react-ui/styles.css';
 import './styles/guided-workflow.css';
 import './styles/wallet-connection-guide.css';
 
@@ -27,8 +16,9 @@ import { UserProfile } from './components/UserProfile';
 import TradingGuidedWorkflow from './components/guided-workflow/TradingGuidedWorkflow';
 import ErrorBoundary from './components/ErrorBoundary';
 
-// Import wallet safety utilities
-import { SafeWalletProvider, useSafeWallet } from './contexts/WalletContextProvider';
+// Import Swig wallet utilities
+import { SwigWalletProvider, useSwigWallet } from './contexts/SwigWalletProvider';
+import { SwigWalletButton } from './components/SwigWalletButton';
 import { initializeWalletConflictPrevention } from './utils/walletConflictPrevention';
 import { createConnection, getNetworkConnection } from './utils/rpcConnection';
 
@@ -89,10 +79,10 @@ const SVM_NETWORKS = {
   }
 };
 
-// Inner component that can use the wallet hook
+// Inner component that can use the Swig wallet hook
 const AppContent = () => {
-  // Use safe wallet context instead of direct wallet adapter
-  const wallet = useSafeWallet();
+  // Use Swig wallet context instead of Solana wallet adapter
+  const wallet = useSwigWallet();
 
   // State for selected network
   const [selectedNetwork, setSelectedNetwork] = useState('solana');
@@ -134,7 +124,7 @@ const AppContent = () => {
     setActiveTab(tab);
   };
 
-  // Status indicator for wallet connection
+  // Status indicator for Swig wallet connection
   const renderWalletStatus = () => {
     if (wallet.error) {
       return (
@@ -258,7 +248,7 @@ const AppContent = () => {
               }>
                 <div className="wallet-wrapper">
                   {renderWalletStatus()}
-                  <WalletMultiButton />
+                  <SwigWalletButton />
                   {wallet.error && (
                     <button 
                       className="wallet-retry-button" 
@@ -416,14 +406,6 @@ const AppContent = () => {
 };
 
 const App = () => {
-  // Set up wallet adapters - updated for latest wallet adapter versions
-  const wallets = useMemo(
-    () => [
-      new PhantomWalletAdapter(),
-    ],
-    []
-  );
-  
   // Define network for connection provider
   const network = SVM_NETWORKS['solana'];
 
@@ -452,15 +434,9 @@ const App = () => {
         </div>
       </div>
     }>
-      <ConnectionProvider endpoint={network.endpoint} config={network.connectionConfig} connection={connection}>
-        <WalletProvider wallets={wallets} autoConnect>
-          <SafeWalletProvider>
-            <WalletModalProvider>
-              <AppContent />
-            </WalletModalProvider>
-          </SafeWalletProvider>
-        </WalletProvider>
-      </ConnectionProvider>
+      <SwigWalletProvider>
+        <AppContent />
+      </SwigWalletProvider>
     </ErrorBoundary>
   );
 };

src/App.js

@@ -0,0 +1,42 @@
+/**
+ * Para SDK Client Configuration
+ * 
+ * This module initializes the Para SDK client for OAuth authentication
+ * and wallet management functionality.
+ */
+
+import { Environment, ParaWeb } from '@getpara/web-sdk';
+
+// Para API key - in production, this should be set via environment variables
+const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY || process.env.PARA_API_KEY;
+
+if (!API_KEY) {
+  console.warn('Para API key not found. Please set NEXT_PUBLIC_PARA_API_KEY in your environment variables.');
+  // For development, we'll create a mock client
+}
+
+/**
+ * Para Web SDK client instance
+ * Uses Beta environment by default
+ */
+export const para = API_KEY 
+  ? new ParaWeb(Environment.BETA, API_KEY)
+  : {
+    // Mock client for development when API key is not available
+    isFullyLoggedIn: () => Promise.resolve(false),
+    getWallets: () => Promise.resolve({}),
+    logout: () => Promise.resolve(),
+    getFarcasterConnectURL: () => Promise.resolve(''),
+    waitForFarcasterStatus: () => Promise.resolve({ userExists: false, username: '' }),
+    initiateUserLogin: () => Promise.resolve(''),
+    getSetUpBiometricsURL: () => Promise.resolve(''),
+    waitForLoginAndSetup: () => Promise.resolve({}),
+    waitForPasskeyAndCreateWallet: () => Promise.resolve({}),
+    getOAuthURL: () => Promise.resolve(''),
+    waitForOAuth: () => Promise.resolve({ email: '', userExists: false }),
+    createWallet: () => Promise.resolve({}),
+    findWalletByAddress: () => Promise.resolve(null),
+    signMessage: () => Promise.resolve({ signature: '' })
+  };
+
+export default para;

src/client/para.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
+import { SwigWalletButton } from './SwigWalletButton';
 import { Tooltip } from './common';
 import WalletConnectionGuide from './WalletConnectionGuide';
 
@@ -60,7 +60,7 @@ const ConnectWalletPrompt = ({
                 </div>
                 <p>{displayMessage}</p>
                 <div className="wallet-connect-actions">
-                  <WalletMultiButton />
+                  <SwigWalletButton />
                   <button 
                     className="guided-connection-button"
                     onClick={handleShowGuide}

src/components/ConnectWalletPrompt.js

@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
-import { WalletMultiButton, WalletDisconnectButton } from '@solana/wallet-adapter-react-ui';
-import { useSafeWallet } from '@/contexts/WalletContextProvider';
+import { SwigWalletButton } from './SwigWalletButton';
+import { useSwigWallet } from '@/contexts/SwigWalletProvider';
 import { createLogger } from '@/utils/logger';
 
 // Import context
@@ -28,7 +28,7 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
     networks 
   } = useContext(AppContext);
 
-  const { connected, publicKey } = useSafeWallet();
+  const { connected, publicKey } = useSwigWallet();
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [currentLocale, setCurrentLocale] = useState('en');
 
@@ -199,15 +199,10 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
                 </span>
               )}
 
-              {/* Wallet connection button */}
-              {!connected && (
-                <div className="header-wallet-container">
-                  <WalletMultiButton />
-                </div>
-              )}
-              
-              {/* Disconnect button for connected users */}
-              {connected && <WalletDisconnectButton />}
+              {/* Swig wallet connection button */}
+              <div className="header-wallet-container">
+                <SwigWalletButton />
+              </div>
             </div>
           </div>
         </header>

src/components/Layout.js

@@ -0,0 +1,68 @@
+/**
+ * OAuth Authentication Buttons Component
+ * 
+ * Provides OAuth login options for Swig wallet authentication
+ */
+
+import React from 'react';
+import { OAuthMethod } from '@getpara/web-sdk';
+
+/**
+ * OAuth authentication buttons component
+ * @param {Object} props - Component props
+ * @param {Function} props.onSelect - Callback when OAuth method is selected
+ * @param {boolean} props.isLoading - Loading state
+ */
+export const OAuthButtons = ({ onSelect, isLoading = false }) => {
+  const oauthMethods = [
+    {
+      method: OAuthMethod.GOOGLE,
+      name: 'Google',
+      icon: '🔍',
+      color: 'bg-blue-500 hover:bg-blue-600',
+    },
+    {
+      method: OAuthMethod.APPLE,
+      name: 'Apple',
+      icon: '🍎',
+      color: 'bg-gray-800 hover:bg-gray-900',
+    },
+    {
+      method: OAuthMethod.FARCASTER,
+      name: 'Farcaster',
+      icon: '🟣',
+      color: 'bg-purple-500 hover:bg-purple-600',
+    },
+  ];
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center p-4">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+        <span className="ml-2 text-gray-600">Authenticating...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3 w-full max-w-sm">
+      <h3 className="text-lg font-semibold text-center mb-2">Sign in to continue</h3>
+      {oauthMethods.map(({ method, name, icon, color }) => (
+        <button
+          key={method}
+          onClick={() => onSelect(method)}
+          className={`flex items-center justify-center gap-3 px-4 py-3 rounded-lg text-white font-medium transition-colors ${color} disabled:opacity-50 disabled:cursor-not-allowed`}
+          disabled={isLoading}
+        >
+          <span className="text-xl">{icon}</span>
+          <span>Continue with {name}</span>
+        </button>
+      ))}
+      <div className="text-xs text-gray-500 text-center mt-2">
+        By continuing, you agree to our Terms of Service and Privacy Policy
+      </div>
+    </div>
+  );
+};
+
+export default OAuthButtons;

src/components/OAuthButtons.js

@@ -1,5 +1,4 @@
 import React, { useState, useContext } from 'react';
-import { useConnection } from '@solana/wallet-adapter-react';
 import { SystemProgram, Keypair, LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js';
 // Import BN from @coral-xyz/anchor as a fallback for @project-serum/anchor
 import { BN } from '@coral-xyz/anchor';
@@ -12,7 +11,7 @@ import {
   ConfirmationDialog 
 } from './common';
 
-import { useSafeWallet } from '../contexts/WalletContextProvider';
+import { useSwigWallet } from '../contexts/SwigWalletProvider';
 import { useActionDebounce, useInputValidation } from '../hooks/useActionDebounce';
 import { validateSolAmount, validateFiatAmount, validateMarketRate } from '../utils/validation';
 import { createLogger } from '../utils/logger';
@@ -29,8 +28,9 @@ import DemoIndicator from './DemoIndicator';
 const logger = createLogger('OfferCreation');
 
 const OfferCreation = ({ onStartGuidedWorkflow }) => {
-  const wallet = useSafeWallet();
-  const { connection } = useConnection();
+  const wallet = useSwigWallet();
+  // For Swig wallet, we'll get connection from the wallet context
+  const connection = wallet.getConnection ? wallet.getConnection() : null;
   const { program, network } = useContext(AppContext);
 
   const [solAmount, setSolAmount] = useState('');

src/components/OfferCreation.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
-import { useWallet } from '@solana/wallet-adapter-react';
+import { SwigWalletButton } from './SwigWalletButton';
+import { useSwigWallet } from '../contexts/SwigWalletProvider';
 import LanguageSelector from './LanguageSelector';
 import { createUserRewardsAccount, hasUserRewardsAccount } from '../utils/rewardTransactions';
 import { REWARD_CONSTANTS, UI_CONFIG } from '../constants/rewardConstants';
 
 const OnboardingModal = ({ isOpen, onComplete, onSkip }) => {
-  const { publicKey, connected, wallet } = useWallet();
+  const { publicKey, connected, wallet } = useSwigWallet();
   const [currentStep, setCurrentStep] = useState(0);
   const [isVisible, setIsVisible] = useState(false);
   const [selectedLanguage, setSelectedLanguage] = useState('en');
@@ -178,7 +178,7 @@ const OnboardingModal = ({ isOpen, onComplete, onSkip }) => {
             </div>
           </div>
           <div className="wallet-connect-section">
-            <WalletMultiButton />
+            <SwigWalletButton />
           </div>
         </div>
       )

src/components/OnboardingModal.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useWallet } from '@solana/wallet-adapter-react';
+import { useSwigWallet } from '../contexts/SwigWalletProvider';
 import { fetchCompleteRewardData, clearUserCache } from '../utils/rewardQueries';
 import { 
     claimRewards, 
@@ -22,7 +22,7 @@ import {
 } from '../constants/rewardConstants';
 
 const RewardDashboard = () => {
-    const { publicKey, connected, wallet } = useWallet();
+    const { publicKey, connected, wallet } = useSwigWallet();
     const autoClaimManager = useAutoClaimManager(wallet, null); // connection would be passed in real implementation
     const [rewards, setRewards] = useState(DEFAULT_REWARD_DATA.userRewards);
     const [rewardToken, setRewardToken] = useState(DEFAULT_REWARD_DATA.rewardToken);