[PLA-1645] infuse token (#143)

.github/workflows/deploy.yml

@@ -12,18 +12,23 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v2
+
             - name: Setup Node.js
               uses: actions/setup-node@v2
               with:
                   node-version: '18'
                   cache: 'npm'
+
             - name: Install dependencies
               run: npm install
+
             - name: Copy config.json
               run: |
                 cp ./resources/js/config.json.example ./resources/js/config.json
+            
             - name: Build static project
               run: npm run prod-laravel
+
             - name: Archive build artifacts
               uses: actions/upload-artifact@v4
               with:

.github/workflows/lint.yml

@@ -0,0 +1,30 @@
+name: eslint
+on:
+    push:
+        branches:
+            - master
+    pull_request:
+
+jobs:
+    tests:
+        name: Eslint & Prettier
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '20'
+                  cache: 'npm'
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Run Pretty
+              run: npm run pretty:check
+
+            - name: Run Eslint
+              run: npm run lint

resources/js/api/index.ts

@@ -27,6 +27,7 @@ export class ApiService {
         credentials = 'omit',
         mode,
         nest = true,
+        auth = true,
     }: {
         url: string;
         data?: Record<string, unknown>;
@@ -35,6 +36,7 @@ export class ApiService {
         credentials?: 'omit' | 'same-origin' | 'include';
         mode?: 'cors' | 'no-cors' | 'same-origin' | 'navigate';
         nest?: boolean;
+        auth?: boolean;
     }): Promise<any> {
         let body: string | null = null;
         const fullUrl = url;
@@ -44,10 +46,10 @@ export class ApiService {
             body = JSON.stringify(data);
         }
 
-        if (mode) {
+        if (auth) {
             if (!useAppStore().isMultiTenant) {
                 headers.Authorization = useAppStore().authorization_token;
-            } else if (mode) {
+            } else {
                 headers['X-CSRF-TOKEN'] = csrf;
             }
         }
@@ -160,6 +162,7 @@ export class ApiService {
             method: HttpMethods.GET,
             credentials: undefined,
             mode: undefined,
+            auth: false,
         });
     }
 

resources/js/components/FormInput.vue

@@ -71,6 +71,7 @@ const props = withDefaults(
         type?: string;
         min?: number;
         modelValue?: number | string | null;
+        value?: number | string | null;
         disabled?: boolean;
         prefix?: string;
         name: string;
@@ -109,10 +110,10 @@ const inputChange = (e: Event) => {
 
 const localModelValue = computed({
     get() {
-        return props.modelValue;
+        return props.modelValue ?? props.value;
     },
     set(value) {
-        if (localModelValue.value !== value) {
+        if (value && localModelValue.value !== value) {
             emit('update:modelValue', value);
         }
     },

resources/js/components/pages/Collections.vue

@@ -371,7 +371,7 @@ const fetchUri = async (uri) => {
         }
 
         return '-';
-    } catch (e) {
+    } catch {
         return '-';
     }
 };

resources/js/components/pages/Tokens.vue

@@ -98,7 +98,7 @@
                                 "
                             >
                                 <td
-                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                    class="whitespace-nowrap px-3 py-4 text-sm font-medium text-light-content-strong dark:text-dark-content-strong"
                                 >
                                     {{ tokenNames[`${token.collection.collectionId}-${token.tokenId}`] }}
                                 </td>

resources/js/components/pages/create/CreateToken.vue

@@ -81,6 +81,13 @@
                             label="Description"
                             description="The description of the token."
                         />
+                        <FormInput
+                            v-model="symbol"
+                            name="symbol"
+                            label="Symbol"
+                            description="The symbol of the token."
+                            required
+                        />
                         <FormInput
                             v-model="recipient"
                             name="recipient"
@@ -268,6 +275,46 @@
                         </div>
                         <div class="mt-6">
                             <div class="flex flex-col gap-6">
+                                <FormCheckbox
+                                    v-model="infuseEnj"
+                                    name="infuseEnj"
+                                    label="Infuse ENJ"
+                                    description="Use this option to infuse ENJ into the token."
+                                    readmore="https://support.nft.io/hc/en-gb/articles/20436178520594"
+                                />
+                                <div v-if="infuseEnj" class="space-y-4">
+                                    <FormInput
+                                        v-model="infuseAmount"
+                                        name="infuseAmount"
+                                        label="ENJ Infusion"
+                                        description="Enter the amount of ENJ you wish to infuse in each unit."
+                                        type="number"
+                                        required
+                                    />
+                                    <FormSelect
+                                        v-model="infuseAccess"
+                                        name="infuseAccess"
+                                        label="Infusion Access"
+                                        description=""
+                                        :options="['Only Me', 'Everyone']"
+                                    />
+                                    <template v-if="tokenType === 'ft'">
+                                        <FormInput
+                                            v-model="initialSupply"
+                                            name="itemsInfuse"
+                                            label="Number of items"
+                                            type="number"
+                                            disabled
+                                        />
+                                        <FormInput
+                                            :value="totalInfuseAmountComputed"
+                                            name="totalInfuseAmount"
+                                            label="Total Infuse Amount"
+                                            type="number"
+                                            disabled
+                                        />
+                                    </template>
+                                </div>
                                 <FormCheckbox
                                     v-model="listingForbidden"
                                     name="listingForbidden"
@@ -369,7 +416,11 @@ const tokenId = ref({
 });
 const initialSupply = ref(1);
 const capAmount = ref();
+const infuseAmount = ref();
 const isCurrency = ref(false);
+const infuseEnj = ref(false);
+const symbol = ref('');
+const infuseAccess = ref('Only Me');
 const beneficiaryAddress = ref('');
 const beneficiaryPercentage = ref(0);
 const listingForbidden = ref(false);
@@ -392,10 +443,15 @@ const capTypes =
 const collectionIds = computed(() => appStore.collections);
 const isAdvanced = computed(() => mode.value === 'advanced');
 
+const totalInfuseAmountComputed = computed(() => {
+    return initialSupply.value * infuseAmount.value;
+});
+
 const validation = yup.object({
     imageUrl: stringNotRequiredSchema,
     name: stringRequiredSchema,
     description: stringNotRequiredSchema,
+    symbol: stringRequiredSchema,
     collectionId: collectionIdRequiredSchema,
     tokenId: stringRequiredSchema,
     recipient: addressRequiredSchema,
@@ -491,10 +547,20 @@ const createToken = async () => {
                         isCurrency: isCurrency.value,
                     },
                     listingForbidden: listingForbidden.value,
+                    ...(infuseEnj.value
+                        ? {
+                              infusion: totalInfuseAmountComputed.value,
+                              anyoneCanInfuse: infuseAccess.value === 'Everyone',
+                          }
+                        : {}),
                     attributes: [
                         ...simpleAttributes(),
                         ...attributes.value.filter((a) => a.key !== '' && a.value !== ''),
                     ],
+                    metadata: {
+                        name: name.value,
+                        symbol: symbol.value,
+                    },
                 },
                 idempotencyKey: idempotencyKey.value,
                 skipValidation: skipValidation.value,

resources/js/components/slideovers/token/MintTokenSlideover.vue

@@ -92,7 +92,6 @@ import {
     addressRequiredSchema,
     booleanNotRequiredSchema,
     collectionIdRequiredSchema,
-    numberNotRequiredSchema,
     numberRequiredSchema,
     stringNotRequiredSchema,
     stringRequiredSchema,
@@ -130,7 +129,6 @@ const validation = yup.object({
     tokenId: stringRequiredSchema,
     recipient: addressRequiredSchema,
     amount: numberRequiredSchema.typeError('Amount must be a number'),
-    unitPrice: numberNotRequiredSchema.min(0.01).typeError('Unit price must be a number'),
     idempotencyKey: stringNotRequiredSchema,
     skipValidation: booleanNotRequiredSchema,
 });