Merge pull request #269 from captgao22/addressBook

[PAYM-775] Add address book to sample app

layouts/default.vue

@@ -577,6 +577,18 @@ export default class DefaultLayoutsClass extends Vue {
   ]
 
   payoutsLinks = [
+    {
+      title: 'POST /addressBook/recipients',
+      to: '/debug/beta/addressBook/create',
+    },
+    {
+      title: 'GET /addressBook/recipients',
+      to: '/debug/beta/addressBook/fetch',
+    },
+    {
+      title: 'GET /addressBook/recipients/{id}',
+      to: '/debug/beta/addressBook/details',
+    },
     {
       title: 'POST /payouts',
       to: '/debug/payouts/create',

lib/beta/addressBookApi.ts

@@ -0,0 +1,118 @@
+import get from 'lodash/get'
+import axios from 'axios'
+
+import { getAPIHostname } from '../apiTarget'
+
+export interface CreateRecipientPayload {
+  idempotencyKey: string
+  chain: string
+  address: string
+  metadata: {
+    email: string
+    bns: string
+    nickname: string
+  }
+}
+
+/**
+ * Global error handler:
+ * Intercepts all axios reponses and maps
+ * to errorHandler object
+ */
+const instance = axios.create({
+  baseURL: getAPIHostname(),
+})
+
+instance.interceptors.response.use(
+  function (response) {
+    if (get(response, 'data.data')) {
+      return response.data.data
+    }
+    return response
+  },
+  function (error) {
+    let response = get(error, 'response')
+    if (!response) {
+      response = error.toJSON()
+    }
+    return Promise.reject(response)
+  }
+)
+
+const nullIfEmpty = (prop: string | undefined) => {
+  if (prop !== undefined && prop.trim() === '') {
+    return undefined
+  }
+  return prop
+}
+
+/** Returns the axios instance */
+function getInstance() {
+  return instance
+}
+
+/**
+ * Create Recipient
+ * @param {*} payload
+ */
+function createRecipient(payload: CreateRecipientPayload) {
+  const url = '/v1/addressBook/recipients'
+  return instance.post(url, payload)
+}
+
+/**
+ * Get Recipient
+ * @param {String} recipientId
+ */
+function getRecipientById(recipientId: string) {
+  const url = `/v1/addressBook/recipients/${recipientId}`
+
+  return instance.get(url)
+}
+
+/**
+ * Get Recipient
+ * @param address
+ * @param chain
+ * @param email
+ * @param status
+ * @param {String} from
+ * @param {String} to
+ * @param {String} pageBefore
+ * @param {String} pageAfter
+ * @param {String} pageSize
+ */
+function getRecipients(
+  address: string,
+  chain: string,
+  email: string,
+  status: string,
+  from: string,
+  to: string,
+  pageBefore: string,
+  pageAfter: string,
+  pageSize: string
+) {
+  const queryParams = {
+    address: nullIfEmpty(address),
+    chain: nullIfEmpty(chain),
+    email: nullIfEmpty(email),
+    status: nullIfEmpty(status),
+    from: nullIfEmpty(from),
+    to: nullIfEmpty(to),
+    pageBefore: nullIfEmpty(pageBefore),
+    pageAfter: nullIfEmpty(pageAfter),
+    pageSize: nullIfEmpty(pageSize),
+  }
+
+  const url = '/v1/addressBook/recipients'
+
+  return instance.get(url, { params: queryParams })
+}
+
+export default {
+  getInstance,
+  getRecipients,
+  getRecipientById,
+  createRecipient,
+}

nuxt.config.js

@@ -68,6 +68,7 @@ export default {
     '~/plugins/businessAccount/transfersApi',
     '~/plugins/cryptoPaymentMetadataApi',
     '~/plugins/beta/paymentsApi',
+    '~/plugins/beta/addressBookApi',
   ],
   /*
    ** Nuxt.js dev-modules

pages/debug/beta/addressBook/create.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-layout>
+    <v-row>
+      <v-col cols="12" md="4">
+        <v-form>
+          <v-text-field v-model="formData.address" label="Address" />
+          <v-select
+            v-model="formData.chain"
+            :items="supportedChains"
+            label="Blockchain"
+          />
+          <v-text-field v-model="formData.email" label="Email" />
+          <v-text-field v-model="formData.bns" label="bns" />
+          <v-text-field v-model="formData.nickname" label="Nickname" />
+          <v-btn
+            depressed
+            class="mb-7"
+            color="primary"
+            :loading="loading"
+            @click.prevent="makeApiCall"
+          >
+            Make api call
+          </v-btn>
+        </v-form>
+      </v-col>
+      <v-col cols="12" md="8">
+        <RequestInfo
+          :url="requestUrl"
+          :payload="payload"
+          :response="response"
+        />
+      </v-col>
+    </v-row>
+    <ErrorSheet
+      :error="error"
+      :show-error="showError"
+      @onChange="onErrorSheetClosed"
+    />
+  </v-layout>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { mapGetters } from 'vuex'
+import { v4 as uuidv4 } from 'uuid'
+import RequestInfo from '~/components/RequestInfo.vue'
+import ErrorSheet from '~/components/ErrorSheet.vue'
+import { CreateRecipientPayload } from '~/lib/beta/addressBookApi'
+@Component({
+  components: {
+    RequestInfo,
+    ErrorSheet,
+  },
+  computed: {
+    ...mapGetters({
+      payload: 'getRequestPayload',
+      response: 'getRequestResponse',
+      requestUrl: 'getRequestUrl',
+      isMarketplace: 'isMarketplace',
+    }),
+  },
+})
+export default class CreateRecipientClass extends Vue {
+  formData = {
+    idempotencyKey: '',
+    address: '',
+    chain: '',
+    email: '',
+    bns: '',
+    nickname: '',
+  }
+
+  required = [(v: string) => !!v || 'Field is required']
+  supportedChains = [
+    'BTC',
+    'ETH',
+    'USDC',
+    'FLOW',
+    'USDCFLOW',
+    'MANA',
+    'MATIC',
+    'USDCMATIC',
+  ]
+
+  error = {}
+  loading = false
+  showError = false
+
+  onErrorSheetClosed() {
+    this.error = {}
+    this.showError = false
+  }
+
+  async makeApiCall() {
+    this.loading = true
+    const payload: CreateRecipientPayload = {
+      idempotencyKey: uuidv4(),
+      address: this.formData.address,
+      chain: this.formData.chain,
+      metadata: {
+        email: this.formData.email,
+        bns: this.formData.bns,
+        nickname: this.formData.nickname,
+      },
+    }
+    try {
+      await this.$addressBookApiBeta.createRecipient(payload)
+    } catch (error) {
+      this.error = error
+      this.showError = true
+    } finally {
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style scoped></style>

pages/debug/beta/addressBook/details.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-layout>
+    <v-row>
+      <v-col cols="12" md="4">
+        <v-form>
+          <v-text-field v-model="formData.recipientId" label="Recipient Id" />
+          <v-btn
+            depressed
+            class="mb-7"
+            color="primary"
+            :loading="loading"
+            @click.prevent="makeApiCall()"
+          >
+            Make api call
+          </v-btn>
+        </v-form>
+      </v-col>
+      <v-col cols="12" md="8">
+        <RequestInfo
+          :url="requestUrl"
+          :payload="payload"
+          :response="response"
+        />
+      </v-col>
+    </v-row>
+    <ErrorSheet
+      :error="error"
+      :show-error="showError"
+      @onChange="onErrorSheetClosed"
+    />
+  </v-layout>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { mapGetters } from 'vuex'
+import RequestInfo from '~/components/RequestInfo.vue'
+import ErrorSheet from '~/components/ErrorSheet.vue'
+@Component({
+  components: {
+    RequestInfo,
+    ErrorSheet,
+  },
+  computed: {
+    ...mapGetters({
+      payload: 'getRequestPayload',
+      response: 'getRequestResponse',
+      requestUrl: 'getRequestUrl',
+    }),
+  },
+})
+export default class FetchRecipientDetailsClass extends Vue {
+  // data
+  formData = {
+    recipientId: '',
+  }
+
+  required = [(v: string) => !!v || 'Field is required']
+  error = {}
+  loading = false
+  showError = false
+  // methods
+  onErrorSheetClosed() {
+    this.error = {}
+    this.showError = false
+  }
+
+  async makeApiCall() {
+    this.loading = true
+    try {
+      await this.$addressBookApiBeta.getRecipientById(this.formData.recipientId)
+    } catch (error) {
+      this.error = error
+      this.showError = true
+    } finally {
+      this.loading = false
+    }
+  }
+}
+</script>