Hive Wallet SDK Examples

Choose contact

Assume you are building a website that allows users to send 1 HIVE to a recipient of their choice. In this example we will address how users can choose the recepient. The design will be straightforward, featuring a single textbox where users (the senders) can enter the Hive username of the recipient. At the time of writing, this is the standard way of selecting a receiver, however it is prone to typos and makes users feel unsafe. To solve this problem, we'll use the chooseContact function, which allows users to pick the recepient from their contacts list, which is safely stored on their wallet.
Please note that currently only Peak Vault supports this feature.

Choose contact button

The main idea is to have a button next to the input field which allows users to open their contacts. Once the users have chosen a recepient, the input field must be updated. The result of the wallet request contains the chosen contact.
Below you can find the logic that should be implemented in the choose contact button.

const pickContact = async () => {
  try {
    // Send wallet request
    const res = await wallet.chooseContact()
    if (res.success) {
      let recepient = res.result
      // Update the input value
    }
  } catch (err) {
    console.error(err)
  }
}

Code snippet

Vue

<div class="container">
  <input type="text" placeholder="recepient" v-model="recepient" />
  <button @click="pickContact()">
    <UserGroupIcon class="icon" />
  </button>
</div>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getWallet } from '@peakd/hive-wallet-sdk'
  import { UserGroupIcon } from '@heroicons/vue/24/outline'

  let wallet
  const recepient = ref('')

  // Get wallet instance
  onMounted(async () => {
    wallet = await getWallet('peakvault')
  })

  /**
   * Allow the user to choose a contact from their wallet.
   */
  const pickContact = async () => {
    try {
      // Send wallet request
      const res = await wallet.chooseContact()
      // Update the input value
      if (res.success) {
        recepient.value = res.result
      }
    } catch (err) {
      console.error(err)
    }
  }
<style/>

Plain

<div class="container">
  <input type="text" placeholder="recepient" id="recepient" />
  <button @click="">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-6"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
      />
    </svg>
  </button>
</div>

<script>
  import { getWallet } from '@peakd/hive-wallet-sdk'

  let wallet

  // Get wallet instance
  window.onload = async () => {
    wallet = await getWallet('peakvault')
  }

  /**
   * Allow the user to choose a contact from their wallet.
   */
  const pickContact = async () => {
    try {
      // Send wallet request
      const res = await wallet.chooseContact()
      // Update the input value
      if (res.success) {
        const recepient = document.getElementById('recepient')
        recepient.value = res.result
      }
    } catch (err) {
      console.error(err)
    }
  }
</script>

Styles

.container {
  display: flex;
  align-items: stretch;
}

input {
  width: 10rem;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  font-size: 1rem;
  background-color: #1a1a1a;
  border: 1px solid #4169e1;
}

input:focus {
  border-color: #4169e1;
  box-shadow: 0 0 0 1px #4169e1;
  outline: none;
}

button {
  padding: 0.5rem 0.75rem;
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  background-color: #4169e1;
  color: #ffffff;
  transition: filter 0.2s ease, color 0.2s ease;
  border: 1px solid #4169e1;
}

button:hover {
  filter: brightness(1.1);
  color: #ffffff;
}

button:active {
  filter: brightness(0.9);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.5;
}