@crtxio/bproto-contract-call/README.md

@crtxio/bproto-contract-call is a Nuxt3 layer which provides a Nuxt 3 component to purchase and register BProto domains and Nuxt 3 composables to call BProto standard and bridged zone contracts.

# @crtxio/bproto-contract-call

@crtxio/bproto-contract-call is a Nuxt3 layer which provides a Nuxt 3 component to purchase and register BProto domains and Nuxt 3 composables to call BProto standard and bridged zone contracts.

## Setup

Make sure to install the dependencies:

```bash
npm install --save @crtxio/bproto-contract-call
```

or

```bash
yarn add @crtxio/bproto-contract-call
```

Add the dependency to your `extends` in `nuxt.config`:

```ts
defineNuxtConfig({
  extends: [
    '@crtxio/bproto-contract-call'
  ]
})
```

## How to use it

### Components

```vue
<template>
  <div class="text-2xl font-semibold">Purchase</div>
  <div class="text-xl">With Searchbar</div>
  <div class="w-2/5"><PurchaseDomain issuanceId="0" @update-namehash="updateNamehash"/></div>
  <div class="text-xl mt-3">Only Button</div>
  <div class="w-2/5 flex justify-between items-center">
    <input
      v-model="label"
      type="text"
      class="border-black text-xl py-3 px-3 pl-10 rounded-full border focus:ring-0 focus:outline-none transition-all duration-300"
      placeholder="label"
    >

    <PurchaseDomain issuanceId="0" :searchBar="false" :label="label" @update-namehash="updateNamehash"/>
  </div>
  <div class="mt-10 text-2xl font-semibold">Register</div>
  <div class="w-2/5"><RegisterDomain contractAddress="0x9bD43DCC42Ff2187fFe2101d483A08173582b82f" parent="test.pepe" @update-namehash="updateNamehash"/></div>
  <div class="mt-10 text-2xl font-semibold">Namehash</div>
  <div>{{ namehash }}</div>
</template>

<script>
  export default {
    data() {
      return {
        namehash: '',
        label: ''
      }
    },
    methods: {
      updateNamehash(newHash) {
        this.namehash = newHash;
      }
    }
  }
</script>
```