Metaspace-deployment-kit NPM

Metaspace Deployment Kit

Description

Metaspace Deployment Kit is an SDK you can use to embed a metaspace into a desired website. This metaspace will be running on a cloud and will be pixel-streamed to the embed. It also comes with a Solana wallet connection that users can use to get a more personalized experience.

Some of the feature include:

Wallet connection and access restriction
Customizable buttons, fonts, and colors
Fullscreen

Customization Options

These are the configurable options that must be specified:

fontColor: font color of the Connect Wallet button
fullScreenColor: color of the Fullscreen button
fullScreenSize: size of the Fullscreen button
walletColor: color of the Connect Wallet button
walletFont: font family of the Connect Wallet button
walletId: wallet ID of the developer company
width: width of the embed

Dependencies

Most of the dependencies are indicated as PeerDependencies. Make sure they are installed with appropriate versions i.e:

"peerDependencies": {
  "@solana/wallet-adapter-base": "^0.9.5",
  "@solana/wallet-adapter-react": "^0.15.4",
  "@solana/wallet-adapter-react-ui": "^0.9.6",
  "@solana/wallet-adapter-wallets": "^0.16.1",
  "@solana/web3.js": "^1.41.4",
  "react-full-screen": "^1.1.0",
  "react-icons": "^4.3.1",
  "react": "^18.1.0",
  "react-dom": "^18.1.0",
  "crypto-browserify": "^3.12.0",
  "stream-browserify": "^3.0.0"
}

Installation & Usage

The package is currently on NPM with the name: metaspace-deployment-kit

After making sure of the dependencies, install the package using:

yarn add metaspace-deployment-kit

Due to Webpack 5's incompatibility with Web3 libraries, add the following fallbacks to your Webpack configuration files.

fallback: {
  crypto: require.resolve("crypto-browserify"),
  stream: require.resolve("stream-browserify")
}

This file is usually indicated as webpack.config.js.

After installation add the following imports to the desired location

import { MetaspaceWindow } from "metaspace-deployment-kit";
import "@solana/wallet-adapter-react-ui/styles.css";
require("metaspace-deployment-kit/lib/css/metaspace.css");
require("metaspace-deployment-kit/lib/css/content.css");

Now, you can use the MetaspaceWindow components just like any other react component.