@futureverse/asset-register-react

Futureverse Asset Register SDK

Installation

NPM:

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

Yarn:

    yarn add @futureverse/asset-register-react

Usage

import { useCreateSchema } from '@futureverse/asset-register-react'
import { NamespaceUrl } from '@futureverse/asset-register/types'
import { useState, useMemo } from 'react'
import { generatePrivateKey, privateKeyToAccount } from 'viem/accounts'

const ASSET_REGISTER_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 = privateKeyToAccount(generatePrivateKey())
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
    <AssetRegisterClientProvider url={ASSET_REGISTER_ENDPOINT} auth={auth}>
      <SchemaCreator />
    </AssetRegisterClientProvider>
  )
}

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'))

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,
},
//...

Migration guide from @futureverse/asset-registry-react package

The new package name for this library is now @futureverse/asset-register-react. Hence, there are some files and codes that have been renamed in the new version. Here are the migration guides:

• The package dependency @futureverse/asset-registry has been changed to refer to @futureverse/asset-register
• Renamed files:
  • ./src/hooks/AssetRegistryClientProvider.tsx file is now ./src/hooks/AssetRegisterClientProvider.tsx
  • ./src/hooks/useAssetRegistryClientContext.ts file is now ./src/hooks/useAssetRegisterClientContext.ts
• AssetRegistryClientProvider provider class is now AssetRegisterClientProvider
• useAssetRegistryClientContext React hook is now useAssetRegisterClientContext