Onboarding em apps Solana: por que usar carteiras integradas

Solana Wallet Adapter

O processo de onboarding mais simples é conectar os usuários por meio de uma carteira existente, como Phantom ou Solflare. Esse método funciona bem para usuários que conhecem a Solana e já têm uma carteira configurada.

Um bom ponto de partida é o Solana Wallet Adapter, que oferece:

• Uma API padronizada para uma integração direta
• Funcionalidades básicas para conectar carteiras e assinar transações
• Flexibilidade de código aberto para adaptá-lo às necessidades do seu aplicativo

O Solana Wallet Adapter é rápido e simples de implementar, o que o torna uma opção confiável para usuários que já têm carteiras.

Além de aceitar várias carteiras, ele também oferece integração padronizada para garantir funcionalidades consistentes e componentes de UI prontos para uso, como botões de conexão de carteira. Por fim, ele otimiza o desempenho para assinar e enviar transações com mais rapidez em comparação com APIs brutas como window.solana.

O design de código aberto do Solana Wallet Adapter permite que os desenvolvedores o adaptem aos requisitos específicos de cada aplicativo. Ele também possibilita implementações da comunidade que ampliam sua compatibilidade com frameworks como Vue, Angular, Svelte e TypeScript.

No entanto, o uso do adaptador adiciona dependências ao projeto, o que pode gerar trabalho extra para os desenvolvedores.

Embora o adaptador ofereça muitos recursos prontos para uso, uma personalização abrangente pode exigir alterações no código-fonte ou soluções alternativas. Dependendo do caso de uso, isso pode consumir bastante tempo.

Assim como em qualquer biblioteca de terceiros, os desenvolvedores podem encontrar bugs ou problemas fora do seu controle, o que pode afetar a estabilidade do aplicativo ou exigir suporte externo para resolvê-los.

Embora o uso de um adaptador de carteira seja prático para usuários familiarizados com cripto, ele não é suficiente quando o objetivo é atrair um público mais amplo, especialmente pessoas que não conhecem blockchain ou ainda não têm uma carteira.

Onboarding de novos usuários com carteiras integradas

As carteiras integradas podem melhorar significativamente o onboarding na Solana e ajudar os desenvolvedores a conquistar mais usuários. Elas permitem que novos usuários se cadastrem e recebam automaticamente uma carteira dentro do próprio aplicativo.

Isso permite que os usuários:

• Comecem a usar o aplicativo sem configurar uma carteira de terceiros
• Recebam ativos de forma simples
• Façam transações on-chain

Essa abordagem reduz o atrito e é valiosa para aplicativos voltados ao consumidor que buscam adoção em massa.

Segundo dados da Dynamic, mais de 50% dos usuários escolhem uma carteira integrada em vez de conectar uma existente.

No entanto, as taxas de adoção variam conforme o método de onboarding e o público-alvo.

Públicos familiarizados com cripto podem preferir conectar suas carteiras existentes, enquanto usuários mais convencionais provavelmente optarão pela conveniência das soluções integradas.

Encontrar o equilíbrio certo é essencial.

A liquidez do varejo ainda está concentrada principalmente em carteiras quentes. Isso significa que, embora as carteiras integradas simplifiquem o onboarding, elas nem sempre são o melhor ponto de partida. Os desenvolvedores devem considerar seu público-alvo inicial e criar uma experiência de onboarding alinhada às necessidades dos usuários.

Um SDK completo para onboarding e infraestrutura de carteiras

Para desenvolvedores que querem oferecer recursos além dos disponíveis no Solana Wallet Adapter, soluções como o SDK da Dynamic proporcionam uma abordagem mais completa.

Com a Dynamic, você pode:

1. Oferecer várias opções de carteira

Permita que os usuários conectem carteiras Solana existentes, como Phantom, e forneça carteiras integradas aos novos usuários.

2. Habilitar login por redes sociais e e-mail

Simplifique a configuração da carteira com métodos de login conhecidos, como X e Telegram.

3. Personalizar a experiência do usuário

Use componentes de UI prontos para uma integração rápida ou escolha opções totalmente headless para criar seus próprios fluxos.

4. Prepare seu aplicativo para o futuro

Adicione suporte a várias carteiras, ferramentas de proteção contra fraudes e recursos de análise para escalar e otimizar seu aplicativo.

5. Atraia usuários de outras redes

Quando chegar a hora, expanda as funcionalidades do seu aplicativo além da Solana para outras redes.

Com uma solução como a Dynamic, você simplifica o desenvolvimento e oferece aos usuários uma experiência de onboarding fluida.

Ela complementa o Solana Wallet Adapter ao oferecer aos desenvolvedores mais funcionalidades de onboarding, escalabilidade e personalização.

Solana Wallet Adapter vs. carteiras integradas

Veja uma comparação útil:

Independentemente dos recursos, o tempo de implementação sempre será um fator decisivo. Com tantas funcionalidades, você pode pensar que implementar a Dynamic é mais complicado do que implementar o Solana Wallet Adapter, mas não é o caso.

Veja abaixo uma comparação das implementações padrão em React:

Solana Wallet Adapter: implementação padrão

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: implementação padrão

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>
)
}

O onboarding já está totalmente configurado, pois usamos o DynamicWidget, um componente de UI completo que gerencia um botão de login/cadastro, todo o fluxo de autenticação, o perfil do usuário e muito mais.

Ao iniciar o aplicativo, você verá o seguinte:

Se preferir criar sua própria UI ou personalizar elementos específicos, tudo pode ser configurado em detalhes, até o último pixel. Consulte a documentação de design ou a opção de integração headless para ver orientações detalhadas.

Para habilitar cadastros com carteiras integradas na Solana, basta acessar o painel e seguir estas etapas:

Pronto!

Qualquer pessoa que se cadastrar com e-mail, telefone ou conta de rede social receberá uma carteira Solana e poderá usar seu aplicativo imediatamente.

Com algumas linhas de código, você oferece o melhor onboarding da categoria, incluindo todas as funcionalidades necessárias agora e no futuro.

Como adicionar seu provedor RPC e definir taxas de prioridade

Embora o onboarding continue sendo um dos maiores pontos de atrito para os usuários, o processamento de transações vem logo em seguida. Pode ser difícil lidar com o congestionamento da rede Solana. Sem um serviço RPC dedicado, os usuários podem enfrentar transações descartadas, o que gera frustração. Da mesma forma, definir taxas de prioridade incorretas pode prejudicar a experiência do usuário e comprometer a confiabilidade do aplicativo.

Você pode evitar isso usando a Helius tanto para o endpoint RPC quanto para definir taxas dinamicamente com a Priority Fee API. Integrá-la à Dynamic é tão simples quanto definir a URL do RPC no painel.

Ao criar a transação, obtenha a taxa usando a Priority Fee API.

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;
}

Estudo de caso da Magic Eden

Uma infraestrutura robusta de carteiras é essencial para desenvolver aplicativos Solana poderosos e escaláveis.

A Magic Eden, principal marketplace de NFT, escalou de forma agressiva ao adicionar novas redes. Para seguir essa estratégia e manter um excelente desempenho durante picos de tráfego, como em emissões de NFT, ela precisava de uma carteira flexível.

Ao integrar o SDK da Dynamic, a Magic Eden pode oferecer suporte a carteiras multichain, vinculação de contas sociais e gerenciamento de várias carteiras. Gerenciar várias carteiras e colecionar ativos em diferentes redes torna-se simples.

A Magic Eden também conta com a Helius para gerenciar nós RPC e otimizar a capacidade de processamento de transações. Com a Priority Fee API da Helius, a Magic Eden mantém a confiabilidade e a velocidade mesmo durante picos de tráfego.

Essa combinação da Dynamic com a Helius permitiu que a Magic Eden escalasse com eficiência e oferecesse uma experiência superior aos seus milhões de usuários mensais.

Ao priorizar escalabilidade, velocidade e experiência do usuário, a Magic Eden estabelece uma referência do que é possível para marketplaces de NFT.

Para desenvolvedores que querem criar aplicativos atraentes tanto para públicos familiarizados com cripto quanto para o grande público, investir em uma solução de carteira confiável pode simplificar o desenvolvimento, alcançar uma base de usuários mais ampla e estabelecer as bases para o crescimento de longo prazo.

Recursos adicionais

• Solana Wallet Adapter
• Documentação da Dynamic

Agradecemos muito a @__lostin__ e Brady Werkheiser pela revisão das versões anteriores deste artigo.