Design Dapp with Kotlin front end

Question

To develop Dapp using Kotlin programming language for the front end design, Where should I place this code? and what it should be changed?

<script>

        // Connect a the web3 provider
        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
        } else {
            web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
        }

        // Set a default account
        web3.eth.defaultAccount = web3.eth.accounts[0];

        // Get the contract address
        var RemixContract = web3.eth.contract('...');

        // Get the contract abi
        var myMessage = RemixContract.at('...');

        console.log(myMessage);

        $("#setMessageButton").click(function () {
    message = $("#userInput").val()
    myMessage.setMessage(message, (error, result) => {message = result});
    console.log($("#userInput").val())
});

    </script>

Answer 1

Well, first of all, I don't know where you got that code, but like a lot in software development, that's already outdated ;)

As for where to place in kotlin I think generally it would be in equivalent of the entry point.

So for a vue app, I put the logic under src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/**
 * A quite wonderful function.
 * @file  main.js
 * @param {object} - privacy gown
 * @param {object} - security
 * @returns {survival}
 * @summary Using information from https://codepen.io/wernerm/pen/LjggoV
 */
import Vue from 'vue'
import App from './App.vue'
import Web3 from 'web3'
import router from './router'
import Vuetify from 'vuetify'
import { store } from './store/'
// Ensure you are using css-loader
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false
Vue.use(Vuetify)

/* eslint-disable */
window.addEventListener('load', async () => {
    // Modern dapp browsers...
    if (window.ethereum) {
      window.web3 = new Web3(ethereum)
      try {
          // Request account access if needed
          await ethereum.enable()
          // Acccounts now exposed
          web3.eth.sendTransaction({/* ... */})
      } catch (error) {
          // User denied account access...
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
        window.web3 = new Web3(web3.currentProvider);
        // Acccounts always exposed
        console.log('Web3 injected browser: Fail. You should consider trying MetaMask.')
        // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
        window.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'))
    }
    // Non-dapp browsers...
    else {
        console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }
/* eslint-enable */
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
  })
})