<template>
  <slot v-if="ok"/>
  <div v-if="!walletOk">
    <h2>Install Wallet</h2>
    <p>
      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.
    </p>
    <p>
      <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
    </p>
  </div>
<!--
  <div v-if="walletOk && !providerOk">
    <p>
      Please switch to a supported blockchain.
    </p>
    <v-btn prepend-icon="mdi-power" text="Switch Blockchain" @click="switchChain(s.chainId)"/>
  </div>
-->
  <div v-if="walletOk && !providerOk">
    TODO
<!--
&lt;!&ndash; todo Alpha Live
    <v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title>
    <v-card-text>
      Dexorder works only with <blockchain chain-id="42161"/>. Please switch to the
      <blockchain chain-id="42161"/> blockchain in your wallet.
    </v-card-text>
&ndash;&gt;
    <h2><v-icon icon="mdi-hand-wave" color="warning"/>&nbsp;Welcome to Dexorder Alpha!</h2>
    <p>
      This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
    </p>
    <p>
      <v-btn variant="tonal" @click="addChain">Setup Dexorder Testnet</v-btn>
    </p>
    <p>Manual Setup:</p>
    <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:
        <ul>
          <li>Name: Dexorder Alpha Testnet</li>
          <li>New RPC URL: https://rpc.alpha.dexorder.trade</li>
          <li>Chain ID: 1337</li>
          <li>Currency Symbol: TETH</li>
        </ul>
      </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>
-->
  </div>
</template>

<script setup>
import {useStore} from "@/store/store";
import {switchChain, useWalletStore} from "@/blockchain/wallet.js";
import {computed, ref, watchEffect} from "vue";

const s = useStore()
const ws = useWalletStore()
const walletOk = typeof window.ethereum !== 'undefined'
const providerOk = computed(()=>ws.chainId === s.chainId)
const ok = computed(()=>walletOk && providerOk.value)
const connecting = ref(false)

watchEffect(()=>{
  if( !providerOk.value && connecting.value ) {
    try {
      switchChain(s.chainId)
    }
    catch (e) {
      console.log('switchChain failed', e)
      if (e.code===-9999999) {
        // todo
        addTestnet()
      }
    }
  }
})

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


</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;
.arbitrum {
  color: $arbitrum-color;
}
</style>
