Merge pull request #663 from Sifchain/feature/guided

[ui] guided liquidity pool calculations
Sifchain · Mar 16, 2021 · a5d8dae · a5d8dae · github-actions · Mar 16, 2021
2 parents 3ee2a7f + fabf139
commit a5d8dae
Show file tree

Hide file tree

Showing 8 changed files with 277 additions and 72 deletions.
diff --git a/ui/app/src/components/currencyPairPanel/Index.vue b/ui/app/src/components/currencyPairPanel/Index.vue
@@ -2,6 +2,7 @@
 
 <template>
   <div class="field-wrappers">
+
     <CurrencyField
       :label="tokenALabel"
       tabindex="1"
@@ -18,6 +19,9 @@
       :symbolFixed="fromSymbolFixed"
       :selectable="fromSymbolSelectable"
       @update:symbol="handleFromUpdateSymbol"
+      :handleToggle="toggleAsyncPooling"
+      :asyncPooling="asyncPooling"
+      :toggleLabel="toggleLabel"
     />
     <ArrowIconButton
       @click="$emit('arrowclicked')"
@@ -50,8 +54,9 @@ import { defineComponent } from "vue";
 import CurrencyField from "@/components/currencyfield/CurrencyField.vue";
 import ArrowIconButton from "@/components/shared/ArrowIconButton.vue";
 import Icon from "@/components/shared/Icon.vue";
+import Checkbox from "@/components/shared/Checkbox.vue";
 export default defineComponent({
-  components: { CurrencyField, ArrowIconButton, Icon },
+  components: { CurrencyField, ArrowIconButton, Icon, Checkbox },
   props: {
     priceMessage: String,
     fromAmount: String,
@@ -73,6 +78,9 @@ export default defineComponent({
     fromSymbolSelectable: { type: Boolean, default: true },
     toSymbolFixed: { type: Boolean, default: false },
     toSymbolSelectable: { type: Boolean, default: true },
+    toggleLabel: { type: String, default: null },
+    asyncPooling: { type: Boolean, default: null },
+    toggleAsyncPooling: { type: Function },
     isFromMaxActive: { type: Boolean, default: false },
     isToMaxActive: { type: Boolean, default: false },
   },
@@ -92,6 +100,8 @@ export default defineComponent({
     "update:toSymbol",
     "update:fromAmount",
     "update:fromSymbol",
+    "handleToggle",
+    "toggleAsyncPooling"
   ],
   setup(props, context) {
     function handleFromUpdateAmount(amount: string) {
@@ -127,6 +137,9 @@ export default defineComponent({
     function handleToMaxClicked() {
       context.emit("tomaxclicked");
     }
+    function toggleAsyncPooling() {
+      context.emit("toggleAsyncPooling");
+    }
     return {
       handleFromUpdateAmount,
       handleFromUpdateSymbol,
@@ -138,6 +151,7 @@ export default defineComponent({
       handleToMaxClicked,
       handleToFocused,
       handleToBlur,
+      toggleAsyncPooling,
     };
   },
 });

diff --git a/ui/app/src/components/currencyfield/CurrencyField.vue b/ui/app/src/components/currencyfield/CurrencyField.vue
@@ -9,6 +9,8 @@ import Caret from "@/components/shared/Caret.vue";
 import RaisedPanel from "@/components/shared/RaisedPanel.vue";
 import Label from "@/components/shared/Label.vue";
 import RaisedPanelColumn from "@/components/shared/RaisedPanelColumn.vue";
+import RaisedPanelRow from "@/components/shared/RaisedPanelRow.vue";
+import Checkbox from "@/components/shared/Checkbox.vue";
 
 export type BalanceShape = {
   symbol: string;
@@ -27,6 +29,9 @@ export default defineComponent({
     max: { type: Boolean, default: false },
     isMaxActive: { type: Boolean, default: false },
     symbolFixed: { type: Boolean, default: false },
+    toggleLabel: { type: String, default: null },
+    asyncPooling: { type: Boolean, default: null },
+    handleToggle: { type: Function, default: null}
   },
   inheritAttrs: false,
   emits: [
@@ -35,17 +40,20 @@ export default defineComponent({
     "selectsymbol",
     "update:amount",
     "update:symbol",
+    "handleToggle",
     "maxclicked",
   ],
   components: {
     RaisedPanelColumn,
+    RaisedPanelRow,
     RaisedPanel,
     BalanceField,
     AssetItem,
     SifButton,
     Caret,
     SifInput,
     Label,
+    Checkbox,
   },
   setup(props, context) {
     const localAmount = computed({
@@ -60,64 +68,71 @@ export default defineComponent({
 
     return { localSymbol, localAmount };
   },
+  methods: {
+    onClickChild (value: string) {
+      this.handleToggle()
+    }
+  }
 });
 </script>
 
 <template>
   <RaisedPanel>
-    <RaisedPanelColumn class="left">
-      <Label>{{ label }}</Label>
-      <SifInput
-        bold
-        v-bind="$attrs"
-        type="number"
-        v-model="localAmount"
-        :disabled="inputDisabled"
-        @focus="$emit('focus', $event.target)"
-        @blur="$emit('blur', $event.target)"
-        @click="$event.target.select()"
-        ><template v-slot:end
-          ><SifButton
-            v-if="max && !isMaxActive"
-            @click="$emit('maxclicked')"
-            small
-            ghost
-            primary
-            >MAX</SifButton
-          ></template
-        ></SifInput
-      >
-    </RaisedPanelColumn>
+    <Checkbox @clicked="onClickChild" v-if="toggleLabel" :toggleLabel="toggleLabel" :checked="asyncPooling" />
+    <RaisedPanelRow>
+      <RaisedPanelColumn class="left">
+        <Label>{{ label }}</Label>
+        <SifInput
+          bold
+          v-bind="$attrs"
+          type="number"
+          v-model="localAmount"
+          :disabled="inputDisabled"
+          @focus="$emit('focus', $event.target)"
+          @blur="$emit('blur', $event.target)"
+          @click="$event.target.select()"
+          ><template v-slot:end
+            ><SifButton
+              v-if="max && !isMaxActive"
+              @click="$emit('maxclicked')"
+              small
+              ghost
+              primary
+              >MAX</SifButton
+            ></template
+          ></SifInput
+        >
+      </RaisedPanelColumn>
+      <RaisedPanelColumn class="right">
+        <Label>
+          <BalanceField :symbol="localSymbol" />
+        </Label>
 
-    <RaisedPanelColumn class="right">
-      <Label>
-        <BalanceField :symbol="localSymbol" />
-      </Label>
+        <SifButton
+          nocase
+          v-if="localSymbol !== null && !symbolFixed"
+          secondary
+          block
+          @click="$emit('selectsymbol')"
+        >
+          <span><AssetItem :symbol="localSymbol" /></span>
+          <span><Caret /></span>
+        </SifButton>
+        <div v-if="localSymbol !== null && symbolFixed">
+          <AssetItem :symbol="localSymbol" />
+        </div>
 
-      <SifButton
-        nocase
-        v-if="localSymbol !== null && !symbolFixed"
-        secondary
-        block
-        @click="$emit('selectsymbol')"
-      >
-        <span><AssetItem :symbol="localSymbol" /></span>
-        <span><Caret /></span>
-      </SifButton>
-      <div v-if="localSymbol !== null && symbolFixed">
-        <AssetItem :symbol="localSymbol" />
-      </div>
-
-      <SifButton
-        :disabled="!selectable"
-        v-if="localSymbol === null"
-        primary
-        block
-        @click="$emit('selectsymbol')"
-      >
-        <span>Select</span>
-      </SifButton>
-    </RaisedPanelColumn>
+        <SifButton
+          :disabled="!selectable"
+          v-if="localSymbol === null"
+          primary
+          block
+          @click="$emit('selectsymbol')"
+        >
+          <span>Select</span>
+        </SifButton>
+      </RaisedPanelColumn>
+    </RaisedPanelRow>
   </RaisedPanel>
 </template>
 

diff --git a/ui/app/src/components/shared/Checkbox.vue b/ui/app/src/components/shared/Checkbox.vue
@@ -0,0 +1,105 @@
+<template>
+  <div  @click="onClickButton()" class="checkbox-container">
+    <div id="sdf" :data-checked="checked" />
+    <label for="sdf">
+      {{toggleLabel}}
+      <span></span>
+    </label>
+  </div>
+</template>
+
+<script>
+import { computed } from "@vue/reactivity";
+export default {
+  props: {
+    toggleLabel: { type: String, default: null },
+    checked: { type: Boolean, default: true },
+  },
+  emits: [
+    "handleToggle",
+  ],
+  setup(props) {
+    const toggled = computed(() => {
+      return props.checked
+    });
+    return {
+      toggled
+    }
+  },
+	methods: {
+    onClickButton (event) {
+      this.$emit('clicked', '')
+    },
+	},
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .checkbox-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+  div#sdf {
+    display: none;
+    + label {
+      display: flex;
+      align-items: center;
+      color: #818181;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+      span {
+        display: block;
+        width: 32px;
+        height: 15.84px;
+        margin: 0 0 0 5.328px;
+        border-radius: 1000px;
+        background: rgba(129, 129, 129, 0.5);
+        position: relative;
+        transition: background 0.2s ease-in;
+
+        &:after {
+          display: block;
+          content: "";
+          width: 12px;
+          height: 12px;
+          background: #fff;
+          border-radius: 50%;
+          position: absolute;
+          left: 2px;
+          top: 1.8px;
+          transition: left 0.2s ease-in;
+        }
+      }
+
+      &:before,
+      &:after {
+        font-size: 20px;
+        font-weight: 600;
+        padding-top: 3px;
+        transition: opacity 0.2s ease-in;
+      }
+
+    }
+
+    &[data-checked=true] + label {
+      span {
+        background: rgb(202, 169, 58);
+        &:after {
+          left: 18.5px;
+        }
+      }
+
+      &:before {
+        opacity: 0.5;
+      }
+
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+
+</style>
diff --git a/ui/app/src/components/shared/RaisedPanel.vue b/ui/app/src/components/shared/RaisedPanel.vue
@@ -10,6 +10,5 @@
   border: 1px solid $c_gray_100;
   background: $g_gray_reverse;
   color: $c_gray_700;
-  display: flex;
 }
-</style>
+</style>
diff --git a/ui/app/src/components/shared/RaisedPanelRow.vue b/ui/app/src/components/shared/RaisedPanelRow.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="raised-panel-row">
+    <slot></slot>
+  </div>
+</template>
+<style lang="scss" scoped>
+.raised-panel-row {
+
+  display: flex;
+}
+</style>