Onboarding für Solana-Apps: Warum eingebettete Wallets überzeugen

Solana Wallet Adapter

Am einfachsten ist das Onboarding, wenn sich Nutzer über eine vorhandene Wallet wie Phantom oder Solflare verbinden. Diese Methode eignet sich gut für Nutzer, die Solana bereits kennen und eine Wallet eingerichtet haben.

Ein guter Ausgangspunkt ist der Solana Wallet Adapter. Er bietet:

• Eine standardisierte API für eine unkomplizierte Integration
• Grundfunktionen für Wallet-Verbindungen und das Signieren von Transaktionen
• Die Flexibilität von Open Source, damit du ihn an die Anforderungen deiner App anpassen kannst

Der Solana Wallet Adapter lässt sich schnell und einfach implementieren. Damit ist er eine zuverlässige Wahl für Nutzer mit vorhandenen Wallets.

Neben der Unterstützung mehrerer Wallets bietet er eine standardisierte Integration für konsistente Wallet-Funktionen und sofort einsetzbare UI-Komponenten wie Schaltflächen zum Verbinden einer Wallet. Außerdem optimiert er die Performance, sodass Transaktionen schneller signiert und gesendet werden als mit direkten APIs wie window.solana.

Dank seines Open-Source-Designs können Entwickler den Solana Wallet Adapter an die spezifischen Anforderungen ihrer App anpassen. Community-Implementierungen erweitern zudem seine Kompatibilität mit Frameworks wie Vue, Angular, Svelte und TypeScript.

Der Adapter fügt deinem Projekt jedoch zusätzliche Abhängigkeiten hinzu. Das kann den Aufwand für Entwickler erhöhen.

Der Adapter bietet zwar viele Funktionen direkt mit, doch für umfassende Anpassungen musst du möglicherweise in den Quellcode einsteigen oder Umgehungslösungen entwickeln. Je nach Anwendungsfall kann das viel Zeit kosten.

Wie bei jeder Bibliothek eines Drittanbieters können Fehler oder Probleme auftreten, die außerhalb deiner Kontrolle liegen. Sie können die Stabilität der App beeinträchtigen oder externe Unterstützung zur Behebung erfordern.

Ein Wallet Adapter ist für kryptoaffine Nutzer praktisch. Er reicht aber nicht aus, wenn du ein breiteres Publikum onboarden möchtest – insbesondere Nutzer, die mit Blockchain nicht vertraut sind oder noch keine Wallet haben.

Neue Nutzer mit eingebetteten Wallets onboarden

Eingebettete Wallets können das Solana-Onboarding deutlich verbessern und Entwicklern helfen, mehr Nutzer zu gewinnen. Neue Nutzer können sich registrieren und erhalten automatisch eine Wallet direkt in der App.

Damit können Nutzer:

• Ohne die Einrichtung einer Drittanbieter-Wallet loslegen
• Nahtlos Assets empfangen
• On-Chain-Transaktionen durchführen

Dieser Ansatz reduziert Hürden und ist besonders wertvoll für Verbraucher-Apps, die den Massenmarkt erreichen wollen.

Laut Daten von Dynamic entscheiden sich mehr als 50 % der Nutzer für eine eingebettete Wallet, statt eine vorhandene zu verbinden.

Die Akzeptanzraten unterscheiden sich jedoch je nach Onboarding-Methode und Zielgruppe.

Kryptoaffine Nutzer verbinden eher ihre vorhandenen Wallets. Nutzer aus dem Mainstream bevorzugen dagegen wahrscheinlich den Komfort eingebetteter Lösungen.

Auf die richtige Balance kommt es an.

Die Liquidität von Privatanlegern liegt weiterhin hauptsächlich in Hot Wallets. Eingebettete Wallets vereinfachen zwar das Onboarding, sind aber nicht immer der beste Ausgangspunkt. Entwickler sollten ihre anfängliche Zielgruppe berücksichtigen und das Onboarding an den Bedürfnissen ihrer Nutzer ausrichten.

Ein umfassendes SDK für Onboarding und Wallet-Infrastruktur

Wenn du Funktionen brauchst, die über den Solana Wallet Adapter hinausgehen, bieten Lösungen wie das SDK von Dynamic einen umfassenderen Ansatz.

Mit Dynamic kannst du:

1. Mehrere Wallet-Optionen unterstützen

Ermögliche Nutzern, vorhandene Solana-Wallets wie Phantom zu verbinden, und stelle neuen Nutzern eingebettete Wallets bereit.

2. Anmeldungen über soziale Netzwerke und E-Mail ermöglichen

Vereinfache die Wallet-Einrichtung mit vertrauten Anmeldemethoden wie X und Telegram.

3. Nutzererfahrungen anpassen

Nutze vorgefertigte UI-Komponenten für eine schnelle Integration oder vollständig Headless-Optionen, um eigene Abläufe zu gestalten.

4. Deine App zukunftssicher machen

Füge Unterstützung für mehrere Wallets, Tools zum Schutz vor Betrug und Analysefunktionen hinzu, um deine Anwendung zu skalieren und zu optimieren.

5. Nutzer anderer Chains gewinnen

Erweitere die Funktionen deiner App über Solana hinaus auf andere Chains, sobald du bereit bist.

Mit einer Lösung wie Dynamic kannst du die Entwicklung optimieren und Nutzern gleichzeitig ein nahtloses Onboarding bieten.

Sie ergänzt den Solana Wallet Adapter und bietet Entwicklern mehr Onboarding-Funktionen, Skalierbarkeit und Anpassungsmöglichkeiten – entscheidende Faktoren für moderne Apps.

Solana Wallet Adapter im Vergleich zu eingebetteten Wallets

Hier ist ein hilfreicher Vergleich:

Unabhängig von den Funktionen ist die Implementierungszeit immer ein entscheidender Faktor. Bei diesem Funktionsumfang könntest du annehmen, dass Dynamic komplizierter zu implementieren ist als der Solana Wallet Adapter. Das ist jedoch nicht der Fall.

Im Folgenden vergleichen wir die standardmäßigen React-Implementierungen:

Solana Wallet Adapter: Standardimplementierung

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic: Standardimplementierung

import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

Damit ist dein Onboarding vollständig eingerichtet. Wir verwenden DynamicWidget, eine All-in-One-UI-Komponente für die Schaltfläche zur Anmeldung und Registrierung, den vollständigen Authentifizierungsablauf, das Nutzerprofil und mehr.

Wenn du die App startest, siehst du Folgendes:

Wenn du lieber deine eigene UI entwickeln oder bestimmte Elemente anpassen möchtest, kannst du alles bis auf den Pixel genau konfigurieren. Ausführliche Anleitungen findest du in der Design-Dokumentation und unter der Option für die Headless-Integration.

Um Registrierungen mit eingebetteten Wallets auf Solana zu aktivieren, öffne einfach das Dashboard und führe diese Schritte aus:

Das war’s!

Jeder, der sich per E-Mail, Telefonnummer oder Social-Media-Konto registriert, erhält eine Solana-Wallet und kann deine App sofort nutzen.

Mit wenigen Codezeilen erhältst du erstklassiges Onboarding mit allen Funktionen, die du heute und in Zukunft brauchst.

RPC-Anbieter hinzufügen und Priority Fees festlegen

Das Onboarding gehört heute zu den größten Hürden für Nutzer. Die Verarbeitung von Transaktionen folgt direkt dahinter. Netzwerküberlastungen auf Solana zu bewältigen kann schwierig sein. Ohne einen dedizierten RPC-Dienst können Transaktionen fehlschlagen und Nutzer frustrieren. Falsch festgelegte Priority Fees können die Nutzererfahrung ebenfalls beeinträchtigen und die Zuverlässigkeit der App untergraben.

Das lässt sich leicht vermeiden: Nutze Helius sowohl für den RPC-Endpunkt als auch für die dynamische Gebührenberechnung mit der Priority Fee API. Für die Integration in Dynamic musst du lediglich die RPC-URL im Dashboard festlegen.

Rufe beim Erstellen der Transaktion die Gebühr über die Priority Fee API ab.

async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Fallstudie: Magic Eden

Eine robuste Wallet-Infrastruktur ist entscheidend, um leistungsstarke und skalierbare Solana-Apps zu entwickeln.

Magic Eden, der führende NFT-Marktplatz, ist durch das Hinzufügen neuer Chains stark gewachsen. Dafür brauchte das Unternehmen eine flexible Wallet, die auch bei hohem Datenverkehr, etwa während NFT-Mints, zuverlässig funktioniert.

Durch die Integration des SDK von Dynamic kann Magic Eden Unterstützung für Multichain-Wallets, Verknüpfungen mit sozialen Konten und die Verwaltung mehrerer Wallets anbieten. So lassen sich mehrere Wallets und Sammlungen über verschiedene Netzwerke hinweg einfach verwalten.

Magic Eden setzt außerdem auf Helius, um RPC-Nodes zu verwalten und den Transaktionsdurchsatz zu optimieren. Mit der Priority Fee API von Helius gewährleistet Magic Eden selbst bei Spitzenauslastung hohe Zuverlässigkeit und Geschwindigkeit.

Durch die Kombination von Dynamic und Helius konnte Magic Eden effizient skalieren und seinen Millionen monatlichen Nutzern gleichzeitig eine erstklassige Erfahrung bieten.

Mit dem Fokus auf Skalierbarkeit, Geschwindigkeit und Nutzererfahrung setzt Magic Eden Maßstäbe für die Möglichkeiten von NFT-Marktplätzen.

Wenn du Apps für kryptoaffine Nutzer und den Mainstream entwickeln möchtest, lohnt sich die Investition in eine zuverlässige Wallet-Lösung. Sie vereinfacht die Entwicklung, hilft dir, eine breitere Nutzerbasis zu erreichen, und schafft die Grundlage für langfristiges Wachstum.

Weitere Ressourcen

• Solana Wallet Adapter
• Dynamic-Dokumentation

Vielen Dank an @__lostin__ und Brady Werkheiser für die Durchsicht früherer Versionen dieses Artikels.