feature: fetch swap to token amount

enkryptcom · Jul 14, 2022 · cb18d1a · cb18d1a
1 parent 4bfee0f
commit cb18d1a
Show file tree

Hide file tree

Showing 9 changed files with 330 additions and 83 deletions.
diff --git a/packages/extension/src/providers/ethereum/libs/assets-handlers/token-mew.ts b/packages/extension/src/providers/ethereum/libs/assets-handlers/token-mew.ts
@@ -92,10 +92,6 @@ export default (
         let nativeAsset: Erc20Token | null = null;
         for (const [address, market] of Object.entries(marketInfo)) {
           if (market && tokenInfo[address]) {
-            console.log(
-              "token-mew",
-              toBN(balances[address].balance).toString()
-            );
             const asset = new Erc20Token({
               balance: toBN(balances[address].balance).toString(),
               icon: market.image,

diff --git a/packages/extension/src/providers/ethereum/types/evm-network.ts b/packages/extension/src/providers/ethereum/types/evm-network.ts
@@ -84,7 +84,6 @@ export class EvmNetwork extends BaseNetwork {
 
   public getAllTokens(address: string): Promise<BaseToken[]> {
     if (this.tokensHandler) {
-      console.log("tokens");
       return this.tokensHandler(this, address);
     }
 

diff --git a/packages/extension/src/providers/swap/index.ts b/packages/extension/src/providers/swap/index.ts
@@ -1,6 +1,6 @@
 import { BaseToken } from "@/types/base-token";
 import { EvmSwapProvider } from "./types/EvmSwapProvider";
-import { SwapProvider } from "./types/SwapProvider";
+import { QuoteInfo, SwapProvider } from "./types/SwapProvider";
 
 export class Swap {
   public providers: SwapProvider[] = [new EvmSwapProvider()];
@@ -10,4 +10,16 @@ export class Swap {
       this.providers.map((provider) => provider.getSupportedTokens(chainName))
     ).then((tokens) => tokens.flat());
   }
+
+  public async getAllQuotes(
+    fromToken: BaseToken,
+    toToken: BaseToken,
+    fromAmount: string
+  ): Promise<QuoteInfo[]> {
+    return Promise.all(
+      this.providers.map((provider) =>
+        provider.getQuote(fromToken, toToken, fromAmount)
+      )
+    ).then((quotes) => quotes.flat());
+  }
 }
diff --git a/packages/extension/src/providers/swap/types/EvmSwapProvider.ts b/packages/extension/src/providers/swap/types/EvmSwapProvider.ts
@@ -50,6 +50,7 @@ export class EvmSwapProvider extends SwapProvider {
           symbol: tokenData.symbol,
           name: tokenData.name ?? tokenData.symbol,
           price: tokenData.price,
+          balance: toBase("1", tokenData.decimals),
         });
       });
     } catch {
@@ -81,7 +82,7 @@ export class EvmSwapProvider extends SwapProvider {
     const params = new URLSearchParams();
     params.append("fromContractAddress", fromToken.contract);
     params.append("toContractAddress", toToken.contract);
-    params.append("amount", toBase(fromAmount, fromToken.decimals));
+    params.append("amount", fromAmount);
 
     const { min, max } = this.getMinMaxAmount(fromToken);
 

diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue
@@ -24,9 +24,7 @@
       v-show="!!token && Number(tokenAmount) > 0"
       class="swap-token-input__fiat"
     >
-      ≈ ${{
-        $filters.formatFiatValue(Number(tokenAmount) * token?.decimals).value
-      }}
+      ≈ ${{ $filters.formatFiatValue(tokenPrice).value }}
     </div>
   </div>
 </template>
@@ -38,15 +36,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import SwapTokenSelect from "../swap-token-select/index.vue";
 import SwapTokenFastList from "../swap-token-fast-list/index.vue";
 import SwapTokenAmountInput from "./components/swap-token-amount-input.vue";
 import { PropType } from "vue";
-import { AssetsType } from "@/types/provider";
-
-const isFocus = ref(false);
-const tokenAmount = ref("");
+import { BaseToken } from "@/types/base-token";
+import BigNumber from "bignumber.js";
 
 const props = defineProps({
   toggleSelect: {
@@ -68,7 +64,7 @@ const props = defineProps({
     },
   },
   token: {
-    type: Object as PropType<AssetsType | null>,
+    type: Object as PropType<BaseToken | null>,
     default: () => {
       return null;
     },
@@ -81,6 +77,19 @@ const props = defineProps({
   },
 });
 
+const isFocus = ref(false);
+const tokenAmount = ref("");
+
+const tokenPrice = computed(() => {
+  if (props.token?.price && tokenAmount.value !== "") {
+    return new BigNumber(tokenAmount.value)
+      .times(new BigNumber(props.token.price))
+      .toFixed();
+  }
+
+  return null;
+});
+
 const amountChanged = (newVal: string) => {
   tokenAmount.value = newVal;
   props.inputAmount(Number(newVal));

diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
@@ -6,7 +6,12 @@
     <div class="swap-token-select__info">
       <h5>{{ token.name }}</h5>
       <p>
-        {{ token.balancef }} <span>{{ token.symbol }}</span>
+        {{
+          tokenBalance
+            ? $filters.formatFloatingPointValue(tokenBalance).value
+            : "~"
+        }}
+        <span>{{ token.symbol }}</span>
       </p>
     </div>
 
@@ -34,7 +39,9 @@ export default {
 <script setup lang="ts">
 import { ref, PropType } from "vue";
 import SwitchArrow from "@action/icons/header/switch_arrow.vue";
-import { AssetsType } from "@/types/provider";
+import { BaseToken } from "@/types/base-token";
+import { computed } from "@vue/reactivity";
+import { fromBase } from "@/libs/utils/units";
 let isOpen = ref(false);
 const props = defineProps({
   toggleSelect: {
@@ -44,12 +51,21 @@ const props = defineProps({
     },
   },
   token: {
-    type: Object as PropType<AssetsType | null>,
+    type: Object as PropType<BaseToken | null>,
     default: () => {
       return {};
     },
   },
 });
+
+const tokenBalance = computed(() => {
+  if (props.token?.balance) {
+    return fromBase(props.token.balance, props.token.decimals);
+  }
+
+  return null;
+});
+
 const open = () => {
   isOpen.value = !isOpen.value;
   props.toggleSelect(isOpen);

diff --git a/.../action/views/swap/components/swap-token-to-amount/components/swap-token-amount-input.vue b/.../action/views/swap/components/swap-token-to-amount/components/swap-token-amount-input.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    :class="`swap-token-amount-input ${
+      value === '0.0' || value === 'Searching' ? 'placeholder' : ''
+    }`"
+  >
+    {{
+      value !== "0.0" && value !== "Searching"
+        ? `≈ ${$filters.formatFloatingPointValue(value).value}`
+        : value
+    }}
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SwapTokenAmountInput",
+};
+</script>
+
+<script setup lang="ts">
+defineProps({
+  placeholder: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  value: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  changeFocus: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  autofocus: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+});
+</script>
+
+<style lang="less">
+@import "~@action/styles/theme.less";
+.swap-token-amount-input {
+  outline: none;
+  background: @white;
+  margin: 0;
+  padding: 0 76px 0 16px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 40px;
+  letter-spacing: 0.25px;
+  color: @primaryLabel;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0 none;
+}
+
+.placeholder {
+  color: @tertiaryLabel;
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-to-amount/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-to-amount/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="swap-token-input" :class="{ focus: isFocus }">
+    <swap-token-select
+      :toggle-select="toggleSelect"
+      :token="token"
+    ></swap-token-select>
+
+    <swap-token-amount-input
+      v-show="!!token"
+      :value="amount"
+    ></swap-token-amount-input>
+
+    <swap-token-fast-list
+      v-show="!token"
+      :select-token="selectToken"
+    ></swap-token-fast-list>
+
+    <!-- <a v-show="!!token" class="swap-token-input__max">Max</a> -->
+    <div v-show="!!token && Number(amount) > 0" class="swap-token-input__fiat">
+      ≈ ${{ tokenPrice ? $filters.formatFiatValue(tokenPrice).value : "~" }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SwapTokenToAmount",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import SwapTokenSelect from "../swap-token-select/index.vue";
+import SwapTokenFastList from "../swap-token-fast-list/index.vue";
+import SwapTokenAmountInput from "./components/swap-token-amount-input.vue";
+import { PropType } from "vue";
+import { BaseToken } from "@/types/base-token";
+import BigNumber from "bignumber.js";
+
+const props = defineProps({
+  toggleSelect: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  selectToken: {
+    type: Function,
+    default: () => {
+      return null;
+    },
+  },
+  token: {
+    type: Object as PropType<BaseToken | null>,
+    default: () => {
+      return null;
+    },
+  },
+  amount: {
+    type: String,
+    default: () => "0.0",
+  },
+});
+
+const isFocus = ref(false);
+
+const tokenPrice = computed(() => {
+  if (props.token?.price && props.amount !== "Searching") {
+    return new BigNumber(props.amount)
+      .times(new BigNumber(props.token.price))
+      .toFixed();
+  }
+
+  return null;
+});
+</script>
+
+<style lang="less" scoped>
+@import "~@action/styles/theme.less";
+.swap-token-input {
+  width: 100%;
+  min-height: 148px;
+  border: 1px solid rgba(95, 99, 104, 0.2);
+  box-sizing: border-box;
+  border-radius: 10px;
+  position: relative;
+
+  &.focus {
+    border: 1px solid @primary;
+  }
+
+  &__max {
+    padding: 4px 8px;
+    text-decoration: none;
+    position: absolute;
+    width: 41px;
+    height: 24px;
+    right: 18px;
+    bottom: 30px;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 6px;
+    cursor: pointer;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.8px;
+    box-sizing: border-box;
+    color: @primaryLabel;
+  }
+
+  &__fiat {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    letter-spacing: 0.25px;
+    color: @secondaryLabel;
+    position: absolute;
+    left: 16px;
+    bottom: 16px;
+  }
+}
+</style>