<template>
  <slot v-if="ok"/>
  <phone-card v-if="!walletOk">
    <v-card-title>Install Wallet</v-card-title>
    <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>
  </phone-card>
  <phone-card v-if="walletOk && !providerOk">
    <v-card-text>
      Please log in to your crypto wallet.
    </v-card-text>
    <v-card-actions v-if="walletOk && !providerOk">
      <v-btn prepend-icon="mdi-power" text="Connect Wallet" @click="connectWallet"/>
    </v-card-actions>
  </phone-card>
  <phone-card v-if="walletOk && providerOk && !chainOk">
<!-- 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>
-->
    <v-card-title><v-icon icon="mdi-hand-wave" color="warning"/>&nbsp;Welcome to Dexorder Alpha!</v-card-title>
    <v-card-text>
      This alpha test runs on a private blockchain, which you need to set up.
    </v-card-text>
    <v-card-item>
      <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</li>
            <li>New RPC URL: https://rpc.alpha.dexorder.trade</li>
            <li>Chain ID: 53261</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>
    </v-card-item>
  </phone-card>
</template>

<script setup>
import {useStore} from "@/store/store";
import PhoneCard from "@/components/PhoneCard.vue";
import {connectWallet} from "@/blockchain/wallet.js";
import {computed} from "vue";
import Blockchain from "@/components/Blockchain.vue";

const s = useStore()
const walletOk = typeof window.ethereum !== 'undefined'
const providerOk = computed(()=>s.provider!==null)
const chainOk = computed(()=>providerOk.value && s.helper!==null)
const ok = computed(()=>{
  return walletOk && providerOk.value && chainOk.value
})
function reload() {
  window.location.reload()
}
</script>

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