Solana Wallet Integration with deeplink3s.com

Wallet Integration Container

This container will be populated with the wallet UI component:

Deeplink Examples

Below are examples of deeplinks to the wallet page:

Direct API Calls

Click these buttons to directly call the connectAndPrompt function:

Programmatic Usage:

// Create deeplinks programmatically
const phantomConnectLink = solanaWallet.createDeeplink({
  action: 'connect',
  wallet: 'phantom'
});

// Create connect and prompt link in one step
const connectAndPromptLink = solanaWallet.createDeeplink({
  action: 'connectAndPrompt',
  wallet: 'phantom'
});

// Create transaction deeplink with campaign
const campaignTxLink = solanaWallet.createDeeplink({
  action: 'prompt',
  wallet: 'phantom',
  campaignId: 'special-offer-2024'
});

// Redirect to wallet connect
solanaWallet.connectWallet('phantom');

// Connect and prompt in one step
solanaWallet.connectAndPrompt('phantom', 'campaign123');

// Prompt for transaction only (if already connected)
solanaWallet.promptTransaction({
  wallet: 'phantom',
  campaignId: 'campaign123'
});
    

Integration Guide

Step 1: Include the script

<script src="frontend.js"></script>

Step 2: Add container element (for UI)

<div id="wallet-container"></div>

Step 3: Configure callback handlers

// Access the wallet instance
const wallet = window.solanaWallet;

// Or create your own instance
const myWallet = new SolanaWalletIntegration({
  baseUrl: 'https://deeplink3s.com',
  appId: 'my-custom-app',
  onConnect: (data) => {
    console.log('Connected:', data.walletAddress);
    // Update your UI or state
  },
  onTransaction: (data) => {
    if (data.status === 'confirmed') {
      // Handle successful transaction
    } else if (data.status === 'rejected') {
      // Handle rejected transaction
    } else if (data.status === 'error') {
      // Handle error
    } else if (data.status === 'ineligible') {
      // Handle ineligible wallet
    }
  }
});
    

Step 4: Quick Start with connectAndPrompt

Add these functions to your app for easy integration:

// Connect and prompt in one step - basic usage
function connectAndPromptWallet() {
  window.solanaWallet.connectAndPrompt('phantom');
}

// Connect and prompt with campaign ID
function startCampaignTransaction(campaignId) {
  window.solanaWallet.connectAndPrompt('phantom', campaignId);
}

// Add buttons to your UI
document.getElementById('wallet-btn').addEventListener('click', connectAndPromptWallet);
document.getElementById('campaign-btn').addEventListener('click', () => {
  startCampaignTransaction('spring-2024');
});

// HTML Example:
// <button id="wallet-btn">Connect & Send Transaction</button>
// <button id="campaign-btn">Spring Campaign</button>
    

Step 5: Important features

• connectAndPrompt - Connect and prompt in one action (key improvement)
• Direct API usage - Automatically uses window.WalletPrompt API when on same domain
• Campaign support - Pass campaign IDs for tracking
• Redirect handling - Process status and callback URLs

Testing Status Callbacks

To simulate a redirect back to your app with different statuses:

Live Demonstration

Test the connectAndPrompt functionality with these working examples:

Implementation Code:

// Add event listeners to buttons
document.getElementById('phantom-btn').addEventListener('click', () => {
  window.solanaWallet.connectAndPrompt('phantom');
});

document.getElementById('solflare-btn').addEventListener('click', () => {
  window.solanaWallet.connectAndPrompt('solflare');
});

document.getElementById('campaign-btn').addEventListener('click', () => {
  window.solanaWallet.connectAndPrompt('phantom', 'spring-2024');
});

// Override the transaction callback to show results
const originalInstance = window.solanaWallet;
if (originalInstance) {
  const originalCallback = originalInstance.callbacks.onTransaction;
  
  originalInstance.callbacks.onTransaction = (data) => {
    // Call the original callback
    if (originalCallback) originalCallback(data);
    
    // Display the result
    const resultElement = document.getElementById('demo-result');
    const resultContent = document.getElementById('result-content');
    
    if (resultElement && resultContent) {
      resultElement.style.display = 'block';
      resultContent.textContent = JSON.stringify(data, null, 2);
    }
  };
}