@futureverse/asset-registry-react

Futureverse Asset Register SDK

Installation

NPM:

    npm install @futureverse/asset-registry-react --save

Yarn:

    yarn add @futureverse/asset-registry-react

Usage

import { useCreateSchema } from '@futureverse/asset-registry-react'
import { Namespace as NamespaceUrl } from '@futureverse/asset-registry/types'
import { useState, useMemo } from 'react'
import { Wallet } from 'ethers'

const ASSET_REGISTRY_ENDPOINT =
  'https://saybx2ywpd.execute-api.us-west-2.amazonaws.com/graphql'
const APP_DOMAIN = 'com.fv.app'
const WALLET_PRIVATE_KEY = ''
const APP_ORIGIN = 'http://com.fv.app/login'

const wallet = Wallet.createRandom()
const walletAddress = wallet.address

function App() {
  const auth = useMemo(
    () => ({
      domain: APP_DOMAIN,
      origin: APP_ORIGIN,
      chainId: 1,
      sign: async (message) => {
        return await wallet.signMessage(message)
      },
      walletAddress,
    }),
    [],
  )
  return (
    // Provide the client to your App
    <AssetRegistryClientProvider url={ASSET_REGISTRY_ENDPOINT} auth={auth}>
      <SchemaCreator />
    </AssetRegistryClientProvider>
  )
}

export const SchemaCreator = () => {
  const [version, setVersion] = useState(1)
  const [schema, setSchema] = useState('{}')
  const [name, setName] = useState('schemaName')
  const [namespace, setNamespace] = useState<NamespaceUrl>(
    'http://schema.futureverse.dev/fv' as NamespaceUrl,
  )
  const { createAsync: createSchemaAsync, schema: createdSchema } =
    useCreateSchema()

  const handleCreateMutate = async () => {
    try {
      await createSchemaAsync({
        schema,
        version,
        namespace,
        name,
      })
      setVersion(version + 1)
    } catch (e) {
      alert(e)
    }
  }

  return (
    <div>
      <div>
        <label>version: </label>
        <input
          value={version}
          type="number"
          onChange={(e) => setVersion(parseInt(e.target.value))}
        />
      </div>
      <div>
        <label>namespace: </label>
        <input
          value={namespace}
          size={80}
          onChange={(e) => setNamespace(e.target.value as NamespaceUrl)}
        />
      </div>
      <div>
        <label>name: </label>
        <input
          value={name}
          size={80}
          onChange={(e) => setName(e.target.value as NamespaceUrl)}
        />
      </div>
      <div>
        <label>schema: </label>
        <textarea
          rows={10}
          cols={80}
          value={schema}
          onChange={(e) => setSchema(e.target.value)}
        />
      </div>
      <br />
      <button onClick={handleCreateMutate}>create schema</button>

      {createdSchema && <div>{`Schema Name: ${createdSchema.name}`}</div>}
    </div>
  )
}

render(<App />, document.getElementById('root'))

Requirements

Troubleshoots

1. ERR_UNSUPPORTED_DIR_IMPORT error on the nextjs project

   In case you encounter the ERR_UNSUPPORTED_DIR_IMPORT error while utilizing this SDK in your Next.js project, simply include the following configuration to the next.config.js file. For more details, please refer to here

//...
experimental: {
  esmExternals: false,
},
//...