feat: creating deposit Offers (#332)

package.json

@@ -174,7 +174,7 @@
         "weekstart": "1.0.1"
     },
     "dependencies": {
-        "@c4tplatform/signavaultjs": "^1.0.11",
+        "@c4tplatform/signavaultjs": "^1.1",
         "@cypress/xpath": "^2.0.3",
         "vue": "^2.6.11",
         "vue-cli-plugin-vuetify": "^2.0.3",

src/components/CamInput.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component
 export default class CamInput extends Vue {
@@ -44,7 +44,7 @@ export default class CamInput extends Vue {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .cam-input {
     display: flex;
     flex-direction: column;

src/components/misc/AvaxInput.vue

@@ -1,38 +1,63 @@
 <template>
-    <div class="avax_input">
-        <div class="col1 hover_border">
-            <button class="max_but" @click="maxOut" v-if="max">MAX</button>
-            <BigNumInput
-                ref="amt_in"
-                class="amt_in"
-                contenteditable="amt_in"
-                :denomination="9"
-                :max="max"
-                placeholder="0.00"
-                @change="amount_in"
-                :readonly="readonly"
-                :initial="initial"
-            ></BigNumInput>
-        </div>
-        <p class="ticker">{{ nativeAssetSymbol }}</p>
-        <div v-if="balance" class="balance">
-            <div>
-                <p>
-                    <b>{{ $t('misc.balance') }}:</b>
-                    {{ balanceBig }}
-                </p>
+    <div class="avax_input__container">
+        <div class="avax_input">
+            <div
+                :class="
+                    'col1'
+                        .concat(readonly ? '' : ' hover_border')
+                        .concat(camInput ? ' cam-input' : '')
+                "
+            >
+                <button class="max_but" @click="maxOut" v-if="max">MAX</button>
+                <BigNumInput
+                    ref="amt_in"
+                    class="amt_in"
+                    contenteditable="amt_in"
+                    :denomination="9"
+                    :max="max"
+                    placeholder="0.00"
+                    @change="amount_in"
+                    :readonly="readonly"
+                    :initial="initial"
+                ></BigNumInput>
+            </div>
+            <p :class="'ticker'.concat(camInput ? ' cam-input' : '')">{{ nativeAssetSymbol }}</p>
+            <div v-if="balance" class="balance">
+                <div>
+                    <p>
+                        <b>{{ $t('misc.balance') }}:</b>
+                        {{ balanceBig }}
+                    </p>
+                </div>
+                <div></div>
             </div>
-            <div></div>
+        </div>
+        <div class="validation-message" v-if="error && errorMessage">
+            <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M10.8333 10.8333H9.16666V5.83332H10.8333M10.8333 14.1667H9.16666V12.5H10.8333M9.99999 1.66666C8.90564 1.66666 7.82201 1.8822 6.81096 2.30099C5.79991 2.71978 4.88125 3.33361 4.10743 4.10743C2.54463 5.67024 1.66666 7.78985 1.66666 9.99999C1.66666 12.2101 2.54463 14.3297 4.10743 15.8925C4.88125 16.6664 5.79991 17.2802 6.81096 17.699C7.82201 18.1178 8.90564 18.3333 9.99999 18.3333C12.2101 18.3333 14.3297 17.4553 15.8925 15.8925C17.4553 14.3297 18.3333 12.2101 18.3333 9.99999C18.3333 8.90564 18.1178 7.82201 17.699 6.81096C17.2802 5.79991 16.6664 4.88125 15.8925 4.10743C15.1187 3.33361 14.2001 2.71978 13.189 2.30099C12.178 1.8822 11.0943 1.66666 9.99999 1.66666Z"
+                    fill="#E5431F"
+                />
+            </svg>
+            <p class="err">
+                {{ errorMessage }}
+            </p>
         </div>
     </div>
 </template>
 <script lang="ts">
+import { Big } from '@/helpers/helper'
 import 'reflect-metadata'
-import { Vue, Component, Prop, Model } from 'vue-property-decorator'
-import { bnToBig, Big } from '@/helpers/helper'
+import { Component, Model, Prop, Vue } from 'vue-property-decorator'
 //@ts-ignore
-import { BigNumInput } from '@c4tplatform/vue_components'
 import { BN } from '@c4tplatform/caminojs/dist'
+import { BigNumInput } from '@c4tplatform/vue_components'
 import { priceDict } from '../../store/types'
 
 @Component({
@@ -51,6 +76,9 @@ export default class AvaxInput extends Vue {
     @Prop() balance?: Big | null
     @Prop() alias?: string
     @Prop() readonly?: boolean
+    @Prop() camInput?: boolean
+    @Prop({ default: false }) error!: boolean
+    @Prop({ default: '' }) errorMessage!: string
 
     maxOut(ev: MouseEvent) {
         ev?.preventDefault()
@@ -103,23 +131,28 @@ export default class AvaxInput extends Vue {
 @use '../../styles/abstracts/mixins';
 
 .avax_input {
+    &__container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
     display: grid;
     grid-template-columns: 1fr max-content;
     grid-gap: 0px 10px;
     color: var(--primary-color);
     width: 100%;
-    height: 40px;
 
     .amt_in {
         color: var(--primary-color);
-        font-size: 15px;
+        font-size: 14px;
         font-family: 'Inter';
         flex-grow: 1;
         flex-shrink: 1;
         display: block;
         box-sizing: content-box;
         outline: none !important;
         border: none !important;
+        /* text-align: left !important; */
         &[readonly] {
             color: var(--primary-color-light);
             cursor: pointer;
@@ -130,7 +163,6 @@ export default class AvaxInput extends Vue {
     .amt_in,
     .max_but {
         background-color: var(--bg-light);
-        //border-radius: 3px;
     }
 }
 
@@ -168,18 +200,24 @@ export default class AvaxInput extends Vue {
     grid-template-columns: max-content 1fr;
     width: 100%;
     box-sizing: border-box;
-    padding: 8px 14px;
+    padding: 10px 12px;
     position: relative;
 }
 
+.cam-input {
+    background-color: transparent !important;
+    border-radius: 8px;
+    border: 1px solid var(--camino-slate-slate-600);
+    input,
+    p {
+        background-color: transparent !important;
+    }
+}
 .ticker {
     border-radius: var(--border-radius-sm);
-    padding: 8px 14px;
+    padding: 10px 12px;
 }
 
-p {
-    text-align: center;
-}
 .max_but {
     font-size: 13px;
     opacity: 0.4;
@@ -188,6 +226,20 @@ p {
     }
 }
 
+.validation-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    p {
+        color: var(--camino-brand-error, #e5431f);
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+    }
+}
+
 @include mixins.mobile-device {
     .balance {
         font-size: 12px;