Fix Wrap / Unwrap (#1675)

lavamoat/build-webpack/policy.json

@@ -1156,8 +1156,13 @@
         "define": true
       },
       "packages": {
-        "jest>@jest/core>jest-snapshot>@babel/traverse>@babel/generator>@jridgewell/trace-mapping>@jridgewell/sourcemap-codec": true,
-        "webpack>terser-webpack-plugin>@jridgewell/trace-mapping>@jridgewell/resolve-uri": true
+        "jest>@jest/core>jest-snapshot>@babel/traverse>@babel/generator>@jridgewell/trace-mapping>@jridgewell/resolve-uri": true,
+        "jest>@jest/core>jest-snapshot>@babel/traverse>@babel/generator>@jridgewell/trace-mapping>@jridgewell/sourcemap-codec": true
+      }
+    },
+    "jest>@jest/core>jest-snapshot>@babel/traverse>@babel/generator>@jridgewell/trace-mapping>@jridgewell/resolve-uri": {
+      "globals": {
+        "define": true
       }
     },
     "jest>@jest/core>jest-snapshot>@babel/traverse>@babel/generator>@jridgewell/trace-mapping>@jridgewell/sourcemap-codec": {

package.json

@@ -105,7 +105,7 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.3",
     "@rainbow-me/provider": "0.1.1",
-    "@rainbow-me/swaps": "0.23.0",
+    "@rainbow-me/swaps": "0.24.0",
     "@rudderstack/analytics-js-service-worker": "3.0.6",
     "@scure/bip39": "1.2.1",
     "@sentry/browser": "8.15.0",

src/core/types/assets.ts

@@ -159,7 +159,8 @@ export type ProtocolType =
   | 'yearn-v3'
   | 'venus'
   | 'sushiswap'
-  | 'native';
+  | 'native'
+  | 'wrapped-native';
 
 export type AssetMetadata = {
   circulatingSupply: number;

src/core/utils/swaps.ts

@@ -7,6 +7,7 @@ import {
 
 import { i18n } from '../languages';
 import { useConnectedToHardhatStore } from '../state/currentSettings/connectedToHardhat';
+import { ParsedSearchAsset } from '../types/assets';
 import { ChainId } from '../types/chains';
 
 import { isLowerCaseMatch } from './strings';
@@ -90,3 +91,18 @@ export const isWrapEth = ({
     )
   );
 };
+
+export const isWrapOrUnwrapEth = ({
+  assetToBuy,
+  assetToSell,
+}: {
+  assetToBuy: ParsedSearchAsset | null;
+  assetToSell: ParsedSearchAsset | null;
+}) => {
+  return (
+    assetToBuy?.chainId === assetToSell?.chainId &&
+    ((assetToBuy?.type === 'native' &&
+      assetToSell?.type === 'wrapped-native') ||
+      (assetToSell?.type === 'native' && assetToBuy?.type === 'wrapped-native'))
+  );
+};

src/entries/popup/hooks/swap/useSwapNativeAmounts.tsx

@@ -31,12 +31,12 @@ export const useSwapNativeAmounts = ({
     let nativeDisplay = null;
     if (isWrapOrUnwrapEth) {
       nativeDisplay =
-        !quote?.sellAmount || !quote?.sellTokenAsset?.price?.value
+        !quote?.sellAmount || !assetToSell?.price?.value
           ? null
           : convertRawAmountToNativeDisplay(
               quote?.sellAmount?.toString(),
               quote?.sellTokenAsset?.decimals || 18,
-              quote?.sellTokenAsset?.price?.value,
+              assetToSell?.price?.value,
               currentCurrency,
             );
     } else if (assetToSell?.native?.price?.amount && assetToSellValue) {
@@ -69,11 +69,12 @@ export const useSwapNativeAmounts = ({
   }, [
     isWrapOrUnwrapEth,
     assetToSell?.native?.price?.amount,
+    assetToSell?.price?.value,
     assetToSellValue,
     currentCurrency,
     quote?.sellAmount,
-    quote?.sellTokenAsset?.price?.value,
     quote?.sellTokenAsset?.decimals,
+    quote?.sellTokenAsset?.price?.value,
     quote?.sellAmountInEth,
   ]);
 

src/entries/popup/pages/swap/SwapTokenInput/TokenInfo/TokenToBuyInfo.tsx

@@ -12,6 +12,7 @@ import {
   lessThan,
   subtract,
 } from '~/core/utils/numbers';
+import { isWrapOrUnwrapEth } from '~/core/utils/swaps';
 import {
   Box,
   Column,
@@ -24,6 +25,7 @@ import { CursorTooltip } from '~/entries/popup/components/Tooltip/CursorTooltip'
 
 export const TokenToBuyInfo = ({
   assetToBuy,
+  assetToSell,
   assetToBuyValue,
   assetToBuyNativeDisplay,
   assetToSellNativeDisplay,
@@ -47,13 +49,17 @@ export const TokenToBuyInfo = ({
   }, [assetToBuy?.native?.price?.amount, currentCurrency, assetToBuyValue]);
 
   const nativeValueDifferenceDisplay = useMemo(() => {
+    const isWrapOrUnwrap = isWrapOrUnwrapEth({ assetToBuy, assetToSell });
+
     if (
       !assetToSellNativeDisplay?.amount ||
       assetToSellNativeDisplay?.amount === '0' ||
       !assetToBuyNativeDisplay?.amount ||
-      assetToBuyNativeDisplay?.amount === '0'
-    )
+      assetToBuyNativeDisplay?.amount === '0' ||
+      isWrapOrUnwrap
+    ) {
       return null;
+    }
     const division = divide(
       subtract(assetToBuyNativeDisplay.amount, assetToSellNativeDisplay.amount),
       assetToBuyNativeDisplay.amount,
@@ -62,7 +68,12 @@ export const TokenToBuyInfo = ({
       lessThan(abs(division), 0.01) ? '-0.01' : division,
     );
     return nativeDifference;
-  }, [assetToBuyNativeDisplay, assetToSellNativeDisplay]);
+  }, [
+    assetToBuy,
+    assetToSell,
+    assetToBuyNativeDisplay,
+    assetToSellNativeDisplay,
+  ]);
 
   if (!assetToBuy) return null;
   return (

yarn.lock

@@ -3932,10 +3932,10 @@
     eventemitter3 "5.0.1"
     viem "1.21.4"
 
-"@rainbow-me/swaps@0.23.0":
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/@rainbow-me/swaps/-/swaps-0.23.0.tgz#888e61a302e0f642e4ac7c5f58e6bd6d90b7c953"
-  integrity sha512-r6xF2v6bPguz7ytHO/UY+IjvyI8QqbytuXikXT8zCp1TVcXYWESsxJbVsGHd4utJOswSt5M7H1He0wY7shBh6g==
+"@rainbow-me/swaps@0.24.0":
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/@rainbow-me/swaps/-/swaps-0.24.0.tgz#c5436bb1caf584a4e580cf6ca5117a998152010c"
+  integrity sha512-j696H7RUdu4KeHZR55bGBMJ6a+dx3zGF5Y7Nv89vUrkSGaXfakDCBvYlGhHzNMxYX/jFd+jXm5v0Y8ZQUNBQcg==
   dependencies:
     "@ethereumjs/util" "9.0.0"
     "@ethersproject/abi" "5.7.0"