Incorporación en apps de Solana: por qué usar billeteras integradas

Solana Wallet Adapter

El proceso de incorporación más sencillo consiste en conectar a los usuarios mediante una billetera existente, como Phantom o Solflare. Este método funciona bien para incorporar a usuarios que conocen Solana y ya tienen billeteras configuradas.

Un buen punto de partida es Solana Wallet Adapter, que ofrece:

• Una API estandarizada para una integración sencilla
• Funciones básicas para conectar billeteras y firmar transacciones
• Flexibilidad de código abierto para adaptarlo a las necesidades de tu app

Solana Wallet Adapter es rápido y fácil de implementar, lo que lo convierte en una opción confiable para usuarios que ya tienen billeteras.

Además de admitir varias billeteras, también incluye una integración estandarizada para ofrecer funciones coherentes y componentes de UI listos para usar, como botones de conexión de billeteras. Por último, optimiza el rendimiento para firmar y enviar transacciones más rápido que con API sin procesar como window.solana.

El diseño de código abierto de Solana Wallet Adapter permite que los desarrolladores lo adapten a los requisitos específicos de cada app. También permite que las implementaciones de la comunidad amplíen su compatibilidad con frameworks como Vue, Angular, Svelte y TypeScript.

Sin embargo, usar el adaptador agrega dependencias a tu proyecto, lo que puede generar trabajo adicional para los desarrolladores.

Aunque el adaptador incluye muchas funciones listas para usar, una personalización exhaustiva puede requerir que explores su código fuente o crees soluciones alternativas. Según el caso de uso, esto podría llevar mucho tiempo.

Como ocurre con cualquier biblioteca de terceros, los desarrolladores pueden encontrar errores o problemas fuera de su control. Estos podrían afectar la estabilidad de la app o requerir asistencia externa para resolverlos.

Aunque usar un adaptador de billeteras resulta práctico para los usuarios familiarizados con las criptomonedas, no es suficiente si quieres incorporar a un público más amplio, sobre todo a quienes no conocen la blockchain o aún no tienen una billetera.

Incorporación de nuevos usuarios con billeteras integradas

Las billeteras integradas pueden mejorar considerablemente la incorporación en Solana y ayudar a los desarrolladores a captar más usuarios. Permiten que los nuevos usuarios se registren y reciban automáticamente una billetera dentro de la propia app.

Esto permite a los usuarios:

• Comenzar sin configurar una billetera de terceros
• Recibir activos sin complicaciones
• Realizar transacciones on-chain

Este enfoque reduce la fricción y resulta valioso para las apps de consumo que buscan una adopción masiva.

Según datos de Dynamic, más del 50 % de los usuarios elige una billetera integrada en lugar de conectar una existente.

Sin embargo, las tasas de adopción varían según el método de incorporación y el público objetivo.

Los usuarios familiarizados con las criptomonedas pueden preferir conectar sus billeteras existentes, mientras que el público general probablemente elija la comodidad de las soluciones integradas.

Encontrar el equilibrio adecuado es clave.

La liquidez minorista todavía reside principalmente en billeteras calientes. Por eso, aunque las billeteras integradas simplifican la incorporación, no siempre son el mejor punto de partida. Los desarrolladores deben considerar su público objetivo inicial y diseñar una experiencia de incorporación que se ajuste a las necesidades de sus usuarios.

Un SDK completo para la incorporación y la infraestructura de billeteras

Para los desarrolladores que buscan habilitar funciones adicionales a las que ofrece Solana Wallet Adapter, soluciones como el SDK de Dynamic brindan un enfoque más completo.

Con Dynamic, puedes:

1. Admitir varias opciones de billetera

Permite que los usuarios conecten billeteras de Solana existentes, como Phantom, y crea billeteras integradas para los nuevos usuarios.

2. Habilitar el inicio de sesión con redes sociales y correo electrónico

Simplifica la configuración de billeteras con métodos de inicio de sesión conocidos, como X y Telegram.

3. Personalizar la experiencia de usuario

Usa componentes de UI prediseñados para una integración rápida u opta por opciones totalmente headless para diseñar tus propios flujos.

4. Prepara tu app para el futuro

Agrega compatibilidad con varias billeteras, herramientas de protección contra el fraude y funciones de análisis para escalar y optimizar tu aplicación.

5. Captar usuarios de otras cadenas

Cuando estés listo, amplía las funciones de tu app más allá de Solana y llévalas a otras cadenas.

Con una solución como Dynamic, puedes agilizar el desarrollo y ofrecer a los usuarios una experiencia de incorporación fluida.

Complementa Solana Wallet Adapter al ofrecer a los desarrolladores más funciones de incorporación, escalabilidad y personalización.

Solana Wallet Adapter frente a las billeteras integradas

Aquí tienes una comparación útil:

Sin importar las funciones, el tiempo de implementación siempre puede ser un factor decisivo. Podrías pensar que, con tantas funciones, implementar Dynamic es más complicado que implementar Solana Wallet Adapter, pero no es así.

A continuación, puedes comparar las implementaciones predeterminadas en React:

Solana Wallet Adapter: implementación predeterminada

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: implementación predeterminada

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

Ya tienes todo listo para incorporar usuarios porque usamos DynamicWidget, un componente de UI todo en uno que gestiona un botón para iniciar sesión o registrarse, el flujo completo de autenticación, el perfil del usuario y mucho más.

Al iniciar la app, verás lo siguiente:

Si prefieres crear tu propia UI o personalizar elementos específicos, puedes configurar todo hasta el último píxel. Consulta la documentación de diseño o la opción de integración headless para obtener instrucciones detalladas.

Para habilitar el registro mediante billeteras integradas en Solana, ve al panel y sigue estos pasos:

¡Eso es todo!

Cualquiera que se registre con un correo electrónico, teléfono o cuenta de redes sociales recibirá una billetera de Solana y podrá usar tu app de inmediato.

Con unas pocas líneas de código, obtienes una incorporación de primer nivel con todas las funciones que necesitas ahora y en el futuro.

Cómo agregar tu proveedor de RPC y configurar las comisiones de prioridad

Aunque la incorporación sigue siendo uno de los mayores puntos de fricción para los usuarios actuales, el procesamiento de transacciones ocupa un cercano segundo lugar. Puede ser complicado gestionar la congestión de la red en Solana. Sin un servicio RPC dedicado, los usuarios pueden sufrir transacciones descartadas, lo que genera frustración. Asimismo, configurar comisiones de prioridad incorrectas puede perjudicar la experiencia de usuario y reducir la confiabilidad de la app.

Puedes evitarlo fácilmente usando Helius tanto para el endpoint RPC como para configurar las comisiones de forma dinámica mediante su Priority Fee API. Integrarlo con Dynamic es tan sencillo como configurar la URL del RPC en el panel.

Al crear la transacción, obtén la comisión mediante la 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;
}

Caso de estudio de Magic Eden

Una infraestructura de billeteras robusta es esencial para desarrollar apps de Solana potentes y escalables.

Magic Eden, el principal mercado de NFT, ha escalado con rapidez mediante la incorporación de nuevas cadenas. Necesitaba una billetera flexible que respaldara este enfoque y ofreciera un rendimiento excelente durante los periodos de tráfico elevado, como la acuñación de NFT.

Al integrar el SDK de Dynamic, Magic Eden puede ofrecer compatibilidad con billeteras multicadena, vinculación con redes sociales y gestión de varias billeteras. Gestionar varias billeteras y coleccionar activos entre distintas redes es sencillo.

Magic Eden también utiliza Helius para gestionar nodos RPC y optimizar el rendimiento de las transacciones. Mediante la Priority Fee API de Helius, Magic Eden mantiene la confiabilidad y la velocidad incluso durante los picos de tráfico.

Esta combinación de Dynamic y Helius ha permitido que Magic Eden escale de forma eficiente y ofrezca una experiencia superior a sus millones de usuarios mensuales.

Al priorizar la escalabilidad, la velocidad y la experiencia de usuario, Magic Eden establece un referente de lo que pueden lograr los mercados de NFT.

Si buscas desarrollar apps atractivas tanto para usuarios familiarizados con las criptomonedas como para el público general, invertir en una solución de billeteras confiable puede agilizar el desarrollo, ayudarte a llegar a una base de usuarios más amplia y sentar las bases para el crecimiento a largo plazo.

Recursos adicionales

• Solana Wallet Adapter
• Documentación de Dynamic

Muchas gracias a @__lostin__ y Brady Werkheiser por revisar las versiones anteriores de este artículo.