Configuración de la cartera

Adrift utiliza carteras integradas impulsadas por Para para hacer que la incorporación y el juego sean sin fricciones. Los usuarios pueden iniciar sesión instantáneamente, sin necesidad de extensiones de navegador o frases semilla, e interactuar con la appchain mientras su cartera se convierte tanto en su identidad como en su firma para todas las acciones en cadena.

Esta guía explica cómo Adrift implementa este flujo y cómo puedes construir una experiencia de usuario similar para tus propios proyectos de appchain.

Flujo de incorporación

• Configuración del proveedor:

  • La aplicación está envuelta en un ParaProvider (de @getpara/react-sdk), que gestiona el estado y la conexión de la cartera.
  • El proveedor está configurado para la appchain Pacifica y personalizado para la marca de Adrift.

• Botón de conexión:

  • El componente ConnectWallet muestra un botón "Iniciar sesión" si el usuario no está conectado, o su dirección si lo está.
  • Al hacer clic en el botón se abre el modal de Para para la incorporación (creación o conexión de cartera integrada).

• Experiencia del usuario:

  • Los usuarios pueden incorporarse con unos pocos clics, sin necesidad de frase semilla o extensión.
  • La cartera está integrada y gestionada por Para, pero puede exportarse o conectarse a carteras externas si es necesario.

// Example: ParaProvider setup
<ParaProviderBase
  config={{ appName: "Adrift" }}
  externalWalletConfig={{ wallets: [], evmConnector: { config: { chains: [pacifica], ssr: true } } }}
  paraClientConfig={{ apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY, env }}
  paraModalConfig={{ /* ...branding and UX options... */ }}
>
  {children}
</ParaProviderBase>

Cartera como identidad

• Identidad:

  • A cada usuario se le asigna una dirección compatible con EVM al incorporarse.
  • Esta dirección se utiliza como su identidad única en el juego y para todas las interacciones con la appchain.
  • La aplicación utiliza hooks como useAccount, useWallet y useMe para acceder a la cartera del usuario actual y a los datos del jugador.

• Datos del jugador:

  • La dirección de la cartera se utiliza para obtener y almacenar el estado del jugador (por ejemplo, registros, estado, ganador/descalificado, etc).

// Example: Accessing the current user's wallet
const { embedded } = useAccount()
const { data: wallet } = useWallet()
const me = useMe() // gets player data for wallet address

Firma de transacciones y acciones de Appchain

• Flujo de transacción:

  • Cuando un usuario realiza una acción (por ejemplo, "Check In"), la aplicación utiliza la cartera Para para firmar y enviar una transacción a la appchain.
  • La aplicación utiliza la biblioteca viem (a través de la integración de Para) para crear un cliente de cartera para la firma.

• Ejemplo de firma:

  • La aplicación verifica el saldo de la cartera, estima el gas y envía la transacción utilizando la cartera integrada.
  • Después de enviar, sondea la confirmación de la transacción y actualiza la interfaz de usuario.

// Example: Signing and sending a transaction
const { viemClient } = useViemClient({ walletClientConfig: { chain: pacifica, transport: http() } })
const tx = await viemClient.writeContract({
  address: gameData.address,
  abi: [parseAbiItem("function checkIn()")],
  functionName: "checkIn",
  chain: pacifica,
  account: viemClient.account,
  gas: gas * BigInt(2)
})

Archivos y componentes clave en Adrift

• components/providers/ParaProvider.tsx — Configura el proveedor de la cartera Para.
• components/ConnectWallet.tsx — Gestiona la conexión de la cartera y la interfaz de inicio de sesión.
• hooks/para/useViemClients.ts — Crea un cliente de cartera para firmar transacciones.
• hooks/useMe.tsx — Obtiene datos del jugador para la cartera actual.
• components/ship-status/InProgressStatus.tsx — Ejemplo de firma y envío de una transacción.

Siguiendo este patrón, puedes construir una experiencia de usuario fluida con carteras para tus propios proyectos de appchain, haciendo que el proceso de incorporación y las acciones en cadena sean lo más sencillas posible para tus usuarios.