19 minutos de lectura
Resumen
¿Has estado desarrollando en Solana y estás listo para lanzar tu dApp en la web? Vas a necesitar una forma de conectar tus herramientas a las carteras de tus usuarios. Aunque hay varias formas de conectar tu dApp a las carteras de tus usuarios, Solana ha creado un par de herramientas muy útiles que facilitan los primeros pasos: Solana Wallet Adapter y Solana dApp Scaffold.
Tus funciones
- Descubre qué es el adaptador de cartera de Solana
- Implementar el Scaffold de la dApp de Solana
- Personaliza tu entorno
- Crea una dApp sencilla para consultar un monedero conectado
Lo que necesitarás
- Node.js (versión 16.15 o superior)
- Una cartera de Solana (por ejemplo, Phantom)
- Experiencia con [Solana Web3] y la biblioteca de tokens SPL de Solana
- Experiencia con TypeScript y ts-node instalado
- Conocimientos básicos de HTML/CSS
- Tener experiencia en desarrollo web front-end será de ayuda, pero no es imprescindible para seguir el curso. Crearemos un proyecto con Next.js utilizando React. La comunidad de Solana también es compatible con Vue, Angular y Svelte. Visita su página de la comunidad para obtener más información.
¿Qué es el adaptador de cartera?
¿Te has fijado en que muchas dApps de Solana tienen una interfaz de usuario muy parecida para conectarse a los monederos?
Se trata del Solana Wallet Adapter («SWA»), y lo verás en muchos sitios porque es fácil de usar, es compatible con todas las carteras más habituales de Solana y la comunidad de Solana se encarga de su mantenimiento periódico. ¿En qué consiste? El SWA es un conjunto de adaptadores y componentes modulares de TypeScript para carteras, destinados a aplicaciones de Solana, que te permiten conectar fácilmente tu dApp a la cartera que elijan tus usuarios (¡es compatible con más de una docena de carteras de Solana de forma predeterminada!).
A continuación te ofrecemos algunas razones para plantearte utilizar SWA:
- Código abierto, con el apoyo de Solana-labs
- Compatibilidad con múltiples monederos: permite a tus usuarios utilizar el monedero que prefieran sin que ello te suponga un montón de quebraderos de cabeza a la hora de dar soporte a nuevos monederos.
- Incluye una interfaz de usuario personalizable lista para usar
- Incluye soporte para anclaje
- Funcionalidades clave integradas: Conectar, Desconectar, Conexión automática
- Es compatible con múltiples marcos de trabajo de front-end
¡Vamos a probarlo!
Configura tu entorno
SWA es compatible con varios marcos de trabajo de interfaz de usuario:
- React
- Material-UI,
- Ant Design
- Angular Material UI
- Vue (con el apoyo de la comunidad)
- Angular (con el apoyo de la comunidad)
- Svelte (con el apoyo de la comunidad)
Puedes añadir estos paquetes a tus proyectos existentes siguiendo las instrucciones de npm que encontrarás aquí. Sin embargo, para este ejemplo, crearemos un nuevo proyecto utilizando el «dApp Scaffold» de Solana. El «dApp Scaffold» incluye SWA y algunos componentes predefinidos para que puedas ponerte en marcha rápidamente.
Nota: si vas a añadir el adaptador a un proyecto ya existente, la versión actual de SWA, en el momento de redactar este documento, no es compatible con React 18. Utiliza React 17.
Crea un nuevo directorio de proyecto en tu terminal con:
mkdir mi-dapp-solana
cd mi-solana-dapp
Clona el esqueleto de la dApp:
git clone https://github.com/solana-labs/dapp-scaffold.git .
El símbolo «.» clonará el esqueleto en el directorio de tu proyecto sin crear un nuevo directorio dentro de él.
Escribe «ls» en tu terminal para asegurarte de que todo se ha copiado correctamente. Tu terminal debería tener un aspecto similar a este:
Instalar las dependencias:
npm instalar
# o
yarn install
Añade también la biblioteca SPL-token, que utilizaremos más adelante en este ejercicio:
npm i @solana/spl-token
# o
yarn añadir @solana/spl-token
Añadir un punto final RPC personalizado de Quicknode
Para desarrollar en Solana, necesitarás un punto final de API para conectarte a la red. Puedes utilizar nodos públicos (que ya están integrados en Scaffold) o implementar y gestionar tu propia infraestructura; sin embargo, si quieres tiempos de respuesta ocho veces más rápidos, puedes dejarnos a nosotros el trabajo pesado.
Descubre por qué más del 50 % de los proyectos de Solana eligen Quicknode y regístrate gratis aquí.
Vamos a poner en marcha nuestro nodo en la red de desarrollo de Solana, pero puedes poner en marcha el nodo que mejor se adapte a tus necesidades. Copia el enlace del proveedor HTTP:
A continuación, vuelve a tu terminal y crea un archivo .env con el siguiente comando desde el directorio «my-solana-dapp »:
echo > .env
Te recomendamos que utilices un archivo .env para proteger tu clave al crear un sitio web de producción.
Abre tu proyecto en el editor de código que prefieras y ve al archivo .env que acabas de crear. Declara dos variables: REACT_APP_SOLANA_RPC_HOST y REACT_APP_NETWORK. Pega tu URL de RPC en la variable REACT_APP_SOLANA_RPC_HOST y configura REACT_APP_NETWORK con el clúster de Solana que vayas a utilizar (devnet, mainnet-beta o testnet). Debe ser la misma red de la que seleccionaste tu punto final de RPC. Tu archivo debería tener un aspecto similar a este:
REACT_APP_SOLANA_RPC_HOST=https://example.solana-devnet.quiknode.pro/00000000000/
REACT_APP_NETWORK=devnet
También debemos actualizar el archivo next.config.js para utilizar estas variables de entorno en nuestra aplicación de Next.js. Abre el archivo en el directorio raíz del proyecto y sustituye su contenido por lo siguiente:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = {
nextConfig,
env: {
REACT_APP_SOLANA_RPC_HOST: process.env.REACT_APP_SOLANA_RPC_HOST,
REACT_APP_NETWORK: process.env.REACT_APP_NETWORK
}
}
Ahora actualiza el punto final del Scaffold abriendo el archivo ./src/contexts/ContextProvider.tsx y sustituyendo las líneas 20 y 21:
const red = WalletAdapterNetwork.Devnet;
const punto de conexión = useMemo(() => clusterApiUrl(red), [red]);
con
const red = proceso.env.REACT_APP_NETWORK como WalletAdapterNetwork;
const punto de conexión = process.env.REACT_APP_SOLANA_RPC_HOST;
¡Ya estamos listos! ¡Lancemos nuestra aplicación!
npm ejecutar dev
# o
yarn dev
Si has seguido todos los pasos hasta aquí, deberías poder acceder a http://localhost:3000/ y ver tu «scaffold». ¡Buen trabajo! Deberías ver algo como esto:
No dudes en hacer clic por todas partes y explorar el entorno de desarrollo. Puedes conectar un monedero y solicitar un airdrop (devnet y testnet), firmar un mensaje o enviar SOL a un monedero aleatorio.
Introducción al adaptador de cartera de Solana y a Scaffold
Antes de crear nuestro componente, echemos un vistazo a nuestro espacio de trabajo para comprender mejor cómo funciona todo. Sin entrar en demasiados detalles sobre el funcionamiento de React, repasemos algunos aspectos esenciales relacionados con las dApps de Solana.
Botón «Wallet Connect»
Echa un vistazo a /my-solana-dapp/src/components/AppBar.tsx. Deberías ver que importamos WalletMultiButton de solana/adaptador-de-monedero-react-ui. Este botón, <WalletMultiButton className="btn btn-ghost mr-4" /> es la forma en que el usuario interactúa con nuestro adaptador de monedero. Aquí también verás el uso del setAutoConnect El método establece el control de activación del usuario. Aquí no vamos a cambiar nada, pero si quieres activar o desactivar autoConnect Puedes utilizar este formulario.
Contextode conexión
A continuación, echa un vistazo a /my-solana-dapp/src/contexts/ContextProvider.tsx. En este archivo es donde hemos actualizado anteriormente nuestro punto final y nuestra red, y es donde se encuentra el proveedor de contexto de la cartera, desde donde podemos configurar el adaptador de la cartera.
- En primer lugar, fíjate en nuestra variable «wallets ». Verás una lista de carteras habituales de Solana. Prueba a comentar una o varias con «//» o a eliminar los comentarios en «new SlopeWalletAdapter()» (en las importaciones, líneas 4-11, y en las declaraciones, líneas 22-35). Actualiza la página y conecta tu cartera. Deberías observar que la lista de carteras disponibles ha cambiado. En la práctica, la variable «wallets» se pasa al adaptador de carteras (Wallet Adapter) a través del componente proveedor de carteras (Wallet Provider Component) para establecer qué carteras se permitirán en nuestra dApp.
- La función «autoconnect» determina cómo interactúa el monedero del usuario con la página web al cargarse. Como ya hemos comentado anteriormente, nuestro botón de la AppBar permite al usuario controlar esta función desde la interfaz de usuario de la página web.
- onError indica a nuestro programa cómo gestionar los errores
- El punto final y la configuración de red determinan cómo se conectará tu aplicación a la red de Solana
- Scaffold ya viene configurado de serie, pero si estás configurando tu proyecto sin Scaffold, tendrás que asegurarte de que tu aplicación esté rodeada por este contexto. Puedes ver dónde se hace esto en /my-solana-dapp/src/pages/_app.tsx:
<ContextProvider>es el elemento padre de nuestro Barra de aplicaciones y Contenedor de contenido.
Componentes
Antes de continuar, echa un vistazo a la carpeta «Components», en /my-solana-dapp/src/components. Verás componentes asociados a cada una de las herramientas y botones ya existentes en nuestra aplicación (por ejemplo, «Airdrop», «Sign Message» o «Send Transaction»). No dudes en explorar algunos de estos archivos para ver cómo funcionan; ¡en un momento crearemos los nuestros propios! Si no estás familiarizado con React, no pasa nada. Solo tienes que saber que cada uno de estos archivos, o componentes, es básicamente un bloque de construcción de nuestra página web. Colocamos esos bloques de construcción en los lugares adecuados (por ejemplo, puedes ver cómo se llama a RequestAirdrop en la página de inicio: /my-solana-dapp/src/views/home/index.tsx).
Crea un componente personalizado para tu dApp
Ahora que ya tenemos configurado nuestro entorno de dApp y sabemos cómo funciona, ¡vamos a añadir nuestro componente! Para este ejercicio, vamos a utilizar un script que desarrollamos en otro tutorial para obtener todas las cuentas de tokens asociadas a la cartera de un propietario (accesible aquí).
Crear una plantilla de componente reutilizable
Creemos una plantilla de componente que podamos utilizar para este ejercicio y que también te sirva para crear fácilmente nuevos componentes en el futuro.
Crea un nuevo archivo en el directorio «components» llamado «template.tsx». En la terminal, detén el servidor pulsando CTRL+C e introduce el siguiente comando:
echo > ./src/components/template.tsx
Abre el archivo template.tsx, pega este código y, a continuación, guarda el archivo.
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { FC, useState } from 'react';
import { notify } from "../utils/notifications";
//Add import dependencies here
export const Template: FC = () => {
const { connection } = useConnection();
const { publicKey } = useWallet();
//State Variables here
//dApp Scripts here
return(<div>
{/* Render Results Here */}
</div>)
}
Configura tu componente
¡Esto crea una estructura básica para un componente de React que podemos utilizar para añadir nuestra propia funcionalidad! Copia la plantilla y guárdala como un nuevo archivo llamado GetTokens.tsx.
cp ./src/components/template.tsx ./src/components/GetTokens.tsx
En GetTokens.tsx, cambia el nombre del componente sustituyendo «export const Template» por:
exportar const GetTokens
Para nuestra herramienta, que analiza las cuentas de tokens de un monedero, tendremos que añadir un par de dependencias adicionales que nos permitan interactuar con la biblioteca de tokens SPL. Añádelas aquí, en «Añadir dependencias de importación»:
import { GetProgramAccountsFilter } from '@solana/web3.js';
import { TOKEN_PROGRAM_ID } from "@solana/spl-token";
Vamos a crear una nueva variable de estado, `tokenTable`, utilizando `setState` (si no estás familiarizado con React, no pasa nada; esta es parte de la «magia» que nos ayudará a que los resultados se muestren en la página una vez que hayamos encontrado lo que buscamos). Añade el siguiente código justo después del comentario «Variables de estado aquí» en la plantilla:
const [tablaDeTokens, setTokenTable] = useState(null);
Crea tu consulta
Hemos adaptado el código de otra guía de Quicknode sobre cómo obtener todas las cuentas de tokens que contiene un monedero de Solana, realizando algunos ajustes para que sea compatible con React. En concreto, en lugar de utilizar `console.log` para mostrar los resultados, queremos escribirlos en una tabla (como elemento JSX) que se pueda mostrar en nuestra página web.
Añade este código justo debajo de tu variable de estado //dApp Scripts Here y antes de return():
async function getTokenAccounts(wallet: string) {
const filters:GetProgramAccountsFilter[] = [
{
dataSize: 165, // number of bytes
},
{
memcmp: {
offset: 32, // number of bytes
bytes: wallet, // base58 encoded string
},
}];
const accounts = await connection.getParsedProgramAccounts(
TOKEN_PROGRAM_ID, // new PublicKey("TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA")
{
filters: filters,
}
);
console.log(`Found ${accounts.length} token account(s) for wallet ${wallet}: `);
if(accounts.length === 0) {
return(<div>No Token Accounts Found</div>)
}
else{
const rows = accounts.map((account,i)=>{
//Parse the account data
const parsedAccountInfo:any = account.account.data;
const mintAddress:string = parsedAccountInfo["parsed"]["info"]["mint"];
const tokenBalance: number = parsedAccountInfo["parsed"]["info"]["tokenAmount"]["uiAmount"];
return (
<tr key={i+1}>
<td key={'index'}>{i+1}</td>
<td key={'mint address'}>{mintAddress}</td>
<td key={'balance'}>{tokenBalance}</td>
</tr>)
})
const header = (<tr>
<th>Token No.</th>
<th>Mint Address</th>
<th>Qty</th>
</tr>)
setTokenTable(<table>{header}{rows}</table>)
}
}
Verás que nuestro .map El método devuelve un <tr> una fila por cada cuenta encontrada. Cuando se invoca, el getTokenAccounts El método debería recuperar todas las cuentas de tokens de la cadena, crear un elemento de tabla con los resultados y utilizar React para añadir dicho elemento a nuestro estado. También hemos añadido una lógica para informar al usuario en caso de que no se hayan encontrado cuentas de tokens SPL.
Crear un controlador de clics
Para llamar a getTokenAccounts, crea una función llamada onClick que podamos vincular a un botón de nuestra página. El botón hará lo siguiente:
- Comprueba si hay un monedero conectado. Para ello, podemos comprobar si se encuentra la clave pública (publicKey) mediante nuestro método useWallet() del adaptador de monedero.
- Intenta obtener los «getTokenAccounts» del monedero conectado (ten en cuenta que tenemos que convertir nuestra clave pública en una cadena para poder utilizarla en los parámetros de nuestro filtro, mediante el método .toString()).
- Gestionar los errores.
const onClick = async () => {
if (!publicKey) {
console.log('error', 'Wallet not connected!');
notify({ type: 'error', message: 'error', description: 'Wallet not connected!' });
return;
}
try {
await getTokenAccounts(publicKey.toString());
} catch (error: any) {
notify({ type: 'error', message: `Couldn't Find Token Accounts!`, description: error?.message });
console.log('error', `Error finding Token Accounts! ${error?.message}`);
}
};
Crear un botón
Dentro del return(), verás un <div>. Crea un botón dentro de él que llame a nuestro onClick función. Estamos utilizando el mismo CSS que en el resto de la plantilla. ¡No dudes en personalizarlo!
<div className="text-center">
<button
className="px-8 m-2 btn animate-pulse bg-gradient-to-r from-[#9945FF] to-[#14F195] hover:from-pink-500 hover:to-yellow-500"
onClick={onClick}
>
<span>Get Token Accounts</span>
</button>
</div>
Resultados del renderizado
Ahora muestra los resultados llamando a la variable de estado `tokenTable ` que hemos establecido con `getTokenAccounts`. Dentro de tu `div` y después del comentario «Render Results Here», añade:
<div>{tokenTable}</div>
Como no definimos una variable hasta después de nuestra consulta de tokens, este campo permanecerá en blanco hasta que el programa haya encontrado algo.
Así es como queda nuestro componente ahora que hemos terminado:
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { FC, useState } from 'react';
import { notify } from "../utils/notifications";
//Add import dependencies here
import { GetProgramAccountsFilter } from '@solana/web3.js';
import { TOKEN_PROGRAM_ID } from "@solana/spl-token";
export const GetTokens: FC = () => {
const { connection } = useConnection();
const { publicKey } = useWallet();
//State Variables here
const [tokenTable, setTokenTable] = useState(null);
//dApp Scripts here
async function getTokenAccounts(wallet: string) {
const filters:GetProgramAccountsFilter[] = [
{
dataSize: 165, // number of bytes
},
{
memcmp: {
offset: 32, // number of bytes
bytes: wallet, // base58 encoded string
},
}];
const accounts = await connection.getParsedProgramAccounts(
TOKEN_PROGRAM_ID, // new PublicKey("TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA")
{
filters: filters,
}
);
console.log(`Found ${accounts.length} token account(s) for wallet ${wallet}: `);
if(accounts.length === 0) {
return(<div>No Token Accounts Found</div>)
}
else{
const rows = accounts.map((account,i)=>{
//Parse the account data
const parsedAccountInfo:any = account.account.data;
const mintAddress:string = parsedAccountInfo["parsed"]["info"]["mint"];
const tokenBalance: number = parsedAccountInfo["parsed"]["info"]["tokenAmount"]["uiAmount"];
return (
<tr key={i+1}>
<td key={'index'}>{i+1}</td>
<td key={'mint address'}>{mintAddress}</td>
<td key={'balance'}>{tokenBalance}</td>
</tr>)
})
const header = (<tr>
<th>Token No.</th>
<th>Mint Address</th>
<th>Qty</th>
</tr>)
setTokenTable(<table>{header}{rows}</table>)
}
}
const onClick = async () => {
if (!publicKey) {
console.log('error', 'Wallet not connected!');
notify({ type: 'error', message: 'error', description: 'Wallet not connected!' });
return;
}
try {
await getTokenAccounts(publicKey.toString());
} catch (error: any) {
notify({ type: 'error', message: `Couldn't Find Token Accounts!`, description: error?.message });
console.log('error', `Error finding Token Accounts! ${error?.message}`);
}
};
return(<div>
<div className="text-center">
<button
className="px-8 m-2 btn animate-pulse bg-gradient-to-r from-[#9945FF] to-[#14F195] hover:from-pink-500 hover:to-yellow-500"
onClick={onClick}
>
<span>Get Token Accounts</span>
</button>
</div>
{/* Render Results Here */}
<div>{tokenTable}</div>
</div>)
}
¡Buen trabajo! Ya has creado tu primer componente de dApp con Solana Scaffold. Es hora de añadirlo a la página web.
Implementa tu componente
Ahora vamos a añadir nuestro componente a la página de inicio. Abre la vista «home», /my-solana-dapp/src/views/home/index.tsx. Como hemos creado un nuevo componente, debemos importarlo antes de utilizarlo. Añade esta importación en la línea 14:
import { GetTokens } from 'components/GetTokens';
Añadamos nuestro componente debajo del botón de airdrop y de la pantalla de saldo del monedero que ya hay:
<div>
<RequestAirdrop />
{/* ... */}
</div>
{/* ADD THIS 👇 */}
<div>
<GetTokens/>
</div>
No sé vosotros, pero yo estoy deseando ver cómo funciona esto. ¡Vamos a probarlo!
npm ejecutar dev
# o
yarn dev
¡Ahí está nuestro precioso botón!
Si te precipitas como yo, probablemente te aparecerá un mensaje de error porque aún no has conectado ningún monedero (¿te acuerdas de cuando configuramos ese error?):
Conecta tu monedero haciendo clic en «Seleccionar monedero» en la esquina superior derecha. Selecciona el monedero que prefieras. Deberías ver tu saldo de Solana una vez que hayas conectado el monedero.
Muy bien, AHORA ya puedes hacer clic en «Obtener cuentas de tokens»... ¡BOOM! ¿Ves algo parecido a esto?
Si aún no tienes ningún token en tu monedero, puedes consultar nuestra guía sobre cómo acuñar NFT con Candy Machine para empezar.
¿Te lo estás pasando bien? ¡No dudes en seguir trabajando en esto e incluso añadir algo de CSS personalizado para que esa tabla tenga el aspecto que más te guste!
Conclusión
¡Enhorabuena! ¡Lo has conseguido! Y hemos visto muchas cosas. Tras completar este ejercicio, ya puedes crear tus propias dApps con Solana dApp Scaffold y Wallet Adapter. Se trata de una base excelente para adentrarte en todo tipo de proyectos, ¡así que en el futuro crearemos más componentes partiendo de esta base!
¿Te ha resultado útil? Echa un vistazo a otros tutoriales sobre Solana aquí. Suscríbete a nuestro boletín para recibir más artículos y guías sobre Solana. No dudes en ponerte en contacto con nosotros a través de Twitter si tienes algún comentario. Siempre puedes charlar con nosotros en nuestro servidor de Discord, donde encontrarás a algunos de los desarrolladores más geniales que jamás hayas conocido 😎
¡Nos encantan los comentarios!
¿Quieres compartir tu opinión sobre esta guía? ¡Nos encantaría saber qué piensas!