OpenOcean API Integration

next.config.js

@@ -1,3 +1,7 @@
+const withImages = require('next-images');
+module.exports = withImages({
+    esModule: true
+});
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,

package.json

@@ -8,6 +8,16 @@
     "start": "next start",
     "lint": "next lint"
   },
+  "transform": {
+    "^.+\\.svg$": "<rootDir>/svgTransform.js",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "svg"
+    ]
+  },
   "dependencies": {
     "@apollo/client": "^3.7.3",
     "@headlessui/react": "^1.7.3",
@@ -16,8 +26,6 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@rainbow-me/rainbowkit": "^0.8.1",
-    "@swing.xyz/sdk": "^0.47.7",
-    "@usedapp/core": "^1.2.2",
     "@vercel/analytics": "^1.0.1",
     "@vercel/speed-insights": "^1.0.1",
     "alchemy-sdk": "^3.1.0",
@@ -33,6 +41,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.314.0",
     "next": "12.3.1",
+    "next-images": "^1.8.5",
     "next-themes": "^0.2.1",
     "rc-toastr": "^1.3.4",
     "react": "18.2.0",
@@ -45,10 +54,12 @@
     "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "^1.3.1",
     "tiny-variant": "^0.0.0",
+    "viem": "^2.4.0",
     "wagmi": "^0.9.4",
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/jest": "^29.5.1",
     "@types/react": "18.0.28",
     "@types/react-dom": "^18.0.11",

src/components/Buttons/LimitSwapButton.tsx

@@ -36,6 +36,7 @@ export default function LimitSwapButton({
     setNeedsRefetch,
     setNeedsAllowanceIn,
     setNeedsBalanceIn,
+    setNeedsBalanceOut,
     setNeedsSnapshot,
     setNeedsPosRefetch,
     tokenIn,
@@ -44,6 +45,7 @@ export default function LimitSwapButton({
     state.setNeedsRefetch,
     state.setNeedsAllowanceIn,
     state.setNeedsBalanceIn,
+    state.setNeedsBalanceOut,
     state.setNeedsSnapshot,
     state.setNeedsPosRefetch,
     state.tokenIn,
@@ -98,8 +100,9 @@ export default function LimitSwapButton({
       resetAfterSwap();
       setNeedsAllowanceIn(true);
       setNeedsBalanceIn(true);
-      setNeedsSnapshot(true);
+      setNeedsBalanceOut(true);
       setTimeout(() => {
+        setNeedsSnapshot(true);
         setNeedsRefetch(true);
         setNeedsPosRefetch(true);
       }, 2500);

src/components/Buttons/SwapRouterApproveButton.tsx

@@ -54,8 +54,6 @@ export default function SwapRouterApproveButton({
 
   const { data, isSuccess, write } = useContractWrite(config);
 
-
-
   const { isLoading } = useWaitForTransaction({
     hash: data?.hash,
     onSuccess() {

src/components/Buttons/SwapRouterButton.tsx

@@ -3,15 +3,19 @@ import {
   useContractWrite,
   useWaitForTransaction,
   useAccount,
+  usePrepareSendTransaction,
+  useSendTransaction,
 } from "wagmi";
 import React, { useState } from "react";
-import { useTradeStore as useRangeLimitStore } from "../../hooks/useTradeStore";
+import { useTradeStore } from "../../hooks/useTradeStore";
 import { poolsharkRouterABI } from "../../abis/evm/poolsharkRouter";
 import { useConfigStore } from "../../hooks/useConfigStore";
 import { getSwapRouterButtonMsgValue } from "../../utils/buttons";
 import { chainProperties } from "../../utils/chains";
 import { toast } from "sonner";
 import { useEffect } from "react";
+import { parseEther } from "ethers/lib/utils.js";
+import { BN_ZERO, ZERO_ADDRESS } from "../../utils/math/constants";
 
 export default function SwapRouterButton({
   disabled,
@@ -34,17 +38,37 @@ export default function SwapRouterButton({
 
   const [toastId, setToastId] = useState(null);
 
-  const [setNeedsAllowanceIn, setNeedsBalanceIn, setNeedsBalanceOut, tradeButton] = useRangeLimitStore(
-    (state) => [state.setNeedsAllowanceIn, state.setNeedsBalanceIn, state.setNeedsBalanceOut, state.tradeButton]
-  );
+  const [
+    setNeedsRefetch,
+    setNeedsAllowanceIn,
+    setNeedsBalanceIn,
+    setNeedsBalanceOut,
+    setNeedsSnapshot,
+    setNeedsPosRefetch,
+    tokenIn,
+    tokenOut,
+    tradeButton,
+    tradeSdk,
+  ] = useTradeStore((state) => [
+    state.setNeedsRefetch,
+    state.setNeedsAllowanceIn,
+    state.setNeedsBalanceIn,
+    state.setNeedsBalanceOut,
+    state.setNeedsSnapshot,
+    state.setNeedsPosRefetch,
+    state.tokenIn,
+    state.tokenOut,
+    state.tradeButton,
+    state.tradeSdk,
+  ]);
 
   const [errorDisplay, setErrorDisplay] = useState(false);
   const [successDisplay, setSuccessDisplay] = useState(false);
 
   const { address } = useAccount();
   const userAddress = address;
 
-  const { config } = usePrepareContractWrite({
+  const { config: psharkConfig } = usePrepareContractWrite({
     address: routerAddress,
     abi: poolsharkRouterABI,
     functionName: "multiSwapSplit",
@@ -59,9 +83,44 @@ export default function SwapRouterButton({
         amountIn
       )
     },
+    onError() {
+      console.log('multi swap error')
+    }
+  });
+
+  const { data: psharkData, write: psharkWrite } = useContractWrite(psharkConfig);
+
+  const { config: openoceanConfig } = usePrepareSendTransaction({
+    request: {
+      to: routerAddress,
+      data: tradeSdk.swapCalldata,
+      value: getSwapRouterButtonMsgValue(
+        tokenInNative,
+        tokenOutNative,
+        amountIn,
+        tradeSdk
+      )
+    },
+    enabled: tradeSdk.enabled && 
+             tradeSdk.swapCalldata != ZERO_ADDRESS &&
+             amountIn.gt(BN_ZERO) && !disabled,
+    onSuccess() {
+      // console.log('success configuring openocean call')
+    },
+    onError() {
+      console.log('open ocean error', getSwapRouterButtonMsgValue(
+        tokenInNative,
+        tokenOutNative,
+        amountIn,
+        tradeSdk
+      ).toString(), amountIn, tradeSdk.swapCalldata != ZERO_ADDRESS)
+    }
   });
 
-  const { data, write } = useContractWrite(config);
+  const { data: openoceanData, sendTransaction: openoceanWrite } = useSendTransaction(openoceanConfig);
+
+  const data = tradeSdk.enabled ? openoceanData : psharkData
+  const write = tradeSdk.enabled ? openoceanWrite : psharkWrite
 
   const { isLoading } = useWaitForTransaction({
     hash: data?.hash,
@@ -77,6 +136,11 @@ export default function SwapRouterButton({
       setNeedsAllowanceIn(true);
       setNeedsBalanceIn(true);
       setNeedsBalanceOut(true);
+      setTimeout(() => {
+        setNeedsSnapshot(true);
+        setNeedsRefetch(true);
+        setNeedsPosRefetch(true);
+      }, 2500);
     },
     onError() {
       toast.error("Your transaction failed",{

src/components/SelectToken.tsx

@@ -10,6 +10,7 @@ import CoinListItem from "./CoinListItem";
 import { useAccount, useToken } from "wagmi";
 import { useConfigStore } from "../hooks/useConfigStore";
 import { defaultTokenLogo, logoMapKey } from "../utils/tokens";
+import { getTradeSdkEnabled } from "../utils/config";
 
 export default function SelectToken(props) {
   const { address } = useAccount();
@@ -59,11 +60,14 @@ export default function SelectToken(props) {
     refetch: refetchTokenInfo,
   } = useToken({
     address: customInput as `0x${string}`,
-    enabled: isAddress(customInput),
+    enabled: isAddress(customInput) && false,
     onSuccess() {
       if (tokenData) setTokenInfo(tokenData);
       else refetchTokenInfo();
     },
+    onError() {
+      console.log('token info error')
+    }
   });
 
   useEffect(() => {
@@ -117,37 +121,75 @@ export default function SelectToken(props) {
 
     if (props.amount != undefined && props.isAmountIn != undefined) {
       if (props.type === "in") {
-        props.setTokenIn(
-          props.tokenOut,
-          {
-            name: coin?.name,
-            address: coin?.address,
-            symbol: coin?.symbol,
-            logoURI: coin?.logoURI,
-            decimals: coin?.decimals,
-            native: coin?.native ?? false,
-            userBalance: coin?.userBalance ?? 0,
-          },
-          props.amount,
-          props.isAmountIn
-        );
+        if (props.from === "MarketSwap") {
+          props.setTokenIn(
+            props.tokenOut,
+            {
+              name: coin?.name,
+              address: coin?.address,
+              symbol: coin?.symbol,
+              logoURI: coin?.logoURI,
+              decimals: coin?.decimals,
+              native: coin?.native ?? false,
+              userBalance: coin?.userBalance ?? 0,
+            },
+            props.amount,
+            props.isAmountIn,
+            getTradeSdkEnabled(networkName, props.tokenOut?.address, coin?.address)
+          );
+        } else {
+          props.setTokenIn(
+            props.tokenOut,
+            {
+              name: coin?.name,
+              address: coin?.address,
+              symbol: coin?.symbol,
+              logoURI: coin?.logoURI,
+              decimals: coin?.decimals,
+              native: coin?.native ?? false,
+              userBalance: coin?.userBalance ?? 0,
+            },
+            props.amount,
+            props.isAmountIn,
+          );
+        }
       } else {
-        props.setTokenOut(
-          props.tokenIn,
-          {
-            name: coin?.name,
-            address: coin?.address,
-            symbol: coin?.symbol,
-            logoURI: coin?.logoURI,
-            decimals: coin?.decimals,
-            native: coin?.native ?? false,
-            userBalance: coin?.userBalance ?? 0,
-          },
-          props.amount,
-          props.isAmountIn
-        );
+        if (props.from === "MarketSwap") {
+          console.log('from market swap')
+          props.setTokenOut(
+            props.tokenIn,
+            {
+              name: coin?.name,
+              address: coin?.address,
+              symbol: coin?.symbol,
+              logoURI: coin?.logoURI,
+              decimals: coin?.decimals,
+              native: coin?.native ?? false,
+              userBalance: coin?.userBalance ?? 0,
+            },
+            props.amount,
+            props.isAmountIn,
+            getTradeSdkEnabled(networkName, props.tokenIn?.address, coin?.address)
+          );
+        } else {
+          props.setTokenOut(
+            props.tokenIn,
+            {
+              name: coin?.name,
+              address: coin?.address,
+              symbol: coin?.symbol,
+              logoURI: coin?.logoURI,
+              decimals: coin?.decimals,
+              native: coin?.native ?? false,
+              userBalance: coin?.userBalance ?? 0,
+            },
+            props.amount,
+            props.isAmountIn,
+          );
+        }
       }
     } else {
+      console.log('else triggered')
       if (props.type === "in") {
         props.setTokenIn(
           props.tokenOut,