Adding the create fiat account API

layouts/default.vue

@@ -112,6 +112,32 @@
             </v-list-item-content>
           </v-list-item>
         </v-list-group>
+
+        <v-list-group>
+          <template v-slot:activator>
+            <v-list-item-title>Wires APIs</v-list-item-title>
+          </template>
+
+          <v-list-item to="/debug/wires" router exact>
+            <v-list-item-content>
+              <v-list-item-title class="list-items pl-2">
+                Overview
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item
+            v-for="(item, i) in wiresLink"
+            :key="`wiresLink-${i}`"
+            :to="item.to"
+            router
+            exact
+          >
+            <v-list-item-content>
+              <v-list-item-title class="list-items pl-2" v-text="item.title" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-group>
       </v-list>
     </v-navigation-drawer>
     <v-app-bar clipped-left fixed app dark color="primary" dense>
@@ -222,10 +248,6 @@ export default class DefaultLayoutsClass extends Vue {
       title: 'GET /settlements/{id}',
       to: '/debug/settlements/details',
     },
-    {
-      title: 'POST /accounts',
-      to: '/debug/accounts/create',
-    },
   ]
 
   paymentsLinks = [
@@ -277,10 +299,6 @@ export default class DefaultLayoutsClass extends Vue {
       title: 'GET /settlements/{id}',
       to: '/debug/settlements/details',
     },
-    {
-      title: 'POST /accounts',
-      to: '/debug/accounts/create',
-    },
   ]
 
   walletsLinks = [
@@ -318,6 +336,17 @@ export default class DefaultLayoutsClass extends Vue {
     },
   ]
 
+  wiresLink = [
+    {
+      title: 'GET /wires/{id}',
+      to: '/debug/wires/details',
+    },
+    {
+      title: 'POST /wires',
+      to: '/debug/wires/create',
+    },
+  ]
+
   miniVariant = false
   right = true
   showRightDrawer = false

lib/accountsApi.ts

@@ -67,7 +67,18 @@ function createAccount(payload: CreateAccountPayload) {
   return instance.post(url, payload)
 }
 
+/**
+ * Get Account By Id
+ * @param {String} accountId
+ */
+function getAccountById(accountId: string) {
+  const url = `/v1/wires/${accountId}`
+
+  return instance.get(url)
+}
+
 export default {
   getInstance,
   createAccount,
+  getAccountById,
 }

lib/accountsTestData.ts

@@ -2,18 +2,18 @@ export const exampleAccounts = [
   {
     title: 'Test Data',
     formData: {
-      beneficiaryName: 'Test User 1',
+      beneficiaryName: 'Satoshi Nakamoto',
       bankName: 'WELLS FARGO BANK',
       accountNumber: '11111111111',
       bankIdentifier: '121000248',
       billingDetails: {
-        name: 'Test User 1',
-        city: 'City',
+        name: 'Satoshi Nakamoto',
+        city: 'Boston',
         country: 'US',
-        line1: 'Address1',
-        line2: 'Address2',
-        district: 'CA',
-        postalCode: '11111',
+        line1: '100 Money Street',
+        line2: 'Suite 1',
+        district: 'MA',
+        postalCode: '01234',
       },
       bankAddress: {
         city: 'SAN FRANCISCO',

pages/debug/index.vue

@@ -152,21 +152,6 @@
           </a>
         </p>
       </v-card>
-
-      <v-card class="body-1 px-6 py-8 mb-4" max-width="800" outlined>
-        <h2 class="title">Accounts endpoints</h2>
-        <span class="caption">Requires: api key</span>
-        <br /><br />
-        <p>
-          Api endpoints to manage wire accounts.
-        </p>
-        <p>
-          <v-chip small color="primary">POST</v-chip>
-          <a href="/debug/accounts/create">
-            Create wire account
-          </a>
-        </p>
-      </v-card>
     </v-flex>
   </v-layout>
 </template>

pages/debug/wires/details.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-layout>
+    <v-row>
+      <v-col cols="12" md="4">
+        <v-form>
+          <v-text-field v-model="formData.accountId" label="Account 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 FetchAccountDetailsClass extends Vue {
+  // data
+  formData = {
+    accountId: '',
+  }
+
+  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.$accountsApi.getAccountById(this.formData.accountId)
+    } catch (error) {
+      this.error = error
+      this.showError = true
+    } finally {
+      this.loading = false
+    }
+  }
+}
+</script>

pages/debug/wires/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-layout>
+    <v-flex>
+      <v-card class="body-1 px-6 py-8 mb-4" max-width="800" outlined>
+        <h1 class="headline">API viewer</h1>
+
+        <p class="mt-6">
+          Make api calls using your private api key. Explore payload and
+          response data in the UI.
+        </p>
+        <p>
+          Please use the settings panel on the right to configure your payments
+          api key.
+        </p>
+        <p class="subtitle-2">
+          (Caution: When using a production api key it will charge your card).
+        </p>
+      </v-card>
+
+      <v-card class="body-1 px-6 py-8 mb-4" max-width="800" outlined>
+        <h2 class="title">Accounts endpoints</h2>
+        <span class="caption">Requires: api key</span>
+        <br /><br />
+        <p>
+          Api endpoints to manage wire accounts.
+        </p>
+        <p>
+          <v-chip small color="primary">GET</v-chip>
+          <a href="/debug/wires/details">
+            Get wire account details by id
+          </a>
+        </p>
+        <p>
+          <v-chip small color="primary">POST</v-chip>
+          <a href="/debug/wires/create">
+            Create wire account
+          </a>
+        </p>
+      </v-card>
+    </v-flex>
+  </v-layout>
+</template>

plugins/accountsApi.ts

@@ -4,6 +4,7 @@ declare module 'vue/types/vue' {
   interface Vue {
     $accountsApi: {
       createAccount: (payload: CreateAccountPayload) => any
+      getAccountById: any
       getInstance: any
     }
   }