mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
wip
This commit is contained in:
Georges KABBOUCHI
parent
387ba77558
commit
ef3b4e1848
|
|
@ -20,8 +20,8 @@
|
|||
maxlength="79"
|
||||
spellcheck="false"
|
||||
:size="
|
||||
token0.amount.length > 0
|
||||
? Math.min(token0.amount.length, 20)
|
||||
String(token0.amount).length > 0
|
||||
? 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
|
||||
? Math.min(token1.amount.length, 20)
|
||||
String(token1.amount).length > 0
|
||||
? 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">
|
||||
1 DAI = 0.0004272 ETH
|
||||
<div
|
||||
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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user