Usando opensea-js para construir una tienda estática generada con Nuxt. Como proveedores de carteras, parece que las mejores opciones son onboard.js o Web3modal.

Para compartir código y estado entre componentes, se utiliza "inyectar" en Nuxt. Cargado onboard.js y opensea-js como un complemento de cliente.

En la carga inicial, Onboard se inyecta globalmente. Después de que el usuario selecciona la billetera, la suscripción integrada activa una billetera con función de devolución de llamada wallet: (wallet) => {...} y, en su alcance, el proveedor actual pasa a estar disponible. Luego paso el proveedor a OpenSeaPort y lo inyecto globalmente. Pero no funciona, this.$seaport no está definido cuando se llama desde otros componentes (páginas).

/plugins/onboardopensea.client.js

 import { OpenSeaPort, Network } from "opensea-js"; import Onboard from "bnc-onboard"; export default ({ app }, inject) => { let seaport = {}; const onboard = Onboard({ dappId: "...", networkId: 1, subscriptions: { wallet: (wallet) => { seaport = new OpenSeaPort(wallet.provider, { networkName: Network.Main, apiKey: "...", }); inject("seaport", seaport); }, }, walletSelect: { wallets: ..., }, )}; inject("onboard", onboard); }

Parece que la función de inyección se ejecuta solo una vez, en la primera carga, y se ejecuta cuando se llama más tarde desde la función de devolución de llamada de la billetera integrada.