WA-119: add autodelegation forms

.env.example

@@ -1,5 +1,6 @@
 APP_ENV=production
 APP_ACCOUNTS_API_URL=https://accounts.minter.org/api/v1/
 APP_GATE_API_HOST=https://gate.minter.network
+APP_AUTO_DELEGATION_API_URL=https://autodelegator.minter.network/api/v1/
 APP_EXPLORER_API_URL=https://explorer-api.testnet.minter.network/api/v1/
 APP_EXPLORER_HOST=https://explorer.minter.network

README.md

@@ -5,6 +5,16 @@
 
 This is the repository containing the code for the official Minter Console website [console.minter.network](https://console.minter.network)
 
+## Install
+
+- ensure Node.js and NPM are installed
+- clone the repo
+- copy .env.example `cp .env.example .env`
+- set correct .env variables
+- install node_modules `npm ci`
+- build `npm run production`
+- now you have static assets in the `./dist/` folder, you have to distribute them with some web server like Nginx or run `npm run start`
+
 
 ## Deployment script
 

api/auto-delegation.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+import {AUTO_DELEGATION_API_URL} from "~/assets/variables";
+
+export default axios.create({
+    baseURL: AUTO_DELEGATION_API_URL,
+});

api/index.js

@@ -5,6 +5,7 @@ import {generateMnemonic} from 'minterjs-wallet';
 import {addressEncryptedFromMnemonic, getPasswordToSend, getPasswordToStore} from 'minter-js-org';
 import accounts from '~/api/accounts';
 import explorer from '~/api/explorer';
+import autoDelegation from '~/api/auto-delegation';
 
 const formDataHeaders = {'Content-Type': 'multipart/form-data'};
 
@@ -183,6 +184,15 @@ export function getAddressInfo(params, cancelToken) {
         .then((response) => response.data.data);
 }
 
+/**
+ * @param txList
+ * @return {Promise<AxiosResponse<any> | never>}
+ */
+export function postAutoDelegationTxList(txList) {
+    return autoDelegation
+        .post('transactions', {transactions: txList});
+}
+
 function makeFormData(data) {
     let formData = new FormData();
     Object.keys(data).forEach((key) => {

assets/less/include/utils.less

@@ -8,6 +8,7 @@
 .u-text-right {text-align: right;}
 .u-display-block {display: block !important;}
 .u-display-ib {display: inline-block !important;}
+.u-relative {position: relative; z-index: 1;}
 .u-fw-700 {font-weight: 700;}
 .u-text-muted {color: @c-black-light;}
 .u-text-overflow {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

assets/less/style.less

@@ -43,6 +43,15 @@
     from {transform: scale(.98);}
     to {transform: scale(1.01);}
 }
+// file-input
+.file-input {opacity: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0; font-size: 0; cursor: pointer;}
+.file-input__drag-layer {
+    &::before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 22px 18px; border: 3px dashed; border-radius: 20px; z-index: -1;}
+}
+.file-input__drag-layer-container {padding-left: 15px; padding-right: 15px;}
+@media (min-width: @breakpoint-small-up) {
+    .file-input__drag-layer::before {margin: 28px 25px;}
+}
 
 
 // common
@@ -215,5 +224,6 @@
 .multisig__address {flex-grow: 2;}
 
 
-
+.reinvest__textarea {width: 100%; padding: 4px 8px; border: 1px solid @c-border; border-radius: 10px;}
+.reinvest__upload-textarea {max-height: 200px;}
 

assets/variables.js

@@ -9,6 +9,7 @@ export const COIN_NAME = NETWORK === MAINNET ? 'BIP' : 'MNT';
 export const CHAIN_ID = NETWORK === MAINNET ? 1 : 2;
 export const ACCOUNTS_API_URL = process.env.APP_ACCOUNTS_API_URL;
 export const GATE_API_HOST = process.env.APP_GATE_API_HOST;
+export const AUTO_DELEGATION_API_URL = process.env.APP_AUTO_DELEGATION_API_URL;
 export const EXPLORER_API_URL = process.env.APP_EXPLORER_API_URL;
 export const EXPLORER_HOST = process.env.APP_EXPLORER_HOST;
 export const LANGUAGE_COOKIE_KEY = 'minter-language';

components/ValidatorDelegateForm.vue

@@ -135,21 +135,16 @@
                 this.serverError = '';
                 this.serverSuccess = '';
                 this.$store.dispatch('FETCH_ADDRESS_ENCRYPTED')
-                    .then(() => {
-                        postTx(new DelegateTxParams({
-                            privateKey: this.$store.getters.privateKey,
-                            ...this.form,
-                        })).then((txHash) => {
-                            this.isFormSending = false;
-                            this.serverSuccess = txHash;
-                            this.clearForm();
-                        }).catch((error) => {
-                            console.log(error);
-                            this.isFormSending = false;
-                            this.serverError = getErrorText(error);
-                        });
-                    })
-                    .catch((error) => {
+                    .then(() => postTx(new DelegateTxParams({
+                        privateKey: this.$store.getters.privateKey,
+                        ...this.form,
+                    })))
+                    .then((txHash) => {
+                        this.isFormSending = false;
+                        this.serverSuccess = txHash;
+                        this.clearForm();
+                    }).catch((error) => {
+                        console.log(error);
                         this.isFormSending = false;
                         this.serverError = getErrorText(error);
                     });