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

how it works

Browse Source
This commit is contained in:
Tim
2024-04-25 18:02:25 -04:00
parent 8d85c2e8b1
commit 208dbc523e
9 changed files with 149 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Logo.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<span class="d-inline-flex align-baseline"> <span class="d-inline-flex align-center">
<v-icon icon="mdi-arrow-up-bold" color="primary" class="arrow"/> <v-icon icon="mdi-arrow-up-bold" color="primary" class="arrow"/>
<span class="logo">dexorder</span> <span class="logo">dexorder</span>
<alpha v-if="alpha"/> <alpha v-if="alpha"/>
</span> </span>
</template> </template>
<script setup> <script setup>
@@ -11,7 +11,7 @@
import Alpha from "@/components/Alpha.vue"; import Alpha from "@/components/Alpha.vue";
const props = defineProps({ const props = defineProps({
alpha: {type: Boolean, default: true} alpha: {type: Boolean, default: false}
}) })
</script> </script>

2
src/components/NeedsSigner.vue
View File

@@ -9,7 +9,7 @@
This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade. This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
</v-card-text> </v-card-text>
<v-card-text> <v-card-text>
Play with the order builder by clicking on the <logo :alpha="false" class="logo-small"/> logo or on the <v-icon icon="mdi-chart-timeline-variant"/> button. 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> </v-card-text>
<div v-if="!pluginOk"> <div v-if="!pluginOk">
<v-card-text> <v-card-text>

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="d-flex mb-1 align-center w-100"> <div class="d-flex mb-1 align-center w-100">
<logo class="d-flex align-end clickable logo-large" @click="$router.push('/order')"/> <logo class="d-flex align-end clickable logo-large" @click="$router.push('/order')" :alpha="true"/>
<!-- <!--
<div class="d-flex align-end clickable" @click="$router.push('/order')"> <div class="d-flex align-end clickable" @click="$router.push('/order')">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span> <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>

80
src/corp/Home.vue
View File

@@ -1,58 +1,48 @@
<template> <template>
<v-card rounded="0" border="0" elevation="0" class="maxw"> <div>
<v-card-title class="d-flex align-center"> <v-card rounded="0" border="0" elevation="0" class="maxw">
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span> <v-card-item>
<span class="logo">dexorder</span> <logo class="logo-xl"/>
</v-card-title> </v-card-item>
<v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle> <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
<!-- <social class="ml-12"/>--> <!-- <social class="ml-12"/>-->
<v-card-text> <v-card-text>
Dexorder powers up your favorite DeFi exchange with advanced order types! Dexorder powers up your favorite DeFi exchange with advanced order types!
</v-card-text> </v-card-text>
<v-card-text> <v-card-text>
<v-list> <v-list>
<v-list-item> <v-list-item>
<v-img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Uniswap_Logo.svg" width="1.3em" <uniswap-logo class="mr-2"/>
inline style="vertical-align: middle" class="mr-2"/> Supports Uniswap v3 <alpha/>
Supports Uniswap v3 <alpha/> </v-list-item>
</v-list-item> <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
<v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item> <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
<v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item> <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
<v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item> <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
<v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item> <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
<v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item> <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
<v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item> <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
<v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item> <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
<v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item> </v-list>
</v-list> </v-card-text>
</v-card-text> <home-actions/>
<v-card-actions> </v-card>
<v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/> <how-it-works class="mt-12"/>
<v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/> <home-actions/>
<v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/> </div>
</v-card-actions>
</v-card>
</template> </template>
<script setup> <script setup>
import {useTheme} from "vuetify"; import {useTheme} from "vuetify";
import Alpha from "@/components/Alpha.vue"; import Alpha from "@/components/Alpha.vue";
import Soon from "@/components/Soon.vue"; import Soon from "@/components/Soon.vue";
import HowItWorks from "@/corp/HowItWorks.vue";
import HomeActions from "@/corp/HomeActions.vue";
import UniswapLogo from "@/corp/UniswapLogo.vue";
import Logo from "@/components/Logo.vue";
const theme = useTheme().current const theme = useTheme().current
function openApp() {
window.open('https://alpha.dexorder.trade/', 'dexorderapp')
}
function discord() {
window.open('https://discord.gg/fqp9JXXQyt','discord')
}
function twitter() {
window.open('https://twitter.com/Dexorder_trade', 'twitter')
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

21
src/corp/HomeActions.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<v-card-actions>
<v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
<v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/>
<v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/>
</v-card-actions>
</template>
<script setup>
function openApp() {
window.open('https://alpha.dexorder.trade/', 'dexorderapp')
}
function discord() {
window.open('https://discord.gg/fqp9JXXQyt','discord')
}
function twitter() {
window.open('https://twitter.com/Dexorder_trade', 'twitter')
}
</script>

71
src/corp/HowItWorks.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<v-card elevation="0" class="how">
<v-card-title><v-icon icon="mdi-information-outline"/>&nbsp;How&nbsp;It&nbsp;Works</v-card-title>
<v-card-item><v-img src="/how-it-works.png" class="my-6"/></v-card-item>
<v-card-text>
<h4>Order Management</h4>
<p>
Dexorder is an on-chain Order Management System (OMS) that holds sophisticated order types and executes them
on the appropriate <uniswap-logo/> DeFi exchange at the correct time.
</p>
</v-card-text>
<v-card-text>
<h4>Personal Smart Vaults</h4>
<p>
Everyone gets their own personal smart vault, which can hold <i>smart orders</i> as well as tokens. Only you
as the owner of your vault may withdraw funds or manage orders. This smart vault understands your order
specifications and will only trade with Uniswap when all of the order conditions are met. After trading, the
smart vault can also activate stoplosses or other conditional actions like canceling an OCO
(One-Cancels-the-Other) group.
</p>
</v-card-text>
<v-card-text>
<h4>Funds are Never Locked</h4>
<p>
Tokens deposited into your vault are <i>never locked</i> and may always be withdrawn at any time by only you.
If there are active orders in the vault that need those funds, those orders are simply unable to trade, and
they will stay open without being able to execute. If you put tokens back into your vault when there are open
orders, those orders will automatically resume and trade the newly available funds.
</p>
</v-card-text>
<v-card-text>
<h4>Portfolio Management</h4>
<p>
Since your smart vault can see all your tokens and orders, it also provides Cancel All and
Sell Everything functions to augment your risk management when markets move fast.
</p>
</v-card-text>
<v-card-text>
<h4>Activation</h4>
<p>
Dexorder watches the market to know when your order conditions have been met, and then activates your vaults
with any orders could trade immediately. The smart vaults do not trust Dexorder's activation message and perform
an extensive check of the order conditions before agreeing to send an actual order to a Uniswap pool. Dexorder
never has access to vault funds and cannot change any orders. Dexorder is only able to activate the vault and
provide gas at the correct times.
</p>
</v-card-text>
<v-card-text>
<h4>Power Up</h4>
<p>
Use Dexorder smart vaults for sophisticated order management when trading with your favorite <uniswap-logo/> DeFi pool!
</p>
</v-card-text>
</v-card>
</template>
<script setup>
import Alpha from "@/components/Alpha.vue";
import Soon from "@/components/Soon.vue";
import UniswapLogo from "@/corp/UniswapLogo.vue";
import Logo from "@/components/Logo.vue";
</script>
<style scoped lang="scss">
.how {
.v-card-text {
max-width: 40em;
}
}
</style>

6
src/corp/MenuBar.vue
View File

@@ -3,10 +3,7 @@
<!-- <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>--> <!-- <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
<v-app-bar-title> <v-app-bar-title>
<span class="logo d-flex mb-1 align-center w-100"> <logo/>
<span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
<span class="logo">dexorder</span>
</span>
</v-app-bar-title> </v-app-bar-title>
<v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn> <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
@@ -16,6 +13,7 @@
<script setup> <script setup>
import {useTheme} from "vuetify"; import {useTheme} from "vuetify";
import Logo from "@/components/Logo.vue";
const theme = useTheme().current const theme = useTheme().current

6
src/corp/UniswapLogo.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<v-img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Uniswap_Logo.svg"
width="1.3em" inline style="vertical-align: middle"/>
</template>
<script setup>
</script>

13
src/styles/style.scss
View File

@@ -5,22 +5,21 @@
font-family: v.$heading-font-family; font-family: v.$heading-font-family;
font-weight: 500; font-weight: 500;
.arrow { .arrow {
font-size: 1.3em;
vertical-align: center;
} }
} }
.logo-large { .logo-large {
font-size: 24px; font-size: 24px;
.arrow {
font-size: 30px;
}
} }
.logo-small { .logo-small {
font-size: 0.8em; font-size: 0.8em;
.arrow { }
font-size: 1.2em;
} .logo-xl {
font-size: 2em;
} }
.title { .title {