Installation

Follow the below steps to install and integrate the library in your experience. If you prefer to dive directly into code, the examples and configuration from this document are also available in the Experience Demo Next App.

Install FuturePass React SDK

npm

npm i @futureverse/experience-sdk @futureverse/react @futureverse/component-library --save

yarn

yarn add @futureverse/experience-sdk @futureverse/react @futureverse/component-library

Peer Dependencies

This library requires the following peer dependencies:

    "react": "^18.2.0",
    "@polkadot/api": "^10.9.1",
    "@polkadot/types": "^10.9.1",
    "@polkadot/util": "^12.6.1",
    "@polkadot/util-crypto": "^12.6.1",
    "@therootnetwork/api": "1.0.8",
    "@therootnetwork/api-types": "1.0.3",
    "@therootnetwork/extrinsic": "1.0.5",
    "@futureverse/component-library": "~0.2.0",
    "@futureverse/experience-sdk": "~0.11.0-alpha.1",
    "@futureverse/identity-contract-bindings": "~0.1.0",
    "@futureverse/rpc-kit": "~0.1.0",
    "@web3-react/eip1193": "^8.0.27-beta.0",
    "ethers": "5.7.2"

Caveats

Create React App

CRA has an ongoing issue with importing not fully specified ESM Modules. The easiest way to deal with it is to use this workaround. This doesn’t apply to the Experience Demo Next App.

Next.js

Please use:

experimental: {
    esmExternals: "false",
}

In your Next config.

App Router

This library does not officially support Next.js 14 using App Router at this time. However, you can use the solution from the official Next.js documentation to work around it.

Server-side Frameworks (SSR)

Due to the nature of Web3 authentication, @futureverse/react operates on the client side. For users utilizing frameworks that support server-side rendering, such as Next.js, a dynamic import approach is necessary to ensure compatibility. This modification prevents the SDK from loading on the server side, which is crucial due to the browser-specific functionalities of the Xaman integration.

import dynamic from 'next/dynamic'
const FutureverseProvider = dynamic(() => import('@futureverse/react').then((mod) => mod.FutureverseProvider), {
  ssr: false,
})

This updated import method ensures that the FutureverseProvider is only loaded in the browser environment, thus bypassing SSR execution and aligning with the new SDK constraints. This approach helps maintain smooth operation and user experience across all platforms while leveraging the new capabilities provided by the Xaman Wallet integration.

To further clarify, the example provided above is specifically tailored for applications using Next.js. If you are utilizing other frameworks that support server-side rendering (SSR), similar adjustments will be necessary to ensure compatibility with the browser-only requirements of the new SDK.

For frameworks other than Next.js, you should similarly configure dynamic imports or equivalent mechanisms provided by your specific framework to prevent the SDK from loading during the server-side rendering process. Each framework may have its own method or syntax for handling such cases, so it is recommended to consult the official documentation of the framework for precise instructions on bypassing SSR.

This step is crucial to ensure that all browser-specific functionalities, particularly those related to the Xaman Wallet integration, operate flawlessly without attempting to execute in non-browser environments where they are not supported. By adapting your application's import and initialization logic accordingly, you can maintain a robust and efficient application architecture that leverages the full capabilities of the updated SDK.