add ability to swap native tokens in v2 and v3

Author: skutcher

frontend/Cargo.toml

@@ -16,6 +16,7 @@ log = "0.4"
 console_log = "1.0"
 alloy = {version = "1.1", default-features = false }
 dioxus-primitives = { git = "https://github.com/DioxusLabs/components", version = "0.0.1", default-features = false }
+enum-table = "2.1"
 
 [profile]
 

frontend/src/main.rs

@@ -1,4 +1,5 @@
 mod app;
+mod config;
 mod components;
 mod metamask;
 mod vanillaswap;

frontend/src/metamask.js

@@ -27,7 +27,9 @@ const wrapperRouterAbi = [
 // Uniswap V2
 const uniswapV2RouterAbi = [
     "function factory() view returns (address)",
-    "function swapExactTokensForTokensSupportingFeeOnTransferTokens(uint256 amountIn, uint256 amountOutMin, address[] calldata path, address to, uint256 deadline) returns (uint256[])"
+    "function swapExactTokensForTokensSupportingFeeOnTransferTokens(uint256 amountIn, uint256 amountOutMin, address[] calldata path, address to, uint256 deadline) returns (uint256[])",
+    "function swapExactTokensForETHSupportingFeeOnTransferTokens(uint256 amountIn, uint256 amountOutMin, address[] calldata path, address to, uint256 deadline)",
+    "function swapExactETHForTokensSupportingFeeOnTransferTokens(uint256 amountOutMin, address[] calldata path, address to, uint256 deadline) payable"
 ];
 const uniswapV2FactoryAbi = [
     "function allPairsLength() view returns (uint256)",
@@ -43,10 +45,12 @@ const uniswapV2PairAbi = [
 const uniswapV3PairAbi = [ "function slot0() view returns (uint160 sqrtPriceX96, int24, uint16, uint16, uint16, uint8, bool)", "function liquidity() view returns (uint128)" ];
 
 const uniswapV3RouterAbi = [
-  // exactInputSingle params in struct form
-    //"function exactInputSingle((address,address,uint24,address,uint256,uint256,uint160)) external payable returns (uint256 amountOut)",
     "function exactInput((bytes path,address recipient,uint256 amountIn,uint256 amountOutMinimum)) external payable returns (uint256 amountOut)"
 ];
+const wethAbi = [
+  "function withdraw(uint256 wad) external",
+  "function balanceOf(address owner) view returns (uint256)"
+];
 
 /**
  * helper JSON stringify that converts BigInt to string
@@ -102,14 +106,20 @@ export function js_on_accounts_changed(callback) {
 }
 
 // ERC20
-export async function js_get_token_balance(user, token) {
+export async function js_get_token_balance(user, token, isNative) {
     try {
         if (!window.ethereum) throw new Error("MetaMask not installed");
         await window.ethereum.request({ method: 'eth_requestAccounts' });
         let provider = new ethers.BrowserProvider(window.ethereum);
 
-        const erc20 = new ethers.Contract(token, erc20Abi, provider);
-        const [bal, decimals] = await Promise.all([erc20.balanceOf(user), 18]);
+        let bal, decimals;
+
+        if (isNative) {
+            [bal, decimals] = await Promise.all([provider.getBalance(user), 18]);
+        }else{
+            const erc20 = new ethers.Contract(token, erc20Abi, provider);
+            [bal, decimals] = await Promise.all([erc20.balanceOf(user), erc20.decimals()]);
+        }
         return {
             ok: true,
             value: JSON.stringify(ethers.formatUnits(bal, decimals))
@@ -337,37 +347,61 @@ export async function js_get_uniswap_v2_pairs(routerAddr) {
     }
 }
 
-export async function js_uniswap_v2_swap_tokens(tokenIn, tokenOut, amountIn, amountOutMin, routerAddress) {
+export async function js_uniswap_v2_swap_tokens(tokenIn, tokenOut, amountIn, amountOutMin, routerAddress, isNativeIn, isNativeOut) {
     try {
         if (!window.ethereum) throw new Error("MetaMask not installed");
         await window.ethereum.request({ method: 'eth_requestAccounts' });
         let provider = new ethers.BrowserProvider(window.ethereum);
         let signer = await provider.getSigner();
 
-
         const router = new ethers.Contract(routerAddress, uniswapV2RouterAbi, signer);
 
         const tokenInContract = new ethers.Contract(tokenIn, erc20Abi, signer);
         const decimals = await tokenInContract.decimals();
-        const amount_in_u256 = amountIn;//thers.parseUnits(amountIn,decimals);
-
-        // Approve
-        const allowance = await tokenInContract.allowance(signer, routerAddress);
-        if (allowance < amount_in_u256){
-            const approve_tx = await tokenInContract.approve(routerAddress, amount_in_u256);
-            await approve_tx.wait();
-        }
+        const amount_in_u256 = amountIn;
 
         const path = [tokenIn, tokenOut];
         const deadline = Math.floor(Date.now() / 1000) + 60 * 10;
 
-        const tx = await router.swapExactTokensForTokensSupportingFeeOnTransferTokens(
-            amountIn,
-            amountOutMin,
-            path,
-            await signer.getAddress(),
-            deadline,
-        );
+        let tx;
+        if (isNativeIn){
+            tx = await router.swapExactETHForTokensSupportingFeeOnTransferTokens(
+                amountOutMin,
+                path,
+                await signer.getAddress(),
+                deadline,
+                {
+                    value: amountIn
+                }
+            );
+        }else{
+            // Approve
+            const allowance = await tokenInContract.allowance(signer, routerAddress);
+            if (allowance < amount_in_u256){
+                const approve_tx = await tokenInContract.approve(routerAddress, amount_in_u256);
+                await approve_tx.wait();
+            }
+
+
+            if (isNativeOut){
+                tx = await router.swapExactTokensForETHSupportingFeeOnTransferTokens(
+                    amountIn,
+                    amountOutMin,
+                    path,
+                    await signer.getAddress(),
+                    deadline,
+                );
+            }else{
+                tx = await router.swapExactTokensForTokensSupportingFeeOnTransferTokens(
+                    amountIn,
+                    amountOutMin,
+                    path,
+                    await signer.getAddress(),
+                    deadline,
+                );
+            }
+
+        }
         const receipt = await tx.wait();
 
         return {
@@ -428,7 +462,7 @@ function encodePath(tokenIn, fee, tokenOut) {
     ]);
 }
 
-export async function js_uniswap_v3_swap_tokens(tokenIn, tokenOut, amountIn, amountOutMin, fee, routerAddress) {
+export async function js_uniswap_v3_swap_tokens(tokenIn, tokenOut, amountIn, amountOutMin, fee, routerAddress, isNativeIn, isNativeOut) {
     try {
         if (!window.ethereum) throw new Error("MetaMask not installed");
         await window.ethereum.request({ method: 'eth_requestAccounts' });
@@ -450,17 +484,23 @@ export async function js_uniswap_v3_swap_tokens(tokenIn, tokenOut, amountIn, amo
         }
 
         const path = encodePath(tokenIn,fee,tokenOut);
-        console.log("Path len ",path.length);
         const recipient = await signer.getAddress();
         const params = {
             path:path,
             recipient:recipient,
             amountIn:amount_in_u256,
             amountOutMinimum: amountOutMin
         };
-        const tx = await router.exactInput(params,{value: 0n});
+        const tx = await router.exactInput(params,isNativeIn ? { value: amountIn } : {});
         const receipt = await tx.wait();
-
+        if (isNativeOut) {
+            const wethContract = new ethers.Contract(tokenOut, wethAbi, signer);
+            const balance = await wethContract.balanceOf(recipient);
+            if (balance > 0n) {
+                const unwrapTx = await wethContract.withdraw(balance);
+                await unwrapTx.wait();
+            }
+        }
         return {
             ok: true,
             value: JSON.stringify(`${receipt.hash}`)

frontend/src/metamask.rs

@@ -15,7 +15,7 @@ extern "C" {
     async fn js_connect_metamask() -> JsValue;
     pub fn js_on_chain_changed(callback: &Closure<dyn FnMut(u32)>);
     pub fn js_on_accounts_changed(callback: &Closure<dyn FnMut(Vec<JsValue>)>);
-    async fn js_get_token_balance(user: &str, token: &str) -> JsValue;
+    async fn js_get_token_balance(user: &str, token: &str, is_native: bool) -> JsValue;
 }
 
 pub fn js_parse<T: DeserializeOwned>(js: JsValue) -> Result<T, String> {
@@ -53,6 +53,6 @@ pub async fn connect_metamask()  -> Result<MetamaskInfo, Box<dyn Error>>{
         js_try!(js_connect_metamask() => MetamaskInfo)
 }
 
-pub async fn get_token_balance(user: &str, token: &str) -> Result<String,Box<dyn Error>>{
-    js_try!(js_get_token_balance(user, token) => String)
+pub async fn get_token_balance(user: &str, token: &str, is_native: bool) -> Result<String,Box<dyn Error>>{
+    js_try!(js_get_token_balance(user, token, is_native) => String)
 }

frontend/src/metamask/uniswap_v2.rs

@@ -13,7 +13,7 @@ extern "C" {
     // uniswap v2
     async fn js_get_uniswap_v2_pairs(router_address: &str) -> JsValue;
     async fn js_uniswap_v2_swap_tokens(token_in: &str, token_out: &str, amount_in: &str,
-                            amount_out_min: &str, router_address: &str) -> JsValue;
+                            amount_out_min: &str, router_address: &str, is_native_in: bool, is_native_out: bool) -> JsValue;
 }
 
 
@@ -43,6 +43,8 @@ pub async fn uniswap_v2_swap_tokens(
     amount_in: &str,
     amount_out_min: &str,
     router_address: &str,
+    is_native_in: bool,
+    is_native_out: bool,
 ) -> Result<String, String> {
-    js_try!(js_uniswap_v2_swap_tokens(token_in,token_out,amount_in,amount_out_min,router_address) => String)
+    js_try!(js_uniswap_v2_swap_tokens(token_in,token_out,amount_in,amount_out_min,router_address, is_native_in, is_native_out) => String)
 }

frontend/src/metamask/uniswap_v3.rs

@@ -13,7 +13,7 @@ extern "C" {
     //uniswap v3
     async fn js_get_uniswap_v3_pool_states(pools: Vec<JsValue>) -> JsValue;
     async fn js_uniswap_v3_swap_tokens(token_in: &str, token_out: &str, amount_in: &str,
-                            amount_out_min: &str, fee: &str, router_address: &str) -> JsValue;
+                            amount_out_min: &str, fee: &str, router_address: &str, is_native_in: bool, is_native_out: bool) -> JsValue;
 }
 
 
@@ -40,6 +40,8 @@ pub async fn uniswap_v3_swap_tokens(
     amount_out_min: &str,
     fee: &str,
     router_address: &str,
+    is_native_in: bool,
+    is_native_out: bool,
 ) -> Result<String, String> {
-    js_try!(js_uniswap_v3_swap_tokens(token_in,token_out,amount_in,amount_out_min,fee,router_address) => String)
+    js_try!(js_uniswap_v3_swap_tokens(token_in,token_out,amount_in,amount_out_min,fee,router_address, is_native_in, is_native_out) => String)
 }

frontend/src/vanillaswap/swap_v2.rs

@@ -6,12 +6,13 @@ use crate::metamask::{
     get_token_balance,
     uniswap_v2::uniswap_v2_swap_tokens
 };
-use crate::wrapper::TokenInfo;
+use crate::wrapper::{TokenInfo, TokenType};
 use crate::wallet_context::use_wallet;
 use super::v2::{approx_amount_out, unique_pool_tokens, use_v2_pools};
 
 #[component]
 pub fn PoolV2Swap() -> Element {
+    let wallet = use_wallet();
     let pools = use_v2_pools();
 
     let mut show_zero_liq = use_signal(|| false);
@@ -33,7 +34,6 @@ pub fn PoolV2Swap() -> Element {
         spawn_local(async move {
             calculating.set(true);
             let new_amount = approx_amount_out(&amount_in.read(),&token_a.read(), &token_b.read(), &pools.pairs.read());
-            log::debug!("New Amount out : {}", new_amount);
             amount_out.set(new_amount);
             calculating.set(false);
         });
@@ -47,7 +47,7 @@ pub fn PoolV2Swap() -> Element {
 
         spawn_local(async move {
             if let Some(from_sel) = from_sel
-                && let Ok(bal) = get_token_balance(&(wallet.info)().address, &from_sel.address).await {
+                && let Ok(bal) = get_token_balance(&(wallet.info)().address, &from_sel.address, matches!(from_sel.token_type, TokenType::Native)).await {
                     log::debug!("GetTokenBalance of address {} for token address {} :{:?}",(wallet.info)().address, from_sel.address, bal);
                     balance.set(bal);
                 }
@@ -105,6 +105,8 @@ pub fn PoolV2Swap() -> Element {
                         &amount_in.get_absolute().to_string(),
                         &amount_out_min.to_string(),
                         &(pools.router_address)(),
+                        matches!(a.token_type, TokenType::Native),
+                        matches!(b.token_type, TokenType::Native),
                     ).await {
                         Ok(jsval) => {
                             log::info!("swap ok: {}", jsval);
@@ -123,10 +125,10 @@ pub fn PoolV2Swap() -> Element {
         }
     };
 
-    let from_options = unique_pool_tokens(&None, &pools.pairs.read(), &show_zero_liq.read());
-    let to_options = unique_pool_tokens(&token_a.read(), &pools.pairs.read(), &show_zero_liq.read());
-    let from_selected = token_a.read().as_ref().map(|t| t.address.clone()).unwrap_or_default();
-    let to_selected = token_b.read().as_ref().map(|t| t.address.clone()).unwrap_or_default();
+    let from_options = unique_pool_tokens(&None, &pools.pairs.read(), &show_zero_liq.read(), (wallet.info)().chain_id);
+    let to_options = unique_pool_tokens(&token_a.read(), &pools.pairs.read(), &show_zero_liq.read(), (wallet.info)().chain_id);
+    let from_selected = token_a.read().as_ref().map(|t| serde_json::to_string(&t).unwrap()).unwrap_or_default();
+    let to_selected = token_b.read().as_ref().map(|t| serde_json::to_string(&t).unwrap()).unwrap_or_default();
     // UI rendering
     rsx! {
         div { class: "p-8 mt-12 glass w-full max-w-4xl flex flex-col gap-6 items-stretch flex-col-sm",
@@ -156,16 +158,17 @@ pub fn PoolV2Swap() -> Element {
                               class: "flex-1 bg-transparent text-white text-xl font-semibold focus:outline-none",
                               value: "{from_selected}",
                               onchange: move |e| {
-                                  log::debug!("Value {}",  e.value());
-                                  if let Some(tok) = from_options.iter().find(|t| t.address == e.value()) {
-                                      token_a.set(Some(tok.clone()));
-                                      // Reset token B, because A changed
-                                      token_b.set(None);
+                                  if let Ok(sel) = serde_json::from_str::<TokenInfo>(&e.value()) {
+                                      if let Some(tok) = from_options.iter().find(|t| **t == sel) {
+                                          token_a.set(Some(tok.clone()));
+                                          // Reset token B, because A changed
+                                          token_b.set(None);
+                                      }
                                   }
                               },
                               option { value: "", "Select token A" }
                               { from_options.iter().map(|t| rsx!(
-                                  option { value: "{t.address}", "{t.symbol}" }
+                                  option { value: "{serde_json::to_string(&t).unwrap()}", "{t.symbol}" }
                               )) }
                           }
                     }
@@ -204,14 +207,15 @@ pub fn PoolV2Swap() -> Element {
                               class: "flex-1 bg-transparent text-white text-xl font-semibold focus:outline-none",
                               value: "{to_selected}",
                               onchange: move |e| {
-                                  let sym = e.value();
-                                  if let Some(tok) = to_options.iter().find(|t| t.address == e.value()) {
-                                      token_b.set(Some(tok.clone()));
+                                  if let Ok(sel) = serde_json::from_str::<TokenInfo>(&e.value()) {
+                                      if let Some(tok) = to_options.iter().find(|t| **t == sel) {
+                                          token_b.set(Some(tok.clone()));
+                                      }
                                   }
                               },
                               option { value: "", "Select token B" }
                               { to_options.iter().map(|t| rsx!(
-                                  option { value: "{t.address}", "{t.symbol}" }
+                                  option { value: "{serde_json::to_string(&t).unwrap()}", "{t.symbol}" }
                               )) }
                           }
                     }