103 lines
2.9 KiB
Vue
103 lines
2.9 KiB
Vue
<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
|
|
<!--
|
|
<!– 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>
|
|
–>
|
|
<h2><v-icon icon="mdi-hand-wave" color="warning"/> 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>
|