@futureverse/asset-registry-react

Futureverse Asset Registry 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 type { NamespaceUrl } from '@futureverse/asset-registry-react'
import { useState } from 'react'
import { Wallet } from 'ethers'

const ASSET_REGISTRY_ENDPOINT = 'http://localhost:4000/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() {
  return (
    // Provide the client to your App
    <AssetRegistryClientProvider
        url={ASSET_REGISTRY_ENDPOINT}
        domain={APP_DOMAIN}
        origin={APP_ORIGIN}
        chainId={1}
        signer={async (message) => {
            return await wallet.signMessage(message)
        }}
        walletAddress={walletAddress}
      >
      <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