From 208dbc523e0eb5d6acae7a38056f09cdaab45d75 Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Thu, 25 Apr 2024 18:02:25 -0400
Subject: [PATCH] how it works

---
 src/components/Logo.vue          | 12 ++---
 src/components/NeedsSigner.vue   |  2 +-
 src/components/chart/Toolbar.vue |  2 +-
 src/corp/Home.vue                | 80 ++++++++++++++------------------
 src/corp/HomeActions.vue         | 21 +++++++++
 src/corp/HowItWorks.vue          | 71 ++++++++++++++++++++++++++++
 src/corp/MenuBar.vue             |  6 +--
 src/corp/UniswapLogo.vue         |  6 +++
 src/styles/style.scss            | 13 +++---
 9 files changed, 149 insertions(+), 64 deletions(-)
 create mode 100644 src/corp/HomeActions.vue
 create mode 100644 src/corp/HowItWorks.vue
 create mode 100644 src/corp/UniswapLogo.vue

diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index d6b6372..3572d36 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,9 +1,9 @@
 <template>
-    <span class="d-inline-flex align-baseline">
-      <v-icon icon="mdi-arrow-up-bold" color="primary" class="arrow"/>
-      <span class="logo">dexorder</span>
-      <alpha v-if="alpha"/>
-    </span>
+  <span class="d-inline-flex align-center">
+    <v-icon icon="mdi-arrow-up-bold" color="primary" class="arrow"/>
+    <span class="logo">dexorder</span>
+    <alpha v-if="alpha"/>
+  </span>
 </template>
 
 <script setup>
@@ -11,7 +11,7 @@
 import Alpha from "@/components/Alpha.vue";
 
 const props = defineProps({
-  alpha: {type: Boolean, default: true}
+  alpha: {type: Boolean, default: false}
 })
 </script>
 
diff --git a/src/components/NeedsSigner.vue b/src/components/NeedsSigner.vue
index df89c23..6f3fc42 100644
--- a/src/components/NeedsSigner.vue
+++ b/src/components/NeedsSigner.vue
@@ -9,7 +9,7 @@
       This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
     </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>
     <div v-if="!pluginOk">
       <v-card-text>
diff --git a/src/components/chart/Toolbar.vue b/src/components/chart/Toolbar.vue
index d23486f..8a9ee0b 100644
--- a/src/components/chart/Toolbar.vue
+++ b/src/components/chart/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <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')">
       <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
diff --git a/src/corp/Home.vue b/src/corp/Home.vue
index b691e43..0236ab4 100644
--- a/src/corp/Home.vue
+++ b/src/corp/Home.vue
@@ -1,58 +1,48 @@
 <template>
-  <v-card rounded="0" border="0" elevation="0" class="maxw">
-    <v-card-title class="d-flex align-center">
-      <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
-      <span class="logo">dexorder</span>
-    </v-card-title>
-    <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
-<!--    <social class="ml-12"/>-->
-    <v-card-text>
-      Dexorder powers up your favorite DeFi exchange with advanced order types!
-    </v-card-text>
-    <v-card-text>
-      <v-list>
-        <v-list-item>
-          <v-img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Uniswap_Logo.svg" width="1.3em"
-                 inline style="vertical-align: middle" class="mr-2"/>
-          Supports Uniswap v3 <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-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-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-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>
-    </v-card-text>
-    <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>
-  </v-card>
+  <div>
+    <v-card rounded="0" border="0" elevation="0" class="maxw">
+      <v-card-item>
+        <logo class="logo-xl"/>
+      </v-card-item>
+      <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
+  <!--    <social class="ml-12"/>-->
+      <v-card-text>
+        Dexorder powers up your favorite DeFi exchange with advanced order types!
+      </v-card-text>
+      <v-card-text>
+        <v-list>
+          <v-list-item>
+            <uniswap-logo class="mr-2"/>
+            Supports Uniswap v3 <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-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-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-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>
+      </v-card-text>
+      <home-actions/>
+    </v-card>
+    <how-it-works class="mt-12"/>
+    <home-actions/>
+  </div>
 </template>
 
 <script setup>
 import {useTheme} from "vuetify";
 import Alpha from "@/components/Alpha.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
 
-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>
 
 <style scoped lang="scss">
diff --git a/src/corp/HomeActions.vue b/src/corp/HomeActions.vue
new file mode 100644
index 0000000..e7f3031
--- /dev/null
+++ b/src/corp/HomeActions.vue
@@ -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>
diff --git a/src/corp/HowItWorks.vue b/src/corp/HowItWorks.vue
new file mode 100644
index 0000000..0960a37
--- /dev/null
+++ b/src/corp/HowItWorks.vue
@@ -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>
\ No newline at end of file
diff --git a/src/corp/MenuBar.vue b/src/corp/MenuBar.vue
index e02f2c0..cd8b15c 100644
--- a/src/corp/MenuBar.vue
+++ b/src/corp/MenuBar.vue
@@ -3,10 +3,7 @@
 <!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
 
     <v-app-bar-title>
-      <span class="logo d-flex mb-1 align-center w-100">
-        <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
-        <span class="logo">dexorder</span>
-      </span>
+      <logo/>
     </v-app-bar-title>
 
     <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
@@ -16,6 +13,7 @@
 
 <script setup>
 import {useTheme} from "vuetify";
+import Logo from "@/components/Logo.vue";
 
 const theme = useTheme().current
 
diff --git a/src/corp/UniswapLogo.vue b/src/corp/UniswapLogo.vue
new file mode 100644
index 0000000..35d39d4
--- /dev/null
+++ b/src/corp/UniswapLogo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index cb74747..ecd8780 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -5,22 +5,21 @@
     font-family: v.$heading-font-family;
     font-weight: 500;
     .arrow {
-
+      font-size: 1.3em;
+      vertical-align: center;
     }
   }
 
   .logo-large {
     font-size: 24px;
-    .arrow {
-      font-size: 30px;
-    }
   }
 
   .logo-small {
     font-size: 0.8em;
-    .arrow {
-      font-size: 1.2em;
-    }
+  }
+
+  .logo-xl {
+    font-size: 2em;
   }
 
   .title {