dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wallet flow; new faucet; placing chart orders works!

Browse Source
This commit is contained in:
Tim
2024-03-25 21:04:14 -04:00
parent 6ee442d7ec
commit d11ad7cf40
21 changed files with 444 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Btn.vue
View File

@@ -1,9 +1,9 @@
<template>
<v-btn :prepend-icon="icon" variant="plain" class="mx-2">
<v-btn :prepend-icon="icon" :variant="variant===undefined?'text':variant" class="mx-2">
<template v-slot:prepend>
<v-icon :color="color"></v-icon>
</template>
<slot name="text">{{text}}</slot>
<template v-slot>{{text}}<slot/></template>
</v-btn>
</template>
@@ -12,7 +12,12 @@ import {useStore} from "@/store/store";
import {useAttrs} from "vue";
const s = useStore()
const props = defineProps(['icon', 'color', 'text'])
const props = defineProps({
icon: {default:null},
color: {default:null},
text: {default:null},
variant: {default:'text'},
})
const attrs = useAttrs()
</script>

45
src/components/Faucet.vue
View File

@@ -1,9 +1,11 @@
<template>
<phone-card v-if="s.mockenv && s.vault" class="maxw">
<!-- <div>-->
<!--
<v-card-title><v-icon icon="mdi-faucet"/>&nbsp;Testnet Faucet</v-card-title>
<v-card-text>The Dexorder testnet faucet will send 1 TETH (Testnet ETH) to your account, plus 10 MEH (Mock Ethernet Hardfork) and 10,000 USXD (Joke Currency XD) to your vault.</v-card-text>
<v-card-text>Click below to get free test tokens: </v-card-text>
<v-card-item>
-->
<!--
<v-table plain>
<tbody>
@@ -14,9 +16,9 @@
</tbody>
</v-table>
-->
<btn icon='mdi-plus' color="green" :disabled="disabled" @click="gib">GIB!</btn>
</v-card-item>
</phone-card>
<btn icon='mdi-plus' color="green" :disabled="disabled" @click="gib" :text="text"/>
<!-- </v-card-item>-->
<!-- </div>-->
</template>
<script setup>
@@ -28,7 +30,11 @@ import {pendTransaction} from "@/blockchain/wallet.js";
import {mockErc20Abi} from "@/blockchain/abi.js";
import Btn from "@/components/Btn.vue";
import {socket} from "@/socket.js";
import {metadata} from "@/version.js";
const props = defineProps({
text: {default:'GIB!'},
})
const s = useStore()
/*
@@ -45,12 +51,37 @@ function gib(token) {
const disabled = ref(false)
const FAUCET_CONFIG = {
'': 1, // native coin
MEH: 1,
USXD: 1000,
WETH: 1,
ARB: 1000,
USDC: 1000,
}
function gib() {
const s = useStore()
if( s.account ) {
disabled.value = true
socket.emit('faucet', s.chainId.value, s.account)
setTimeout(()=>disabled.value=false, 60*1000)
const chainId = s.chainId
const tokenAmounts = {}
const tmd = metadata[chainId].t // token metadata
for (const [symbol, amount] of Object.entries(FAUCET_CONFIG)) {
for (const t of tmd) {
if (t.s===symbol) {
if (t.x?.mock===true) {
tokenAmounts[t.a] = BigInt(Math.trunc(10 ** t.d * amount))
}
break
}
}
}
console.log('gib', s.chainId, s.account, s.vault, tokenAmounts )
if (Object.keys(tokenAmounts).length>0) {
disabled.value = true
socket.emit('gib', s.chainId, s.account, s.vault, tokenAmounts )
setTimeout(()=>disabled.value=false, 1*1000) // todo disable longer
}
}
}

117
src/components/NeedsProvider.vue
View File

@@ -1,24 +1,22 @@
<template>
<slot v-if="ok"/>
<phone-card v-if="!walletOk">
<v-card-title>Install Wallet</v-card-title>
<v-card-text>
<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.
</v-card-text>
<v-card-actions>
</p>
<p>
<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>
</p>
</div>
<div v-if="walletOk && !providerOk">
<p>
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">
</p>
<v-btn prepend-icon="mdi-power" text="Connect Wallet" @click="connectWallet"/>
</div>
<div v-if="walletOk && chainOk && !providerOk">
<!-- todo Alpha Live
<v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title>
<v-card-text>
@@ -26,40 +24,42 @@
<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: 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>
</v-card-item>
</phone-card>
<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 PhoneCard from "@/components/PhoneCard.vue";
import {connectWallet} from "@/blockchain/wallet.js";
import {computed} from "vue";
import {computed, watch} from "vue";
import Blockchain from "@/components/Blockchain.vue";
const s = useStore()
@@ -67,11 +67,42 @@ const walletOk = typeof window.ethereum !== 'undefined'
const providerOk = computed(()=>s.provider!==null)
const chainOk = computed(()=>providerOk.value && s.helper!==null)
const ok = computed(()=>{
console.log('recompute provider ok')
return walletOk && providerOk.value && chainOk.value
})
function reload() {
window.location.reload()
}
async function addChain() {
await window.ethereum.request({
"method": "wallet_addEthereumChain",
"params": [
{
"chainId": "0x539",
"chainName": "Dexorder Alpha Testnet",
"rpcUrls": ["https://rpc.alpha.dexorder.trade"],
"nativeCurrency": {
"name": "Test Ethereum",
"symbol": "TETH",
"decimals": 18
}
}
]
});
}
watch([providerOk, chainOk], async () => {
console.log('checking chain')
if (walletOk && providerOk.value && !chainOk.value) {
console.log('switching chain')
const result = await window.ethereum.request({
"method": "wallet_switchEthereumChain",
"params": [{"chainId": '0x' + Object.keys(metadata)[0].toString(16)}]
});
console.log('chain switch result', result)
}
})
</script>
<style scoped lang="scss">

33
src/components/NeedsSigner.vue
View File

@@ -1,29 +1,32 @@
<template>
<NeedsProvider>
<slot v-if="ok"/>
<phone-card v-if="!ok">
<v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Connect Wallet</v-card-title>
<v-card-text>
Please select an account to use from your wallet.
</v-card-text>
<v-card-actions>
<btn icon="mdi-wallet-outline" color="warning" @click="connectWallet">Connect Wallet</btn>
</v-card-actions>
</phone-card>
</NeedsProvider>
<needs-provider>
<slot v-if="ok" v-bind="$props"/>
<div v-if="!ok">
<btn icon="mdi-wallet-outline" color="warning" variant="outlined" @click="connect" :disabled="disabled" text="Connect Wallet"/>
</div>
</needs-provider>
</template>
<script setup>
import {useStore} from "@/store/store";
import NeedsProvider from "@/components/NeedsProvider.vue";
import {computed} from "vue";
import PhoneCard from "@/components/PhoneCard.vue";
import {computed, ref} from "vue";
import {connectWallet} from "@/blockchain/wallet.js";
import Btn from "@/components/Btn.vue";
const s = useStore()
const ok = computed(()=>s.account!==null)
const disabled = ref(false)
async function connect() {
disabled.value = true
try {
await connectWallet(s.chainId)
}
finally {
disabled.value = false
}
}
</script>

2
src/components/RoutePrice.vue
View File

@@ -40,7 +40,7 @@ const price = computed(()=>{
if( route.value ) {
subPrices([route.value])
subOHLCs( s.chainId.value, [[route.value.pool,'1D']])
subOHLCs( s.chainId, [[route.value.pool,'1D']])
}
else
console.log('route is empty: no price')

82
src/components/Vault.vue
View File

@@ -22,54 +22,66 @@
</v-card-text>
</PhoneCard>
-->
<phone-card v-if="s.vaults.length<=num" class="maxw">
<v-card-title><v-icon icon="mdi-safe-square" size="small" color="grey-darken-1"/> Create a Dexorder Vault</v-card-title>
<div>
<div v-if="s.vaults.length<=num">
<v-card-title>
<v-icon icon="mdi-safe-square" size="small" color="grey-darken-1"/>
Create a Dexorder Vault
</v-card-title>
<v-card-text v-if="num!==0"><!--todo-->Multiple vaults are not yet supported</v-card-text>
<!-- todo restore the vault-on-order approach for public beta
<v-card-text v-if="num===0">Create an order first, then your vault account will appear here to accept a deposit of trading funds.</v-card-text>
<v-card-actions><v-btn prepend-icon="mdi-plus" text="Create Order" @click="$router.push('/twap')"/></v-card-actions>
-->
<!-- User-actioned but dexorder executed
<v-card-text v-if="num===0">
Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
conditions are met, Dexorder creates a blockchain transaction for <code>vault.execute()</code>,
asking your vault to the order. Your vault then checks that order against the
current blockchain time and pool price, and only trades if everything looks good.
<!-- todo restore the vault-on-order approach for public beta
<v-card-text v-if="num===0">Create an order first, then your vault account will appear here to accept a deposit of trading funds.</v-card-text>
<v-card-actions><v-btn prepend-icon="mdi-plus" text="Create Order" @click="$router.push('/twap')"/></v-card-actions>
-->
<!-- User-actioned but dexorder executed
<v-card-text v-if="num===0">
Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
conditions are met, Dexorder creates a blockchain transaction for <code>vault.execute()</code>,
asking your vault to the order. Your vault then checks that order against the
current blockchain time and pool price, and only trades if everything looks good.
Start placing dexorders by clicking the button below to create your own personal Vault!
</v-card-text>
<v-card-actions><btn icon="mdi-safe-square" color="grey-darken-1" text="Create Vault" @click="ensureVault"/></v-card-actions>
-->
Start placing dexorders by clicking the button below to create your own personal Vault!
</v-card-text>
<v-card-actions><btn icon="mdi-safe-square" color="grey-darken-1" text="Create Vault" @click="ensureVault"/></v-card-actions>
-->
<v-card-text v-if="num===0">
Please wait while your vault is being created. This should only take a few seconds.
Please wait while your vault is being created. This should only take a few seconds.
</v-card-text>
</phone-card>
<v-card v-if="s.vaults.length>num" :class="empty?'maxw':''">
<v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" size="small"/> Vault Assets {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
<v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{addr}}</v-card-subtitle>
</div>
<div v-if="s.vaults.length>num" :class="empty?'maxw':''">
<v-card-title>
Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}
</v-card-title> <!-- todo vault nicknames -->
<v-card-subtitle v-if="exists" class="overflow-x-hidden">
<copy-button :text="addr"/>
{{ addr }}
</v-card-subtitle>
<v-card-text v-if="empty">
<!--
<p>
Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
conditions are met, Dexorder creates a blockchain transaction asking your vault to execute the order. Your
vault then checks that order against the current blockchain time and pool price, and only trades if
everything looks good.
</p>
-->
<p v-if="!s.mockenv">There are no funds currently in your vault. Send tokens to the address above to fund your vault.</p>
<p v-if="s.mockenv">There are no funds currently in your vault. Use the faucet below to mint some testnet coins into your vault.</p>
<!--
<p>
Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
conditions are met, Dexorder creates a blockchain transaction asking your vault to execute the order. Your
vault then checks that order against the current blockchain time and pool price, and only trades if
everything looks good.
</p>
-->
<p v-if="!s.mockenv">There are no funds currently in your vault. Send tokens to the address above to fund your
vault.</p>
<p v-if="s.mockenv">There are no funds currently in your vault. Use the faucet below to mint some testnet coins
into your vault.</p>
</v-card-text>
<v-card-item v-if="!empty">
<v-table>
<tbody>
<suspense v-for="(amount,addr) of balances">
<token-row :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
</suspense>
<suspense v-for="(amount,addr) of balances">
<token-row :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
</suspense>
</tbody>
</v-table>
</v-card-item>
</v-card>
</div>
<withdraw :vault="addr" :token="withdrawToken" v-model="withdrawShow"/>
</div>
<!--
<div>
addr {{ addr }}<br/>

17
src/components/chart/ChartOrders.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="d-flex flex-column h-100">
<toolbar title="Orders" icon="mdi-format-list-bulleted-square">
</toolbar>
<orders-view/>
</div>
</template>
<script setup>
import Toolbar from "@/components/chart/Toolbar.vue";
import OrdersView from "@/views/OrdersView.vue";
</script>
<style scoped lang="scss">
</style>

0
src/components/chart/ChartOrderPane.vue → src/components/chart/ChartPlaceOrder.vue
View File

25
src/components/chart/ChartVault.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="d-flex flex-column h-100">
<toolbar title="Assets" icon="mdi-currency-btc"></toolbar>
<needs-signer>
<vault :owner="s.account" :num="0"/>
<faucet variant="outlined" text="Get Free Testnet Coins!" style="width: 15em"/>
</needs-signer>
</div>
</template>
<script setup>
import Toolbar from "@/components/chart/Toolbar.vue";
import Vault from "@/components/Vault.vue";
import NeedsSigner from "@/components/NeedsSigner.vue";
import Faucet from "@/components/Faucet.vue";
import {useStore} from "@/store/store.js";
const s = useStore()
</script>
<style scoped lang="scss">
</style>

37
src/components/chart/Toolbar.vue
View File

@@ -1,12 +1,21 @@
<template>
<div class="d-flex mb-1">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
<span class="logo">dexorder</span>
<v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
<div class="d-flex mb-1 align-center w-100">
<div class="d-flex align-end clickable" @click="$router.push('/place')">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
<span class="logo">dexorder</span>
<v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
</div>
<!--
<div class="d-flex align-center">
</div>
-->
<slot/>
<div class="w-100 d-flex justify-end">
<v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
<v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
<div class="ml-auto d-flex align-center">
<!-- <v-icon :icon="icon" size="small"/>&nbsp;-->
<span class="title">{{title}}</span>
<toolbar-button icon="mdi-currency-btc" path="/vault"/>
<toolbar-button icon="mdi-format-list-bulleted-square" path="/orders"/>
<v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp" disabled></v-btn>
</div>
</div>
</template>
@@ -19,21 +28,17 @@ import {timestamp} from "@/misc.js";
import {ShapeType} from "@/charts/shape.js";
import {computed, ref} from "vue";
import {useTheme} from "vuetify";
import ToolbarButton from "@/components/chart/ToolbarButton.vue";
const props = defineProps(['title', 'icon'])
const s = useStore()
const co = useChartOrderStore()
const showCancel = ref(false)
const theme = useTheme().current
function cancelOrder() {
showCancel.value = true
}
function placeOrder() {
function showCorp() {
window.open('https://dexorder.trade', 'dexorder')
}
</script>

15
src/components/chart/ToolbarButton.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<v-btn :color="isCurrent?'primary':undefined" variant="text" :icon="icon" @click="$router.push(path)"/>
</template>
<script setup>
import {computed} from "vue";
import {useRoute} from "vue-router";
const props = defineProps(['icon', 'path'])
const isCurrent = computed(() => useRoute().path === props.path)
</script>
<style scoped lang="scss">
</style>