home page tweaks

2024-04-24 23:17:23 -04:00
parent 0ab84adf13
commit 8d85c2e8b1
7 changed files with 68 additions and 18 deletions
--- a/src/blockchain/route.js
+++ b/src/blockchain/route.js
@@ -50,7 +50,7 @@ async function componentFindRoute() {
            os.routes = result
        }
    } catch (e) {
-        console.log('ignoring routes exception', e)
+        // console.log('ignoring routes exception', e)
    } finally {
        os.routesPending = false
    }
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -0,0 +1,19 @@
+<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>
+</template>
+
+<script setup>
+
+import Alpha from "@/components/Alpha.vue";
+
+const props = defineProps({
+  alpha: {type: Boolean, default: true}
+})
+</script>
+
+<style scoped lang="scss">
+</style>
--- a/src/components/NeedsSigner.vue
+++ b/src/components/NeedsSigner.vue
@@ -2,11 +2,15 @@
  <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
  <v-card v-if="!loggedIn" rounded="0">
    <v-card-title>
-      <v-icon icon="mdi-hand-wave" color="grey"/>&nbsp;Welcome to Dexorder Alpha!
+<!--      <v-icon icon="mdi-hand-wave" color="grey"/>-->
+      Welcome to Dexorder Alpha!
    </v-card-title>
    <v-card-text>
      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.
+    </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
@@ -18,8 +22,10 @@
      </v-card-actions>
    </div>

-    <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
-         @click="connect" :disabled="disabled" text="Connect Wallet"/>
+    <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">
@@ -66,6 +72,7 @@ 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()
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -32,11 +32,14 @@
          <span :style="colorStyle" class="ma-3">Add condition:</span>
          <v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
          <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
-      <!--    <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
-          <!--
-          mdi-ray-start-end
-          mdi-vector-polyline
-          -->
+          <v-tooltip text="Coming Soon!" location="top">
+            <template v-slot:activator="{ props }">
+              <span v-bind="props">
+                <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" disabled>Diagonal</v-btn>
+              </span>
+            </template>
+          </v-tooltip>
+          <!-- mdi-ray-start-end mdi-vector-polyline -->
        </div>
      </div>
    </div>
--- a/src/components/chart/Toolbar.vue
+++ b/src/components/chart/Toolbar.vue
@@ -1,10 +1,13 @@
 <template>
  <div class="d-flex mb-1 align-center w-100">
+    <logo class="d-flex align-end clickable logo-large" @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="logo">dexorder</span>
      <alpha class="pr-6"/>
    </div>
+-->
 <!--
    <div class="d-flex align-center">
    </div>
@@ -29,6 +32,7 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {useTheme} from "vuetify";
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
 import Alpha from "@/components/Alpha.vue";
+import Logo from "@/components/Logo.vue";

 const props = defineProps(['title', 'icon'])

--- a/src/corp/Home.vue
+++ b/src/corp/Home.vue
@@ -7,28 +7,29 @@
    <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 exchanges with advanced order types!
+      Dexorder powers up your favorite DeFi exchange with advanced order types!
    </v-card-text>
    <v-card-text>
      <v-list>
-        <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"/> One-Click Cancel All <alpha/></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-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 on Twitter" @click="twitter"/>
+      <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/>
    </v-card-actions>
  </v-card>
 </template>
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -4,7 +4,23 @@
  .logo {
    font-family: v.$heading-font-family;
    font-weight: 500;
+    .arrow {
+
+    }
+  }
+
+  .logo-large {
    font-size: 24px;
+    .arrow {
+      font-size: 30px;
+    }
+  }
+
+  .logo-small {
+    font-size: 0.8em;
+    .arrow {
+      font-size: 1.2em;
+    }
  }

  .title {