# Futureverse Asset Register SDK

## Installation

NPM:

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

Yarn:

```bash
    yarn add @futureverse/asset-register-react
```

## Usage

```typescript
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](https://nextjs.org/blog/next-11-1#es-modules-support)_

```js
//...
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`