150 lines
4.2 KiB
Vue
150 lines
4.2 KiB
Vue
<template>
|
|
<slot v-if="pluginOk && loggedIn" v-bind="$props"/>
|
|
<v-card rounded="0">
|
|
<v-card-title>
|
|
Welcome to Dexorder Alpha!
|
|
</v-card-title>
|
|
<v-card-text>
|
|
The alpha test has ended. Check back soon for the beta launch!
|
|
</v-card-text>
|
|
</v-card>
|
|
<!--
|
|
<slot v-if="pluginOk && loggedIn" v-bind="$props"/>
|
|
<v-card v-if="!loggedIn" rounded="0">
|
|
<v-card-title>
|
|
Welcome to Dexorder Alpha!
|
|
</v-card-title>
|
|
<v-card-text>
|
|
The alpha test has ended. Check back soon for the beta launch!
|
|
</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>
|
|
|
|
|
|
this block was already commented out:
|
|
|
|
<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>
|