From 00bec1a41fe06cc42758c038be01fb736584b0fd Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 16 Aug 2021 01:17:42 +0300 Subject: [PATCH 01/12] Token Swap Component --- assets/icons/1inch.svg | 26 ++ components/common/input/InputPercent.vue | 85 +++++ components/common/input/ToggleButton.vue | 4 +- components/common/list/List.vue | 12 +- components/common/menu/Menu.vue | 2 +- components/swap/SwapCard.vue | 398 +++++++++++++++++++++++ composables/swap/use1InchSwap.ts | 7 + pages/index.vue | 15 + pages/mainnet/1inch.vue | 51 +++ pages/polygon/1inch.vue | 51 +++ 10 files changed, 647 insertions(+), 4 deletions(-) create mode 100644 assets/icons/1inch.svg create mode 100644 components/common/input/InputPercent.vue create mode 100644 components/swap/SwapCard.vue create mode 100644 composables/swap/use1InchSwap.ts create mode 100644 pages/mainnet/1inch.vue create mode 100644 pages/polygon/1inch.vue diff --git a/assets/icons/1inch.svg b/assets/icons/1inch.svg new file mode 100644 index 0000000..ffc89e0 --- /dev/null +++ b/assets/icons/1inch.svg @@ -0,0 +1,26 @@ + + + + + + + + + + \ No newline at end of file diff --git a/components/common/input/InputPercent.vue b/components/common/input/InputPercent.vue new file mode 100644 index 0000000..278a03b --- /dev/null +++ b/components/common/input/InputPercent.vue @@ -0,0 +1,85 @@ + + + diff --git a/components/common/input/ToggleButton.vue b/components/common/input/ToggleButton.vue index f4bfff3..687a731 100644 --- a/components/common/input/ToggleButton.vue +++ b/components/common/input/ToggleButton.vue @@ -11,9 +11,9 @@ @click="toggle" >
diff --git a/components/common/list/List.vue b/components/common/list/List.vue index d0aada6..5c74ad2 100644 --- a/components/common/list/List.vue +++ b/components/common/list/List.vue @@ -5,7 +5,13 @@
-
+
@@ -27,6 +33,10 @@ export default defineComponent({ type: Array, default: () => [], }, + itemsWrapperClasses: { + type: String, + default: '' + }, divided: { type: Boolean, default: false, diff --git a/components/common/menu/Menu.vue b/components/common/menu/Menu.vue index 1b74af4..67a64f1 100644 --- a/components/common/menu/Menu.vue +++ b/components/common/menu/Menu.vue @@ -14,7 +14,7 @@
diff --git a/components/swap/SwapCard.vue b/components/swap/SwapCard.vue new file mode 100644 index 0000000..3aae842 --- /dev/null +++ b/components/swap/SwapCard.vue @@ -0,0 +1,398 @@ + + + diff --git a/composables/swap/use1InchSwap.ts b/composables/swap/use1InchSwap.ts new file mode 100644 index 0000000..6fc8d21 --- /dev/null +++ b/composables/swap/use1InchSwap.ts @@ -0,0 +1,7 @@ +export const use1InchSwap = () => { + const swap = ({ buyAddress, sellAddress, sellAmount, unitAmount }) => {}; + + return { + swap + }; +}; diff --git a/pages/index.vue b/pages/index.vue index 1069ee5..e6d1db1 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -35,6 +35,7 @@ import { useNetwork } from "~/composables/useNetwork"; import AaveIcon from "~/assets/icons/aave.svg?inline"; import CompoundIcon from "~/assets/icons/compound.svg?inline"; import MakerIcon from "~/assets/icons/makerdao.svg?inline"; +import OneInchIcon from "~/assets/icons/1inch.svg?inline"; const appsPerNetwork = { mainnet: [ @@ -58,6 +59,13 @@ const appsPerNetwork = { name: "MakerDAO", url: "/mainnet/maker", description: "Collateralized Debt" + }, + { + id: "1inch", + icon: OneInchIcon, + name: "1inch", + url: "/mainnet/1inch", + description: "DEX aggregator with the best prices on the market" } ], polygon: [ @@ -67,6 +75,13 @@ const appsPerNetwork = { name: "Aave v2", url: "/polygon/aave-v2", description: "Lend and borrow straight from your Gnosis Safe" + }, + { + id: "1inch", + icon: OneInchIcon, + name: "1inch", + url: "/polygon/1inch", + description: "DEX aggregator with the best prices on the market" } ] }; diff --git a/pages/mainnet/1inch.vue b/pages/mainnet/1inch.vue new file mode 100644 index 0000000..9286e96 --- /dev/null +++ b/pages/mainnet/1inch.vue @@ -0,0 +1,51 @@ + + + diff --git a/pages/polygon/1inch.vue b/pages/polygon/1inch.vue new file mode 100644 index 0000000..eaf9689 --- /dev/null +++ b/pages/polygon/1inch.vue @@ -0,0 +1,51 @@ + + + From 9c9797ba8e4adbccc3b28cc3879a45f2436ce120 Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 16 Aug 2021 01:25:55 +0300 Subject: [PATCH 02/12] Update SwapCard.vue --- components/swap/SwapCard.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/swap/SwapCard.vue b/components/swap/SwapCard.vue index 3aae842..6514fb1 100644 --- a/components/swap/SwapCard.vue +++ b/components/swap/SwapCard.vue @@ -6,10 +6,11 @@ class="shadow-sm relative border border-grey-dark/[0.15] rounded-lg p-4 mb-2" >
-
+
tokens[activeNetworkId.value].allTokens) + const token0Input = ref() + const token0 = reactive({ address: '', symbol: 'ETH', @@ -383,6 +386,7 @@ export default defineComponent({ } return { + token0Input, customSlippage, token0, selectToken0, From 387ba775587b598c11b09088f10f855e514bef55 Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 16 Aug 2021 01:29:35 +0300 Subject: [PATCH 03/12] Update SwapCard.vue --- components/swap/SwapCard.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/swap/SwapCard.vue b/components/swap/SwapCard.vue index 6514fb1..3a129f2 100644 --- a/components/swap/SwapCard.vue +++ b/components/swap/SwapCard.vue @@ -250,12 +250,12 @@
- 0.1% - 0.5% - 1% - 3% + 0.1% + 0.5% + 1% + 3%
-
~ $ 9,321.69 (0.188%)
+
+ ~ {{ formatUsd(token1.amountUSD) }} + ({{ formatPercent(slippagePerc) }}) +
-
Balance: 85 {{ token1.symbol }}
+
+ Balance: {{ formatDecimal(token1.balance) }} {{ token1.symbol }} +
-
- 1 DAI = 0.0004272 ETH +
+ 1 {{ token1.symbol }} = + {{ formatDecimal(token0.amount / token1.amount, 7) }} + {{ token0.symbol }}
@@ -316,13 +335,19 @@
- Swap + Swap
diff --git a/yarn.lock b/yarn.lock index 87924f9..b5275a2 100644 --- a/yarn.lock +++ b/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" From 95002159764fed5b8ef900682da3151e8bd6f6ac Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 16 Aug 2021 19:19:29 +0300 Subject: [PATCH 05/12] fixes --- pages/mainnet/1inch.vue | 4 +- pages/polygon/1inch.vue | 81 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 80 insertions(+), 5 deletions(-) diff --git a/pages/mainnet/1inch.vue b/pages/mainnet/1inch.vue index c0724f4..9b12260 100644 --- a/pages/mainnet/1inch.vue +++ b/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, diff --git a/pages/polygon/1inch.vue b/pages/polygon/1inch.vue index eaf9689..9b12260 100644 --- a/pages/polygon/1inch.vue +++ b/pages/polygon/1inch.vue @@ -26,17 +26,34 @@
-
- +
+
From e1fbd73e8b3d02cf52c5deaa0c98798064978030 Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 16 Aug 2021 19:20:39 +0300 Subject: [PATCH 06/12] wip --- pages/{mainnet => }/1inch.vue | 0 pages/index.vue | 8 +-- pages/polygon/1inch.vue | 124 ---------------------------------- 3 files changed, 4 insertions(+), 128 deletions(-) rename pages/{mainnet => }/1inch.vue (100%) delete mode 100644 pages/polygon/1inch.vue diff --git a/pages/mainnet/1inch.vue b/pages/1inch.vue similarity index 100% rename from pages/mainnet/1inch.vue rename to pages/1inch.vue diff --git a/pages/index.vue b/pages/index.vue index e6d1db1..ff0288c 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -64,8 +64,8 @@ const appsPerNetwork = { id: "1inch", icon: OneInchIcon, name: "1inch", - url: "/mainnet/1inch", - description: "DEX aggregator with the best prices on the market" + url: "/1inch", + description: "DEX Aggregator" } ], polygon: [ @@ -80,8 +80,8 @@ const appsPerNetwork = { id: "1inch", icon: OneInchIcon, name: "1inch", - url: "/polygon/1inch", - description: "DEX aggregator with the best prices on the market" + url: "/1inch", + description: "DEX Aggregator" } ] }; diff --git a/pages/polygon/1inch.vue b/pages/polygon/1inch.vue deleted file mode 100644 index 9b12260..0000000 --- a/pages/polygon/1inch.vue +++ /dev/null @@ -1,124 +0,0 @@ - - - From 1179aeb007676374f9c1053637a75f0b0d1cdb3b Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 16 Aug 2021 21:33:56 +0300 Subject: [PATCH 07/12] fixes --- components/swap/SwapCard.vue | 11 +++++++---- composables/useNetwork.ts | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/components/swap/SwapCard.vue b/components/swap/SwapCard.vue index 0ea6015..a00aca2 100644 --- a/components/swap/SwapCard.vue +++ b/components/swap/SwapCard.vue @@ -347,7 +347,7 @@