<template>
  <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
  <v-card v-if="!loggedIn" rounded="0">
    <v-card-title>
<!--      <v-icon icon="mdi-hand-wave" color="grey"/>-->
      Welcome to Dexorder Alpha!
    </v-card-title>
    <v-card-text>
      This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
    </v-card-text>
    <v-card-text>
      Play with the order builder by clicking on the <logo class="logo-small"/> logo or on the <v-icon icon="mdi-chart-timeline-variant"/> button.
    </v-card-text>
    <div v-if="!pluginOk">
      <v-card-text>
        A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
        required to use Dexorder. Please install a crypto wallet into your browser to experience the power of
        Dexorder.
      </v-card-text>
      <v-card-actions>
        <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
      </v-card-actions>
    </div>

    <v-card-actions>
      <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
           @click="connect" :disabled="disabled" text="Connect Wallet"/>
    </v-card-actions>
    <div v-if="needsNetwork">
      <v-card-text>
        <table id="manualsetup">
          <thead>
          <tr><th colspan="4">Manual Setup</th></tr>
          </thead>
          <tbody>
          <tr><td><b>Network Name:</b></td><td><copy-button text="Dexorder Alpha Testnet"/></td></tr>
          <tr><td><b>New RPC URL:</b></td><td><copy-button text="https://rpc.alpha.dexorder.trade"/></td></tr>
          <tr><td><b>Chain ID:</b></td><td><copy-button text="1337"/></td></tr>
          <tr><td><b>Currency Symbol:</b></td><td><copy-button text="TETH"/></td></tr>
          </tbody>
        </table>
<!--
        <ul class="ml-6">
          <li> Dexorder Alpha Testnet</li>
          <li><b>New RPC URL:</b> </li>
          <li><b>Chain ID:</b> 1337</li>
          <li><b>Currency Symbol:</b> TETH</li>
        </ul>
        <ol class="ml-6">
          <li>Open Metamask</li>
          <li>Click in the upper-left to choose a Network</li>
          <li>Click the "Add Network" button</li>
          <li>Choose "Add a Network Manually"</li>
          <li>Enter the following information:
          </li>
          <li>
            Save the private test network
          </li>
          <li>
            Open Metamask again and select the "Dexorder Alpha" blockchain for use with this website.
          </li>
        </ol>
-->
      </v-card-text>
    </div>
  </v-card>
</template>

<script setup>
import {useStore} from "@/store/store";
import {computed, ref} from "vue";
import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
import Btn from "@/components/Btn.vue";
import CopyButton from "@/components/CopyButton.vue";
import Logo from "@/components/Logo.vue";

const s = useStore()
const ws = useWalletStore()
const pluginOk = window.ethereum !== undefined
const loggedIn = computed(()=>s.account!==null)
const needsNetwork = ref(false)
const disabled = ref(false)

function reload() {
  window.location.reload()
}

async function connect() {
  disabled.value = true
  try {
    try {
      await switchChain(s.chainId)
    }
    catch (e) {
      if (e.code===4902) {
        try {
          await addTestnet()
          needsNetwork.value = false
        }
        catch (e) {
          needsNetwork.value = true
          return
        }
      }
      else if (e.code===4001) {
        // explicit user rejection
        return
      }
      else
        console.log('switchChain() failure',e)
    }
    try {
      await connectWallet(s.chainId)
    }
    catch (e) {
      if (e.code!==4001)
        console.log('connectWallet() failed', e)
    }
  }
  finally {
    disabled.value = false
  }
}

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;
#manualsetup td {
  text-align: right;
}
#manualsetup tr td:last-child {
  padding-left: 1em;
}
</style>
