wip

components/swap/SwapCard.vue

@@ -20,8 +20,8 @@
               maxlength="79"
               spellcheck="false"
               :size="
-                token0.amount.length > 0
+                String(token0.amount).length > 0
-                  ? Math.min(token0.amount.length, 20)
+                  ? Math.min(String(token0.amount).length, 24)
                   : 2
               "
               class="border-0 focus:outline-none focus:ring-0 text-lg font-semibold px-0 max-w-full"
@@ -95,9 +95,11 @@
         <div
           class="flex justify-between items-center text-primary-gray font-medium"
         >
-          <div>~ $ 9,321.69</div>
+          <div>~ {{ formatUsd(token0.amountUSD) }}</div>
 
-          <div>Balance: 85 {{ token0.symbol }}</div>
+          <div>
+            Balance: {{ formatDecimal(token0.balance) }} {{ token0.symbol }}
+          </div>
         </div>
 
         <div
@@ -123,8 +125,8 @@
               maxlength="79"
               spellcheck="false"
               :size="
-                token1.amount.length > 0
+                String(token1.amount).length > 0
-                  ? Math.min(token1.amount.length, 20)
+                  ? Math.min(String(token1.amount).length, 24)
                   : 2
               "
               class="border-0 focus:outline-none focus:ring-0 text-lg font-semibold px-0 max-w-full"
@@ -198,9 +200,16 @@
         <div
           class="flex justify-between items-center text-primary-gray font-medium"
         >
-          <div>~ $ 9,321.69 <span class="text-green-pure">(0.188%)</span></div>
+          <div>
+            ~ {{ formatUsd(token1.amountUSD) }}
+            <span v-if="slippagePerc" class="text-green-pure"
+              >({{ formatPercent(slippagePerc) }})</span
+            >
+          </div>
 
-          <div>Balance: 85 {{ token1.symbol }}</div>
+          <div>
+            Balance: {{ formatDecimal(token1.balance) }} {{ token1.symbol }}
+          </div>
         </div>
 
         <div
@@ -228,8 +237,18 @@
       </div>
     </div>
 
-    <div class="text-right mt-[18px] font-medium mb-1">
+    <div
-      1 DAI = 0.0004272 ETH
+      class="text-right mt-[18px] font-medium mb-1"
+      v-if="
+        token0.amount &&
+          token1.amount &&
+          token1.amount != '0' &&
+          token0.amount != '0'
+      "
+    >
+      1 {{ token1.symbol }} =
+      {{ formatDecimal(token0.amount / token1.amount, 7) }}
+      {{ token0.symbol }}
     </div>
 
     <div class="mt-6 flex items-center justify-between">
@@ -316,13 +335,19 @@
     </div>
 
     <div class="mt-7">
-      <ButtonCTA class="px-8 h-16 w-full">Swap</ButtonCTA>
+      <ButtonCTA
+        @click="swap"
+        :loading="swapping"
+        :disabled="swapping"
+        class="px-8 h-16 w-full"
+        >Swap</ButtonCTA
+      >
     </div>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent, reactive, ref } from '@nuxtjs/composition-api'
+import { computed, defineComponent, reactive, ref, watch, watchEffect } from '@nuxtjs/composition-api'
 import { useNetwork } from '~/composables/useNetwork'
 import tokens from '~/constant/tokens'
 import Button from '../Button.vue'
@@ -334,28 +359,63 @@ import Menu from '../common/menu/Menu.vue'
 import IconCurrency from '../IconCurrency.vue'
 import DropdownMenu from '../protocols/DropdownMenu.vue'
 import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import { useFormatting } from '~/composables/useFormatting'
+import { useBalances } from '~/composables/useBalances'
+import { useBigNumber } from '~/composables/useBigNumber'
 
 export default defineComponent({
   components: { List, Menu, IconCurrency, Button, Dropdown, DropdownMenu, ToggleButton, InputPercent, ButtonCTA },
-  setup() {
+  props: {
+    onSwap: {
+      type: Function,
+      required: true
+    },
+    token1Amount: {
+      type: String,
+      default: '0'
+    },
+  },
+  setup(props, { emit }) {
 
+    const { toBN } = useBigNumber()
+    const { formatDecimal, formatUsd, formatPercent } = useFormatting()
+    const { prices, getBalanceByKey } = useBalances()
     const { activeNetworkId } = useNetwork()
     const allTokens = computed(() => tokens[activeNetworkId.value].allTokens)
 
     const token0Input = ref()
 
     const token0 = reactive({
-      address: '',
+      address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
       symbol: 'ETH',
-      amount: '4'
+      amount: '0',
+      amountUSD: computed(() => prices[activeNetworkId.value][token0.address] * token0.amount),
+      balance: computed(() => getBalanceByKey(token0.symbol)),
+      decimals: 18,
+
     })
 
     const token1 = reactive({
-      address: '',
+      address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
       symbol: 'DAI',
-      amount: '9322.75'
+      amount: props.token1Amount,
+      amountUSD: computed(() => prices[activeNetworkId.value][token1.address] * token1.amount),
+      balance: computed(() => getBalanceByKey(token1.symbol)),
+      decimals: 18,
     })
 
+    const slippagePerc = computed(() => {
+
+      const sellAmountUsd = toBN(token0.amountUSD);
+      const buyAmountUsd = toBN(token1.amountUSD);
+
+      return buyAmountUsd.isZero() || sellAmountUsd.isZero() ? 0 : Math.abs(buyAmountUsd.dividedBy(sellAmountUsd).minus(1).toString())
+    })
+
+    watch(() => props.token1Amount, () => {
+      token1.amount = props.token1Amount
+    });
+
     const slippage = ref('3')
     const customSlippage = ref(false)
     const customSlippageValue = ref("0.0")
@@ -367,25 +427,54 @@ export default defineComponent({
       token0.symbol = token1Raw.symbol
       token0.address = token1Raw.address
       token0.amount = token1Raw.amount
+      token0.decimals = token1Raw.decimals
 
       token1.symbol = token0Raw.symbol
       token1.address = token0Raw.address
       token1.amount = token0Raw.amount
+      token1.decimals = token0Raw.decimals
     }
 
     const selectToken0 = (token) => {
       token0.symbol = token.symbol
       token0.address = token.address
+      token0.decimals = token.decimals
       token0.amount = "0"
     }
 
     const selectToken1 = (token) => {
+      console.log(token);
       token1.symbol = token.symbol
       token1.address = token.address
+      token1.decimals = token.decimals
       token1.amount = "0"
     }
 
+    watch(token0, () => emit('token0', { ...token0 }), { immediate: true })
+    watch(token1, () => emit('token1', { ...token1 }), { immediate: true })
+    watch([slippage, customSlippage, customSlippageValue], () => emit('slippage', customSlippage.value ? customSlippageValue.value : slippage.value), { immediate: true })
+
+    const swapping = ref(false)
+
+    const swap = async () => {
+      swapping.value = true
+
+      if (props.onSwap) {
+        await props.onSwap(
+          { ...token0 },
+          { ...token1 },
+          slippage.value
+        )
+      }
+
+      swapping.value = false
+    }
+
     return {
+      formatPercent,
+      slippagePerc,
+      formatDecimal,
+      formatUsd,
       token0Input,
       customSlippage,
       token0,
@@ -396,6 +485,8 @@ export default defineComponent({
       allTokens,
       customSlippageValue,
       slippage,
+      swap,
+      swapping,
     }
   },
 })

package.json

@@ -25,6 +25,7 @@
     "v-tooltip": "^2.1.3",
     "vue-clipboard2": "^0.3.1",
     "vue-composable": "^1.0.0-beta.23",
+    "waait": "^1.0.5",
     "walletlink": "^2.1.6",
     "web3": "^1.4.0",
     "web3modal": "^1.9.3"

pages/mainnet/1inch.vue

@@ -27,16 +27,32 @@
     </div>
 
     <div class="mx-auto w-[512px] shadow rounded-[10px] px-8 py-12">
-      <swap-card />
+      <swap-card
+        :on-swap="swap"
+        @token0="sellToken = $event"
+        @token1="buyToken = $event"
+        @slippage="fee = $event"
+        :token1Amount="buyToken ? buyToken.amount : '0'"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import {
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from "@nuxtjs/composition-api";
 import BackIcon from "~/assets/icons/back.svg?inline";
 import OneInchIcon from "~/assets/icons/1inch.svg?inline";
 import SwapCard from "~/components/swap/SwapCard.vue";
+import wait from "waait";
+import axios from "axios";
+import { useToken } from "~/composables/useToken";
+import { useBigNumber } from "~/composables/useBigNumber";
 
 export default defineComponent({
   components: {
@@ -45,7 +61,62 @@ export default defineComponent({
     SwapCard
   },
   setup() {
-    return {};
+    const { toBN, pow, div } = useBigNumber();
+
+    const { valInt } = useToken();
+    const sellToken = ref();
+    const buyToken = ref();
+    const fee = ref("3.0");
+
+    const swap = async (token0, token1, slippage) => {
+      await wait(3000);
+    };
+
+    const fetchSwapInfo = async () => {
+      if (!sellToken.value || !buyToken.value) return;
+
+      if (!sellToken.value.amount || sellToken.value.amount === "0") {
+        buyToken.value.amount = "0";
+        return;
+      }
+
+      const { data } = await axios.get(
+        "https://api.1inch.exchange/v3.0/1/quote",
+        {
+          params: {
+            fromTokenAddress: sellToken.value.address,
+            toTokenAddress: buyToken.value.address,
+            amount: valInt(sellToken.value.amount, sellToken.value.decimals),
+            fee: fee.value
+          }
+        }
+      );
+
+      const num = toBN(data.toTokenAmount);
+      const multiplier = pow(10, buyToken.value.decimals);
+
+      buyToken.value.amount = div(num, multiplier).toFixed(7);
+    };
+
+    watch([sellToken, buyToken, fee], fetchSwapInfo);
+    let interval;
+
+    onMounted(() => {
+      interval = setInterval(fetchSwapInfo, 10000);
+    });
+
+    onBeforeUnmount(() => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    });
+
+    return {
+      swap,
+      fee,
+      sellToken,
+      buyToken
+    };
   }
 });
 </script>

yarn.lock

@@ -11642,6 +11642,11 @@ vuex@^3.6.2:
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
   integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
 
+waait@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/waait/-/waait-1.0.5.tgz#6a3c7aaa88bd0a1a545e9d47890b9595bebf9aa7"
+  integrity sha512-wp+unA4CpqxvBUKHHv8D86fK4jWByHAWyhEXXVHfVUZfK+16ylpj7hjQ58Z8j9ntu8XNukRQT8Fi5qbyJ8rkyw==
+
 walletlink@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/walletlink/-/walletlink-2.1.6.tgz#4e48310af09bb0c940a156c26c1d0b1b9506ddb9"