@crtxio/search

@crtxio/search is a Nuxt3 layer provides a component to search for the availability of domains of the butterfly protocol on cortex press.

Setup

Make sure to install the dependencies:

npm install --save @crtxio/search

or

yarn add @crtxio/search

Add the dependency to your extends in nuxt.config:

defineNuxtConfig({
  extends: [
    '@crtxio/search'
  ]
})

How to use it

Components

<template>
  <div class="h-screen bg-slate-600 text-white">
    <div>
      <div class="text-3xl mb-3">
        Press Search
      </div>
      <PressSearch 
        tld="pepe"
        mainTwCssClasses="text-black"
        inputTwCssClasses="w-full"
        @update-typing="updateTyping" 
        @update-available="updateAvailable" 
        :restrictedTerms="restrictedTerms"
        :restrictedBeginnings="restrictedBeginnings"/>
      

      <div class="text-3xl mb-3">
        Chain Search
      </div>

      <ChainSearch 
        tld="pepe"
        contract="0x9bD43DCC42Ff2187fFe2101d483A08173582b82f"
        mainTwCssClasses="text-black"
        inputTwCssClasses="w-full"
        @update-typing="updateTyping" 
        @update-available="updateAvailable" 
        :restrictedTerms="restrictedTerms"
        :restrictedBeginnings="['xn--']"/>

      <br />

      <div v-if="available">
        <div class="text-3xl">Available!</div>
      </div>
      <div v-else>
        <div class="text-3xl">Not Available!</div>
      </div>

      <div v-if="typing">
        <div class="text-3xl">Typing...</div>
      </div>
      <div v-if="!typing">
        <div class="text-3xl">Not Typing...</div>
      </div>

      <div class="text-3xl">Domain: {{ domain }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        available: false,
        typing: false,
        domain: '',
        restrictedTerms: [
          'example',
          'bitcoin'
        ],
        restrictedBeginnings: ['xn--']
      }
    },
    methods: {
      updateAvailable(available, domain) {
        this.available = available;
        this.typing = false;
        this.domain = domain;
      },
      updateTyping(typing) {
        this.typing = typing;
      }
    }
  }
</script>

ChainSearch uses the default mainnet provider of the ethers package. To improve speed or look up on a chain different from the Ethereum mainnet define your RPC url like this:

.env

RPC_URL=your-rpc-url

nuxt.config.ts

runtimeConfig: {
  private: {
    RPC_URL: process.env.RPC_URL
  }
}