fixes

pages/mainnet/1inch.vue

@@ -53,6 +53,7 @@ import wait from "waait";
 import axios from "axios";
 import { useToken } from "~/composables/useToken";
 import { useBigNumber } from "~/composables/useBigNumber";
+import { useNetwork } from "~/composables/useNetwork";
 
 export default defineComponent({
   components: {
@@ -62,6 +63,7 @@ export default defineComponent({
   },
   setup() {
     const { toBN, pow, div } = useBigNumber();
+    const { activeNetwork } = useNetwork();
 
     const { valInt } = useToken();
     const sellToken = ref();
@@ -81,7 +83,7 @@ export default defineComponent({
       }
 
       const { data } = await axios.get(
-        "https://api.1inch.exchange/v3.0/1/quote",
+        `https://api.1inch.exchange/v3.0/${activeNetwork.value.chainId}/quote`,
         {
           params: {
             fromTokenAddress: sellToken.value.address,

pages/polygon/1inch.vue

@@ -26,17 +26,34 @@
       </div>
     </div>
 
-    <div class="sm:mx-auto sm:w-[512px] sm:shadow sm:rounded-[10px] sm:px-8 sm:py-12">
+    <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";
+import { useNetwork } from "~/composables/useNetwork";
 
 export default defineComponent({
   components: {
@@ -45,7 +62,63 @@ export default defineComponent({
     SwapCard
   },
   setup() {
-    return {};
+    const { toBN, pow, div } = useBigNumber();
+    const { activeNetwork } = useNetwork();
+
+    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/${activeNetwork.value.chainId}/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>