mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
501 lines
17 KiB
Vue
501 lines
17 KiB
Vue
<template>
|
|
<div>
|
|
<h3 class="text-primary-gray text-lg font-semibold mb-4">Swap</h3>
|
|
<div class="relative">
|
|
<div
|
|
class="shadow-sm relative border border-grey-dark/[0.15] rounded-lg p-4 mb-2"
|
|
>
|
|
<div class="flex justify-between items-center mb-3">
|
|
<div class="flex-1" @click="() => token0Input.focus()">
|
|
<input
|
|
type="text"
|
|
v-model.trim="token0.amount"
|
|
ref="token0Input"
|
|
inputmode="decimal"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
pattern="^[0-9]*[.,]?[0-9]*$"
|
|
placeholder="0.0"
|
|
minlength="1"
|
|
maxlength="79"
|
|
spellcheck="false"
|
|
:size="
|
|
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"
|
|
/>
|
|
<span class="text-primary-gray text-lg font-semibold">{{
|
|
token0.symbol
|
|
}}</span>
|
|
</div>
|
|
|
|
<Dropdown>
|
|
<template #trigger="{ toggle }">
|
|
<button
|
|
class="flex items-center hover:bg-primary-blue-dark/10 p-1.5 rounded"
|
|
@click="toggle"
|
|
>
|
|
<svg
|
|
width="9"
|
|
height="6"
|
|
viewBox="0 0 9 6"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.5 4.5L3.89896 5.10104C4.2309 5.43299 4.76909 5.43299 5.10104 5.10104L4.5 4.5ZM8.60104 1.60104C8.93299 1.2691 8.93299 0.730905 8.60104 0.398959C8.2691 0.0670136 7.7309 0.0670135 7.39896 0.398959L8.60104 1.60104ZM1.60104 0.398959C1.26909 0.0670133 0.730905 0.0670132 0.398959 0.398959C0.0670138 0.730905 0.0670137 1.26909 0.398959 1.60104L1.60104 0.398959ZM5.10104 5.10104L8.60104 1.60104L7.39896 0.398959L3.89896 3.89896L5.10104 5.10104ZM5.10104 3.89896L1.60104 0.398959L0.398959 1.60104L3.89896 5.10104L5.10104 3.89896Z"
|
|
fill="#3F75FF"
|
|
/>
|
|
</svg>
|
|
|
|
<icon-currency
|
|
:currency="token0.symbol.toLowerCase()"
|
|
class="ml-2.5 w-9 h-9"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #menu="{ close }">
|
|
<DropdownMenu
|
|
class="z-10 bg-white w-32 rounded border border-[#CFDCFF] drop-shadow-sm pt-0 pb-0"
|
|
align="right"
|
|
>
|
|
<List
|
|
:items="allTokens.filter(t => t.symbol != token1.symbol)"
|
|
class="p-1.5"
|
|
items-wrapper-classes="space-y-2 overflow-y-scroll max-h-[200px]"
|
|
>
|
|
<template v-slot:default="{ item }">
|
|
<div
|
|
@click="
|
|
selectToken0(item);
|
|
close();
|
|
"
|
|
class="cursor-pointer rounded-sm flex items-center p-1.5 bg-[#F6F7F9] border border-transparent hover:border-primary-blue-dark"
|
|
>
|
|
<icon-currency
|
|
:currency="item.symbol.toLowerCase()"
|
|
class="mr-1.5 w-6 h-6"
|
|
/>
|
|
|
|
<span
|
|
class="text-primary-blue-dark text-sm font-semibold"
|
|
>
|
|
{{ item.symbol }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</List>
|
|
</DropdownMenu>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
<div
|
|
class="flex justify-between items-center text-primary-gray font-medium"
|
|
>
|
|
<div>~ {{ formatUsd(token0.amountUSD) }}</div>
|
|
|
|
<div>
|
|
Balance: {{ formatDecimal(token0.balance) }} {{ token0.symbol }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute -bottom-1 border border-grey-dark/[0.15] border-b-0 inset-x-0 mx-auto rounded-t-full bg-white w-10 h-5 shadow-sm"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
class="shadow-sm relative border border-grey-dark/[0.15] rounded-lg p-4"
|
|
>
|
|
<div class="flex justify-between items-center mb-3">
|
|
<div>
|
|
<input
|
|
type="text"
|
|
v-model.trim="token1.amount"
|
|
readonly
|
|
inputmode="decimal"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
pattern="^[0-9]*[.,]?[0-9]*$"
|
|
placeholder="0.0"
|
|
minlength="1"
|
|
maxlength="79"
|
|
spellcheck="false"
|
|
:size="
|
|
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"
|
|
/>
|
|
<span class="text-primary-gray text-lg font-semibold">{{
|
|
token1.symbol
|
|
}}</span>
|
|
</div>
|
|
|
|
<Dropdown>
|
|
<template #trigger="{ toggle }">
|
|
<button
|
|
class="flex items-center hover:bg-primary-blue-dark/10 p-1.5 rounded"
|
|
@click="toggle"
|
|
>
|
|
<svg
|
|
width="9"
|
|
height="6"
|
|
viewBox="0 0 9 6"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.5 4.5L3.89896 5.10104C4.2309 5.43299 4.76909 5.43299 5.10104 5.10104L4.5 4.5ZM8.60104 1.60104C8.93299 1.2691 8.93299 0.730905 8.60104 0.398959C8.2691 0.0670136 7.7309 0.0670135 7.39896 0.398959L8.60104 1.60104ZM1.60104 0.398959C1.26909 0.0670133 0.730905 0.0670132 0.398959 0.398959C0.0670138 0.730905 0.0670137 1.26909 0.398959 1.60104L1.60104 0.398959ZM5.10104 5.10104L8.60104 1.60104L7.39896 0.398959L3.89896 3.89896L5.10104 5.10104ZM5.10104 3.89896L1.60104 0.398959L0.398959 1.60104L3.89896 5.10104L5.10104 3.89896Z"
|
|
fill="#3F75FF"
|
|
/>
|
|
</svg>
|
|
|
|
<icon-currency
|
|
:currency="token1.symbol.toLowerCase()"
|
|
class="ml-2.5 w-9 h-9"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #menu="{ close }">
|
|
<DropdownMenu
|
|
class="z-10 bg-white w-32 rounded border border-[#CFDCFF] drop-shadow-sm pt-0 pb-0"
|
|
align="right"
|
|
>
|
|
<List
|
|
:items="allTokens.filter(t => t.symbol != token0.symbol)"
|
|
class="p-1.5"
|
|
items-wrapper-classes="space-y-2 overflow-y-scroll max-h-[200px]"
|
|
>
|
|
<template v-slot:default="{ item }">
|
|
<div
|
|
@click="
|
|
selectToken1(item);
|
|
close();
|
|
"
|
|
class="cursor-pointer rounded-sm flex items-center p-1.5 bg-[#F6F7F9] border border-transparent hover:border-primary-blue-dark"
|
|
>
|
|
<icon-currency
|
|
:currency="item.symbol.toLowerCase()"
|
|
class="mr-1.5 w-6 h-6"
|
|
/>
|
|
|
|
<span
|
|
class="text-primary-blue-dark text-sm font-semibold"
|
|
>
|
|
{{ item.symbol }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</List>
|
|
</DropdownMenu>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
<div
|
|
class="flex justify-between items-center text-primary-gray font-medium"
|
|
>
|
|
<div>
|
|
~ {{ formatUsd(token1.amountUSD) }}
|
|
<span v-if="slippagePerc" class="text-green-pure"
|
|
>({{ formatPercent(slippagePerc) }})</span
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
Balance: {{ formatDecimal(token1.balance) }} {{ token1.symbol }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="shadow-sm absolute -top-1 border border-grey-dark/[0.15] border-t-0 inset-x-0 mx-auto rounded-b-full bg-white w-10 h-5"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="absolute inset-y-0 my-auto h-2 w-full bg-white"></div>
|
|
<div
|
|
@click="switchTokens"
|
|
class="cursor-pointer absolute inset-0 m-auto h-[30px] w-[30px] bg-white border border-[#D1D7E1] rounded-full flex items-center justify-center drop-shadow-sm"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M2.25333 6.0701C2.26024 6.14317 2.27865 6.21659 2.30753 6.2869C2.42378 6.5674 2.69665 6.74979 3.0004 6.74979H4.5004L4.5004 14.9998H6.0004L6.0004 6.74979H7.5004C7.8034 6.74979 8.07702 6.5674 8.19327 6.2869C8.23152 6.1939 8.2504 6.09654 8.2504 5.99979C8.2504 5.80479 8.17392 5.61277 8.03067 5.46952L5.78067 3.21952C5.48742 2.92627 5.01263 2.92627 4.72013 3.21952L2.47013 5.46952C2.30925 5.63039 2.23259 5.8509 2.25333 6.0701ZM9.75333 11.9295C9.73259 12.1487 9.80925 12.3692 9.97012 12.5301L12.2201 14.7801C12.5126 15.0733 12.9874 15.0733 13.2807 14.7801L15.5307 12.5301C15.6739 12.3868 15.7504 12.1948 15.7504 11.9998C15.7504 11.903 15.7315 11.8057 15.6933 11.7127C15.577 11.4322 15.3034 11.2498 15.0004 11.2498H13.5004L13.5004 2.99979H12.0004L12.0004 11.2498H10.5004C10.1974 11.2498 9.92378 11.4322 9.80753 11.7127C9.77865 11.783 9.76024 11.8564 9.75333 11.9295Z"
|
|
fill="#3F75FF"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<div class="text-[#A5AEC5] text-sm font-medium">
|
|
Slippage tolerance
|
|
</div>
|
|
|
|
<div>
|
|
<toggle-button
|
|
:checked="customSlippage"
|
|
@change="customSlippage = $event"
|
|
label="Custom"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between space-x-4">
|
|
<div class="w-1/2">
|
|
<div
|
|
v-if="customSlippage"
|
|
class="text-sm font-medium flex text-center items-center bg-primary-gray/[.15] text-primary-gray w-full p-1 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
|
|
>
|
|
<span class="w-1/4 py-1.5">0.1%</span>
|
|
<span class="w-1/4 py-1.5">0.5%</span>
|
|
<span class="w-1/4 py-1.5">1%</span>
|
|
<span class="w-1/4 py-1.5">3%</span>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="text-sm font-medium flex items-center border-primary-blue-dark text-primary-gray w-full p-1 rounded-[6px] border "
|
|
>
|
|
<button
|
|
class="w-1/4 py-1.5"
|
|
@click="slippage = '0.1'"
|
|
:class="{
|
|
'rounded bg-primary-blue-dark text-white': slippage === '0.1'
|
|
}"
|
|
>
|
|
0.1%
|
|
</button>
|
|
|
|
<button
|
|
class="w-1/4 py-1.5"
|
|
@click="slippage = '0.5'"
|
|
:class="{
|
|
'rounded bg-primary-blue-dark text-white': slippage === '0.5'
|
|
}"
|
|
>
|
|
0.5%
|
|
</button>
|
|
|
|
<button
|
|
class="w-1/4 py-1.5"
|
|
@click="slippage = '1'"
|
|
:class="{
|
|
'rounded bg-primary-blue-dark text-white': slippage === '1'
|
|
}"
|
|
>
|
|
1%
|
|
</button>
|
|
|
|
<button
|
|
class="w-1/4 py-1.5"
|
|
@click="slippage = '3'"
|
|
:class="{
|
|
'rounded bg-primary-blue-dark text-white': slippage === '3'
|
|
}"
|
|
>
|
|
3%
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<input-percent
|
|
ref="customPercentInput"
|
|
right
|
|
max="10"
|
|
v-model="customSlippageValue"
|
|
placeholder="Custom"
|
|
:disabled="!customSlippage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-7">
|
|
<ButtonCTA
|
|
@click="swap"
|
|
:loading="swapping"
|
|
:disabled="swapping"
|
|
class="px-8 h-16 w-full"
|
|
>Swap</ButtonCTA
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed, defineComponent, onMounted, reactive, ref, watch } from '@nuxtjs/composition-api'
|
|
import { useNetwork } from '~/composables/useNetwork'
|
|
import tokens from '~/constant/tokens'
|
|
import Button from '../Button.vue'
|
|
import Dropdown from '../common/input/Dropdown.vue'
|
|
import InputPercent from '../common/input/InputPercent.vue'
|
|
import ToggleButton from '../common/input/ToggleButton.vue'
|
|
import List from '../common/list/List.vue'
|
|
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 },
|
|
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: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
|
|
symbol: 'ETH',
|
|
amount: '0',
|
|
amountUSD: computed(() => (prices[activeNetworkId.value][token0.address] * token0.amount) || '0'),
|
|
balance: computed(() => getBalanceByKey(token0.symbol)),
|
|
decimals: 18,
|
|
|
|
})
|
|
|
|
const token1 = reactive({
|
|
address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
|
|
symbol: 'DAI',
|
|
amount: props.token1Amount,
|
|
amountUSD: computed(() => (prices[activeNetworkId.value][token1.address] * token1.amount) || '0'),
|
|
balance: computed(() => getBalanceByKey(token1.symbol)),
|
|
decimals: 18,
|
|
})
|
|
|
|
onMounted(() => {
|
|
selectToken1(allTokens.value[1])
|
|
})
|
|
|
|
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")
|
|
|
|
const switchTokens = () => {
|
|
const token0Raw = JSON.parse(JSON.stringify(token0))
|
|
const token1Raw = JSON.parse(JSON.stringify(token1))
|
|
|
|
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) => {
|
|
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 })
|
|
watch(activeNetworkId, () => {
|
|
selectToken0(allTokens.value.find(token => token.symbol === 'ETH'))
|
|
selectToken1(allTokens.value.find(token => token.symbol === 'DAI'))
|
|
}, { 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,
|
|
selectToken0,
|
|
token1,
|
|
selectToken1,
|
|
switchTokens,
|
|
allTokens,
|
|
customSlippageValue,
|
|
slippage,
|
|
swap,
|
|
swapping,
|
|
}
|
|
},
|
|
})
|
|
</script>
|