feat(MiniWallet): Added mini wallet component

components/interactables/QuickProfile/QuickProfile.html

@@ -3,7 +3,7 @@
   v-click-outside="close"
   :style="$device.isDesktop ? `top: ${ui.quickProfilePosition.y}px; left: ${ui.quickProfilePosition.x}px;` : ''">
   <div class="header">
-    <UiCircle type="random" :seed="user.address" :size="45" />
+    <UiCircle type="random" :seed="user.account.accountId" :size="45" />
   </div>
   <TypographyTitle :text="user.name" :size="6" />
   <TypographyText :text="user.publicKey ? `${user.publicKey.substr(0, 23)}...` : ``" :size="6" class="address" />

components/tailored/core/group/icon/GroupIcon.html

@@ -3,7 +3,6 @@
         <div v-for="(address, i) in group.members.slice(0, 3)" :class="[`group-el-${i}`]">
             <UiCircle type="random" :seed="address" :size="i === 2 ? 10 : i == 1 ? 20 : 30" />
         </div>
-
     </div>
     <div v-else-if="group.members.length == 2" class="group-double">
         <div v-for="(address, i) in group.members" :class="[`group-el-${i}`]">

components/tailored/core/user/User.html

@@ -1,5 +1,5 @@
 <div class="user" @contextmenu="contextMenu" v-on:click="navigateToUser">
-  <UiCircle type="random" :seed="user.publicKey" :size="35" />
+  <UiCircle type="random" :seed="user.account.accountId" :size="35" />
   <circle-icon
     size="1x"
     v-if="user.state !== 'mobile' && !isTyping"

components/tailored/friends/friend/Friend.html

@@ -1,5 +1,5 @@
 <div class="friend">
-  <UiCircle type="random" :seed="friend.publicKey" :size="35" />
+  <UiCircle type="random" :seed="friend.account.accountId" :size="35" />
   <smartphone-icon
     size="1x"
     v-if="friend.state === 'mobile'"

components/tailored/wallet/mini/Mini.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="mini-wallet" v-click-outside="toggleWalletMini">
-    <TailoredWalletMiniNav :route="route" />
-    <TailoredWalletMiniSend v-if="route === 'send'" />
+    <TailoredWalletMiniBody :updateMethod="updateMethod" />
   </div>
 </template>
 <script lang="ts">
@@ -14,7 +13,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      route: 'send',
+      method: 'send',
     }
   },
   methods: {
@@ -29,6 +28,9 @@ export default Vue.extend({
         })
       }
     },
+    updateMethod(method: string) {
+      this.$data.method = method
+    },
   },
 })
 </script>

components/tailored/wallet/mini/body/Body.html

@@ -0,0 +1,49 @@
+<div id="wallet-mini-send">
+  <UiSpacer :height="25" />
+  <div class="flex-row centered">
+    <TypographyTitle :size="2" text="$0" />
+  </div>
+  <UiSpacer :height="45" />
+  <div class="flex-row">
+    <InteractablesInputGroup class="input-container"
+      type="primary"
+      size="small"
+      :placeholder="$t('friends.search_placeholder')"
+      :action="searchFriend"
+      v-model="accountID"
+      :loading="searching">
+      <check-circle-2-icon size="1x" />
+    </InteractablesInputGroup>
+    <InteractablesSelect
+      :options="[{ text: 'USD', value: 'usd' }]"
+      v-model="paymentOption"
+      size="small"
+      class="form-control"
+    />
+  </div>
+  <div id="send-payment">
+    <InteractablesButton
+      type="primary"
+      size="small"
+      text="Send Money"
+      :action="updateMethod('send')">
+      <send-icon size="1x" />
+    </InteractablesButton>
+    <InteractablesButton
+      type="primary"
+      size="small"
+      text="Request Money"
+      :action="updateMethod('request')">
+      <redo-icon size="1x" />
+    </InteractablesButton>
+  </div>
+  <UiHorizontalRuleText plaintext value="Details" />
+  <div class="details">
+    <TypographyText :size="6" text="To: 0x0000000..." />
+    <TypographyText :size="6" text="From: 0x0000000..." />
+    <TypographyText :size="6" text="Amount: 0.00" />
+    <TypographyText :size="6" text="Currency: USDC" />
+    <br>
+    <TypographyText :size="6" text="TXID: AU28CC012ECX0Z" />
+  </div>
+</div>

components/tailored/wallet/mini/body/Body.less

@@ -0,0 +1,35 @@
+#wallet-mini-send {
+  padding: @normal-spacing;
+}
+.flex-row {
+  display: inline-flex;
+  width: 100%;
+  flex-direction: row;
+
+  .input-container {
+    flex: 1;
+    margin-right: @normal-spacing;
+  }
+}
+.title {
+  color: @green;
+}
+.centered {
+  justify-content: center;
+  margin-top: @normal-spacing;
+  margin-bottom: @normal-spacing;
+}
+#send-payment {
+  margin-top: @normal-spacing;
+  .is-button {
+    width: calc(50% - 0.25em);
+  }
+}
+.details {
+  border: @light-border;
+  padding: @light-spacing;
+  background: @semitransparent-light-gradient;
+  .is-text {
+    font-family: @primary-font;
+  }
+}

components/tailored/wallet/mini/body/Body.vue

@@ -0,0 +1,25 @@
+<template src="./Body.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+
+import { CheckCircle2Icon, RedoIcon, SendIcon } from 'satellite-lucide-icons'
+
+export default Vue.extend({
+  components: {
+    CheckCircle2Icon,
+    RedoIcon,
+    SendIcon,
+  },
+  data() {
+    return {
+      paymentOption: 'usd',
+    }
+  },
+  props: {
+    updateMethod: {
+      type: Function,
+    },
+  },
+})
+</script>
+<style scoped lang="less" src="./Body.less"></style>

test/Crypto.spec.ts

@@ -2,13 +2,13 @@ import Crypto from '../libraries/Crypto/Crypto.ts'
 
 describe('Logo', () => {
   // create new instance of class
-  const crypto = new Crypto();
+  const crypto = new Crypto()
 
   // test that signMessage method exists 
-  test("defines signMessage()", () => {
-    expect(typeof crypto.signMessage).toBe("function");
+  test('defines signMessage()', () => {
+    expect(typeof crypto.signMessage).toBe('function')
   });
-  test("expect signmessage without signingKey to be null", () => {
-    expect(crypto.signMessage('dogs')).toBe(null);
+  test('expect signmessage without signingKey to be null', () => {
+    expect(crypto.signMessage('dogs')).toBe(null)
   });
-})
+})