83 lines
2.8 KiB
Vue
83 lines
2.8 KiB
Vue
<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"/> 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>
|