feat: use new inputs in jetton management (#29)

supadupadao · Jan 7, 2025 · 8a5d6dd · 8a5d6dd
1 parent 208dfbb
commit 8a5d6dd
Show file tree

Hide file tree

Showing 17 changed files with 373 additions and 86 deletions.
diff --git a/src/components/Fields/AddressField.vue b/src/components/Fields/AddressField.vue
@@ -0,0 +1,24 @@
+<template>
+  <TextInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
+</template>
+
+<script lang="ts">
+import { Builder, Address } from 'ton-core';
+import TextInput from '../Inputs/TextInput.vue';
+import BaseField from './BaseField.vue';
+
+export default {
+  extends: BaseField,
+  components: {
+    TextInput
+  },
+  methods: {
+    validate(): boolean {
+      return (this.$refs.input as typeof TextInput).validate();
+    },
+    store(builder: Builder): void {
+      builder.storeAddress(Address.parse((this.$refs.input as typeof TextInput).value))
+    }
+  }
+}
+</script>
diff --git a/src/components/Fields/BaseField.vue b/src/components/Fields/BaseField.vue
@@ -1,5 +1,5 @@
 <template>
-  <TextInput ref="input" :required="required" :label="label" :placeholder="placeholder" :help-text="helpText" />
+  <TextInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
 </template>
 
 <script lang="ts">
@@ -10,11 +10,12 @@ export default {
     TextInput
   },
   props: {
-    required: {
+    optional: {
       type: Boolean,
     },
     label: {
       type: String,
+      required: true,
     },
     placeholder: {
       type: String,

diff --git a/src/components/Fields/BooleanField.vue b/src/components/Fields/BooleanField.vue
@@ -0,0 +1,24 @@
+<template>
+  <BooleanInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
+</template>
+
+<script lang="ts">
+import { Builder } from 'ton-core';
+import BaseField from './BaseField.vue';
+import BooleanInput from '../Inputs/BooleanInput.vue';
+
+export default {
+  extends: BaseField,
+  components: {
+    BooleanInput
+  },
+  methods: {
+    validate(): boolean {
+      return (this.$refs.input as typeof BooleanInput).validate();
+    },
+    store(builder: Builder): void {
+      builder.storeBit((this.$refs.input as typeof BooleanInput).value)
+    }
+  }
+}
+</script>
diff --git a/src/components/Fields/CoinsField.vue b/src/components/Fields/CoinsField.vue
@@ -1,5 +1,5 @@
 <template>
-  <NumberInput ref="input" :required="required" :label="label" :placeholder="placeholder" :help-text="helpText" />
+  <NumberInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
 </template>
 
 <script lang="ts">

diff --git a/src/components/Fields/SliceField.vue b/src/components/Fields/SliceField.vue
@@ -0,0 +1,21 @@
+<template>
+  <TextInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
+</template>
+
+<script lang="ts">
+import { Cell, Builder } from 'ton-core';
+import BaseField from './BaseField.vue';
+import TextInput from '../Inputs/TextInput.vue';
+
+export default {
+  extends: BaseField,
+  components: {
+    TextInput
+  },
+  methods: {
+    store(builder: Builder): void {
+      builder.storeSlice(Cell.fromBase64((this.$refs.input as typeof TextInput).value).asSlice())
+    }
+  }
+}
+</script>
diff --git a/src/components/Fields/StringField.vue b/src/components/Fields/StringField.vue
@@ -1,7 +1,7 @@
 <template>
-  <TextInput ref="input" v-if="inputType == 'text'" :required="required" :label="label" :placeholder="placeholder"
+  <TextInput ref="input" v-if="inputType == 'text'" :optional="optional" :label="label" :placeholder="placeholder"
     :help-text="helpText" />
-  <TextAreaInput ref="input" v-if="inputType == 'textarea'" :required="required" :label="label"
+  <TextAreaInput ref="input" v-if="inputType == 'textarea'" :optional="optional" :label="label"
     :placeholder="placeholder" :help-text="helpText" />
 </template>
 

diff --git a/src/components/Fields/UintField.vue b/src/components/Fields/UintField.vue
@@ -0,0 +1,30 @@
+<template>
+  <NumberInput ref="input" :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText" />
+</template>
+
+<script lang="ts">
+import type { Builder } from 'ton-core';
+import NumberInput from '../Inputs/NumberInput.vue';
+import BaseField from './BaseField.vue';
+
+export default {
+  extends: BaseField,
+  props: {
+    format: {
+      type: Number,
+      required: true,
+    }
+  },
+  components: {
+    NumberInput
+  },
+  methods: {
+    validate(): boolean {
+      return (this.$refs.input as typeof NumberInput).validate()
+    },
+    store(builder: Builder): void {
+      builder.storeUint(parseInt((this.$refs.input as typeof NumberInput).value), this.format)
+    }
+  }
+}
+</script>
diff --git a/src/components/Fields/UnknownField.vue b/src/components/Fields/UnknownField.vue
@@ -0,0 +1,22 @@
+<template>
+  <strong>{{ label }}</strong><br />
+  <strong>{{ expected }}</strong> field type is not implemented yet.
+</template>
+
+<script lang="ts">
+import BaseField from './BaseField.vue';
+
+export default {
+  extends: BaseField,
+  props: {
+    expected: {
+      type: String,
+    }
+  },
+  methods: {
+    validate() {
+      return false;
+    }
+  }
+}
+</script>
diff --git a/src/components/Inputs/BaseInput.vue b/src/components/Inputs/BaseInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseLabel :required="required" :label="label" :placeholder="placeholder" :help-text="helpText"
+  <BaseLabel :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText"
     :error-text="errorText">
     <input v-bind:class="{ 'is-danger': errorText }" v-model="value" @input="validate" class="input" type="text"
       :placeholder="placeholder">
@@ -14,7 +14,7 @@ export default {
     BaseLabel
   },
   props: {
-    required: {
+    optional: {
       type: Boolean,
     },
     label: {
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     defaultValidation() {
-      if (this.required && !this.value) {
+      if (!this.optional && !this.value) {
         this.errorText = this.$t("message.Common.RequiredField");
         return false
       }

diff --git a/src/components/Inputs/BaseLabel.vue b/src/components/Inputs/BaseLabel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="field">
-    <label class="label">{{ label }}<span v-if="required" class="has-text-danger">*</span></label>
+    <label class="label">{{ label }}<span v-if="!optional" class="has-text-danger">*</span></label>
     <div class="control">
       <slot>...</slot>
     </div>
@@ -12,7 +12,7 @@
 <script lang="ts">
 export default {
   props: {
-    required: {
+    optional: {
       type: Boolean,
     },
     label: {

diff --git a/src/components/Inputs/BooleanInput.vue b/src/components/Inputs/BooleanInput.vue
@@ -0,0 +1,31 @@
+<template extends>
+  <BaseLabel :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText"
+    :error-text="errorText">
+    <input v-bind:class="{ 'is-danger': errorText }" @change="validate" v-model="value" class="checkbox" type="checkbox"
+      :placeholder="placeholder">
+  </BaseLabel>
+</template>
+
+<script lang="ts">
+import BaseInput from './BaseInput.vue';
+
+export default {
+  extends: BaseInput,
+  methods: {
+    validate(): boolean {
+      if (this.defaultValidation()) {
+        try {
+          parseInt(this.value);
+        } catch {
+          this.errorText = this.$t("Message.Common.NaN");
+          return false
+        }
+      } else {
+        return false
+      }
+
+      return true;
+    }
+  }
+}
+</script>
diff --git a/src/components/Inputs/NumberInput.vue b/src/components/Inputs/NumberInput.vue
@@ -1,5 +1,5 @@
 <template extends>
-  <BaseLabel :required="required" :label="label" :placeholder="placeholder" :help-text="helpText"
+  <BaseLabel :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText"
     :error-text="errorText">
     <input v-bind:class="{ 'is-danger': errorText }" @change="validate" v-model="value" class="input" type="number"
       :placeholder="placeholder">
@@ -20,6 +20,8 @@ export default {
           this.errorText = this.$t("Message.Common.NaN");
           return false
         }
+      } else {
+        return false
       }
 
       return true;

diff --git a/src/components/Inputs/TextAreaInput.vue b/src/components/Inputs/TextAreaInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseLabel :required="required" :label="label" :placeholder="placeholder" :help-text="helpText"
+  <BaseLabel :optional="optional" :label="label" :placeholder="placeholder" :help-text="helpText"
     :error-text="errorText">
     <textarea @input="validate" v-bind:class="{ 'is-danger': errorText }" v-model="value" class="textarea" type="text"
       :placeholder="placeholder"></textarea>

diff --git a/src/components/JettonDeploy/JettonDeployForm.vue b/src/components/JettonDeploy/JettonDeployForm.vue
@@ -2,19 +2,20 @@
   <form>
     <StringField ref="jettonName" :label="$t('message.NewJettonForm.JettonName_Label')"
       :help-text="$t('message.NewJettonForm.JettonName_HelpText')"
-      :placeholder="$t('message.NewJettonForm.JettonName_Placeholder')" :required="true" />
+      :placeholder="$t('message.NewJettonForm.JettonName_Placeholder')" :optional="false" />
 
     <StringField ref="jettonSymbol" :label="$t('message.NewJettonForm.JettonSymbol_Label')"
       :help-text="$t('message.NewJettonForm.JettonSymbol_HelpText')"
-      :placeholder="$t('message.NewJettonForm.JettonSymbol_Placeholder')" :required="true" />
+      :placeholder="$t('message.NewJettonForm.JettonSymbol_Placeholder')" :optional="false" />
 
     <StringField ref="jettonDescription" :label="$t('message.NewJettonForm.JettonDescription_Label')"
       :help-text="$t('message.NewJettonForm.JettonDescription_HelpText')"
-      :placeholder="$t('message.NewJettonForm.JettonDescription_Placeholder')" :required="true" input-type="textarea" />
+      :placeholder="$t('message.NewJettonForm.JettonDescription_Placeholder')" :optional="false"
+      input-type="textarea" />
 
     <CoinsField ref="maxSupply" :label="$t('message.NewJettonForm.JettonMaxSupply_Label')"
       :help-text="$t('message.NewJettonForm.JettonMaxSupply_HelpText')"
-      :placeholder="$t('message.NewJettonForm.JettonMaxSupply_Placeholder')" :required="true" />
+      :placeholder="$t('message.NewJettonForm.JettonMaxSupply_Placeholder')" :optional="false" />
 
     <div class="control">
       <button class="button is-link" @click="deployToken">{{ $t("message.NewJettonForm.DeployJetton") }}</button>